feat: poll to detect if position of excalidraw was updated and allow consumer to disable it

src/components/App.tsx

@@ -46,6 +46,7 @@ import {
   CURSOR_TYPE,
   DEFAULT_UI_OPTIONS,
   DEFAULT_VERTICAL_ALIGN,
+  DETECT_POSITION_CHANGE_INTERVAL,
   DRAGGING_THRESHOLD,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
@@ -305,6 +306,8 @@ class App extends React.Component<AppProps, AppState> {
   private scene: Scene;
   private resizeObserver: ResizeObserver | undefined;
   private nearestScrollableContainer: HTMLElement | Document | undefined;
+  private detectPositionChangeIntervalId: NodeJS.Timeout | undefined;
+
   constructor(props: AppProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
@@ -788,6 +791,13 @@ class App extends React.Component<AppProps, AppState> {
     this.scene.addCallback(this.onSceneUpdated);
     this.addEventListeners();
 
+    if (this.props.detectPositionChange) {
+      this.detectPositionChangeIntervalId = setInterval(
+        this.updateOffsetsIfChanged,
+        DETECT_POSITION_CHANGE_INTERVAL,
+      );
+    }
+
     if ("ResizeObserver" in window && this.excalidrawContainerRef?.current) {
       this.resizeObserver = new ResizeObserver(() => {
         // compute isMobile state
@@ -829,6 +839,9 @@ class App extends React.Component<AppProps, AppState> {
     this.removeEventListeners();
     this.scene.destroy();
     clearTimeout(touchTimeout);
+    if (this.detectPositionChangeIntervalId) {
+      clearInterval(this.detectPositionChangeIntervalId);
+    }
     touchTimeout = 0;
   }
 
@@ -1091,7 +1104,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
 
-  private onScroll = debounce(() => {
+  private updateOffsetsIfChanged = () => {
     const { offsetTop, offsetLeft } = this.getCanvasOffsets();
     this.setState((state) => {
       if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {
@@ -1099,7 +1112,9 @@ class App extends React.Component<AppProps, AppState> {
       }
       return { offsetTop, offsetLeft };
     });
-  }, SCROLL_TIMEOUT);
+  };
+
+  private onScroll = debounce(this.updateOffsetsIfChanged, SCROLL_TIMEOUT);
 
   // Copy/paste
 

src/constants.ts

@@ -102,6 +102,7 @@ export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
 export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
+export const DETECT_POSITION_CHANGE_INTERVAL = 100;
 export const ZOOM_STEP = 0.1;
 
 // Report a user inactive after IDLE_THRESHOLD milliseconds

src/excalidraw-app/index.tsx

@@ -325,6 +325,7 @@ const ExcalidrawWrapper = () => {
         langCode={langCode}
         renderCustomStats={renderCustomStats}
         detectScroll={false}
+        detectPositionChange={false}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/packages/excalidraw/index.tsx

@@ -31,6 +31,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
     renderCustomStats,
     onPaste,
     detectScroll = true,
+    detectPositionChange = true,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -82,6 +83,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
         UIOptions={UIOptions}
         onPaste={onPaste}
         detectScroll={detectScroll}
+        detectPositionChange={detectPositionChange}
       />
     </InitializeApp>
   );

src/types.ts

@@ -196,6 +196,7 @@ export interface ExcalidrawProps {
   ) => JSX.Element;
   UIOptions?: UIOptions;
   detectScroll?: boolean;
+  detectPositionChange?: boolean;
 }
 
 export type SceneData = {
@@ -230,4 +231,5 @@ export type AppProps = ExcalidrawProps & {
     canvasActions: Required<CanvasActions>;
   };
   detectScroll: boolean;
+  detectPositionChange: boolean;
 };