use DomElementStyles (#1810)

Kitenite · web-flow · commit ad24e03c74c8 · 2025-04-24T11:17:28.000-04:00
diff --git a/apps/studio/electron/preload/webview/elements/style.ts b/apps/studio/electron/preload/webview/elements/style.ts
@@ -1,10 +1,8 @@
+import type { DomElementStyles } from '@onlook/models/element';
 import { jsonClone } from '@onlook/utility';
 import { elementFromDomId } from '/common/helpers';
 
-export function getStyles(element: HTMLElement): {
-    defined: Record<string, string>;
-    computed: Record<string, string>;
-} {
+export function getStyles(element: HTMLElement): DomElementStyles {
     const computed = getComputedStyle(element);
     const inline = getInlineStyles(element);
     const stylesheet = getStylesheetStyles(element);
diff --git a/apps/studio/src/lib/editor/engine/element/index.ts b/apps/studio/src/lib/editor/engine/element/index.ts
@@ -85,11 +85,7 @@ export class ElementManager {
         for (const domEl of domEls) {
             const adjustedRect = adaptRectToCanvas(domEl.rect, webview);
             const isComponent = !!domEl.instanceId;
-            this.editorEngine.overlay.state.addClickRect(
-                adjustedRect,
-                { ...domEl.styles?.computed, ...domEl.styles?.defined },
-                isComponent,
-            );
+            this.editorEngine.overlay.state.addClickRect(adjustedRect, domEl.styles, isComponent);
             this.addSelectedElement(domEl);
         }
     }
diff --git a/apps/studio/src/lib/editor/engine/overlay/index.ts b/apps/studio/src/lib/editor/engine/overlay/index.ts
@@ -1,4 +1,4 @@
-import type { DomElement } from '@onlook/models/element';
+import type { DomElement, DomElementStyles } from '@onlook/models/element';
 import { reaction } from 'mobx';
 import type { EditorEngine } from '..';
 import type { RectDimensions } from './rect';
@@ -27,7 +27,7 @@ export class OverlayManager {
 
     refreshOverlay = async () => {
         this.state.updateHoverRect(null);
-        const newClickRects: { rect: RectDimensions; styles: Record<string, string> }[] = [];
+        const newClickRects: { rect: RectDimensions; styles: DomElementStyles | null }[] = [];
         for (const selectedElement of this.editorEngine.elements.selected) {
             const webview = this.editorEngine.webviews.getWebview(selectedElement.webviewId);
             if (!webview) {
@@ -40,7 +40,7 @@ export class OverlayManager {
                 continue;
             }
             const adaptedRect = adaptRectToCanvas(el.rect, webview);
-            newClickRects.push({ rect: adaptedRect, styles: el.styles?.computed || {} });
+            newClickRects.push({ rect: adaptedRect, styles: el.styles });
         }
         this.state.removeClickRects();
         for (const clickRect of newClickRects) {
diff --git a/apps/studio/src/lib/editor/engine/overlay/state.ts b/apps/studio/src/lib/editor/engine/overlay/state.ts
@@ -1,3 +1,4 @@
+import type { DomElementStyles } from '@onlook/models/element';
 import { makeAutoObservable } from 'mobx';
 import { nanoid } from 'nanoid/non-secure';
 import type { RectDimensions } from './rect';
@@ -9,7 +10,7 @@ export interface MeasurementState {
 
 export interface ClickRectState extends RectDimensions {
     isComponent?: boolean;
-    styles?: Record<string, string>;
+    styles: DomElementStyles | null;
     id: string;
 }
 
@@ -48,7 +49,7 @@ export class OverlayState {
 
     addClickRect = (
         rect: RectDimensions,
-        styles: Record<string, string>,
+        styles: DomElementStyles | null,
         isComponent?: boolean,
     ) => {
         this.clickRects = [
diff --git a/apps/studio/src/routes/editor/Canvas/Overlay/ClickRect.tsx b/apps/studio/src/routes/editor/Canvas/Overlay/ClickRect.tsx
@@ -1,5 +1,6 @@
 import type { RectDimensions } from '@/lib/editor/engine/overlay/rect';
 import { adaptValueToCanvas } from '@/lib/editor/engine/overlay/utils';
+import type { DomElementStyles } from '@onlook/models/element';
 import { colors } from '@onlook/ui/tokens';
 import { nanoid } from 'nanoid';
 import { BaseRect } from './BaseRect';
@@ -90,7 +91,7 @@ const parseCssBoxValues = (
 
 interface ClickRectProps extends RectDimensions {
     isComponent?: boolean;
-    styles: Record<string, string>;
+    styles: DomElementStyles | null;
     shouldShowResizeHandles: boolean;
 }
 
@@ -104,10 +105,10 @@ export const ClickRect = ({
     shouldShowResizeHandles,
 }: ClickRectProps) => {
     const renderMarginLabels = () => {
-        if (!styles?.margin) {
+        if (!styles?.computed.margin) {
             return null;
         }
-        const { adjusted, original } = parseCssBoxValues(styles.margin);
+        const { adjusted, original } = parseCssBoxValues(styles.computed.margin);
 
         const patternId = `margin-pattern-${nanoid()}`;
         const maskId = `margin-mask-${nanoid()}`;
@@ -201,10 +202,10 @@ export const ClickRect = ({
     };
 
     const renderPaddingLabels = () => {
-        if (!styles?.padding) {
+        if (!styles?.computed.padding) {
             return null;
         }
-        const { adjusted, original } = parseCssBoxValues(styles.padding);
+        const { adjusted, original } = parseCssBoxValues(styles.computed.padding);
 
         const patternId = `padding-pattern-${nanoid()}`;
         const maskId = `padding-mask-${nanoid()}`;
@@ -301,8 +302,8 @@ export const ClickRect = ({
 
     const renderDimensionLabels = () => {
         const rectColor = isComponent ? colors.purple[500] : colors.red[500];
-        const displayWidth = parseFloat(styles?.width || '0').toFixed(0);
-        const displayHeight = parseFloat(styles?.height || '0').toFixed(0);
+        const displayWidth = parseFloat(styles?.defined.width || '0').toFixed(0);
+        const displayHeight = parseFloat(styles?.defined.height || '0').toFixed(0);
         const text = `${displayWidth} × ${displayHeight}`;
 
         // Constants from showDimensions
@@ -355,9 +356,9 @@ export const ClickRect = ({
                     height={height}
                     left={left}
                     top={top}
-                    borderRadius={parseInt(styles?.['borderRadius'] || '0')}
+                    borderRadius={parseInt(styles?.computed['borderRadius'] || '0')}
                     isComponent={isComponent}
-                    styles={styles}
+                    styles={styles?.computed ?? {}}
                 />
             )}
         </BaseRect>
diff --git a/apps/studio/src/routes/editor/Canvas/Overlay/index.tsx b/apps/studio/src/routes/editor/Canvas/Overlay/index.tsx
@@ -51,7 +51,7 @@ export const Overlay = observer(({ children }: { children: React.ReactNode }) =>
                     top={rectState.top}
                     left={rectState.left}
                     isComponent={rectState.isComponent}
-                    styles={rectState.styles ?? {}}
+                    styles={rectState.styles}
                     shouldShowResizeHandles={isSingleSelection}
                 />
             )),
diff --git a/apps/web/preload/script/api/elements/style.ts b/apps/web/preload/script/api/elements/style.ts
@@ -1,10 +1,8 @@
+import type { DomElementStyles } from '@onlook/models/element';
 import { jsonClone } from '@onlook/utility';
 import { elementFromDomId } from '../../helpers';
 
-export function getStyles(element: HTMLElement): {
-    defined: Record<string, string>;
-    computed: Record<string, string>;
-} {
+export function getStyles(element: HTMLElement): DomElementStyles {
     const computed = getElComputedStyle(element);
     const inline = getInlineStyles(element);
     const stylesheet = getStylesheetStyles(element);
diff --git a/packages/models/src/element/element.ts b/packages/models/src/element/element.ts
@@ -10,13 +10,15 @@ export interface ParentDomElement extends BaseDomElement {}
 
 export interface DomElement extends BaseDomElement {
     tagName: string;
-    styles: {
-        defined: Record<string, string>; // Styles from stylesheets or inline
-        computed: Record<string, string>; // Browser computed styles
-    } | null;
+    styles: DomElementStyles | null;
     parent: ParentDomElement | null;
 }
 
+export interface DomElementStyles {
+    defined: Record<string, string>; // Styles from stylesheets or inline
+    computed: Record<string, string>; // Browser computed styles
+}
+
 export interface ElementPosition {
     x: number;
     y: number;

Original file line number	Diff line number	Diff line change
`@@ -85,11 +85,7 @@ export class ElementManager {`
`85`	`85`	`for (const domEl of domEls) {`
`86`	`86`	`const adjustedRect = adaptRectToCanvas(domEl.rect, webview);`
`87`	`87`	`const isComponent = !!domEl.instanceId;`
`88`		`- this.editorEngine.overlay.state.addClickRect(`
`89`		`- adjustedRect,`
`90`		`- { ...domEl.styles?.computed, ...domEl.styles?.defined },`
`91`		`- isComponent,`
`92`		`- );`
	`88`	`+ this.editorEngine.overlay.state.addClickRect(adjustedRect, domEl.styles, isComponent);`
`93`	`89`	`this.addSelectedElement(domEl);`
`94`	`90`	`}`
`95`	`91`	`}`