[Fix] Center diagram properly when moving from diagram manager to dia…

…gram

src/function/FunctionDiagram.ts

@@ -49,12 +49,6 @@ export function changeDiagrams(diagram?: string) {
       }
     }
     setRepresentation(Diagrams[diagram].representation, diagram, false);
-    if (Diagrams[diagram].origin.x === 0 && Diagrams[diagram].origin.y === 0) {
-      centerDiagram();
-    } else {
-      paper.scale(Diagrams[diagram].scale, Diagrams[diagram].scale);
-      paper.translate(Diagrams[diagram].origin.x, Diagrams[diagram].origin.y);
-    }
     StoreSettings.update((s) => {
       s.selectedDiagram = diagram!;
     });
@@ -82,9 +76,15 @@ export function centerDiagram(
     x += elem.getBBox().x;
     y += elem.getBBox().y;
   }
+  const computedSize = p.getComputedSize();
+  if (computedSize.width === 0 && computedSize.height === 0) {
+    computedSize.width = document.getElementById("mainView")?.offsetWidth ?? 0;
+    computedSize.height =
+      document.getElementById("mainView")?.offsetHeight ?? 0;
+  }
   p.translate(
-    -((x / g.getElements().length) * scale) + p.getComputedSize().width / 2,
-    -((y / g.getElements().length) * scale) + p.getComputedSize().height / 2
+    -((x / g.getElements().length) * scale) + computedSize.width / 2,
+    -((y / g.getElements().length) * scale) + computedSize.height / 2
   );
   if (g === graph) updateDiagramPosition(AppSettings.selectedDiagram);
 }

src/main/DiagramCanvas.tsx

@@ -17,6 +17,7 @@ import {
 } from "../config/Variables";
 import { CellColors } from "../config/visual/CellColors";
 import {
+  centerDiagram,
   resetDiagramSelection,
   updateDiagramPosition,
   zoomDiagram,
@@ -130,6 +131,24 @@ export default class DiagramCanvas extends React.Component<Props> {
       },
     });
 
+    if (graph.getElements().length > 0) {
+      if (
+        Diagrams[AppSettings.selectedDiagram].origin.x === 0 &&
+        Diagrams[AppSettings.selectedDiagram].origin.y === 0
+      ) {
+        centerDiagram();
+      } else {
+        paper.scale(
+          Diagrams[AppSettings.selectedDiagram].scale,
+          Diagrams[AppSettings.selectedDiagram].scale
+        );
+        paper.translate(
+          Diagrams[AppSettings.selectedDiagram].origin.x,
+          Diagrams[AppSettings.selectedDiagram].origin.y
+        );
+      }
+    }
+
     /**
      * This handles all the various mouse events on the canvas and the elements within.
      * For more information on JointJS events visit

src/main/MainView.tsx

@@ -47,7 +47,7 @@ export const MainView: React.FC<Props> = (props: Props) => {
     timer = setTimeout(getStyle, 200);
   });
   return (
-    <div className={"mainView"} style={getStyle()}>
+    <div className={"mainView"} id={"mainView"} style={getStyle()}>
       {mode === MainViewMode.CANVAS && (
         <DiagramCanvas
           projectLanguage={props.projectLanguage}