From 9b1c88eed975a867905b6a41eb94a663d108db66 Mon Sep 17 00:00:00 2001
From: dwelle <luzar.david@gmail.com>
Date: Fri, 1 Sep 2023 14:49:26 +0200
Subject: [PATCH] fix elements insert position and viewport centering

---
 src/components/App.tsx                 |  9 ++++++++-
 src/components/MermaidToExcalidraw.tsx | 28 +++++++++-----------------
 src/data/transform.ts                  | 23 ++-------------------
 src/types.ts                           |  1 +
 4 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 13ae637a2..a03c1180d 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2244,11 +2244,12 @@ class App extends React.Component<AppProps, AppState> {
     },
   );
 
-  private addElementsFromPasteOrLibrary = (opts: {
+  addElementsFromPasteOrLibrary = (opts: {
     elements: readonly ExcalidrawElement[];
     files: BinaryFiles | null;
     position: { clientX: number; clientY: number } | "cursor" | "center";
     retainSeed?: boolean;
+    fitToContent?: boolean;
   }) => {
     const elements = restoreElements(opts.elements, null, undefined);
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);
@@ -2353,6 +2354,12 @@ class App extends React.Component<AppProps, AppState> {
       },
     );
     this.setActiveTool({ type: "selection" });
+
+    if (opts.fitToContent) {
+      this.scrollToContent(newElements, {
+        fitToContent: true,
+      });
+    }
   };
 
   private addTextFromPaste(text: string, isPlainPaste = false) {
diff --git a/src/components/MermaidToExcalidraw.tsx b/src/components/MermaidToExcalidraw.tsx
index 37e432321..7ad6f020e 100644
--- a/src/components/MermaidToExcalidraw.tsx
+++ b/src/components/MermaidToExcalidraw.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { AppState, BinaryFiles, NormalizedZoomValue } from "../types";
+import { AppState, BinaryFiles } from "../types";
 import { updateActiveTool } from "../utils";
 import { useApp, useExcalidrawSetAppState } from "./App";
 import { Button } from "./Button";
@@ -140,17 +140,9 @@ const MermaidToExcalidraw = ({
           mermaidToExcalidrawLib.current.graphToExcalidraw(mermaidGraphData);
 
         data.current = {
-          elements: convertToExcalidrawElements(
-            elements,
-            {
-              ...appState,
-              zoom: { ...appState.zoom, value: 1 as NormalizedZoomValue },
-            },
-            {
-              regenerateIds: true,
-              transformViewportToSceneCoords: true,
-            },
-          ),
+          elements: convertToExcalidrawElements(elements, {
+            regenerateIds: true,
+          }),
           files,
         };
         const parent = canvasNode.parentElement!;
@@ -186,12 +178,12 @@ const MermaidToExcalidraw = ({
 
   const onSelect = () => {
     const { elements: newElements, files } = data.current;
-    app.scene.replaceAllElements([...elements, ...newElements]);
-    app.addFiles(Object.values(files || []));
-    app.scrollToContent(newElements);
-
-    app.setSelection(newElements);
-
+    app.addElementsFromPasteOrLibrary({
+      elements: newElements,
+      files,
+      position: "center",
+      fitToContent: true,
+    });
     onClose();
   };
 
diff --git a/src/data/transform.ts b/src/data/transform.ts
index 6ab140d1f..01dba7691 100644
--- a/src/data/transform.ts
+++ b/src/data/transform.ts
@@ -38,14 +38,9 @@ import {
   VerticalAlign,
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
-import {
-  assertNever,
-  getFontString,
-  viewportCoordsToSceneCoords,
-} from "../utils";
+import { assertNever, getFontString } from "../utils";
 import { getSizeFromPoints } from "../points";
 import { nanoid } from "nanoid";
-import { AppState } from "../types";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -392,8 +387,7 @@ class ElementStore {
 
 export const convertToExcalidrawElements = (
   elements: ExcalidrawElementSkeleton[] | null,
-  appState?: AppState,
-  opts?: { regenerateIds: boolean; transformViewportToSceneCoords: boolean },
+  opts?: { regenerateIds: boolean },
 ) => {
   if (!elements) {
     return [];
@@ -411,19 +405,6 @@ export const convertToExcalidrawElements = (
       Object.assign(element, { id: nanoid() });
     }
 
-    // transform viewport coords to scene coordinates
-    if (opts?.transformViewportToSceneCoords && appState) {
-      const { x, y } = viewportCoordsToSceneCoords(
-        {
-          clientX: element.x,
-          clientY: element.y,
-        },
-        appState,
-      );
-
-      Object.assign(element, { x, y });
-    }
-
     switch (element.type) {
       case "rectangle":
       case "ellipse":
diff --git a/src/types.ts b/src/types.ts
index deb4427f2..d27f44569 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -528,6 +528,7 @@ export type AppClassProperties = {
   scrollToContent: App["scrollToContent"];
   addFiles: App["addFiles"];
   setSelection: App["setSelection"];
+  addElementsFromPasteOrLibrary: App["addElementsFromPasteOrLibrary"];
 };
 
 export type PointerDownState = Readonly<{