From 6730eb41c2b740a9379a6aba340f525d328aa749 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Mon, 19 Apr 2021 17:29:13 +0200
Subject: [PATCH] fix: scrollToContent only on visible elements (#3466)

---
 src/components/App.tsx | 7 +------
 src/element/index.ts   | 5 +++++
 src/scene/scroll.ts    | 8 +++++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 80f720ee..4d3fc13e 100644
--- a/src/components/App.tsx
+++ b/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(
-        getNonDeletedElements(remoteElements),
-        this.state,
-        this.canvas,
-      ),
+      ...calculateScrollCenter(remoteElements, this.state, this.canvas),
     });
   };
 
diff --git a/src/element/index.ts b/src/element/index.ts
index 63fdcfff..bf12e118 100644
--- a/src/element/index.ts
+++ b/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,
diff --git a/src/scene/scroll.ts b/src/scene/scroll.ts
index c42341fc..b2fe46a4 100644
--- a/src/scene/scroll.ts
+++ b/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,