Merge branch 'hotfix/cjc' into 'main'

修改外部指针id，增加自定义的三叉树

See merge request phenomLi/StructV2!15

demo/Layouter/TriTree.js

@@ -1,96 +1,100 @@
 /**
  * 三叉树
  */
- SV.registerLayout('TriTree', {
+SV.registerLayout('TriTree', {
     defineOptions() {
         return {
-            /**
+            node: {
-             * 结点
-             */
-            element: { 
                 default: {
                     type: 'tri-tree-node',
                     size: [60, 30],
                     label: '[data]',
                     style: {
-                        fill: '#ff2e63',
+                        fill: '#95e1d3',
-                        stroke: "#333",
+                        stroke: '#333',
-                        cursor: 'pointer'
+                        cursor: 'pointer',
+                        backgroundFill: '#eee'
+                    },
+                    labelOptions: {
+                        style: { fontSize: 16 }
                     }
                 }
             },
-            /**
-             * 箭头
-             */
             link: {
                 child: {
-                    type: 'line',
                     sourceAnchor: index => index,
                     targetAnchor: 3,
+                    type: 'line',
                     style: {
                         stroke: '#333',
-                        //边的响应范围
+                        lineAppendWidth: 10,
-                        lineAppendWidth: 6,
+                        lineWidth: 1.6,
-                        cursor: 'pointer',
                         endArrow: 'default',
                         startArrow: {
-                            //参数：半径、偏移量
                             path: G6.Arrow.circle(2, -1),
                             fill: '#333'
                         }
                     }
                 },
-                parent: { 
+                r_parent: {
-                    type: 'line',
+                    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',
+                        stroke: '#999',
-                        //边的响应范围
+                        lineAppendWidth: 10,
-                        lineAppendWidth: 6,
+                        lineWidth: 1.6,
-                        cursor: 'pointer',
                         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'
-            //}
         };
     },
 
@@ -99,7 +103,7 @@
      */
     layoutItem(node, parent, index, layoutOptions) {
         // 次双亲不进行布局
-        if(!node) {
+        if (!node) {
             return null;
         }
 
@@ -109,20 +113,20 @@
             group = new Group(node); //创建分组
 
         //有双亲，设置结点的位置
-        if(parent) {
+        if (parent) {
             // 纵坐标
             node.set('y', parent.get('y') + layoutOptions.yInterval + height);
             // 左节点横坐标
-            if(index === 0) {
+            if (index === 0) {
                 node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
             }
             // 右结点横坐标
-            if(index === 1) {
+            if (index === 1) {
                 node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
             }
         }
         //有孩子
-        if(node.child && (node.child[0] || node.child[1])) {
+        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),
@@ -131,12 +135,12 @@
                 move = 0;
 
             // 处理左子树中子树相交问题
-            if(leftGroup && rightChild) {
+            if (leftGroup && rightChild) {
                 //求出包围盒相交部分
                 intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
                 move = 0;
                 //处理
-                if(intersection && intersection.width > 0) {
+                if (intersection && intersection.width > 0) {
                     move = (intersection.width + layoutOptions.xInterval) / 2;
                     // console.log(move,intersection.width,layoutOptions.xInterval);
                     leftGroup.translate(-move, 0);
@@ -145,10 +149,10 @@
             }
 
             //加入分组
-            if(leftGroup) {
+            if (leftGroup) {
                 group.add(leftGroup);
             }
-            if(rightGroup) {
+            if (rightGroup) {
                 group.add(rightGroup)
             }
 

demo/data.js

@@ -1,16 +1,19 @@
 const SOURCES_DATA = [{
-    "BinaryTree0": {
+    "TriTree0": {
         "data": [{
                 "external": [
-                    "T1"
+                    "T"
+                ],
+                "parent": [
+                    "0x0"
                 ],
                 "child": [
-                    "0x617ee0",
+                    "0xb07ee0",
-                    "0x617f10"
+                    "0xb07f10"
                 ],
-                "id": "0x617eb0",
+                "id": "0xb07eb0",
-                "name": "T1",
+                "name": "T",
-                "data": "Z",
+                "data": "A",
                 "root": true,
                 "type": "default"
             },
@@ -19,19 +22,57 @@ const SOURCES_DATA = [{
                     "0x0",
                     "0x0"
                 ],
-                "id": "0x617ee0",
+                "id": "0xb07ee0",
-                "name": "T1->lchild",
+                "name": "T->lchild",
-                "data": "D",
+                "data": "B",
-                "type": "default"
+                "type": "default",
+                "l_parent": [
+                    "0x0"
+                ],
+                "external": [
+                    "T1"
+                ]
             },
             {
                 "child": [
-                    "0x617f70",
+                    "0x0",
-                    "0x617f40"
+                    "0x0"
                 ],
-                "id": "0x617f10",
+                "id": "0xb07f10",
-                "name": "T1->rchild",
+                "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",
+                "id": "0xb07ee0",
-                "name": "(T1->rchild)->lchild",
+                "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",
+                "id": "0xb07ee0",
-                "name": "(T1->rchild)->rchild",
+                "name": "T->lchild",
                 "data": "B",
                 "type": "default",
+                "l_parent": [
+                    "0xb07eb0"
+                ],
                 "external": [
-                    "t"
+                    "T1"
                 ]
             },
             {
                 "child": [
                     "0x0",
-                    "0x617f40"
+                    "0x0"
                 ],
-                "id": "0x617fa0",
+                "id": "0xb07f10",
-                "name": "((T1->rchild)->rchild)->rchild",
+                "name": "T->rchild",
-                "data": "E",
+                "data": "C",
                 "type": "default",
+                "r_parent": [
+                    "0xb07eb0"
+                ],
                 "external": [
-                    "r"
+                    "T2"
                 ]
             }
         ],
-        "layouter": "BinaryTree"
+        "layouter": "TriTree"
     },
     "handleUpdate": {
         "isEnterFunction": false,

demo/demo.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DEMO</title>
@@ -42,13 +43,13 @@
             transition: opacity 0.75s ease-in-out;
         }
         
-			#leak > span {
+        #leak>span {
             color: #000;
         }
     </style>
-	</head>
+</head>
 
-	<body>
+<body>
     <div class="container" id="container">
         <div id="leak">
             <span>泄漏区</span>
@@ -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>
@@ -147,5 +149,6 @@
             pos.innerHTML = `${x},${y}`;
         });
     </script>
-	</body>
+</body>
+
 </html>

src/Model/modelConstructor.ts

@@ -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) {

src/RegisteredShape/triTreeNode.ts

@@ -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],
+        ];
+    },
+}
+);

src/StructV.ts

@@ -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;
+    
 };