revert frameid change in studio

apps/studio/electron/preload/webview/dom.ts

@@ -114,7 +114,7 @@ function processNode(node: HTMLElement): LayerNode {
         tagName: node.tagName.toLowerCase(),
         isVisible: style.visibility !== 'hidden',
         component: component || null,
-        frameId: getWebviewId(),
+        webviewId: getWebviewId(),
         children: null,
         parent: null,
     };

apps/studio/electron/preload/webview/elements/dom/remove.ts

@@ -29,7 +29,7 @@ export function getRemoveActionFromDomId(
         type: 'remove-element',
         targets: [
             {
-                frameId: webviewId,
+                webviewId,
                 domId: actionEl.domId,
                 oid: actionEl.oid,
             },

apps/studio/electron/preload/webview/elements/helpers.ts

@@ -35,7 +35,7 @@ export const getDomElement = (el: HTMLElement, getStyle: boolean): DomElement =>
     const parentDomElement: ParentDomElement | null = parent
         ? {
               domId: parent.getAttribute(EditorAttributes.DATA_ONLOOK_DOM_ID) as string,
-              frameId: getWebviewId(),
+              webviewId: getWebviewId(),
               oid: parent.getAttribute(EditorAttributes.DATA_ONLOOK_ID) as string,
               instanceId: parent.getAttribute(EditorAttributes.DATA_ONLOOK_INSTANCE_ID) as string,
               rect: parent.getBoundingClientRect() as DOMRect,
@@ -47,7 +47,7 @@ export const getDomElement = (el: HTMLElement, getStyle: boolean): DomElement =>
     const domElement: DomElement = {
         domId: el.getAttribute(EditorAttributes.DATA_ONLOOK_DOM_ID) as string,
         oid: el.getAttribute(EditorAttributes.DATA_ONLOOK_ID) as string,
-        frameId: getWebviewId(),
+        webviewId: getWebviewId(),
         instanceId: el.getAttribute(EditorAttributes.DATA_ONLOOK_INSTANCE_ID) as string,
         rect,
         tagName: el.tagName,

apps/studio/src/lib/editor/engine/action/index.ts

@@ -82,7 +82,7 @@ export class ActionManager {
 
     updateStyle({ targets }: UpdateStyleAction) {
         targets.forEach((target) => {
-            const webview = this.editorEngine.webviews.getWebview(target.frameId);
+            const webview = this.editorEngine.webviews.getWebview(target.webviewId);
             if (!webview) {
                 console.error('Failed to get webview');
                 return;
@@ -112,7 +112,7 @@ export class ActionManager {
 
     private insertElement({ targets, element, editText, location }: InsertElementAction) {
         targets.forEach((elementMetadata) => {
-            const webview = this.editorEngine.webviews.getWebview(elementMetadata.frameId);
+            const webview = this.editorEngine.webviews.getWebview(elementMetadata.webviewId);
             if (!webview) {
                 console.error('Failed to get webview');
                 return;
@@ -127,7 +127,7 @@ export class ActionManager {
 
     private removeElement({ targets, location }: RemoveElementAction) {
         targets.forEach((target) => {
-            const webview = this.editorEngine.webviews.getWebview(target.frameId);
+            const webview = this.editorEngine.webviews.getWebview(target.webviewId);
             if (!webview) {
                 console.error('Failed to get webview');
                 return;
@@ -140,7 +140,7 @@ export class ActionManager {
 
     private moveElement({ targets, location }: MoveElementAction) {
         targets.forEach((target) => {
-            const webview = this.editorEngine.webviews.getWebview(target.frameId);
+            const webview = this.editorEngine.webviews.getWebview(target.webviewId);
             if (!webview) {
                 console.error('Failed to get webview');
                 return;
@@ -154,7 +154,7 @@ export class ActionManager {
 
     private editText({ targets, newContent }: EditTextAction) {
         targets.forEach((target) => {
-            const webview = this.editorEngine.webviews.getWebview(target.frameId);
+            const webview = this.editorEngine.webviews.getWebview(target.webviewId);
             if (!webview) {
                 console.error('Failed to get webview');
                 return;
@@ -167,7 +167,7 @@ export class ActionManager {
     }
 
     private groupElements({ parent, container, children }: GroupElementsAction) {
-        const webview = this.editorEngine.webviews.getWebview(parent.frameId);
+        const webview = this.editorEngine.webviews.getWebview(parent.webviewId);
         if (!webview) {
             console.error('Failed to get webview');
             return;
@@ -176,7 +176,7 @@ export class ActionManager {
     }
 
     private ungroupElements({ parent, container, children }: UngroupElementsAction) {
-        const webview = this.editorEngine.webviews.getWebview(parent.frameId);
+        const webview = this.editorEngine.webviews.getWebview(parent.webviewId);
         if (!webview) {
             console.error('Failed to get webview');
             return;
@@ -186,7 +186,7 @@ export class ActionManager {
 
     private insertImage({ targets, image }: InsertImageAction) {
         targets.forEach((target) => {
-            const webview = this.editorEngine.webviews.getWebview(target.frameId);
+            const webview = this.editorEngine.webviews.getWebview(target.webviewId);
             if (!webview) {
                 console.error('Failed to get webview');
                 return;
@@ -200,7 +200,7 @@ export class ActionManager {
 
     private removeImage({ targets }: RemoveImageAction) {
         targets.forEach((target) => {
-            const webview = this.editorEngine.webviews.getWebview(target.frameId);
+            const webview = this.editorEngine.webviews.getWebview(target.webviewId);
             if (!webview) {
                 console.error('Failed to get webview');
                 return;

apps/studio/src/lib/editor/engine/ast/layers.ts

@@ -27,7 +27,7 @@ export class LayersManager {
             return this.layers;
         }
         return this.layers.filter((layer) =>
-            selectedWebviews.some((webview) => webview.id === layer.frameId),
+            selectedWebviews.some((webview) => webview.id === layer.webviewId),
         );
     }
 

apps/studio/src/lib/editor/engine/chat/context.ts

@@ -122,7 +122,7 @@ export class ChatContext {
         if (this.editorEngine.elements.selected.length === 0) {
             return null;
         }
-        const webviewId = this.editorEngine.elements.selected[0].frameId;
+        const webviewId = this.editorEngine.elements.selected[0].webviewId;
         if (!webviewId) {
             return null;
         }

apps/studio/src/lib/editor/engine/copy/index.ts

@@ -26,7 +26,7 @@ export class CopyManager {
             return;
         }
         const selectedEl = this.editorEngine.elements.selected[0];
-        const webviewId = selectedEl.frameId;
+        const webviewId = selectedEl.webviewId;
         const webview = this.editorEngine.webviews.getWebview(webviewId);
         if (!webview) {
             console.error('Failed to get webview');
@@ -73,7 +73,7 @@ export class CopyManager {
         const targets: Array<ActionTarget> = this.editorEngine.elements.selected.map(
             (selectedEl) => {
                 const target: ActionTarget = {
-                    frameId: selectedEl.frameId,
+                    webviewId: selectedEl.webviewId,
                     domId: selectedEl.domId,
                     oid: selectedEl.oid,
                 };
@@ -167,7 +167,7 @@ export class CopyManager {
     }
 
     async getInsertLocation(selectedEl: DomElement): Promise<ActionLocation | undefined> {
-        const webviewId = selectedEl.frameId;
+        const webviewId = selectedEl.webviewId;
         const webview = this.editorEngine.webviews.getWebview(webviewId);
         if (!webview) {
             console.error('Failed to get webview');

apps/studio/src/lib/editor/engine/element/index.ts

@@ -37,7 +37,7 @@ export class ElementManager {
 
         const webviewEl: DomElement = {
             ...domEl,
-            frameId: webview.id,
+            webviewId: webview.id,
         };
         const adjustedRect = adaptRectToCanvas(webviewEl.rect, webview);
         const isComponent = !!domEl.instanceId;
@@ -54,7 +54,7 @@ export class ElementManager {
         const selectedEl = this.selected[0];
         const hoverEl = this.hovered;
 
-        const webViewId = selectedEl.frameId;
+        const webViewId = selectedEl.webviewId;
         const webview = this.editorEngine.webviews.getWebview(webViewId);
         if (!webview) {
             return;
@@ -137,7 +137,7 @@ export class ElementManager {
         }
 
         for (const selectedEl of selected) {
-            const webviewId = selectedEl.frameId;
+            const webviewId = selectedEl.webviewId;
             const webview = this.editorEngine.webviews.getWebview(webviewId);
             if (!webview) {
                 return;

apps/studio/src/lib/editor/engine/group/index.ts

@@ -57,8 +57,8 @@ export class GroupManager {
             return null;
         }
 
-        const webviewId = elements[0].frameId;
-        const sameWebview = elements.every((el) => el.frameId === webviewId);
+        const webviewId = elements[0].webviewId;
+        const sameWebview = elements.every((el) => el.webviewId === webviewId);
 
         if (!sameWebview) {
             if (log) {
@@ -113,13 +113,13 @@ export class GroupManager {
         }
 
         const parentTarget: ActionTarget = {
-            frameId: webviewId,
+            webviewId,
             domId: anyParent.domId,
             oid: anyParent.oid,
         };
 
         const children: ActionTarget[] = selectedEls.map((el) => ({
-            webviewId: el.frameId,
+            webviewId: el.webviewId,
             domId: el.domId,
             oid: el.oid,
         }));
@@ -140,7 +140,7 @@ export class GroupManager {
     }
 
     async getUngroupAction(selectedEl: DomElement): Promise<UngroupElementsAction | null> {
-        const webview = this.editorEngine.webviews.getWebview(selectedEl.frameId);
+        const webview = this.editorEngine.webviews.getWebview(selectedEl.webviewId);
         if (!webview) {
             console.error('Failed to get webview');
             return null;
@@ -171,7 +171,7 @@ export class GroupManager {
         // Children to be spread where container was
         const targets: ActionTarget[] = actionContainer.children.map((child) => {
             return {
-                webviewId: selectedEl.frameId,
+                webviewId: selectedEl.webviewId,
                 domId: child.domId,
                 oid: child.oid,
             };

apps/studio/src/lib/editor/engine/image/index.ts

@@ -142,7 +142,7 @@ export class ImageManager {
         }
 
         const targets: ActionTarget[] = selected.map((element) => ({
-            webviewId: element.frameId,
+            webviewId: element.webviewId,
             domId: element.domId,
             oid: element.oid,
         }));

apps/studio/src/lib/editor/engine/index.ts

@@ -21,7 +21,6 @@ import { CodeManager } from './code';
 import { CopyManager } from './copy';
 import { ElementManager } from './element';
 import { ErrorManager } from './error';
-import { FilesManager } from './files';
 import { FontManager } from './font';
 import { GroupManager } from './group';
 import { HistoryManager } from './history';
@@ -30,6 +29,7 @@ import { InsertManager } from './insert';
 import { MoveManager } from './move';
 import { OverlayManager } from './overlay';
 import { PagesManager } from './pages';
+import { FilesManager } from './files';
 import { ProjectInfoManager } from './projectinfo';
 import { StyleManager } from './style';
 import { TextEditingManager } from './text';
@@ -273,7 +273,7 @@ export class EditorEngine {
             return;
         }
         const selectedEl = selected[0];
-        const webviewId = selectedEl.frameId;
+        const webviewId = selectedEl.webviewId;
         const webview = this.webviews.getWebview(webviewId);
         if (!webview) {
             return;

apps/studio/src/lib/editor/engine/insert/index.ts

@@ -196,7 +196,7 @@ export class InsertManager {
 
         const targets: Array<ActionTarget> = [
             {
-                frameId: webview.id,
+                webviewId: webview.id,
                 domId,
                 oid: null,
             },
@@ -271,7 +271,7 @@ export class InsertManager {
 
         const action: InsertElementAction = {
             type: 'insert-element',
-            targets: [{ frameId: webview.id, domId, oid }],
+            targets: [{ webviewId: webview.id, domId, oid }],
             element: imageElement,
             location,
             editText: false,
@@ -311,7 +311,7 @@ export class InsertManager {
 
                     domId: targetElement.domId,
                     oid: targetElement.oid,
-                    frameId: webview.id,
+                    webviewId: webview.id,
                 },
             ],
         };
@@ -352,7 +352,7 @@ export class InsertManager {
             type: 'insert-element',
             targets: [
                 {
-                    frameId: webview.id,
+                    webviewId: webview.id,
                     domId,
                     oid: null,
                 },

apps/studio/src/lib/editor/engine/move/index.ts

@@ -53,7 +53,7 @@ export class MoveManager {
             return;
         }
 
-        const webview = this.editorEngine.webviews.getWebview(this.dragTarget.frameId);
+        const webview = this.editorEngine.webviews.getWebview(this.dragTarget.webviewId);
         if (!webview) {
             console.error('No webview found for drag');
             return;
@@ -87,7 +87,7 @@ export class MoveManager {
             y: dragOrigin.y - dragTarget.rect.y,
         };
 
-        const webview = this.editorEngine.webviews.getWebview(dragTarget.frameId);
+        const webview = this.editorEngine.webviews.getWebview(dragTarget.webviewId);
         if (!webview) {
             console.error('No webview found for drag');
             return;
@@ -125,7 +125,7 @@ export class MoveManager {
             return;
         }
 
-        const webview = this.editorEngine.webviews.getWebview(this.dragTarget.frameId);
+        const webview = this.editorEngine.webviews.getWebview(this.dragTarget.webviewId);
         if (!webview) {
             console.error('No webview found for drag end');
             this.endAllDrag();
@@ -176,7 +176,7 @@ export class MoveManager {
     }
 
     async shiftElement(element: DomElement, direction: 'up' | 'down'): Promise<void> {
-        const webview = this.editorEngine.webviews.getWebview(element.frameId);
+        const webview = this.editorEngine.webviews.getWebview(element.webviewId);
         if (!webview) {
             return;
         }
@@ -242,7 +242,7 @@ export class MoveManager {
             },
             targets: [
                 {
-                    frameId: webviewId,
+                    webviewId,
                     domId: child.domId,
                     oid: child.instanceId || child.oid,
                 },

apps/studio/src/lib/editor/engine/overlay/index.ts

@@ -29,7 +29,7 @@ export class OverlayManager {
         this.state.updateHoverRect(null);
         const newClickRects: { rect: RectDimensions; styles: Record<string, string> }[] = [];
         for (const selectedElement of this.editorEngine.elements.selected) {
-            const webview = this.editorEngine.webviews.getWebview(selectedElement.frameId);
+            const webview = this.editorEngine.webviews.getWebview(selectedElement.webviewId);
             if (!webview) {
                 continue;
             }

apps/studio/src/lib/editor/engine/style/index.ts

@@ -3,12 +3,12 @@ import {
     type StyleActionTarget,
     type UpdateStyleAction,
 } from '@onlook/models/actions';
-import type { Font } from '@onlook/models/assets';
 import type { DomElement } from '@onlook/models/element';
 import { StyleChangeType, type StyleChange } from '@onlook/models/style';
-import { convertFontString } from '@onlook/utility';
 import { makeAutoObservable, reaction } from 'mobx';
 import type { EditorEngine } from '..';
+import type { Font } from '@onlook/models/assets';
+import { convertFontString } from '@onlook/utility';
 
 export interface SelectedStyle {
     styles: Record<string, string>;
@@ -129,7 +129,7 @@ export class StyleManager {
                 ),
             };
             const target: StyleActionTarget = {
-                frameId: selectedEl.frameId,
+                webviewId: selectedEl.webviewId,
                 domId: selectedEl.domId,
                 oid: this.mode === StyleMode.Instance ? selectedEl.instanceId : selectedEl.oid,
                 change: change,