Merge branch 'hotfix/cjc' into 'main'
修改外部指针id，增加自定义的三叉树 See merge request phenomLi/StructV2!15
This commit is contained in:
commit
1c36865547
@ -4,93 +4,97 @@
|
||||
SV.registerLayout('TriTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
/**
|
||||
* 结点
|
||||
*/
|
||||
element: {
|
||||
node: {
|
||||
default: {
|
||||
type: 'tri-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#ff2e63',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
fill: '#95e1d3',
|
||||
stroke: '#333',
|
||||
cursor: 'pointer',
|
||||
backgroundFill: '#eee'
|
||||
},
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 箭头
|
||||
*/
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
sourceAnchor: index => index,
|
||||
targetAnchor: 3,
|
||||
type: 'line',
|
||||
style: {
|
||||
stroke: '#333',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
parent: {
|
||||
type: 'line',
|
||||
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: '#A9A9A9',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 指针
|
||||
*/
|
||||
marker: {
|
||||
external: {
|
||||
type: "pointer",
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
offset: 14,
|
||||
labelOffset: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
// stroke:
|
||||
fontSize: 15,
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 布局
|
||||
*/
|
||||
addressLabel: {
|
||||
style: {
|
||||
fill: '#999'
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
},
|
||||
/**
|
||||
* 动画
|
||||
*/
|
||||
//animation: {
|
||||
// enable: true,
|
||||
// duration: 750,
|
||||
// timingFunction: 'easePolyOut'
|
||||
//}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
149
demo/data.js
149
demo/data.js
@ -1,16 +1,19 @@
|
||||
const SOURCES_DATA = [{
|
||||
"BinaryTree0": {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T1"
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x617ee0",
|
||||
"0x617f10"
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0x617eb0",
|
||||
"name": "T1",
|
||||
"data": "Z",
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
@ -19,19 +22,57 @@ const SOURCES_DATA = [{
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617ee0",
|
||||
"name": "T1->lchild",
|
||||
"data": "D",
|
||||
"type": "default"
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x617f70",
|
||||
"0x617f40"
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f10",
|
||||
"name": "T1->rchild",
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
@ -39,39 +80,93 @@ const SOURCES_DATA = [{
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f70",
|
||||
"name": "(T1->rchild)->lchild",
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x617fa0"
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f40",
|
||||
"name": "(T1->rchild)->rchild",
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"t"
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x617f40"
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617fa0",
|
||||
"name": "((T1->rchild)->rchild)->rchild",
|
||||
"data": "E",
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"r"
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "BinaryTree"
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@ -72,6 +73,7 @@
|
||||
</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>
|
||||
@ -148,4 +150,5 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -49,6 +49,7 @@ export class ModelConstructor {
|
||||
const layoutGroupTable = new Map<string, LayoutGroup>(),
|
||||
layoutMap: { [key: string]: LayoutCreator } = SV.registeredLayout;
|
||||
|
||||
|
||||
Object.keys(sources).forEach(group => {
|
||||
let sourceGroup = sources[group],
|
||||
layout = sourceGroup.layouter,
|
||||
@ -301,7 +302,8 @@ export class ModelConstructor {
|
||||
// 若没有指针字段的结点则跳过
|
||||
if (!markerData) continue;
|
||||
|
||||
let id = `${group}[${name}(${Array.isArray(markerData) ? markerData.join('-') : markerData})]`,
|
||||
let id = `[${name}(${Array.isArray(markerData) ? markerData.join('-') : markerData})]`,
|
||||
|
||||
marker = new SVMarker(id, name, group, layout, markerData, node, markerOptions[name]);
|
||||
|
||||
markerList.push(marker);
|
||||
@ -349,6 +351,7 @@ export class ModelConstructor {
|
||||
): SVNode {
|
||||
let label: string | string[] = this.resolveNodeLabel(options.label, sourceNode),
|
||||
id = `${sourceNodeType}(${sourceNode.id.toString()})`,
|
||||
|
||||
node = new SVNode(id, sourceNodeType, group, layout, sourceNode, label, options);
|
||||
|
||||
if (node.freed) {
|
||||
|
||||
146
src/RegisteredShape/triTreeNode.ts
Normal file
146
src/RegisteredShape/triTreeNode.ts
Normal file
@ -0,0 +1,146 @@
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
export default Util.registerShape(
|
||||
'tri-tree-node',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size;
|
||||
|
||||
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: '#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 + 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
|
||||
});
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
if (cfg.label) {
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
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',
|
||||
isparentEmpty = cfg.parent == "0x0" || cfg.l_parent == "0x0" || cfg.r_parent == "0x0";
|
||||
|
||||
|
||||
if (isparentEmpty) {
|
||||
{
|
||||
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 (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,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0.125, 0.5],
|
||||
[0.875, 0.5],
|
||||
[0.4, 1],
|
||||
[0.5, 0],
|
||||
[0.5, 0.125],
|
||||
[0.6, 1],
|
||||
];
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -13,6 +13,7 @@ import G6 from '@antv/g6';
|
||||
import Pointer from "./RegisteredShape/pointer";
|
||||
import LinkListNode from "./RegisteredShape/linkListNode";
|
||||
import BinaryTreeNode from "./RegisteredShape/binaryTreeNode";
|
||||
import TriTreeNode from "./RegisteredShape/triTreeNode";
|
||||
import CLenQueuePointer from "./RegisteredShape/clenQueuePointer";
|
||||
import TwoCellNode from "./RegisteredShape/twoCellNode";
|
||||
import ThreeCellNode from "./RegisteredShape/threeCellNode";
|
||||
@ -65,6 +66,7 @@ SV.registeredShape = [
|
||||
Pointer,
|
||||
LinkListNode,
|
||||
BinaryTreeNode,
|
||||
TriTreeNode,
|
||||
TwoCellNode,
|
||||
ThreeCellNode,
|
||||
Cursor,
|
||||
@ -92,5 +94,6 @@ SV.registerLayout = function(name: string, layoutCreator: LayoutCreator) {
|
||||
}
|
||||
|
||||
SV.registeredLayout[name] = layoutCreator;
|
||||
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user