From b3060b0e2795c3b134e923518230b3de752a4e40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=99=BA=E6=B4=B2?= <1543046129@qq.com>
Date: Sat, 5 Mar 2022 00:58:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=AB=98=E4=BA=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Layouter/AdjoinMatrixGraph.js             |  0
 {demoV2 => demo}/Layouter/AdjoinTableGraph.js |  0
 {demoV2 => demo}/Layouter/Array.js            |  0
 {demoV2 => demo}/Layouter/BinaryTree.js       |  0
 {demoV2 => demo}/Layouter/ChainHashTable.js   |  0
 {demoV2 => demo}/Layouter/GeneralizedList.js  |  0
 {demoV2 => demo}/Layouter/HashTable.js        |  0
 {demoV2 => demo}/Layouter/LinkList.js         |  0
 {demoV2 => demo}/Layouter/LinkQueue.js        |  0
 {demoV2 => demo}/Layouter/LinkStack.js        |  0
 {demoV2 => demo}/Layouter/PCTree.js           |  0
 {demoV2 => demo}/Layouter/PTree.js            |  0
 {demoV2 => demo}/Layouter/SqQueue.js          |  0
 {demoV2 => demo}/Layouter/Stack.js            |  0
 {demoV2 => demo}/Layouter/TriTree.js          |  0
 {demoV2 => demo}/data.js                      |  0
 demoV2/demo2.html => demo/demo.html           |  0
 src/Model/SVLink.ts                           |  7 +++++
 src/Model/SVModel.ts                          | 25 ++++++++++++++---
 src/View/reconcile.ts                         | 28 +++++--------------
 src/View/renderer.ts                          |  8 ++++--
 src/View/viewContainer.ts                     | 20 +++++++++----
 src/engine.ts                                 | 23 +++++++++++----
 23 files changed, 72 insertions(+), 39 deletions(-)
 rename {demoV2 => demo}/Layouter/AdjoinMatrixGraph.js (100%)
 rename {demoV2 => demo}/Layouter/AdjoinTableGraph.js (100%)
 rename {demoV2 => demo}/Layouter/Array.js (100%)
 rename {demoV2 => demo}/Layouter/BinaryTree.js (100%)
 rename {demoV2 => demo}/Layouter/ChainHashTable.js (100%)
 rename {demoV2 => demo}/Layouter/GeneralizedList.js (100%)
 rename {demoV2 => demo}/Layouter/HashTable.js (100%)
 rename {demoV2 => demo}/Layouter/LinkList.js (100%)
 rename {demoV2 => demo}/Layouter/LinkQueue.js (100%)
 rename {demoV2 => demo}/Layouter/LinkStack.js (100%)
 rename {demoV2 => demo}/Layouter/PCTree.js (100%)
 rename {demoV2 => demo}/Layouter/PTree.js (100%)
 rename {demoV2 => demo}/Layouter/SqQueue.js (100%)
 rename {demoV2 => demo}/Layouter/Stack.js (100%)
 rename {demoV2 => demo}/Layouter/TriTree.js (100%)
 rename {demoV2 => demo}/data.js (100%)
 rename demoV2/demo2.html => demo/demo.html (100%)

