Merge branch 'main' of https://gitlab.com/phenomLi/StructV2 into main
# Conflicts: # demo/Layouter/Force.js # src/Model/SVModel.ts # src/StructV.ts # src/View/renderer.ts # src/View/viewContainer.ts # src/engine.ts
This commit is contained in:
commit
7b9fffe0ab
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
node_modules
|
||||
test
|
||||
dist
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -20,7 +20,6 @@ const isNeighbor = function (itemA, itemB) {
|
||||
|
||||
|
||||
SV.registerLayout('AdjoinMatrixGraph', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let dataLength = sources.length;
|
||||
let matrixNodeLength = dataLength * dataLength;
|
||||
155
demo/Layouter/BinaryTree.js
Normal file
155
demo/Layouter/BinaryTree.js
Normal file
@ -0,0 +1,155 @@
|
||||
SV.registerLayout('BinaryTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
default: {
|
||||
type: 'binary-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#b83b5e',
|
||||
stroke: '#333',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
},
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => (index === 0 ? 3 : 1),
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
offset: 14,
|
||||
style: {
|
||||
fill: '#f08a5d',
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
fill: '#000099',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
},
|
||||
behavior: {
|
||||
// dragNode: false
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
*/
|
||||
layoutItem(node, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let bound = node.getBound(),
|
||||
width = bound.width,
|
||||
height = bound.height,
|
||||
group = new Group(node),
|
||||
leftGroup = null,
|
||||
rightGroup = null,
|
||||
leftBound = null,
|
||||
rightBound = null;
|
||||
|
||||
if (node.visited) {
|
||||
return null;
|
||||
}
|
||||
|
||||
node.visited = true;
|
||||
|
||||
if (node.child && node.child[0]) {
|
||||
leftGroup = this.layoutItem(node.child[0], layoutOptions);
|
||||
}
|
||||
|
||||
if (node.child && node.child[1]) {
|
||||
rightGroup = this.layoutItem(node.child[1], layoutOptions);
|
||||
}
|
||||
|
||||
if (leftGroup) {
|
||||
leftBound = leftGroup.getBound();
|
||||
node.set('y', leftBound.y - layoutOptions.yInterval - height);
|
||||
}
|
||||
|
||||
if (rightGroup) {
|
||||
rightBound = rightGroup.getBound();
|
||||
|
||||
if (leftGroup) {
|
||||
rightGroup.translate(0, leftBound.y - rightBound.y)
|
||||
}
|
||||
|
||||
rightBound = rightGroup.getBound();
|
||||
node.set('y', rightBound.y - layoutOptions.yInterval - height);
|
||||
}
|
||||
|
||||
// 处理左右子树相交问题
|
||||
if (leftGroup && rightGroup) {
|
||||
let move = Math.abs(rightBound.x - layoutOptions.xInterval - leftBound.x - leftBound.width);
|
||||
if (move > 0) {
|
||||
leftGroup.translate(-move / 2, 0);
|
||||
rightGroup.translate(move / 2, 0);
|
||||
}
|
||||
}
|
||||
|
||||
if (leftGroup) {
|
||||
leftBound = leftGroup.getBound();
|
||||
node.set('x', leftBound.x + leftBound.width + layoutOptions.xInterval / 2 - width);
|
||||
}
|
||||
|
||||
if (rightGroup) {
|
||||
rightBound = rightGroup.getBound();
|
||||
node.set('x', rightBound.x - layoutOptions.xInterval / 2 - width);
|
||||
}
|
||||
|
||||
|
||||
if (leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
|
||||
if (rightGroup) {
|
||||
group.add(rightGroup);
|
||||
}
|
||||
|
||||
return group;
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
* @param {*} elements
|
||||
* @param {*} layoutOptions
|
||||
*/
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
this.layoutItem(root, layoutOptions);
|
||||
},
|
||||
});
|
||||
|
||||
[{
|
||||
id: 6385328,
|
||||
data: '',
|
||||
external: ['L'],
|
||||
root: true,
|
||||
after: null,
|
||||
next: null,
|
||||
}, ];
|
||||
@ -13,7 +13,7 @@ SV.registerLayout('ChainHashTable', {
|
||||
element: {
|
||||
head: {
|
||||
type: 'two-cell-node',
|
||||
label: '[id]',
|
||||
label: '[data]',
|
||||
size: [70, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
@ -22,7 +22,7 @@ SV.registerLayout('ChainHashTable', {
|
||||
},
|
||||
node: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
@ -64,9 +64,10 @@ SV.registerLayout('ChainHashTable', {
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
marker: {
|
||||
external: {
|
||||
anchor: 3,
|
||||
type: 'pointer',
|
||||
anchor: 1,
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
@ -63,6 +63,40 @@ SV.registerShape('three-cell-node', {
|
||||
});
|
||||
}
|
||||
|
||||
//节点没有原子时
|
||||
if(!cfg.sub){
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height * ( 8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: '#000',
|
||||
fontSize: 20,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
});
|
||||
}
|
||||
|
||||
//节点没有子表时
|
||||
if(!cfg.next){
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (4 / 3),
|
||||
y: height * ( 8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: '#000',
|
||||
fontSize: 20,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
});
|
||||
}
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
@ -1,17 +1,14 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('HashTable', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
const firstElement = sources[0];
|
||||
|
||||
if(firstElement.external) {
|
||||
if (firstElement.external) {
|
||||
firstElement.headExternal = firstElement.external;
|
||||
delete firstElement.external;
|
||||
}
|
||||
|
||||
if(firstElement.cursor) {
|
||||
if (firstElement.cursor) {
|
||||
firstElement.headCursor = firstElement.cursor;
|
||||
delete firstElement.cursor;
|
||||
}
|
||||
@ -23,7 +20,7 @@ SV.registerLayout('HashTable', {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'indexed-node',
|
||||
type: 'array-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
@ -71,25 +68,29 @@ SV.registerLayout('HashTable', {
|
||||
layout(elements) {
|
||||
let arr = elements;
|
||||
|
||||
for(let i = 0; i < arr.length; i++) {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let width = arr[i].get('size')[0];
|
||||
|
||||
if(i > 0) {
|
||||
if (i > 0) {
|
||||
arr[i].set('x', arr[i - 1].get('x') + width);
|
||||
}
|
||||
|
||||
if(arr[i].empty) {
|
||||
if (arr[i].empty) {
|
||||
arr[i].set('style', {
|
||||
fill: null
|
||||
});
|
||||
}
|
||||
|
||||
if(arr[i].disable) {
|
||||
if (arr[i].disable) {
|
||||
arr[i].set('style', {
|
||||
fill: '#ccc'
|
||||
fill: null
|
||||
});
|
||||
arr[i].set('labelCfg', {
|
||||
style: {
|
||||
opacity: 0.4
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -5,7 +5,7 @@ SV.registerLayout('LinkList', {
|
||||
sourcesPreprocess(sources) {
|
||||
let root = sources[0];
|
||||
|
||||
if(root.external) {
|
||||
if (root.external) {
|
||||
root.rootExternal = root.external;
|
||||
delete root.external;
|
||||
}
|
||||
@ -77,9 +77,6 @@ SV.registerLayout('LinkList', {
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
behavior: {
|
||||
dragNode: false
|
||||
}
|
||||
};
|
||||
},
|
||||
@ -91,18 +88,18 @@ SV.registerLayout('LinkList', {
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
if(prev) {
|
||||
if (prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
if (node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
},
|
||||
@ -72,6 +72,20 @@ SV.registerLayout('LinkQueue', {
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
loopNext: {
|
||||
type: 'quadratic',
|
||||
curveOffset: -100,
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 7,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
@ -85,7 +99,7 @@ SV.registerLayout('LinkQueue', {
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
yInterval: 58
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['node']
|
||||
@ -20,7 +20,7 @@
|
||||
element: {
|
||||
default: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
@ -44,6 +44,20 @@
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
loopNext: {
|
||||
type: 'quadratic',
|
||||
curveOffset: -100,
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 7,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
@ -83,7 +97,7 @@
|
||||
|
||||
let height = node.get('size')[1];
|
||||
|
||||
if(prev) {
|
||||
if(prev && node.isSameGroup(prev)) {
|
||||
node.set('x', prev.get('x'));
|
||||
node.set('y', prev.get('y') - layoutOptions.yInterval - height);
|
||||
}
|
||||
197
demo/Layouter/PCTree.js
Normal file
197
demo/Layouter/PCTree.js
Normal file
@ -0,0 +1,197 @@
|
||||
|
||||
SV.registerLayout('PCTree', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
|
||||
let headNodes = sources.filter(item => item.type === 'PCTreeHead');
|
||||
|
||||
for(let i = 0; i < headNodes.length; i++){
|
||||
|
||||
let dataNode = {
|
||||
type: 'PCTreePreHead',
|
||||
id: headNodes[i].id + '_0',
|
||||
data: headNodes[i].preData,
|
||||
indexLeft: headNodes[i].index,
|
||||
root: headNodes[i].root
|
||||
}
|
||||
|
||||
if(dataNode.root){
|
||||
dataNode.indexTop = 'data';
|
||||
headNodes[i].indexTop = ' parent firstChild'
|
||||
}
|
||||
sources.push(dataNode)
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
PCTreePreHead: {
|
||||
type: 'rect',
|
||||
label: '[data]',
|
||||
size: [60, 34],
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
},
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3',
|
||||
offset: 25
|
||||
}
|
||||
},
|
||||
PCTreeHead: {
|
||||
type: 'two-cell-node',
|
||||
label: '[data]',
|
||||
size: [120, 34],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
PCTreeNode: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 27],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#00AF92'
|
||||
}
|
||||
}
|
||||
},
|
||||
indexLabel: {
|
||||
indexTop: { position: 'top' },
|
||||
indexLeft: { position: 'left' }
|
||||
},
|
||||
link: {
|
||||
headNext: {
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 86
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['PCTreeNode']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
//判断node节点是否之前布局过
|
||||
isUnique(value, allNodeIdValue){
|
||||
let re = new RegExp("" + value);
|
||||
return !re.test(allNodeIdValue);
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions, allNodeId) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
let width = node.get('size')[0],
|
||||
idValue = node.id.split('(')[1].slice(0, -1);
|
||||
|
||||
//有y型链表的情况不用再布局
|
||||
if(this.isUnique(idValue, allNodeId.value)){
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
|
||||
}
|
||||
|
||||
allNodeId.value += idValue;
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions, allNodeId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let headNode = elements.filter(item => item.type === 'PCTreeHead'),
|
||||
preHeadNode = elements.filter(item => item.type === 'PCTreePreHead'),
|
||||
roots = elements.filter(item => item.type === 'PCTreeNode' && item.root),
|
||||
height = headNode[0].get('size')[1],
|
||||
width = headNode[0].get('size')[0],
|
||||
i,
|
||||
allNodeId = { value: ''}; //引用类型用于传参
|
||||
|
||||
for(i = 0; i < headNode.length; i++) {
|
||||
let node = headNode[i],
|
||||
preNode = preHeadNode[i];
|
||||
|
||||
node.set({
|
||||
x: 0,
|
||||
y: i * height
|
||||
});
|
||||
|
||||
preNode.set({
|
||||
x: width / 4,
|
||||
y: (i + 1) * height
|
||||
})
|
||||
|
||||
if(node.headNext) {
|
||||
let y = node.get('y') + height - node.headNext.get('size')[1],
|
||||
x = width + layoutOptions.xInterval * 2;
|
||||
|
||||
node.headNext.set({ x, y });
|
||||
this.layoutItem(node.headNext, null, layoutOptions, allNodeId);
|
||||
}
|
||||
}
|
||||
|
||||
for(i = 0; i < roots.length; i++) {
|
||||
let nodeWidth = roots[0].get('size')[0],
|
||||
nodeInternalSum = i * (nodeWidth + layoutOptions.xInterval);
|
||||
|
||||
roots[i].set({
|
||||
x: headNode[0].get('x') + width + layoutOptions.xInterval * 2 + nodeInternalSum,
|
||||
y: headNode[0].get('y') - layoutOptions.yInterval
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -35,8 +35,12 @@ SV.registerLayout('PTree', {
|
||||
data: sources[i].parent
|
||||
});
|
||||
}
|
||||
if(sources[0]){
|
||||
sources[0].indexLeft = 'data';
|
||||
}
|
||||
if(parentNodes[0]){
|
||||
parentNodes[0].indexLeft = 'parent';
|
||||
}
|
||||
|
||||
sources.push(...parentNodes);
|
||||
|
||||
@ -70,14 +74,17 @@ SV.registerLayout('PTree', {
|
||||
|
||||
|
||||
layout(elements) {
|
||||
let nodeLength = elements.length,
|
||||
halfLength = nodeLength / 2,
|
||||
let nodeLength = elements.length;
|
||||
|
||||
if(nodeLength == 0) return;
|
||||
|
||||
let halfLength = nodeLength / 2,
|
||||
size = elements[0].get('size')[0],
|
||||
i;
|
||||
|
||||
|
||||
for (i = 0; i < nodeLength; i++) {
|
||||
let x = (i % halfLength) * size;
|
||||
let x = (i % halfLength) * size,
|
||||
y = Math.floor(i / halfLength) * size;
|
||||
|
||||
elements[i].set({ x, y });
|
||||
@ -1,40 +1,36 @@
|
||||
/**
|
||||
* 三叉树
|
||||
*/
|
||||
SV.registerLayout('TriTree', {
|
||||
SV.registerLayout('TriTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
/**
|
||||
* 结点
|
||||
*/
|
||||
element: {
|
||||
node: {
|
||||
default: {
|
||||
type: 'tri-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#ff2e63',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
fill: '#95e1d3',
|
||||
stroke: '#333',
|
||||
cursor: 'pointer',
|
||||
backgroundFill: '#eee'
|
||||
},
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 箭头
|
||||
*/
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => index,
|
||||
targetAnchor: 3,
|
||||
type: 'line',
|
||||
style: {
|
||||
stroke: '#333',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
@ -43,54 +39,77 @@
|
||||
parent: {
|
||||
type: 'line',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#A9A9A9',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
r_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 5,
|
||||
curveOffset: -20,
|
||||
style: {
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
l_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
curveOffset: 20,
|
||||
style: {
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 指针
|
||||
*/
|
||||
marker: {
|
||||
external: {
|
||||
type: "pointer",
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
offset: 14,
|
||||
labelOffset: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
// stroke:
|
||||
fontSize: 15,
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 布局
|
||||
*/
|
||||
addressLabel: {
|
||||
style: {
|
||||
fill: '#999'
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
},
|
||||
/**
|
||||
* 动画
|
||||
*/
|
||||
//animation: {
|
||||
// enable: true,
|
||||
// duration: 750,
|
||||
// timingFunction: 'easePolyOut'
|
||||
//}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
@ -99,7 +118,7 @@
|
||||
*/
|
||||
layoutItem(node, parent, index, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if(!node) {
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -109,20 +128,20 @@
|
||||
group = new Group(node); //创建分组
|
||||
|
||||
//有双亲，设置结点的位置
|
||||
if(parent) {
|
||||
if (parent) {
|
||||
// 纵坐标
|
||||
node.set('y', parent.get('y') + layoutOptions.yInterval + height);
|
||||
// 左节点横坐标
|
||||
if(index === 0) {
|
||||
if (index === 0) {
|
||||
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
|
||||
}
|
||||
// 右结点横坐标
|
||||
if(index === 1) {
|
||||
if (index === 1) {
|
||||
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
|
||||
}
|
||||
}
|
||||
//有孩子
|
||||
if(node.child && (node.child[0] || node.child[1])) {
|
||||
if (node.child && (node.child[0] || node.child[1])) {
|
||||
let leftChild = node.child[0],
|
||||
rightChild = node.child[1],
|
||||
leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions),
|
||||
@ -131,12 +150,12 @@
|
||||
move = 0;
|
||||
|
||||
// 处理左子树中子树相交问题
|
||||
if(leftGroup && rightChild) {
|
||||
if (leftGroup && rightChild) {
|
||||
//求出包围盒相交部分
|
||||
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
|
||||
move = 0;
|
||||
//处理
|
||||
if(intersection && intersection.width > 0) {
|
||||
if (intersection && intersection.width > 0) {
|
||||
move = (intersection.width + layoutOptions.xInterval) / 2;
|
||||
// console.log(move,intersection.width,layoutOptions.xInterval);
|
||||
leftGroup.translate(-move, 0);
|
||||
@ -145,10 +164,10 @@
|
||||
}
|
||||
|
||||
//加入分组
|
||||
if(leftGroup) {
|
||||
if (leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
if(rightGroup) {
|
||||
if (rightGroup) {
|
||||
group.add(rightGroup)
|
||||
}
|
||||
|
||||
292
demo/data.js
Normal file
292
demo/data.js
Normal file
@ -0,0 +1,292 @@
|
||||
const SOURCES_DATA = [{
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9ee0",
|
||||
"0xfd9f10"
|
||||
],
|
||||
"id": "0xfd9eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree3": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T3"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f40",
|
||||
"name": "T3",
|
||||
"data": "D",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree4": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T4"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f70",
|
||||
"name": "T4",
|
||||
"data": "E",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": true,
|
||||
"isFirstDebug": true
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9ee0",
|
||||
"0xfd9f10"
|
||||
],
|
||||
"id": "0xfd9eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree3": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T3"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f40",
|
||||
"name": "T3",
|
||||
"data": "D",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree4": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T4"
|
||||
],
|
||||
"parent": [
|
||||
"0xfd9f40"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f70",
|
||||
"name": "T4",
|
||||
"data": "E",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9ee0",
|
||||
"0xfd9f10"
|
||||
],
|
||||
"id": "0xfd9eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree3": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T3"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9f70",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f40",
|
||||
"name": "T3",
|
||||
"data": "D",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f70",
|
||||
"name": "T3->lchild",
|
||||
"data": "E",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9f40"
|
||||
],
|
||||
"external": [
|
||||
"T4"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}];
|
||||
@ -2,8 +2,8 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DEMO</title>
|
||||
<style>
|
||||
* {
|
||||
@ -50,7 +50,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
@ -67,15 +66,14 @@
|
||||
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
|
||||
const Group = SV.Group,
|
||||
Bound = SV.Bound,
|
||||
G6 = SV.G6,
|
||||
Vector = SV.Vector;
|
||||
|
||||
</script>
|
||||
<script src="./Layouter/LinkList.js"></script>
|
||||
<script src="./Layouter/BinaryTree.js"></script>
|
||||
<script src="./Layouter/TriTree.js"></script>
|
||||
<script src="./Layouter/Stack.js"></script>
|
||||
<script src="./Layouter/LinkQueue.js"></script>
|
||||
<script src="./Layouter/GeneralizedList.js"></script>
|
||||
@ -87,9 +85,10 @@
|
||||
<script src="./Layouter/AdjoinTableGraph.js"></script>
|
||||
<script src="./Layouter/SqQueue.js"></script>
|
||||
<script src="./Layouter/PTree.js"></script>
|
||||
<script src="./Layouter/PCTree.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
view: {
|
||||
leakAreaHeight: 130,
|
||||
@ -97,133 +96,8 @@
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
let data = [{
|
||||
"sqStack0": {
|
||||
"data": [
|
||||
{
|
||||
"id": "0x617eb5",
|
||||
"data": "",
|
||||
"index": 5,
|
||||
"cursor": "top"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb4",
|
||||
"data": "2",
|
||||
"index": 4
|
||||
},
|
||||
{
|
||||
"id": "0x617eb3",
|
||||
"data": "6",
|
||||
"index": 3
|
||||
},
|
||||
{
|
||||
"id": "0x617eb2",
|
||||
"data": "7",
|
||||
"index": 2
|
||||
},
|
||||
{
|
||||
"id": "0x617eb1",
|
||||
"data": "9",
|
||||
"index": 1
|
||||
},
|
||||
{
|
||||
"id": "0x617eb0",
|
||||
"data": "1",
|
||||
"index": 0,
|
||||
"external": "S"
|
||||
}
|
||||
],
|
||||
"layouter": "Stack"
|
||||
}
|
||||
}, {
|
||||
"sqStack0": {
|
||||
"data": [
|
||||
{
|
||||
"id": "0x617eb4",
|
||||
"data": "2",
|
||||
"index": 4,
|
||||
"cursor": "top",
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb3",
|
||||
"data": "6",
|
||||
"index": 3,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb2",
|
||||
"data": "7",
|
||||
"index": 2,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb1",
|
||||
"data": "9",
|
||||
"index": 1,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb0",
|
||||
"data": "1",
|
||||
"index": 0,
|
||||
"bottomExternal": "S",
|
||||
"type": "default"
|
||||
}
|
||||
],
|
||||
"layouter": "Stack"
|
||||
}
|
||||
}, {
|
||||
"data": [
|
||||
{
|
||||
"id": "0x617eb5",
|
||||
"data": "",
|
||||
"index": 5,
|
||||
"cursor": "top",
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb4",
|
||||
"data": "2",
|
||||
"index": 4,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb3",
|
||||
"data": "6",
|
||||
"index": 3,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb2",
|
||||
"data": "7",
|
||||
"index": 2,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb1",
|
||||
"data": "9",
|
||||
"index": 1,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"id": "0x617eb0",
|
||||
"data": "1",
|
||||
"index": 0,
|
||||
"bottomExternal": "S",
|
||||
"type": "default"
|
||||
}
|
||||
],
|
||||
"layouter": "Stack"
|
||||
}];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let dataIndex = 0,
|
||||
curData = data[dataIndex];
|
||||
curData = SOURCES_DATA[dataIndex];
|
||||
|
||||
let enableBrushSelect = false;
|
||||
|
||||
@ -235,12 +109,12 @@
|
||||
cur.render(curData);
|
||||
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
curData = data[++dataIndex];
|
||||
curData = SOURCES_DATA[++dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
document.getElementById('btn-prev').addEventListener('click', e => {
|
||||
curData = data[--dataIndex];
|
||||
curData = SOURCES_DATA[--dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
@ -270,12 +144,10 @@
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
container.addEventListener('mousemove', e => {
|
||||
let x = e.offsetX, y = e.offsetY;
|
||||
let x = e.offsetX,
|
||||
y = e.offsetY;
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -1,147 +0,0 @@
|
||||
|
||||
|
||||
SV.registerLayout('BinaryTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'binary-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#b83b5e',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => index === 0? 3: 1,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
offset: 14,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
fill: '#000099'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40
|
||||
},
|
||||
behavior: {
|
||||
// dragNode: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
*/
|
||||
layoutItem(node, parent, index, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let bound = node.getBound(),
|
||||
width = bound.width,
|
||||
height = bound.height,
|
||||
group = new Group(node);
|
||||
|
||||
if(parent) {
|
||||
node.set('y', parent.get('y') + layoutOptions.yInterval + height);
|
||||
|
||||
// 左节点
|
||||
if(index === 0) {
|
||||
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
|
||||
}
|
||||
|
||||
// 右结点
|
||||
if(index === 1) {
|
||||
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
if(node.child && (node.child[0] || node.child[1])) {
|
||||
let leftChild = node.child[0],
|
||||
rightChild = node.child[1],
|
||||
leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions),
|
||||
rightGroup = this.layoutItem(rightChild, node, 1, layoutOptions),
|
||||
intersection = null,
|
||||
move = 0;
|
||||
|
||||
// 处理左右子树相交问题
|
||||
if(leftGroup && rightGroup) {
|
||||
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
|
||||
move = 0;
|
||||
|
||||
if(intersection && intersection.width > 0) {
|
||||
move = (intersection.width + layoutOptions.xInterval) / 2;
|
||||
leftGroup.translate(-move, 0);
|
||||
rightGroup.translate(move, 0);
|
||||
}
|
||||
}
|
||||
|
||||
if(leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
|
||||
if(rightGroup) {
|
||||
group.add(rightGroup)
|
||||
}
|
||||
}
|
||||
|
||||
return group;
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
* @param {*} elements
|
||||
* @param {*} layoutOptions
|
||||
*/
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
this.layoutItem(root, null, -1, layoutOptions);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[
|
||||
{
|
||||
"id": 6385328,
|
||||
"data": "",
|
||||
"external": [
|
||||
"L"
|
||||
],
|
||||
"root": true,
|
||||
"after": null,
|
||||
"next": null
|
||||
}
|
||||
]
|
||||
|
||||
14104
dist/sv.js
vendored
14104
dist/sv.js
vendored
File diff suppressed because one or more lines are too long
4080
package-lock.json
generated
Normal file
4080
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@ -1,19 +1,20 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@antv/g6": "^4.4.1",
|
||||
"merge": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"merge": "^2.1.1",
|
||||
"ts-loader": "^5.2.1",
|
||||
"typescript": "^3.2.2",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-cli": "^3.2.3"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.config.product.js",
|
||||
"dep": "webpack --config webpack.config.product.js && node copyDist2Anyview.js",
|
||||
"dev": "webpack --w --config webpack.config.develop.js",
|
||||
"dev": "webpack --watch --config webpack.config.develop.js",
|
||||
"copy": "node copyDist2Anyview.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"acorn": "^8.7.0",
|
||||
"merge": "^2.1.1",
|
||||
"ts-loader": "^9.2.8",
|
||||
"typescript": "^4.6.2",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g6": "^4.6.4",
|
||||
"merge": "^2.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import { Graph, INode } from "@antv/g6";
|
||||
import { EventBus } from "../Common/eventBus";
|
||||
import { LayoutGroupTable } from "../Model/modelConstructor";
|
||||
import { SVModel } from "../Model/SVModel";
|
||||
import { SVNode } from "../Model/SVNode";
|
||||
import { ViewContainer } from "../View/viewContainer";
|
||||
|
||||
import { G6Event, Graph, INode } from '@antv/g6';
|
||||
import { EventBus } from '../Common/eventBus';
|
||||
import { LayoutGroupTable } from '../Model/modelConstructor';
|
||||
import { SVModel } from '../Model/SVModel';
|
||||
import { SVNode } from '../Model/SVNode';
|
||||
import { ViewContainer } from '../View/viewContainer';
|
||||
|
||||
/**
|
||||
* 判断当前节点是否可以单独拖拽
|
||||
@ -23,8 +22,7 @@ const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | str
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* 判定该节点是否可以被拖拽
|
||||
@ -32,7 +30,11 @@ const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | str
|
||||
* 2. 当 dragNodeOption 声明了某些节点的type时（字符数组），这些节点可以单独拖拽
|
||||
* 3. 当 dragNodeOption 为 false 或者不包含在声明的type的节点，只能批量拖拽
|
||||
*/
|
||||
export const DetermineNodeDrag = function (layoutGroupTable: LayoutGroupTable, node: SVNode, brushSelectedModels: SVModel[]) {
|
||||
export const DetermineNodeDrag = function (
|
||||
layoutGroupTable: LayoutGroupTable,
|
||||
node: SVNode,
|
||||
brushSelectedModels: SVModel[]
|
||||
) {
|
||||
const layoutGroup = layoutGroupTable.get(node.group),
|
||||
dragNodeOption = layoutGroup.options.behavior?.dragNode,
|
||||
canNodeDragAlone = checkNodeDragAlone(node, dragNodeOption);
|
||||
@ -45,14 +47,13 @@ export const DetermineNodeDrag = function (layoutGroupTable: LayoutGroupTable, n
|
||||
nodeModelType = node.getModelType(),
|
||||
modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType),
|
||||
brushSelectedSameTypeModels = brushSelectedModels.filter(item => {
|
||||
return item.group === node.group &&
|
||||
item.getModelType() === nodeModelType &&
|
||||
item.sourceType === nodeSourceType
|
||||
return (
|
||||
item.group === node.group && item.getModelType() === nodeModelType && item.sourceType === nodeSourceType
|
||||
);
|
||||
});
|
||||
|
||||
return modelList.length === brushSelectedSameTypeModels.length;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* 在初始化渲染器之后，修正节点拖拽时，外部指针或者其他 appendage 没有跟着动的问题
|
||||
@ -76,7 +77,7 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
|
||||
item.setSelectedState(false);
|
||||
|
||||
if (item instanceof SVNode) {
|
||||
item.appendages.forEach(appendage => appendage.setSelectedState(false));
|
||||
item.getAppendagesList().forEach(appendage => appendage.setSelectedState(false));
|
||||
}
|
||||
});
|
||||
viewContainer.brushSelectedModels.length = 0;
|
||||
@ -97,14 +98,14 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
|
||||
node.setSelectedState(false);
|
||||
node.set({
|
||||
x: node.G6Item.getModel().x,
|
||||
y: node.G6Item.getModel().y
|
||||
y: node.G6Item.getModel().y,
|
||||
});
|
||||
|
||||
node.appendages.forEach(item => {
|
||||
node.getAppendagesList().forEach(item => {
|
||||
item.setSelectedState(false);
|
||||
item.set({
|
||||
x: item.G6Item.getModel().x,
|
||||
y: item.G6Item.getModel().y
|
||||
y: item.G6Item.getModel().y,
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -112,14 +113,14 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
|
||||
viewContainer.brushSelectedModels.forEach(item => {
|
||||
item.set({
|
||||
x: item.G6Item.getModel().x,
|
||||
y: item.G6Item.getModel().y
|
||||
y: item.G6Item.getModel().y,
|
||||
});
|
||||
|
||||
if(item instanceof SVNode) {
|
||||
item.appendages.forEach(appendage => {
|
||||
if (item instanceof SVNode) {
|
||||
item.getAppendagesList().forEach(appendage => {
|
||||
appendage.set({
|
||||
x: appendage.G6Item.getModel().x,
|
||||
y: appendage.G6Item.getModel().y
|
||||
y: appendage.G6Item.getModel().y,
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -127,7 +128,6 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 检测框选到的节点是不是都可以被选中
|
||||
* @param viewContainer
|
||||
@ -136,8 +136,8 @@ export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
|
||||
const g6Instance: Graph = viewContainer.getG6Instance();
|
||||
|
||||
// 当框选完成后，监听被框选节点的数量变化事件，将被框选的节点添加到 brushSelectedModels 数组里面
|
||||
g6Instance.on('nodeselectchange', event => {
|
||||
const selectedItems = event.selectedItems as { nodes: INode[]; },
|
||||
g6Instance.on('nodeselectchange' as G6Event, event => {
|
||||
const selectedItems = event.selectedItems as { nodes: INode[] },
|
||||
tmpSelectedModelList = [];
|
||||
|
||||
// 如果是点击选中，不理会
|
||||
@ -159,54 +159,44 @@ export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
|
||||
|
||||
if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) {
|
||||
viewContainer.brushSelectedModels.push(node);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
node.setSelectedState(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 解决泄漏区随着视图拖动的问题
|
||||
* @param g6Instance
|
||||
* @param hasLeak
|
||||
*/
|
||||
export function SolveDragCanvasWithLeak(viewContainer: ViewContainer) {
|
||||
let g6Instance = viewContainer.getG6Instance(),
|
||||
prevDy = 0;
|
||||
let g6Instance = viewContainer.getG6Instance();
|
||||
|
||||
g6Instance.on('viewportchange', event => {
|
||||
if (event.action !== 'translate') {
|
||||
return false;
|
||||
}
|
||||
|
||||
let translateX = event.matrix[7],
|
||||
dy = translateX - prevDy;
|
||||
let translateY = event.matrix[7],
|
||||
dy = translateY - viewContainer.lastLeakAreaTranslateY;
|
||||
|
||||
prevDy = translateX;
|
||||
viewContainer.lastLeakAreaTranslateY = translateY;
|
||||
|
||||
viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
|
||||
if (viewContainer.hasLeak) {
|
||||
EventBus.emit('onLeakAreaUpdate', {
|
||||
leakAreaY: viewContainer.leakAreaY,
|
||||
hasLeak: viewContainer.hasLeak
|
||||
hasLeak: viewContainer.hasLeak,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 解决泄漏区随着视图缩放的问题（这里搞不出来，尽力了）
|
||||
* @param g6Instance
|
||||
* @param generalModelsGroup
|
||||
*/
|
||||
export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) {
|
||||
|
||||
}
|
||||
export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) {}
|
||||
|
||||
@ -45,7 +45,7 @@ export function InitG6Behaviors(engine: Engine, viewContainer: ViewContainer): M
|
||||
// 这里之所以要把节点和其 appendages 的选中状态设置为true，是因为 g6 处理拖拽节点的逻辑是将所以已选中的元素一起拖动，
|
||||
// 这样 appendages 就可以很自然地跟着节点动（我是看源码才知道的）
|
||||
node.setSelectedState(true);
|
||||
node.appendages.forEach(item => {
|
||||
node.getAppendagesList().forEach(item => {
|
||||
item.setSelectedState(true);
|
||||
});
|
||||
|
||||
@ -53,8 +53,13 @@ export function InitG6Behaviors(engine: Engine, viewContainer: ViewContainer): M
|
||||
};
|
||||
|
||||
const selectNodeFilter = event => {
|
||||
let g6Item = event.item,
|
||||
node: SVNode = g6Item.SVModel;
|
||||
let g6Item = event.item;
|
||||
|
||||
if(g6Item === null) {
|
||||
return false
|
||||
}
|
||||
|
||||
let node: SVNode = g6Item.SVModel;
|
||||
|
||||
if (g6Item === null || node.isNode() === false) {
|
||||
return false;
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import { Vector } from "./vector";
|
||||
|
||||
|
||||
import { Vector } from './vector';
|
||||
|
||||
// 包围盒类型
|
||||
export type BoundingRect = {
|
||||
@ -10,10 +8,8 @@ export type BoundingRect = {
|
||||
height: number;
|
||||
};
|
||||
|
||||
|
||||
// 包围盒操作
|
||||
export const Bound = {
|
||||
|
||||
/**
|
||||
* 从点集生成包围盒
|
||||
* @param points
|
||||
@ -25,17 +21,17 @@ export const Bound = {
|
||||
minY = Infinity;
|
||||
|
||||
points.map(item => {
|
||||
if(item[0] > maxX) maxX = item[0];
|
||||
if(item[0] < minX) minX = item[0];
|
||||
if(item[1] > maxY) maxY = item[1];
|
||||
if(item[1] < minY) minY = item[1];
|
||||
if (item[0] > maxX) maxX = item[0];
|
||||
if (item[0] < minX) minX = item[0];
|
||||
if (item[1] > maxY) maxY = item[1];
|
||||
if (item[1] < minY) minY = item[1];
|
||||
});
|
||||
|
||||
return {
|
||||
x: minX,
|
||||
y: minY,
|
||||
width: maxX - minX,
|
||||
height: maxY - minY
|
||||
height: maxY - minY,
|
||||
};
|
||||
},
|
||||
|
||||
@ -48,7 +44,7 @@ export const Bound = {
|
||||
[bound.x, bound.y],
|
||||
[bound.x + bound.width, bound.y],
|
||||
[bound.x + bound.width, bound.y + bound.height],
|
||||
[bound.x, bound.y + bound.height]
|
||||
[bound.x, bound.y + bound.height],
|
||||
];
|
||||
},
|
||||
|
||||
@ -57,20 +53,30 @@ export const Bound = {
|
||||
* @param arg
|
||||
*/
|
||||
union(...arg: BoundingRect[]): BoundingRect {
|
||||
return arg.length > 1?
|
||||
arg.reduce((total, cur) => {
|
||||
let minX = total.x < cur.x? total.x: cur.x,
|
||||
maxX = total.x + total.width < cur.x + cur.width? cur.x + cur.width: total.x + total.width,
|
||||
minY = total.y < cur.y? total.y: cur.y,
|
||||
maxY = total.y + total.height < cur.y + cur.height? cur.y + cur.height: total.y + total.height;
|
||||
if (arg.length === 0) {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
}
|
||||
|
||||
return arg.length > 1
|
||||
? arg.reduce((total, cur) => {
|
||||
let minX = Math.min(total.x, cur.x),
|
||||
maxX = Math.max(total.x + total.width, cur.x + cur.width),
|
||||
minY = Math.min(total.y, cur.y),
|
||||
maxY = Math.max(total.y + total.height, cur.y + cur.height);
|
||||
|
||||
return {
|
||||
x: minX,
|
||||
y: minY,
|
||||
width: maxX - minX,
|
||||
height: maxY - minY
|
||||
height: maxY - minY,
|
||||
};
|
||||
}): arg[0];
|
||||
})
|
||||
: arg[0];
|
||||
},
|
||||
|
||||
/**
|
||||
@ -79,31 +85,36 @@ export const Bound = {
|
||||
* @param b2
|
||||
*/
|
||||
intersect(b1: BoundingRect, b2: BoundingRect): BoundingRect {
|
||||
let x, y,
|
||||
maxX, maxY,
|
||||
let x,
|
||||
y,
|
||||
maxX,
|
||||
maxY,
|
||||
overlapsX,
|
||||
overlapsY;
|
||||
overlapsY,
|
||||
b1x = b1.x,
|
||||
b1mx = b1.x + b1.width,
|
||||
b2x = b2.x,
|
||||
b2mx = b2.x + b2.width,
|
||||
b1y = b1.y,
|
||||
b1my = b1.y + b1.height,
|
||||
b2y = b2.y,
|
||||
b2my = b2.y + b2.height;
|
||||
|
||||
if(b1.x < b2.x + b2.width && b1.x + b1.width > b2.x) {
|
||||
x = b1.x < b2.x? b2.x: b1.x;
|
||||
// maxX = b1.x + b1.width < b2.x + b2.width? b1.x + b1.width: b2.x + b2.width;
|
||||
maxX = b1.x + b1.width;
|
||||
x = Math.max(b1x, b2x);
|
||||
maxX = Math.min(b1mx, b2mx);
|
||||
overlapsX = maxX - x;
|
||||
}
|
||||
|
||||
if(b1.y < b2.y + b2.height && b1.y + b1.height > b2.y) {
|
||||
y = b1.y < b2.y? b2.y: b1.y;
|
||||
maxY = b1.y + b1.height < b2.y + b2.height? b1.y + b1.height: b2.y + b2.height;
|
||||
y = Math.max(b1y, b2y);
|
||||
maxY = Math.min(b1my, b2my);
|
||||
overlapsY = maxY - y;
|
||||
}
|
||||
|
||||
if(!overlapsX || !overlapsY) return null;
|
||||
if (!overlapsX || !overlapsY) return null;
|
||||
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
width: overlapsX,
|
||||
height: overlapsY
|
||||
height: overlapsY,
|
||||
};
|
||||
},
|
||||
|
||||
@ -146,7 +157,5 @@ export const Bound = {
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -122,21 +122,6 @@ export const Util = {
|
||||
return list;
|
||||
},
|
||||
|
||||
/**
|
||||
* G6 data 转换器
|
||||
* @param layoutGroup
|
||||
* @returns
|
||||
*/
|
||||
convertG6Data(layoutGroup: LayoutGroup): GraphData {
|
||||
let nodes = [...layoutGroup.node, ...layoutGroup.marker],
|
||||
edges = layoutGroup.link;
|
||||
|
||||
return {
|
||||
nodes: nodes.map(item => item.getG6ModelProps()) as NodeConfig[],
|
||||
edges: edges.map(item => item.getG6ModelProps()) as EdgeConfig[]
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 将 modelList 转换到 G6Data
|
||||
* @param modelList
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { EdgeConfig, IEdge } from "@antv/g6-core";
|
||||
import { Util } from "../Common/util";
|
||||
import { LinkLabelOption, LinkOption, Style } from "../options";
|
||||
import { SVModel } from "./SVModel";
|
||||
import { SVNode } from "./SVNode";
|
||||
import { EdgeConfig, IEdge } from '@antv/g6-core';
|
||||
import { Util } from '../Common/util';
|
||||
import { LinkLabelOption, LinkOption, Style } from '../options';
|
||||
import { SVModel } from './SVModel';
|
||||
import { SVNode } from './SVNode';
|
||||
|
||||
export class SVLink extends SVModel {
|
||||
public node: SVNode;
|
||||
@ -12,11 +12,25 @@ export class SVLink extends SVModel {
|
||||
public shadowG6Item: IEdge;
|
||||
public G6Item: IEdge;
|
||||
|
||||
constructor(id: string, type: string, group: string, layout: string, node: SVNode, target: SVNode, index: number, options: LinkOption) {
|
||||
public nodeId: string;
|
||||
public targetId: string;
|
||||
|
||||
constructor(
|
||||
id: string,
|
||||
type: string,
|
||||
group: string,
|
||||
layout: string,
|
||||
node: SVNode,
|
||||
target: SVNode,
|
||||
index: number,
|
||||
options: LinkOption
|
||||
) {
|
||||
super(id, type, group, layout, 'link');
|
||||
|
||||
this.node = node;
|
||||
this.target = target;
|
||||
this.nodeId = node.id;
|
||||
this.targetId = target.id;
|
||||
this.linkIndex = index;
|
||||
|
||||
node.links.outDegree.push(this);
|
||||
@ -28,14 +42,19 @@ export class SVLink extends SVModel {
|
||||
let sourceAnchor = options.sourceAnchor,
|
||||
targetAnchor = options.targetAnchor;
|
||||
|
||||
if(options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
|
||||
if (options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
|
||||
sourceAnchor = options.sourceAnchor(this.linkIndex);
|
||||
}
|
||||
|
||||
if(options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
|
||||
if (options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
|
||||
targetAnchor = options.targetAnchor(this.linkIndex);
|
||||
}
|
||||
|
||||
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));
|
||||
|
||||
return {
|
||||
id: this.id,
|
||||
type: options.type,
|
||||
@ -43,10 +62,28 @@ export class SVLink extends SVModel {
|
||||
target: this.target.id,
|
||||
sourceAnchor,
|
||||
targetAnchor,
|
||||
label: options.label,
|
||||
label,
|
||||
style: Util.objectClone<Style>(options.style),
|
||||
labelCfg: Util.objectClone<LinkLabelOption>(options.labelOptions),
|
||||
curveOffset: options.curveOffset
|
||||
labelCfg,
|
||||
curveOffset: options.curveOffset,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
triggerHighlight(changeHighlightColor: string) {
|
||||
this.originStyle = Util.objectClone(this.G6ModelProps.style);
|
||||
this.set('style', {
|
||||
stroke: changeHighlightColor,
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
this.node = null;
|
||||
this.target = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import { Util } from "../Common/util";
|
||||
import { Style } from "../options";
|
||||
import { BoundingRect } from "../Common/boundingRect";
|
||||
import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core";
|
||||
import { Graph } from "@antv/g6";
|
||||
import { Util } from '../Common/util';
|
||||
import { Style } from '../options';
|
||||
import { BoundingRect } from '../Common/boundingRect';
|
||||
import { EdgeConfig, Item, NodeConfig } from '@antv/g6-core';
|
||||
import { Graph } from '@antv/g6-pc';
|
||||
import merge from 'merge';
|
||||
|
||||
|
||||
|
||||
|
||||
export class SVModel {
|
||||
public id: string;
|
||||
public sourceType: string;
|
||||
@ -24,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;
|
||||
@ -88,8 +85,7 @@ export class SVModel {
|
||||
|
||||
if (attr === 'style' || attr === 'labelCfg') {
|
||||
this.G6ModelProps[attr] = merge(this.G6ModelProps[attr] || {}, value);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.G6ModelProps[attr] = value;
|
||||
}
|
||||
|
||||
@ -103,8 +99,7 @@ export class SVModel {
|
||||
if (this.preLayout) {
|
||||
const G6ItemModel = this.G6Item.getModel();
|
||||
G6ItemModel[attr] = value;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
|
||||
}
|
||||
}
|
||||
@ -122,11 +117,11 @@ export class SVModel {
|
||||
updateG6ModelStyle(G6ModelProps: NodeConfig | EdgeConfig) {
|
||||
const newG6ModelProps = {
|
||||
style: {
|
||||
...G6ModelProps.style
|
||||
...G6ModelProps.style,
|
||||
},
|
||||
labelCfg: {
|
||||
...G6ModelProps.labelCfg
|
||||
}
|
||||
...G6ModelProps.labelCfg,
|
||||
},
|
||||
};
|
||||
|
||||
this.G6ModelProps = merge.recursive(this.G6ModelProps, newG6ModelProps);
|
||||
@ -169,7 +164,7 @@ export class SVModel {
|
||||
* @param isSelected
|
||||
*/
|
||||
setSelectedState(isSelected: boolean) {
|
||||
if(this.G6Item === null) {
|
||||
if (this.G6Item === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -192,6 +187,19 @@ 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）
|
||||
*/
|
||||
@ -199,22 +207,17 @@ export class SVModel {
|
||||
return false;
|
||||
}
|
||||
|
||||
isEqual(model: SVModel): boolean {
|
||||
return this.id === model.id;
|
||||
}
|
||||
|
||||
beforeRender () {}
|
||||
afterRender() {}
|
||||
|
||||
beforeDestroy () {}
|
||||
afterDestroy() {
|
||||
this.G6Item = null;
|
||||
this.shadowG6Instance = null;
|
||||
this.shadowG6Item = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
import { INode, NodeConfig } from "@antv/g6-core";
|
||||
import { Util } from "../Common/util";
|
||||
import { NodeLabelOption, NodeOption, Style } from "../options";
|
||||
import { SourceNode } from "../sources";
|
||||
import { SVLink } from "./SVLink";
|
||||
import { SVModel } from "./SVModel";
|
||||
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from "./SVNodeAppendage";
|
||||
|
||||
|
||||
|
||||
import { INode, NodeConfig } from '@antv/g6-core';
|
||||
import { Util } from '../Common/util';
|
||||
import { NodeLabelOption, NodeOption, Style } from '../options';
|
||||
import { SourceNode } from '../sources';
|
||||
import { ModelConstructor } from './modelConstructor';
|
||||
import { SVLink } from './SVLink';
|
||||
import { SVModel } from './SVModel';
|
||||
import { SVNodeAppendage } from './SVNodeAppendage';
|
||||
|
||||
export class SVNode extends SVModel {
|
||||
public sourceId: string;
|
||||
@ -19,17 +17,17 @@ export class SVNode extends SVModel {
|
||||
|
||||
private label: string | string[];
|
||||
private disable: boolean;
|
||||
public appendages: { [key: string]: SVNodeAppendage[] };
|
||||
|
||||
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) {
|
||||
constructor(
|
||||
id: string,
|
||||
type: string,
|
||||
group: string,
|
||||
layout: string,
|
||||
sourceNode: SourceNode,
|
||||
label: string | string[],
|
||||
options: NodeOption
|
||||
) {
|
||||
super(id, type, group, layout, 'node');
|
||||
|
||||
this.group = group;
|
||||
@ -45,7 +43,7 @@ export class SVNode extends SVModel {
|
||||
this.sourceId = sourceNode.id.toString();
|
||||
|
||||
this.links = { inDegree: [], outDegree: [] };
|
||||
this.appendages = [];
|
||||
this.appendages = {};
|
||||
this.sourceNode = sourceNode;
|
||||
this.label = label;
|
||||
this.G6ModelProps = this.generateG6ModelProps(options);
|
||||
@ -66,9 +64,8 @@ export class SVNode extends SVModel {
|
||||
label: this.label as string,
|
||||
style: {
|
||||
...style,
|
||||
fill: this.disable ? '#ccc' : style.fill
|
||||
},
|
||||
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
|
||||
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
|
||||
};
|
||||
}
|
||||
|
||||
@ -86,7 +83,7 @@ export class SVNode extends SVModel {
|
||||
}
|
||||
|
||||
this.G6Item.setState('selected', isSelected);
|
||||
this.appendages.forEach(item => {
|
||||
this.getAppendagesList().forEach(item => {
|
||||
item.setSelectedState(isSelected);
|
||||
});
|
||||
}
|
||||
@ -94,8 +91,29 @@ export class SVNode extends SVModel {
|
||||
getSourceId(): string {
|
||||
return this.sourceId;
|
||||
}
|
||||
};
|
||||
|
||||
getAppendagesList(): SVNodeAppendage[] {
|
||||
const list = [];
|
||||
|
||||
Object.entries(this.appendages).forEach(item => {
|
||||
list.push(...item[1]);
|
||||
});
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断这个节点是否来自相同group
|
||||
* @param node
|
||||
*/
|
||||
isSameGroup(node: SVNode): boolean {
|
||||
return ModelConstructor.isSameGroup(this, node);
|
||||
}
|
||||
|
||||
beforeDestroy(): void {
|
||||
this.sourceNode = null;
|
||||
this.links.inDegree.length = 0;
|
||||
this.links.outDegree.length = 0;
|
||||
this.appendages = {};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,50 @@
|
||||
import { INode, NodeConfig, EdgeConfig } from "@antv/g6-core";
|
||||
import { Util } from "../Common/util";
|
||||
import { AddressLabelOption, IndexLabelOption, MarkerOption, NodeLabelOption, Style } from "../options";
|
||||
import { SVModel } from "./SVModel";
|
||||
import { SVNode } from "./SVNode";
|
||||
|
||||
|
||||
|
||||
import { INode, NodeConfig, EdgeConfig } from '@antv/g6-core';
|
||||
import { Bound, BoundingRect } from '../Common/boundingRect';
|
||||
import { Util } from '../Common/util';
|
||||
import { AddressLabelOption, IndexLabelOption, MarkerOption, NodeLabelOption, Style } from '../options';
|
||||
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.target.appendages.push(this);
|
||||
this.targetId = target.id;
|
||||
this.label = typeof label === 'string' ? label : label.join(', ');
|
||||
|
||||
if (this.target.appendages[modelType] === undefined) {
|
||||
this.target.appendages[modelType] = [];
|
||||
}
|
||||
|
||||
this.target.appendages[modelType].push(this);
|
||||
}
|
||||
|
||||
beforeDestroy(): void {
|
||||
const targetAppendageList = this.target.appendages[this.getModelType()];
|
||||
|
||||
if (targetAppendageList) {
|
||||
Util.removeFromList(targetAppendageList, item => item.id === this.id);
|
||||
}
|
||||
|
||||
this.target = null;
|
||||
}
|
||||
|
||||
isEqual(appendage: SVNodeAppendage): boolean {
|
||||
return appendage.targetId === this.targetId && appendage.label === this.label;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 已释放节点下面的文字（“已释放‘）
|
||||
*/
|
||||
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;
|
||||
super(id, type, group, layout, 'freedLabel', target, '已释放');
|
||||
this.G6ModelProps = this.generateG6ModelProps();
|
||||
}
|
||||
|
||||
@ -38,73 +54,80 @@ export class SVFreedLabel extends SVNodeAppendage {
|
||||
x: 0,
|
||||
y: 0,
|
||||
type: 'rect',
|
||||
label: '已释放',
|
||||
label: this.label,
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: '#b83b5e',
|
||||
opacity: 0.6
|
||||
}
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
size: [0, 0],
|
||||
style: {
|
||||
opacity: 0,
|
||||
stroke: null,
|
||||
fill: 'transparent'
|
||||
}
|
||||
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;
|
||||
super(id, type, group, layout, 'addressLabel', target, target.sourceId);
|
||||
this.G6ModelProps = this.generateG6ModelProps(options);
|
||||
}
|
||||
|
||||
getBound(): BoundingRect {
|
||||
const textBound = this.shadowG6Item.getContainer().getChildren()[1].getBBox(),
|
||||
keyBound = this.shadowG6Item.getBBox();
|
||||
return {
|
||||
x: keyBound.x + textBound.x,
|
||||
y: keyBound.y + textBound.y,
|
||||
width: textBound.width,
|
||||
height: textBound.height,
|
||||
};
|
||||
}
|
||||
|
||||
generateG6ModelProps(options: AddressLabelOption) {
|
||||
return {
|
||||
id: this.id,
|
||||
x: 0,
|
||||
y: 0,
|
||||
type: 'rect',
|
||||
label: this.sourceId,
|
||||
label: this.label,
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: '#666',
|
||||
fontSize: 16,
|
||||
...options.style
|
||||
}
|
||||
...options.style,
|
||||
},
|
||||
},
|
||||
size: [0, 0],
|
||||
style: {
|
||||
stroke: null,
|
||||
fill: 'transparent'
|
||||
}
|
||||
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;
|
||||
constructor(
|
||||
id: string,
|
||||
indexName: string,
|
||||
group: string,
|
||||
layout: string,
|
||||
value: string,
|
||||
target: SVNode,
|
||||
options: IndexLabelOption
|
||||
) {
|
||||
super(id, indexName, group, layout, 'indexLabel', target, value);
|
||||
this.G6ModelProps = this.generateG6ModelProps(options) as NodeConfig;
|
||||
}
|
||||
|
||||
@ -114,7 +137,7 @@ export class SVIndexLabel extends SVNodeAppendage {
|
||||
x: 0,
|
||||
y: 0,
|
||||
type: 'rect',
|
||||
label: this.value,
|
||||
label: this.label,
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: '#bbb',
|
||||
@ -122,36 +145,37 @@ export class SVIndexLabel extends SVNodeAppendage {
|
||||
textBaseline: 'middle',
|
||||
fontSize: 14,
|
||||
fontStyle: 'italic',
|
||||
...options.style
|
||||
}
|
||||
...options.style,
|
||||
},
|
||||
},
|
||||
size: [0, 0],
|
||||
style: {
|
||||
stroke: null,
|
||||
fill: 'transparent'
|
||||
}
|
||||
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;
|
||||
constructor(
|
||||
id: string,
|
||||
type: string,
|
||||
group: string,
|
||||
layout: string,
|
||||
label: string | string[],
|
||||
target: SVNode,
|
||||
options: MarkerOption
|
||||
) {
|
||||
super(id, type, group, layout, 'marker', target, label);
|
||||
this.G6ModelProps = this.generateG6ModelProps(options);
|
||||
}
|
||||
|
||||
@ -169,9 +193,9 @@ 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)
|
||||
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
|
||||
};
|
||||
}
|
||||
|
||||
@ -179,4 +203,4 @@ export class SVMarker extends SVNodeAppendage {
|
||||
const { width, height } = this.shadowG6Item.getContainer().getChildren()[2].getBBox();
|
||||
return Math.max(width, height);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,22 +1,27 @@
|
||||
import { Util } from "../Common/util";
|
||||
import { Engine } from "../engine";
|
||||
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 { SVModel } from "./SVModel";
|
||||
import { SVNode } from "./SVNode";
|
||||
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from "./SVNodeAppendage";
|
||||
|
||||
import { Group } from '../Common/group';
|
||||
import { Util } from '../Common/util';
|
||||
import { Engine } from '../engine';
|
||||
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 { SVModel } from './SVModel';
|
||||
import { SVNode } from './SVNode';
|
||||
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from './SVNodeAppendage';
|
||||
|
||||
export type LayoutGroup = {
|
||||
name: string;
|
||||
node: SVNode[];
|
||||
indexLabel: SVIndexLabel[];
|
||||
freedLabel: SVFreedLabel[];
|
||||
addressLabel: SVAddressLabel[];
|
||||
appendage: SVNodeAppendage[];
|
||||
link: SVLink[];
|
||||
marker: SVMarker[];
|
||||
layoutCreator: LayoutCreator;
|
||||
layout: string;
|
||||
options: LayoutGroupOptions;
|
||||
@ -24,10 +29,8 @@ export type LayoutGroup = {
|
||||
isHide: boolean;
|
||||
};
|
||||
|
||||
|
||||
export type LayoutGroupTable = Map<string, LayoutGroup>;
|
||||
|
||||
|
||||
export class ModelConstructor {
|
||||
private engine: Engine;
|
||||
private layoutGroupTable: LayoutGroupTable;
|
||||
@ -46,6 +49,7 @@ export class ModelConstructor {
|
||||
const layoutGroupTable = new Map<string, LayoutGroup>(),
|
||||
layoutMap: { [key: string]: LayoutCreator } = SV.registeredLayout;
|
||||
|
||||
|
||||
Object.keys(sources).forEach(group => {
|
||||
let sourceGroup = sources[group],
|
||||
layout = sourceGroup.layouter,
|
||||
@ -58,10 +62,7 @@ export class ModelConstructor {
|
||||
let sourceDataString: string = JSON.stringify(sourceGroup.data),
|
||||
prevString: string = this.prevSourcesStringMap[group],
|
||||
nodeList: SVNode[] = [],
|
||||
freedLabelList: SVFreedLabel[] = [],
|
||||
addressLabelList: SVAddressLabel[] = [],
|
||||
indexLabelList: SVIndexLabel[] = [],
|
||||
markerList: SVMarker[] = [];
|
||||
appendageList: SVNodeAppendage[] = [];
|
||||
|
||||
if (prevString === sourceDataString) {
|
||||
return;
|
||||
@ -75,40 +76,37 @@ export class ModelConstructor {
|
||||
addressLabelOption = options.addressLabel || {};
|
||||
|
||||
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);
|
||||
appendageList.push(...this.constructMarkers(group, layout, markerOptions, nodeList));
|
||||
appendageList.push(...this.constructIndexLabel(group, layout, indexLabelOptions, nodeList));
|
||||
appendageList.push(...this.constructAddressLabel(group, layout, addressLabelOption, nodeList));
|
||||
nodeList.forEach(item => {
|
||||
if(item.freedLabel) {
|
||||
freedLabelList.push(item.freedLabel);
|
||||
if (item.appendages.freedLabel) {
|
||||
appendageList.push(...item.appendages.freedLabel);
|
||||
}
|
||||
});
|
||||
|
||||
layoutGroupTable.set(group, {
|
||||
name: group,
|
||||
node: nodeList,
|
||||
freedLabel: freedLabelList,
|
||||
addressLabel: addressLabelList,
|
||||
indexLabel: indexLabelList,
|
||||
appendage: appendageList,
|
||||
link: [],
|
||||
marker: markerList,
|
||||
options,
|
||||
layoutCreator,
|
||||
modelList: [
|
||||
...nodeList,
|
||||
...markerList,
|
||||
...freedLabelList,
|
||||
...addressLabelList,
|
||||
...indexLabelList
|
||||
],
|
||||
modelList: [...nodeList, ...appendageList],
|
||||
layout,
|
||||
isHide: false
|
||||
isHide: false,
|
||||
});
|
||||
});
|
||||
|
||||
layoutGroupTable.forEach((layoutGroup: LayoutGroup, group: string) => {
|
||||
const linkOptions = layoutGroup.options.link || {},
|
||||
linkList: SVLink[] = this.constructLinks(group, layoutGroup.layout, linkOptions, layoutGroup.node, layoutGroupTable);
|
||||
linkList: SVLink[] = this.constructLinks(
|
||||
group,
|
||||
layoutGroup.layout,
|
||||
linkOptions,
|
||||
layoutGroup.node,
|
||||
layoutGroupTable
|
||||
);
|
||||
|
||||
layoutGroup.link = linkList;
|
||||
layoutGroup.modelList.push(...linkList);
|
||||
@ -119,7 +117,6 @@ export class ModelConstructor {
|
||||
return this.layoutGroupTable;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 从源数据构建 node 集
|
||||
* @param nodeOptions
|
||||
@ -128,7 +125,12 @@ export class ModelConstructor {
|
||||
* @param layout
|
||||
* @returns
|
||||
*/
|
||||
private constructNodes(group: string, layout: string, nodeOptions: { [key: string]: NodeOption }, sourceList: SourceNode[]): SVNode[] {
|
||||
private constructNodes(
|
||||
group: string,
|
||||
layout: string,
|
||||
nodeOptions: { [key: string]: NodeOption },
|
||||
sourceList: SourceNode[]
|
||||
): SVNode[] {
|
||||
let defaultSourceNodeType: string = 'default',
|
||||
nodeList: SVNode[] = [];
|
||||
|
||||
@ -154,7 +156,13 @@ export class ModelConstructor {
|
||||
* @param layoutGroupTable
|
||||
* @returns
|
||||
*/
|
||||
private constructLinks(group: string, layout: string, linkOptions: { [key: string]: LinkOption }, nodes: SVNode[], layoutGroupTable: LayoutGroupTable): SVLink[] {
|
||||
private constructLinks(
|
||||
group: string,
|
||||
layout: string,
|
||||
linkOptions: { [key: string]: LinkOption },
|
||||
nodes: SVNode[],
|
||||
layoutGroupTable: LayoutGroupTable
|
||||
): SVLink[] {
|
||||
let linkList: SVLink[] = [],
|
||||
linkNames = Object.keys(linkOptions);
|
||||
|
||||
@ -174,7 +182,7 @@ export class ModelConstructor {
|
||||
if (Array.isArray(sourceLinkData)) {
|
||||
node[name] = sourceLinkData.map((item, index) => {
|
||||
targetNode = this.fetchTargetNodes(layoutGroupTable, node, item);
|
||||
let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
|
||||
let isGeneralLink = ModelConstructor.isGeneralLink(sourceLinkData.toString());
|
||||
|
||||
if (targetNode) {
|
||||
link = this.createLink(name, group, layout, node, targetNode, index, linkOptions[name]);
|
||||
@ -183,13 +191,12 @@ export class ModelConstructor {
|
||||
|
||||
return isGeneralLink ? targetNode : null;
|
||||
});
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
targetNode = this.fetchTargetNodes(layoutGroupTable, node, sourceLinkData);
|
||||
let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
|
||||
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);
|
||||
}
|
||||
|
||||
@ -207,7 +214,12 @@ export class ModelConstructor {
|
||||
* @param layout
|
||||
* @param indexLabelOptions
|
||||
*/
|
||||
private constructIndexLabel(group: string, layout: string, indexLabelOptions: { [key: string]: IndexLabelOption }, nodes: SVNode[]): SVIndexLabel[] {
|
||||
private constructIndexLabel(
|
||||
group: string,
|
||||
layout: string,
|
||||
indexLabelOptions: { [key: string]: IndexLabelOption },
|
||||
nodes: SVNode[]
|
||||
): SVIndexLabel[] {
|
||||
let indexLabelList: SVIndexLabel[] = [],
|
||||
indexNames = Object.keys(indexLabelOptions);
|
||||
|
||||
@ -219,8 +231,16 @@ export class ModelConstructor {
|
||||
// 若没有指针字段的结点则跳过
|
||||
if (value === undefined || value === null) continue;
|
||||
|
||||
let id = `${group}.${name}#${value}`,
|
||||
indexLabel = new SVIndexLabel(id, name, group, layout, value.toString(), node, indexLabelOptions[name]);
|
||||
let id = `${group}[${name}(${value})]`,
|
||||
indexLabel = new SVIndexLabel(
|
||||
id,
|
||||
name,
|
||||
group,
|
||||
layout,
|
||||
value.toString(),
|
||||
node,
|
||||
indexLabelOptions[name]
|
||||
);
|
||||
|
||||
indexLabelList.push(indexLabel);
|
||||
}
|
||||
@ -236,11 +256,23 @@ export class ModelConstructor {
|
||||
* @param addressLabelOption
|
||||
* @param nodes
|
||||
*/
|
||||
private constructAddressLabel(group: string, layout: string, addressLabelOption: AddressLabelOption, nodes: SVNode[]): SVAddressLabel[] {
|
||||
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);
|
||||
const addressLabel = new SVAddressLabel(
|
||||
`address-label(${item.id})`,
|
||||
item.sourceType,
|
||||
group,
|
||||
layout,
|
||||
item,
|
||||
addressLabelOption
|
||||
);
|
||||
addressLabelList.push(addressLabel);
|
||||
});
|
||||
|
||||
@ -253,7 +285,12 @@ export class ModelConstructor {
|
||||
* @param nodes
|
||||
* @returns
|
||||
*/
|
||||
private constructMarkers(group: string, layout: string, markerOptions: { [key: string]: MarkerOption }, nodes: SVNode[]): SVMarker[] {
|
||||
private constructMarkers(
|
||||
group: string,
|
||||
layout: string,
|
||||
markerOptions: { [key: string]: MarkerOption },
|
||||
nodes: SVNode[]
|
||||
): SVMarker[] {
|
||||
let markerList: SVMarker[] = [],
|
||||
markerNames = Object.keys(markerOptions);
|
||||
|
||||
@ -265,7 +302,8 @@ export class ModelConstructor {
|
||||
// 若没有指针字段的结点则跳过
|
||||
if (!markerData) continue;
|
||||
|
||||
let id = `${group}.${name}.${Array.isArray(markerData) ? markerData.join('-') : markerData}`,
|
||||
let id = `[${name}(${Array.isArray(markerData) ? markerData.join('-') : markerData})]`,
|
||||
|
||||
marker = new SVMarker(id, name, group, layout, markerData, node, markerOptions[name]);
|
||||
|
||||
markerList.push(marker);
|
||||
@ -285,8 +323,7 @@ export class ModelConstructor {
|
||||
|
||||
if (Array.isArray(label)) {
|
||||
targetLabel = label.map(item => this.parserNodeContent(sourceNode, item) ?? '');
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
targetLabel = this.parserNodeContent(sourceNode, label);
|
||||
}
|
||||
|
||||
@ -305,13 +342,20 @@ export class ModelConstructor {
|
||||
* @param layout
|
||||
* @param options
|
||||
*/
|
||||
private createNode(sourceNode: SourceNode, sourceNodeType: string, group: string, layout: string, options: NodeOption): SVNode {
|
||||
private createNode(
|
||||
sourceNode: SourceNode,
|
||||
sourceNodeType: string,
|
||||
group: string,
|
||||
layout: string,
|
||||
options: NodeOption
|
||||
): SVNode {
|
||||
let label: string | string[] = this.resolveNodeLabel(options.label, sourceNode),
|
||||
id = sourceNodeType + '.' + sourceNode.id.toString(),
|
||||
id = `${sourceNodeType}(${sourceNode.id.toString()})`,
|
||||
|
||||
node = new SVNode(id, sourceNodeType, group, layout, sourceNode, label, options);
|
||||
|
||||
if(node.freed) {
|
||||
node.freedLabel = new SVFreedLabel(`${id}-freed-label`, sourceNodeType, group, layout, node);
|
||||
if (node.freed) {
|
||||
new SVFreedLabel(`freed-label(${id})`, sourceNodeType, group, layout, node);
|
||||
}
|
||||
|
||||
return node;
|
||||
@ -328,8 +372,16 @@ export class ModelConstructor {
|
||||
* @param options
|
||||
* @returns
|
||||
*/
|
||||
private createLink(linkName: string, group: string, layout: string, node: SVNode, target: SVNode, index: number, options: LinkOption): SVLink {
|
||||
let id = `${linkName}(${node.id}-${target.id})`;
|
||||
private createLink(
|
||||
linkName: string,
|
||||
group: string,
|
||||
layout: string,
|
||||
node: SVNode,
|
||||
target: SVNode,
|
||||
index: number,
|
||||
options: LinkOption
|
||||
): SVLink {
|
||||
let id = `${linkName}{${node.id}-${target.id}}#${index}`;
|
||||
return new SVLink(id, linkName, group, layout, node, target, index, options);
|
||||
}
|
||||
|
||||
@ -381,47 +433,39 @@ export class ModelConstructor {
|
||||
if (info.length > 1) {
|
||||
sourceNodeType = info.pop();
|
||||
targetGroupName = info.pop();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
let field = info.pop();
|
||||
if (layoutGroupTable.get(targetGroupName).node.find(item => item.sourceType === field)) {
|
||||
sourceNodeType = field;
|
||||
}
|
||||
else if (layoutGroupTable.has(field)) {
|
||||
} else if (layoutGroupTable.has(field)) {
|
||||
targetGroupName = field;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
nodeList = layoutGroupTable.get(targetGroupName).node.filter(item => item.sourceType === sourceNodeType);
|
||||
|
||||
// 若目标node不存在，返回null
|
||||
// 为了可以连接到不同group的结点
|
||||
for (let layoutGroup of layoutGroupTable.values()) {
|
||||
nodeList = layoutGroup.node.filter(item => item.sourceType === sourceNodeType);
|
||||
if (nodeList === undefined) {
|
||||
return null;
|
||||
continue;
|
||||
}
|
||||
|
||||
targetNode = nodeList.find(item => item.sourceId === targetId);
|
||||
if (targetNode) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
// nodeList = layoutGroupTable.get(targetGroupName).node.filter(item => item.sourceType === sourceNodeType);
|
||||
|
||||
// // 若目标node不存在，返回null
|
||||
// if (nodeList === undefined) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// targetNode = nodeList.find(item => item.sourceId === targetId);
|
||||
return targetNode || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测改指针是否为常规指针（指向另一个group）
|
||||
* @param linkId
|
||||
*/
|
||||
private isGeneralLink(linkId: string): boolean {
|
||||
let counter = 0;
|
||||
|
||||
for (let i = 0; i < linkId.length; i++) {
|
||||
if (linkId[i] === '#') {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
|
||||
return counter <= 2;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns
|
||||
@ -433,8 +477,114 @@ export class ModelConstructor {
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
destroy() {
|
||||
public destroy() {
|
||||
this.layoutGroupTable = null;
|
||||
this.prevSourcesStringMap = null;
|
||||
}
|
||||
};
|
||||
|
||||
// -------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* 检测改指针是否为常规指针（指向另一个group）
|
||||
* @param linkId
|
||||
*/
|
||||
static isGeneralLink(linkId: string): boolean {
|
||||
let counter = 0;
|
||||
|
||||
for (let i = 0; i < linkId.length; i++) {
|
||||
if (linkId[i] === '#') {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
|
||||
return counter <= 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断这个节点是否来自相同group
|
||||
* @param node1
|
||||
* @param node2
|
||||
*/
|
||||
static isSameGroup(node1: SVNode, node2: SVNode): boolean {
|
||||
return node1.group === node2.group;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取簇
|
||||
* - 什么为一个簇？有边相连的一堆节点，再加上这些节点各自的appendages，共同组成了一个簇
|
||||
* @param models
|
||||
* @returns
|
||||
*/
|
||||
static getClusters(models: SVModel[]): Group[] {
|
||||
const clusterGroupList = [],
|
||||
idMap = {},
|
||||
idName = '__clusterId';
|
||||
|
||||
models.forEach(item => {
|
||||
idMap[item.id] = item;
|
||||
});
|
||||
|
||||
const DFS = (model: SVModel, clusterId: number, idMap): SVModel[] => {
|
||||
if(model === null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (idMap[model.id] === undefined) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (model[idName] !== undefined) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const list = [model];
|
||||
model[idName] = clusterId;
|
||||
|
||||
if (model instanceof SVNode) {
|
||||
model.getAppendagesList().forEach(item => {
|
||||
list.push(...DFS(item, clusterId, idMap));
|
||||
});
|
||||
|
||||
model.links.inDegree.forEach(item => {
|
||||
list.push(...DFS(item, clusterId, idMap));
|
||||
});
|
||||
|
||||
model.links.outDegree.forEach(item => {
|
||||
list.push(...DFS(item, clusterId, idMap));
|
||||
});
|
||||
}
|
||||
|
||||
if (model instanceof SVLink) {
|
||||
list.push(...DFS(model.node, clusterId, idMap));
|
||||
list.push(...DFS(model.target, clusterId, idMap));
|
||||
}
|
||||
|
||||
if (model instanceof SVNodeAppendage) {
|
||||
list.push(...DFS(model.target, clusterId, idMap));
|
||||
}
|
||||
|
||||
return list;
|
||||
};
|
||||
|
||||
for (let i = 0; i < models.length; i++) {
|
||||
const model = models[i];
|
||||
|
||||
if (model[idName] !== undefined) {
|
||||
delete model[idName];
|
||||
continue;
|
||||
}
|
||||
|
||||
const group = new Group(),
|
||||
clusterList = DFS(model, i, idMap);
|
||||
|
||||
clusterList.forEach(item => {
|
||||
group.add(item);
|
||||
});
|
||||
|
||||
clusterGroupList.push(group);
|
||||
delete model[idName];
|
||||
}
|
||||
|
||||
return clusterGroupList;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
|
||||
export default Util.registerShape('binary-tree-node', {
|
||||
export default Util.registerShape(
|
||||
'binary-tree-node',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size;
|
||||
|
||||
@ -16,9 +17,9 @@ export default Util.registerShape('binary-tree-node', {
|
||||
height: height,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor,
|
||||
fill: cfg.style.backgroundFill || '#eee'
|
||||
fill: cfg.style.backgroundFill || '#eee',
|
||||
},
|
||||
name: 'wrapper'
|
||||
name: 'wrapper',
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
@ -29,14 +30,15 @@ export default Util.registerShape('binary-tree-node', {
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'mid',
|
||||
draggable: true
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
|
||||
if (cfg.label) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width, // 居中
|
||||
@ -46,10 +48,50 @@ export default Util.registerShape('binary-tree-node', {
|
||||
text: cfg.label,
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
name: 'label',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
const isLeftEmpty =
|
||||
!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
|
||||
isRightEmpty =
|
||||
!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0';
|
||||
|
||||
//节点没有左孩子节点时
|
||||
if (isLeftEmpty) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (5 / 8),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null-left',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
//节点没有右孩子节点时
|
||||
if (isRightEmpty) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (11 / 8),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null-right',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
@ -61,7 +103,9 @@ export default Util.registerShape('binary-tree-node', {
|
||||
[0.5, 0],
|
||||
[0.875, 0.5],
|
||||
[0.5, 1],
|
||||
[0.125, 0.5]
|
||||
[0.125, 0.5],
|
||||
];
|
||||
},
|
||||
}, 'rect');
|
||||
},
|
||||
'rect'
|
||||
);
|
||||
|
||||
74
src/RegisteredShape/chainHashTableNode.ts
Normal file
74
src/RegisteredShape/chainHashTableNode.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import { Util } from '../Common/util';
|
||||
export default Util.registerShape(
|
||||
'chain-hashtable-node',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size || [30, 30];
|
||||
|
||||
const width = cfg.size[0],
|
||||
height = cfg.size[1];
|
||||
|
||||
const wrapperRect = group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke,
|
||||
fill: cfg.style.backgroundFill || '#eee'
|
||||
},
|
||||
name: 'wrapper',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
|
||||
if (cfg.label) {
|
||||
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',
|
||||
draggable: true
|
||||
});
|
||||
}
|
||||
|
||||
//节点没有后续指针时
|
||||
if (!cfg.next && !cfg.loopNext) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[1 / 6, 0],
|
||||
[0.5, 0],
|
||||
[0.5, 0.5],
|
||||
[5 / 6, 0.5],
|
||||
[0.5, 1],
|
||||
[0, 0.5]
|
||||
];
|
||||
}
|
||||
}
|
||||
)
|
||||
@ -1,21 +1,14 @@
|
||||
import G6 from "@antv/g6";
|
||||
import { Util } from "../Common/util";
|
||||
|
||||
|
||||
|
||||
import G6 from '@antv/g6';
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
export default function rotate(shape, angle, transform) {
|
||||
const matrix1 = shape.getMatrix();
|
||||
const newMatrix1 = transform(matrix1, [
|
||||
['r', angle],
|
||||
]);
|
||||
const newMatrix1 = transform(matrix1, [['r', angle]]);
|
||||
shape.setMatrix(newMatrix1);
|
||||
}
|
||||
function translate(shape, x, y, transform) {
|
||||
const matrix1 = shape.getMatrix();
|
||||
const newMatrix1 = transform(matrix1, [
|
||||
['t', x, y],
|
||||
]);
|
||||
const newMatrix1 = transform(matrix1, [['t', x, y]]);
|
||||
shape.setMatrix(newMatrix1);
|
||||
}
|
||||
function culcuRotate(angle, R) {
|
||||
@ -25,11 +18,9 @@ function culcuRotate(angle, R) {
|
||||
return {
|
||||
offsetX,
|
||||
offsetY,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
Util.registerShape('clen-queue-pointer', {
|
||||
draw(cfg, group) {
|
||||
let id = cfg.id as string;
|
||||
@ -44,10 +35,10 @@ Util.registerShape('clen-queue-pointer', {
|
||||
fill: cfg.style.fill,
|
||||
// matrix: cfg.style.matrix
|
||||
},
|
||||
name: 'pointer-path'
|
||||
name: 'pointer-path',
|
||||
});
|
||||
|
||||
const angle = index * Math.PI * 2 / len;
|
||||
const angle = (index * Math.PI * 2) / len;
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
|
||||
@ -59,28 +50,28 @@ Util.registerShape('clen-queue-pointer', {
|
||||
height: 0,
|
||||
text: cfg.label,
|
||||
fill: null,
|
||||
radius: 2
|
||||
radius: 2,
|
||||
},
|
||||
name: 'bgRect'
|
||||
name: 'bgRect',
|
||||
});
|
||||
|
||||
let label = cfg.label as string;
|
||||
|
||||
let pointerText = label.split('-')[0];
|
||||
let y = pointerText=="front"?30:15;
|
||||
let y = pointerText == 'front' ? 30 : 15;
|
||||
const text = group.addShape('text', {
|
||||
attrs: {
|
||||
x: culcuRotate(Math.PI/2 - angle, y).offsetX,
|
||||
y: culcuRotate(Math.PI/2 - angle, y).offsetY,
|
||||
x: culcuRotate(Math.PI / 2 - angle, y).offsetX,
|
||||
y: culcuRotate(Math.PI / 2 - angle, y).offsetY,
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: pointerText,
|
||||
fill: style.fill || '#999',
|
||||
fontSize: style.fontSize || 16
|
||||
fontSize: style.fontSize || 16,
|
||||
},
|
||||
name: 'pointer-text-shape'
|
||||
name: 'pointer-text-shape',
|
||||
});
|
||||
|
||||
// rotate(text, angle, G6.Util.transform);
|
||||
@ -90,8 +81,6 @@ Util.registerShape('clen-queue-pointer', {
|
||||
translate(keyShape, 0, -75, G6.Util.transform);
|
||||
|
||||
return keyShape;
|
||||
|
||||
|
||||
},
|
||||
|
||||
getPath(cfg) {
|
||||
@ -104,9 +93,9 @@ Util.registerShape('clen-queue-pointer', {
|
||||
['M', 0, 0],
|
||||
['L', -width / 2, 0],
|
||||
['L', -width / 2, -height],
|
||||
['L', -width / 2 - (arrowWidth / 2), -height],
|
||||
['L', 0, -height-arrowHeight],
|
||||
['L', width / 2 + (arrowWidth / 2), -height],
|
||||
['L', -width / 2 - arrowWidth / 2, -height],
|
||||
['L', 0, -height - arrowHeight],
|
||||
['L', width / 2 + arrowWidth / 2, -height],
|
||||
['L', width / 2, -height],
|
||||
['L', width / 2, 0],
|
||||
['Z'],
|
||||
@ -114,7 +103,4 @@ Util.registerShape('clen-queue-pointer', {
|
||||
|
||||
return path;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
import { Util } from "../Common/util";
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2022-01-26 01:58:25
|
||||
* @LastEditTime: 2022-02-18 18:51:28
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @FilePath: \水功能c:\Users\13127\Desktop\最近的前端文件\可视化0126\StructV2\src\RegisteredShape\linkListNode.ts
|
||||
*/
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
|
||||
|
||||
export default Util.registerShape('link-list-node', {
|
||||
export default Util.registerShape(
|
||||
'link-list-node',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size || [30, 10];
|
||||
|
||||
@ -17,9 +25,9 @@ export default Util.registerShape('link-list-node', {
|
||||
height: height,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
fill: cfg.style.backgroundFill || '#eee',
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'wrapper'
|
||||
name: 'wrapper',
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
@ -30,14 +38,15 @@ export default Util.registerShape('link-list-node', {
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'main-rect',
|
||||
draggable: true
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
|
||||
if (cfg.label) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (5 / 6),
|
||||
@ -46,10 +55,28 @@ export default Util.registerShape('link-list-node', {
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label,
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16
|
||||
fontSize: style.fontSize || 16,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
name: 'label',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
//节点没有后续指针时
|
||||
if (!cfg.next && !cfg.loopNext) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (4 / 3),
|
||||
y: height * (6 / 5),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
@ -65,7 +92,9 @@ export default Util.registerShape('link-list-node', {
|
||||
[5 / 6, 1],
|
||||
[0.5, 1],
|
||||
[0, 0.5],
|
||||
[1 / 3, 1]
|
||||
[1 / 3, 1],
|
||||
];
|
||||
}
|
||||
}, 'rect');
|
||||
},
|
||||
},
|
||||
'rect'
|
||||
);
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
|
||||
export default Util.registerShape('pointer', {
|
||||
draw(cfg, group) {
|
||||
const keyShape = group.addShape('path', {
|
||||
attrs: {
|
||||
path: this.getPath(cfg),
|
||||
fill: cfg.style.fill,
|
||||
matrix: cfg.style.matrix
|
||||
matrix: cfg.style.matrix,
|
||||
},
|
||||
name: 'pointer-path'
|
||||
name: 'pointer-path',
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
@ -21,9 +20,9 @@ export default Util.registerShape('pointer', {
|
||||
y: 0,
|
||||
text: cfg.label,
|
||||
fill: null,
|
||||
radius: 2
|
||||
radius: 2,
|
||||
},
|
||||
name: 'bgRect'
|
||||
name: 'bgRect',
|
||||
});
|
||||
|
||||
const text = group.addShape('text', {
|
||||
@ -34,33 +33,35 @@ export default Util.registerShape('pointer', {
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label,
|
||||
fill: labelStyle.fill || '#999',
|
||||
fontSize: labelStyle.fontSize || 16
|
||||
fontSize: labelStyle.fontSize || 16,
|
||||
},
|
||||
name: 'pointer-text-shape'
|
||||
name: 'pointer-text-shape',
|
||||
});
|
||||
|
||||
const { width: textWidth, height: textHeight } = text.getBBox();
|
||||
const { width: pointerWidth, height: pointerHeight } = keyShape.getBBox();
|
||||
bgRect.attr({
|
||||
width: textWidth + 6,
|
||||
height: textHeight + 6
|
||||
width: textWidth + pointerWidth + 6,
|
||||
height: textHeight + pointerHeight + 6,
|
||||
});
|
||||
|
||||
// 旋转文字
|
||||
const markerEndPosition = cfg.markerEndPosition;
|
||||
if(markerEndPosition) {
|
||||
if (markerEndPosition) {
|
||||
let textX = markerEndPosition[0],
|
||||
textY = markerEndPosition[1];
|
||||
|
||||
text.attr({
|
||||
x: textX,
|
||||
y: textY
|
||||
y: textY,
|
||||
});
|
||||
|
||||
bgRect.attr({
|
||||
x: textX - textWidth / 2 - 3,
|
||||
y: textY - textHeight / 2 - 3
|
||||
y: textY - textHeight / 2 - 3,
|
||||
});
|
||||
}
|
||||
return bgRect;
|
||||
}
|
||||
|
||||
return keyShape;
|
||||
@ -74,15 +75,15 @@ export default Util.registerShape('pointer', {
|
||||
|
||||
const path = [
|
||||
['M', 0, 0],
|
||||
['L', -width / 2 - (arrowWidth / 2), -arrowHeight],
|
||||
['L', -width / 2 - arrowWidth / 2, -arrowHeight],
|
||||
['L', -width / 2, -arrowHeight],
|
||||
['L', -width / 2, -height],
|
||||
['L', width / 2, -height],
|
||||
['L', width / 2, -arrowHeight],
|
||||
['L', width / 2 + (arrowWidth / 2), -arrowHeight],
|
||||
['L', width / 2 + arrowWidth / 2, -arrowHeight],
|
||||
['Z'],
|
||||
];
|
||||
|
||||
return path;
|
||||
}
|
||||
},
|
||||
});
|
||||
189
src/RegisteredShape/threeCellNode.ts
Normal file
189
src/RegisteredShape/threeCellNode.ts
Normal file
@ -0,0 +1,189 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2022-01-18 20:42:31
|
||||
* @LastEditTime: 2022-02-17 21:57:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @FilePath: \测试数据c:\Users\13127\Desktop\最近的前端文件\可视化源码-new\StructV2\src\RegisteredShape\treeCellNode.ts
|
||||
*/
|
||||
import { registerNode } from '@antv/g6';
|
||||
|
||||
export default registerNode('three-cell', {
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size || [30, 10];
|
||||
|
||||
const width = cfg.size[0],
|
||||
height = cfg.size[1];
|
||||
|
||||
const wrapperRect = group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke,
|
||||
fill: cfg.style.backgroundFill || '#eee',
|
||||
},
|
||||
name: 'wrapper',
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width / 3,
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke,
|
||||
},
|
||||
name: 'left-rect',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width * (5 / 6),
|
||||
y: height / 2,
|
||||
width: width / 3,
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke,
|
||||
},
|
||||
name: 'middle-rect',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
|
||||
//节点上方文字
|
||||
if (cfg.root && cfg.rootLabel) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (2 / 3),
|
||||
y: 0,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.rootLabel[0],
|
||||
fill: style.fill || '#bbb',
|
||||
fontSize: style.fontSize || 16,
|
||||
fontStyle: 'italic',
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'rootLabel0',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: 0,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.rootLabel[1],
|
||||
fill: style.fill || '#bbb',
|
||||
fontSize: style.fontSize || 16,
|
||||
fontStyle: 'italic',
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'rootLabel1',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (4 / 3),
|
||||
y: 0,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.rootLabel[2],
|
||||
fill: style.fill || '#bbb',
|
||||
fontSize: style.fontSize || 16,
|
||||
fontStyle: 'italic',
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'rootLabel2',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
//节点左边文字
|
||||
if (cfg.index !== null) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (2 / 5),
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.index,
|
||||
fill: style.fill || '#bbb',
|
||||
fontSize: style.fontSize || 16,
|
||||
fontStyle: 'italic',
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'index',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
//节点文字（数组形式）
|
||||
if (cfg.label) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (2 / 3),
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label[0],
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'label1',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label[1],
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'label2',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
//节点没有后续指针时
|
||||
if (!cfg.headNext) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (4 / 3),
|
||||
y: height * (6 / 5),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 22,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0.5, 0],
|
||||
[5 / 6, 0.5],
|
||||
[0.5, 1],
|
||||
[0, 0.5],
|
||||
];
|
||||
},
|
||||
});
|
||||
@ -1,6 +1,5 @@
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
|
||||
export default Util.registerShape('tri-tree-node', {
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size;
|
||||
@ -16,9 +15,9 @@ export default Util.registerShape('tri-tree-node', {
|
||||
height: height,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor,
|
||||
fill: cfg.style.backgroundFill || '#eee'
|
||||
fill: '#eee',
|
||||
},
|
||||
name: 'wrapper'
|
||||
name: 'wrapper',
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
@ -29,10 +28,10 @@ export default Util.registerShape('tri-tree-node', {
|
||||
height: height / 4,
|
||||
fill: '#eee',
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'top',
|
||||
draggable: true
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
@ -40,17 +39,16 @@ export default Util.registerShape('tri-tree-node', {
|
||||
x: width / 4 + width / 2,
|
||||
y: height / 2 + height / 4,
|
||||
width: width / 2,
|
||||
height: height / 4 * 3,
|
||||
height: (height / 4) * 3,
|
||||
fill: cfg.color || cfg.style.fill,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'bottom',
|
||||
draggable: true
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
if (cfg.label) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width, // 居中
|
||||
@ -60,28 +58,71 @@ export default Util.registerShape('tri-tree-node', {
|
||||
text: cfg.label,
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
name: 'label',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
let parent = cfg.parent || cfg.l_parent || cfg.r_parent;
|
||||
const isLeftEmpty =
|
||||
!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
|
||||
isRightEmpty =
|
||||
!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0',
|
||||
isParentEmpty = parent[0] == '0x0';
|
||||
|
||||
if (cfg.root) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
|
||||
if (isParentEmpty) {
|
||||
{
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width, // 居中
|
||||
y: height / 4 * 3,
|
||||
y: (height / 4) * 3,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: "^",
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 14,
|
||||
cursor: cfg.style.cursor
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'parent',
|
||||
draggable: true
|
||||
name: 'null-parent',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//节点没有左孩子节点时
|
||||
if (isLeftEmpty) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (5 / 8),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null-left',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
//节点没有右孩子节点时
|
||||
if (isRightEmpty) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (11 / 8),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null-right',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
@ -92,9 +133,11 @@ export default Util.registerShape('tri-tree-node', {
|
||||
return [
|
||||
[0.125, 0.5],
|
||||
[0.875, 0.5],
|
||||
[0.5, 1],
|
||||
[0.4, 1],
|
||||
[0.5, 0],
|
||||
[0.5, 0.125]
|
||||
[0.5, 0.125],
|
||||
[0.6, 1],
|
||||
[0.5, 1],
|
||||
];
|
||||
},
|
||||
}, 'rect');
|
||||
});
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
|
||||
|
||||
export default Util.registerShape('two-cell-node', {
|
||||
export default Util.registerShape(
|
||||
'two-cell-node',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size || [30, 10];
|
||||
|
||||
@ -16,9 +16,9 @@ export default Util.registerShape('two-cell-node', {
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke,
|
||||
fill: cfg.style.backgroundFill || '#eee'
|
||||
fill: cfg.style.backgroundFill || '#eee',
|
||||
},
|
||||
name: 'wrapper'
|
||||
name: 'wrapper',
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
@ -28,17 +28,18 @@ export default Util.registerShape('two-cell-node', {
|
||||
width: width / 2,
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke
|
||||
stroke: cfg.style.stroke,
|
||||
},
|
||||
name: 'left-rect',
|
||||
draggable: true
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
|
||||
if (cfg.label) {
|
||||
if(Array.isArray(cfg.label)) {
|
||||
let tag = cfg.label[0], data = cfg.label[1];
|
||||
if (Array.isArray(cfg.label)) {
|
||||
let tag = cfg.label[0],
|
||||
data = cfg.label[1];
|
||||
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
@ -51,8 +52,8 @@ export default Util.registerShape('two-cell-node', {
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
name: 'tag',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
group.addShape('text', {
|
||||
@ -66,11 +67,10 @@ export default Util.registerShape('two-cell-node', {
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
name: 'data',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (3 / 4),
|
||||
@ -82,12 +82,65 @@ export default Util.registerShape('two-cell-node', {
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
name: 'label',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//图 数据结构中没有后续指针
|
||||
if (cfg.id.includes('tableHeadNode') && !cfg.headNext) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (5 / 4),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 20,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null-headNext',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
//哈希表 数据结构中没有后续指针
|
||||
if (cfg.id.includes('head') && !cfg.start) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (5 / 4),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 20,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null-start',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
//pctree 数据结构中没有后续指针
|
||||
if (cfg.id.includes('PCTreeHead') && !cfg.headNext) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (5 / 4),
|
||||
y: height * (8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: 20,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'null-headNext2',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
@ -96,7 +149,9 @@ export default Util.registerShape('two-cell-node', {
|
||||
[0.5, 0],
|
||||
[3 / 4, 0.5],
|
||||
[0.5, 1],
|
||||
[0, 0.5]
|
||||
[0, 0.5],
|
||||
];
|
||||
}
|
||||
}, 'rect');
|
||||
},
|
||||
},
|
||||
'rect'
|
||||
);
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2022-01-26 01:58:25
|
||||
* @LastEditTime: 2022-01-26 02:06:16
|
||||
* @LastEditors: your name
|
||||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @FilePath: \测试数据c:\Users\13127\Desktop\最近的前端文件\可视化0126\StructV2\src\StructV.ts
|
||||
*/
|
||||
import { Engine } from "./engine";
|
||||
import { Bound } from "./Common/boundingRect";
|
||||
import { Group } from "./Common/group";
|
||||
@ -6,15 +14,16 @@ import Pointer from "./RegisteredShape/pointer";
|
||||
import LinkListNode from "./RegisteredShape/linkListNode";
|
||||
import BinaryTreeNode from "./RegisteredShape/binaryTreeNode";
|
||||
import ForceNode from "./RegisteredShape/force";
|
||||
import TriTreeNode from "./RegisteredShape/triTreeNode";
|
||||
import CLenQueuePointer from "./RegisteredShape/clenQueuePointer";
|
||||
import TwoCellNode from "./RegisteredShape/twoCellNode";
|
||||
import ThreeCellNode from "./RegisteredShape/threeCellNode";
|
||||
import ArrayNode from "./RegisteredShape/arrayNode";
|
||||
import Cursor from "./RegisteredShape/cursor";
|
||||
import { Vector } from "./Common/vector";
|
||||
import { EngineOptions, LayoutCreator } from "./options";
|
||||
import { SourceNode } from "./sources";
|
||||
import { Util } from "./Common/util";
|
||||
import { SVModel } from "./Model/SVModel";
|
||||
import { SVNode } from "./Model/SVNode";
|
||||
|
||||
|
||||
@ -58,7 +67,9 @@ SV.registeredShape = [
|
||||
Pointer,
|
||||
LinkListNode,
|
||||
BinaryTreeNode,
|
||||
TriTreeNode,
|
||||
TwoCellNode,
|
||||
ThreeCellNode,
|
||||
Cursor,
|
||||
ArrayNode,
|
||||
CLenQueuePointer,
|
||||
@ -85,5 +96,6 @@ SV.registerLayout = function(name: string, layoutCreator: LayoutCreator) {
|
||||
}
|
||||
|
||||
SV.registeredLayout[name] = layoutCreator;
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
import { IPoint } from '@antv/g6-core';
|
||||
import { IPoint, INode } from '@antv/g6-core';
|
||||
import { Bound, BoundingRect } from '../Common/boundingRect';
|
||||
import { Group } from '../Common/group';
|
||||
import { Util } from '../Common/util';
|
||||
import { Vector } from '../Common/vector';
|
||||
import { Engine } from '../engine';
|
||||
import { LayoutGroupTable } from '../Model/modelConstructor';
|
||||
import { LayoutGroupTable, ModelConstructor } from '../Model/modelConstructor';
|
||||
import { SVModel } from '../Model/SVModel';
|
||||
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from '../Model/SVNodeAppendage';
|
||||
import { AddressLabelOption, IndexLabelOption, LayoutOptions, MarkerOption, ViewOptions } from '../options';
|
||||
import { ViewContainer } from './viewContainer';
|
||||
|
||||
|
||||
export class LayoutProvider {
|
||||
private engine: Engine;
|
||||
private viewOptions: ViewOptions;
|
||||
private viewContainer: ViewContainer;
|
||||
private leakAreaXoffset: number = 20;
|
||||
private leakClusterXInterval = 25;
|
||||
|
||||
constructor(engine: Engine, viewContainer: ViewContainer) {
|
||||
this.engine = engine;
|
||||
@ -22,7 +23,6 @@ export class LayoutProvider {
|
||||
this.viewContainer = viewContainer;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 布局前处理
|
||||
* @param layoutGroupTable
|
||||
@ -69,20 +69,23 @@ export class LayoutProvider {
|
||||
|
||||
let target = item.target,
|
||||
targetBound: BoundingRect = target.getBound(),
|
||||
g6AnchorPosition = item.target.shadowG6Item.getAnchorPoints()[anchor] as IPoint,
|
||||
center: [number, number] = [targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2],
|
||||
g6AnchorPosition = (<INode>item.target.shadowG6Item).getAnchorPoints()[anchor] as IPoint,
|
||||
center: [number, number] = [
|
||||
targetBound.x + targetBound.width / 2,
|
||||
targetBound.y + targetBound.height / 2,
|
||||
],
|
||||
markerPosition: [number, number],
|
||||
markerEndPosition: [number, number];
|
||||
|
||||
let anchorPosition: [number, number] = [g6AnchorPosition.x, g6AnchorPosition.y];
|
||||
|
||||
let anchorVector = Vector.subtract(anchorPosition, center),
|
||||
angle = 0, len = Vector.length(anchorVector) + offset;
|
||||
angle = 0,
|
||||
len = Vector.length(anchorVector) + offset;
|
||||
|
||||
if (anchorVector[0] === 0) {
|
||||
angle = anchorVector[1] > 0 ? -Math.PI : 0;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
|
||||
}
|
||||
|
||||
@ -98,7 +101,7 @@ export class LayoutProvider {
|
||||
x: markerPosition[0],
|
||||
y: markerPosition[1],
|
||||
rotation: angle,
|
||||
markerEndPosition
|
||||
markerEndPosition,
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -114,7 +117,7 @@ export class LayoutProvider {
|
||||
item.set({
|
||||
x: freedNodeBound.x + freedNodeBound.width / 2,
|
||||
y: freedNodeBound.y + freedNodeBound.height * 1.5,
|
||||
size: [freedNodeBound.width, 0]
|
||||
size: [freedNodeBound.width, 0],
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -125,37 +128,44 @@ export class LayoutProvider {
|
||||
* @param indexLabelOptions
|
||||
*/
|
||||
private layoutIndexLabel(indexLabels: SVIndexLabel[], indexLabelOptions: { [key: string]: IndexLabelOption }) {
|
||||
const indexLabelPositionMap: { [key: string]: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => { x: number, y: number } } = {
|
||||
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
|
||||
y: nodeBound.y - offset,
|
||||
};
|
||||
},
|
||||
right: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
|
||||
return {
|
||||
x: nodeBound.x + nodeBound.width + offset,
|
||||
y: nodeBound.y + nodeBound.height / 2
|
||||
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
|
||||
y: nodeBound.y + nodeBound.height + offset,
|
||||
};
|
||||
},
|
||||
left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
|
||||
return {
|
||||
x: nodeBound.x - labelBound.width - offset,
|
||||
y: nodeBound.y + nodeBound.height / 2
|
||||
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(),
|
||||
// labelBound = item.getBound(),
|
||||
labelBound = item.shadowG6Item.getContainer().getChildren()[1].getBBox(),
|
||||
offset = options.offset ?? 20,
|
||||
position = options.position ?? 'bottom';
|
||||
|
||||
@ -176,12 +186,11 @@ export class LayoutProvider {
|
||||
|
||||
item.set({
|
||||
x: nodeBound.x + nodeBound.width / 2,
|
||||
y: nodeBound.y - offset
|
||||
y: nodeBound.y - offset,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 对每个组内部的model进行布局
|
||||
* @param layoutGroupTable
|
||||
@ -208,10 +217,15 @@ export class LayoutProvider {
|
||||
indexLabelOptions = group.options.indexLabel || {},
|
||||
addressLabelOption = group.options.addressLabel || {};
|
||||
|
||||
this.layoutIndexLabel(group.indexLabel, indexLabelOptions);
|
||||
this.layoutFreedLabel(group.freedLabel);
|
||||
this.layoutAddressLabel(group.addressLabel, addressLabelOption);
|
||||
this.layoutMarker(group.marker, markerOptions); // 布局外部指针
|
||||
const indexLabel = group.appendage.filter(item => item instanceof SVIndexLabel) as SVIndexLabel[],
|
||||
freedLabel = group.appendage.filter(item => item instanceof SVFreedLabel) as SVFreedLabel[],
|
||||
addressLabel = group.appendage.filter(item => item instanceof SVAddressLabel) as SVAddressLabel[],
|
||||
marker = group.appendage.filter(item => item instanceof SVMarker) as SVMarker[];
|
||||
|
||||
this.layoutIndexLabel(indexLabel, indexLabelOptions);
|
||||
this.layoutFreedLabel(freedLabel);
|
||||
this.layoutAddressLabel(addressLabel, addressLabelOption);
|
||||
this.layoutMarker(marker, markerOptions); // 布局外部指针
|
||||
});
|
||||
|
||||
return modelGroupList;
|
||||
@ -219,45 +233,36 @@ export class LayoutProvider {
|
||||
|
||||
/**
|
||||
* 对泄漏区进行布局
|
||||
* @param leakModels
|
||||
* @param accumulateLeakModels
|
||||
* // todo: 部分元素被抽离后的泄漏区
|
||||
*/
|
||||
private layoutLeakModels(leakModels: SVModel[], accumulateLeakModels: SVModel[]) {
|
||||
const group: Group = new Group(),
|
||||
containerHeight = this.viewContainer.getG6Instance().getHeight(),
|
||||
private layoutLeakArea(accumulateLeakModels: SVModel[]) {
|
||||
const containerHeight = this.viewContainer.getG6Instance().getHeight(),
|
||||
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
|
||||
leakAreaY = containerHeight - leakAreaHeight,
|
||||
xOffset = 60;
|
||||
leakAreaY = containerHeight - leakAreaHeight;
|
||||
|
||||
let prevBound: BoundingRect;
|
||||
|
||||
// 避免在泄漏前拖拽节点导致的位置变化，先把节点位置重置为布局后的标准位置
|
||||
leakModels.forEach(item => {
|
||||
accumulateLeakModels.forEach(item => {
|
||||
item.set({
|
||||
x: item.layoutX,
|
||||
y: item.layoutY
|
||||
y: item.layoutY,
|
||||
});
|
||||
});
|
||||
|
||||
const globalLeakGroupBound: BoundingRect = accumulateLeakModels.length ?
|
||||
Bound.union(...accumulateLeakModels.map(item => item.getBound())) :
|
||||
{ x: 0, y: leakAreaY, width: 0, height: 0 };
|
||||
const clusters = ModelConstructor.getClusters(accumulateLeakModels);
|
||||
|
||||
const layoutGroups = Util.groupBy(leakModels, 'group');
|
||||
Object.keys(layoutGroups).forEach(key => {
|
||||
group.add(...layoutGroups[key]);
|
||||
// 每一个簇从左往右布局就完事了，比之前的方法简单稳定很多
|
||||
clusters.forEach(item => {
|
||||
const bound = item.getBound(),
|
||||
x = prevBound ? prevBound.x + prevBound.width + this.leakClusterXInterval : this.leakAreaXoffset,
|
||||
dx = x - bound.x,
|
||||
dy = leakAreaY - bound.y;
|
||||
|
||||
const currentBound: BoundingRect = group.getBound(),
|
||||
prevBoundEnd = prevBound? prevBound.x + prevBound.width: 0,
|
||||
{ x: groupX, y: groupY } = currentBound,
|
||||
dx = globalLeakGroupBound.x + globalLeakGroupBound.width + prevBoundEnd + xOffset - groupX,
|
||||
dy = globalLeakGroupBound.y - groupY;
|
||||
|
||||
group.translate(dx, dy);
|
||||
group.clear();
|
||||
Bound.translate(currentBound, dx, dy);
|
||||
|
||||
prevBound = currentBound;
|
||||
item.translate(dx, dy);
|
||||
Bound.translate(bound, dx, dy);
|
||||
prevBound = bound;
|
||||
});
|
||||
}
|
||||
|
||||
@ -280,8 +285,7 @@ export class LayoutProvider {
|
||||
|
||||
if (prevBound) {
|
||||
dx = prevBound.x + prevBound.width - bound.x;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
dx = bound.x;
|
||||
}
|
||||
|
||||
@ -295,7 +299,6 @@ export class LayoutProvider {
|
||||
return wrapperGroup;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 将视图调整至画布中心
|
||||
* @param models
|
||||
@ -304,40 +307,39 @@ export class LayoutProvider {
|
||||
private fitCenter(group: Group) {
|
||||
let width = this.viewContainer.getG6Instance().getWidth(),
|
||||
height = this.viewContainer.getG6Instance().getHeight(),
|
||||
viewBound: BoundingRect = group.getBound(),
|
||||
leakAreaHeight = this.engine.viewOptions.leakAreaHeight;
|
||||
|
||||
if (this.viewContainer.hasLeak) {
|
||||
height = height - leakAreaHeight;
|
||||
}
|
||||
const centerX = width / 2,
|
||||
centerY = height / 2,
|
||||
boundCenterX = viewBound.x + viewBound.width / 2;
|
||||
|
||||
const viewBound: BoundingRect = group.getBound(),
|
||||
centerX = width / 2, centerY = height / 2,
|
||||
boundCenterX = viewBound.x + viewBound.width / 2,
|
||||
boundCenterY = viewBound.y + viewBound.height / 2,
|
||||
dx = centerX - boundCenterX,
|
||||
let dx = centerX - boundCenterX,
|
||||
dy = 0;
|
||||
|
||||
if (this.viewContainer.hasLeak) {
|
||||
const boundBottomY = viewBound.y + viewBound.height;
|
||||
dy = height - leakAreaHeight - 130 - boundBottomY;
|
||||
} else {
|
||||
const boundCenterY = viewBound.y + viewBound.height / 2;
|
||||
dy = centerY - boundCenterY;
|
||||
}
|
||||
|
||||
group.translate(dx, dy);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 布局
|
||||
* @param layoutGroupTable
|
||||
* @param leakModels
|
||||
* @param hasLeak
|
||||
* @param needFitCenter
|
||||
* @param accumulateLeakModels
|
||||
*/
|
||||
public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[], leakModels: SVModel[]) {
|
||||
public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[]) {
|
||||
this.preLayoutProcess(layoutGroupTable);
|
||||
|
||||
const modelGroupList: Group[] = this.layoutModels(layoutGroupTable);
|
||||
const generalGroup: Group = this.layoutGroups(modelGroupList);
|
||||
|
||||
if (leakModels.length) {
|
||||
this.layoutLeakModels(leakModels, accumulateLeakModels);
|
||||
}
|
||||
this.layoutLeakArea(accumulateLeakModels);
|
||||
|
||||
this.fitCenter(generalGroup);
|
||||
this.postLayoutProcess(layoutGroupTable);
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { EventBus } from "../Common/eventBus";
|
||||
import { Util } from "../Common/util";
|
||||
import { Engine } from "../engine";
|
||||
import { LayoutGroupTable } from "../Model/modelConstructor";
|
||||
import { SVLink } from "../Model/SVLink";
|
||||
import { SVModel } from "../Model/SVModel";
|
||||
import { SVNode } from "../Model/SVNode";
|
||||
import { SVAddressLabel, SVMarker, SVNodeAppendage } from "../Model/SVNodeAppendage";
|
||||
import { Animations } from "./animation";
|
||||
import { Renderer } from "./renderer";
|
||||
|
||||
import { EventBus } from '../Common/eventBus';
|
||||
import { Util } from '../Common/util';
|
||||
import { Engine } from '../engine';
|
||||
import { LayoutGroupTable } from '../Model/modelConstructor';
|
||||
import { SVLink } from '../Model/SVLink';
|
||||
import { SVModel } from '../Model/SVModel';
|
||||
import { SVNode } from '../Model/SVNode';
|
||||
import { SVAddressLabel, SVMarker, SVNodeAppendage } from '../Model/SVNodeAppendage';
|
||||
import { handleUpdate } from '../sources';
|
||||
import { Animations } from './animation';
|
||||
import { Renderer } from './renderer';
|
||||
|
||||
export interface DiffResult {
|
||||
CONTINUOUS: SVModel[];
|
||||
@ -17,13 +17,9 @@ export interface DiffResult {
|
||||
FREED: SVNode[];
|
||||
LEAKED: SVModel[];
|
||||
UPDATE: SVModel[];
|
||||
ACCUMULATE_LEAK: SVModel[];
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class Reconcile {
|
||||
|
||||
private engine: Engine;
|
||||
private renderer: Renderer;
|
||||
private isFirstPatch: boolean;
|
||||
@ -51,13 +47,21 @@ export class Reconcile {
|
||||
* @param accumulateLeakModels
|
||||
* @returns
|
||||
*/
|
||||
private getAppendModels(prevModelList: SVModel[], modelList: SVModel[], accumulateLeakModels: SVModel[]): SVModel[] {
|
||||
private getAppendModels(
|
||||
prevModelList: SVModel[],
|
||||
modelList: SVModel[],
|
||||
accumulateLeakModels: SVModel[]
|
||||
): SVModel[] {
|
||||
const appendModels = modelList.filter(item => !prevModelList.find(model => model.id === item.id));
|
||||
|
||||
// 看看新增的节点是不是从泄漏区来的
|
||||
// 目前的判断方式比较傻：看看泄漏区有没有相同id的节点，但是发现这个方法可能不可靠，不知道还有没有更好的办法
|
||||
appendModels.forEach(item => {
|
||||
let removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id);
|
||||
const removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id),
|
||||
svModel = accumulateLeakModels[removeIndex];
|
||||
|
||||
if (removeIndex > -1) {
|
||||
svModel.leaked = false;
|
||||
accumulateLeakModels.splice(removeIndex, 1);
|
||||
}
|
||||
});
|
||||
@ -72,9 +76,13 @@ export class Reconcile {
|
||||
* @param modelList
|
||||
* @returns
|
||||
*/
|
||||
private getLeakModels(layoutGroupTable: LayoutGroupTable, prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
|
||||
let potentialLeakModels: SVModel[] = prevModelList.filter(item =>
|
||||
!modelList.find(model => model.id === item.id) && !item.freed
|
||||
private getLeakModels(
|
||||
layoutGroupTable: LayoutGroupTable,
|
||||
prevModelList: SVModel[],
|
||||
modelList: SVModel[]
|
||||
): SVModel[] {
|
||||
let potentialLeakModels: SVModel[] = prevModelList.filter(
|
||||
item => !modelList.find(model => model.id === item.id) && !item.freed
|
||||
);
|
||||
const leakModels: SVModel[] = [];
|
||||
|
||||
@ -87,7 +95,7 @@ export class Reconcile {
|
||||
|
||||
Object.keys(groups).forEach(key => {
|
||||
const leakRule = layoutGroupTable.get(key).layoutCreator.defineLeakRule;
|
||||
if(leakRule && typeof leakRule === 'function') {
|
||||
if (leakRule && typeof leakRule === 'function') {
|
||||
potentialLeakModels.push(...leakRule(groups[key]));
|
||||
}
|
||||
});
|
||||
@ -97,7 +105,12 @@ export class Reconcile {
|
||||
item.leaked = true;
|
||||
leakModels.push(item);
|
||||
|
||||
item.appendages.forEach(appendage => {
|
||||
item.getAppendagesList().forEach(appendage => {
|
||||
// 外部指针先不加入泄漏区（这个需要讨论一下，我觉得不应该）
|
||||
if (appendage instanceof SVMarker) {
|
||||
return;
|
||||
}
|
||||
|
||||
appendage.leaked = true;
|
||||
leakModels.push(appendage);
|
||||
});
|
||||
@ -111,11 +124,6 @@ export class Reconcile {
|
||||
}
|
||||
});
|
||||
|
||||
leakModels.forEach(item => {
|
||||
// 不能用上次的G6item了，不然布局的时候会没有动画
|
||||
item.G6Item = null;
|
||||
});
|
||||
|
||||
return leakModels;
|
||||
}
|
||||
|
||||
@ -124,7 +132,11 @@ export class Reconcile {
|
||||
* @param prevModelList
|
||||
* @param modelList
|
||||
*/
|
||||
private getRemoveModels(prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
|
||||
private getRemoveModels(
|
||||
prevModelList: SVModel[],
|
||||
modelList: SVModel[],
|
||||
accumulateLeakModels: SVModel[]
|
||||
): SVModel[] {
|
||||
let removedModels: SVModel[] = [];
|
||||
|
||||
for (let i = 0; i < prevModelList.length; i++) {
|
||||
@ -136,9 +148,24 @@ export class Reconcile {
|
||||
}
|
||||
}
|
||||
|
||||
return removedModels;
|
||||
// 假如某个节点从泄漏区移回可视化区域，那么与原来泄漏结构的连线应该消失掉
|
||||
for (let i = 0; i < accumulateLeakModels.length; i++) {
|
||||
let leakModel = accumulateLeakModels[i];
|
||||
if (leakModel instanceof SVLink) {
|
||||
if (leakModel.node.leaked === false || leakModel.target.leaked === false) {
|
||||
accumulateLeakModels.splice(i, 1);
|
||||
i--;
|
||||
removedModels.push(leakModel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
removedModels.forEach(item => {
|
||||
item.beforeDestroy();
|
||||
});
|
||||
|
||||
return removedModels;
|
||||
}
|
||||
|
||||
/**
|
||||
* 找出重新指向的外部指针
|
||||
@ -150,9 +177,11 @@ export class Reconcile {
|
||||
const prevMarkers: SVMarker[] = prevModelList.filter(item => item instanceof SVMarker) as SVMarker[],
|
||||
markers: SVMarker[] = modelList.filter(item => item instanceof SVMarker) as SVMarker[];
|
||||
|
||||
return markers.filter(item => prevMarkers.find(prevItem => {
|
||||
return prevItem.id === item.id && prevItem.target.id !== item.target.id
|
||||
}));
|
||||
return markers.filter(item =>
|
||||
prevMarkers.find(prevItem => {
|
||||
return prevItem.id === item.id && prevItem.target.id !== item.target.id;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -174,7 +203,7 @@ export class Reconcile {
|
||||
const prevLabel = prevItem.get('label'),
|
||||
label = item.get('label');
|
||||
|
||||
if (prevLabel !== label) {
|
||||
if (String(prevLabel) !== String(label)) {
|
||||
labelChangeModels.push(item);
|
||||
}
|
||||
});
|
||||
@ -233,18 +262,17 @@ export class Reconcile {
|
||||
// 先将透明度改为0，隐藏掉
|
||||
const AddressLabelG6Group = item.G6Item.getContainer();
|
||||
AddressLabelG6Group.attr({ opacity: 0 });
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
Animations.FADE_IN(item.G6Item, {
|
||||
duration,
|
||||
timingFunction
|
||||
timingFunction,
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
Animations.APPEND(item.G6Item, {
|
||||
duration,
|
||||
timingFunction
|
||||
timingFunction,
|
||||
callback: () => item.afterRender(),
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -263,7 +291,8 @@ export class Reconcile {
|
||||
timingFunction,
|
||||
callback: () => {
|
||||
this.renderer.removeModel(item);
|
||||
}
|
||||
item.afterDestroy();
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -279,7 +308,7 @@ export class Reconcile {
|
||||
if (item instanceof SVAddressLabel) {
|
||||
Animations.FADE_IN(item.G6Item, {
|
||||
duration,
|
||||
timingFunction
|
||||
timingFunction,
|
||||
});
|
||||
}
|
||||
|
||||
@ -289,19 +318,6 @@ export class Reconcile {
|
||||
EventBus.emit('onLeak', leakModels);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理已经堆积的泄漏区 models
|
||||
* @param accumulateModels
|
||||
*/
|
||||
private handleAccumulateLeakModels(accumulateModels: SVModel[]) {
|
||||
accumulateModels.forEach(item => {
|
||||
if (item.generalStyle) {
|
||||
item.set('style', { ...item.generalStyle });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 处理被释放的节点 models
|
||||
* @param freedModes
|
||||
@ -316,14 +332,20 @@ export class Reconcile {
|
||||
item.set('style', { fill: '#ccc' });
|
||||
nodeGroup.attr({ opacity: alpha });
|
||||
|
||||
if (item.marker) {
|
||||
const markerGroup = item.marker.G6Item.getContainer();
|
||||
item.marker.set('style', { fill: '#ccc' });
|
||||
if (item.appendages.marker) {
|
||||
item.appendages.marker.forEach(marker => {
|
||||
const markerGroup = marker.G6Item.getContainer();
|
||||
marker.set('style', { fill: '#ccc' });
|
||||
markerGroup.attr({ opacity: alpha + 0.5 });
|
||||
});
|
||||
}
|
||||
|
||||
item.freedLabel.G6Item.toFront();
|
||||
Animations.FADE_IN(item.freedLabel.G6Item, { duration, timingFunction });
|
||||
if (item.appendages.freedLabel) {
|
||||
item.appendages.freedLabel.forEach(freedLabel => {
|
||||
freedLabel.G6Item.toFront();
|
||||
Animations.FADE_IN(freedLabel.G6Item, { duration, timingFunction });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
EventBus.emit('onFreed', freedModes);
|
||||
@ -341,23 +363,17 @@ 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);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤新增model中那些不需要高亮的model（比如target和node都一样的link，marker等）
|
||||
* @param appendModels
|
||||
*/
|
||||
private filterUnChangeModelsOfAppend(appendModels: SVModel[], prevModelList: SVModel[]): SVModel[] {
|
||||
return appendModels.filter(item => !prevModelList.some(prev => item.isEqual(prev)));
|
||||
}
|
||||
|
||||
/**
|
||||
* 进行diff
|
||||
@ -367,16 +383,24 @@ export class Reconcile {
|
||||
* @param accumulateLeakModels
|
||||
* @returns
|
||||
*/
|
||||
public diff(layoutGroupTable: LayoutGroupTable, prevModelList: SVModel[], modelList: SVModel[], accumulateLeakModels: SVModel[]): DiffResult {
|
||||
public diff(
|
||||
layoutGroupTable: LayoutGroupTable,
|
||||
prevModelList: SVModel[],
|
||||
modelList: SVModel[],
|
||||
accumulateLeakModels: SVModel[],
|
||||
isEnterFunction: boolean
|
||||
): DiffResult {
|
||||
const continuousModels: SVModel[] = this.getContinuousModels(prevModelList, modelList);
|
||||
const leakModels: SVModel[] = this.getLeakModels(layoutGroupTable, prevModelList, modelList);
|
||||
const leakModels: SVModel[] = isEnterFunction
|
||||
? []
|
||||
: this.getLeakModels(layoutGroupTable, prevModelList, modelList);
|
||||
const appendModels: SVModel[] = this.getAppendModels(prevModelList, modelList, accumulateLeakModels);
|
||||
const removeModels: SVModel[] = this.getRemoveModels(prevModelList, modelList);
|
||||
const removeModels: SVModel[] = this.getRemoveModels(prevModelList, modelList, accumulateLeakModels);
|
||||
const updateModels: SVModel[] = [
|
||||
...this.getReTargetMarkers(prevModelList, modelList),
|
||||
...this.getLabelChangeModels(prevModelList, modelList),
|
||||
...appendModels,
|
||||
...leakModels
|
||||
...this.filterUnChangeModelsOfAppend(appendModels, prevModelList),
|
||||
...leakModels,
|
||||
];
|
||||
const freedModels: SVNode[] = this.getFreedModels(prevModelList, modelList);
|
||||
|
||||
@ -387,31 +411,19 @@ export class Reconcile {
|
||||
FREED: freedModels,
|
||||
LEAKED: leakModels,
|
||||
UPDATE: updateModels,
|
||||
ACCUMULATE_LEAK: [...accumulateLeakModels]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 执行调和操作
|
||||
* @param diffResult
|
||||
* @param isFirstRender
|
||||
*/
|
||||
public patch(diffResult: DiffResult) {
|
||||
const {
|
||||
APPEND,
|
||||
REMOVE,
|
||||
FREED,
|
||||
LEAKED,
|
||||
UPDATE,
|
||||
CONTINUOUS,
|
||||
ACCUMULATE_LEAK
|
||||
} = diffResult;
|
||||
public patch(diffResult: DiffResult, handleUpdate: handleUpdate) {
|
||||
const { APPEND, REMOVE, FREED, LEAKED, UPDATE, CONTINUOUS } = diffResult;
|
||||
|
||||
this.handleAccumulateLeakModels(ACCUMULATE_LEAK);
|
||||
|
||||
// 第一次渲染的时候不高亮变化的元素
|
||||
if (this.isFirstPatch === false) {
|
||||
// 第一次渲染和进入函数的时候不高亮变化的元素
|
||||
if (this.isFirstPatch === false && !handleUpdate?.isEnterFunction && !handleUpdate?.isFirstDebug) {
|
||||
this.handleChangeModels(UPDATE);
|
||||
}
|
||||
|
||||
@ -426,5 +438,5 @@ export class Reconcile {
|
||||
}
|
||||
}
|
||||
|
||||
public destroy() { }
|
||||
public destroy() {}
|
||||
}
|
||||
@ -4,16 +4,14 @@ import { Util } from '../Common/util';
|
||||
import { Tooltip, Graph, GraphData, Modes } from '@antv/g6';
|
||||
import { InitG6Behaviors } from '../BehaviorHelper/initG6Behaviors';
|
||||
|
||||
|
||||
|
||||
export interface RenderModelPack {
|
||||
leaKModels: SVModel[];
|
||||
generalModel: SVModel[];
|
||||
}
|
||||
|
||||
|
||||
export type g6Behavior = string | { type: string; shouldBegin?: Function; shouldUpdate?: Function; shouldEnd?: Function; };
|
||||
|
||||
export type g6Behavior =
|
||||
| string
|
||||
| { type: string; shouldBegin?: Function; shouldUpdate?: Function; shouldEnd?: Function };
|
||||
|
||||
export class Renderer {
|
||||
private engine: Engine;
|
||||
|
||||
@ -1,20 +1,25 @@
|
||||
import { Engine } from "../engine";
|
||||
import { LayoutProvider } from "./layoutProvider";
|
||||
import { LayoutGroupTable } from "../Model/modelConstructor";
|
||||
import { Util } from "../Common/util";
|
||||
import { SVModel } from "../Model/SVModel";
|
||||
import { Renderer } from "./renderer";
|
||||
import { Reconcile } from "./reconcile";
|
||||
import { EventBus } from "../Common/eventBus";
|
||||
import { Group } from "../Common/group";
|
||||
import { Graph, Modes } from "@antv/g6-pc";
|
||||
import { InitG6Behaviors } from "../BehaviorHelper/initG6Behaviors";
|
||||
import { SVNode } from "../Model/SVNode";
|
||||
import { SolveBrushSelectDrag, SolveDragCanvasWithLeak, SolveNodeAppendagesDrag, SolveZoomCanvasWithLeak } from "../BehaviorHelper/behaviorIssueHelper";
|
||||
|
||||
|
||||
import { Engine } from '../engine';
|
||||
import { LayoutProvider } from './layoutProvider';
|
||||
import { LayoutGroupTable } from '../Model/modelConstructor';
|
||||
import { Util } from '../Common/util';
|
||||
import { SVModel } from '../Model/SVModel';
|
||||
import { Renderer } from './renderer';
|
||||
import { Reconcile } from './reconcile';
|
||||
import { EventBus } from '../Common/eventBus';
|
||||
import { Group } from '../Common/group';
|
||||
import { Graph, Modes } from '@antv/g6-pc';
|
||||
import { InitG6Behaviors } from '../BehaviorHelper/initG6Behaviors';
|
||||
import { SVNode } from '../Model/SVNode';
|
||||
import {
|
||||
SolveBrushSelectDrag,
|
||||
SolveDragCanvasWithLeak,
|
||||
SolveNodeAppendagesDrag,
|
||||
SolveZoomCanvasWithLeak,
|
||||
} from '../BehaviorHelper/behaviorIssueHelper';
|
||||
import { handleUpdate } from '../sources';
|
||||
|
||||
export class ViewContainer {
|
||||
<<<<<<< HEAD
|
||||
private engine: Engine;
|
||||
private layoutProvider: LayoutProvider;
|
||||
private reconcile: Reconcile;
|
||||
@ -129,9 +134,153 @@ export class ViewContainer {
|
||||
this.renderer.refresh();
|
||||
|
||||
this.leakAreaY += dy;
|
||||
=======
|
||||
private engine: Engine;
|
||||
private layoutProvider: LayoutProvider;
|
||||
private reconcile: Reconcile;
|
||||
public renderer: Renderer;
|
||||
|
||||
private layoutGroupTable: LayoutGroupTable;
|
||||
private prevModelList: SVModel[];
|
||||
private accumulateLeakModels: SVModel[];
|
||||
|
||||
public hasLeak: boolean;
|
||||
public leakAreaY: number;
|
||||
public lastLeakAreaTranslateY: number;
|
||||
public brushSelectedModels: SVModel[]; // 保存框选过程中被选中的节点
|
||||
public clickSelectNode: SVNode; // 点击选中的节点
|
||||
|
||||
constructor(engine: Engine, DOMContainer: HTMLElement) {
|
||||
const behaviorsModes: Modes = InitG6Behaviors(engine, this);
|
||||
|
||||
this.engine = engine;
|
||||
this.layoutProvider = new LayoutProvider(engine, this);
|
||||
this.renderer = new Renderer(engine, DOMContainer, behaviorsModes);
|
||||
this.reconcile = new Reconcile(engine, this.renderer);
|
||||
this.layoutGroupTable = new Map();
|
||||
this.prevModelList = [];
|
||||
this.accumulateLeakModels = [];
|
||||
this.hasLeak = false; // 判断是否已经发生过泄漏
|
||||
this.brushSelectedModels = [];
|
||||
this.clickSelectNode = null;
|
||||
|
||||
const g6Instance = this.renderer.getG6Instance(),
|
||||
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
|
||||
height = g6Instance.getHeight(),
|
||||
{ drag, zoom } = this.engine.behaviorOptions;
|
||||
|
||||
this.leakAreaY = height - leakAreaHeight;
|
||||
this.lastLeakAreaTranslateY = 0;
|
||||
|
||||
SolveNodeAppendagesDrag(this);
|
||||
SolveBrushSelectDrag(this);
|
||||
drag && SolveDragCanvasWithLeak(this);
|
||||
zoom && SolveZoomCanvasWithLeak(this);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* 对主视图进行重新布局
|
||||
*/
|
||||
reLayout() {
|
||||
const g6Instance = this.getG6Instance(),
|
||||
group = g6Instance.getGroup(),
|
||||
matrix = group.getMatrix(),
|
||||
bound = group.getCanvasBBox();
|
||||
|
||||
const { duration, enable, timingFunction } = this.engine.animationOptions;
|
||||
|
||||
if (matrix) {
|
||||
let dx = matrix[6],
|
||||
dy = matrix[7];
|
||||
|
||||
g6Instance.moveTo(bound.minX - dx, bound.minY - dy, enable, {
|
||||
duration,
|
||||
easing: timingFunction,
|
||||
});
|
||||
}
|
||||
|
||||
const leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
|
||||
height = g6Instance.getHeight();
|
||||
|
||||
this.leakAreaY = height - leakAreaHeight;
|
||||
this.lastLeakAreaTranslateY = 0;
|
||||
this.layoutProvider.layoutAll(this.layoutGroupTable, this.accumulateLeakModels);
|
||||
g6Instance.refresh();
|
||||
|
||||
>>>>>>> eac9d007bcc1b52fe573ddf6cb97030c9b2d3a6d
|
||||
EventBus.emit('onLeakAreaUpdate', {
|
||||
leakAreaY: this.leakAreaY,
|
||||
hasLeak: this.hasLeak
|
||||
hasLeak: this.hasLeak,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 g6 实例
|
||||
*/
|
||||
getG6Instance(): Graph {
|
||||
return this.renderer.getG6Instance();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取泄漏区里面的元素
|
||||
* @returns
|
||||
*/
|
||||
getAccumulateLeakModels(): SVModel[] {
|
||||
return this.accumulateLeakModels;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
getLayoutGroupTable(): LayoutGroupTable {
|
||||
return this.layoutGroupTable;
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新视图
|
||||
*/
|
||||
refresh() {
|
||||
this.renderer.getG6Instance().refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新调整容器尺寸
|
||||
* @param width
|
||||
* @param height
|
||||
*/
|
||||
resize(width: number, height: number) {
|
||||
const g6Instance = this.getG6Instance(),
|
||||
prevContainerHeight = g6Instance.getHeight(),
|
||||
globalGroup: Group = new Group();
|
||||
|
||||
globalGroup.add(...this.prevModelList, ...this.accumulateLeakModels);
|
||||
this.renderer.changeSize(width, height);
|
||||
|
||||
const containerHeight = g6Instance.getHeight(),
|
||||
dy = containerHeight - prevContainerHeight;
|
||||
|
||||
globalGroup.translate(0, dy);
|
||||
this.renderer.refresh();
|
||||
|
||||
this.leakAreaY += dy;
|
||||
EventBus.emit('onLeakAreaUpdate', {
|
||||
leakAreaY: this.leakAreaY,
|
||||
hasLeak: this.hasLeak,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param models
|
||||
*/
|
||||
private restoreHighlight(models: SVModel[]) {
|
||||
models.forEach(item => {
|
||||
// 不是free节点才进行还原
|
||||
if (!item.freed) {
|
||||
item.restoreHighlight();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -140,42 +289,52 @@ export class ViewContainer {
|
||||
* @param models
|
||||
* @param layoutFn
|
||||
*/
|
||||
render(layoutGroupTable: LayoutGroupTable) {
|
||||
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable),
|
||||
diffResult = this.reconcile.diff(this.layoutGroupTable, this.prevModelList, modelList, this.accumulateLeakModels),
|
||||
renderModelList = [
|
||||
...modelList,
|
||||
...diffResult.REMOVE,
|
||||
...diffResult.LEAKED,
|
||||
...diffResult.ACCUMULATE_LEAK
|
||||
];
|
||||
render(layoutGroupTable: LayoutGroupTable, isSameSources: boolean, handleUpdate: handleUpdate) {
|
||||
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
|
||||
|
||||
this.restoreHighlight([...modelList, ...this.accumulateLeakModels]);
|
||||
|
||||
// 如果数据没变的话，直接退出
|
||||
if (isSameSources) {
|
||||
return;
|
||||
}
|
||||
|
||||
const diffResult = this.reconcile.diff(
|
||||
this.layoutGroupTable,
|
||||
this.prevModelList,
|
||||
modelList,
|
||||
this.accumulateLeakModels,
|
||||
handleUpdate?.isEnterFunction
|
||||
),
|
||||
renderModelList = [...modelList, ...diffResult.REMOVE, ...diffResult.LEAKED, ...this.accumulateLeakModels];
|
||||
|
||||
// 从有泄漏区变成无泄漏区
|
||||
if (this.hasLeak === true && this.accumulateLeakModels.length === 0) {
|
||||
this.hasLeak = false;
|
||||
EventBus.emit('onLeakAreaUpdate', {
|
||||
leakAreaY: this.leakAreaY,
|
||||
hasLeak: this.hasLeak
|
||||
hasLeak: this.hasLeak,
|
||||
});
|
||||
}
|
||||
|
||||
// 从无泄漏区变成有泄漏区
|
||||
if (diffResult.LEAKED.length) {
|
||||
this.hasLeak = true;
|
||||
EventBus.emit('onLeakAreaUpdate', {
|
||||
leakAreaY: this.leakAreaY,
|
||||
hasLeak: this.hasLeak
|
||||
hasLeak: this.hasLeak,
|
||||
});
|
||||
}
|
||||
|
||||
this.accumulateLeakModels.push(...diffResult.LEAKED); // 对泄漏节点进行向后累积
|
||||
this.renderer.build(renderModelList); // 首先在离屏canvas渲染先
|
||||
this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels, diffResult.LEAKED); // 进行布局（设置model的x，y，样式等）
|
||||
this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels); // 进行布局（设置model的x，y，样式等）
|
||||
|
||||
this.beforeRender();
|
||||
this.renderer.render(renderModelList); // 渲染视图
|
||||
this.reconcile.patch(diffResult); // 对视图上的某些变化进行对应的动作，比如：节点创建动画，节点消失动画等
|
||||
this.reconcile.patch(diffResult, handleUpdate); // 对视图上的某些变化进行对应的动作，比如：节点创建动画，节点消失动画等
|
||||
this.afterRender();
|
||||
|
||||
this.accumulateLeakModels.push(...diffResult.LEAKED); // 对泄漏节点进行累积
|
||||
|
||||
this.layoutGroupTable = layoutGroupTable;
|
||||
this.prevModelList = modelList;
|
||||
}
|
||||
@ -193,10 +352,8 @@ export class ViewContainer {
|
||||
this.brushSelectedModels.length = 0;
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
|
||||
/**
|
||||
* 把渲染后要触发的逻辑放在这里
|
||||
*/
|
||||
@ -211,16 +368,5 @@ export class ViewContainer {
|
||||
/**
|
||||
* 把渲染前要触发的逻辑放在这里
|
||||
*/
|
||||
private beforeRender() { }
|
||||
private beforeRender() {}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Sources } from "./sources";
|
||||
import { handleUpdate, Sources } from "./sources";
|
||||
import { LayoutGroupTable, ModelConstructor } from "./Model/modelConstructor";
|
||||
import { AnimationOptions, BehaviorOptions, EngineOptions, LayoutGroupOptions, ViewOptions } from "./options";
|
||||
import { EventBus } from "./Common/eventBus";
|
||||
@ -6,6 +6,7 @@ import { ViewContainer } from "./View/viewContainer";
|
||||
import { SVNode } from "./Model/SVNode";
|
||||
import { Util } from "./Common/util";
|
||||
import { SVModel } from "./Model/SVModel";
|
||||
import { G6Event } from "@antv/g6";
|
||||
|
||||
|
||||
export class Engine {
|
||||
@ -49,9 +50,10 @@ export class Engine {
|
||||
/**
|
||||
* 输入数据进行渲染
|
||||
* @param sources
|
||||
* @param force
|
||||
* @param prevStep
|
||||
*/
|
||||
public render(source: Sources) {
|
||||
<<<<<<< HEAD
|
||||
if (source === undefined || source === null) {
|
||||
return;
|
||||
}
|
||||
@ -59,15 +61,36 @@ export class Engine {
|
||||
let stringSource = JSON.stringify(source);
|
||||
if (this.prevStringSource === stringSource) {
|
||||
return;
|
||||
=======
|
||||
let isSameSources: boolean = false,
|
||||
layoutGroupTable: LayoutGroupTable;
|
||||
|
||||
if (source === undefined || source === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let handleUpdate: handleUpdate = source.handleUpdate,
|
||||
stringSource = JSON.stringify(source);
|
||||
|
||||
if (this.prevStringSource === stringSource) {
|
||||
isSameSources = true;
|
||||
>>>>>>> eac9d007bcc1b52fe573ddf6cb97030c9b2d3a6d
|
||||
}
|
||||
|
||||
this.prevStringSource = stringSource;
|
||||
|
||||
|
||||
if(isSameSources) {
|
||||
// 若源数据两次一样的，用回上一次的layoutGroupTable
|
||||
layoutGroupTable = this.modelConstructor.getLayoutGroupTable();
|
||||
}
|
||||
else {
|
||||
// 1 转换模型（data => model）
|
||||
const layoutGroupTable = this.modelConstructor.construct(source);
|
||||
layoutGroupTable = this.modelConstructor.construct(source);
|
||||
}
|
||||
|
||||
// 2 渲染（使用g6进行渲染）
|
||||
this.viewContainer.render(layoutGroupTable);
|
||||
this.viewContainer.render(layoutGroupTable, isSameSources, handleUpdate);
|
||||
}
|
||||
|
||||
|
||||
@ -192,7 +215,7 @@ export class Engine {
|
||||
return;
|
||||
}
|
||||
|
||||
this.viewContainer.getG6Instance().on(eventName, event => {
|
||||
this.viewContainer.getG6Instance().on(eventName as G6Event, event => {
|
||||
callback(event.item['SVModel']);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
// 连接目标信息
|
||||
export type LinkTarget = number | string;
|
||||
|
||||
@ -14,13 +13,15 @@ export interface SourceNode {
|
||||
[key: string]: any | sourceLinkData | sourceMarkerData;
|
||||
}
|
||||
|
||||
export interface handleUpdate {
|
||||
isEnterFunction: boolean;
|
||||
isFirstDebug: boolean;
|
||||
}
|
||||
|
||||
export type Sources = {
|
||||
[key: string]: {
|
||||
data: SourceNode[];
|
||||
layouter: string;
|
||||
}
|
||||
};
|
||||
handleUpdate?: handleUpdate | any;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
"compilerOptions": {
|
||||
"target": "ES2015",
|
||||
"module": "commonJS",
|
||||
"removeComments": true
|
||||
"removeComments": true,
|
||||
"lib": ["DOM", "ES2015", "ES2016", "ES2017"]
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: './src/StructV.ts',
|
||||
output: {
|
||||
filename: './sv.js',
|
||||
@ -17,6 +17,5 @@ module.exports = {
|
||||
loader: 'ts-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
// devtool: 'eval-source-map'
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user