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

修正demo目录

Browse Source
This commit is contained in:
黎智洲 2021-08-01 00:43:01 +08:00
parent 0ef21a6268
commit 8ff56da8db
18 changed files with 654 additions and 1067 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,4 +1,2 @@
node_modules
test
demoV2
demo

72
demo/dataStruct/Array.js
View File

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

66
demo/dataStruct/DirectedGraph.js
View File

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

73
demo/dataStruct/Graph.js
View File

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

274
demo/dataStruct/LinkQueue.js
View File

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

74
demo/dataStruct/RingArray.js
View File

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

71
demo/dataStruct/Stack.js
View File

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

137
demo/demo.html
View File

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

64
demoV2/Layouter/Array.js Normal file
View File

@ -0,0 +1,64 @@
SV.registerLayouter('Array', {
sourcesPreprocess(sources) {
const firstElement = sources[0];
if(firstElement.external) {
firstElement.headExternal = firstElement.external;
delete firstElement.external;
}
return sources;
},
defineOptions() {
return {
element: {
default: {
type: 'indexed-node',
label: '[data]',
size: [60, 30],
style: {
stroke: '#333',
fill: '#95e1d3'
}
}
},
marker: {
headExternal: {
type: 'pointer',
anchor: 3,
style: {
fill: '#f08a5d'
}
},
external: {
type: 'pointer',
anchor: 0,
style: {
fill: '#f08a5d'
}
}
},
behavior: {
dragNode: false
}
};
},
layout(elements) {
let arr = elements;
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);
}
}
}
});

101
demo/dataStruct/BinaryTree.js → demoV2/Layouter/BinaryTree.js
View File

