fix: 修复高亮问题

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