修正demo目录
This commit is contained in:
黎智洲
@@ -1,72 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Arrays extends Engine {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'indexed-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
dragNode: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
layout(elements) {
|
||||
let arr = elements,
|
||||
width = arr[0].get('size')[0];
|
||||
|
||||
for(let i = 0; i < arr.length; i++) {
|
||||
arr[i].set('x', i * width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const A = function(container) {
|
||||
return{
|
||||
engine: new Arrays(container),
|
||||
data: [[
|
||||
{ id: 1, index: 0 },
|
||||
{ id: 2, index: 1 },
|
||||
{ id: 3, index: 2 },
|
||||
{ id: 4 },
|
||||
{ id: 5 },
|
||||
{ id: 6 },
|
||||
{ id: 7 },
|
||||
{ id: 8 },
|
||||
{ id: 9 },
|
||||
{ id: 10 }
|
||||
],
|
||||
[
|
||||
{ id: 1 },
|
||||
{ id: 2 },
|
||||
{ id: 3 },
|
||||
{ id: 6, external: 'A' },
|
||||
{ id: 7 },
|
||||
{ id: 8 },
|
||||
{ id: 12 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
@@ -1,197 +0,0 @@
|
||||
|
||||
|
||||
/**
|
||||
* 二叉树
|
||||
*/
|
||||
class BinaryTree extends Engine {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'binary-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[id]',
|
||||
style: {
|
||||
fill: '#b83b5e',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => index + 1,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 14,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
fill: '#000099'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
fitCenter: true
|
||||
},
|
||||
animation: {
|
||||
enable: true,
|
||||
duration: 750,
|
||||
timingFunction: 'easePolyOut'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
*/
|
||||
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 nodes = elements,
|
||||
rootNodes = [],
|
||||
node,
|
||||
root,
|
||||
lastRoot,
|
||||
treeGroup = new Group(),
|
||||
i;
|
||||
|
||||
for(i = 0; i < nodes.length; i++) {
|
||||
node = nodes[i];
|
||||
|
||||
if(node.root) {
|
||||
rootNodes.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
for(i = 0; i < rootNodes.length; i++) {
|
||||
root = rootNodes[i];
|
||||
|
||||
root.subTreeGroup = this.layoutItem(root, null, i, layoutOptions);
|
||||
|
||||
if(lastRoot) {
|
||||
let curBound = root.subTreeGroup.getBound(),
|
||||
lastBound = lastRoot.subTreeGroup.getBound();
|
||||
|
||||
let move = lastBound.x + lastBound.width + layoutOptions.xInterval - curBound.x;
|
||||
root.subTreeGroup.translate(move, 0);
|
||||
}
|
||||
|
||||
lastRoot = root;
|
||||
treeGroup.add(root);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const BTree = function(container) {
|
||||
return{
|
||||
engine: new BinaryTree(container),
|
||||
data: [
|
||||
[
|
||||
{ id: 1, child: [2, 3], root: true, external: ['treeA', 'gear'] },
|
||||
{ id: 2, child: [null, 6] },
|
||||
{ id: 3, child: [5, 4] },
|
||||
{ id: 4, external: 'foo', child: [5, null] },
|
||||
{ id: 5 },
|
||||
{ id: 6, external: 'bar', child: [null, 7] },
|
||||
{ id: 7 },
|
||||
{ id: 8, child: [9, 10], root: true },
|
||||
{ id: 9, child: [11, null] },
|
||||
{ id: 10 },
|
||||
{ id: 11 }
|
||||
],
|
||||
[
|
||||
{ id: 1, child: [2, 3], root: true, external: 'treeA' },
|
||||
{ id: 2, external: 'gear' },
|
||||
{ id: 3, child: [5, 4] },
|
||||
{ id: 4, external: 'foo' },
|
||||
{ id: 5, child: [12, 13] },
|
||||
{ id: 12 }, { id: 13 }
|
||||
]
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,181 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 连地址哈希表
|
||||
*/
|
||||
class ChainHashTable extends Engine {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
head: {
|
||||
type: 'two-cell-node',
|
||||
label: '[id]',
|
||||
size: [70, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
},
|
||||
node: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
start: {
|
||||
type: 'line',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 0,
|
||||
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: 1,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
interaction: {
|
||||
dragNode: ['node']
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let headNode = elements.filter(item => item.type === 'head');
|
||||
|
||||
for(let i = 0; i < headNode.length; i++) {
|
||||
let node = headNode[i],
|
||||
height = node.get('size')[1];
|
||||
|
||||
node.set('y', node.get('y') + i * height);
|
||||
|
||||
if(node.start) {
|
||||
let y = node.get('y') + height - node.start.get('size')[1],
|
||||
x = layoutOptions.xInterval * 2.5;
|
||||
|
||||
node.start.set({ x, y });
|
||||
this.layoutItem(node.start, null, layoutOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
const CHT = function(container, options) {
|
||||
return{
|
||||
engine: new ChainHashTable(container, options),
|
||||
data: [
|
||||
{
|
||||
head: [{
|
||||
id: 0,
|
||||
start: 'node#0'
|
||||
}, {
|
||||
id: 2,
|
||||
start: 'node#2'
|
||||
}],
|
||||
node: [{
|
||||
id: 0,
|
||||
next: 1
|
||||
}, {
|
||||
id: 1
|
||||
},{
|
||||
id: 2,
|
||||
next: 3
|
||||
}, {
|
||||
id: 3
|
||||
}]
|
||||
},
|
||||
{
|
||||
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
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
|
||||
|
||||
|
||||
class DirectedGraph extends Graph {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
label: '[id]',
|
||||
size: 30,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
neighbor: {
|
||||
type: 'line',
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
radius: 150
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const DG = function(container) {
|
||||
return{
|
||||
engine: new DirectedGraph(container),
|
||||
data: [[
|
||||
{ id: 1, neighbor: 2 },
|
||||
{ id: 2, neighbor: [ 3, 4, 5 ] },
|
||||
{ id: 3, neighbor: [ 4, 6 ] },
|
||||
{ id: 4, neighbor: 5 },
|
||||
{ id: 5, neighbor: 6 },
|
||||
{ id: 6, neighbor: 1 }
|
||||
],
|
||||
[
|
||||
{ id: 1, neighbor: 3 },
|
||||
{ id: 3 },
|
||||
{ id: 4, neighbor: 5 },
|
||||
{ id: 5, neighbor: 6 },
|
||||
{ id: 6, neighbor: 1 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,215 +0,0 @@
|
||||
|
||||
|
||||
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,73 +0,0 @@
|
||||
|
||||
|
||||
class Graph extends Engine {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'circle',
|
||||
label: '[id]',
|
||||
size: 30,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
neighbor: {
|
||||
style: {
|
||||
stroke: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
radius: 150
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements.default,
|
||||
radius = layoutOptions.radius,
|
||||
intervalAngle = 2 * Math.PI / nodes.length;
|
||||
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
|
||||
|
||||
nodes[i].set({x, y});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const G = function(container) {
|
||||
return{
|
||||
engine: new Graph(container),
|
||||
data: [[
|
||||
{ id: 1, neighbor: 2 },
|
||||
{ id: 2, neighbor: [ 3, 4, 5 ] },
|
||||
{ id: 3, neighbor: [ 4, 6] },
|
||||
{ id: 4, neighbor: 5 },
|
||||
{ id: 5, neighbor: 6 },
|
||||
{ id: 6, neighbor: 1 }
|
||||
],
|
||||
[
|
||||
{ id: 1, neighbor: 3 },
|
||||
{ id: 3 },
|
||||
{ id: 4, neighbor: 5 },
|
||||
{ id: 5, neighbor: 6 },
|
||||
{ id: 6, neighbor: 1 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
@@ -1,274 +0,0 @@
|
||||
|
||||
|
||||
// G6.registerNode('link-Queue-head', {
|
||||
// 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: '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,
|
||||
// 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 * (5 / 4),
|
||||
// textAlign: 'center',
|
||||
// textBaseline: 'middle',
|
||||
// text: 'rear',
|
||||
// fill: '#000',
|
||||
// fontSize: 16
|
||||
// },
|
||||
// name: 'rear'
|
||||
// });
|
||||
|
||||
// return wrapperRect;
|
||||
// },
|
||||
|
||||
// getAnchorPoints() {
|
||||
// return [
|
||||
// [1, 0.25],
|
||||
// [1, 0.75]
|
||||
// ];
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
class LinkQueue extends Engine {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
head: {
|
||||
type: 'rect',
|
||||
label: '[label]',
|
||||
size: [60, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
},
|
||||
node: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
front: {
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
rear: {
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
interaction: {
|
||||
dragNode: ['node']
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
sources.head[1].external = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
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();
|
||||
|
||||
for(let i = 0; i < roots.length; i++) {
|
||||
let root = roots[i],
|
||||
height = root.get('size')[1];
|
||||
|
||||
root.set('y', root.get('y') + i * (layoutOptions.yInterval + height));
|
||||
this.layoutItem(root, null, 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 });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
"LinkQueue": {
|
||||
"data": [
|
||||
{
|
||||
"type": "head",
|
||||
"name": "Qptr",
|
||||
"id": 6385328,
|
||||
"label": "front",
|
||||
"front": "node#6385360",
|
||||
"external": [
|
||||
"lq"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "head",
|
||||
"name": "Qptr",
|
||||
"id": 6385329,
|
||||
"label": "rear",
|
||||
"rear": "node#6385424",
|
||||
"external": null
|
||||
},
|
||||
{
|
||||
"id": 6385360,
|
||||
"data": "",
|
||||
"next": "node#6385424",
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"id": 6385424,
|
||||
"data": "F",
|
||||
"next": null,
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"id": 6385392,
|
||||
"data": "",
|
||||
"next": "node#6311952",
|
||||
"freed": true,
|
||||
"external": [
|
||||
"p"
|
||||
],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"id": 6311952,
|
||||
"data": "1",
|
||||
"next": null,
|
||||
"type": "node"
|
||||
}
|
||||
],
|
||||
"layouter": "LinkQueue"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
|
||||
|
||||
/**
|
||||
* 单链表
|
||||
*/
|
||||
class LinkStack extends Engine {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
next: {
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 30
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let height = node.get('size')[1];
|
||||
|
||||
if(prev) {
|
||||
node.set('x', prev.get('x'));
|
||||
node.set('y', prev.get('y') + layoutOptions.yInterval + height);
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements.default,
|
||||
rootNodes = [],
|
||||
node,
|
||||
i;
|
||||
|
||||
for(i = 0; i < nodes.length; i++) {
|
||||
node = nodes[i];
|
||||
|
||||
if(node.root) {
|
||||
rootNodes.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
for(i = 0; i < rootNodes.length; i++) {
|
||||
let root = rootNodes[i],
|
||||
width = root.get('size')[0];
|
||||
|
||||
root.set('x', root.get('x') + i * (layoutOptions.xInterval + width));
|
||||
this.layoutItem(root, null, layoutOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const LStack = function(container) {
|
||||
return{
|
||||
engine: new LinkStack(container),
|
||||
data: [[
|
||||
{ id: 1, root: true, next: 2 },
|
||||
{ id: 2, next: 3 },
|
||||
{ id: 3, next: 4 },
|
||||
{ id: 4, next: 5 },
|
||||
{ id: 5 },
|
||||
{ id: 6, root: true, next: 7 },
|
||||
{ id: 7, next: 8 },
|
||||
{ id: 8, next: 4 },
|
||||
{ id: 9, root: true, next: 10 },
|
||||
{ id: 10 }
|
||||
],
|
||||
[
|
||||
{ id: 1, root: true, next: 2 },
|
||||
{ id: 2, next: 3 },
|
||||
{ id: 3, next: 6 },
|
||||
{ id: 6, next: 7 },
|
||||
{ id: 7, next: 8 },
|
||||
{ id: 8 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class RingArray extends Engine {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'rect',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
dragNode: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
layout(elements) {
|
||||
let arr = elements.default,
|
||||
width = arr[0].get('size')[0],
|
||||
radius = width * 1.1 / (2 * Math.sin(Math.PI / arr.length)),
|
||||
intervalAngle = 2 * Math.PI / arr.length;
|
||||
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let [x, y] = Vector.rotation(-intervalAngle * i, [0, radius]);
|
||||
|
||||
arr[i].set({x, y});
|
||||
arr[i].set('rotation', intervalAngle * i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const RA = function(container) {
|
||||
return{
|
||||
engine: new RingArray(container),
|
||||
data: [[
|
||||
{ id: 1 },
|
||||
{ id: 2 },
|
||||
{ id: 3 },
|
||||
{ id: 4 },
|
||||
{ id: 5 },
|
||||
{ id: 6 },
|
||||
{ id: 7 },
|
||||
{ id: 8 },
|
||||
{ id: 9 },
|
||||
{ id: 10 }
|
||||
],
|
||||
[
|
||||
{ id: 1 },
|
||||
{ id: 2 },
|
||||
{ id: 3 },
|
||||
{ id: 6 },
|
||||
{ id: 7 },
|
||||
{ id: 8 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
@@ -1,71 +0,0 @@
|
||||
|
||||
|
||||
class Stack extends Engine {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'rect',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
dragNode: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let blocks = elements.default;
|
||||
|
||||
for(let i = 1; i < blocks.length; i++) {
|
||||
let item = blocks[i],
|
||||
prev = blocks[i - 1],
|
||||
height = item.get('size')[1];
|
||||
|
||||
item.set('y', prev.get('y') + height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const St = function(container) {
|
||||
return{
|
||||
engine: new Stack(container),
|
||||
data: [[
|
||||
{ id: 1 },
|
||||
{ id: 2 },
|
||||
{ id: 3 },
|
||||
{ id: 4 },
|
||||
{ id: 5 },
|
||||
{ id: 6 },
|
||||
{ id: 7 },
|
||||
{ id: 8 },
|
||||
{ id: 9 },
|
||||
{ id: 10 }
|
||||
],
|
||||
[
|
||||
{ id: 1 },
|
||||
{ id: 2 },
|
||||
{ id: 3 },
|
||||
{ id: 6 },
|
||||
{ id: 7 },
|
||||
{ id: 8 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
@@ -1,143 +0,0 @@
|
||||
|
||||
|
||||
/**
|
||||
* 单链表
|
||||
*/
|
||||
class LinkList extends Engine {
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'link-list-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#eaffd0'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
loopNext: {
|
||||
type: 'arc',
|
||||
curveOffset: 50,
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 3,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
external: {
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements,
|
||||
rootNodes = [],
|
||||
node,
|
||||
i;
|
||||
|
||||
for(i = 0; i < nodes.length; i++) {
|
||||
node = nodes[i];
|
||||
|
||||
if(node.root) {
|
||||
rootNodes.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
for(i = 0; i < rootNodes.length; i++) {
|
||||
let root = rootNodes[i],
|
||||
height = root.get('size')[1];
|
||||
|
||||
root.set('y', root.get('y') + i * (layoutOptions.yInterval + height));
|
||||
this.layoutItem(root, null, layoutOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const LList = function(container, options) {
|
||||
return{
|
||||
engine: new LinkList(container, options),
|
||||
data: [[
|
||||
{ id: 1, root: true, next: 2, external: ['gg'] },
|
||||
{ id: 2, next: 3 },
|
||||
{ id: 3, next: 4 },
|
||||
{ id: 4, next: 5 },
|
||||
{ id: 5, loopNext: 6 },
|
||||
{ id: 6, root: true, next: 7 },
|
||||
{ id: 7, next: 8 },
|
||||
{ id: 8, next: 4 },
|
||||
{ id: 9, root: true, next: 10 },
|
||||
{ id: 10, free: true }
|
||||
],
|
||||
[
|
||||
{ id: 1, root: true, next: 2 },
|
||||
{ id: 2, next: 3 },
|
||||
{ id: 3, next: 8, external: ['gg'] },
|
||||
{ id: 8, next: 12 },
|
||||
{ id: 12, next: 13 },
|
||||
{ id: 13 }
|
||||
],
|
||||
[
|
||||
{ id: 1, root: true, next: 2 },
|
||||
{ id: 2 }
|
||||
]]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
-137
@@ -1,137 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DEMO</title>
|
||||
<style>
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
</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 container">
|
||||
<div id="freed"></div>
|
||||
<div id="leak"></div>
|
||||
</div>
|
||||
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
|
||||
const Engine = SV.Engine,
|
||||
Group = SV.Group,
|
||||
Bound = SV.Bound,
|
||||
G6 = SV.G6,
|
||||
Vector = SV.Vector;
|
||||
|
||||
</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>
|
||||
<script src="./dataStruct/LinkStack.js"></script>
|
||||
<script src="./dataStruct/LinkQueue.js"></script>
|
||||
<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 = {
|
||||
0: BTree,
|
||||
1: LList,
|
||||
2: A,
|
||||
3: CHT,
|
||||
4: St,
|
||||
5: LStack,
|
||||
6: LQueue,
|
||||
7: G,
|
||||
8: DG,
|
||||
9: RA,
|
||||
10: GL
|
||||
};
|
||||
|
||||
let dataCounter = 0;
|
||||
|
||||
let cur = engines[1](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[++dataCounter]);
|
||||
});
|
||||
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
cur.engine.reLayout();
|
||||
});
|
||||
|
||||
|
||||
cur.engine.on('node:mouseover', evt => {
|
||||
console.log(evt);
|
||||
});
|
||||
|
||||
|
||||
const container = document.getElementById('container'),
|
||||
pos = document.getElementById('pos');
|
||||
|
||||
container.addEventListener('mousemove', e => {
|
||||
let x = e.offsetX, y = e.offsetY;
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user