use DomElementStyles

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

---

Important

Refactor style handling by introducing DomElementStyles type and updating related code to use this new type.

• Refactor:
  • Introduce DomElementStyles type in element.ts to encapsulate defined and computed styles.
  • Update getStyles() in style.ts (both apps/studio/electron/preload/webview/elements and apps/web/preload/script/api/elements) to return DomElementStyles.
• Code Updates:
  • Modify ElementManager in index.ts to use DomElementStyles for style handling.
  • Update OverlayManager and OverlayState in overlay/index.ts and overlay/state.ts to handle DomElementStyles.
  • Adjust ClickRect component in ClickRect.tsx to utilize DomElementStyles for rendering styles.
• Misc:
  • Remove redundant merging of computed and defined styles in ElementManager and OverlayManager.

^{This description was created by for 580ae4e. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 580ae4e in 1 minute and 56 seconds. Click for details.

• Reviewed 212 lines of code in 8 files
• Skipped 0 files when reviewing.
• Skipped posting 15 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. apps/studio/electron/preload/webview/elements/style.ts:1

• Draft comment:
  Good update: using DomElementStyles as return type. Ensure that default inline/stylesheet merging (lines 10-15) produces correct styles with defaults (like auto width/height).
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. apps/studio/src/lib/editor/engine/element/index.ts:85

• Draft comment:
  Passing domEl.styles directly instead of merging computed/defined is acceptable now. Confirm that downstream consumers (e.g., ClickRect) handle a null styles value gracefully.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

3. apps/studio/src/lib/editor/engine/overlay/index.ts:30

• Draft comment:
  The clickRects array now uses styles as 'DomElementStyles | null'. Ensure that all consumers use optional chaining (e.g., styles?.computed) to avoid runtime errors.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

4. apps/studio/src/lib/editor/engine/overlay/state.ts:11

• Draft comment:
  Updated ClickRectState now explicitly types styles as DomElementStyles | null. This is consistent; just ensure downstream components check for null.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

5. apps/studio/src/routes/editor/Canvas/Overlay/ClickRect.tsx:305

• Draft comment:
  Access to defined styles for dimension labels is now done via styles?.defined.width. Verify that the intended fallback behavior occurs when styles is null.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

6. apps/studio/src/routes/editor/Canvas/Overlay/ClickRect.tsx:359

• Draft comment:
  Using styles?.computed['borderRadius'] in ResizeHandles is correct, but confirm that undefined values are handled as intended.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

7. apps/web/preload/script/api/elements/style.ts:1

• Draft comment:
  Consistent type usage with DomElementStyles in the web preload script. No issues noted.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

8. packages/models/src/element/element.ts:13

• Draft comment:
  DomElement interface now uses DomElementStyles. This unifies style handling. Confirm that backward compatibility is maintained where applicable.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

9. General:0

• Draft comment:
  PR description mentions adding better onboarding docs, but the changes focus on using DomElementStyles. Make sure the documentation updates are intended, or update the PR description accordingly.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

10. apps/studio/electron/preload/webview/elements/style.ts:5

• Draft comment:
  getStyles now returns a DomElementStyles object. Ensure that merging inline and stylesheet styles (lines 10–15) properly handles conflicts and that all expected style properties are captured.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

11. apps/studio/src/lib/editor/engine/element/index.ts:88

• Draft comment:
  Click handling now passes domEl.styles directly. Verify that downstream consumers properly handle a null value for styles.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

12. apps/studio/src/lib/editor/engine/overlay/state.ts:11

• Draft comment:
  ClickRectState now requires a 'styles' field of type DomElementStyles | null. Ensure all consumers check for a null value before accessing sub-properties.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

13. apps/studio/src/routes/editor/Canvas/Overlay/ClickRect.tsx:305

• Draft comment:
  Usage of optional chaining (e.g. styles?.defined.width) ensures safe fallback when styles is null. Confirm that both 'defined' and 'computed' properties are populated as expected when styles are present.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

14. apps/studio/src/routes/editor/Canvas/Overlay/index.tsx:64

• Draft comment:
  Passing rectState.styles without a fallback is now acceptable as consumers are updated; ensure that components handle a null styles value gracefully.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

15. GLOBAL:1

• Draft comment:
  The PR description references onboarding docs improvements, but the code changes focus on using DomElementStyles. Please update the PR description to accurately reflect these changes.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_ApMDodIzTQ7mh6JP

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}