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

fix: 修改了节点下标文本的底层实现

Browse Source
This commit is contained in:
黎智洲 2021-12-14 19:07:27 +08:00
parent 6a0139eaeb
commit e1a69b5e91
18 changed files with 14563 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
demoV2/Layouter/Array.js
View File

@ -16,18 +16,17 @@ SV.registerLayout('Array', {
defineOptions() {
return {
element: {
node: {
default: {
type: 'indexed-node',
type: 'rect',
label: '[id]',
size: [60, 30],
labelOptions: {
style: { fontSize: 20 }
},
style: {
stroke: '#333',
fill: '#95e1d3'
},
indexOptions: {
index: { position: 'bottom' },
indexTop: { position: 'top' }
}
}
},
@ -47,8 +46,9 @@ SV.registerLayout('Array', {
}
}
},
behavior: {
dragNode: false
indexLabel: {
index: { position: 'bottom' },
indexRight: { position: 'right' }
}
};
},
@ -84,7 +84,7 @@ SV.registerLayout('Array', {
defineOptions() {
return {
element: {
node: {
default: {
type: 'indexed-node',
label: '[id]',
@ -92,10 +92,6 @@ SV.registerLayout('Array', {
style: {
stroke: '#333',
fill: '#355c7d'
},
indexOptions: {
index: { position: 'bottom' },
indexTop: { position: 'top' }
}
}
},
@ -114,6 +110,10 @@ SV.registerLayout('Array', {
fill: '#f08a5d'
}
}
},
indexLabel: {
index: { position: 'bottom' },
indexTop: { position: 'top' }
}
};
},

26
demoV2/Layouter/PTree.js
View File

@ -1,11 +1,3 @@
/*
* @Author: your name
* @Date: 2021-12-12 20:35:54
* @LastEditTime: 2021-12-13 21:31:01
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \froend_studentc:\Users\13127\Desktop\最近的前端文件\可视化源码\StructV2\demoV2\Layouter\PTree.js
*/
// 解析数据：
// {
@ -50,27 +42,29 @@ SV.registerLayout('PTree', {
return sources;
},
defineOptions() {
return {
node: {
default: {
type: 'indexed-node',
type: 'rect',
label: '[data]',
size: [40, 40],
labelOptions: {
style: { fontSize: 16 }
},
style: {
stroke: '#333',
fill: '#95e1d3',
offset: 25
},
indexOptions: {
index: { position: 'top' },
indexLeft: { position: 'left' }
}
},
},
behavior: {
dragNode: false
}
indexLabel: {
index: { position: 'top' },
indexLeft: { position: 'left' }
}
};
},

20
demoV2/demo2.html
View File

@ -100,9 +100,23 @@
let data = [{
Array: {
data: [{ id: 1, data: 1 ,}, { id: 2, data: 2 }, { id: 3, data: 3 }, { id: 4, data: 4 }],
layouter: 'Array'
PTree: {
data: [
{
id: '1001',
data: 'A',
parent: -1,
index: 0
},
{
id: '1002',
data: 'B',
parent: 0,
index: 1
},
],
layouter: 'PTree'
}
}, {
Array: {

14115
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

81
src/BehaviorHelper/fixNodeMarkerDrag.ts
View File

@ -1,55 +1,38 @@
import { Graph } from "@antv/g6";
import { SVNode } from "../Model/SVNode";
import { SVNodeAppendage } from "../Model/SVNodeAppendage";
/**
* 在初始化渲染器之后，修正节点拖拽时，外部指针没有跟着动的问题
* 在初始化渲染器之后，修正节点拖拽时，外部指针或者其他 appendage 没有跟着动的问题
*
*/
export function FixNodeMarkerDrag(g6Instance: Graph) {
let dragActive: boolean = false;
const nodeData = {
node: null,
startX: 0,
startY: 0
};
const markerData = {
marker: null,
startX: 0,
startY: 0
};
const freedLabelData = {
freedLabel: null,
startX: 0,
startY: 0
};
let dragActive: boolean = false,
nodeData: { node: SVNode, startX: number, startY: number },
appendagesData: { appendage: SVNodeAppendage, startX: number, startY: number }[] = [];
g6Instance.on('node:dragstart', event => {
nodeData.node = event.item['SVModel'];
let node: SVNode = nodeData.node;
let node: SVNode = event.item['SVModel'];
if (node.isNode() === false || node.leaked) {
return false;
}
dragActive = true;
nodeData.startX = event.canvasX;
nodeData.startY = event.canvasY;
nodeData = {
node,
startX: event.canvasX,
startY: event.canvasY
};
if (node.marker) {
markerData.marker = node.marker;
markerData.startX = markerData.marker.get('x');
markerData.startY = markerData.marker.get('y');
}
if(node.freedLabel) {
freedLabelData.freedLabel = node.freedLabel;
freedLabelData.startX = freedLabelData.freedLabel.get('x');
freedLabelData.startY = freedLabelData.freedLabel.get('y');
}
node.appendages.forEach(item => {
appendagesData.push({
appendage: item,
startX: item.get('x'),
startY: item.get('y')
});
});
});
g6Instance.on('node:dragend', event => {
@ -64,15 +47,8 @@ export function FixNodeMarkerDrag(g6Instance: Graph) {
y: node.G6Item.getModel().y
});
nodeData.node = null;
nodeData.startX = 0;
nodeData.startY = 0;
markerData.marker = null;
markerData.startX = 0;
markerData.startY = 0;
freedLabelData.freedLabel = null;
freedLabelData.startX = 0;
freedLabelData.startY = 0;
nodeData = null;
appendagesData.length = 0;
dragActive = false;
});
@ -85,18 +61,11 @@ export function FixNodeMarkerDrag(g6Instance: Graph) {
dy = ev.canvasY - nodeData.startY,
zoom = g6Instance.getZoom();
if(markerData.marker) {
markerData.marker.set({
x: markerData.startX + dx / zoom,
y: markerData.startY + dy / zoom
appendagesData.forEach(item => {
item.appendage.set({
x: item.startX + dx / zoom,
y: item.startY + dy / zoom
});
}
if(freedLabelData.freedLabel) {
freedLabelData.freedLabel.set({
x: freedLabelData.startX + dx / zoom,
y: freedLabelData.startY + dy / zoom
});
}
});
});
}

51
src/Model/SVMarker.ts
View File

@ -1,51 +0,0 @@
import { INode, NodeConfig } from "@antv/g6-core";
import { Util } from "../Common/util";
import { MarkerOption, NodeLabelOption, Style } from "../options";
import { SVModel } from "./SVModel";
import { SVNode } from "./SVNode";
export class SVMarker extends SVModel {
public target: SVNode;
public label: string | string[];
public anchor: number;
public shadowG6Item: INode;
public G6Item: INode;
constructor(id: string, type: string, group: string, layout: string, label: string | string[], target: SVNode, options: MarkerOption) {
super(id, type, group, layout, 'marker');
this.target = target;
this.label = label;
this.target.marker = this;
this.G6ModelProps = this.generateG6ModelProps(options);
}
protected generateG6ModelProps(options: MarkerOption): NodeConfig {
this.anchor = options.anchor;
const type = options.type,
defaultSize: [number, number] = type === 'pointer'? [8, 30]: [12, 12];
return {
id: this.id,
x: 0,
y: 0,
rotation: 0,
type: options.type || 'marker',
size: options.size || defaultSize,
anchorPoints: null,
label: typeof this.label === 'string'? this.label: this.label.join(', '),
style: Util.objectClone<Style>(options.style),
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
};
}
public getLabelSizeRadius(): number {
const { width, height } = this.shadowG6Item.getContainer().getChildren()[2].getBBox();
return width > height? width: height;
}
};

7
src/Model/SVModel.ts
View File

@ -1,9 +1,8 @@
import { Util } from "../Common/util";
import { ModelOption, Style } from "../options";
import { Style } from "../options";
import { BoundingRect } from "../Common/boundingRect";
import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core";
import { Point } from "@antv/g-base";
import { Graph } from "@antv/g6-pc";
import { Graph } from "_@antv_g6-pc@0.5.0@@antv/g6-pc";
@ -53,7 +52,7 @@ export class SVModel {
* 定义 G6 model 的属性
* @param option
*/
protected generateG6ModelProps(options: ModelOption) {
protected generateG6ModelProps(options: unknown) {
return null;
}

103
src/Model/SVNode.ts
View File

@ -1,98 +1,34 @@
import { INode, NodeConfig } from "@antv/g6-core";
import { Util } from "../Common/util";
import { NodeIndexOption, NodeLabelOption, NodeOption, Style } from "../options";
import { NodeLabelOption, NodeOption, Style } from "../options";
import { SourceNode } from "../sources";
import { SVLink } from "./SVLink";
import { SVMarker } from "./SVMarker";
import { SVModel } from "./SVModel";
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from "./SVNodeAppendage";
export class SVFreedLabel extends SVModel {
public node: SVNode;
constructor(id: string, type: string, group: string, layout: string, node: SVNode) {
super(id, type, group, layout, 'freedLabel');
this.node = node;
this.node.freedLabel = this;
this.G6ModelProps = this.generateG6ModelProps();
}
generateG6ModelProps() {
return {
id: this.id,
x: 0,
y: 0,
type: 'rect',
label: '已释放',
labelCfg: {
style: {
fill: '#b83b5e',
opacity: 0.6
}
},
size: [0, 0],
style: {
stroke: null,
fill: 'transparent'
}
};
}
}
export class SVLeakAddress extends SVModel {
public node: SVNode;
private sourceId: string;
constructor(id: string, type: string, group: string, layout: string, node: SVNode) {
super(id, type, group, layout, 'leakAddress');
this.node = node;
this.sourceId = node.sourceId;
this.node.leakAddress = this;
this.G6ModelProps = this.generateG6ModelProps();
}
generateG6ModelProps() {
return {
id: this.id,
x: 0,
y: 0,
type: 'rect',
label: this.sourceId,
labelCfg: {
style: {
fill: '#666',
fontSize: 16
}
},
size: [0, 0],
style: {
stroke: null,
fill: 'transparent'
}
};
}
}
export class SVNode extends SVModel {
public sourceId: string;
public sourceNode: SourceNode;
public marker: SVMarker;
public freedLabel: SVFreedLabel;
public leakAddress: SVLeakAddress;
public links: {
inDegree: SVLink[];
outDegree: SVLink[];
};
private label: string | string[];
private disable: boolean;
public shadowG6Item: INode;
public G6Item: INode;
public marker: SVMarker;
public freedLabel: SVFreedLabel;
public indexLabel: SVIndexLabel;
public addressLabel: SVAddressLabel;
public appendages: SVNodeAppendage[];
constructor(id: string, type: string, group: string, layout: string, sourceNode: SourceNode, label: string | string[], options: NodeOption) {
super(id, type, group, layout, 'node');
@ -108,22 +44,15 @@ export class SVNode extends SVModel {
this.sourceNode = sourceNode;
this.sourceId = sourceNode.id.toString();
this.marker = null;
this.links = { inDegree: [], outDegree: [] };
this.appendages = [];
this.sourceNode = sourceNode;
this.label = label;
this.G6ModelProps = this.generateG6ModelProps(options);
}
protected generateG6ModelProps(options: NodeOption): NodeConfig {
let indexOptions = Util.objectClone<NodeIndexOption>(options.indexOptions) || { index: { position: 'bottom' } };
if (indexOptions) {
Object.keys(indexOptions).map(key => {
let indexOptionItem = indexOptions[key];
indexOptionItem.value = this.sourceNode[key] ?? '';
});
}
const style = Util.objectClone<Style>(options.style);
return {
...this.sourceNode,
@ -135,9 +64,11 @@ export class SVNode extends SVModel {
size: options.size || [60, 30],
anchorPoints: options.anchorPoints,
label: this.label as string,
style: Util.objectClone<Style>(options.style),
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
indexCfg: indexOptions
style: {
...style,
fill: this.disable ? '#ccc' : style.fill
},
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
};
}

182
src/Model/SVNodeAppendage.ts Normal file
View File

@ -0,0 +1,182 @@
import { INode, NodeConfig } from "@antv/g6-core";
import { Util } from "../Common/util";
import { AddressLabelOption, IndexLabelOption, MarkerOption, NodeLabelOption, Style } from "../options";
import { SourceNode } from "../sources";
import { SVModel } from "./SVModel";
import { SVNode } from "./SVNode";
export class SVNodeAppendage extends SVModel {
public target: SVNode;
constructor(id: string, type: string, group: string, layout: string, modelType: string, target: SVNode) {
super(id, type, group, layout, modelType);
this.target = target;
this.target.appendages.push(this);
}
}
/**
* 已释放节点下面的文字（“已释放‘）
*/
export class SVFreedLabel extends SVNodeAppendage {
constructor(id: string, type: string, group: string, layout: string, target: SVNode) {
super(id, type, group, layout, 'freedLabel', target);
this.target.freedLabel = this;
this.G6ModelProps = this.generateG6ModelProps();
}
generateG6ModelProps() {
return {
id: this.id,
x: 0,
y: 0,
type: 'rect',
label: '已释放',
labelCfg: {
style: {
fill: '#b83b5e',
opacity: 0.6
}
},
size: [0, 0],
style: {
stroke: null,
fill: 'transparent'
}
};
}
}
/**
* 被移动到泄漏区的节点上面显示的地址
*/
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;
this.target.addressLabel = this;
this.G6ModelProps = this.generateG6ModelProps(options);
}
generateG6ModelProps(options: AddressLabelOption) {
return {
id: this.id,
x: 0,
y: 0,
type: 'rect',
label: this.sourceId,
labelCfg: {
style: {
fill: '#666',
fontSize: 16,
...options.style
}
},
size: [0, 0],
style: {
stroke: null,
fill: 'transparent'
}
};
}
}
/**
* 节点的下标文字
*/
export class SVIndexLabel extends SVNodeAppendage {
private value: string;
constructor(id: string, indexName: string, group: string, layout: string, value: string, target: SVNode, options: IndexLabelOption) {
super(id, indexName, group, layout, 'indexLabel', target);
this.target.indexLabel = this;
this.value = value;
this.G6ModelProps = this.generateG6ModelProps(options) as NodeConfig;
}
generateG6ModelProps(options: IndexLabelOption) {
return {
id: this.id,
x: 0,
y: 0,
type: 'rect',
label: this.value,
labelCfg: {
style: {
fill: '#bbb',
textAlign: 'center',
textBaseline: 'middle',
fontSize: 14,
fontStyle: 'italic',
...options.style
}
},
size: [0, 0],
style: {
stroke: null,
fill: 'transparent'
}
};
}
}
/**
* 外部指针
*/
export class SVMarker extends SVNodeAppendage {
public label: string | string[];
public anchor: number;
public shadowG6Item: INode;
public G6Item: INode;
constructor(id: string, type: string, group: string, layout: string, label: string | string[], target: SVNode, options: MarkerOption) {
super(id, type, group, layout, 'marker', target);
this.label = label;
this.target.marker = this;
this.G6ModelProps = this.generateG6ModelProps(options);
}
protected generateG6ModelProps(options: MarkerOption): NodeConfig {
this.anchor = options.anchor;
const type = options.type,
defaultSize: [number, number] = type === 'pointer' ? [8, 30] : [12, 12];
return {
id: this.id,
x: 0,
y: 0,
rotation: 0,
type: options.type || 'marker',
size: options.size || defaultSize,
anchorPoints: null,
label: typeof this.label === 'string' ? this.label : this.label.join(', '),
style: Util.objectClone<Style>(options.style),
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
};
}
public getLabelSizeRadius(): number {
const { width, height } = this.shadowG6Item.getContainer().getChildren()[2].getBBox();
return width > height ? width : height;
}
};

111
src/Model/modelConstructor.ts
View File

@ -1,19 +1,20 @@
import { Util } from "../Common/util";
import { Engine } from "../engine";
import { LayoutCreator, LayoutGroupOptions, LinkOption, MarkerOption, NodeOption } from "../options";
import { AddressLabelOption, IndexLabelOption, LayoutCreator, LayoutGroupOptions, LinkOption, MarkerOption, NodeOption } from "../options";
import { sourceLinkData, LinkTarget, Sources, SourceNode } from "../sources";
import { SV } from "../StructV";
import { SVLink } from "./SVLink";
import { SVMarker } from "./SVMarker";
import { SVModel } from "./SVModel";
import { SVFreedLabel, SVLeakAddress, SVNode } from "./SVNode";
import { SVNode } from "./SVNode";
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from "./SVNodeAppendage";
export type LayoutGroup = {
name: string;
node: SVNode[];
indexLabel: SVIndexLabel[];
freedLabel: SVFreedLabel[];
leakAddress: SVLeakAddress[];
addressLabel: SVAddressLabel[];
link: SVLink[];
marker: SVMarker[];
layoutCreator: LayoutCreator;
@ -38,7 +39,7 @@ export class ModelConstructor {
}
/**
* 构建svnode，svlink 和 svmarker
* 构建SVNode，SVLink, SVMarker, SVAddressLabel, SVIndexLabel等
* @param sourceList
*/
public construct(sources: Sources): LayoutGroupTable {
@ -59,7 +60,8 @@ export class ModelConstructor {
prevString: string = this.prevSourcesStringMap[group],
nodeList: SVNode[] = [],
freedLabelList: SVFreedLabel[] = [],
leakAddress: SVLeakAddress[] = [],
addressLabelList: SVAddressLabel[] = [],
indexLabelList: SVIndexLabel[] = [],
markerList: SVMarker[] = [];
if (prevString === sourceDataString) {
@ -69,30 +71,37 @@ export class ModelConstructor {
const options: LayoutGroupOptions = layoutCreator.defineOptions(sourceGroup.data),
sourceData = layoutCreator.sourcesPreprocess(sourceGroup.data, options),
nodeOptions = options.node || options['element'] || {},
markerOptions = options.marker || {};
markerOptions = options.marker || {},
indexLabelOptions = options.indexLabel || {},
addressLabelOption = options.addressLabel || {};
nodeList = this.constructNodes(nodeOptions, group, sourceData, layout);
nodeList = this.constructNodes(group, layout, nodeOptions, sourceData);
markerList = this.constructMarkers(group, layout, markerOptions, nodeList);
indexLabelList = this.constructIndexLabel(group, layout, indexLabelOptions, nodeList);
addressLabelList = this.constructAddressLabel(group, layout, addressLabelOption, nodeList);
nodeList.forEach(item => {
if(item.freedLabel) {
freedLabelList.push(item.freedLabel);
}
if(item.leakAddress) {
leakAddress.push(item.leakAddress);
}
});
layoutGroupTable.set(group, {
name: group,
node: nodeList,
freedLabel: freedLabelList,
leakAddress: leakAddress,
addressLabel: addressLabelList,
indexLabel: indexLabelList,
link: [],
marker: markerList,
options: options,
layoutCreator,
modelList: [...nodeList, ...markerList, ...freedLabelList, ...leakAddress],
modelList: [
...nodeList,
...markerList,
...freedLabelList,
...addressLabelList,
...indexLabelList
],
layout,
isHide: false
});
@ -100,7 +109,7 @@ export class ModelConstructor {
layoutGroupTable.forEach((layoutGroup: LayoutGroup, group: string) => {
const linkOptions = layoutGroup.options.link || {},
linkList: SVLink[] = this.constructLinks(linkOptions, layoutGroup.node, layoutGroupTable, group, layoutGroup.layout, );
linkList: SVLink[] = this.constructLinks(group, layoutGroup.layout, linkOptions, layoutGroup.node, layoutGroupTable);
layoutGroup.link = linkList;
layoutGroup.modelList.push(...linkList);
@ -127,7 +136,7 @@ export class ModelConstructor {
* @param layout
* @returns
*/
private constructNodes(nodeOptions: { [key: string]: NodeOption }, group: string, sourceList: SourceNode[], layout: string): SVNode[] {
private constructNodes(group: string, layout: string, nodeOptions: { [key: string]: NodeOption }, sourceList: SourceNode[]): SVNode[] {
let defaultSourceNodeType: string = 'default',
nodeList: SVNode[] = [];
@ -153,7 +162,7 @@ export class ModelConstructor {
* @param layoutGroupTable
* @returns
*/
private constructLinks(linkOptions: { [key: string]: LinkOption }, nodes: SVNode[], layoutGroupTable: LayoutGroupTable, group: string, layout: string): SVLink[] {
private constructLinks(group: string, layout: string, linkOptions: { [key: string]: LinkOption }, nodes: SVNode[], layoutGroupTable: LayoutGroupTable): SVLink[] {
let linkList: SVLink[] = [],
linkNames = Object.keys(linkOptions);
@ -200,6 +209,52 @@ export class ModelConstructor {
return linkList;
}
/**
* 从配置项构建 indexLabel 集
* @param group
* @param layout
* @param indexLabelOptions
*/
private constructIndexLabel(group: string, layout: string, indexLabelOptions: { [key: string]: IndexLabelOption }, nodes: SVNode[]): SVIndexLabel[] {
let indexLabelList: SVIndexLabel[] = [],
indexNames = Object.keys(indexLabelOptions);
indexNames.forEach(name => {
for (let i = 0; i < nodes.length; i++) {
let node = nodes[i],
value = node[name];
// 若没有指针字段的结点则跳过
if (!value) continue;
let id = `${group}.${name}#${value}`,
indexLabel = new SVIndexLabel(id, name, group, layout, value, node, indexLabelOptions[name]);
indexLabelList.push(indexLabel);
}
});
return indexLabelList;
}
/**
*
* @param group
* @param layout
* @param addressLabelOption
* @param nodes
*/
private constructAddressLabel(group: string, layout: string, addressLabelOption: AddressLabelOption, nodes: SVNode[]): SVAddressLabel[] {
let addressLabelList: SVAddressLabel[] = [];
nodes.forEach(item => {
const addressLabel = new SVAddressLabel(`${item.id}-address-label`, item.sourceType, group, layout, item, addressLabelOption);
addressLabelList.push(addressLabel);
});
return addressLabelList;
}
/**
* 从配置和 node 集构建 marker 集
* @param markerOptions
@ -219,8 +274,8 @@ export class ModelConstructor {
if (!markerData) continue;
let id = `${group}.${name}.${Array.isArray(markerData) ? markerData.join('-') : markerData}`,
marker = this.createMarker(id, name, markerData, group, layout, node, markerOptions[name]);
marker = new SVMarker(id, name, group, layout, markerData, node, markerOptions[name]);
markerList.push(marker);
}
});
@ -262,8 +317,7 @@ export class ModelConstructor {
let label: string | string[] = this.resolveNodeLabel(options.label, sourceNode),
id = sourceNodeType + '.' + sourceNode.id.toString(),
node = new SVNode(id, sourceNodeType, group, layout, sourceNode, label, options);
node.leakAddress = new SVLeakAddress(`${id}-leak-adress`, sourceNodeType, group, layout, node);
if(node.freed) {
node.freedLabel = new SVFreedLabel(`${id}-freed-label`, sourceNodeType, group, layout, node);
}
@ -271,21 +325,6 @@ export class ModelConstructor {
return node;
}
/**
* 外部指针工厂，创建marker
* @param id
* @param markerName
* @param markerData
* @param group
* @param layout
* @param target
* @param options
* @returns
*/
private createMarker(id: string, markerName: string, markerData: string | string[], group: string, layout: string, target: SVNode, options: MarkerOption): SVMarker {
return new SVMarker(id, markerName, group, layout, markerData, target, options);;
};
/**
* 连线工厂，创建Link
* @param linkName

84
src/RegisteredShape/indexedNode.ts
View File

@ -1,84 +0,0 @@
import { registerNode } from '@antv/g6';
export default registerNode('indexed-node', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const width = cfg.size[0],
height = cfg.size[1],
disable = cfg.disable === undefined ? false : cfg.disable;
const rect = group.addShape('rect', {
attrs: {
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke || '#333',
fill: disable ? '#ccc' : cfg.style.fill,
cursor: cfg.style.cursor,
},
name: 'wrapper'
});
if (cfg.label) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('text', {
attrs: {
x: width,
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: style.fill || '#000',
fontSize: style.fontSize || 16
},
name: 'text'
});
}
const indexCfg = cfg.indexCfg;
const offset = Number(cfg.style.offset) || 20;
const indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
top: (width: number, height: number) => ({ x: width, y: height / 2 - offset }),
right: (width: number, height: number) => ({ x: width * 1.5 + offset, y: height }),
bottom: (width: number, height: number) => ({ x: width, y: height * 1.5 + offset }),
left: (width: number, height: number) => ({ x: width / 2 - offset, y: height })
};
if (indexCfg !== undefined) {
Object.keys(indexCfg).map(key => {
let indexCfgItem = indexCfg[key];
let position = indexCfgItem.position || 'bottom';
let { x: indexX, y: indexY } = indexPositionMap[position](width, height);
group.addShape('text', {
attrs: {
x: indexX,
y: indexY,
textAlign: 'center',
textBaseline: 'middle',
text: indexCfgItem.value.toString(),
fill: '#bbb',
fontSize: 14,
fontStyle: 'italic',
...indexCfgItem.style
},
name: 'index-text'
});
});
}
return rect;
},
getAnchorPoints() {
return [
[0.5, 0],
[1, 0.5],
[0.5, 1],
[0, 0.5]
];
}
});

6
src/RegisteredShape/pointer.ts
View File

@ -13,7 +13,7 @@ export default registerNode('pointer', {
});
if (cfg.label) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {};
const bgRect = group.addShape('rect', {
attrs: {
@ -33,8 +33,8 @@ export default registerNode('pointer', {
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: style.fill || '#999',
fontSize: style.fontSize || 16
fill: labelStyle.fill || '#999',
fontSize: labelStyle.fontSize || 16
},
name: 'pointer-text-shape'
});

2
src/StructV.ts
View File

@ -9,7 +9,6 @@ import CLenQueuePointer from "./RegisteredShape/clenQueuePointer";
import twoCellNode from "./RegisteredShape/twoCellNode";
import Cursor from "./RegisteredShape/cursor";
import { Vector } from "./Common/vector";
import indexedNode from "./RegisteredShape/indexedNode";
import { EngineOptions, LayoutCreator } from "./options";
import { SVNode } from "./Model/SVNode";
import { SourceNode } from "./sources";
@ -55,7 +54,6 @@ SV.registeredShape = [
linkListNode,
binaryTreeNode,
twoCellNode,
indexedNode,
Cursor,
CLenQueuePointer,
];

78
src/View/layoutProvider.ts
View File

@ -5,11 +5,9 @@ import { Util } from '../Common/util';
import { Vector } from '../Common/vector';
import { Engine } from '../engine';
import { LayoutGroupTable } from '../Model/modelConstructor';
import { SVLink } from '../Model/SVLink';
import { SVMarker } from '../Model/SVMarker';
import { SVModel } from '../Model/SVModel';
import { SVFreedLabel, SVLeakAddress, SVNode } from '../Model/SVNode';
import { LayoutOptions, MarkerOption, ViewOptions } from '../options';
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from '../Model/SVNodeAppendage';
import { AddressLabelOption, IndexLabelOption, LayoutOptions, MarkerOption, ViewOptions } from '../options';
import { ViewContainer } from './viewContainer';
@ -111,7 +109,7 @@ export class LayoutProvider {
*/
private layoutFreedLabel(freedLabels: SVFreedLabel[]) {
freedLabels.forEach(item => {
const freedNodeBound = item.node.getBound();
const freedNodeBound = item.target.getBound();
item.set({
x: freedNodeBound.x + freedNodeBound.width / 2,
@ -121,18 +119,64 @@ export class LayoutProvider {
});
}
/**
*
* @param indexLabels
* @param indexLabelOptions
*/
private layoutIndexLabel(indexLabels: SVIndexLabel[], indexLabelOptions: { [key: string]: IndexLabelOption }) {
const indexLabelPositionMap: { [key: string]: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => { x: number, y: number } } = {
top: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
return {
x: nodeBound.x + nodeBound.width / 2,
y: nodeBound.y - offset
};
},
right: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
return {
x: nodeBound.x + nodeBound.width + offset,
y: nodeBound.y + nodeBound.height / 2
};
},
bottom: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
return {
x: nodeBound.x + nodeBound.width / 2,
y: nodeBound.y + nodeBound.height + offset
};
},
left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
return {
x: nodeBound.x - labelBound.width - 2 * offset,
y: nodeBound.y + nodeBound.height / 2
};
}
};
indexLabels.forEach(item => {
const options: IndexLabelOption = indexLabelOptions[item.sourceType],
nodeBound = item.target.getBound(),
labelBound = item.getBound(),
offset = options.offset ?? 20,
position = options.position ?? 'bottom';
const pos = indexLabelPositionMap[position](nodeBound, labelBound, offset);
item.set(pos);
});
}
/**
* 布局泄漏区节点上面的address label
* @param leakAddress
*/
private layoutLeakAddress(leakAddress: SVLeakAddress[]) {
private layoutAddressLabel(leakAddress: SVAddressLabel[], addressLabelOption: AddressLabelOption) {
const offset = addressLabelOption.offset || 16;
leakAddress.forEach(item => {
const nodeBound = item.node.getBound();
const nodeBound = item.target.getBound();
item.set({
x: nodeBound.x + nodeBound.width / 2,
y: nodeBound.y - 16,
size: [nodeBound.width, 0]
y: nodeBound.y - offset
});
});
}
@ -146,22 +190,28 @@ export class LayoutProvider {
const modelGroupList: Group[] = [];
layoutGroupTable.forEach(group => {
const options: LayoutOptions = group.options.layout,
modelList: SVModel[] = group.modelList,
const modelList: SVModel[] = group.modelList,
modelGroup: Group = new Group();
const layoutOptions: LayoutOptions = group.options.layout;
modelList.forEach(item => {
modelGroup.add(item);
});
group.layoutCreator.layout(group.node, options); // 布局节点
group.layoutCreator.layout(group.node, layoutOptions); // 布局节点
modelGroupList.push(modelGroup);
});
layoutGroupTable.forEach(group => {
const markerOptions = group.options.marker || {},
indexLabelOptions = group.options.indexLabel || {},
addressLabelOption = group.options.addressLabel || {};
this.layoutIndexLabel(group.indexLabel, indexLabelOptions);
this.layoutFreedLabel(group.freedLabel);
this.layoutLeakAddress(group.leakAddress);
this.layoutMarker(group.marker, group.options.marker); // 布局外部指针
this.layoutAddressLabel(group.addressLabel, addressLabelOption);
this.layoutMarker(group.marker, markerOptions); // 布局外部指针
});
return modelGroupList;

62
src/View/reconcile.ts
View File

@ -2,9 +2,9 @@ import { EventBus } from "../Common/eventBus";
import { Util } from "../Common/util";
import { Engine } from "../engine";
import { SVLink } from "../Model/SVLink";
import { SVMarker } from "../Model/SVMarker";
import { SVModel } from "../Model/SVModel";
import { SVLeakAddress, SVNode } from "../Model/SVNode";
import { SVNode } from "../Model/SVNode";
import { SVAddressLabel, SVMarker, SVNodeAppendage } from "../Model/SVNodeAppendage";
import { Animations } from "./animation";
import { Renderer } from "./renderer";
@ -58,7 +58,7 @@ export class Reconcile {
appendModels.forEach(item => {
let removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id);
if(removeIndex > -1) {
if (removeIndex > -1) {
accumulateLeakModels.splice(removeIndex, 1);
}
});
@ -83,20 +83,10 @@ export class Reconcile {
item.leaked = true;
leakModels.push(item);
if (item.marker) {
item.marker.leaked = true;
leakModels.push(item.marker);
}
if(item.freedLabel) {
item.marker.leaked = true;
leakModels.push(item.freedLabel);
}
if(item.leakAddress) {
item.leakAddress.leaked = true;
leakModels.push(item.leakAddress);
}
item.appendages.forEach(appendage => {
appendage.leaked = true;
leakModels.push(appendage);
});
}
});
@ -184,13 +174,13 @@ export class Reconcile {
* @param modelList
* @returns
*/
private getFreedModels(prevModelList: SVModel[], modelList: SVModel[]): SVNode[] {
private getFreedModels(prevModelList: SVModel[], modelList: SVModel[]): SVNode[] {
const freedNodes = modelList.filter(item => item instanceof SVNode && item.freed) as SVNode[];
freedNodes.forEach(item => {
const prev = prevModelList.find(prevModel => item.id === prevModel.id);
if(prev) {
if (prev) {
item.set('label', prev.get('label'));
}
});
@ -205,10 +195,10 @@ export class Reconcile {
* @param continuousModels
*/
private handleContinuousModels(continuousModels: SVModel[]) {
for(let i = 0; i < continuousModels.length; i++) {
for (let i = 0; i < continuousModels.length; i++) {
let model = continuousModels[i];
if(model instanceof SVNode) {
if (model instanceof SVNode) {
const group = model.G6Item.getContainer();
group.attr({ opacity: 1 });
}
@ -223,9 +213,19 @@ export class Reconcile {
let { duration, timingFunction } = this.engine.animationOptions;
appendModels.forEach(item => {
if(item instanceof SVLeakAddress) {
const leakAddressG6Group = item.G6Item.getContainer();
leakAddressG6Group.attr({ opacity: 0 });
if (item instanceof SVNodeAppendage) {
// 先不显示泄漏区节点上面的地址文本
if (item instanceof SVAddressLabel) {
// 先将透明度改为0，隐藏掉
const AddressLabelG6Group = item.G6Item.getContainer();
AddressLabelG6Group.attr({ opacity: 0 });
}
else {
Animations.FADE_IN(item.G6Item, {
duration,
timingFunction
});
}
}
else {
Animations.APPEND(item.G6Item, {
@ -262,7 +262,7 @@ export class Reconcile {
let { duration, timingFunction } = this.engine.animationOptions;
leakModels.forEach(item => {
if(item instanceof SVLeakAddress) {
if (item instanceof SVAddressLabel) {
Animations.FADE_IN(item.G6Item, {
duration,
timingFunction
@ -279,7 +279,7 @@ export class Reconcile {
*/
private handleAccumulateLeakModels(accumulateModels: SVModel[]) {
accumulateModels.forEach(item => {
if(item.generalStyle) {
if (item.generalStyle) {
item.set('style', { ...item.generalStyle });
}
});
@ -292,7 +292,7 @@ export class Reconcile {
*/
private handleFreedModels(freedModes: SVNode[]) {
const { duration, timingFunction } = this.engine.animationOptions,
alpha = 0.4;
alpha = 0.4;
freedModes.forEach(item => {
const nodeGroup = item.G6Item.getContainer();
@ -318,7 +318,7 @@ export class Reconcile {
* @param models
*/
private handleChangeModels(models: SVModel[]) {
if(models.length === 0) {
if (models.length === 0) {
models = this.prevChangeModels;
}
@ -329,7 +329,7 @@ export class Reconcile {
}
models.forEach(item => {
if(item.generalStyle === undefined) {
if (item.generalStyle === undefined) {
item.generalStyle = Util.objectClone(item.G6ModelProps.style);
}
@ -410,7 +410,7 @@ export class Reconcile {
this.handleLeakModels(LEAKED);
this.handleRemoveModels(REMOVE);
if(this.isFirstPatch) {
if (this.isFirstPatch) {
this.isFirstPatch = false;
}
}

11
src/View/viewContainer.ts
View File

@ -10,6 +10,7 @@ import { InitDragCanvasWithLeak } from "../BehaviorHelper/dragCanvasWithLeak";
import { EventBus } from "../Common/eventBus";
import { InitZoomCanvasWithLeak } from "../BehaviorHelper/zoomCanvasWithLeak";
import { Group } from "../Common/group";
import { Graph } from "_@antv_g6-pc@0.5.0@@antv/g6-pc";
@ -80,10 +81,18 @@ export class ViewContainer {
/**
* 获取 g6 实例
*/
getG6Instance() {
getG6Instance(): Graph {
return this.renderer.getG6Instance();
}
/**
* 获取泄漏区里面的元素
* @returns
*/
getAccumulateLeakModels(): SVModel[] {
return this.accumulateLeakModels;
}
/**
* 刷新视图
*/

76
src/engine.ts
View File

@ -1,12 +1,11 @@
import { Sources } from "./sources";
import { ModelConstructor } from "./Model/modelConstructor";
import { AnimationOptions, EngineOptions, InteractionOptions, ViewOptions } from "./options";
import { SV } from "./StructV";
import { EventBus } from "./Common/eventBus";
import { ViewContainer } from "./View/viewContainer";
import { SVLink } from "./Model/SVLink";
import { SVNode } from "./Model/SVNode";
import { SVMarker } from "./Model/SVMarker";
import { Util } from "./Common/util";
import { SVModel } from "./Model/SVModel";
export class Engine {
@ -107,63 +106,6 @@ export class Engine {
return this.viewContainer.getG6Instance();
}
/**
* 获取所有 element
* @param group
*/
public getNodes(group?: string): SVNode[] {
const layoutGroupTable = this.modelConstructor.getLayoutGroupTable();
if(group && layoutGroupTable.has('group')) {
return layoutGroupTable.get('group').node;
}
const nodes: SVNode[] = [];
layoutGroupTable.forEach(item => {
nodes.push(...item.node);
})
return nodes;
}
/**
* 获取所有 marker
* @param group
*/
public getMarkers(group?: string): SVMarker[] {
const layoutGroupTable = this.modelConstructor.getLayoutGroupTable();
if(group && layoutGroupTable.has('group')) {
return layoutGroupTable.get('group').marker;
}
const markers: SVMarker[] = [];
layoutGroupTable.forEach(item => {
markers.push(...item.marker);
})
return markers;
}
/**
* 获取所有 link
* @param group
*/
public getLinks(group?: string): SVLink[] {
const layoutGroupTable = this.modelConstructor.getLayoutGroupTable();
if(group && layoutGroupTable.has('group')) {
return layoutGroupTable.get('group').link;
}
const links: SVLink[] = [];
layoutGroupTable.forEach(item => {
links.push(...item.link);
})
return links;
}
/**
* 隐藏某些组
* @param groupNames
@ -188,14 +130,24 @@ export class Engine {
});
}
/**
*
*/
public getAllModels(): SVModel[] {
const modelList = Util.convertGroupTable2ModelList(this.modelConstructor.getLayoutGroupTable());
const accumulateLeakModels = this.viewContainer.getAccumulateLeakModels();
return [...modelList, ...accumulateLeakModels];
}
/**
* 使用id查找某个节点
* @param id
*/
public findNode(id: string): SVNode {
const nodes = this.getNodes();
const modelList = this.getAllModels();
const stringId = id.toString();
const targetNode = nodes.find(item => item.sourceId === stringId);
const targetNode: SVNode = modelList.find(item => item instanceof SVNode && item.sourceId === stringId) as SVNode;
return targetNode;
}

17
src/options.ts
View File

@ -22,10 +22,14 @@ export interface NodeLabelOption {
};
export interface NodeIndexOption extends NodeLabelOption {
export interface AddressLabelOption {
offset?: number;
style?: Style;
}
export interface IndexLabelOption extends NodeLabelOption {
position: 'top' | 'right' | 'bottom' | 'left';
value: string;
style: Style;
}
@ -49,7 +53,6 @@ export interface NodeOption extends ModelOption {
rotation: number;
label: string | string[];
anchorPoints: number[][];
indexOptions: NodeIndexOption;
labelOptions: NodeLabelOption;
}
@ -78,8 +81,10 @@ export interface LayoutOptions {
export interface LayoutGroupOptions {
node: { [key: string]: NodeOption };
link?: { [key: string]: LinkOption }
marker?: { [key: string]: MarkerOption }
link?: { [key: string]: LinkOption };
marker?: { [key: string]: MarkerOption };
addressLabel?: AddressLabelOption;
indexLabel?: { [key: string]: IndexLabelOption };
layout?: LayoutOptions;
};