Add editor scroll handler (#13)

electron/preload/webview/elements/index.ts

@@ -1,6 +1,6 @@
-import { EditorAttributes } from "../../../../common/constants";
-import { ElementMetadata } from "../../../../common/models";
 import { finder } from "./finder";
+import { EditorAttributes } from "/common/constants";
+import { ElementMetadata } from "/common/models";
 
 export const handleMouseEvent = (e: MouseEvent): Object => {
     if (!e.metaKey) {

electron/preload/webview/eventBridge.ts

@@ -14,10 +14,10 @@ export class EventBridge {
         'click': handleMouseEvent,
         'dblclick': handleMouseEvent,
         'wheel': (e: WheelEvent) => {
-            return {}
+            return { x: window.scrollX, y: window.scrollY }
         },
         'scroll': (e: Event) => {
-            return {}
+            return { x: window.scrollX, y: window.scrollY }
         },
         'dom-ready': () => {
             const { body } = document;

src/lib/editor/eventHandler.ts

@@ -37,6 +37,8 @@ export class WebviewEventHandler {
                     console.error('No args found for mouseover event');
                     return;
                 }
+                const scrollPosition: { x: number, y: number } = JSON.parse(e.args[0]);
+                overlayManager.updateScroll(scrollPosition);
             },
         };
 

src/lib/editor/overlay/index.ts

@@ -6,6 +6,7 @@ export class OverlayManager {
     clickedRects: ClickRect[]
     parentRect: ParentRect
     editRect: EditRect
+    scrollPosition: { x: number, y: number } = { x: 0, y: 0 }
 
     constructor() {
         this.hoverRect = new HoverRect();
@@ -80,6 +81,14 @@ export class OverlayManager {
         this.removeEditRect()
     }
 
+    updateScroll = ({ x, y }: { x: number, y: number }) => {
+        this.scrollPosition = { x, y }
+        this.hoverRect.applyScroll(x, y)
+        this.clickedRects.forEach(clickRect => {
+            clickRect.applyScroll(x, y)
+        })
+    }
+
     addClickRect = (rect: DOMRect, computerStyle: CSSStyleDeclaration) => {
         const clickRect = new ClickRect()
         this.appendRectToPopover(clickRect.element)

src/lib/editor/overlay/rect.ts

@@ -51,6 +51,11 @@ export class RectImpl implements Rect {
         this.rectElement.setAttribute('height', height.toString())
         this.element.style.top = `${top}px`
         this.element.style.left = `${left}px`
+        this.element.style.transform = 'translate(0, 0)'
+    }
+
+    applyScroll(scrollX: number, scrollY: number) {
+        this.element.style.transform = `translate(${-scrollX}px, ${-scrollY}px)`
     }
 }
 

src/routes/project/webview/WebviewArea.tsx

@@ -14,7 +14,7 @@ function WebviewArea() {
         {
             id: nanoid(),
             title: 'Desktop',
-            src: 'https://www.framer.com/',
+            src: 'https://www.github.com/',
         },
     ];
 

tsconfig.json

@@ -23,6 +23,9 @@
     "paths": {
       "@/*": [
         "src/*"
+      ],
+      "/*": [
+        "./*"
       ]
     },
   },

vite.config.ts

@@ -16,7 +16,8 @@ export default defineConfig(({ command }) => {
   return {
     resolve: {
       alias: {
-        '@': path.join(__dirname, 'src')
+        '@': path.join(__dirname, 'src'),
+        'common': path.join(__dirname, 'common'),
       },
     },
     plugins: [