diff --git a/demoV2/Layouter/AdjoinMatrixGraph.js b/demo/Layouter/AdjoinMatrixGraph.js
similarity index 100%
rename from demoV2/Layouter/AdjoinMatrixGraph.js
rename to demo/Layouter/AdjoinMatrixGraph.js
diff --git a/demoV2/Layouter/AdjoinTableGraph.js b/demo/Layouter/AdjoinTableGraph.js
similarity index 100%
rename from demoV2/Layouter/AdjoinTableGraph.js
rename to demo/Layouter/AdjoinTableGraph.js
diff --git a/demoV2/Layouter/Array.js b/demo/Layouter/Array.js
similarity index 100%
rename from demoV2/Layouter/Array.js
rename to demo/Layouter/Array.js
diff --git a/demoV2/Layouter/BinaryTree.js b/demo/Layouter/BinaryTree.js
similarity index 100%
rename from demoV2/Layouter/BinaryTree.js
rename to demo/Layouter/BinaryTree.js
diff --git a/demoV2/Layouter/ChainHashTable.js b/demo/Layouter/ChainHashTable.js
similarity index 100%
rename from demoV2/Layouter/ChainHashTable.js
rename to demo/Layouter/ChainHashTable.js
diff --git a/demoV2/Layouter/GeneralizedList.js b/demo/Layouter/GeneralizedList.js
similarity index 100%
rename from demoV2/Layouter/GeneralizedList.js
rename to demo/Layouter/GeneralizedList.js
diff --git a/demoV2/Layouter/HashTable.js b/demo/Layouter/HashTable.js
similarity index 100%
rename from demoV2/Layouter/HashTable.js
rename to demo/Layouter/HashTable.js
diff --git a/demoV2/Layouter/LinkList.js b/demo/Layouter/LinkList.js
similarity index 100%
rename from demoV2/Layouter/LinkList.js
rename to demo/Layouter/LinkList.js
diff --git a/demoV2/Layouter/LinkQueue.js b/demo/Layouter/LinkQueue.js
similarity index 100%
rename from demoV2/Layouter/LinkQueue.js
rename to demo/Layouter/LinkQueue.js
diff --git a/demoV2/Layouter/LinkStack.js b/demo/Layouter/LinkStack.js
similarity index 100%
rename from demoV2/Layouter/LinkStack.js
rename to demo/Layouter/LinkStack.js
diff --git a/demoV2/Layouter/PCTree.js b/demo/Layouter/PCTree.js
similarity index 100%
rename from demoV2/Layouter/PCTree.js
rename to demo/Layouter/PCTree.js
diff --git a/demoV2/Layouter/PTree.js b/demo/Layouter/PTree.js
similarity index 100%
rename from demoV2/Layouter/PTree.js
rename to demo/Layouter/PTree.js
diff --git a/demoV2/Layouter/SqQueue.js b/demo/Layouter/SqQueue.js
similarity index 100%
rename from demoV2/Layouter/SqQueue.js
rename to demo/Layouter/SqQueue.js
diff --git a/demoV2/Layouter/Stack.js b/demo/Layouter/Stack.js
similarity index 100%
rename from demoV2/Layouter/Stack.js
rename to demo/Layouter/Stack.js
diff --git a/demoV2/Layouter/TriTree.js b/demo/Layouter/TriTree.js
similarity index 100%
rename from demoV2/Layouter/TriTree.js
rename to demo/Layouter/TriTree.js
diff --git a/demoV2/data.js b/demo/data.js
similarity index 100%
rename from demoV2/data.js
rename to demo/data.js
diff --git a/demoV2/demo2.html b/demo/demo.html
similarity index 100%
rename from demoV2/demo2.html
rename to demo/demo.html
diff --git a/src/Model/SVLink.ts b/src/Model/SVLink.ts
index 32398f3..abc6d53 100644
--- a/src/Model/SVLink.ts
+++ b/src/Model/SVLink.ts
@@ -50,6 +50,13 @@ export class SVLink extends SVModel {
         };
     }
 
