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

fix: bug 修复

Browse Source
This commit is contained in:
黎智洲 2022-03-01 01:32:28 +08:00
parent 97749ec35e
commit 2a09ca6be1
9 changed files with 1090 additions and 1140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

268
demoV2/Layouter/BinaryTree.js
View File

@ -1,149 +1,145 @@
SV.registerLayout('BinaryTree', { SV.registerLayout('BinaryTree', {
defineOptions() { defineOptions() {
return { return {
element: { element: {
default: { default: {
type: 'binary-tree-node', type: 'binary-tree-node',
size: [60, 30], size: [60, 30],
label: '[data]', label: '[data]',
style: { style: {
fill: '#b83b5e', fill: '#b83b5e',
stroke: "#333", stroke: '#333',
cursor: 'pointer' cursor: 'pointer',
} },
} },
}, },
link: { link: {
child: { child: {
type: 'line', type: 'line',
sourceAnchor: index => index === 0 ? 3 : 1, sourceAnchor: index => (index === 0 ? 3 : 1),
targetAnchor: 0, targetAnchor: 0,
style: { style: {
stroke: '#333', stroke: '#333',
lineAppendWidth: 6, lineAppendWidth: 6,
cursor: 'pointer', cursor: 'pointer',
endArrow: 'default', endArrow: 'default',
startArrow: { startArrow: {
path: G6.Arrow.circle(2, -1), path: G6.Arrow.circle(2, -1),
fill: '#333' fill: '#333',
} },
} },
} },
}, },
marker: { marker: {
external: { external: {
type: 'pointer', type: 'pointer',
anchor: 0, anchor: 0,
offset: 14, offset: 14,
style: { style: {
fill: '#f08a5d' fill: '#f08a5d',
}, },
labelOptions: { labelOptions: {
style: { style: {
fill: '#000099' fill: '#000099',
} },
} },
} },
}, },
layout: { layout: {
xInterval: 40, xInterval: 40,
yInterval: 40 yInterval: 40,
}, },
behavior: { behavior: {
// dragNode: false // dragNode: false
} },
}; };
}, },
/** /**
* 对子树进行递归布局 * 对子树进行递归布局
*/ */
layoutItem(node, parent, index, layoutOptions) { layoutItem(node, parent, index, layoutOptions) {
// 次双亲不进行布局 // 次双亲不进行布局
if (!node) { if (!node) {
return null; return null;
}
let bound = node.getBound(),
width = bound.width,
height = bound.height,
group = new Group(node),
leftGroup = null,
rightGroup = null;
if (node.visited) {
return null;
}
if (node.child && node.child[0]) {
leftGroup = this.layoutItem(node.child[0], node, 0, layoutOptions);
}
if (node.child && node.child[1]) {
rightGroup = this.layoutItem(node.child[1], node, 1, layoutOptions);
}
// 处理左右子树相交问题
if (leftGroup && rightGroup) {
let intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound()),
move = 0;
if (intersection && intersection.width > 0) {
move = (intersection.width + layoutOptions.xInterval) / 2;
leftGroup.translate(-move, 0);
rightGroup.translate(move, 0);
}
}
if (leftGroup) {
let leftBound = leftGroup.getBound();
node.set('y', leftBound.y - layoutOptions.yInterval - height);
node.set('x', leftBound.x + leftBound.width + layoutOptions.xInterval / 2 - width);
} }
let bound = node.getBound(), if(rightGroup) {
width = bound.width, let rightBound = rightGroup.getBound();
height = bound.height,
group = new Group(node);
if (node.visited) { node.set('y', rightBound.y - layoutOptions.yInterval - height);
return; node.set('x', rightBound.x - layoutOptions.xInterval / 2 - width);
} }
node.visited = true;
if (parent) { if (leftGroup) {
node.set('y', parent.get('y') + layoutOptions.yInterval + height); group.add(leftGroup);
}
// 左节点 if (rightGroup) {
if (index === 0) { group.add(rightGroup);
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2); }
}
// 右结点 return group;
if (index === 1) { },
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
}
}
node.visited = true; /**
* 布局函数
if (node.child && (node.child[0] || node.child[1])) { * @param {*} elements
let leftChild = node.child[0], * @param {*} layoutOptions
rightChild = node.child[1], */
leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions), layout(elements, layoutOptions) {
rightGroup = this.layoutItem(rightChild, node, 1, layoutOptions), let root = elements[0];
intersection = null, this.layoutItem(root, null, -1, layoutOptions);
move = 0; },
// 处理左右子树相交问题
if (leftGroup && rightGroup) {
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
move = 0;
if (intersection && intersection.width > 0) {
move = (intersection.width + layoutOptions.xInterval) / 2;
leftGroup.translate(-move, 0);
rightGroup.translate(move, 0);
}
}
if (leftGroup) {
group.add(leftGroup);
}
if (rightGroup) {
group.add(rightGroup)
}
}
return group;
},
/**
* 布局函数
* @param {*} elements
* @param {*} layoutOptions
*/
layout(elements, layoutOptions) {
let root = elements[0];
this.layoutItem(root, null, -1, layoutOptions);
}
}); });
[
{
id: 6385328,
data: '',
[{ external: ['L'],
"id": 6385328, root: true,
"data": "", after: null,
"external": [ next: null,
"L" },
], ];
"root": true,
"after": null,
"next": null
}]

495
demoV2/demo2.html
View File