@ -1,9 +1,6 @@
/**
* 二叉树
*/
class BinaryTree extends Engine {
SV.registerLayouter('BinaryTree', {
defineOptions() {
return {
element: {
@ -21,7 +18,7 @@ class BinaryTree extends Engine {
link: {
child: {
type: 'line',
sourceAnchor: index => index + 1,
sourceAnchor: index => index === 0? 3: 1,
targetAnchor: 0,
style: {
stroke: '#333',
@ -37,6 +34,7 @@ class BinaryTree extends Engine {
},
pointer: {
external: {
anchor: 0,
offset: 14,
style: {
fill: '#f08a5d'
@ -50,16 +48,13 @@ class BinaryTree extends Engine {
},
layout: {
xInterval: 40,
yInterval: 40,
fitCenter: true
yInterval: 40
},
animation: {
enable: true,
duration: 750,
timingFunction: 'easePolyOut'
behavior: {
// dragNode: false
}
};
}
},
/**
* 对子树进行递归布局
@ -119,7 +114,7 @@ class BinaryTree extends Engine {
}
return group;
}
},
/**
* 布局函数
@ -127,71 +122,25 @@ class BinaryTree extends Engine {
* @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);
}
let root = elements[0];
this.layoutItem(root, null, -1, layoutOptions);
}
};
});
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 }
]
]
[
{
"id": 6385328,
"data": "",
"external": [
"L"
],
"root": true,
"after": null,
"next": null
}
};
]

66
demo/dataStruct/ChainHashTable.js → demoV2/Layouter/ChainHashTable.js
View File

@ -6,7 +6,7 @@
/**
* 连地址哈希表
*/
class ChainHashTable extends Engine {
SV.registerLayouter('ChainHashTable', {
defineOptions() {
return {
@ -34,7 +34,7 @@
start: {
type: 'line',
sourceAnchor: 1,
targetAnchor: 0,
targetAnchor: 5,
style: {
stroke: '#333',
endArrow: {
@ -49,8 +49,8 @@
},
next: {
type: 'line',
sourceAnchor: 1,
targetAnchor: 0,
sourceAnchor: 2,
targetAnchor: 6,
style: {
stroke: '#333',
endArrow: {
@ -66,6 +66,7 @@
},
pointer: {
external: {
anchor: 3,
offset: 8,
style: {
fill: '#f08a5d'
@ -80,7 +81,7 @@
dragNode: ['node']
}
};
}
},
/**
@ -103,7 +104,7 @@
if(node.next) {
this.layoutItem(node.next, node, layoutOptions);
}
}
},
layout(elements, layoutOptions) {
@ -124,58 +125,9 @@
}
}
}
}
});
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
}]
}
]
}
};

72
demo/dataStruct/GeneralizedList.js → demoV2/Layouter/GeneralizedList.js
View File

@ -68,33 +68,35 @@ SV.registerShape('three-cell-node', {
getAnchorPoints() {
return [
[0, 0.5],
[0.5, 0.5],
[1 / 6, 0],
[0.5, 0],
[5 / 6, 0.5]
[0.5, 0.5],
[5 / 6, 0.5],
[0.5, 1],
[0, 0.5]
];
}
});
class GeneralizedList extends Engine {
SV.registerLayouter('GeneralizedList', {
defineOptions() {
return {
element: {
tableNode: {
table: {
type: 'three-cell-node',
label: '[tag]',
label: '[id]',
size: [90, 30],
style: {
stroke: '#333',
fill: '#b83b5e'
}
},
atomNode: {
atom: {
type: 'two-cell-node',
label: '[tag]',
label: ['[id]', 'dcd'],
size: [60, 30],
style: {
stroke: '#333',
@ -105,8 +107,8 @@ class GeneralizedList extends Engine {
link: {
sub: {
type: 'line',
sourceAnchor: 1,
targetAnchor: 2,
sourceAnchor: 2,
targetAnchor: 0,
style: {
stroke: '#333',
endArrow: {
@ -122,7 +124,7 @@ class GeneralizedList extends Engine {
next: {
type: 'line',
sourceAnchor: 3,
targetAnchor: 0,
targetAnchor: 5,
style: {
stroke: '#333',
endArrow: {
@ -141,7 +143,7 @@ class GeneralizedList extends Engine {
yInterval: 20,
}
};
}
},
/**
* 对子树进行递归布局
@ -149,6 +151,10 @@ class GeneralizedList extends Engine {
* @param parent
*/
layoutItem(node, prev, layoutOptions) {
if(!node) {
return;
}
let [width, height] = node.get('size');
if(prev) {
@ -166,7 +172,7 @@ class GeneralizedList extends Engine {
// 子结点还是广义表
if(node.sub.tag === 1) {
node.sub.set('x', node.get('x'));
node.sub.set('x', node.get('x') + width / 3);
this.layoutItem(node.sub, null, layoutOptions);
}
else {
@ -174,42 +180,12 @@ class GeneralizedList extends Engine {
node.sub.set('x', node.get('x') + width - subWidth);
}
}
}
},
layout(elements, layoutOptions) {
let tableNodes = elements.tableNode,
tableRootNode = null;
let tableNodes = elements.filter(item => item.type === 'table'),
tableRootNode = tableNodes.filter(item => item.root)[0];
for(let i = 0; i < tableNodes.length; i++) {
if(tableNodes[i].root) {
tableRootNode = tableNodes[i];
break;
}
}
if(tableRootNode) {
this.layoutItem(tableRootNode, null, layoutOptions);
}
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"
]
}
]
}]
}
};
})

95
demoV2/Layouter/HashTable.js Normal file
View File

@ -0,0 +1,95 @@
SV.registerLayouter('HashTable', {
sourcesPreprocess(sources) {
const firstElement = sources[0];
if(firstElement.external) {
firstElement.headExternal = firstElement.external;
delete firstElement.external;
}
if(firstElement.cursor) {
firstElement.headCursor = firstElement.cursor;
delete firstElement.cursor;
}
return sources;
},
defineOptions() {
return {
element: {
default: {
type: 'indexed-node',
label: '[data]',
size: [60, 30],
style: {
stroke: '#333',
fill: '#95e1d3'
}
}
},
marker: {
headExternal: {
type: 'pointer',
anchor: 3,
style: {
fill: '#f08a5d'
}
},
external: {
type: 'pointer',
anchor: 0,
style: {
fill: '#f08a5d'
}
},
headCursor: {
type: 'cursor',
anchor: 3,
style: {
fill: '#f08a5d'
}
},
cursor: {
type: 'cursor',
anchor: 0,
style: {
fill: '#f08a5d'
}
}
},
behavior: {
dragNode: false
}
};
},
layout(elements) {
let arr = elements;
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);
}
if(arr[i].empty) {
arr[i].set('style', {
fill: null
});
}
if(arr[i].disable) {
arr[i].set('style', {
fill: '#ccc'
});
}
}
}
});

113
demo/dataStruct/linkList.js → demoV2/Layouter/LinkList.js
View File

@ -1,9 +1,18 @@
/**
* 单链表
*/
class LinkList extends Engine {
SV.registerLayouter('LinkList', {
sourcesPreprocess(sources) {
let root = sources[0];
if(root.external) {
root.rootExternal = root.external;
delete root.external;
}
return sources;
},
defineOptions() {
return {
element: {
@ -13,15 +22,16 @@ class LinkList extends Engine {
size: [60, 30],
style: {
stroke: '#333',
fill: '#eaffd0'
fill: '#eaffd0',
cursor: 'pointer'
}
}
},
link: {
next: {
type: 'line',
sourceAnchor: 1,
targetAnchor: 0,
sourceAnchor: 2,
targetAnchor: 6,
style: {
stroke: '#333',
endArrow: 'default',
@ -34,8 +44,8 @@ class LinkList extends Engine {
loopNext: {
type: 'arc',
curveOffset: 50,
sourceAnchor: 1,
targetAnchor: 3,
sourceAnchor: 2,
targetAnchor: 4,
style: {
stroke: '#333',
endArrow: 'default',
@ -46,8 +56,18 @@ class LinkList extends Engine {
}
}
},
pointer: {
marker: {
rootExternal: {
type: 'cursor',
anchor: 6,
offset: 8,
style: {
fill: '#f08a5d'
}
},
external: {
type: 'cursor',
anchor: 0,
offset: 8,
style: {
fill: '#f08a5d'
@ -59,7 +79,7 @@ class LinkList extends Engine {
yInterval: 50
}
};
}
},
/**
@ -82,62 +102,33 @@ class LinkList extends Engine {
if(node.next) {
this.layoutItem(node.next, node, layoutOptions);
}
}
},
layout(elements, layoutOptions) {
let nodes = elements,
rootNodes = [],
node,
i;
let root = elements[0];
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);
}
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 }
]]
}
};

148
demoV2/Layouter/LinkQueue.js Normal file
View File

@ -0,0 +1,148 @@
SV.registerLayouter('LinkQueue', {
defineOptions() {
return {
element: {
head: {
type: 'rect',
label: '[label]',
size: [60, 40],
anchorPoints: [
[0.5, 0],
[1, 0.5],
[0.5, 1],
[0, 0.5]
],
style: {
stroke: '#333',
fill: null
}
},
node: {
type: 'link-list-node',
label: '[data]',
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: 2,
targetAnchor: 6,
style: {
stroke: '#333',
endArrow: {
path: G6.Arrow.triangle(8, 6, 0),
fill: '#333'
},
startArrow: {
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
}
},
marker: {
external: {
type: 'pointer',
offset: 8,
style: {
fill: '#f08a5d'
}
}
},
layout: {
xInterval: 50,
yInterval: 50
},
behavior: {
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 head = elements.filter(item => item.type === 'head'),
head1 = head[0],
head2 = head[1],
nodes = elements.filter(item => item.type !== 'head'),
mainRoot = nodes.findIndex(item => item.root && head1.front === item),
roots = nodes.filter(item => item.root),
headHeight = head1.get('size')[1],
nodeHeight = 0,
x = 0, y = 0;
if(nodes.length) {
mainRoot = roots.splice(mainRoot, 1)[0];
roots.unshift(mainRoot);
x = -50;
y = mainRoot.get('y');
nodeHeight = mainRoot.get('size')[1];
roots.forEach((item, index) => {
item.set('y', -index * (nodeHeight + layoutOptions.yInterval));
this.layoutItem(item, null, layoutOptions);
});
}
head1.set({ x, y: y + nodeHeight * 3 });
head2.set({ x, y: head1.get('y') + headHeight });
}
});

87
demo/dataStruct/LinkStack.js → demoV2/Layouter/LinkStack.js
View File

@ -3,13 +3,24 @@
/**
* 单链表
*/
class LinkStack extends Engine {
SV.registerLayouter('LinkStack', {
sourcesPreprocess(sources) {
const headNode = sources[0];
if(headNode.external) {
headNode.headExternal = headNode.external;
delete headNode.external;
}
return sources;
},
defineOptions() {
return {
element: {
default: {
type: 'link-list-node',
label: '[id]',
label: '[data]',
size: [60, 30],
style: {
stroke: '#333',
@ -20,8 +31,8 @@
link: {
next: {
type: 'line',
sourceAnchor: 1,
targetAnchor: 2,
sourceAnchor: 2,
targetAnchor: 4,
style: {
stroke: '#333',
endArrow: {
@ -35,8 +46,18 @@
}
}
},
pointer: {
marker: {
headExternal: {
anchor: 5,
type: 'pointer',
offset: 8,
style: {
fill: '#f08a5d'
}
},
external: {
anchor: 3,
type: 'pointer',
offset: 8,
style: {
fill: '#f08a5d'
@ -44,11 +65,10 @@
}
},
layout: {
xInterval: 50,
yInterval: 30
}
};
}
},
/**
@ -65,64 +85,21 @@
if(prev) {
node.set('x', prev.get('x'));
node.set('y', prev.get('y') + layoutOptions.yInterval + height);
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);
}
this.layoutItem(elements[0], 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 }
]]
}
};

71
demoV2/Layouter/Stack.js Normal file
View File

@ -0,0 +1,71 @@
SV.registerLayouter('Stack', {
sourcesPreprocess(sources, options) {
const stackBottomNode = sources[sources.length - 1];
if(stackBottomNode.external) {
stackBottomNode.bottomExternal = stackBottomNode.external;
delete stackBottomNode.external;
}
if(options.layout.indexPosition) {
sources.forEach(item => {
item.indexPosition = options.layout.indexPosition;
});
}
return sources;
},
defineOptions() {
return {
element: {
default: {
type: 'indexed-node',
label: '[id]',
size: [60, 30],
style: {
stroke: '#333',
fill: '#95e1d3'
}
}
},
pointer: {
external: {
anchor: 1,
style: {
fill: '#f08a5d'
}
},
bottomExternal: {
anchor: 2,
style: {
fill: '#f08a5d'
}
}
},
layout: {
indexPosition: 'left'
},
behavior: {
dragNode: false
}
};
},
layout(elements, layoutOptions) {
let blocks = elements;
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);
}
}
})

133
demoV2/demo2.html Normal file
View File

@ -0,0 +1,133 @@
<!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-prev">prev</button>
<button id="btn-next">next</button>
<button id="hide">隐藏</button>
<span id="pos"></span>
<div class="down">
<div id="freed"></div>
<div id="leak"></div>
</div>
<script src="./../dist/sv.js"></script>
<script>
const Group = SV.Group,
Bound = SV.Bound,
G6 = SV.G6,
Vector = SV.Vector;
</script>
<script src="./Layouter/LinkList.js"></script>
<script src="./Layouter/BinaryTree.js"></script>
<script src="./Layouter/Stack.js"></script>
<script src="./Layouter/LinkQueue.js"></script>
<script src="./Layouter/GeneralizedList.js"></script>
<script src="./Layouter/ChainHashTable.js"></script>
<script src="./Layouter/Array.js"></script>
<script src="./Layouter/HashTable.js"></script>
<script src="./Layouter/LinkStack.js"></script>
<script>
let cur = SV(document.getElementById('container'), {
freedContainer: document.getElementById('freed'),
leakContainer: document.getElementById('leak')
});
let dataIndex = 0,
curData = data[dataIndex];
cur.render(curData);
let f = true;
document.getElementById('hide').addEventListener('click', e => {
f ? cur.hideGroups(['BinaryTree']) : cur.hideGroups(['LinkList']);
f = !f;
});
document.getElementById('btn-next').addEventListener('click', e => {
curData = data[++dataIndex];
cur.render(curData);
});
document.getElementById('btn-prev').addEventListener('click', e => {
curData = data[--dataIndex]
cur.render(curData);
});
cur.on('onLeak', () => { });
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>