+    triggerHighlight(changeHighlightColor: string) {
+        this.originStyle = Util.objectClone(this.G6ModelProps.style);
+        this.set('style', {
+            stroke: changeHighlightColor,
+        });
+    }
+
     beforeDestroy(): void {
         Util.removeFromList(this.target.links.inDegree, item => item.id === this.id);
         Util.removeFromList(this.node.links.outDegree, item => item.id === this.id);
diff --git a/src/Model/SVModel.ts b/src/Model/SVModel.ts
index 7fc61a6..2d4e869 100644
--- a/src/Model/SVModel.ts
+++ b/src/Model/SVModel.ts
@@ -21,7 +21,7 @@ export class SVModel {
 	public discarded: boolean;
 	public freed: boolean;
 	public leaked: boolean;
-	public generalStyle: Partial<Style>;
+	public originStyle: Partial<Style>; // 用作保存修改前的样式
 
 	private transformMatrix: number[];
 	private modelType: string;
@@ -187,16 +187,33 @@ export class SVModel {
 		return this.modelType;
 	}
 
-	/**
+    triggerHighlight(changeHighlightColor: string) {
+        this.originStyle = Util.objectClone(this.G6ModelProps.style);
+        this.set('style', {
+            fill: changeHighlightColor,
+        });
+    }
+
+    restoreHighlight() {
+        if (this.originStyle) {
+            this.set('style', { ...this.originStyle });
+        }
+    }
+
+    /**
 	 * 判断是否为节点model（SVNode）
 	 */
 	isNode(): boolean {
 		return false;
 	}
 
-    beforeDestroy () {}
+    beforeRender () {
+        this.restoreHighlight();
+    }
+    afterRender() {}
 
-    destroy() {
+    beforeDestroy () {}
+    afterDestroy() {
         this.G6Item = null;
         this.shadowG6Instance = null;
         this.shadowG6Item = null;
diff --git a/src/View/reconcile.ts b/src/View/reconcile.ts
index 95a1f79..1d6fb41 100644
--- a/src/View/reconcile.ts
+++ b/src/View/reconcile.ts
@@ -50,8 +50,7 @@ export class Reconcile {
 	private getAppendModels(
 		prevModelList: SVModel[],
 		modelList: SVModel[],
-		accumulateLeakModels: SVModel[],
-		prevStep: boolean
+		accumulateLeakModels: SVModel[]
 	): SVModel[] {
 		const appendModels = modelList.filter(item => !prevModelList.find(model => model.id === item.id));
 
@@ -273,6 +272,7 @@ export class Reconcile {
 				Animations.APPEND(item.G6Item, {
 					duration,
 					timingFunction,
+                    callback: () => item.afterRender()
 				});
 			}
 		});
@@ -291,6 +291,7 @@ export class Reconcile {
 				timingFunction,
 				callback: () => {
 					this.renderer.removeModel(item);
+					item.afterDestroy();
 				},
 			});
 		});
@@ -323,9 +324,7 @@ export class Reconcile {
 	 */
 	private handleAccumulateLeakModels(accumulateModels: SVModel[]) {
 		accumulateModels.forEach(item => {
-			if (item.generalStyle) {
-				item.set('style', { ...item.generalStyle });
-			}
+			item.restoreHighlight();
 		});
 	}
 
@@ -374,19 +373,7 @@ export class Reconcile {
 		}
 
 		models.forEach(item => {
-			if (item.generalStyle === undefined) {
-				item.generalStyle = Util.objectClone(item.G6ModelProps.style);
-			}
-
-			if (item instanceof SVLink) {
-				item.set('style', {
-					stroke: changeHighlightColor,
-				});
-			} else {
-				item.set('style', {
-					fill: changeHighlightColor,
-				});
-			}
+			item.triggerHighlight(changeHighlightColor);
 		});
 	}
 
@@ -403,14 +390,13 @@ export class Reconcile {
 		prevModelList: SVModel[],
 		modelList: SVModel[],
 		accumulateLeakModels: SVModel[],
-		isEnterFunction: boolean,
-		prevStep: boolean
+		isEnterFunction: boolean
 	): DiffResult {
 		const continuousModels: SVModel[] = this.getContinuousModels(prevModelList, modelList);
 		const leakModels: SVModel[] = isEnterFunction
 			? []
 			: this.getLeakModels(layoutGroupTable, prevModelList, modelList);
-		const appendModels: SVModel[] = this.getAppendModels(prevModelList, modelList, accumulateLeakModels, prevStep);
+		const appendModels: SVModel[] = this.getAppendModels(prevModelList, modelList, accumulateLeakModels);
 		const removeModels: SVModel[] = this.getRemoveModels(prevModelList, modelList, accumulateLeakModels);
 		const updateModels: SVModel[] = [
 			...this.getReTargetMarkers(prevModelList, modelList),
diff --git a/src/View/renderer.ts b/src/View/renderer.ts
index fe7baec..ebc2559 100644
--- a/src/View/renderer.ts
+++ b/src/View/renderer.ts
@@ -97,7 +97,7 @@ export class Renderer {
 		this.shadowG6Instance.clear();
 		this.shadowG6Instance.read(g6Data);
 		renderModelList.forEach(item => {
-            item.G6Item = null;
+			item.G6Item = null;
 			item.shadowG6Item = this.shadowG6Instance.findById(item.id);
 			item.shadowG6Instance = this.shadowG6Instance;
 		});
@@ -106,11 +106,15 @@ export class Renderer {
 	/**
 	 * 渲染函数
 	 * @param renderModelList
-	 * @param isFirstRender
+	 * @param isSameSources
 	 */
 	public render(renderModelList: SVModel[]) {
 		const renderData: GraphData = Util.convertModelList2G6Data(renderModelList);
 
+		renderModelList.forEach(item => {
+			item.beforeRender();
+		});
+
 		this.g6Instance.changeData(renderData);
 
 		renderModelList.forEach(item => {
diff --git a/src/View/viewContainer.ts b/src/View/viewContainer.ts
index d142f5b..c7a6f7b 100644
--- a/src/View/viewContainer.ts
+++ b/src/View/viewContainer.ts
@@ -140,18 +140,25 @@ export class ViewContainer {
 	 * @param models
 	 * @param layoutFn
 	 */
-	render(layoutGroupTable: LayoutGroupTable, isEnterFunction: boolean, prevStep: boolean) {
-		const modelList = Util.convertGroupTable2ModelList(layoutGroupTable),
-			diffResult = this.reconcile.diff(
+	render(layoutGroupTable: LayoutGroupTable, isSameSources: boolean, isEnterFunction: boolean) {
+		const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
+
+        // 如果数据没变的话
+		if (isSameSources) {
+			modelList.forEach(item => item.restoreHighlight());
+            return;
+		}
+
+		const diffResult = this.reconcile.diff(
 				this.layoutGroupTable,
 				this.prevModelList,
 				modelList,
 				this.accumulateLeakModels,
-				isEnterFunction,
-                prevStep
+				isEnterFunction
 			),
 			renderModelList = [...modelList, ...diffResult.REMOVE, ...diffResult.LEAKED, ...diffResult.ACCUMULATE_LEAK];
 
+		// 从有泄漏区变成无泄漏区
 		if (this.hasLeak === true && this.accumulateLeakModels.length === 0) {
 			this.hasLeak = false;
 			EventBus.emit('onLeakAreaUpdate', {
@@ -160,6 +167,7 @@ export class ViewContainer {
 			});
 		}
 
+		// 从无泄漏区变成有泄漏区
 		if (diffResult.LEAKED.length) {
 			this.hasLeak = true;
 			EventBus.emit('onLeakAreaUpdate', {
@@ -168,7 +176,7 @@ export class ViewContainer {
 			});
 		}
 
-        this.accumulateLeakModels.push(...diffResult.LEAKED); // 对泄漏节点进行向后累积
+		this.accumulateLeakModels.push(...diffResult.LEAKED); // 对泄漏节点进行向后累积
 		this.renderer.build(renderModelList); // 首先在离屏canvas渲染先
 		this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels); // 进行布局（设置model的x，y，样式等）
 
diff --git a/src/engine.ts b/src/engine.ts
index 0dfd394..fdaf338 100644
--- a/src/engine.ts
+++ b/src/engine.ts
@@ -51,23 +51,34 @@ export class Engine {
      * @param sources
      * @param prevStep
      */
-    public render(source: Sources, prevStep: boolean = false) {
+    public render(source: Sources) {
+        let isSameSources: boolean = false,
+            layoutGroupTable: LayoutGroupTable,
+            isEnterFunction = source.isEnterFunction;
+
         if (source === undefined || source === null) {
             return;
         }
-        ``
+        
         let stringSource = JSON.stringify(source);
         if (this.prevStringSource === stringSource) {
-            return;
+            isSameSources = true;
         }
 
         this.prevStringSource = stringSource;
 
-        // 1 转换模型（data => model）
-        const layoutGroupTable = this.modelConstructor.construct(source);
+
+        if(isSameSources) {
+            // 若源数据两次一样的，用回上一次的layoutGroupTable
+            layoutGroupTable = this.modelConstructor.getLayoutGroupTable();
+        }
+        else {  
+            // 1 转换模型（data => model）
+            layoutGroupTable = this.modelConstructor.construct(source);
+        }
 
         // 2 渲染（使用g6进行渲染）
-        this.viewContainer.render(layoutGroupTable, source.isEnterFunction as boolean, prevStep);
+        this.viewContainer.render(layoutGroupTable, isSameSources, isEnterFunction);
     }