fix: scrollToContent only on visible elements (#3466)

src/components/App.tsx

@@ -78,7 +78,6 @@ import {
   getCursorForResizingElement,
   getDragOffsetXY,
   getElementWithTransformHandleType,
-  getNonDeletedElements,
   getNormalizedDimensions,
   getPerfectElementSize,
   getResizeArrowDirection,
@@ -1402,11 +1401,7 @@ class App extends React.Component<AppProps, AppState> {
 
   setScrollToContent = (remoteElements: readonly ExcalidrawElement[]) => {
     this.setState({
-      ...calculateScrollCenter(
+      ...calculateScrollCenter(remoteElements, this.state, this.canvas),
-        getNonDeletedElements(remoteElements),
-        this.state,
-        this.canvas,
-      ),
     });
   };
 

src/element/index.ts

@@ -77,6 +77,11 @@ export const getElementMap = (elements: readonly ExcalidrawElement[]) =>
 export const getSceneVersion = (elements: readonly ExcalidrawElement[]) =>
   elements.reduce((acc, el) => acc + el.version, 0);
 
+export const getVisibleElements = (elements: readonly ExcalidrawElement[]) =>
+  elements.filter(
+    (el) => !el.isDeleted && !isInvisiblySmallElement(el),
+  ) as readonly NonDeletedExcalidrawElement[];
+
 export const getNonDeletedElements = (elements: readonly ExcalidrawElement[]) =>
   elements.filter(
     (element) => !element.isDeleted,

src/scene/scroll.ts

@@ -1,6 +1,10 @@
 import { AppState, PointerCoords, Zoom } from "../types";
 import { ExcalidrawElement } from "../element/types";
-import { getCommonBounds, getClosestElementBounds } from "../element";
+import {
+  getCommonBounds,
+  getClosestElementBounds,
+  getVisibleElements,
+} from "../element";
 
 import {
   sceneCoordsToViewportCoords,
@@ -53,6 +57,8 @@ export const calculateScrollCenter = (
   appState: AppState,
   canvas: HTMLCanvasElement | null,
 ): { scrollX: number; scrollY: number } => {
+  elements = getVisibleElements(elements);
+
   if (!elements.length) {
     return {
       scrollX: 0,