chenxiaopei/StructV2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 高亮问题修复

Browse Source
This commit is contained in:
黎智洲 2022-03-13 15:21:20 +08:00
parent 76ee9b1968
commit 7e3378bb82
9 changed files with 56 additions and 4267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
copyDist2Anyview.js
View File

@ -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) {

4203
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -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"
}
}

14
src/Model/SVLink.ts
View File

@ -12,8 +12,8 @@ export class SVLink extends SVModel {
public shadowG6Item: IEdge;
public G6Item: IEdge;
public nodeId: string;
public targetId: string;
public nodeId: 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.targetId = target.id;
this.nodeId = node.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);

6
src/Model/SVModel.ts
View File

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

36
src/Model/SVNodeAppendage.ts
View File

@ -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);
this.sourceId = target.sourceId;
super(id, type, group, layout, 'addressLabel', target, 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);
this.value = value;
super(id, indexName, group, layout, 'indexLabel', target, 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);
this.label = label;
super(id, type, group, layout, 'marker', target, 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),
};

2
src/Model/modelConstructor.ts
View File

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

27
src/View/reconcile.ts
View File

@ -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[],
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];
return appendModels.filter(item => !prevModelList.some(prev => item.isEqual(prev)));
}
/**
@ -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;
this.handleAccumulateLeakModels(ACCUMULATE_LEAK);
const { APPEND, REMOVE, FREED, LEAKED, UPDATE, CONTINUOUS } = diffResult;
// 第一次渲染和进入函数的时候不高亮变化的元素
if (this.isFirstPatch === false && !handleUpdate?.isEnterFunction && !handleUpdate?.isFirstDebug) {

25
src/View/viewContainer.ts
View File

@ -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) {