feature：添加泄漏区功能部分
This commit is contained in:
黎智洲
parent
7e6789c8de
commit
4c1510da1f
@ -8,7 +8,7 @@ class Arrays extends Engine {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'rect',
|
||||
type: 'indexed-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
@ -31,27 +31,26 @@ class Arrays extends Engine {
|
||||
};
|
||||
}
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let arr = elements.default;
|
||||
layout(elements) {
|
||||
let arr = elements,
|
||||
width = arr[0].get('size')[0];
|
||||
|
||||
for(let i = 0; i < arr.length; i++) {
|
||||
let width = arr[i].get('size')[0];
|
||||
|
||||
if(i > 0) {
|
||||
arr[i].set('x', arr[i - 1].get('x') + width);
|
||||
}
|
||||
arr[i].set('x', i * width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const A = function(container) {
|
||||
return{
|
||||
engine: new Arrays(container),
|
||||
data: [[
|
||||
{ id: 1, external: 'A' },
|
||||
{ id: 2 },
|
||||
{ id: 3 },
|
||||
{ id: 1, index: 0 },
|
||||
{ id: 2, index: 1 },
|
||||
{ id: 3, index: 2 },
|
||||
{ id: 4 },
|
||||
{ id: 5 },
|
||||
{ id: 6 },
|
||||
@ -66,7 +65,8 @@ const A = function(container) {
|
||||
{ id: 3 },
|
||||
{ id: 6, external: 'A' },
|
||||
{ id: 7 },
|
||||
{ id: 8 }
|
||||
{ id: 8 },
|
||||
{ id: 12 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
@ -27,10 +27,7 @@ class BinaryTree extends Engine {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
@ -130,7 +127,7 @@ class BinaryTree extends Engine {
|
||||
* @param {*} layoutOptions
|
||||
*/
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements.default,
|
||||
let nodes = elements,
|
||||
rootNodes = [],
|
||||
node,
|
||||
root,
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let headNode = elements.head;
|
||||
let headNode = elements.filter(item => item.type === 'head');
|
||||
|
||||
for(let i = 0; i < headNode.length; i++) {
|
||||
let node = headNode[i],
|
||||
@ -128,9 +128,9 @@
|
||||
}
|
||||
|
||||
|
||||
const CHT = function(container) {
|
||||
const CHT = function(container, options) {
|
||||
return{
|
||||
engine: new ChainHashTable(container),
|
||||
engine: new ChainHashTable(container, options),
|
||||
data: [
|
||||
{
|
||||
head: [{
|
||||
@ -153,7 +153,26 @@ const CHT = function(container) {
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
||||
head: [{
|
||||
id: 0,
|
||||
start: 'node#0'
|
||||
}, {
|
||||
id: 2,
|
||||
start: 'node#2'
|
||||
}, {
|
||||
id: 3,
|
||||
start: 'node#4'
|
||||
}],
|
||||
node: [{
|
||||
id: 0,
|
||||
next: 1
|
||||
}, {
|
||||
id: 1
|
||||
},{
|
||||
id: 2
|
||||
},{
|
||||
id: 4
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
215
demo/dataStruct/GeneralizedList.js
Normal file
215
demo/dataStruct/GeneralizedList.js
Normal file
@ -0,0 +1,215 @@
|
||||
|
||||
|
||||
SV.registerShape('three-cell-node', {
|
||||
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: '#eee'
|
||||
},
|
||||
name: 'wrapper',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
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: '#eee',
|
||||
stroke: cfg.style.stroke
|
||||
},
|
||||
name: 'mid-rect',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (2 / 3),
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label,
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
});
|
||||
}
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0, 0.5],
|
||||
[0.5, 0.5],
|
||||
[0.5, 0],
|
||||
[5 / 6, 0.5]
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
class GeneralizedList extends Engine {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
tableNode: {
|
||||
type: 'three-cell-node',
|
||||
label: '[tag]',
|
||||
size: [90, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
},
|
||||
atomNode: {
|
||||
type: 'two-cell-node',
|
||||
label: '[tag]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
sub: {
|
||||
type: 'line',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 2,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 3,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 20,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
let [width, height] = node.get('size');
|
||||
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width)
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
|
||||
// 存在子节点
|
||||
if(node.sub) {
|
||||
node.sub.set('y', node.get('y') + layoutOptions.yInterval + height);
|
||||
|
||||
// 子结点还是广义表
|
||||
if(node.sub.tag === 1) {
|
||||
node.sub.set('x', node.get('x'));
|
||||
this.layoutItem(node.sub, null, layoutOptions);
|
||||
}
|
||||
else {
|
||||
let subWidth = node.sub.get('size')[0];
|
||||
node.sub.set('x', node.get('x') + width - subWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let tableNodes = elements.tableNode,
|
||||
tableRootNode = null;
|
||||
|
||||
for(let i = 0; i < tableNodes.length; i++) {
|
||||
if(tableNodes[i].root) {
|
||||
tableRootNode = tableNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(tableRootNode) {
|
||||
this.layoutItem(tableRootNode, null, layoutOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const GL = function(container) {
|
||||
return{
|
||||
engine: new GeneralizedList(container),
|
||||
data: [{
|
||||
"atomNode": [],
|
||||
"tableNode": [
|
||||
{
|
||||
"id": 6385328,
|
||||
"tag": 1,
|
||||
"root": true,
|
||||
"external": [
|
||||
"gl"
|
||||
]
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
};
|
||||
@ -1,94 +1,95 @@
|
||||
|
||||
|
||||
G6.registerNode('link-Queue-head', {
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size || [30, 10];
|
||||
// G6.registerNode('link-Queue-head', {
|
||||
// draw(cfg, group) {
|
||||
// cfg.size = cfg.size || [30, 10];
|
||||
|
||||
const width = cfg.size[0],
|
||||
height = cfg.size[1];
|
||||
// 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: 'transparent'
|
||||
},
|
||||
name: 'wrapper'
|
||||
});
|
||||
// const wrapperRect = group.addShape('rect', {
|
||||
// attrs: {
|
||||
// x: width / 2,
|
||||
// y: height / 2,
|
||||
// width: width,
|
||||
// height: height,
|
||||
// stroke: cfg.style.stroke,
|
||||
// fill: 'transparent'
|
||||
// },
|
||||
// name: 'wrapper'
|
||||
// });
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height / 2,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke
|
||||
},
|
||||
name: 'top-rect'
|
||||
});
|
||||
// group.addShape('rect', {
|
||||
// attrs: {
|
||||
// x: width / 2,
|
||||
// y: height / 2,
|
||||
// width: width,
|
||||
// height: height / 2,
|
||||
// fill: cfg.style.fill,
|
||||
// stroke: cfg.style.stroke
|
||||
// },
|
||||
// name: 'top-rect'
|
||||
// });
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height,
|
||||
width: width,
|
||||
height: height / 2,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke
|
||||
},
|
||||
name: 'bottom-rect'
|
||||
});
|
||||
// group.addShape('rect', {
|
||||
// attrs: {
|
||||
// x: width / 2,
|
||||
// y: height,
|
||||
// width: width,
|
||||
// height: height / 2,
|
||||
// fill: cfg.style.fill,
|
||||
// stroke: cfg.style.stroke
|
||||
// },
|
||||
// name: 'bottom-rect'
|
||||
// });
|
||||
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height * (3 / 4),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: 'front',
|
||||
fill: '#000',
|
||||
fontSize: 16
|
||||
},
|
||||
name: 'front'
|
||||
});
|
||||
// group.addShape('text', {
|
||||
// attrs: {
|
||||
// x: width,
|
||||
// y: height * (3 / 4),
|
||||
// textAlign: 'center',
|
||||
// textBaseline: 'middle',
|
||||
// text: 'front',
|
||||
// fill: '#000',
|
||||
// fontSize: 16
|
||||
// },
|
||||
// name: 'front'
|
||||
// });
|
||||
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height * (5 / 4),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: 'rear',
|
||||
fill: '#000',
|
||||
fontSize: 16
|
||||
},
|
||||
name: 'rear'
|
||||
});
|
||||
// group.addShape('text', {
|
||||
// attrs: {
|
||||
// x: width,
|
||||
// y: height * (5 / 4),
|
||||
// textAlign: 'center',
|
||||
// textBaseline: 'middle',
|
||||
// text: 'rear',
|
||||
// fill: '#000',
|
||||
// fontSize: 16
|
||||
// },
|
||||
// name: 'rear'
|
||||
// });
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
// return wrapperRect;
|
||||
// },
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[1, 0.25],
|
||||
[1, 0.75]
|
||||
];
|
||||
}
|
||||
});
|
||||
// getAnchorPoints() {
|
||||
// return [
|
||||
// [1, 0.25],
|
||||
// [1, 0.75]
|
||||
// ];
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
class LinkQueue extends Engine {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
head: {
|
||||
type: 'link-Queue-head',
|
||||
label: '[id]',
|
||||
size: [60, 80],
|
||||
type: 'rect',
|
||||
label: '[label]',
|
||||
size: [60, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
@ -106,9 +107,9 @@ G6.registerNode('link-Queue-head', {
|
||||
},
|
||||
link: {
|
||||
front: {
|
||||
type: 'line',
|
||||
sourceAnchor: 0,
|
||||
targetAnchor: 0,
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
@ -120,7 +121,7 @@ G6.registerNode('link-Queue-head', {
|
||||
rear: {
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 3,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
@ -157,10 +158,16 @@ G6.registerNode('link-Queue-head', {
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
interaction: {
|
||||
dragNode: ['node']
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
sources.head[1].external = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
@ -186,51 +193,56 @@ G6.registerNode('link-Queue-head', {
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let head = elements.head[0];
|
||||
let head1 = elements.head[0],
|
||||
head2 = elements.head[1],
|
||||
nodes = elements.node,
|
||||
headHeight = head1.get('size')[1];
|
||||
|
||||
let roots = nodes.filter(item => item.root).reverse();
|
||||
|
||||
if(head.front) {
|
||||
let d = head.get('size')[1] / 2 - head.front.get('size')[1],
|
||||
x = layoutOptions.xInterval * 2.5,
|
||||
y = head.front.get('size')[1] / 2 + 1.5 * d;
|
||||
for(let i = 0; i < roots.length; i++) {
|
||||
let root = roots[i],
|
||||
height = root.get('size')[1];
|
||||
|
||||
head.front.set({ x, y });
|
||||
root.set('y', root.get('y') + i * (layoutOptions.yInterval + height));
|
||||
this.layoutItem(root, null, layoutOptions);
|
||||
}
|
||||
|
||||
if(head.front.next) {
|
||||
this.layoutItem(head.front.next, head.front, layoutOptions);
|
||||
}
|
||||
let x = -50, y = roots.length? roots[roots.length - 1].get('y'): 0,
|
||||
nodeHeight = roots.length? roots[roots.length - 1].get('size')[1]: 0;
|
||||
|
||||
head1.set({ x, y: y + nodeHeight * 3 });
|
||||
head2.set({ x, y: head1.get('y') + headHeight });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const data = {
|
||||
head: [
|
||||
{
|
||||
"type": "QPtr",
|
||||
"id": 140737338526359,
|
||||
"label": "front",
|
||||
"front": "node#8358681150976310000",
|
||||
"external": [
|
||||
"lq"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "QPtr",
|
||||
"id": 140737338526360,
|
||||
"label": "rear",
|
||||
"rear": "node#15844482482171916",
|
||||
"external": null
|
||||
}
|
||||
],
|
||||
node: []
|
||||
}
|
||||
|
||||
|
||||
const LQueue = function(container) {
|
||||
return{
|
||||
engine: new LinkQueue(container),
|
||||
data: [{
|
||||
head: [{
|
||||
type: "QPtr",
|
||||
id: 44,
|
||||
front: 'node#1',
|
||||
rear: 'node#13'
|
||||
}],
|
||||
node: [
|
||||
{
|
||||
id: 1,
|
||||
next: 12,
|
||||
root: true
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
next: 13
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
next: null
|
||||
}
|
||||
]
|
||||
}]
|
||||
data: [data]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ class LinkList extends Engine {
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
fill: '#eaffd0'
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -24,10 +24,7 @@ class LinkList extends Engine {
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
@ -41,10 +38,7 @@ class LinkList extends Engine {
|
||||
targetAnchor: 3,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(6, 6, -2),
|
||||
fill: '#333'
|
||||
},
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
@ -92,7 +86,7 @@ class LinkList extends Engine {
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements.default,
|
||||
let nodes = elements,
|
||||
rootNodes = [],
|
||||
node,
|
||||
i;
|
||||
@ -116,9 +110,9 @@ class LinkList extends Engine {
|
||||
}
|
||||
|
||||
|
||||
const LList = function(container) {
|
||||
const LList = function(container, options) {
|
||||
return{
|
||||
engine: new LinkList(container),
|
||||
engine: new LinkList(container, options),
|
||||
data: [[
|
||||
{ id: 1, root: true, next: 2, external: ['gg'] },
|
||||
{ id: 2, next: 3 },
|
||||
@ -129,15 +123,19 @@ const LList = function(container) {
|
||||
{ id: 7, next: 8 },
|
||||
{ id: 8, next: 4 },
|
||||
{ id: 9, root: true, next: 10 },
|
||||
{ id: 10 }
|
||||
{ id: 10, free: true }
|
||||
],
|
||||
[
|
||||
{ id: 1, root: true, next: 2, external: ['gg'] },
|
||||
{ id: 1, root: true, next: 2 },
|
||||
{ id: 2, next: 3 },
|
||||
{ id: 3, next: 6 },
|
||||
{ id: 6, next: 7 },
|
||||
{ id: 7, next: 8 },
|
||||
{ id: 8 }
|
||||
{ id: 3, next: 8, external: ['gg'] },
|
||||
{ id: 8, next: 12 },
|
||||
{ id: 12, next: 13 },
|
||||
{ id: 13 }
|
||||
],
|
||||
[
|
||||
{ id: 1, root: true, next: 2 },
|
||||
{ id: 2 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
|
||||
@ -14,7 +14,28 @@
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
height: 400px;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.down {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#freed {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fafafa;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
#leak {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
@ -22,12 +43,19 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container" id="container"></div>
|
||||
|
||||
<button id="btn">change</button>
|
||||
<button id="btn-next">reLayout</button>
|
||||
<button id="btn-set">set</button>
|
||||
<span id="pos"></span>
|
||||
|
||||
<div class="down">
|
||||
<div id="freed"></div>
|
||||
<div id="leak"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
@ -40,7 +68,9 @@ const Engine = SV.Engine,
|
||||
|
||||
</script>
|
||||
<script src="./dataStruct/BinaryTree.js"></script>
|
||||
|
||||
<script src="./dataStruct/LinkList.js"></script>
|
||||
|
||||
<script src="./dataStruct/Array.js"></script>
|
||||
<script src="./dataStruct/ChainHashTable.js"></script>
|
||||
<script src="./dataStruct/Stack.js"></script>
|
||||
@ -49,16 +79,34 @@ const Engine = SV.Engine,
|
||||
<script src="./dataStruct/Graph.js"></script>
|
||||
<script src="./dataStruct/DirectedGraph.js"></script>
|
||||
<script src="./dataStruct/RingArray.js"></script>
|
||||
<script src="./dataStruct/GeneralizedList.js"></script>
|
||||
<script>
|
||||
|
||||
const engines = [BTree, LList, A, CHT, St, LStack, LQueue, G, DG, RA];
|
||||
const engines = {
|
||||
0: BTree,
|
||||
1: LList,
|
||||
2: A,
|
||||
3: CHT,
|
||||
4: St,
|
||||
5: LStack,
|
||||
6: LQueue,
|
||||
7: G,
|
||||
8: DG,
|
||||
9: RA,
|
||||
10: GL
|
||||
};
|
||||
|
||||
let cur = engines[9](document.getElementById('container'));
|
||||
let dataCounter = 0;
|
||||
|
||||
cur.engine.render(cur.data[0]);
|
||||
let cur = engines[3](document.getElementById('container'), {
|
||||
freedContainer: document.getElementById('freed'),
|
||||
leakContainer: document.getElementById('leak')
|
||||
});
|
||||
|
||||
cur.engine.render(cur.data[dataCounter]);
|
||||
|
||||
document.getElementById('btn').addEventListener('click', e => {
|
||||
cur.engine.render(cur.data[1]);
|
||||
cur.engine.render(cur.data[++dataCounter]);
|
||||
});
|
||||
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
@ -82,6 +130,9 @@ container.addEventListener('mousemove', e => {
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2
dist/sv.js
vendored
2
dist/sv.js
vendored
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
import { Engine } from "../engine";
|
||||
import { Util } from "./../Common/util";
|
||||
import { Util } from "../Common/util";
|
||||
|
||||
export class Behavior {
|
||||
private engine: Engine;
|
||||
@ -10,10 +10,11 @@ export class Behavior {
|
||||
this.graphInstance = graphInstance;
|
||||
|
||||
const interactionOptions = this.engine.interactionOptions,
|
||||
selectNode: boolean | string[] = interactionOptions.selectNode;
|
||||
selectNode: boolean | string[] = interactionOptions.selectNode,
|
||||
dragNode: boolean | string[] = interactionOptions.dragNode;
|
||||
|
||||
if(interactionOptions.dragNode) {
|
||||
this.initDragNode();
|
||||
this.initDragNode(dragNode);
|
||||
}
|
||||
|
||||
if(interactionOptions.selectNode) {
|
||||
@ -24,7 +25,7 @@ export class Behavior {
|
||||
/**
|
||||
* 初始化节点拖拽事件
|
||||
*/
|
||||
private initDragNode() {
|
||||
private initDragNode(dragNode: boolean | string[]) {
|
||||
let pointer = null,
|
||||
pointerX = null,
|
||||
pointerY = null,
|
||||
@ -32,7 +33,17 @@ export class Behavior {
|
||||
dragStartY = null;
|
||||
|
||||
this.graphInstance.on('node:dragstart', ev => {
|
||||
pointer = this.graphInstance.findById(ev.item.getModel().externalPointerId);
|
||||
if(dragNode === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
let model = ev.item.getModel();
|
||||
|
||||
if(Array.isArray(dragNode) && dragNode.find(item => item === model.modelName) === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
pointer = this.graphInstance.findById(model.externalPointerId);
|
||||
|
||||
if(pointer) {
|
||||
pointerX = pointer.getModel().x,
|
||||
@ -90,6 +101,10 @@ export class Behavior {
|
||||
return;
|
||||
}
|
||||
|
||||
if(model.isDynamic) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(curSelectItem && curSelectItem !== item) {
|
||||
curSelectItem.update({
|
||||
style: curSelectItemStyle
|
||||
@ -128,8 +143,12 @@ export class Behavior {
|
||||
* @param callback
|
||||
*/
|
||||
public on(eventName: string, callback: Function) {
|
||||
if(this.graphInstance) {
|
||||
this.graphInstance.on(eventName, callback)
|
||||
if(this.graphInstance === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.graphInstance.on(eventName, evt => {
|
||||
callback(evt.item);
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import { Vector } from "../Common/vector";
|
||||
import { Vector } from "./vector";
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Util } from "../Common/util";
|
||||
import { BoundingRect, Bound } from "../View/boundingRect";
|
||||
import { Vector } from "../Common/vector";
|
||||
import { Util } from "./util";
|
||||
import { BoundingRect, Bound } from "./boundingRect";
|
||||
import { Vector } from "./vector";
|
||||
import { Element } from "../Model/modelData";
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { ConstructedData } from "../Model/modelConstructor";
|
||||
import { ConstructList } from "../Model/modelConstructor";
|
||||
import { G6EdgeModel, G6NodeModel, Link, Model } from "../Model/modelData";
|
||||
import { SV } from "../StructV";
|
||||
import { G6Data } from "../View/renderer";
|
||||
|
||||
@ -8,7 +9,6 @@ import { G6Data } from "../View/renderer";
|
||||
*/
|
||||
export const Util = {
|
||||
|
||||
|
||||
/**
|
||||
* 生成唯一id
|
||||
*/
|
||||
@ -78,28 +78,39 @@ export const Util = {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param constructedDataType
|
||||
* @param constructListType
|
||||
* @returns
|
||||
*/
|
||||
converterList(constructedDataType: ConstructedData[keyof ConstructedData]) {
|
||||
return [].concat(...Object.keys(constructedDataType).map(item => constructedDataType[item]));
|
||||
converterList(modelContainer: { [key: string]: ConstructList[keyof ConstructList]}) {
|
||||
return [].concat(...Object.keys(modelContainer).map(item => modelContainer[item]));
|
||||
},
|
||||
|
||||
/**
|
||||
* G6 data 转换器
|
||||
* @param constructedData
|
||||
* @param constructList
|
||||
* @returns
|
||||
*/
|
||||
convertG6Data(constructedData: ConstructedData): G6Data {
|
||||
let nodes = [...Util.converterList(constructedData.element), ...Util.converterList(constructedData.pointer)],
|
||||
edges = Util.converterList(constructedData.link);
|
||||
convertG6Data(constructList: ConstructList): G6Data {
|
||||
let nodes = [...constructList.element, ...constructList.pointer],
|
||||
edges = constructList.link;
|
||||
|
||||
return {
|
||||
nodes: nodes.map(item => item.cloneProps()),
|
||||
edges: edges.map(item => item.cloneProps())
|
||||
nodes: nodes.map(item => item.cloneProps()) as G6NodeModel[],
|
||||
edges: edges.map(item => item.cloneProps()) as G6EdgeModel[]
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 将 modelList 转换到 G6Data
|
||||
* @param modelList
|
||||
*/
|
||||
convertModelList2G6Data(modelList: Model[]): G6Data {
|
||||
return {
|
||||
nodes: <G6NodeModel[]>(modelList.filter(item => !(item instanceof Link)).map(item => item.cloneProps())),
|
||||
edges: <G6EdgeModel[]>(modelList.filter(item => item instanceof Link).map(item => item.cloneProps()))
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算旋转矩阵
|
||||
* @param matrix
|
||||
|
||||
@ -1,72 +1,74 @@
|
||||
import { Util } from "../Common/util";
|
||||
import { Engine } from "../engine";
|
||||
import { LinkOption, PointerOption } from "../options";
|
||||
import { sourceLinkData, SourceElement, Sources, LinkTarget } from "../sources";
|
||||
import { sourceLinkData, SourceElement, LinkTarget } from "../sources";
|
||||
import { Element, Link, Pointer } from "./modelData";
|
||||
|
||||
|
||||
export interface ConstructedData {
|
||||
element: { [key: string]: Element[] };
|
||||
link: { [key: string]: Link[] };
|
||||
pointer: { [key: string]: Pointer[] };
|
||||
export interface ConstructList {
|
||||
element: Element[];
|
||||
link: Link[];
|
||||
pointer: Pointer[];
|
||||
};
|
||||
|
||||
|
||||
export class ModelConstructor {
|
||||
private engine: Engine;
|
||||
private constructedData: ConstructedData;
|
||||
private constructList: ConstructList;
|
||||
|
||||
constructor(engine: Engine) {
|
||||
this.engine = engine;
|
||||
this.constructedData = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建element，link和pointer
|
||||
* @param sourceData
|
||||
* @param sourceList
|
||||
*/
|
||||
public construct(sourceData: Sources): ConstructedData {
|
||||
let elementContainer = this.constructElements(sourceData),
|
||||
public construct(sourceList: SourceElement[]): ConstructList {
|
||||
let elementContainer = this.constructElements(sourceList),
|
||||
linkContainer = this.constructLinks(this.engine.linkOptions, elementContainer),
|
||||
pointerContainer = this.constructPointers(this.engine.pointerOptions, elementContainer);
|
||||
|
||||
this.constructedData = {
|
||||
element: elementContainer,
|
||||
link: linkContainer,
|
||||
pointer: pointerContainer
|
||||
};
|
||||
|
||||
return this.constructedData;
|
||||
this.constructList = {
|
||||
element: Util.converterList(elementContainer),
|
||||
link: Util.converterList(linkContainer),
|
||||
pointer: Util.converterList(pointerContainer)
|
||||
};
|
||||
|
||||
return this.constructList;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
public getConstructList(): ConstructList {
|
||||
return this.constructList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从源数据构建 element 集
|
||||
* @param sourceData
|
||||
* @param sourceList
|
||||
*/
|
||||
private constructElements(sourceData: Sources): { [key: string]: Element[] } {
|
||||
let defaultElementName: string = 'default',
|
||||
private constructElements(sourceList: SourceElement[]): { [key: string]: Element[] } {
|
||||
let defaultElementType: string = 'default',
|
||||
elementContainer: { [key: string]: Element[] } = { };
|
||||
|
||||
if(Array.isArray(sourceData)) {
|
||||
elementContainer[defaultElementName] = [];
|
||||
sourceData.forEach(item => {
|
||||
if(item) {
|
||||
let ele = this.createElement(item, defaultElementName);
|
||||
elementContainer[defaultElementName].push(ele);
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
Object.keys(sourceData).forEach(prop => {
|
||||
elementContainer[prop] = [];
|
||||
sourceData[prop].forEach(item => {
|
||||
if(item) {
|
||||
let element = this.createElement(item, prop);
|
||||
elementContainer[prop].push(element);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
sourceList.forEach(item => {
|
||||
if(item === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(item.type === undefined || item.type === null) {
|
||||
item.type = defaultElementType;
|
||||
}
|
||||
|
||||
if(elementContainer[item.type] === undefined) {
|
||||
elementContainer[item.type] = [];
|
||||
}
|
||||
|
||||
elementContainer[item.type].push(this.createElement(item, item.type));
|
||||
});
|
||||
|
||||
return elementContainer;
|
||||
}
|
||||
@ -179,7 +181,7 @@ export class ModelConstructor {
|
||||
label = elementOption.label? this.parserElementContent(sourceElement, elementOption.label): '',
|
||||
id = elementName + '.' + sourceElement.id.toString();
|
||||
|
||||
if(label === null || label === undefined) {
|
||||
if(label === null || label === 'undefined') {
|
||||
label = '';
|
||||
}
|
||||
|
||||
@ -256,7 +258,7 @@ export class ModelConstructor {
|
||||
element: Element,
|
||||
linkTarget: LinkTarget
|
||||
): Element {
|
||||
let elementName = element.modelName,
|
||||
let elementName = element.getType(),
|
||||
elementList: Element[],
|
||||
targetId = linkTarget,
|
||||
targetElement = null;
|
||||
@ -285,4 +287,11 @@ export class ModelConstructor {
|
||||
targetElement = elementList.find(item => item.sourceId === targetId);
|
||||
return targetElement || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
destroy() {
|
||||
this.constructList = null;
|
||||
}
|
||||
};
|
||||
@ -1,7 +1,7 @@
|
||||
import { Util } from "../Common/util";
|
||||
import { ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, PointerOption, Style } from "../options";
|
||||
import { SourceElement } from "../sources";
|
||||
import { BoundingRect } from "../View/boundingRect";
|
||||
import { BoundingRect } from "../Common/boundingRect";
|
||||
import { SV } from './../StructV';
|
||||
|
||||
|
||||
@ -17,8 +17,8 @@ export interface G6NodeModel {
|
||||
style: Style;
|
||||
labelCfg: ElementLabelOption;
|
||||
externalPointerId: string;
|
||||
modelType: string;
|
||||
modelName: string;
|
||||
SVModelType: string;
|
||||
SVModelName: string;
|
||||
};
|
||||
|
||||
|
||||
@ -27,29 +27,29 @@ export interface G6EdgeModel {
|
||||
source: string | number;
|
||||
target: string | number;
|
||||
type: string;
|
||||
controlPoints: { x: number, y: number }[];
|
||||
curveOffset: number;
|
||||
sourceAnchor: number | ((index: number) => number);
|
||||
targetAnchor: number | ((index: number) => number);
|
||||
label: string;
|
||||
style: Style;
|
||||
labelCfg: LinkLabelOption;
|
||||
SVModelType: string;
|
||||
SVModelName: string;
|
||||
};
|
||||
|
||||
|
||||
export class Model {
|
||||
id: string;
|
||||
modelName: string;
|
||||
modelType: string;
|
||||
|
||||
type: string;
|
||||
|
||||
props: G6NodeModel | G6EdgeModel;
|
||||
shadowG6Item;
|
||||
renderG6Item;
|
||||
G6Item;
|
||||
|
||||
constructor(id: string, name: string) {
|
||||
constructor(id: string, type: string) {
|
||||
this.id = id;
|
||||
this.modelName = name;
|
||||
this.type = type;
|
||||
this.shadowG6Item = null;
|
||||
this.renderG6Item = null;
|
||||
this.G6Item = null;
|
||||
@ -61,7 +61,7 @@ export class Model {
|
||||
* 定义 G6 model 的属性
|
||||
* @param option
|
||||
*/
|
||||
protected defineProps(option: ElementOption | LinkOption | PointerOption): G6NodeModel | G6EdgeModel {
|
||||
protected defineProps(option: ElementOption | LinkOption | PointerOption) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -77,9 +77,8 @@ export class Model {
|
||||
* 克隆 G6 model 的属性
|
||||
* @returns
|
||||
*/
|
||||
cloneProps(): G6NodeModel | G6EdgeModel {
|
||||
cloneProps() {
|
||||
return Util.objectClone(this.props);
|
||||
// return this.props;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -150,15 +149,17 @@ export class Model {
|
||||
*/
|
||||
getMatrix(): number[] {
|
||||
if(this.G6Item === null) return null;
|
||||
// return this.G6Item.getContainer().getMatrix();
|
||||
const Mat3 = SV.G6.Util.mat3;
|
||||
return Mat3.create();
|
||||
}
|
||||
|
||||
getType(): string {
|
||||
return this.type;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class Element extends Model {
|
||||
modelType = 'element';
|
||||
sourceElement: SourceElement;
|
||||
sourceId: string;
|
||||
free: boolean;
|
||||
@ -166,6 +167,12 @@ export class Element extends Model {
|
||||
constructor(id: string, type: string, sourceElement: SourceElement) {
|
||||
super(id, type);
|
||||
|
||||
if(type === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.free = false;
|
||||
|
||||
Object.keys(sourceElement).map(prop => {
|
||||
if(prop !== 'id') {
|
||||
this[prop] = sourceElement[prop];
|
||||
@ -173,11 +180,12 @@ export class Element extends Model {
|
||||
});
|
||||
|
||||
this.sourceId = this.id.split('.')[1];
|
||||
this.free = false;
|
||||
this.sourceElement = sourceElement;
|
||||
}
|
||||
|
||||
protected defineProps(option: ElementOption) {
|
||||
protected defineProps(option: ElementOption): G6NodeModel {
|
||||
return {
|
||||
...this.sourceElement,
|
||||
id: this.id,
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -185,12 +193,12 @@ export class Element extends Model {
|
||||
type: option.type,
|
||||
size: option.size,
|
||||
anchorPoints: option.anchorPoint,
|
||||
label: null,
|
||||
label: option.label,
|
||||
style: Util.objectClone<Style>(option.style),
|
||||
labelCfg: Util.objectClone<ElementLabelOption>(option.labelOptions),
|
||||
externalPointerId: null,
|
||||
modelType: this.modelType,
|
||||
modelName: this.modelName
|
||||
SVModelType: 'element',
|
||||
SVModelName: this.type
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -198,7 +206,6 @@ export class Element extends Model {
|
||||
|
||||
|
||||
export class Link extends Model {
|
||||
modelType = 'link';
|
||||
element: Element;
|
||||
target: Element;
|
||||
index: number;
|
||||
@ -211,7 +218,7 @@ export class Link extends Model {
|
||||
}
|
||||
|
||||
|
||||
protected defineProps(option: LinkOption) {
|
||||
protected defineProps(option: LinkOption): G6EdgeModel {
|
||||
let sourceAnchor = option.sourceAnchor,
|
||||
targetAnchor = option.targetAnchor;
|
||||
|
||||
@ -233,11 +240,9 @@ export class Link extends Model {
|
||||
label: option.label,
|
||||
style: Util.objectClone<Style>(option.style),
|
||||
labelCfg: Util.objectClone<LinkLabelOption>(option.labelOptions),
|
||||
controlPoints: option.controlPoints,
|
||||
curveOffset: option.curveOffset,
|
||||
modelType: this.modelType,
|
||||
modelName: this.modelName,
|
||||
zIndex: 20
|
||||
SVModelType: 'link',
|
||||
SVModelName: this.type
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -245,7 +250,6 @@ export class Link extends Model {
|
||||
|
||||
|
||||
export class Pointer extends Model {
|
||||
modelType = 'pointer';
|
||||
target: Element;
|
||||
label: string | string[];
|
||||
|
||||
@ -254,11 +258,10 @@ export class Pointer extends Model {
|
||||
this.target = target;
|
||||
this.label = label;
|
||||
|
||||
this.target.set('externalPointerId',
|
||||
id);
|
||||
this.target.set('externalPointerId', id);
|
||||
}
|
||||
|
||||
protected defineProps(option: ElementOption) {
|
||||
protected defineProps(option: ElementOption): G6NodeModel {
|
||||
return {
|
||||
id: this.id,
|
||||
x: 0,
|
||||
@ -271,8 +274,8 @@ export class Pointer extends Model {
|
||||
style: Util.objectClone<Style>(option.style),
|
||||
labelCfg: Util.objectClone<ElementLabelOption>(option.labelOptions),
|
||||
externalPointerId: null,
|
||||
modelType: this.modelType,
|
||||
modelName: this.modelName
|
||||
SVModelType: 'pointer',
|
||||
SVModelName: this.type
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -14,7 +14,7 @@ export default G6.registerNode('binary-tree-node', {
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor,
|
||||
fill: '#eee'
|
||||
},
|
||||
@ -28,7 +28,7 @@ export default G6.registerNode('binary-tree-node', {
|
||||
width: width / 2,
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor
|
||||
},
|
||||
name: 'mid',
|
||||
|
||||
58
src/RegisteredShape/indexedNode.ts
Normal file
58
src/RegisteredShape/indexedNode.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import * as G6 from "./../Lib/g6.js";
|
||||
|
||||
|
||||
export default G6.registerNode('indexed-node', {
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size || [30, 10];
|
||||
|
||||
const width = cfg.size[0],
|
||||
height = cfg.size[1],
|
||||
disable = cfg.disable === undefined? false: cfg.disable;
|
||||
|
||||
const rect = group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
fill: disable? '#ccc': cfg.style.fill
|
||||
},
|
||||
name: 'wrapper'
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label,
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16
|
||||
},
|
||||
name: 'text'
|
||||
});
|
||||
}
|
||||
|
||||
if(cfg.index !== undefined) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height + 30,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.index.toString(),
|
||||
fill: '#bbb',
|
||||
fontSize: 14,
|
||||
fontStyle: 'italic'
|
||||
},
|
||||
name: 'index-text'
|
||||
});
|
||||
}
|
||||
|
||||
return rect;
|
||||
}
|
||||
});
|
||||
@ -14,7 +14,7 @@ export default G6.registerNode('link-list-node', {
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
fill: '#eee'
|
||||
},
|
||||
name: 'wrapper'
|
||||
@ -27,7 +27,7 @@ export default G6.registerNode('link-list-node', {
|
||||
width: width * (2 / 3),
|
||||
height: height,
|
||||
fill: cfg.style.fill,
|
||||
stroke: cfg.style.stroke
|
||||
stroke: cfg.style.stroke || '#333'
|
||||
},
|
||||
name: 'main-rect',
|
||||
draggable: true
|
||||
@ -58,7 +58,9 @@ export default G6.registerNode('link-list-node', {
|
||||
[0, 0.5],
|
||||
[5 / 6, 0.5],
|
||||
[5 / 6, 0],
|
||||
[5 / 6, 1]
|
||||
[5 / 6, 1],
|
||||
[0.5, 0],
|
||||
[0.5, 1]
|
||||
];
|
||||
}
|
||||
});
|
||||
@ -57,7 +57,8 @@ export default G6.registerNode('two-cell-node', {
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0, 0.5],
|
||||
[3 / 4, 0.5]
|
||||
[3 / 4, 0.5],
|
||||
[0.5, 0]
|
||||
];
|
||||
}
|
||||
});
|
||||
@ -1,12 +1,13 @@
|
||||
import { Engine } from "./engine";
|
||||
import { Bound } from "./View/boundingRect";
|
||||
import { Group } from "./View/group";
|
||||
import { Bound } from "./Common/boundingRect";
|
||||
import { Group } from "./Common/group";
|
||||
import externalPointer from "./RegisteredShape/externalPointer";
|
||||
import * as G6 from "./Lib/g6.js";
|
||||
import linkListNode from "./RegisteredShape/linkListNode";
|
||||
import binaryTreeNode from "./RegisteredShape/binaryTreeNode";
|
||||
import twoCellNode from "./RegisteredShape/twoCellNode";
|
||||
import { Vector } from "./Common/vector";
|
||||
import indexedNode from "./RegisteredShape/indexedNode";
|
||||
|
||||
|
||||
export const SV = {
|
||||
@ -14,9 +15,15 @@ export const SV = {
|
||||
Group: Group,
|
||||
Bound: Bound,
|
||||
Vector: Vector,
|
||||
Mat3: G6.Util.mat3,
|
||||
G6,
|
||||
registeredShape: [
|
||||
externalPointer, linkListNode, binaryTreeNode, twoCellNode
|
||||
]
|
||||
externalPointer,
|
||||
linkListNode,
|
||||
binaryTreeNode,
|
||||
twoCellNode,
|
||||
indexedNode
|
||||
],
|
||||
registerShape: G6.registerNode
|
||||
};
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { Model } from "../Model/modelData";
|
||||
import { SV } from "../StructV";
|
||||
|
||||
|
||||
@ -5,37 +6,32 @@ import { SV } from "../StructV";
|
||||
/**
|
||||
* 动画表
|
||||
*/
|
||||
export class Animations {
|
||||
private duration: number;
|
||||
private timingFunction: string;
|
||||
private mat3 = SV.G6.Util.mat3;
|
||||
|
||||
constructor(duration: number, timingFunction: string) {
|
||||
this.duration = duration;
|
||||
this.timingFunction = timingFunction;
|
||||
}
|
||||
|
||||
export const Animations = {
|
||||
|
||||
/**
|
||||
* 添加节点 / 边时的动画效果
|
||||
* @param G6Item
|
||||
* @param model
|
||||
* @param duration
|
||||
* @param timingFunction
|
||||
* @param callback
|
||||
*/
|
||||
append(G6Item, callback: Function = null) {
|
||||
const type = G6Item.getType(),
|
||||
animate_append(model: Model, duration: number, timingFunction: string, callback: Function = null) {
|
||||
const G6Item = model.G6Item,
|
||||
type = G6Item.getType(),
|
||||
group = G6Item.getContainer(),
|
||||
Mat3 = SV.Mat3,
|
||||
animateCfg = {
|
||||
duration: this.duration,
|
||||
easing: this.timingFunction,
|
||||
duration: duration,
|
||||
easing: timingFunction,
|
||||
callback
|
||||
};
|
||||
|
||||
if(type === 'node') {
|
||||
let mat3 = this.mat3,
|
||||
matrix = group.getMatrix(),
|
||||
targetMatrix = mat3.clone(matrix);
|
||||
let matrix = group.getMatrix(),
|
||||
targetMatrix = Mat3.clone(matrix);
|
||||
|
||||
mat3.scale(matrix, matrix, [0, 0]);
|
||||
mat3.scale(targetMatrix, targetMatrix, [1, 1]);
|
||||
Mat3.scale(matrix, matrix, [0, 0]);
|
||||
Mat3.scale(targetMatrix, targetMatrix, [1, 1]);
|
||||
|
||||
group.attr({ opacity: 0, matrix });
|
||||
group.animate({ opacity: 1, matrix: targetMatrix }, animateCfg);
|
||||
@ -48,27 +44,30 @@ export class Animations {
|
||||
line.attr({ lineDash: [0, length], opacity: 0 });
|
||||
line.animate({ lineDash: [length, 0], opacity: 1 }, animateCfg);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 移除节点 / 边时的动画效果
|
||||
* @param G6Item
|
||||
* @param model
|
||||
* @param duration
|
||||
* @param timingFunction
|
||||
* @param callback
|
||||
*/
|
||||
remove(G6Item, callback: Function = null) {
|
||||
const type = G6Item.getType(),
|
||||
animate_remove(model: Model, duration: number, timingFunction: string, callback: Function = null) {
|
||||
const G6Item = model.G6Item,
|
||||
type = G6Item.getType(),
|
||||
group = G6Item.getContainer(),
|
||||
Mat3 = SV.Mat3,
|
||||
animateCfg = {
|
||||
duration: this.duration,
|
||||
easing: this.timingFunction,
|
||||
duration: duration,
|
||||
easing: timingFunction,
|
||||
callback
|
||||
};
|
||||
|
||||
if(type === 'node') {
|
||||
let mat3 = this.mat3,
|
||||
matrix = mat3.clone(group.getMatrix());
|
||||
let matrix = Mat3.clone(group.getMatrix());
|
||||
|
||||
mat3.scale(matrix, matrix, [0, 0]);
|
||||
Mat3.scale(matrix, matrix, [0, 0]);
|
||||
group.animate({ opacity: 0, matrix }, animateCfg);
|
||||
}
|
||||
|
||||
|
||||
188
src/View/container/container.ts
Normal file
188
src/View/container/container.ts
Normal file
@ -0,0 +1,188 @@
|
||||
import { Bound, BoundingRect } from "../../Common/boundingRect";
|
||||
import { Engine } from "../../engine";
|
||||
import { ConstructList } from "../../Model/modelConstructor";
|
||||
import { Element, Model, Pointer } from "../../Model/modelData";
|
||||
import { AnimationOptions, InteractionOptions, LayoutOptions } from "../../options";
|
||||
import { Animations } from "../animation";
|
||||
import { g6Behavior, Renderer } from "../renderer";
|
||||
|
||||
|
||||
|
||||
export class Container {
|
||||
protected engine: Engine;
|
||||
protected DOMContainer: HTMLElement; // 可视化视图容器
|
||||
protected renderer: Renderer; // 渲染器
|
||||
protected prevModelList: Model[]; // 上一次渲染的模型列表
|
||||
|
||||
protected animationsOptions: AnimationOptions;
|
||||
protected interactionOptions: InteractionOptions;
|
||||
|
||||
protected afterAppendModelsCallbacks: ((models: Model[]) => void)[] = [];
|
||||
protected afterRemoveModelsCallbacks: ((models: Model[]) => void)[] = [];
|
||||
|
||||
constructor(engine: Engine, DOMContainer: HTMLElement, g6Options: { [key: string]: any } = { }) {
|
||||
this.engine = engine;
|
||||
this.DOMContainer = DOMContainer;
|
||||
this.animationsOptions = engine.animationOptions;
|
||||
this.interactionOptions = engine.interactionOptions;
|
||||
this.renderer = new Renderer(engine, DOMContainer, {
|
||||
...g6Options,
|
||||
modes: {
|
||||
default: this.initBehaviors()
|
||||
}
|
||||
});
|
||||
this.prevModelList = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化交互行为
|
||||
* @returns
|
||||
*/
|
||||
protected initBehaviors(): g6Behavior[] {
|
||||
return ['drag-canvas', 'zoom-canvas'];
|
||||
}
|
||||
|
||||
/**
|
||||
* 对比上一次和该次 modelList 找出新添加的节点和边
|
||||
* @param prevList
|
||||
* @param list
|
||||
*/
|
||||
protected getAppendModels(prevList: Model[], list: Model[]): Model[] {
|
||||
return list.filter(item => !prevList.find(n => n.id === item.id));
|
||||
}
|
||||
|
||||
/**
|
||||
* 对比上一次和该次 modelList 找出被删除的节点和边
|
||||
* @param prevList
|
||||
* @param list
|
||||
*/
|
||||
protected getRemoveModels(prevList: Model[], list: Model[]): Model[] {
|
||||
return prevList.filter(item => !list.find(n => n.id === item.id));
|
||||
}
|
||||
|
||||
/**
|
||||
* 找出重新指向的外部指针
|
||||
* @param list
|
||||
* @returns
|
||||
*/
|
||||
protected findReTargetPointer(list: Model[]): Pointer[] {
|
||||
let prevPointers = this.prevModelList.filter(item => item instanceof Pointer),
|
||||
pointers = list.filter(item => item instanceof Pointer);
|
||||
|
||||
return <Pointer[]>pointers.filter(item => prevPointers.find(prevItem => {
|
||||
return prevItem.id === item.id && (<Pointer>prevItem).target.id !== (<Pointer>item).target.id
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理新增的 G6Item（主要是动画）
|
||||
* @param appendData
|
||||
*/
|
||||
protected handleAppendModels(appendModels: Model[]) {
|
||||
let counter = 0;
|
||||
|
||||
appendModels.forEach(item => {
|
||||
Animations.animate_append(item, this.animationsOptions.duration, this.animationsOptions.timingFunction, () => {
|
||||
counter++;
|
||||
|
||||
if(counter === appendModels.length) {
|
||||
this.afterAppendModelsCallbacks.map(item => item(appendModels));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理被移除（也就是泄露）的 G6Item（主要是动画）
|
||||
* @param removeData
|
||||
*/
|
||||
protected handleRemoveModels(removeModels: Model[]) {
|
||||
let counter = 0;
|
||||
|
||||
removeModels.forEach(item => {
|
||||
Animations.animate_remove(item, this.animationsOptions.duration, this.animationsOptions.timingFunction, () => {
|
||||
this.renderer.removeModel(item);
|
||||
item.renderG6Item = item.G6Item = null;
|
||||
|
||||
counter++;
|
||||
|
||||
if(counter === removeModels.length) {
|
||||
this.afterRemoveModelsCallbacks.map(item => item(removeModels));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理发生变化的 models
|
||||
* @param models
|
||||
*/
|
||||
protected handleChangeModels(models: Model[]) { }
|
||||
|
||||
// ------------------------------------------ hook ---------------------------------------------
|
||||
|
||||
afterAppendModels(callback: (models: Model[]) => void) {
|
||||
this.afterAppendModelsCallbacks.push(callback);
|
||||
}
|
||||
|
||||
afterRemoveModels(callback: (models: Model[]) => void) {
|
||||
this.afterRemoveModelsCallbacks.push(callback);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
/**
|
||||
* 渲染函数
|
||||
* @param modelList
|
||||
* @param layoutFn
|
||||
*/
|
||||
public render(constructList: ConstructList, layoutFn: (elements: Element[], layoutOptions: LayoutOptions) => void) {
|
||||
const modelList: Model[] = [...constructList.element, ...constructList.link, ...constructList.pointer],
|
||||
appendModels: Model[] = this.getAppendModels(this.prevModelList, modelList),
|
||||
removeModels: Model[] = this.getRemoveModels(this.prevModelList, modelList),
|
||||
changeModels: Model[] = [...appendModels, ...this.findReTargetPointer(modelList)];
|
||||
|
||||
// 渲染视图
|
||||
this.renderer.render(modelList, removeModels);
|
||||
|
||||
// 处理副作用
|
||||
this.handleAppendModels(appendModels);
|
||||
this.handleRemoveModels(removeModels);
|
||||
this.handleChangeModels(changeModels);
|
||||
|
||||
if(this.renderer.getIsFirstRender()) {
|
||||
this.renderer.setIsFirstRender(false);
|
||||
}
|
||||
|
||||
this.prevModelList = modelList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 g6 实例
|
||||
*/
|
||||
public getG6Instance() {
|
||||
return this.renderer.getG6Instance();
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
public destroy() {
|
||||
this.renderer.destroy();
|
||||
this.DOMContainer = null;
|
||||
this.prevModelList = [];
|
||||
this.animationsOptions = this.interactionOptions = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6
src/View/container/freed.ts
Normal file
6
src/View/container/freed.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { Container } from "./container";
|
||||
|
||||
/**
|
||||
* 释放区可视化视图
|
||||
*/
|
||||
export class FreedContainer extends Container { };
|
||||
6
src/View/container/leak.ts
Normal file
6
src/View/container/leak.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { Container } from "./container";
|
||||
|
||||
/**
|
||||
* 泄漏区可视化视图
|
||||
*/
|
||||
export class LeakContainer extends Container { };
|
||||
80
src/View/container/main.ts
Normal file
80
src/View/container/main.ts
Normal file
@ -0,0 +1,80 @@
|
||||
import { Link, Model } from "../../Model/modelData";
|
||||
import { Container } from "./container";
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 主可视化视图
|
||||
*/
|
||||
export class MainContainer extends Container {
|
||||
|
||||
protected initBehaviors() {
|
||||
const interactionOptions = this.interactionOptions,
|
||||
dragNode: boolean | string[] = interactionOptions.dragNode,
|
||||
dragNodeFilter = node => {
|
||||
let model = node.item.getModel();
|
||||
|
||||
if(node.item === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if(model.modelType === 'pointer') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if(typeof dragNode === 'boolean') {
|
||||
return dragNode;
|
||||
}
|
||||
|
||||
if(Array.isArray(dragNode) && dragNode.indexOf(model.modelName) > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const modeMap = {
|
||||
drag: 'drag-canvas',
|
||||
zoom: 'zoom-canvas',
|
||||
dragNode: {
|
||||
type: 'drag-node',
|
||||
shouldBegin: node => dragNodeFilter(node)
|
||||
}
|
||||
},
|
||||
defaultModes = [];
|
||||
|
||||
Object.keys(interactionOptions).forEach(item => {
|
||||
if(interactionOptions[item] && modeMap[item] !== undefined) {
|
||||
defaultModes.push(modeMap[item]);
|
||||
}
|
||||
});
|
||||
|
||||
return defaultModes;
|
||||
}
|
||||
|
||||
protected handleChangeModels(models: Model[]) {
|
||||
const changeHighlightColor: string = this.interactionOptions.changeHighlight;
|
||||
|
||||
// 第一次渲染的时候不高亮变化的元素
|
||||
if(this.renderer.getIsFirstRender()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(!changeHighlightColor || typeof changeHighlightColor !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
models.forEach(item => {
|
||||
if(item instanceof Link) {
|
||||
item.set('style', {
|
||||
stroke: changeHighlightColor
|
||||
});
|
||||
}
|
||||
else {
|
||||
item.set('style', {
|
||||
fill: changeHighlightColor
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -1,10 +1,9 @@
|
||||
import { Engine } from "../engine";
|
||||
import { ConstructedData } from "../Model/modelConstructor";
|
||||
import { Element, Model, Pointer } from "../Model/modelData";
|
||||
import { LayoutOptions, PointerOption } from "../options";
|
||||
import { Bound, BoundingRect } from "./boundingRect";
|
||||
|
||||
|
||||
import { Bound, BoundingRect } from '../Common/boundingRect';
|
||||
import { Engine } from '../engine';
|
||||
import { ConstructList } from '../Model/modelConstructor';
|
||||
import { Element, Model, Pointer } from '../Model/modelData';
|
||||
import { LayoutOptions, PointerOption } from '../options';
|
||||
import { Container } from './container/container';
|
||||
|
||||
|
||||
export class Layouter {
|
||||
@ -14,15 +13,54 @@ export class Layouter {
|
||||
this.engine = engine;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 初始化布局参数
|
||||
* @param elements
|
||||
* @param pointers
|
||||
*/
|
||||
private initLayoutValue(elements: Element[], pointers: Pointer[]) {
|
||||
[...elements, ...pointers].forEach(item => {
|
||||
item.set('rotation', item.get('rotation'));
|
||||
item.set({ x: 0, y: 0 });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 布局外部指针
|
||||
* @param pointer
|
||||
*/
|
||||
private layoutPointer(pointers: Pointer[]) {
|
||||
pointers.forEach(item => {
|
||||
const options: PointerOption = this.engine.pointerOptions[item.getType()],
|
||||
offset = options.offset || 8,
|
||||
anchor = options.anchor || 0;
|
||||
|
||||
let target = item.target,
|
||||
targetBound: BoundingRect = item.target.getBound(),
|
||||
anchorPosition = item.target.G6Item.getAnchorPoints()[anchor];
|
||||
|
||||
item.set({
|
||||
x: targetBound.x + targetBound.width / 2,
|
||||
y: targetBound.y - offset
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将视图调整至画布中心
|
||||
* @param nodes
|
||||
* @param container
|
||||
* @param models
|
||||
*/
|
||||
private fitCenter(models: Model[]) {
|
||||
private fitCenter(container: Container, models: Model[]) {
|
||||
if(models.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const viewBound: BoundingRect = models.map(item => item.getBound()).reduce((prev, cur) => Bound.union(prev, cur));
|
||||
|
||||
let width = this.engine.getGraphInstance().getWidth(),
|
||||
height = this.engine.getGraphInstance().getHeight(),
|
||||
let width = container.getG6Instance().getWidth(),
|
||||
height = container.getG6Instance().getHeight(),
|
||||
centerX = width / 2, centerY = height / 2,
|
||||
boundCenterX = viewBound.x + viewBound.width / 2,
|
||||
boundCenterY = viewBound.y + viewBound.height / 2,
|
||||
@ -38,55 +76,33 @@ export class Layouter {
|
||||
}
|
||||
|
||||
/**
|
||||
* 布局外部指针
|
||||
* @param pointer
|
||||
*/
|
||||
private layoutPointer(pointer: { [key: string]: Pointer[] }) {
|
||||
Object.keys(pointer).map(name => {
|
||||
const options: PointerOption = this.engine.pointerOptions[name],
|
||||
pointerList: Pointer[] = pointer[name],
|
||||
offset = options.offset || 8;
|
||||
|
||||
pointerList.forEach(item => {
|
||||
let targetBound: BoundingRect = item.target.getBound();
|
||||
item.set({
|
||||
x: targetBound.x + targetBound.width / 2,
|
||||
y: targetBound.y - offset
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 主布局函数
|
||||
* @param constructedData
|
||||
* @param modelList
|
||||
* 进行布局
|
||||
* @param container
|
||||
* @param constructList
|
||||
* @param layoutFn
|
||||
*/
|
||||
public layout(constructedData: ConstructedData, modelList: Model[], layoutFn: (element: { [ket: string]: Element[] }, layoutOptions: LayoutOptions) => void) {
|
||||
const options: LayoutOptions = this.engine.layoutOptions;
|
||||
|
||||
public layout(container: Container, constructList: ConstructList, layoutFn: (elements: Element[], layoutOptions: LayoutOptions) => void) {
|
||||
const options: LayoutOptions = this.engine.layoutOptions,
|
||||
modelList: Model[] = [...constructList.element, ...constructList.pointer, ...constructList.link];
|
||||
|
||||
// 首先初始化所有节点的坐标为0，且设定旋转
|
||||
modelList.forEach(item => {
|
||||
item.G6Item = item.shadowG6Item;
|
||||
|
||||
if(item.modelType === 'element' || item.modelType === 'pointer') {
|
||||
item.set('rotation', item.get('rotation'));
|
||||
item.set({ x: 0, y: 0 });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 初始化布局参数
|
||||
this.initLayoutValue(constructList.element, constructList.pointer);
|
||||
// 布局节点
|
||||
layoutFn.call(this.engine, constructedData.element, options);
|
||||
|
||||
layoutFn(constructList.element, options);
|
||||
// 布局外部指针
|
||||
this.layoutPointer(constructedData.pointer);
|
||||
this.layoutPointer(constructList.pointer);
|
||||
|
||||
// 将视图调整到画布中心
|
||||
options.fitCenter && this.fitCenter(modelList);
|
||||
options.fitCenter && this.fitCenter(container, modelList);
|
||||
|
||||
modelList.forEach(item => {
|
||||
item.G6Item = item.renderG6Item;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,8 +1,6 @@
|
||||
import { Engine } from '../engine';
|
||||
import { Element, G6EdgeModel, G6NodeModel, Link, Pointer } from '../Model/modelData';
|
||||
import { ConstructedData } from '../Model/modelConstructor';
|
||||
import { G6EdgeModel, G6NodeModel } from '../Model/modelData';
|
||||
import { Util } from '../Common/util';
|
||||
import { Animations } from './animation';
|
||||
import { SV } from '../StructV';
|
||||
import { Model } from './../Model/modelData';
|
||||
|
||||
@ -14,32 +12,28 @@ export interface G6Data {
|
||||
};
|
||||
|
||||
|
||||
export type g6Behavior = string | { type: string; shouldBegin?: Function; shouldUpdate?: Function; shouldEnd?: Function; };
|
||||
|
||||
|
||||
export class Renderer {
|
||||
private engine: Engine;
|
||||
private DOMContainer: HTMLElement;
|
||||
private animations: Animations;
|
||||
private isFirstRender: boolean;
|
||||
private prevRenderData: G6Data;
|
||||
private graphInstance;
|
||||
private shadowGraphInstance;
|
||||
private modelList: Model[];
|
||||
|
||||
constructor(engine: Engine, DOMContainer: HTMLElement) {
|
||||
private DOMContainer: HTMLElement; // 主可视化视图容器
|
||||
private g6Instance; // g6 实例
|
||||
|
||||
private isFirstRender: boolean; // 是否为第一次渲染
|
||||
|
||||
constructor(engine: Engine, DOMContainer: HTMLElement, g6Options: { [key: string]: any }) {
|
||||
this.engine = engine;
|
||||
this.DOMContainer = DOMContainer;
|
||||
this.isFirstRender = true;
|
||||
this.modelList = [];
|
||||
this.prevRenderData = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
|
||||
const enable: boolean = this.engine.animationOptions.enable === undefined? true: this.engine.animationOptions.enable,
|
||||
const enable: boolean = this.engine.animationOptions.enable,
|
||||
duration: number = this.engine.animationOptions.duration,
|
||||
timingFunction: string = this.engine.animationOptions.timingFunction;
|
||||
|
||||
this.graphInstance = new SV.G6.Graph({
|
||||
// 初始化g6实例
|
||||
this.g6Instance = new SV.G6.Graph({
|
||||
container: DOMContainer,
|
||||
width: DOMContainer.offsetWidth,
|
||||
height: DOMContainer.offsetHeight,
|
||||
@ -49,223 +43,77 @@ export class Renderer {
|
||||
duration: duration,
|
||||
easing: timingFunction
|
||||
},
|
||||
fitView: this.engine.layoutOptions.fitView,
|
||||
fitView: false,
|
||||
modes: {
|
||||
default: this.initBehaviors()
|
||||
}
|
||||
});
|
||||
|
||||
this.shadowGraphInstance = new SV.G6.Graph({
|
||||
container: DOMContainer.cloneNode()
|
||||
});
|
||||
|
||||
this.animations = new Animations(duration, timingFunction);
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化交互行为
|
||||
* @returns
|
||||
*/
|
||||
private initBehaviors() {
|
||||
const interactionOptions = this.engine.interactionOptions,
|
||||
dragNode: boolean | string[] = interactionOptions.dragNode,
|
||||
dragNodeFilter = node => {
|
||||
let model = node.item.getModel();
|
||||
|
||||
if(node.item === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if(model.modelType === 'pointer') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if(typeof dragNode === 'boolean') {
|
||||
return dragNode;
|
||||
}
|
||||
|
||||
if(Array.isArray(dragNode) && dragNode.indexOf(model.modelName) > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const modeMap = {
|
||||
drag: 'drag-canvas',
|
||||
zoom: 'zoom-canvas',
|
||||
dragNode: {
|
||||
type: 'drag-node',
|
||||
shouldBegin: node => dragNodeFilter(node)
|
||||
}
|
||||
},
|
||||
defaultModes = [];
|
||||
|
||||
Object.keys(interactionOptions).forEach(item => {
|
||||
if(interactionOptions[item] && modeMap[item] !== undefined) {
|
||||
defaultModes.push(modeMap[item]);
|
||||
}
|
||||
});
|
||||
|
||||
return defaultModes;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对比上一次和该次 G6Data 找出新添加的节点和边
|
||||
* @param prevData
|
||||
* @param data
|
||||
*/
|
||||
private diffAppendItems(prevData: G6Data, data: G6Data): G6Data {
|
||||
return {
|
||||
nodes: data.nodes.filter(item => !prevData.nodes.find(n => n.id === item.id)),
|
||||
edges: data.edges.filter(item => !prevData.edges.find(e => e.id === item.id))
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 对比上一次和该次 G6Data 找出被删除的节点和边
|
||||
* @param prevData
|
||||
* @param data
|
||||
*/
|
||||
private diffRemoveItems(prevData: G6Data, data: G6Data): G6Data {
|
||||
return {
|
||||
nodes: prevData.nodes.filter(item => !data.nodes.find(n => n.id === item.id)),
|
||||
edges: prevData.edges.filter(item => !data.edges.find(e => e.id === item.id))
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 查找被释放的节点
|
||||
* @param constructedData
|
||||
*/
|
||||
private findFreedItems(constructedData: ConstructedData): G6NodeModel[] {
|
||||
return Util.converterList(constructedData.element).filter(item => item.free).map(item => item.G6Item);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理新增的 G6Item（主要是动画）
|
||||
* @param appendData
|
||||
*/
|
||||
private handleAppendItems(appendData: G6Data) {
|
||||
const appendItems = [
|
||||
...appendData.nodes.map(item => this.graphInstance.findById(item.id)),
|
||||
...appendData.edges.map(item => this.graphInstance.findById(item.id))
|
||||
];
|
||||
|
||||
appendItems.forEach(item => {
|
||||
this.animations.append(item);
|
||||
default: []
|
||||
},
|
||||
...g6Options
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理被移除的 G6Item（主要是动画）
|
||||
* @param removeData
|
||||
*/
|
||||
private handleRemoveItems(removeData: G6Data) {
|
||||
const removeItems = [
|
||||
...removeData.nodes.map(item => this.graphInstance.findById(item.id)),
|
||||
...removeData.edges.map(item => this.graphInstance.findById(item.id))
|
||||
];
|
||||
public getIsFirstRender(): boolean {
|
||||
return this.isFirstRender;
|
||||
}
|
||||
|
||||
removeItems.forEach(item => {
|
||||
this.animations.remove(item, () => {
|
||||
this.graphInstance.removeItem(item);
|
||||
});
|
||||
});
|
||||
public setIsFirstRender(value: boolean) {
|
||||
this.isFirstRender = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理被 free 的 G6Item
|
||||
* @param freedItems
|
||||
* 从视图中移除一个 Model
|
||||
* @param model
|
||||
*/
|
||||
private handleFreedItems(freedItems: G6NodeModel[]) { }
|
||||
|
||||
/**
|
||||
* 构建 G6 元素
|
||||
* @param constructedData
|
||||
*/
|
||||
public build(constructedData: ConstructedData) {
|
||||
let elementList: Element[] = Util.converterList(constructedData.element),
|
||||
linkList: Link[] = Util.converterList(constructedData.link),
|
||||
pointerList: Pointer[] = Util.converterList(constructedData.pointer),
|
||||
nodeList = [...elementList.map(item => item.cloneProps()), ...pointerList.map(item => item.cloneProps())],
|
||||
edgeList = linkList.map(item => item.cloneProps());
|
||||
|
||||
this.modelList = [...elementList, ...linkList, ...pointerList];
|
||||
|
||||
const data: G6Data = {
|
||||
nodes: <G6NodeModel[]>nodeList,
|
||||
edges: <G6EdgeModel[]>edgeList
|
||||
};
|
||||
|
||||
this.shadowGraphInstance.clear();
|
||||
this.shadowGraphInstance.read(data);
|
||||
|
||||
this.modelList.forEach(item => {
|
||||
item.shadowG6Item = this.shadowGraphInstance.findById(item.id);
|
||||
});
|
||||
public removeModel(model: Model) {
|
||||
this.g6Instance.removeItem(model.renderG6Item);
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染函数
|
||||
* @param constructedData
|
||||
* @param modelList
|
||||
*/
|
||||
public render(constructedData: ConstructedData) {
|
||||
let data: G6Data = Util.convertG6Data(constructedData),
|
||||
freedItems = this.findFreedItems(constructedData),
|
||||
renderData: G6Data = null,
|
||||
appendData: G6Data = null,
|
||||
removeData: G6Data = null;
|
||||
|
||||
appendData = this.diffAppendItems(this.prevRenderData, data);
|
||||
removeData = this.diffRemoveItems(this.prevRenderData, data);
|
||||
renderData = {
|
||||
nodes: [...data.nodes, ...removeData.nodes],
|
||||
edges: [...data.edges, ...removeData.edges]
|
||||
};
|
||||
|
||||
this.prevRenderData = data;
|
||||
public render(modelList: Model[], removeModels: Model[]) {
|
||||
let data: G6Data = Util.convertModelList2G6Data(modelList),
|
||||
removeData: G6Data = Util.convertModelList2G6Data(removeModels),
|
||||
renderData: G6Data = {
|
||||
nodes: [...data.nodes, ...removeData.nodes],
|
||||
edges: [...data.edges, ...removeData.edges]
|
||||
};
|
||||
|
||||
if(this.isFirstRender) {
|
||||
this.graphInstance.read(renderData);
|
||||
this.g6Instance.read(renderData);
|
||||
}
|
||||
else {
|
||||
this.graphInstance.changeData(renderData);
|
||||
this.g6Instance.changeData(renderData);
|
||||
}
|
||||
|
||||
this.handleAppendItems(appendData);
|
||||
this.handleRemoveItems(removeData);
|
||||
|
||||
if(this.engine.layoutOptions.fitView) {
|
||||
this.graphInstance.fitView();
|
||||
this.g6Instance.fitView();
|
||||
}
|
||||
|
||||
this.modelList.forEach(item => {
|
||||
item.renderG6Item = this.graphInstance.findById(item.id);
|
||||
modelList.forEach(item => {
|
||||
item.renderG6Item = this.g6Instance.findById(item.id);
|
||||
item.G6Item = item.renderG6Item;
|
||||
});
|
||||
|
||||
// 把所有连线置顶
|
||||
if(this.isFirstRender) {
|
||||
this.graphInstance.getEdges().forEach(item => item.toFront());
|
||||
this.graphInstance.paint();
|
||||
this.g6Instance.getEdges().forEach(item => item.toFront());
|
||||
this.g6Instance.paint();
|
||||
}
|
||||
|
||||
if(this.isFirstRender) {
|
||||
this.isFirstRender = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 model 队列
|
||||
*/
|
||||
getModelList(): Model[] {
|
||||
return this.modelList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 G6 实例
|
||||
*/
|
||||
public getGraphInstance() {
|
||||
return this.graphInstance;
|
||||
public getG6Instance() {
|
||||
return this.g6Instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
public destroy() {
|
||||
this.g6Instance.destroy();
|
||||
this.DOMContainer = null;
|
||||
}
|
||||
}
|
||||
212
src/View/viewManager.ts
Normal file
212
src/View/viewManager.ts
Normal file
@ -0,0 +1,212 @@
|
||||
import { Engine } from "../engine";
|
||||
import { Element, Link } from "../Model/modelData";
|
||||
import { EngineInitOptions, LayoutOptions } from "../options";
|
||||
import { Container } from "./container/container";
|
||||
import { SV } from '../StructV';
|
||||
import { ConstructList } from "../Model/modelConstructor";
|
||||
import { MainContainer } from "./container/main";
|
||||
import { FreedContainer } from "./container/freed";
|
||||
import { LeakContainer } from "./container/leak";
|
||||
import { Layouter } from "./layouter";
|
||||
|
||||
|
||||
export class ViewManager {
|
||||
private engine: Engine;
|
||||
private layouter: Layouter;
|
||||
private mainContainer: Container;
|
||||
private freedContainer: Container;
|
||||
private leakContainer: Container;
|
||||
|
||||
private prevConstructList: ConstructList = { element:[], pointer: [], link: [] };
|
||||
private freedConstructList: ConstructList = { element:[], pointer: [], link: [] };
|
||||
private leakConstructList: ConstructList = { element:[], pointer: [], link: [] };
|
||||
|
||||
private shadowG6Instance;
|
||||
|
||||
constructor(engine: Engine, DOMContainer: HTMLElement) {
|
||||
this.engine = engine;
|
||||
this.layouter = new Layouter(engine);
|
||||
this.mainContainer = new MainContainer(engine, DOMContainer);
|
||||
|
||||
const options: EngineInitOptions = this.engine.initOptions;
|
||||
|
||||
if(options.freedContainer) {
|
||||
this.freedContainer = new FreedContainer(engine, options.freedContainer, { fitCenter: true });
|
||||
}
|
||||
|
||||
if(options.leakContainer) {
|
||||
this.leakContainer = new LeakContainer(engine, options.leakContainer, { fitCenter: true });
|
||||
}
|
||||
|
||||
this.shadowG6Instance = new SV.G6.Graph({
|
||||
container: DOMContainer.cloneNode()
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 对每一个 model 在离屏 Canvas 上构建 G6 item，用作布局
|
||||
* @param constructList
|
||||
*/
|
||||
private build(constructList: ConstructList) {
|
||||
constructList.element.map(item => item.cloneProps()).forEach(item => this.shadowG6Instance.addItem('node', item));
|
||||
constructList.pointer.map(item => item.cloneProps()).forEach(item => this.shadowG6Instance.addItem('node', item));
|
||||
constructList.link.map(item => item.cloneProps()).forEach(item => this.shadowG6Instance.addItem('edge', item));
|
||||
|
||||
constructList.element.forEach(item => {
|
||||
item.shadowG6Item = this.shadowG6Instance.findById(item.id);
|
||||
});
|
||||
constructList.pointer.forEach(item => {
|
||||
item.shadowG6Item = this.shadowG6Instance.findById(item.id);
|
||||
});
|
||||
constructList.link.forEach(item => {
|
||||
item.shadowG6Item = this.shadowG6Instance.findById(item.id);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取被 free 的节点
|
||||
* @param constructList
|
||||
* @returns
|
||||
*/
|
||||
private getFreedConstructList(constructList: ConstructList): ConstructList {
|
||||
const freedList: ConstructList = {
|
||||
element: constructList.element.filter(item => item.free),
|
||||
pointer: [],
|
||||
link: []
|
||||
};
|
||||
|
||||
freedList.element.forEach(fItem => {
|
||||
constructList.element.splice(constructList.element.findIndex(item => item.id === fItem.id), 1);
|
||||
constructList.link.splice(constructList.link.findIndex(item => item.element.id === fItem.id || item.target.id === fItem.id));
|
||||
constructList.pointer.splice(constructList.pointer.findIndex(item => item.target.id === fItem.id));
|
||||
});
|
||||
|
||||
return freedList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取被泄露的节点
|
||||
* @param constructList
|
||||
* @param prevConstructList
|
||||
* @returns
|
||||
*/
|
||||
private getLeakConstructList(prevConstructList: ConstructList, constructList: ConstructList): ConstructList {
|
||||
const elements: Element[] = prevConstructList.element.filter(item => !constructList.element.find(n => n.id === item.id)),
|
||||
links: Link[] = prevConstructList.link.filter(item => !constructList.link.find(n => n.id === item.id)),
|
||||
elementIds: string[] = elements.map(item => item.id);
|
||||
|
||||
elements.forEach(item => {
|
||||
item.set('style', {
|
||||
fill: '#ccc'
|
||||
});
|
||||
});
|
||||
|
||||
for(let i = 0; i < links.length; i++) {
|
||||
let sourceId = links[i].element.id,
|
||||
targetId = links[i].target.id;
|
||||
|
||||
links[i].set('style', {
|
||||
stroke: '#333'
|
||||
});
|
||||
|
||||
if(elementIds.find(item => item === sourceId) === undefined || elementIds.find(item => item === targetId) === undefined) {
|
||||
links.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
element: elements,
|
||||
link: links,
|
||||
pointer: []
|
||||
};
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* 对主视图进行重新布局
|
||||
* @param constructList
|
||||
* @param layoutFn
|
||||
*/
|
||||
reLayout(constructList: ConstructList, layoutFn: (elements: Element[], layoutOptions: LayoutOptions) => void) {
|
||||
this.layouter.layout(this.mainContainer, constructList, layoutFn);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取 g6 实例
|
||||
*/
|
||||
getG6Instance() {
|
||||
return this.mainContainer.getG6Instance();
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新视图
|
||||
*/
|
||||
refresh() {
|
||||
this.mainContainer.getG6Instance().refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新调整容器尺寸
|
||||
* @param width
|
||||
* @param height
|
||||
*/
|
||||
resize(width: number, height: number) {
|
||||
this.mainContainer.getG6Instance().changeSize(width, height);
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染所有视图
|
||||
* @param models
|
||||
* @param layoutFn
|
||||
*/
|
||||
renderAll(constructList: ConstructList, layoutFn: (elements: Element[], layoutOptions: LayoutOptions) => void) {
|
||||
this.shadowG6Instance.clear();
|
||||
|
||||
this.build(constructList);
|
||||
|
||||
this.freedConstructList = this.getFreedConstructList(constructList);
|
||||
this.leakConstructList = this.getLeakConstructList(this.prevConstructList, constructList);
|
||||
|
||||
this.build(this.leakConstructList);
|
||||
|
||||
if(this.freedContainer) {
|
||||
this.freedContainer.render(this.freedConstructList, layoutFn);
|
||||
}
|
||||
|
||||
// 进行布局（设置model的x，y）
|
||||
this.layouter.layout(this.mainContainer, constructList, layoutFn);
|
||||
this.mainContainer.render(constructList, layoutFn);
|
||||
|
||||
if(this.leakContainer) {
|
||||
this.mainContainer.afterRemoveModels(() => {
|
||||
this.leakContainer.render(this.leakConstructList, layoutFn);
|
||||
});
|
||||
}
|
||||
|
||||
this.prevConstructList = constructList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
destroy() {
|
||||
this.shadowG6Instance.destroy();
|
||||
this.mainContainer.destroy();
|
||||
this.freedContainer && this.freedContainer.destroy();
|
||||
this.leakContainer && this.leakContainer.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
116
src/engine.ts
116
src/engine.ts
@ -1,23 +1,19 @@
|
||||
import { Element, Pointer } from "./Model/modelData";
|
||||
import { Sources } from "./sources";
|
||||
import { ConstructedData, ModelConstructor } from "./Model/modelConstructor";
|
||||
import { Renderer } from "./View/renderer";
|
||||
import { AnimationOptions, ElementOption, InteractionOptions, LayoutOptions, LinkOption, Options, PointerOption } from "./options";
|
||||
import { Layouter } from "./View/layouter";
|
||||
import { Behavior } from "./View/behavior";
|
||||
import { Util } from "./Common/util";
|
||||
import { SourceElement } from "./sources";
|
||||
import { ModelConstructor, ConstructList } from "./Model/modelConstructor";
|
||||
import { AnimationOptions, ElementOption, EngineInitOptions, InteractionOptions, LayoutOptions, LinkOption, Options, PointerOption } from "./options";
|
||||
import { Behavior } from "./Behavior.ts/behavior";
|
||||
import { ViewManager } from "./View/viewManager";
|
||||
|
||||
|
||||
export class Engine {
|
||||
private stringifySources: string = null; // 序列化的源数据
|
||||
|
||||
private modelConstructor: ModelConstructor = null;
|
||||
private layouter: Layouter = null;
|
||||
private renderer: Renderer = null;
|
||||
private viewManager: ViewManager
|
||||
private behavior: Behavior;
|
||||
private graphInstance;
|
||||
private constructedData: ConstructedData;
|
||||
|
||||
public initOptions: EngineInitOptions;
|
||||
public elementOptions: { [key: string]: ElementOption } = { };
|
||||
public linkOptions: { [key: string]: LinkOption } = { };
|
||||
public pointerOptions: { [key: string]: PointerOption } = { };
|
||||
@ -25,9 +21,10 @@ export class Engine {
|
||||
public animationOptions: AnimationOptions = null;
|
||||
public interactionOptions: InteractionOptions = null;
|
||||
|
||||
constructor(DOMContainer: HTMLElement) {
|
||||
constructor(DOMContainer: HTMLElement, initOptions: EngineInitOptions = { }) {
|
||||
const options: Options = this.defineOptions();
|
||||
|
||||
|
||||
this.initOptions = initOptions;
|
||||
this.elementOptions = options.element;
|
||||
this.linkOptions = options.link || { };
|
||||
this.pointerOptions = options.pointer || { };
|
||||
@ -47,21 +44,26 @@ export class Engine {
|
||||
drag: true,
|
||||
zoom: true,
|
||||
dragNode: true,
|
||||
selectNode: true
|
||||
selectNode: true,
|
||||
changeHighlight: '#fc5185'
|
||||
}, options.interaction);
|
||||
|
||||
this.initOptions = Object.assign({
|
||||
freedContainer: null,
|
||||
leakContainer: null
|
||||
}, initOptions);
|
||||
|
||||
this.modelConstructor = new ModelConstructor(this);
|
||||
this.layouter = new Layouter(this);
|
||||
this.renderer = new Renderer(this, DOMContainer);
|
||||
this.graphInstance = this.renderer.getGraphInstance();
|
||||
this.behavior = new Behavior(this, this.renderer.getGraphInstance());
|
||||
|
||||
this.viewManager = new ViewManager(this, DOMContainer);
|
||||
this.behavior = new Behavior(this, this.viewManager.getG6Instance());
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入数据进行渲染
|
||||
* @param sourceData
|
||||
*/
|
||||
public render(sourceData: Sources) {
|
||||
public render(sourceData: SourceElement[] | { [key: string]: SourceElement[] }) {
|
||||
if(sourceData === undefined || sourceData === null) {
|
||||
return;
|
||||
}
|
||||
@ -71,13 +73,40 @@ export class Engine {
|
||||
if(stringifySources === this.stringifySources) return;
|
||||
this.stringifySources = stringifySources;
|
||||
|
||||
this.constructedData = this.modelConstructor.construct(sourceData);
|
||||
let processedSourcesData = this.sourcesPreprocess(sourceData);
|
||||
if(processedSourcesData) {
|
||||
sourceData = processedSourcesData;
|
||||
}
|
||||
|
||||
this.renderer.build(this.constructedData);
|
||||
const sourceList: SourceElement[] = this.sourcesProcess(sourceData);
|
||||
|
||||
this.layouter.layout(this.constructedData, this.renderer.getModelList(), this.layout);
|
||||
// 1 转换模型（data => model）
|
||||
const constructList: ConstructList = this.modelConstructor.construct(sourceList);
|
||||
|
||||
// 2 渲染（使用g6进行渲染）
|
||||
this.viewManager.renderAll(constructList, this.layout.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* 源数据处理
|
||||
* @param sourceData
|
||||
*/
|
||||
private sourcesProcess(sourceData: SourceElement[] | { [key: string]: SourceElement[] }): SourceElement[] {
|
||||
if(Array.isArray(sourceData)) {
|
||||
return sourceData;
|
||||
}
|
||||
|
||||
this.renderer.render(this.constructedData);
|
||||
const sourceList: SourceElement[] = [];
|
||||
|
||||
Object.keys(sourceData).forEach(name => {
|
||||
sourceData[name].forEach(item => {
|
||||
item.type = name;
|
||||
});
|
||||
|
||||
sourceList.push(...sourceData[name]);
|
||||
});
|
||||
|
||||
return sourceList;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -88,22 +117,29 @@ export class Engine {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对源数据进行预处理
|
||||
* @param sourceData
|
||||
*/
|
||||
protected sourcesPreprocess(sourceData: SourceElement[] | { [key: string]: SourceElement[] }): SourceElement[] | { [key: string]: SourceElement[] } | void {
|
||||
return sourceData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置布局函数
|
||||
* @overwrite
|
||||
*/
|
||||
protected layout(elementContainer: { [ket: string]: Element[] }, layoutOptions: LayoutOptions) { }
|
||||
protected layout(elements: Element[], layoutOptions: LayoutOptions) { }
|
||||
|
||||
/**
|
||||
* 重新布局
|
||||
*/
|
||||
public reLayout() {
|
||||
const modelList = this.renderer.getModelList();
|
||||
const constructList: ConstructList = this.modelConstructor.getConstructList();
|
||||
|
||||
this.layouter.layout(this.constructedData, modelList, this.layout);
|
||||
modelList.forEach(item => {
|
||||
if(item.modelType === 'link') return;
|
||||
this.viewManager.reLayout(constructList, this.layout.bind(this));
|
||||
|
||||
[...constructList.element, ...constructList.pointer].forEach(item => {
|
||||
let model = item.G6Item.getModel(),
|
||||
x = item.get('x'),
|
||||
y = item.get('y');
|
||||
@ -112,35 +148,38 @@ export class Engine {
|
||||
model.y = y;
|
||||
});
|
||||
|
||||
this.graphInstance.refresh();
|
||||
this.viewManager.refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 G6 实例
|
||||
*/
|
||||
public getGraphInstance() {
|
||||
return this.graphInstance;
|
||||
public getGraphInstance() {
|
||||
return this.viewManager.getG6Instance();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有 element
|
||||
*/
|
||||
public getElements(): Element[] {
|
||||
return Util.converterList(this.constructedData.element);
|
||||
const constructList = this.modelConstructor.getConstructList();
|
||||
return constructList.element;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有 pointer
|
||||
*/
|
||||
public getPointers(): Pointer[] {
|
||||
return Util.converterList(this.constructedData.pointer);
|
||||
const constructList = this.modelConstructor.getConstructList();
|
||||
return constructList.pointer;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有 link
|
||||
*/
|
||||
public getLinks() {
|
||||
return Util.converterList(this.constructedData.link);
|
||||
const constructList = this.modelConstructor.getConstructList();
|
||||
return constructList.link;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -149,7 +188,7 @@ export class Engine {
|
||||
* @param height
|
||||
*/
|
||||
public resize(width: number, height: number) {
|
||||
this.graphInstance.changeSize(width, height);
|
||||
this.viewManager.resize(width, height);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -165,11 +204,8 @@ export class Engine {
|
||||
* 销毁引擎
|
||||
*/
|
||||
public destroy() {
|
||||
this.graphInstance.destroy();
|
||||
this.modelConstructor = null;
|
||||
this.layouter = null;
|
||||
this.renderer = null;
|
||||
this.modelConstructor.destroy();
|
||||
this.viewManager.destroy();
|
||||
this.behavior = null;
|
||||
this.graphInstance = null;
|
||||
}
|
||||
};
|
||||
@ -46,7 +46,6 @@ export interface LinkOption {
|
||||
sourceAnchor: number | ((index: number) => number);
|
||||
targetAnchor: number | ((index: number) => number);
|
||||
label: string;
|
||||
controlPoints: { x: number, y: number }[];
|
||||
curveOffset: number;
|
||||
labelOptions: LinkLabelOption;
|
||||
style: Style;
|
||||
@ -54,7 +53,7 @@ export interface LinkOption {
|
||||
|
||||
|
||||
export interface PointerOption extends ElementOption {
|
||||
position: 'top' | 'left' | 'bottom' | 'right';
|
||||
anchor: number;
|
||||
offset: number;
|
||||
};
|
||||
|
||||
@ -78,6 +77,7 @@ export interface InteractionOptions {
|
||||
zoom: boolean;
|
||||
dragNode: boolean | string[];
|
||||
selectNode: boolean | string[];
|
||||
changeHighlight: string;
|
||||
};
|
||||
|
||||
|
||||
@ -91,5 +91,11 @@ export interface Options {
|
||||
};
|
||||
|
||||
|
||||
export interface EngineInitOptions {
|
||||
freedContainer?: HTMLElement;
|
||||
leakContainer?: HTMLElement;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -14,7 +14,5 @@ export interface SourceElement {
|
||||
[key: string]: any | sourceLinkData | sourcePointerData;
|
||||
}
|
||||
|
||||
// 源数据格式
|
||||
export type Sources = { } | SourceElement[];
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user