Merge branch 'main' of https://gitlab.com/phenomLi/StructV2 into main
# Conflicts: # demo/Layouter/Force.js # src/Model/SVModel.ts # src/StructV.ts # src/View/renderer.ts # src/View/viewContainer.ts # src/engine.ts
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
|
||||
const isNeighbor = function (itemA, itemB) {
|
||||
let neighborA = itemA.neighbor,
|
||||
neighborB = itemB.neighbor;
|
||||
|
||||
if (neighborA === undefined && neighborB === undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (neighborA && neighborA.includes(itemB.id)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (neighborB && neighborB.includes(itemA.id)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
SV.registerLayout('AdjoinMatrixGraph', {
|
||||
sourcesPreprocess(sources) {
|
||||
let dataLength = sources.length;
|
||||
let matrixNodeLength = dataLength * dataLength;
|
||||
let matrixNodes = [];
|
||||
let i, j;
|
||||
|
||||
for (i = 0; i < matrixNodeLength; i++) {
|
||||
matrixNodes.push({
|
||||
id: `mn-${i}`,
|
||||
type: 'matrixNode',
|
||||
indexTop: i < dataLength ? sources[i].id : undefined,
|
||||
indexLeft: i % dataLength === 0? sources[i / dataLength].id : undefined,
|
||||
data: 0
|
||||
});
|
||||
}
|
||||
|
||||
for (i = 0; i < dataLength; i++) {
|
||||
for (j = 0; j < dataLength; j++) {
|
||||
let itemI = sources[i],
|
||||
itemJ = sources[j];
|
||||
|
||||
if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
|
||||
matrixNodes[i * dataLength + j].data = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sources.push(...matrixNodes);
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'circle',
|
||||
label: '[id]',
|
||||
size: 40,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
matrixNode: {
|
||||
type: 'indexed-node',
|
||||
label: '[data]',
|
||||
size: [40, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
},
|
||||
indexOptions: {
|
||||
indexTop: { position: 'top' },
|
||||
indexLeft: { position: 'left' }
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
neighbor: {
|
||||
style: {
|
||||
stroke: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
radius: 150,
|
||||
interval: 250
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['default']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements.filter(item => item.type === 'default'),
|
||||
matrixNodes = elements.filter(item => item.type === 'matrixNode'),
|
||||
nodeLength = nodes.length,
|
||||
matrixNodeLength = matrixNodes.length,
|
||||
{ interval, radius } = layoutOptions,
|
||||
intervalAngle = 2 * Math.PI / nodes.length,
|
||||
matrixNodeSize = matrixNodes[0].get('size')[0],
|
||||
i;
|
||||
|
||||
const matrixY = -radius,
|
||||
matrixX = interval;
|
||||
|
||||
for (i = 0; i < nodeLength; i++) {
|
||||
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
|
||||
|
||||
nodes[i].set({ x, y });
|
||||
}
|
||||
|
||||
for (i = 0; i < matrixNodeLength; i++) {
|
||||
let x = matrixX + (i % nodeLength) * matrixNodeSize;
|
||||
y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
|
||||
|
||||
matrixNodes[i].set({ x, y });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('AdjoinTableGraph', {
|
||||
|
||||
sourcesPreprocess(sources, options) {
|
||||
let dataLength = sources.length;
|
||||
let tableHeadNodes = [];
|
||||
let nodeMap = {};
|
||||
let i;
|
||||
|
||||
|
||||
for (i = 0; i < dataLength; i++) {
|
||||
let graphNode = sources[i];
|
||||
|
||||
tableHeadNodes.push({
|
||||
id: `table-head-node-${i}`,
|
||||
type: 'tableHeadNode',
|
||||
data: graphNode.id
|
||||
});
|
||||
|
||||
nodeMap[graphNode.id] = {
|
||||
node: graphNode,
|
||||
order: i,
|
||||
neighbor: []
|
||||
};
|
||||
}
|
||||
|
||||
Object.keys(nodeMap).map(key => {
|
||||
let nodeData = nodeMap[key],
|
||||
neighbor = nodeData.node.neighbor;
|
||||
|
||||
if (neighbor === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
neighbor.forEach((item, index) => {
|
||||
let targetNodeData = nodeMap[item];
|
||||
|
||||
nodeData.neighbor.push({
|
||||
id: `${key}-table-node-${item}`,
|
||||
type: 'tableNode',
|
||||
data: item.toString(),
|
||||
order: targetNodeData.order
|
||||
});
|
||||
|
||||
targetNodeData.neighbor.push({
|
||||
id: `${item}-table-node-${key}`,
|
||||
type: 'tableNode',
|
||||
data: key.toString(),
|
||||
order: nodeData.order
|
||||
});
|
||||
});
|
||||
|
||||
Object.keys(nodeMap).map(key => {
|
||||
let nodeData = nodeMap[key],
|
||||
neighbor = nodeData.neighbor;
|
||||
|
||||
if (neighbor === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
neighbor.sort((n1, n2) => {
|
||||
return n1.order - n2.order;
|
||||
});
|
||||
|
||||
for(let i = 0; i < neighbor.length; i++) {
|
||||
if(neighbor[i + 1]) {
|
||||
neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
tableHeadNodes.forEach(item => {
|
||||
let nodeData = nodeMap[item.data],
|
||||
neighbor = nodeData.neighbor;
|
||||
|
||||
if(neighbor.length) {
|
||||
item.headNext = `tableNode#${neighbor[0].id}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
sources.push(...tableHeadNodes);
|
||||
Object.keys(nodeMap).map(key => {
|
||||
let nodeData = nodeMap[key],
|
||||
neighbor = nodeData.neighbor;
|
||||
|
||||
sources.push(...neighbor);
|
||||
});
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'circle',
|
||||
label: '[id]',
|
||||
size: 40,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
tableHeadNode: {
|
||||
type: 'two-cell-node',
|
||||
label: '[data]',
|
||||
size: [70, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
tableNode: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
neighbor: {
|
||||
style: {
|
||||
stroke: '#333'
|
||||
}
|
||||
},
|
||||
headNext: {
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
radius: 150,
|
||||
interval: 250,
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['default', 'tableNode']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @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.filter(item => item.type === 'default'),
|
||||
tableHeadNode = elements.filter(item => item.type === 'tableHeadNode'),
|
||||
nodeLength = nodes.length,
|
||||
{ radius } = layoutOptions,
|
||||
intervalAngle = 2 * Math.PI / nodes.length,
|
||||
i;
|
||||
|
||||
for (i = 0; i < nodeLength; i++) {
|
||||
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
|
||||
|
||||
nodes[i].set({ x, y });
|
||||
}
|
||||
|
||||
const tableY = -radius,
|
||||
tableX = radius + 20;
|
||||
|
||||
for(i = 0; i < tableHeadNode.length; i++) {
|
||||
let node = tableHeadNode[i],
|
||||
height = node.get('size')[1];
|
||||
|
||||
node.set({
|
||||
x: tableX,
|
||||
y: tableY + node.get('y') + i * height
|
||||
});
|
||||
|
||||
if(node.headNext) {
|
||||
let y = node.get('y') + height - node.headNext.get('size')[1],
|
||||
x = tableX + layoutOptions.xInterval * 2.5;
|
||||
|
||||
node.headNext.set({ x, y });
|
||||
this.layoutItem(node.headNext, null, layoutOptions);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('Array', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
const firstElement = sources[0];
|
||||
|
||||
if (firstElement.external) {
|
||||
firstElement.headExternal = firstElement.external;
|
||||
delete firstElement.external;
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineLeakRule(nodes) {
|
||||
return [];
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
default: {
|
||||
type: 'array-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
labelOptions: {
|
||||
style: { fontSize: 20 }
|
||||
},
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
headExternal: {
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
indexLabel: {
|
||||
index: { position: 'bottom' },
|
||||
indexRight: { position: 'right' }
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
SV.registerLayout('BinaryTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
default: {
|
||||
type: 'binary-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#b83b5e',
|
||||
stroke: '#333',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
},
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => (index === 0 ? 3 : 1),
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
offset: 14,
|
||||
style: {
|
||||
fill: '#f08a5d',
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
fill: '#000099',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
},
|
||||
behavior: {
|
||||
// dragNode: false
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
*/
|
||||
layoutItem(node, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let bound = node.getBound(),
|
||||
width = bound.width,
|
||||
height = bound.height,
|
||||
group = new Group(node),
|
||||
leftGroup = null,
|
||||
rightGroup = null,
|
||||
leftBound = null,
|
||||
rightBound = null;
|
||||
|
||||
if (node.visited) {
|
||||
return null;
|
||||
}
|
||||
|
||||
node.visited = true;
|
||||
|
||||
if (node.child && node.child[0]) {
|
||||
leftGroup = this.layoutItem(node.child[0], layoutOptions);
|
||||
}
|
||||
|
||||
if (node.child && node.child[1]) {
|
||||
rightGroup = this.layoutItem(node.child[1], layoutOptions);
|
||||
}
|
||||
|
||||
if (leftGroup) {
|
||||
leftBound = leftGroup.getBound();
|
||||
node.set('y', leftBound.y - layoutOptions.yInterval - height);
|
||||
}
|
||||
|
||||
if (rightGroup) {
|
||||
rightBound = rightGroup.getBound();
|
||||
|
||||
if (leftGroup) {
|
||||
rightGroup.translate(0, leftBound.y - rightBound.y)
|
||||
}
|
||||
|
||||
rightBound = rightGroup.getBound();
|
||||
node.set('y', rightBound.y - layoutOptions.yInterval - height);
|
||||
}
|
||||
|
||||
// 处理左右子树相交问题
|
||||
if (leftGroup && rightGroup) {
|
||||
let move = Math.abs(rightBound.x - layoutOptions.xInterval - leftBound.x - leftBound.width);
|
||||
if (move > 0) {
|
||||
leftGroup.translate(-move / 2, 0);
|
||||
rightGroup.translate(move / 2, 0);
|
||||
}
|
||||
}
|
||||
|
||||
if (leftGroup) {
|
||||
leftBound = leftGroup.getBound();
|
||||
node.set('x', leftBound.x + leftBound.width + layoutOptions.xInterval / 2 - width);
|
||||
}
|
||||
|
||||
if (rightGroup) {
|
||||
rightBound = rightGroup.getBound();
|
||||
node.set('x', rightBound.x - layoutOptions.xInterval / 2 - width);
|
||||
}
|
||||
|
||||
|
||||
if (leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
|
||||
if (rightGroup) {
|
||||
group.add(rightGroup);
|
||||
}
|
||||
|
||||
return group;
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
* @param {*} elements
|
||||
* @param {*} layoutOptions
|
||||
*/
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
this.layoutItem(root, layoutOptions);
|
||||
},
|
||||
});
|
||||
|
||||
[{
|
||||
id: 6385328,
|
||||
data: '',
|
||||
external: ['L'],
|
||||
root: true,
|
||||
after: null,
|
||||
next: null,
|
||||
}, ];
|
||||
@@ -0,0 +1,133 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 连地址哈希表
|
||||
*/
|
||||
SV.registerLayout('ChainHashTable', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
head: {
|
||||
type: 'two-cell-node',
|
||||
label: '[data]',
|
||||
size: [70, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
},
|
||||
node: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
start: {
|
||||
type: 'line',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
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',
|
||||
anchor: 1,
|
||||
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 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('Force', {
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
default: {
|
||||
type: 'force-node',
|
||||
label: '[data]',
|
||||
size: 20,
|
||||
labelOptions: {
|
||||
style: { fontSize: 20 }
|
||||
},
|
||||
style: {
|
||||
stroke: 'red',
|
||||
fill: 'red'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 0,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
// endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
headExternal: {
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
indexLabel: {
|
||||
index: { position: 'bottom' },
|
||||
indexRight: { position: 'right' }
|
||||
},
|
||||
behavior: {
|
||||
dragNode: true
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
layout(e) {
|
||||
console.log("here is the layout of Force")
|
||||
// e.forEach((item, index) => {
|
||||
// console.log(item.getBound());
|
||||
// })
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
//节点没有原子时
|
||||
if(!cfg.sub){
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
y: height * ( 8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: '#000',
|
||||
fontSize: 20,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
});
|
||||
}
|
||||
|
||||
//节点没有子表时
|
||||
if(!cfg.next){
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width * (4 / 3),
|
||||
y: height * ( 8 / 7),
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: '#000',
|
||||
fontSize: 20,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true
|
||||
});
|
||||
}
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[1 / 6, 0],
|
||||
[0.5, 0],
|
||||
[0.5, 0.5],
|
||||
[5 / 6, 0.5],
|
||||
[0.5, 1],
|
||||
[0, 0.5]
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('GeneralizedList', {
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
table: {
|
||||
type: 'three-cell-node',
|
||||
label: '[id]',
|
||||
size: [90, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
},
|
||||
atom: {
|
||||
type: 'two-cell-node',
|
||||
label: ['[id]', 'dcd'],
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
loopSub: {},
|
||||
loopNext: {
|
||||
type: 'quadratic',
|
||||
curveOffset: -50,
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 4,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
sub: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
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: 3,
|
||||
targetAnchor: 5,
|
||||
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) {
|
||||
if(!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
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') + width / 3);
|
||||
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.filter(item => item.type === 'table'),
|
||||
tableRootNode = tableNodes.filter(item => item.root)[0];
|
||||
|
||||
this.layoutItem(tableRootNode, null, layoutOptions);
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,96 @@
|
||||
SV.registerLayout('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: 'array-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: null
|
||||
});
|
||||
arr[i].set('labelCfg', {
|
||||
style: {
|
||||
opacity: 0.4
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,133 @@
|
||||
|
||||
|
||||
SV.registerLayout('LinkList', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let root = sources[0];
|
||||
|
||||
if (root.external) {
|
||||
root.rootExternal = root.external;
|
||||
delete root.external;
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
default: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#eaffd0',
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
loopNext: {
|
||||
type: 'quadratic',
|
||||
curveOffset: -100,
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 7,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
rootExternal: {
|
||||
type: 'pointer',
|
||||
anchor: 6,
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
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 root = elements[0];
|
||||
this.layoutItem(root, null, layoutOptions);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('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'
|
||||
}
|
||||
}
|
||||
},
|
||||
loopNext: {
|
||||
type: 'quadratic',
|
||||
curveOffset: -100,
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 7,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 58
|
||||
},
|
||||
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 });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
|
||||
|
||||
/**
|
||||
* 单链表
|
||||
*/
|
||||
SV.registerLayout('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: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#b83b5e'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
next: {
|
||||
type: 'line',
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 4,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
loopNext: {
|
||||
type: 'quadratic',
|
||||
curveOffset: -100,
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 7,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
headExternal: {
|
||||
anchor: 5,
|
||||
type: 'pointer',
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
external: {
|
||||
anchor: 3,
|
||||
type: 'pointer',
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
yInterval: 30
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let height = node.get('size')[1];
|
||||
|
||||
if(prev && node.isSameGroup(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) {
|
||||
this.layoutItem(elements[0], null, layoutOptions);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
|
||||
SV.registerLayout('PCTree', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
|
||||
let headNodes = sources.filter(item => item.type === 'PCTreeHead');
|
||||
|
||||
for(let i = 0; i < headNodes.length; i++){
|
||||
|
||||
let dataNode = {
|
||||
type: 'PCTreePreHead',
|
||||
id: headNodes[i].id + '_0',
|
||||
data: headNodes[i].preData,
|
||||
indexLeft: headNodes[i].index,
|
||||
root: headNodes[i].root
|
||||
}
|
||||
|
||||
if(dataNode.root){
|
||||
dataNode.indexTop = 'data';
|
||||
headNodes[i].indexTop = ' parent firstChild'
|
||||
}
|
||||
sources.push(dataNode)
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
PCTreePreHead: {
|
||||
type: 'rect',
|
||||
label: '[data]',
|
||||
size: [60, 34],
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
},
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3',
|
||||
offset: 25
|
||||
}
|
||||
},
|
||||
PCTreeHead: {
|
||||
type: 'two-cell-node',
|
||||
label: '[data]',
|
||||
size: [120, 34],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
PCTreeNode: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 27],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#00AF92'
|
||||
}
|
||||
}
|
||||
},
|
||||
indexLabel: {
|
||||
indexTop: { position: 'top' },
|
||||
indexLeft: { position: 'left' }
|
||||
},
|
||||
link: {
|
||||
headNext: {
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 50,
|
||||
yInterval: 86
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['PCTreeNode']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
//判断node节点是否之前布局过
|
||||
isUnique(value, allNodeIdValue){
|
||||
let re = new RegExp("" + value);
|
||||
return !re.test(allNodeIdValue);
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions, allNodeId) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
let width = node.get('size')[0],
|
||||
idValue = node.id.split('(')[1].slice(0, -1);
|
||||
|
||||
//有y型链表的情况不用再布局
|
||||
if(this.isUnique(idValue, allNodeId.value)){
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
|
||||
}
|
||||
|
||||
allNodeId.value += idValue;
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions, allNodeId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let headNode = elements.filter(item => item.type === 'PCTreeHead'),
|
||||
preHeadNode = elements.filter(item => item.type === 'PCTreePreHead'),
|
||||
roots = elements.filter(item => item.type === 'PCTreeNode' && item.root),
|
||||
height = headNode[0].get('size')[1],
|
||||
width = headNode[0].get('size')[0],
|
||||
i,
|
||||
allNodeId = { value: ''}; //引用类型用于传参
|
||||
|
||||
for(i = 0; i < headNode.length; i++) {
|
||||
let node = headNode[i],
|
||||
preNode = preHeadNode[i];
|
||||
|
||||
node.set({
|
||||
x: 0,
|
||||
y: i * height
|
||||
});
|
||||
|
||||
preNode.set({
|
||||
x: width / 4,
|
||||
y: (i + 1) * height
|
||||
})
|
||||
|
||||
if(node.headNext) {
|
||||
let y = node.get('y') + height - node.headNext.get('size')[1],
|
||||
x = width + layoutOptions.xInterval * 2;
|
||||
|
||||
node.headNext.set({ x, y });
|
||||
this.layoutItem(node.headNext, null, layoutOptions, allNodeId);
|
||||
}
|
||||
}
|
||||
|
||||
for(i = 0; i < roots.length; i++) {
|
||||
let nodeWidth = roots[0].get('size')[0],
|
||||
nodeInternalSum = i * (nodeWidth + layoutOptions.xInterval);
|
||||
|
||||
roots[i].set({
|
||||
x: headNode[0].get('x') + width + layoutOptions.xInterval * 2 + nodeInternalSum,
|
||||
y: headNode[0].get('y') - layoutOptions.yInterval
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
|
||||
// 解析数据：
|
||||
// {
|
||||
// PTree:{
|
||||
// data:[
|
||||
// {
|
||||
// id: '1001',
|
||||
// data: 'A',
|
||||
// parent: -1,
|
||||
// index: 0
|
||||
// },
|
||||
// {
|
||||
// id: '1002',
|
||||
// data: 'B',
|
||||
// parent: 0,
|
||||
// index: 1
|
||||
// },
|
||||
// ],
|
||||
// layouter: 'PTree'
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
SV.registerLayout('PTree', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let dataLength = sources.length;
|
||||
let parentNodes = [];
|
||||
let i;
|
||||
|
||||
for (i = 0; i < dataLength; i++) {
|
||||
parentNodes.push({
|
||||
id: `parent-${i}`,
|
||||
data: sources[i].parent
|
||||
});
|
||||
}
|
||||
if(sources[0]){
|
||||
sources[0].indexLeft = 'data';
|
||||
}
|
||||
if(parentNodes[0]){
|
||||
parentNodes[0].indexLeft = 'parent';
|
||||
}
|
||||
|
||||
sources.push(...parentNodes);
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
default: {
|
||||
type: 'rect',
|
||||
label: '[data]',
|
||||
size: [40, 40],
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
},
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3',
|
||||
offset: 25
|
||||
}
|
||||
},
|
||||
},
|
||||
indexLabel: {
|
||||
index: { position: 'top' },
|
||||
indexLeft: { position: 'left' }
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
layout(elements) {
|
||||
let nodeLength = elements.length;
|
||||
|
||||
if(nodeLength == 0) return;
|
||||
|
||||
let halfLength = nodeLength / 2,
|
||||
size = elements[0].get('size')[0],
|
||||
i;
|
||||
|
||||
|
||||
for (i = 0; i < nodeLength; i++) {
|
||||
let x = (i % halfLength) * size,
|
||||
y = Math.floor(i / halfLength) * size;
|
||||
|
||||
elements[i].set({ x, y });
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,120 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayout('SqQueue', {
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
head: {
|
||||
type: 'rect',
|
||||
anchorPoints: [
|
||||
[0.5, 0],
|
||||
[1, 0.5],
|
||||
[0.5, 1],
|
||||
[0, 0.5]
|
||||
],
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#95e1d3',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
},
|
||||
},
|
||||
node: {
|
||||
type: 'indexed-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#95e1d3',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
front: {
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default'
|
||||
}
|
||||
},
|
||||
rear: {
|
||||
type: 'polyline',
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 5,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: 'default'
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 0,
|
||||
offset: 8,
|
||||
labelOffset: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
cursor: {
|
||||
type: 'cursor',
|
||||
anchor: 0,
|
||||
offset: 8,
|
||||
labelOffset: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
layout(elements) {
|
||||
let head = elements.filter(item => item.type === 'head'),
|
||||
head1 = head[0],
|
||||
head2 = head[1],
|
||||
nodes = elements.filter(item => item.type !== 'head'),
|
||||
headHeight = head1.get('size')[1],
|
||||
headWidth = head1.get('size')[0],
|
||||
nodeHeight = 0,
|
||||
x = 0, y = 0;
|
||||
|
||||
if (nodes.length) {
|
||||
let firstNode = nodes[0];
|
||||
nodeHeight = firstNode.get('size')[1];
|
||||
x = -50;
|
||||
y = firstNode.get('y');
|
||||
|
||||
for (let i = 1; i < nodes.length; i++) {
|
||||
let width = nodes[i].get('size')[0];
|
||||
nodes[i].set('x', nodes[i - 1].get('x') + width);
|
||||
|
||||
if (nodes[i].empty) {
|
||||
nodes[i].set('style', {
|
||||
fill: null
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
head1.set({ x, y: y + nodeHeight * 3 });
|
||||
|
||||
if (nodes.length) {
|
||||
head2.set({ x, y: head1.get('y') + headHeight });
|
||||
}
|
||||
else {
|
||||
head2.set({ x: x + headWidth, y });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
|
||||
|
||||
SV.registerLayout('Stack', {
|
||||
|
||||
sourcesPreprocess(sources, options) {
|
||||
const stackBottomNode = sources[sources.length - 1];
|
||||
|
||||
if(stackBottomNode.external) {
|
||||
stackBottomNode.bottomExternal = stackBottomNode.external;
|
||||
delete stackBottomNode.external;
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineLeakRule(nodes) {
|
||||
return [];
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'array-node',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 1,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
bottomExternal: {
|
||||
type: 'pointer',
|
||||
anchor: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
},
|
||||
cursor: {
|
||||
type: 'cursor',
|
||||
anchor: 1,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
}
|
||||
}
|
||||
},
|
||||
indexLabel: {
|
||||
index: { position: '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);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* 三叉树
|
||||
*/
|
||||
SV.registerLayout('TriTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
node: {
|
||||
default: {
|
||||
type: 'tri-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#95e1d3',
|
||||
stroke: '#333',
|
||||
cursor: 'pointer',
|
||||
backgroundFill: '#eee'
|
||||
},
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
child: {
|
||||
sourceAnchor: index => index,
|
||||
targetAnchor: 3,
|
||||
type: 'line',
|
||||
style: {
|
||||
stroke: '#333',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
parent: {
|
||||
type: 'line',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
r_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 5,
|
||||
curveOffset: -20,
|
||||
style: {
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
l_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
curveOffset: 20,
|
||||
style: {
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
external: {
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
offset: 14,
|
||||
labelOffset: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
fontSize: 15,
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
addressLabel: {
|
||||
style: {
|
||||
fill: '#999'
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
*/
|
||||
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 && rightChild) {
|
||||
//求出包围盒相交部分
|
||||
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
|
||||
move = 0;
|
||||
//处理
|
||||
if (intersection && intersection.width > 0) {
|
||||
move = (intersection.width + layoutOptions.xInterval) / 2;
|
||||
// console.log(move,intersection.width,layoutOptions.xInterval);
|
||||
leftGroup.translate(-move, 0);
|
||||
rightGroup.translate(move, 0);
|
||||
}
|
||||
}
|
||||
|
||||
//加入分组
|
||||
if (leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
if (rightGroup) {
|
||||
group.add(rightGroup)
|
||||
}
|
||||
|
||||
}
|
||||
//返回分组
|
||||
return group;
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
* @param {*} elements
|
||||
* @param {*} layoutOptions
|
||||
*/
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
this.layoutItem(root, null, -1, layoutOptions);
|
||||
}
|
||||
});
|
||||
+292
@@ -0,0 +1,292 @@
|
||||
const SOURCES_DATA = [{
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9ee0",
|
||||
"0xfd9f10"
|
||||
],
|
||||
"id": "0xfd9eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree3": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T3"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f40",
|
||||
"name": "T3",
|
||||
"data": "D",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree4": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T4"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f70",
|
||||
"name": "T4",
|
||||
"data": "E",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": true,
|
||||
"isFirstDebug": true
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9ee0",
|
||||
"0xfd9f10"
|
||||
],
|
||||
"id": "0xfd9eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree3": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T3"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f40",
|
||||
"name": "T3",
|
||||
"data": "D",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree4": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T4"
|
||||
],
|
||||
"parent": [
|
||||
"0xfd9f40"
|
||||
],
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f70",
|
||||
"name": "T4",
|
||||
"data": "E",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
}],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9ee0",
|
||||
"0xfd9f10"
|
||||
],
|
||||
"id": "0xfd9eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xfd9eb0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"TriTree3": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T3"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xfd9f70",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f40",
|
||||
"name": "T3",
|
||||
"data": "D",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xfd9f70",
|
||||
"name": "T3->lchild",
|
||||
"data": "E",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xfd9f40"
|
||||
],
|
||||
"external": [
|
||||
"T4"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}];
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
<!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 {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.down {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#leak {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-top: 1px dashed #000;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.75s ease-in-out;
|
||||
}
|
||||
|
||||
#leak>span {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="btn-prev">prev</button>
|
||||
<button id="btn-next">next</button>
|
||||
<button id="resize">resize</button>
|
||||
<button id="relayout">relayout</button>
|
||||
<button id="switch-mode">switch mode</button>
|
||||
<button id="brush-select">brush-select</button>
|
||||
<span id="pos"></span>
|
||||
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
const Group = SV.Group,
|
||||
Bound = SV.Bound,
|
||||
G6 = SV.G6,
|
||||
Vector = SV.Vector;
|
||||
</script>
|
||||
<script src="./Layouter/LinkList.js"></script>
|
||||
<script src="./Layouter/BinaryTree.js"></script>
|
||||
<script src="./Layouter/TriTree.js"></script>
|
||||
<script src="./Layouter/Stack.js"></script>
|
||||
<script src="./Layouter/LinkQueue.js"></script>
|
||||
<script src="./Layouter/GeneralizedList.js"></script>
|
||||
<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 src="./Layouter/AdjoinMatrixGraph.js"></script>
|
||||
<script src="./Layouter/AdjoinTableGraph.js"></script>
|
||||
<script src="./Layouter/SqQueue.js"></script>
|
||||
<script src="./Layouter/PTree.js"></script>
|
||||
<script src="./Layouter/PCTree.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
|
||||
<script>
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
view: {
|
||||
leakAreaHeight: 130,
|
||||
groupPadding: 40,
|
||||
},
|
||||
});
|
||||
|
||||
let dataIndex = 0,
|
||||
curData = SOURCES_DATA[dataIndex];
|
||||
|
||||
let enableBrushSelect = false;
|
||||
|
||||
const container = document.getElementById('container'),
|
||||
pos = document.getElementById('pos');
|
||||
|
||||
const leak = document.getElementById('leak');
|
||||
|
||||
cur.render(curData);
|
||||
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[++dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
document.getElementById('btn-prev').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[--dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
document.getElementById('resize').addEventListener('click', e => {
|
||||
container.style.height = 800 + 'px';
|
||||
cur.resize(container.offsetWidth, container.offsetHeight);
|
||||
});
|
||||
|
||||
document.getElementById('relayout').addEventListener('click', e => {
|
||||
cur.reLayout();
|
||||
});
|
||||
|
||||
document.getElementById('switch-mode').addEventListener('click', e => {
|
||||
cur.updateStyle('Array', newArrayOption);
|
||||
});
|
||||
|
||||
document.getElementById('brush-select').addEventListener('click', e => {
|
||||
enableBrushSelect = !enableBrushSelect;
|
||||
cur.switchBrushSelect(enableBrushSelect);
|
||||
});
|
||||
|
||||
cur.on('onLeakAreaUpdate', payload => {
|
||||
leak.style.opacity = payload.hasLeak ? 1 : 0;
|
||||
leak.style.top = payload.leakAreaY - 40 + 'px';
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
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