From c405b437fb928c94600208d39e36a5eff93a16e0 Mon Sep 17 00:00:00 2001
From: basstal <330475004@qq.com>
Date: Thu, 22 Sep 2022 10:26:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E3=80=81=E6=92=A4=E9=94=80?=
 =?UTF-8?q?=E3=80=81=E6=81=A2=E5=A4=8D=E6=89=A7=E8=A1=8C=E5=90=8E=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E4=BF=9D=E6=8C=81=E4=B8=8D=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 render-process/Editor/index.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx
index 3004e56..847117b 100644
--- a/render-process/Editor/index.tsx
+++ b/render-process/Editor/index.tsx
@@ -16,6 +16,7 @@ import Settings from "../../main-process/Settings";
 
 import "./Editor.css";
 import { clipboard } from "electron";
+import { Matrix } from '@antv/g6/lib/types';
 
 export interface EditorProps {
     filepath: string;
@@ -25,6 +26,7 @@ export interface EditorProps {
 interface EditorState {
     curNodeId?: string;
     blockNodeSelectChange?: boolean;
+    viewportMatrix?: Matrix
 }
 
 export default class Editor extends React.Component<EditorProps, EditorState> {
@@ -115,6 +117,12 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             },
         });
 
+        graph.on("viewportchange", (data: any) => {
+            if (data.action == 'translate' || data.action == 'zoom') {
+                this.state.viewportMatrix = data.matrix
+            }
+        })
+
         graph.on("contextmenu", (e: G6GraphEvent) => {
             require("@electron/remote").Menu.getApplicationMenu().popup();
         });
@@ -287,6 +295,15 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         this.forceUpdate();
     }
 
+    /**
+     * remember the last matrix that triggered by Translate or Zoom action , and restore that matrix where the graph is reconstruct.
+     */
+    restoreViewport() {
+        if (this.state.viewportMatrix) {
+            this.graph.getGroup().setMatrix(this.state.viewportMatrix);
+        }
+    }
+
     onSelectNode(curNodeId: string | null) {
         const graph = this.graph;
 
@@ -373,7 +390,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         this.graph.set("animate", false);
         this.graph.changeData(Utils.createTreeData(root, this.settings));
         this.graph.layout();
-        this.graph.fitCenter();
+        this.restoreViewport();
         this.graph.set("animate", true);
     }
 
@@ -431,7 +448,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         this.graph.set("animate", false);
         this.graph.changeData(Utils.createTreeData(data, this.settings));
         this.graph.layout();
-        this.graph.fitCenter();
+        this.restoreViewport();
         this.graph.set("animate", true);
 
         this.props.onChangeSaveState(true);