From bfc8415554cae103b817ab5d0c00c0579aa6524d Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Sat, 10 Apr 2021 03:09:16 +0530
Subject: [PATCH] feat: poll to detect if position of excalidraw was updated
 and allow consumer to disable it

---
 src/components/App.tsx            | 19 +++++++++++++++++--
 src/constants.ts                  |  1 +
 src/excalidraw-app/index.tsx      |  1 +
 src/packages/excalidraw/index.tsx |  2 ++
 src/types.ts                      |  2 ++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 35519e193..4af09cdf5 100644
--- a/src/components/App.tsx
+++ b/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
 
diff --git a/src/constants.ts b/src/constants.ts
index f458705fa..514fd9f8b 100644
--- a/src/constants.ts
+++ b/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
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index 963e50398..51ccd60a8 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -325,6 +325,7 @@ const ExcalidrawWrapper = () => {
         langCode={langCode}
         renderCustomStats={renderCustomStats}
         detectScroll={false}
+        detectPositionChange={false}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index 3278169e0..82580540c 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/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>
   );
diff --git a/src/types.ts b/src/types.ts
index e2d52f824..6867489ef 100644
--- a/src/types.ts
+++ b/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;
 };