fix: Fix centering element on init (#2445)

Co-authored-by: Andrés Rivera <andres@MBP.local>
Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -593,6 +593,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         scene.elements,
         {
           ...scene.appState,
+          width: this.state.width,
+          height: this.state.height,
           offsetTop: this.state.offsetTop,
           offsetLeft: this.state.offsetLeft,
         },

src/packages/excalidraw/CHANGELOG.MD

@@ -26,6 +26,7 @@ Please add the latest change on the top under the correct section.
 
 ### Fixes
 
+- Fix scroll-to-center on init for non-zero canvas offsets [#2445](https://github.com/excalidraw/excalidraw/pull/2445)
 - Hide collab button when onCollabButtonClick not supplied [#2598](https://github.com/excalidraw/excalidraw/pull/2598)
 - Fix resizing the pasted charts [#2586](https://github.com/excalidraw/excalidraw/pull/2586)
 - Fix element visibility and zoom on cursor when canvas offset isn't 0. [#2534](https://github.com/excalidraw/excalidraw/pull/2534)

src/tests/scroll.test.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { render, waitFor } from "./test-utils";
+import Excalidraw from "../packages/excalidraw/index";
+import { API } from "./helpers/api";
+
+const { h } = window;
+
+describe("appState", () => {
+  it("scroll-to-center on init works with non-zero offsets", async () => {
+    const WIDTH = 600;
+    const HEIGHT = 700;
+    const OFFSET_LEFT = 200;
+    const OFFSET_TOP = 100;
+
+    const ELEM_WIDTH = 100;
+    const ELEM_HEIGHT = 60;
+
+    await render(
+      <Excalidraw
+        width={WIDTH}
+        height={HEIGHT}
+        offsetLeft={OFFSET_LEFT}
+        offsetTop={OFFSET_TOP}
+        initialData={{
+          elements: [
+            API.createElement({
+              type: "rectangle",
+              id: "A",
+              width: ELEM_WIDTH,
+              height: ELEM_HEIGHT,
+            }),
+          ],
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(h.state.width).toBe(WIDTH);
+      expect(h.state.height).toBe(HEIGHT);
+      expect(h.state.offsetLeft).toBe(OFFSET_LEFT);
+      expect(h.state.offsetTop).toBe(OFFSET_TOP);
+
+      // assert scroll is in center
+      expect(h.state.scrollX).toBe(WIDTH / 2 - ELEM_WIDTH / 2);
+      expect(h.state.scrollY).toBe(HEIGHT / 2 - ELEM_HEIGHT / 2);
+    });
+  });
+});