fix elements insert position and viewport centering

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) {

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 },
-            },
-            {
+          elements: convertToExcalidrawElements(elements, {
             regenerateIds: true,
-              transformViewportToSceneCoords: 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();
   };
 

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":

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<{