修正demo目录
This commit is contained in:
黎智洲
parent
0ef21a6268
commit
8ff56da8db
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,4 +1,2 @@
|
|||||||
node_modules
|
node_modules
|
||||||
test
|
test
|
||||||
demoV2
|
|
||||||
demo
|
|
||||||
@ -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,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,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,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 }
|
|
||||||
]]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
137
demo/demo.html
137
demo/demo.html
@ -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
64
demoV2/Layouter/Array.js
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@ -1,9 +1,6 @@
|
|||||||
|
|
||||||
|
|
||||||
/**
|
SV.registerLayouter('BinaryTree', {
|
||||||
* 二叉树
|
|
||||||
*/
|
|
||||||
class BinaryTree extends Engine {
|
|
||||||
defineOptions() {
|
defineOptions() {
|
||||||
return {
|
return {
|
||||||
element: {
|
element: {
|
||||||
@ -21,7 +18,7 @@ class BinaryTree extends Engine {
|
|||||||
link: {
|
link: {
|
||||||
child: {
|
child: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
sourceAnchor: index => index + 1,
|
sourceAnchor: index => index === 0? 3: 1,
|
||||||
targetAnchor: 0,
|
targetAnchor: 0,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
@ -37,6 +34,7 @@ class BinaryTree extends Engine {
|
|||||||
},
|
},
|
||||||
pointer: {
|
pointer: {
|
||||||
external: {
|
external: {
|
||||||
|
anchor: 0,
|
||||||
offset: 14,
|
offset: 14,
|
||||||
style: {
|
style: {
|
||||||
fill: '#f08a5d'
|
fill: '#f08a5d'
|
||||||
@ -50,16 +48,13 @@ class BinaryTree extends Engine {
|
|||||||
},
|
},
|
||||||
layout: {
|
layout: {
|
||||||
xInterval: 40,
|
xInterval: 40,
|
||||||
yInterval: 40,
|
yInterval: 40
|
||||||
fitCenter: true
|
|
||||||
},
|
},
|
||||||
animation: {
|
behavior: {
|
||||||
enable: true,
|
// dragNode: false
|
||||||
duration: 750,
|
|
||||||
timingFunction: 'easePolyOut'
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 对子树进行递归布局
|
* 对子树进行递归布局
|
||||||
@ -119,7 +114,7 @@ class BinaryTree extends Engine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return group;
|
return group;
|
||||||
}
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 布局函数
|
* 布局函数
|
||||||
@ -127,71 +122,25 @@ class BinaryTree extends Engine {
|
|||||||
* @param {*} layoutOptions
|
* @param {*} layoutOptions
|
||||||
*/
|
*/
|
||||||
layout(elements, layoutOptions) {
|
layout(elements, layoutOptions) {
|
||||||
let nodes = elements,
|
let root = elements[0];
|
||||||
rootNodes = [],
|
this.layoutItem(root, null, -1, layoutOptions);
|
||||||
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": 6385328,
|
||||||
{ id: 2, child: [null, 6] },
|
"data": "",
|
||||||
{ id: 3, child: [5, 4] },
|
"external": [
|
||||||
{ id: 4, external: 'foo', child: [5, null] },
|
"L"
|
||||||
{ 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 }
|
|
||||||
],
|
],
|
||||||
[
|
"root": true,
|
||||||
{ id: 1, child: [2, 3], root: true, external: 'treeA' },
|
"after": null,
|
||||||
{ id: 2, external: 'gear' },
|
"next": null
|
||||||
{ id: 3, child: [5, 4] },
|
|
||||||
{ id: 4, external: 'foo' },
|
|
||||||
{ id: 5, child: [12, 13] },
|
|
||||||
{ id: 12 }, { id: 13 }
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
};
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -6,7 +6,7 @@
|
|||||||
/**
|
/**
|
||||||
* 连地址哈希表
|
* 连地址哈希表
|
||||||
*/
|
*/
|
||||||
class ChainHashTable extends Engine {
|
SV.registerLayouter('ChainHashTable', {
|
||||||
|
|
||||||
defineOptions() {
|
defineOptions() {
|
||||||
return {
|
return {
|
||||||
@ -34,7 +34,7 @@
|
|||||||
start: {
|
start: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
sourceAnchor: 1,
|
sourceAnchor: 1,
|
||||||
targetAnchor: 0,
|
targetAnchor: 5,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
endArrow: {
|
endArrow: {
|
||||||
@ -49,8 +49,8 @@
|
|||||||
},
|
},
|
||||||
next: {
|
next: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
sourceAnchor: 1,
|
sourceAnchor: 2,
|
||||||
targetAnchor: 0,
|
targetAnchor: 6,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
endArrow: {
|
endArrow: {
|
||||||
@ -66,6 +66,7 @@
|
|||||||
},
|
},
|
||||||
pointer: {
|
pointer: {
|
||||||
external: {
|
external: {
|
||||||
|
anchor: 3,
|
||||||
offset: 8,
|
offset: 8,
|
||||||
style: {
|
style: {
|
||||||
fill: '#f08a5d'
|
fill: '#f08a5d'
|
||||||
@ -80,7 +81,7 @@
|
|||||||
dragNode: ['node']
|
dragNode: ['node']
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -103,7 +104,7 @@
|
|||||||
if(node.next) {
|
if(node.next) {
|
||||||
this.layoutItem(node.next, node, layoutOptions);
|
this.layoutItem(node.next, node, layoutOptions);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
layout(elements, 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
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
@ -68,33 +68,35 @@ SV.registerShape('three-cell-node', {
|
|||||||
|
|
||||||
getAnchorPoints() {
|
getAnchorPoints() {
|
||||||
return [
|
return [
|
||||||
[0, 0.5],
|
[1 / 6, 0],
|
||||||
[0.5, 0.5],
|
|
||||||
[0.5, 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() {
|
defineOptions() {
|
||||||
return {
|
return {
|
||||||
element: {
|
element: {
|
||||||
tableNode: {
|
table: {
|
||||||
type: 'three-cell-node',
|
type: 'three-cell-node',
|
||||||
label: '[tag]',
|
label: '[id]',
|
||||||
size: [90, 30],
|
size: [90, 30],
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
fill: '#b83b5e'
|
fill: '#b83b5e'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
atomNode: {
|
atom: {
|
||||||
type: 'two-cell-node',
|
type: 'two-cell-node',
|
||||||
label: '[tag]',
|
label: ['[id]', 'dcd'],
|
||||||
size: [60, 30],
|
size: [60, 30],
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
@ -105,8 +107,8 @@ class GeneralizedList extends Engine {
|
|||||||
link: {
|
link: {
|
||||||
sub: {
|
sub: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
sourceAnchor: 1,
|
sourceAnchor: 2,
|
||||||
targetAnchor: 2,
|
targetAnchor: 0,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
endArrow: {
|
endArrow: {
|
||||||
@ -122,7 +124,7 @@ class GeneralizedList extends Engine {
|
|||||||
next: {
|
next: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
sourceAnchor: 3,
|
sourceAnchor: 3,
|
||||||
targetAnchor: 0,
|
targetAnchor: 5,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
endArrow: {
|
endArrow: {
|
||||||
@ -141,7 +143,7 @@ class GeneralizedList extends Engine {
|
|||||||
yInterval: 20,
|
yInterval: 20,
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 对子树进行递归布局
|
* 对子树进行递归布局
|
||||||
@ -149,6 +151,10 @@ class GeneralizedList extends Engine {
|
|||||||
* @param parent
|
* @param parent
|
||||||
*/
|
*/
|
||||||
layoutItem(node, prev, layoutOptions) {
|
layoutItem(node, prev, layoutOptions) {
|
||||||
|
if(!node) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
let [width, height] = node.get('size');
|
let [width, height] = node.get('size');
|
||||||
|
|
||||||
if(prev) {
|
if(prev) {
|
||||||
@ -166,7 +172,7 @@ class GeneralizedList extends Engine {
|
|||||||
|
|
||||||
// 子结点还是广义表
|
// 子结点还是广义表
|
||||||
if(node.sub.tag === 1) {
|
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);
|
this.layoutItem(node.sub, null, layoutOptions);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
@ -174,42 +180,12 @@ class GeneralizedList extends Engine {
|
|||||||
node.sub.set('x', node.get('x') + width - subWidth);
|
node.sub.set('x', node.get('x') + width - subWidth);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
|
||||||
layout(elements, layoutOptions) {
|
layout(elements, layoutOptions) {
|
||||||
let tableNodes = elements.tableNode,
|
let tableNodes = elements.filter(item => item.type === 'table'),
|
||||||
tableRootNode = null;
|
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
95
demoV2/Layouter/HashTable.js
Normal 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'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@ -1,9 +1,18 @@
|
|||||||
|
|
||||||
|
|
||||||
/**
|
SV.registerLayouter('LinkList', {
|
||||||
* 单链表
|
|
||||||
*/
|
sourcesPreprocess(sources) {
|
||||||
class LinkList extends Engine {
|
let root = sources[0];
|
||||||
|
|
||||||
|
if(root.external) {
|
||||||
|
root.rootExternal = root.external;
|
||||||
|
delete root.external;
|
||||||
|
}
|
||||||
|
|
||||||
|
return sources;
|
||||||
|
},
|
||||||
|
|
||||||
defineOptions() {
|
defineOptions() {
|
||||||
return {
|
return {
|
||||||
element: {
|
element: {
|
||||||
@ -13,15 +22,16 @@ class LinkList extends Engine {
|
|||||||
size: [60, 30],
|
size: [60, 30],
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
fill: '#eaffd0'
|
fill: '#eaffd0',
|
||||||
|
cursor: 'pointer'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
link: {
|
link: {
|
||||||
next: {
|
next: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
sourceAnchor: 1,
|
sourceAnchor: 2,
|
||||||
targetAnchor: 0,
|
targetAnchor: 6,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
endArrow: 'default',
|
endArrow: 'default',
|
||||||
@ -34,8 +44,8 @@ class LinkList extends Engine {
|
|||||||
loopNext: {
|
loopNext: {
|
||||||
type: 'arc',
|
type: 'arc',
|
||||||
curveOffset: 50,
|
curveOffset: 50,
|
||||||
sourceAnchor: 1,
|
sourceAnchor: 2,
|
||||||
targetAnchor: 3,
|
targetAnchor: 4,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
endArrow: 'default',
|
endArrow: 'default',
|
||||||
@ -46,8 +56,18 @@ class LinkList extends Engine {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pointer: {
|
marker: {
|
||||||
|
rootExternal: {
|
||||||
|
type: 'cursor',
|
||||||
|
anchor: 6,
|
||||||
|
offset: 8,
|
||||||
|
style: {
|
||||||
|
fill: '#f08a5d'
|
||||||
|
}
|
||||||
|
},
|
||||||
external: {
|
external: {
|
||||||
|
type: 'cursor',
|
||||||
|
anchor: 0,
|
||||||
offset: 8,
|
offset: 8,
|
||||||
style: {
|
style: {
|
||||||
fill: '#f08a5d'
|
fill: '#f08a5d'
|
||||||
@ -59,7 +79,7 @@ class LinkList extends Engine {
|
|||||||
yInterval: 50
|
yInterval: 50
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -82,62 +102,33 @@ class LinkList extends Engine {
|
|||||||
if(node.next) {
|
if(node.next) {
|
||||||
this.layoutItem(node.next, node, layoutOptions);
|
this.layoutItem(node.next, node, layoutOptions);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
layout(elements, layoutOptions) {
|
layout(elements, layoutOptions) {
|
||||||
let nodes = elements,
|
let root = elements[0];
|
||||||
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);
|
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
148
demoV2/Layouter/LinkQueue.js
Normal 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 });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@ -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() {
|
defineOptions() {
|
||||||
return {
|
return {
|
||||||
element: {
|
element: {
|
||||||
default: {
|
default: {
|
||||||
type: 'link-list-node',
|
type: 'link-list-node',
|
||||||
label: '[id]',
|
label: '[data]',
|
||||||
size: [60, 30],
|
size: [60, 30],
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
@ -20,8 +31,8 @@
|
|||||||
link: {
|
link: {
|
||||||
next: {
|
next: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
sourceAnchor: 1,
|
sourceAnchor: 2,
|
||||||
targetAnchor: 2,
|
targetAnchor: 4,
|
||||||
style: {
|
style: {
|
||||||
stroke: '#333',
|
stroke: '#333',
|
||||||
endArrow: {
|
endArrow: {
|
||||||
@ -35,8 +46,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pointer: {
|
marker: {
|
||||||
|
headExternal: {
|
||||||
|
anchor: 5,
|
||||||
|
type: 'pointer',
|
||||||
|
offset: 8,
|
||||||
|
style: {
|
||||||
|
fill: '#f08a5d'
|
||||||
|
}
|
||||||
|
},
|
||||||
external: {
|
external: {
|
||||||
|
anchor: 3,
|
||||||
|
type: 'pointer',
|
||||||
offset: 8,
|
offset: 8,
|
||||||
style: {
|
style: {
|
||||||
fill: '#f08a5d'
|
fill: '#f08a5d'
|
||||||
@ -44,11 +65,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
layout: {
|
layout: {
|
||||||
xInterval: 50,
|
|
||||||
yInterval: 30
|
yInterval: 30
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -65,64 +85,21 @@
|
|||||||
|
|
||||||
if(prev) {
|
if(prev) {
|
||||||
node.set('x', prev.get('x'));
|
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) {
|
if(node.next) {
|
||||||
this.layoutItem(node.next, node, layoutOptions);
|
this.layoutItem(node.next, node, layoutOptions);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
layout(elements, layoutOptions) {
|
layout(elements, layoutOptions) {
|
||||||
let nodes = elements.default,
|
this.layoutItem(elements[0], null, layoutOptions);
|
||||||
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 }
|
|
||||||
]]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
71
demoV2/Layouter/Stack.js
Normal file
71
demoV2/Layouter/Stack.js
Normal 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
133
demoV2/demo2.html
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user