@ -1,291 +1,250 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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;
}
<head> .container {
<meta charset="UTF-8" /> background-color: #fafafa;
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> border: 1px solid #ccc;
<title>DEMO</title> position: relative;
<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> .down {
<div class="container" id="container"> display: flex;
<div id="leak"> margin-top: 20px;
<span>泄漏区</span> }
</div>
</div>
<button id="btn-prev">prev</button> #container {
<button id="btn-next">next</button> width: 100%;
<button id="resize">resize</button> height: 500px;
<button id="relayout">relayout</button> position: relative;
<button id="switch-mode">switch mode</button> overflow: hidden;
<button id="brush-select">brush-select</button> }
<span id="pos"></span>
<script src="./../dist/sv.js"></script> #leak {
<script> position: absolute;
const Group = SV.Group, left: 0;
Bound = SV.Bound, opacity: 0;
G6 = SV.G6, top: 100px;
Vector = SV.Vector; width: 100%;
</script> box-sizing: border-box;
<script src="./Layouter/LinkList.js"></script> padding: 4px;
<script src="./Layouter/BinaryTree.js"></script> border-top: 1px dashed #000;
<script src="./Layouter/Stack.js"></script> pointer-events: none;
<script src="./Layouter/LinkQueue.js"></script> transition: opacity 0.75s ease-in-out;
<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> #leak > span {
let cur = SV(document.getElementById('container'), { color: #000;
view: { }
leakAreaHeight: 130, </style>
groupPadding: 40, </head>
},
});
let data = [{ <body>
"BinaryTree0": { <div class="container" id="container">
"data": [{ <div id="leak">
"external": [ <span>泄漏区</span>
"T" </div>
], </div>
"child": [
"0x616060",
"0x615f40"
],
"id": "0x615f10",
"name": "T",
"data": "F",
"root": true,
"type": "default"
}, {
"child": [
"0x0",
"0x616090"
],
"id": "0x616060",
"name": "T->lchild",
"data": "A",
"type": "default"
}, {
"child": [
"0x6160c0",
"0x0"
],
"id": "0x616090",
"name": "(T->lchild)->rchild",
"data": "E",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x6160c0",
"name": "((T->lchild)->rchild)->lchild",
"data": "D",
"type": "default"
}, {
"child": [
"0x615f70",
"0x615fd0"
],
"id": "0x615f40",
"name": "T->rchild",
"data": "U",
"type": "default"
}, {
"child": [
"0x615fa0",
"0x616000"
],
"id": "0x615f70",
"name": "(T->rchild)->lchild",
"data": "S",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x615fa0",
"name": "((T->rchild)->lchild)->lchild",
"data": "R",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x616000",
"name": "((T->rchild)->lchild)->rchild",
"data": "T",
"type": "default"
}, {
"child": [
"0x0",
"0x616030"
],
"id": "0x615fd0",
"name": "(T->rchild)->rchild",
"data": "V",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x616030",
"name": "((T->rchild)->rchild)->rchild",
"data": "X",
"type": "default"
}],
"layouter": "BinaryTree"
},
"isEnterFunction": true
}, {
"BinaryTree0": {
"data": [{
"external": [
"T"
],
"child": [
"0x0",
"0x616090"
],
"id": "0x616060",
"name": "T",
"data": "A",
"root": true,
"type": "default"
}, {
"child": [
"0x6160c0",
"0x0"
],
"id": "0x616090",
"name": "T->rchild",
"data": "E",
"type": "default"
}, {
"child": [
"0x0",
"0x0"
],
"id": "0x6160c0",
"name": "(T->rchild)->lchild",
"data": "D",
"type": "default"
}],
"layouter": "BinaryTree"
},
"isEnterFunction": true
}];
let dataIndex = 0, <button id="btn-prev">prev</button>
curData = data[dataIndex]; <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>
let enableBrushSelect = false; <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 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>
const container = document.getElementById('container'), <script>
pos = document.getElementById('pos'); let cur = SV(document.getElementById('container'), {
view: {
leakAreaHeight: 130,
groupPadding: 40,
},
});
const leak = document.getElementById('leak'); let data = [
{
BinaryTree0: {
data: [
{
external: ['T', 'p'],
child: ['0x615f40', '0x0'],
id: '0x615f10',
name: 'T',
data: 'W',
root: true,
type: 'default',
},
{
child: ['0x615f70', '0x615fa0'],
id: '0x615f40',
name: 'T->lchild',
data: 'Q',
type: 'default',
},
{
child: ['0x0', '0x615fd0'],
id: '0x615f70',
name: '(T->lchild)->lchild',
data: 'A',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x615fd0',
name: '((T->lchild)->lchild)->rchild',
data: 'D',
type: 'default',
},
{
child: ['0x616000', '0x616030'],
id: '0x615fa0',
name: '(T->lchild)->rchild',
data: 'U',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x616000',
name: '((T->lchild)->rchild)->lchild',
data: 'S',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x616030',
name: '((T->lchild)->rchild)->rchild',
data: 'V',
type: 'default',
},
],
layouter: 'BinaryTree',
},
isEnterFunction: false,
},
{
BinaryTree0: {
data: [
{
external: ['T', 'p'],
child: ['0x615f40', '0x0'],
id: '0x615f10',
name: 'T',
data: 'W',
root: true,
type: 'default',
},
{
child: ['0x615f70', '0x615fa0'],
id: '0x615f40',
name: 'T->lchild',
data: 'Q',
type: 'default',
},
{
child: ['0x0', '0x615fd0'],
id: '0x615f70',
name: '(T->lchild)->lchild',
data: 'A',
type: 'default',
},
{
child: ['0x0', '0x0'],
id: '0x615fd0',
name: '((T->lchild)->lchild)->rchild',
data: 'D',
type: 'default',
}
],
layouter: 'BinaryTree',
},
isEnterFunction: false,
},
];
cur.render(curData); let dataIndex = 0,
curData = data[dataIndex];
document.getElementById('btn-next').addEventListener('click', e => { let enableBrushSelect = false;
curData = data[++dataIndex];
cur.render(curData);
});
document.getElementById('btn-prev').addEventListener('click', e => { const container = document.getElementById('container'),
curData = data[--dataIndex]; pos = document.getElementById('pos');
cur.render(curData);
});
document.getElementById('resize').addEventListener('click', e => { const leak = document.getElementById('leak');
container.style.height = 800 + 'px';
cur.resize(container.offsetWidth, container.offsetHeight);
});
document.getElementById('relayout').addEventListener('click', e => { cur.render(curData);
cur.reLayout();
});
document.getElementById('switch-mode').addEventListener('click', e => { document.getElementById('btn-next').addEventListener('click', e => {
cur.updateStyle('Array', newArrayOption); curData = data[++dataIndex];
}); cur.render(curData);
});
document.getElementById('brush-select').addEventListener('click', e => { document.getElementById('btn-prev').addEventListener('click', e => {
enableBrushSelect = !enableBrushSelect; curData = data[--dataIndex];
cur.switchBrushSelect(enableBrushSelect); cur.render(curData);
}); });
cur.on('onLeakAreaUpdate', payload => { document.getElementById('resize').addEventListener('click', e => {
leak.style.opacity = payload.hasLeak ? 1 : 0; container.style.height = 800 + 'px';
leak.style.top = payload.leakAreaY - 40 + 'px'; cur.resize(container.offsetWidth, container.offsetHeight);
}); });
// ------------------------------------------------------------------------------------------------------- document.getElementById('relayout').addEventListener('click', e => {
cur.reLayout();
});
container.addEventListener('mousemove', e => { document.getElementById('switch-mode').addEventListener('click', e => {
let x = e.offsetX, cur.updateStyle('Array', newArrayOption);
y = e.offsetY; });
pos.innerHTML = `${x},${y}`;
});
</script>
</body>
</html> 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>

