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
Download Patch File Download Diff File Expand all files Collapse all files
src/RegisteredShape/binaryTreeNode.ts
+101 -95
View File
@@ -1,105 +1,111 @@
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', {
draw(cfg, group) {
cfg.size = cfg.size;
const width = cfg.size[0],
height = cfg.size[1];
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 || '#333',
cursor: cfg.style.cursor,
fill: cfg.style.backgroundFill || '#eee',
},
name: 'wrapper',
});
const wrapperRect = group.addShape('rect', {
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'
});
group.addShape('rect', {
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,
});
group.addShape('rect', {
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) || {};
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
if (cfg.label) {
group.addShape('text', {
attrs: {
x: width, // 居中
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.label) {
group.addShape('text', {
attrs: {
x: width, // 居中
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.child[0] == "0x0"){
group.addShape('text', {
attrs: {
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
});
}
const isLeftEmpty =
!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
isRightEmpty =
!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0';
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 [
[0.5, 0],
[0.875, 0.5],
[0.5, 1],
[0.125, 0.5]
];
},
}, 'rect');
return wrapperRect;
},
getAnchorPoints() {
return [
[0.5, 0],
[0.875, 0.5],
[0.5, 1],
[0.125, 0.5],
];
},
},
'rect'
);
src/RegisteredShape/clenQueuePointer.ts
+86 -100
View File
@@ -1,120 +1,106 @@
import G6 from "@antv/g6";
import { Util } from "../Common/util";
import G6 from '@antv/g6';
import { Util } from '../Common/util';
export default function rotate(shape, angle, transform) {
const matrix1 = shape.getMatrix();
const newMatrix1 = transform(matrix1, [
['r', angle],
]);
shape.setMatrix(newMatrix1);
const matrix1 = shape.getMatrix();
const newMatrix1 = transform(matrix1, [['r', angle]]);
shape.setMatrix(newMatrix1);
}
function translate(shape, x, y, transform) {
const matrix1 = shape.getMatrix();
const newMatrix1 = transform(matrix1, [
['t', x, y],
]);
shape.setMatrix(newMatrix1);
const matrix1 = shape.getMatrix();
const newMatrix1 = transform(matrix1, [['t', x, y]]);
shape.setMatrix(newMatrix1);
}
function culcuRotate(angle, R) {
let offsetX = Math.cos(angle) * R;
let offsetY = -Math.sin(angle) * R;
console.log(offsetX, offsetY, R);
return {
offsetX,
offsetY,
}
let offsetX = Math.cos(angle) * R;
let offsetY = -Math.sin(angle) * R;
console.log(offsetX, offsetY, R);
return {
offsetX,
offsetY,
};
}
Util.registerShape('clen-queue-pointer', {
draw(cfg, group) {
let id = cfg.id as string;
draw(cfg, group) {
let id = cfg.id as string;
const index = parseInt(id.split('-')[1]);
const len = parseInt(id.split('-')[2]);
const keyShape = group.addShape('path', {
attrs: {
x: 0,
y: 0,
path: this.getPath(cfg),
fill: cfg.style.fill,
// matrix: cfg.style.matrix
},
name: 'pointer-path'
});
const index = parseInt(id.split('-')[1]);
const len = parseInt(id.split('-')[2]);
const keyShape = group.addShape('path', {
attrs: {
x: 0,
y: 0,
path: this.getPath(cfg),
fill: cfg.style.fill,
// matrix: cfg.style.matrix
},
name: 'pointer-path',
});
const angle = index * Math.PI * 2 / len;
if (cfg.label) {
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'
});
const angle = (index * Math.PI * 2) / len;
if (cfg.label) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
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 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'
});
let label = cfg.label as string;
// 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);
let pointerText = label.split('-')[0];
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',
});
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);
},
getPath(cfg) {
let width = 1,
height = 38,
arrowWidth = width + 4,
arrowHeight = height * 0.3;
return keyShape;
},
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'],
];
getPath(cfg) {
let width = 1,
height = 38,
arrowWidth = width + 4,
arrowHeight = height * 0.3;
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;
},
});
src/RegisteredShape/linkListNode.ts
+83 -81
View File
@@ -6,93 +6,95 @@
* @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
*/
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', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const wrapperRect = group.addShape('rect', {
attrs: {
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],
height = cfg.size[1];
const wrapperRect = group.addShape('rect', {
attrs: {
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'
});
group.addShape('rect', {
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,
});
group.addShape('rect', {
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) || {};
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', {
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.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
});
}
//节点没有后续指针时
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: 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
}
return wrapperRect;
},
return wrapperRect;
},
getAnchorPoints() {
return [
[0.5, 0],
[5 / 6, 0],
[5 / 6, 0.5],
[1, 0.5],
[5 / 6, 1],
[0.5, 1],
[0, 0.5],
[1 / 3, 1]
];
}
}, 'rect');
getAnchorPoints() {
return [
[0.5, 0],
[5 / 6, 0],
[5 / 6, 0.5],
[1, 0.5],
[5 / 6, 1],
[0.5, 1],
[0, 0.5],
[1 / 3, 1],
];
},
},
'rect'
);
src/RegisteredShape/pointer.ts
+76 -77
View File
@@ -1,90 +1,89 @@
import { Util } from '../Common/util';
export default Util.registerShape('pointer', {
draw(cfg, group) {
const keyShape = group.addShape('path', {
attrs: {
path: this.getPath(cfg),
fill: cfg.style.fill,
matrix: cfg.style.matrix
},
name: 'pointer-path'
});
draw(cfg, group) {
const keyShape = group.addShape('path', {
attrs: {
path: this.getPath(cfg),
fill: cfg.style.fill,
matrix: cfg.style.matrix,
},
name: 'pointer-path',
});
if (cfg.label) {
const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {};
if (cfg.label) {
const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {};
const bgRect = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
text: cfg.label,
fill: null,
radius: 2
},
name: 'bgRect'
});
const bgRect = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
text: cfg.label,
fill: null,
radius: 2,
},
name: 'bgRect',
});
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: labelStyle.fill || '#999',
fontSize: labelStyle.fontSize || 16
},
name: 'pointer-text-shape'
});
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: labelStyle.fill || '#999',
fontSize: labelStyle.fontSize || 16,
},
name: 'pointer-text-shape',
});
const { width: textWidth, height: textHeight } = text.getBBox();
const {width: pointerWidth, height: pointerHeight} = keyShape.getBBox();
bgRect.attr({
width: textWidth + pointerWidth + 6,
height: textHeight + pointerHeight + 6
});
const { width: textWidth, height: textHeight } = text.getBBox();
const { width: pointerWidth, height: pointerHeight } = keyShape.getBBox();
bgRect.attr({
width: textWidth + pointerWidth + 6,
height: textHeight + pointerHeight + 6,
});
// 旋转文字
const markerEndPosition = cfg.markerEndPosition;
if(markerEndPosition) {
let textX = markerEndPosition[0],
textY = markerEndPosition[1];
// 旋转文字
const markerEndPosition = cfg.markerEndPosition;
if (markerEndPosition) {
let textX = markerEndPosition[0],
textY = markerEndPosition[1];
text.attr({
x: textX,
y: textY
});
text.attr({
x: textX,
y: textY,
});
bgRect.attr({
x: textX - textWidth / 2 - 3,
y: textY - textHeight / 2 - 3
});
}
return bgRect;
}
bgRect.attr({
x: textX - textWidth / 2 - 3,
y: textY - textHeight / 2 - 3,
});
}
return bgRect;
}
return keyShape;
},
getPath(cfg) {
let width = cfg.size[0],
height = cfg.size[1],
arrowWidth = width + 4,
arrowHeight = height * 0.3;
return keyShape;
},
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'],
];
getPath(cfg) {
let width = cfg.size[0],
height = cfg.size[1],
arrowWidth = width + 4,
arrowHeight = height * 0.3;
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;
},
});
src/RegisteredShape/threeCellNode.ts
+165 -168
View File
@@ -8,185 +8,182 @@
*/
import { registerNode } from '@antv/g6';
export default registerNode('three-cell', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const width = cfg.size[0],
height = cfg.size[1];
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const wrapperRect = group.addShape('rect', {
attrs: {
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],
height = cfg.size[1];
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
});
const wrapperRect = group.addShape('rect', {
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', {
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
});
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,
});
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,
});
//节点上方文字
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
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('text', {
attrs: {
x: width,
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[1],
fill: style.fill || '#bbb',
fontSize: style.fontSize || 16,
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
//节点上方文字
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: {
x: width * (4 / 3),
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[2],
fill: style.fill || '#bbb',
fontSize: style.fontSize || 16,
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
group.addShape('text', {
attrs: {
x: width,
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[1],
fill: style.fill || '#bbb',
fontSize: style.fontSize || 16,
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
//节点左边文字
if(cfg.index !== null){
group.addShape('text', {
attrs: {
x: width * (2 / 5),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.index,
fill: style.fill || '#bbb',
fontSize: style.fontSize || 16,
fontStyle: 'italic',
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', {
attrs: {
x: width * (4 / 3),
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[2],
fill: style.fill || '#bbb',
fontSize: style.fontSize || 16,
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
}
group.addShape('text', {
attrs: {
x: width,
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label[1],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
//节点左边文字
if (cfg.index !== null) {
group.addShape('text', {
attrs: {
x: width * (2 / 5),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.index,
fill: style.fill || '#bbb',
fontSize: style.fontSize || 16,
fontStyle: 'italic',
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,
});
//节点没有后续指针时
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: 25,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
group.addShape('text', {
attrs: {
x: width,
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label[1],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
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() {
return [
[0.5, 0],
[5 / 6, 0.5],
[0.5, 1],
[0, 0.5]
];
}
});
getAnchorPoints() {
return [
[0.5, 0],
[5 / 6, 0.5],
[0.5, 1],
[0, 0.5],
];
},
});
src/RegisteredShape/triTreeNode.ts
+93 -90
View File
@@ -1,100 +1,103 @@
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', {
draw(cfg, group) {
cfg.size = cfg.size;
const width = cfg.size[0],
height = cfg.size[1];
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 || '#333',
cursor: cfg.style.cursor,
fill: cfg.style.backgroundFill || '#eee',
},
name: 'wrapper',
});
const wrapperRect = group.addShape('rect', {
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'
});
group.addShape('rect', {
attrs: {
x: width / 4 + width / 2,
y: height / 2,
width: width / 2,
height: height / 4,
fill: '#eee',
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor,
},
name: 'top',
draggable: true,
});
group.addShape('rect', {
attrs: {
x: width / 4 + width / 2,
y: height / 2,
width: width / 2,
height: height / 4,
fill: '#eee',
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor
},
name: 'top',
draggable: true
});
group.addShape('rect', {
attrs: {
x: width / 4 + width / 2,
y: height / 2 + height / 4,
width: width / 2,
height: (height / 4) * 3,
fill: cfg.color || cfg.style.fill,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor,
},
name: 'bottom',
draggable: true,
});
group.addShape('rect', {
attrs: {
x: width / 4 + width / 2,
y: height / 2 + height / 4,
width: width / 2,
height: height / 4 * 3,
fill: cfg.color || cfg.style.fill,
stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor
},
name: 'bottom',
draggable: true
});
if (cfg.label) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('text', {
attrs: {
x: width, // 居中
y: height + height / 8,
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.label) {
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('text', {
attrs: {
x: width, // 居中
y: height + height / 8,
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.root) {
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,
});
}
if (cfg.root) {
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;
},
return wrapperRect;
},
getAnchorPoints() {
return [
[0.125, 0.5],
[0.875, 0.5],
[0.5, 1],
[0.5, 0],
[0.5, 0.125]
];
},
}, 'rect');
getAnchorPoints() {
return [
[0.125, 0.5],
[0.875, 0.5],
[0.5, 1],
[0.5, 0],
[0.5, 0.125],
];
},
},
'rect'
);
src/RegisteredShape/twoCellNode.ts
+127 -125
View File
@@ -1,138 +1,140 @@
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', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const wrapperRect = group.addShape('rect', {
attrs: {
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],
height = cfg.size[1];
group.addShape('rect', {
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', {
attrs: {
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke,
fill: cfg.style.backgroundFill || '#eee'
},
name: 'wrapper'
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
group.addShape('rect', {
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
});
if (cfg.label) {
if (Array.isArray(cfg.label)) {
let tag = cfg.label[0],
data = cfg.label[1];
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) {
if(Array.isArray(cfg.label)) {
let tag = cfg.label[0], data = cfg.label[1];
group.addShape('text', {
attrs: {
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: {
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.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,
});
}
group.addShape('text', {
attrs: {
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
});
}
}
//图 数据结构中没有后续指针
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
});
}
//哈希表 数据结构中没有后续指针
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,
});
}
//哈希表 数据结构中没有后续指针
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;
},
return wrapperRect;
},
getAnchorPoints() {
return [
[0.5, 0],
[3 / 4, 0.5],
[0.5, 1],
[0, 0.5]
];
}
}, 'rect');
getAnchorPoints() {
return [
[0.5, 0],
[3 / 4, 0.5],
[0.5, 1],
[0, 0.5],
];
},
},
'rect'
);