listen editor capture scroll event to update mask coordinates system

packages/editor/src/components/Editor.tsx

@@ -160,8 +160,6 @@ export const Editor: React.FC<Props> = observer(
             flexDirection="column"
             width="full"
             height="full"
-            overflow="auto"
-            padding="20px"
             transform={`scale(${scale / 100})`}
             position="relative"
           >

packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx

@@ -132,6 +132,10 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {
       observeResize(eleMap);
       updateCoordinateSystem(eleMap);
     });
+
+    eventBus.on('captureEditorScroll', () => {
+      updateCoordinateSystem(eleMap);
+    });
   }, [eleMap, eventBus, observeResize, updateCoordinateSystem]);
 
   // listen elements resize and update coordinates

packages/editor/src/components/EditorMaskWrapper/EditorMaskWrapper.tsx

@@ -30,6 +30,7 @@ export const EditorMaskWrapper: React.FC<Props> = observer(props => {
   const onScroll = () => {
     if (wrapperRef.current) {
       setScrollOffset([wrapperRef.current.scrollLeft, wrapperRef.current.scrollTop]);
+      eventBus.send('captureEditorScroll');
     }
   };
 
@@ -74,17 +75,18 @@ export const EditorMaskWrapper: React.FC<Props> = observer(props => {
     <Box
       id="editor-mask-wrapper"
       width="full"
-      height="0"
-      flex="1"
-      overflow="visible"
+      overflow="auto"
       position="relative"
+      padding="20px"
       // some components stop click event propagation, so here we should capture onClick
       onClickCapture={onClick}
       onMouseMove={onMouseMove}
       onMouseLeave={onMouseLeave}
       onDragOver={onDragOver}
       onDrop={onDrop}
-      onScroll={onScroll}
+      // here we use capture to detect all the components and their children's scroll event
+      // because every scroll event may change their children's location in coordinates system
+      onScrollCapture={onScroll}
       ref={wrapperRef}
     >
       {children}

packages/editor/src/services/eventBus.ts

@@ -13,6 +13,7 @@ export type EventNames = {
   // it is only used for some operations' side effect
   selectComponent: string;
   HTMLElementsUpdated: undefined;
+  captureEditorScroll: undefined;
 };
 
 export const initEventBus = () => {
@@ -22,6 +23,6 @@ export const initEventBus = () => {
     off: emitter.off,
     send: emitter.emit,
   };
-}
+};
 
-export type EventBusType = ReturnType<typeof initEventBus>
+export type EventBusType = ReturnType<typeof initEventBus>;