fix: 高亮问题修复

copyDist2Anyview.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const sourcePath = 'D:\\个人项目\\v\\StructV2\\dist\\sv.js';
-const targetPath = 'D:\\个人项目\\anyview项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
+const targetPath = 'D:\\个人项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
 
 
 function COPY(from, to) {

package.json

@@ -1,8 +1,4 @@
 {
-  "dependencies": {
-    "@antv/g6": "^4.4.1",
-    "merge": "^2.1.1"
-  },
   "devDependencies": {
     "merge": "^2.1.1",
     "ts-loader": "^5.2.1",
@@ -15,5 +11,9 @@
     "dep": "webpack --config webpack.config.product.js && node copyDist2Anyview.js",
     "dev": "webpack --w --config webpack.config.develop.js",
     "copy": "node copyDist2Anyview.js"
+  },
+  "dependencies": {
+    "@antv/g6": "^4.6.1",
+    "merge": "^2.1.1"
   }
 }

src/Model/SVLink.ts

@@ -12,8 +12,8 @@ export class SVLink extends SVModel {
 	public shadowG6Item: IEdge;
 	public G6Item: IEdge;
 
-    public nodeId: string;
+	public nodeId: string;
-    public targetId: string;
+	public targetId: string;
 
 	constructor(
 		id: string,
@@ -29,8 +29,8 @@ export class SVLink extends SVModel {
 
 		this.node = node;
 		this.target = target;
-        this.nodeId = node.id;
+		this.nodeId = node.id;
-        this.targetId = target.id;
+		this.targetId = target.id;
 		this.linkIndex = index;
 
 		node.links.outDegree.push(this);
@@ -53,7 +53,7 @@ export class SVLink extends SVModel {
 		let label = this.target.sourceNode.freed ? 'freed' : '',
 			labelCfg = this.target.sourceNode.freed
 				? { position: 'start', autoRotate: true, refY: 7, style: { fontSize: 11, opacity: 0.8 } }
-				: Util.objectClone<LinkLabelOption>(options.labelOptions || {} as LinkLabelOption);
+				: Util.objectClone<LinkLabelOption>(options.labelOptions || ({} as LinkLabelOption));
 
 		return {
 			id: this.id,
@@ -76,6 +76,10 @@ export class SVLink extends SVModel {
 		});
 	}
 
+	isEqual(link: SVLink): boolean {
+		return link.targetId === this.targetId && link.nodeId === this.nodeId && link.linkIndex === this.linkIndex;
+	}
+
 	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

@@ -207,9 +207,11 @@ export class SVModel {
 		return false;
 	}
 
-    beforeRender () {
+    isEqual(model: SVModel): boolean {
-        this.restoreHighlight();
+        return this.id === model.id;
     }
+
+    beforeRender () {}
     afterRender() {}
 
     beforeDestroy () {}

src/Model/SVNodeAppendage.ts

@@ -6,12 +6,16 @@ import { SVModel } from './SVModel';
 import { SVNode } from './SVNode';
 
 export class SVNodeAppendage extends SVModel {
+    public targetId: string;
 	public target: SVNode;
+    public label: string;
 
-	constructor(id: string, type: string, group: string, layout: string, modelType: string, target: SVNode) {
+	constructor(id: string, type: string, group: string, layout: string, modelType: string, target: SVNode, label: string | string[]) {
 		super(id, type, group, layout, modelType);
 
 		this.target = target;
+        this.targetId = target.id;
+        this.label = typeof label === 'string' ? label : label.join(', ');
 
 		if (this.target.appendages[modelType] === undefined) {
 			this.target.appendages[modelType] = [];
@@ -29,6 +33,10 @@ export class SVNodeAppendage extends SVModel {
 
 		this.target = null;
 	}
+
+    isEqual(appendage: SVNodeAppendage): boolean {
+		return appendage.targetId === this.targetId && appendage.label === this.label;
+	}
 }
 
 /**
@@ -36,7 +44,7 @@ export class SVNodeAppendage extends SVModel {
  */
 export class SVFreedLabel extends SVNodeAppendage {
 	constructor(id: string, type: string, group: string, layout: string, target: SVNode) {
-		super(id, type, group, layout, 'freedLabel', target);
+		super(id, type, group, layout, 'freedLabel', target, '已释放');
 		this.G6ModelProps = this.generateG6ModelProps();
 	}
 
@@ -46,7 +54,7 @@ export class SVFreedLabel extends SVNodeAppendage {
 			x: 0,
 			y: 0,
 			type: 'rect',
-			label: '已释放',
+			label: this.label,
 			labelCfg: {
 				style: {
 					fill: '#b83b5e',
@@ -67,12 +75,8 @@ export class SVFreedLabel extends SVNodeAppendage {
  * 被移动到泄漏区的节点上面显示的地址
  */
 export class SVAddressLabel extends SVNodeAppendage {
-	private sourceId: string;
-
 	constructor(id: string, type: string, group: string, layout: string, target: SVNode, options: AddressLabelOption) {
-		super(id, type, group, layout, 'addressLabel', target);
+		super(id, type, group, layout, 'addressLabel', target, target.sourceId);
-
-		this.sourceId = target.sourceId;
 		this.G6ModelProps = this.generateG6ModelProps(options);
 	}
 
@@ -93,7 +97,7 @@ export class SVAddressLabel extends SVNodeAppendage {
 			x: 0,
 			y: 0,
 			type: 'rect',
-			label: this.sourceId,
+			label: this.label,
 			labelCfg: {
 				style: {
 					fill: '#666',
@@ -114,8 +118,6 @@ export class SVAddressLabel extends SVNodeAppendage {
  * 节点的下标文字
  */
 export class SVIndexLabel extends SVNodeAppendage {
-	private value: string;
-
 	constructor(
 		id: string,
 		indexName: string,
@@ -125,8 +127,7 @@ export class SVIndexLabel extends SVNodeAppendage {
 		target: SVNode,
 		options: IndexLabelOption
 	) {
-		super(id, indexName, group, layout, 'indexLabel', target);
+		super(id, indexName, group, layout, 'indexLabel', target, value);
-		this.value = value;
 		this.G6ModelProps = this.generateG6ModelProps(options) as NodeConfig;
 	}
 
@@ -136,7 +137,7 @@ export class SVIndexLabel extends SVNodeAppendage {
 			x: 0,
 			y: 0,
 			type: 'rect',
-			label: this.value,
+			label: this.label,
 			labelCfg: {
 				style: {
 					fill: '#bbb',
@@ -160,7 +161,6 @@ export class SVIndexLabel extends SVNodeAppendage {
  * 外部指针
  */
 export class SVMarker extends SVNodeAppendage {
-	public label: string | string[];
 	public anchor: number;
 
 	public shadowG6Item: INode;
@@ -175,9 +175,7 @@ export class SVMarker extends SVNodeAppendage {
 		target: SVNode,
 		options: MarkerOption
 	) {
-		super(id, type, group, layout, 'marker', target);
+		super(id, type, group, layout, 'marker', target, label);
-
-		this.label = label;
 		this.G6ModelProps = this.generateG6ModelProps(options);
 	}
 
@@ -195,7 +193,7 @@ export class SVMarker extends SVNodeAppendage {
 			type: options.type || 'marker',
 			size: options.size || defaultSize,
 			anchorPoints: null,
-			label: typeof this.label === 'string' ? this.label : this.label.join(', '),
+			label: this.label,
 			style: Util.objectClone<Style>(options.style),
 			labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
 		};

src/Model/modelConstructor.ts

@@ -195,7 +195,7 @@ export class ModelConstructor {
 					let isGeneralLink = ModelConstructor.isGeneralLink(sourceLinkData.toString());
 
 					if (targetNode) {
-						link = this.createLink(name, group, layout, node, targetNode, null, linkOptions[name]);
+						link = this.createLink(name, group, layout, node, targetNode, 0, linkOptions[name]);
 						linkList.push(link);
 					}
 

src/View/reconcile.ts

@@ -17,7 +17,6 @@ export interface DiffResult {
 	FREED: SVNode[];
 	LEAKED: SVModel[];
 	UPDATE: SVModel[];
-	ACCUMULATE_LEAK: SVModel[];
 }
 
 export class Reconcile {
@@ -319,16 +318,6 @@ export class Reconcile {
 		EventBus.emit('onLeak', leakModels);
 	}
 
-	/**
-	 * 处理已经堆积的泄漏区 models
-	 * @param accumulateModels
-	 */
-	private handleAccumulateLeakModels(accumulateModels: SVModel[]) {
-		accumulateModels.forEach(item => {
-			item.restoreHighlight();
-		});
-	}
-
 	/**
 	 * 处理被释放的节点 models
 	 * @param freedModes
@@ -379,18 +368,11 @@ export class Reconcile {
 	}
 
 	/**
-	 * 过滤新增model中那些不需要高亮的model（比如target和node都一样的link）
+	 * 过滤新增model中那些不需要高亮的model（比如target和node都一样的link，marker等）
 	 * @param appendModels
 	 */
 	private filterUnChangeModelsOfAppend(appendModels: SVModel[], prevModelList: SVModel[]): SVModel[] {
-		const links: SVLink[] = appendModels.filter(item => item instanceof SVLink) as SVLink[],
+		return appendModels.filter(item => !prevModelList.some(prev => item.isEqual(prev)));
-			prevLinks: SVLink[] = prevModelList.filter(item => item instanceof SVLink) as SVLink[],
-			models = appendModels.filter(item => item instanceof SVLink === false),
-			changeLinks: SVLink[] = links.filter(
-				item => !prevLinks.some(prev => prev.targetId === item.targetId && prev.nodeId === item.nodeId)
-			);
-
-		return [...models, ...changeLinks];
 	}
 
 	/**
@@ -429,7 +411,6 @@ export class Reconcile {
 			FREED: freedModels,
 			LEAKED: leakModels,
 			UPDATE: updateModels,
-			ACCUMULATE_LEAK: [...accumulateLeakModels],
 		};
 	}
 
@@ -439,9 +420,7 @@ export class Reconcile {
 	 * @param isFirstRender
 	 */
 	public patch(diffResult: DiffResult, handleUpdate: handleUpdate) {
-		const { APPEND, REMOVE, FREED, LEAKED, UPDATE, CONTINUOUS, ACCUMULATE_LEAK } = diffResult;
+		const { APPEND, REMOVE, FREED, LEAKED, UPDATE, CONTINUOUS } = diffResult;
-
-		this.handleAccumulateLeakModels(ACCUMULATE_LEAK);
 
 		// 第一次渲染和进入函数的时候不高亮变化的元素
 		if (this.isFirstPatch === false && !handleUpdate?.isEnterFunction && !handleUpdate?.isFirstDebug) {

src/View/viewContainer.ts

@@ -136,6 +136,19 @@ export class ViewContainer {
 		});
 	}
 
+    /**
+     * 
+     * @param models 
+     */
+    private restoreHighlight(models: SVModel[]) {
+        models.forEach(item => {
+            // 不是free节点才进行还原
+            if(!item.freed) {
+                item.restoreHighlight()
+            }
+        });
+    }
+
 	/**
 	 * 渲染所有视图
 	 * @param models
@@ -144,14 +157,10 @@ export class ViewContainer {
 	render(layoutGroupTable: LayoutGroupTable, isSameSources: boolean, handleUpdate: handleUpdate) {
 		const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
 
-		// 如果数据没变的话
+        this.restoreHighlight([...modelList, ...this.accumulateLeakModels]);
+
+		// 如果数据没变的话，直接退出
 		if (isSameSources) {
-			modelList.forEach(item => {
-                // 不是free节点才进行还原
-                if(!item.freed) {
-                    item.restoreHighlight()
-                }
-            });
 			return;
 		}
 
@@ -162,7 +171,7 @@ export class ViewContainer {
 				this.accumulateLeakModels,
 				handleUpdate?.isEnterFunction
 			),
-			renderModelList = [...modelList, ...diffResult.REMOVE, ...diffResult.LEAKED, ...diffResult.ACCUMULATE_LEAK];
+			renderModelList = [...modelList, ...diffResult.REMOVE, ...diffResult.LEAKED, ...this.accumulateLeakModels];
 
 		// 从有泄漏区变成无泄漏区
 		if (this.hasLeak === true && this.accumulateLeakModels.length === 0) {