196
src/RegisteredShape/binaryTreeNode.ts
View File

@ -1,105 +1,111 @@
import { Util } from '../Common/util'; import { Util } from '../Common/util';
export default Util.registerShape(
'binary-tree-node',
{
draw(cfg, group) {
cfg.size = cfg.size;
export default Util.registerShape('binary-tree-node', { const width = cfg.size[0],
draw(cfg, group) { height = cfg.size[1];
cfg.size = cfg.size;
const width = cfg.size[0], const wrapperRect = group.addShape('rect', {
height = cfg.size[1]; attrs: {
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor,
fill: cfg.style.backgroundFill || '#eee',
},
name: 'wrapper',
});
const wrapperRect = group.addShape('rect', { group.addShape('rect', {
attrs: { attrs: {
x: width / 2, x: width / 4 + width / 2,
y: height / 2, y: height / 2,
width: width, width: width / 2,
height: height, height: height,
stroke: cfg.style.stroke || '#333', fill: cfg.style.fill,
cursor: cfg.style.cursor, stroke: cfg.style.stroke || '#333',
fill: cfg.style.backgroundFill || '#eee' cursor: cfg.style.cursor,
}, },
name: 'wrapper' name: 'mid',
}); draggable: true,
});
group.addShape('rect', { const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
attrs: {
x: width / 4 + width / 2,
y: height / 2,
width: width / 2,
height: height,
fill: cfg.style.fill,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor
},
name: 'mid',
draggable: true
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; if (cfg.label) {
group.addShape('text', {
if (cfg.label) { attrs: {
x: width, // 居中
group.addShape('text', { y: height,
attrs: { textAlign: 'center',
x: width, // 居中 textBaseline: 'middle',
y: height, text: cfg.label,
textAlign: 'center', fill: style.fill || '#000',
textBaseline: 'middle', fontSize: style.fontSize || 16,
text: cfg.label, cursor: cfg.style.cursor,
fill: style.fill || '#000', },
fontSize: style.fontSize || 16, name: 'text',
cursor: cfg.style.cursor draggable: true,
}, });
name: 'text', }
draggable: true
});
}
//节点没有左孩子节点时 const isLeftEmpty =
if(cfg.child[0] == "0x0"){ !cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
group.addShape('text', { isRightEmpty =
attrs: { !cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0';
x: width * (5 / 8),
y: height * ( 8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 18,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
//节点没有右孩子节点时
if(cfg.child[1] == "0x0"){
group.addShape('text', {
attrs: {
x: width * (11 / 8),
y: height * ( 8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 18,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
return wrapperRect; //节点没有左孩子节点时
}, if (isLeftEmpty) {
group.addShape('text', {
attrs: {
x: width * (5 / 8),
y: height * (8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
}
//节点没有右孩子节点时
if (isRightEmpty) {
group.addShape('text', {
attrs: {
x: width * (11 / 8),
y: height * (8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
}
getAnchorPoints() { return wrapperRect;
return [ },
[0.5, 0],
[0.875, 0.5], getAnchorPoints() {
[0.5, 1], return [
[0.125, 0.5] [0.5, 0],
]; [0.875, 0.5],
}, [0.5, 1],
}, 'rect'); [0.125, 0.5],
];
},
},
'rect'
);

186
src/RegisteredShape/clenQueuePointer.ts
View File

@ -1,120 +1,106 @@
import G6 from "@antv/g6"; import G6 from '@antv/g6';
import { Util } from "../Common/util"; import { Util } from '../Common/util';
export default function rotate(shape, angle, transform) { export default function rotate(shape, angle, transform) {
const matrix1 = shape.getMatrix(); const matrix1 = shape.getMatrix();
const newMatrix1 = transform(matrix1, [ const newMatrix1 = transform(matrix1, [['r', angle]]);
['r', angle], shape.setMatrix(newMatrix1);
]);
shape.setMatrix(newMatrix1);
} }
function translate(shape, x, y, transform) { function translate(shape, x, y, transform) {
const matrix1 = shape.getMatrix(); const matrix1 = shape.getMatrix();
const newMatrix1 = transform(matrix1, [ const newMatrix1 = transform(matrix1, [['t', x, y]]);
['t', x, y], shape.setMatrix(newMatrix1);
]);
shape.setMatrix(newMatrix1);
} }
function culcuRotate(angle, R) { function culcuRotate(angle, R) {
let offsetX = Math.cos(angle) * R; let offsetX = Math.cos(angle) * R;
let offsetY = -Math.sin(angle) * R; let offsetY = -Math.sin(angle) * R;
console.log(offsetX, offsetY, R); console.log(offsetX, offsetY, R);
return { return {
offsetX, offsetX,
offsetY, offsetY,
} };
} }
Util.registerShape('clen-queue-pointer', { Util.registerShape('clen-queue-pointer', {
draw(cfg, group) { draw(cfg, group) {
let id = cfg.id as string; let id = cfg.id as string;
const index = parseInt(id.split('-')[1]); const index = parseInt(id.split('-')[1]);
const len = parseInt(id.split('-')[2]); const len = parseInt(id.split('-')[2]);
const keyShape = group.addShape('path', { const keyShape = group.addShape('path', {
attrs: { attrs: {
x: 0, x: 0,
y: 0, y: 0,
path: this.getPath(cfg), path: this.getPath(cfg),
fill: cfg.style.fill, fill: cfg.style.fill,
// matrix: cfg.style.matrix // matrix: cfg.style.matrix
}, },
name: 'pointer-path' name: 'pointer-path',
}); });
const angle = index * Math.PI * 2 / len; const angle = (index * Math.PI * 2) / len;
if (cfg.label) { if (cfg.label) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
const bgRect = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 0,
height: 0,
text: cfg.label,
fill: null,
radius: 2
},
name: 'bgRect'
});
let label = cfg.label as string; const bgRect = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 0,
height: 0,
text: cfg.label,
fill: null,
radius: 2,
},
name: 'bgRect',
});
let pointerText = label.split('-')[0]; let label = cfg.label as string;
let y = pointerText=="front"?30:15;
const text = group.addShape('text', {
attrs: {
x: culcuRotate(Math.PI/2 - angle, y).offsetX,
y: culcuRotate(Math.PI/2 - angle, y).offsetY,
// x: 0,
// y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: pointerText,
fill: style.fill || '#999',
fontSize: style.fontSize || 16
},
name: 'pointer-text-shape'
});
// rotate(text, angle, G6.Util.transform); let pointerText = label.split('-')[0];
translate(text, 0, -75, G6.Util.transform); let y = pointerText == 'front' ? 30 : 15;
} const text = group.addShape('text', {
rotate(keyShape, angle, G6.Util.transform); attrs: {
translate(keyShape, 0, -75, G6.Util.transform); x: culcuRotate(Math.PI / 2 - angle, y).offsetX,
y: culcuRotate(Math.PI / 2 - angle, y).offsetY,
// x: 0,
// y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: pointerText,
fill: style.fill || '#999',
fontSize: style.fontSize || 16,
},
name: 'pointer-text-shape',
});
return keyShape; // rotate(text, angle, G6.Util.transform);
translate(text, 0, -75, G6.Util.transform);
}
rotate(keyShape, angle, G6.Util.transform);
translate(keyShape, 0, -75, G6.Util.transform);
return keyShape;
}, },
getPath(cfg) {
let width = 1,
height = 38,
arrowWidth = width + 4,
arrowHeight = height * 0.3;
const path = [ getPath(cfg) {
['M', 0, 0], let width = 1,
['L', -width / 2, 0], height = 38,
['L', -width / 2, -height], arrowWidth = width + 4,
['L', -width / 2 - (arrowWidth / 2), -height], arrowHeight = height * 0.3;
['L', 0, -height-arrowHeight],
['L', width / 2 + (arrowWidth / 2), -height],
['L', width / 2, -height],
['L', width / 2, 0],
['Z'],
];
return path; const path = [
}, ['M', 0, 0],
['L', -width / 2, 0],
['L', -width / 2, -height],
['L', -width / 2 - arrowWidth / 2, -height],
['L', 0, -height - arrowHeight],
['L', width / 2 + arrowWidth / 2, -height],
['L', width / 2, -height],
['L', width / 2, 0],
['Z'],
];
return path;
},
}); });

164
src/RegisteredShape/linkListNode.ts
View File

@ -6,93 +6,95 @@
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \水功能c:\Users\13127\Desktop\最近的前端文件\可视化0126\StructV2\src\RegisteredShape\linkListNode.ts * @FilePath: \水功能c:\Users\13127\Desktop\最近的前端文件\可视化0126\StructV2\src\RegisteredShape\linkListNode.ts
*/ */
import { Util } from "../Common/util"; import { Util } from '../Common/util';
export default Util.registerShape(
'link-list-node',
{
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const width = cfg.size[0],
height = cfg.size[1];
export default Util.registerShape('link-list-node', { const wrapperRect = group.addShape('rect', {
draw(cfg, group) { attrs: {
cfg.size = cfg.size || [30, 10]; x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke || '#333',
fill: cfg.style.backgroundFill || '#eee',
cursor: cfg.style.cursor,
},
name: 'wrapper',
});
const width = cfg.size[0], group.addShape('rect', {
height = cfg.size[1]; attrs: {
x: width / 2,
const wrapperRect = group.addShape('rect', { y: height / 2,
attrs: { width: width * (2 / 3),
x: width / 2, height: height,
y: height / 2, fill: cfg.style.fill,
width: width, stroke: cfg.style.stroke || '#333',
height: height, cursor: cfg.style.cursor,
stroke: cfg.style.stroke || '#333', },
fill: cfg.style.backgroundFill || '#eee', name: 'main-rect',
cursor: cfg.style.cursor draggable: true,
}, });
name: 'wrapper'
});
group.addShape('rect', { const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
attrs: {
x: width / 2,
y: height / 2,
width: width * (2 / 3),
height: height,
fill: cfg.style.fill,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor
},
name: 'main-rect',
draggable: true
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; if (cfg.label) {
group.addShape('text', {
attrs: {
x: width * (5 / 6),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
},
name: 'text',
draggable: true,
});
}
if (cfg.label) { //节点没有后续指针时
group.addShape('text', { if (!cfg.next && !cfg.loopNext) {
attrs: { group.addShape('text', {
x: width * (5 / 6), attrs: {
y: height, x: width * (4 / 3),
textAlign: 'center', y: height * (6 / 5),
textBaseline: 'middle', textAlign: 'center',
text: cfg.label, textBaseline: 'middle',
fill: style.fill || '#000', text: '^',
fontSize: style.fontSize || 16 fill: style.fill || '#000',
}, fontSize: 16,
name: 'text', cursor: cfg.style.cursor,
draggable: true },
}); name: 'text',
} draggable: true,
});
//节点没有后续指针时 }
if(!cfg.next && !cfg.loopNext){
group.addShape('text', {
attrs: {
x: width * (4 / 3),
y: height * ( 6 / 5),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 18,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
return wrapperRect; return wrapperRect;
}, },
getAnchorPoints() { getAnchorPoints() {
return [ return [
[0.5, 0], [0.5, 0],
[5 / 6, 0], [5 / 6, 0],
[5 / 6, 0.5], [5 / 6, 0.5],
[1, 0.5], [1, 0.5],
[5 / 6, 1], [5 / 6, 1],
[0.5, 1], [0.5, 1],
[0, 0.5], [0, 0.5],
[1 / 3, 1] [1 / 3, 1],
]; ];
} },
}, 'rect'); },
'rect'
);

153
src/RegisteredShape/pointer.ts
View File

@ -1,90 +1,89 @@
import { Util } from '../Common/util'; import { Util } from '../Common/util';
export default Util.registerShape('pointer', { export default Util.registerShape('pointer', {
draw(cfg, group) { draw(cfg, group) {
const keyShape = group.addShape('path', { const keyShape = group.addShape('path', {
attrs: { attrs: {
path: this.getPath(cfg), path: this.getPath(cfg),
fill: cfg.style.fill, fill: cfg.style.fill,
matrix: cfg.style.matrix matrix: cfg.style.matrix,
}, },
name: 'pointer-path' name: 'pointer-path',
}); });
if (cfg.label) { if (cfg.label) {
const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {}; const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {};
const bgRect = group.addShape('rect', { const bgRect = group.addShape('rect', {
attrs: { attrs: {
x: 0, x: 0,
y: 0, y: 0,
text: cfg.label, text: cfg.label,
fill: null, fill: null,
radius: 2 radius: 2,
}, },
name: 'bgRect' name: 'bgRect',
}); });
const text = group.addShape('text', { const text = group.addShape('text', {
attrs: { attrs: {
x: 0, x: 0,
y: 0, y: 0,
textAlign: 'center', textAlign: 'center',
textBaseline: 'middle', textBaseline: 'middle',
text: cfg.label, text: cfg.label,
fill: labelStyle.fill || '#999', fill: labelStyle.fill || '#999',
fontSize: labelStyle.fontSize || 16 fontSize: labelStyle.fontSize || 16,
}, },
name: 'pointer-text-shape' name: 'pointer-text-shape',
}); });
const { width: textWidth, height: textHeight } = text.getBBox(); const { width: textWidth, height: textHeight } = text.getBBox();
const {width: pointerWidth, height: pointerHeight} = keyShape.getBBox(); const { width: pointerWidth, height: pointerHeight } = keyShape.getBBox();
bgRect.attr({ bgRect.attr({
width: textWidth + pointerWidth + 6, width: textWidth + pointerWidth + 6,
height: textHeight + pointerHeight + 6 height: textHeight + pointerHeight + 6,
}); });
// 旋转文字 // 旋转文字
const markerEndPosition = cfg.markerEndPosition; const markerEndPosition = cfg.markerEndPosition;
if(markerEndPosition) { if (markerEndPosition) {
let textX = markerEndPosition[0], let textX = markerEndPosition[0],
textY = markerEndPosition[1]; textY = markerEndPosition[1];
text.attr({ text.attr({
x: textX, x: textX,
y: textY y: textY,
}); });
bgRect.attr({ bgRect.attr({
x: textX - textWidth / 2 - 3, x: textX - textWidth / 2 - 3,
y: textY - textHeight / 2 - 3 y: textY - textHeight / 2 - 3,
}); });
} }
return bgRect; return bgRect;
} }
return keyShape; return keyShape;
}, },
getPath(cfg) {
let width = cfg.size[0],
height = cfg.size[1],
arrowWidth = width + 4,
arrowHeight = height * 0.3;
const path = [ getPath(cfg) {
['M', 0, 0], let width = cfg.size[0],
['L', -width / 2 - (arrowWidth / 2), -arrowHeight], height = cfg.size[1],
['L', -width / 2, -arrowHeight], arrowWidth = width + 4,
['L', -width / 2, -height], arrowHeight = height * 0.3;
['L', width / 2, -height],
['L', width / 2, -arrowHeight],
['L', width / 2 + (arrowWidth / 2), -arrowHeight],
['Z'],
];
return path; const path = [
} ['M', 0, 0],
}); ['L', -width / 2 - arrowWidth / 2, -arrowHeight],
['L', -width / 2, -arrowHeight],
['L', -width / 2, -height],
['L', width / 2, -height],
['L', width / 2, -arrowHeight],
['L', width / 2 + arrowWidth / 2, -arrowHeight],
['Z'],
];
return path;
},
});

333
src/RegisteredShape/threeCellNode.ts
View File

@ -8,185 +8,182 @@
*/ */
import { registerNode } from '@antv/g6'; import { registerNode } from '@antv/g6';
export default registerNode('three-cell', { export default registerNode('three-cell', {
draw(cfg, group) { draw(cfg, group) {
cfg.size = cfg.size || [30, 10]; cfg.size = cfg.size || [30, 10];
const width = cfg.size[0],
height = cfg.size[1];
const wrapperRect = group.addShape('rect', { const width = cfg.size[0],
attrs: { height = cfg.size[1];
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke,
fill: cfg.style.backgroundFill || '#eee'
},
name: 'wrapper'
});
group.addShape('rect', { const wrapperRect = group.addShape('rect', {
attrs: { attrs: {
x: width / 2, x: width / 2,
y: height / 2, y: height / 2,
width: width / 3, width: width,
height: height, height: height,
fill: cfg.style.fill, stroke: cfg.style.stroke,
stroke: cfg.style.stroke fill: cfg.style.backgroundFill || '#eee',
}, },
name: 'left-rect', name: 'wrapper',
draggable: true });
});
group.addShape('rect', { group.addShape('rect', {
attrs: { attrs: {
x: width * (5 / 6), x: width / 2,
y: height / 2, y: height / 2,
width: width / 3, width: width / 3,
height: height, height: height,
fill: cfg.style.fill, fill: cfg.style.fill,
stroke: cfg.style.stroke stroke: cfg.style.stroke,
}, },
name: 'middle-rect', name: 'left-rect',
draggable: true draggable: true,
}); });
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; group.addShape('rect', {
attrs: {
x: width * (5 / 6),
y: height / 2,
width: width / 3,
height: height,
fill: cfg.style.fill,
stroke: cfg.style.stroke,
},
name: 'middle-rect',
draggable: true,
});
//节点上方文字 const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
if(cfg.root && cfg.rootLabel){
group.addShape('text', {
attrs: {
x: width * (2 / 3),
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[0],
fill: style.fill || '#bbb',
fontSize: style.fontSize || 16,
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
group.addShape('text', { //节点上方文字
attrs: { if (cfg.root && cfg.rootLabel) {
x: width, group.addShape('text', {
y: 0, attrs: {
textAlign: 'center', x: width * (2 / 3),
textBaseline: 'middle', y: 0,
text: cfg.rootLabel[1], textAlign: 'center',
fill: style.fill || '#bbb', textBaseline: 'middle',
fontSize: style.fontSize || 16, text: cfg.rootLabel[0],
fontStyle: 'italic', fill: style.fill || '#bbb',
cursor: cfg.style.cursor, fontSize: style.fontSize || 16,
}, fontStyle: 'italic',
name: 'text', cursor: cfg.style.cursor,
draggable: true },
}); name: 'text',
draggable: true,
});
group.addShape('text', { group.addShape('text', {
attrs: { attrs: {
x: width * (4 / 3), x: width,
y: 0, y: 0,
textAlign: 'center', textAlign: 'center',
textBaseline: 'middle', textBaseline: 'middle',
text: cfg.rootLabel[2], text: cfg.rootLabel[1],
fill: style.fill || '#bbb', fill: style.fill || '#bbb',
fontSize: style.fontSize || 16, fontSize: style.fontSize || 16,
fontStyle: 'italic', fontStyle: 'italic',
cursor: cfg.style.cursor, cursor: cfg.style.cursor,
}, },
name: 'text', name: 'text',
draggable: true draggable: true,
}); });
}
//节点左边文字 group.addShape('text', {
if(cfg.index !== null){ attrs: {
group.addShape('text', { x: width * (4 / 3),
attrs: { y: 0,
x: width * (2 / 5), textAlign: 'center',
y: height, textBaseline: 'middle',
textAlign: 'center', text: cfg.rootLabel[2],
textBaseline: 'middle', fill: style.fill || '#bbb',
text: cfg.index, fontSize: style.fontSize || 16,
fill: style.fill || '#bbb', fontStyle: 'italic',
fontSize: style.fontSize || 16, cursor: cfg.style.cursor,
fontStyle: 'italic', },
cursor: cfg.style.cursor, name: 'text',
}, draggable: true,
name: 'text', });
draggable: true }
});
}
//节点文字（数组形式）
if(cfg.label) {
group.addShape('text', {
attrs: {
x: width * (2 / 3),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label[0],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
group.addShape('text', { //节点左边文字
attrs: { if (cfg.index !== null) {
x: width, group.addShape('text', {
y: height, attrs: {
textAlign: 'center', x: width * (2 / 5),
textBaseline: 'middle', y: height,
text: cfg.label[1], textAlign: 'center',
fill: style.fill || '#000', textBaseline: 'middle',
fontSize: style.fontSize || 16, text: cfg.index,
cursor: cfg.style.cursor, fill: style.fill || '#bbb',
}, fontSize: style.fontSize || 16,
name: 'text', fontStyle: 'italic',
draggable: true cursor: cfg.style.cursor,
}); },
} name: 'text',
draggable: true,
});
}
//节点文字（数组形式）
if (cfg.label) {
group.addShape('text', {
attrs: {
x: width * (2 / 3),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label[0],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
//节点没有后续指针时 group.addShape('text', {
if(!cfg.headNext){ attrs: {
group.addShape('text', { x: width,
attrs: { y: height,
x: width * (4 / 3), textAlign: 'center',
y: height * ( 6 / 5), textBaseline: 'middle',
textAlign: 'center', text: cfg.label[1],
textBaseline: 'middle', fill: style.fill || '#000',
text: '^', fontSize: style.fontSize || 16,
fill: style.fill || '#000', cursor: cfg.style.cursor,
fontSize: 25, },
cursor: cfg.style.cursor, name: 'text',
}, draggable: true,
name: 'text', });
draggable: true }
});
}
//节点没有后续指针时
if (!cfg.headNext) {
group.addShape('text', {
attrs: {
x: width * (4 / 3),
y: height * (6 / 5),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 22,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
}
return wrapperRect; return wrapperRect;
}, },
getAnchorPoints() { getAnchorPoints() {
return [ return [
[0.5, 0], [0.5, 0],
[5 / 6, 0.5], [5 / 6, 0.5],
[0.5, 1], [0.5, 1],
[0, 0.5] [0, 0.5],
]; ];
} },
}); });

183
src/RegisteredShape/triTreeNode.ts
View File

@ -1,100 +1,103 @@
import { Util } from '../Common/util'; import { Util } from '../Common/util';
export default Util.registerShape(
'tri-tree-node',
{
draw(cfg, group) {
cfg.size = cfg.size;
export default Util.registerShape('tri-tree-node', { const width = cfg.size[0],
draw(cfg, group) { height = cfg.size[1];
cfg.size = cfg.size;
const width = cfg.size[0], const wrapperRect = group.addShape('rect', {
height = cfg.size[1]; attrs: {
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor,
fill: cfg.style.backgroundFill || '#eee',
},
name: 'wrapper',
});
const wrapperRect = group.addShape('rect', { group.addShape('rect', {
attrs: { attrs: {
x: width / 2, x: width / 4 + width / 2,
y: height / 2, y: height / 2,
width: width, width: width / 2,
height: height, height: height / 4,
stroke: cfg.style.stroke || '#333', fill: '#eee',
cursor: cfg.style.cursor, stroke: cfg.style.stroke || '#333',
fill: cfg.style.backgroundFill || '#eee' cursor: cfg.style.cursor,
}, },
name: 'wrapper' name: 'top',
}); draggable: true,
});
group.addShape('rect', { group.addShape('rect', {
attrs: { attrs: {
x: width / 4 + width / 2, x: width / 4 + width / 2,
y: height / 2, y: height / 2 + height / 4,
width: width / 2, width: width / 2,
height: height / 4, height: (height / 4) * 3,
fill: '#eee', fill: cfg.color || cfg.style.fill,
stroke: cfg.style.stroke || '#333', stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor cursor: cfg.style.cursor,
}, },
name: 'top', name: 'bottom',
draggable: true draggable: true,
}); });
group.addShape('rect', { if (cfg.label) {
attrs: { const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
x: width / 4 + width / 2, group.addShape('text', {
y: height / 2 + height / 4, attrs: {
width: width / 2, x: width, // 居中
height: height / 4 * 3, y: height + height / 8,
fill: cfg.color || cfg.style.fill, textAlign: 'center',
stroke: cfg.style.stroke || '#333', textBaseline: 'middle',
cursor: cfg.style.cursor text: cfg.label,
}, fill: style.fill || '#000',
name: 'bottom', fontSize: style.fontSize || 16,
draggable: true cursor: cfg.style.cursor,
}); },
name: 'text',
draggable: true,
});
}
if (cfg.label) { if (cfg.root) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('text', { group.addShape('text', {
attrs: { attrs: {
x: width, // 居中 x: width, // 居中
y: height + height / 8, y: (height / 4) * 3,
textAlign: 'center', textAlign: 'center',
textBaseline: 'middle', textBaseline: 'middle',
text: cfg.label, text: '^',
fill: style.fill || '#000', fill: style.fill || '#000',
fontSize: style.fontSize || 16, fontSize: style.fontSize || 14,
cursor: cfg.style.cursor cursor: cfg.style.cursor,
}, },
name: 'text', name: 'parent',
draggable: true draggable: true,
}); });
} }
if (cfg.root) { return wrapperRect;
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; },
group.addShape('text', {
attrs: {
x: width, // 居中
y: height / 4 * 3,
textAlign: 'center',
textBaseline: 'middle',
text: "^",
fill: style.fill || '#000',
fontSize: style.fontSize || 14,
cursor: cfg.style.cursor
},
name: 'parent',
draggable: true
});
}
return wrapperRect; getAnchorPoints() {
}, return [
[0.125, 0.5],
getAnchorPoints() { [0.875, 0.5],
return [ [0.5, 1],
[0.125, 0.5], [0.5, 0],
[0.875, 0.5], [0.5, 0.125],
[0.5, 1], ];
[0.5, 0], },
[0.5, 0.125] },
]; 'rect'
}, );
}, 'rect');

252
src/RegisteredShape/twoCellNode.ts
View File

@ -1,138 +1,140 @@
import { Util } from '../Common/util'; import { Util } from '../Common/util';
export default Util.registerShape(
'two-cell-node',
{
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const width = cfg.size[0],
height = cfg.size[1];
export default Util.registerShape('two-cell-node', { const wrapperRect = group.addShape('rect', {
draw(cfg, group) { attrs: {
cfg.size = cfg.size || [30, 10]; x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke,
fill: cfg.style.backgroundFill || '#eee',
},
name: 'wrapper',
});
const width = cfg.size[0], group.addShape('rect', {
height = cfg.size[1]; attrs: {
x: width / 2,
y: height / 2,
width: width / 2,
height: height,
fill: cfg.style.fill,
stroke: cfg.style.stroke,
},
name: 'left-rect',
draggable: true,
});
const wrapperRect = group.addShape('rect', { const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
attrs: {
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke,
fill: cfg.style.backgroundFill || '#eee'
},
name: 'wrapper'
});
group.addShape('rect', { if (cfg.label) {
attrs: { if (Array.isArray(cfg.label)) {
x: width / 2, let tag = cfg.label[0],
y: height / 2, data = cfg.label[1];
width: width / 2,
height: height,
fill: cfg.style.fill,
stroke: cfg.style.stroke
},
name: 'left-rect',
draggable: true
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; group.addShape('text', {
attrs: {
x: width * (3 / 4),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: tag,
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
if (cfg.label) { group.addShape('text', {
if(Array.isArray(cfg.label)) { attrs: {
let tag = cfg.label[0], data = cfg.label[1]; x: width * (5 / 4),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: data,
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
} else {
group.addShape('text', {
attrs: {
x: width * (3 / 4),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
}
}
group.addShape('text', { //图 数据结构中没有后续指针
attrs: { if (cfg.id.includes('tableHeadNode') && !cfg.headNext) {
x: width * (3 / 4), group.addShape('text', {
y: height, attrs: {
textAlign: 'center', x: width * (5 / 4),
textBaseline: 'middle', y: height * (8 / 7),
text: tag, textAlign: 'center',
fill: style.fill || '#000', textBaseline: 'middle',
fontSize: style.fontSize || 16, text: '^',
cursor: cfg.style.cursor, fill: style.fill || '#000',
}, fontSize: 20,
name: 'text', cursor: cfg.style.cursor,
draggable: true },
}); name: 'text',
draggable: true,
});
}
group.addShape('text', { //哈希表 数据结构中没有后续指针
attrs: { if (cfg.id.includes('head') && !cfg.start) {
x: width * (5 / 4), group.addShape('text', {
y: height, attrs: {
textAlign: 'center', x: width * (5 / 4),
textBaseline: 'middle', y: height * (8 / 7),
text: data, textAlign: 'center',
fill: style.fill || '#000', textBaseline: 'middle',
fontSize: style.fontSize || 16, text: '^',
cursor: cfg.style.cursor, fill: style.fill || '#000',
}, fontSize: 20,
name: 'text', cursor: cfg.style.cursor,
draggable: true },
}); name: 'text',
} draggable: true,
else { });
group.addShape('text', { }
attrs: {
x: width * (3 / 4),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
}
//图 数据结构中没有后续指针
if(cfg.id.includes('tableHeadNode') && !cfg.headNext){
group.addShape('text', {
attrs: {
x: width * (5 / 4),
y: height * ( 8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 20,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
//哈希表 数据结构中没有后续指针 return wrapperRect;
if(cfg.id.includes('head') && !cfg.start){ },
group.addShape('text', {
attrs: {
x: width * (5 / 4),
y: height * ( 8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 20,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
return wrapperRect;
},
getAnchorPoints() { getAnchorPoints() {
return [ return [
[0.5, 0], [0.5, 0],
[3 / 4, 0.5], [3 / 4, 0.5],
[0.5, 1], [0.5, 1],
[0, 0.5] [0, 0.5],
]; ];
} },
}, 'rect'); },
'rect'
);