fix: 修复高亮问题

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

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;

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

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

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，样式等）
 

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);
     }