Merge branch 'main' into editor

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)`
  }
 }
 

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: [