Merge branch 'main' of https://gitlab.com/phenomLi/StructV2 into main

# Conflicts:
#	demo/Layouter/Force.js
#	src/Model/SVModel.ts
#	src/StructV.ts
#	src/View/renderer.ts
#	src/View/viewContainer.ts
#	src/engine.ts

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 test
+dist

copyDist2Anyview.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const sourcePath = 'D:\\个人项目\\v\\StructV2\\dist\\sv.js';
-const targetPath = 'D:\\个人项目\\anyview项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
+const targetPath = 'D:\\个人项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
 
 
 function COPY(from, to) {

demo/Layouter/AdjoinMatrixGraph.js

@@ -20,7 +20,6 @@ const isNeighbor = function (itemA, itemB) {
 
 
 SV.registerLayout('AdjoinMatrixGraph', {
-
     sourcesPreprocess(sources) {
         let dataLength = sources.length;
         let matrixNodeLength = dataLength * dataLength;

demo/Layouter/BinaryTree.js

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

demo/Layouter/ChainHashTable.js

@@ -13,7 +13,7 @@ SV.registerLayout('ChainHashTable', {
             element: { 
                 head: {
                     type: 'two-cell-node',
-                    label: '[id]',
+                    label: '[data]',
                     size: [70, 40],
                     style: {
                         stroke: '#333',
@@ -22,7 +22,7 @@ SV.registerLayout('ChainHashTable', {
                 },
                 node: {
                     type: 'link-list-node',
-                    label: '[id]',
+                    label: '[data]',
                     size: [60, 30],
                     style: {
                         stroke: '#333',
@@ -64,9 +64,10 @@ SV.registerLayout('ChainHashTable', {
                     }
                 }
             },
-            pointer: {
+            marker: {
                 external: {
-                    anchor: 3,
+                    type: 'pointer',
+                    anchor: 1,
                     offset: 8,
                     style: {
                         fill: '#f08a5d' 

demo/Layouter/GeneralizedList.js

@@ -63,6 +63,40 @@ SV.registerShape('three-cell-node', {
             });
         }
 
+        //节点没有原子时
+        if(!cfg.sub){
+            group.addShape('text', {
+                attrs: {
+                    x: width, 
+                    y: height * ( 8 / 7),
+                    textAlign: 'center',
+                    textBaseline: 'middle',
+                    text: '^',
+                    fill: '#000',
+                    fontSize: 20,
+                },
+                name: 'text',
+                draggable: true
+            });
+        }
+
+        //节点没有子表时
+        if(!cfg.next){
+            group.addShape('text', {
+                attrs: {
+                    x: width * (4 / 3), 
+                    y: height * ( 8 / 7),
+                    textAlign: 'center',
+                    textBaseline: 'middle',
+                    text: '^',
+                    fill: '#000',
+                    fontSize: 20,
+                },
+                name: 'text',
+                draggable: true
+            });
+        }
+
         return wrapperRect;
     },
 

demo/Layouter/HashTable.js

@@ -1,17 +1,14 @@
-
-
-
 SV.registerLayout('HashTable', {
 
     sourcesPreprocess(sources) {
         const firstElement = sources[0];
 
-        if(firstElement.external) {
+        if (firstElement.external) {
             firstElement.headExternal = firstElement.external;
             delete firstElement.external;
         }
 
-        if(firstElement.cursor) {
+        if (firstElement.cursor) {
             firstElement.headCursor = firstElement.cursor;
             delete firstElement.cursor;
         }
@@ -23,7 +20,7 @@ SV.registerLayout('HashTable', {
         return {
             element: {
                 default: {
-                    type: 'indexed-node',
+                    type: 'array-node',
                     label: '[data]',
                     size: [60, 30],
                     style: {
@@ -71,25 +68,29 @@ SV.registerLayout('HashTable', {
     layout(elements) {
         let arr = elements;
 
-        for(let i = 0; i < arr.length; i++) {
+        for (let i = 0; i < arr.length; i++) {
             let width = arr[i].get('size')[0];
 
-            if(i > 0) {
+            if (i > 0) {
                 arr[i].set('x', arr[i - 1].get('x') + width);
             }
 
-            if(arr[i].empty) {
+            if (arr[i].empty) {
                 arr[i].set('style', {
                     fill: null
                 });
             }
 
-            if(arr[i].disable) {
+            if (arr[i].disable) {
                 arr[i].set('style', {
-                    fill: '#ccc'
+                    fill: null
                 });
+                arr[i].set('labelCfg', {
+                    style: {
+                        opacity: 0.4
+                    }
+                })
             }
         }
     }
 });
-

demo/Layouter/LinkList.js

@@ -5,7 +5,7 @@ SV.registerLayout('LinkList', {
     sourcesPreprocess(sources) {
         let root = sources[0];
 
-        if(root.external) {
+        if (root.external) {
             root.rootExternal = root.external;
             delete root.external;
         }
@@ -77,9 +77,6 @@ SV.registerLayout('LinkList', {
             layout: {
                 xInterval: 50,
                 yInterval: 50
-            },
-            behavior: {
-                dragNode: false
             }
         };
     },
@@ -91,18 +88,18 @@ SV.registerLayout('LinkList', {
      * @param parent 
      */
      layoutItem(node, prev, layoutOptions) {
-        if(!node) {
+        if (!node) {
             return null;
         }
 
         let width = node.get('size')[0];
 
-        if(prev) {
+        if (prev) {
             node.set('y', prev.get('y'));
             node.set('x', prev.get('x') + layoutOptions.xInterval + width);
         }
 
-        if(node.next) {
+        if (node.next) {
             this.layoutItem(node.next, node, layoutOptions);
         }
     },

demo/Layouter/LinkQueue.js

@@ -72,6 +72,20 @@ SV.registerLayout('LinkQueue', {
                             fill: '#333'
                         }
                     }
+                },
+                loopNext: {
+                    type: 'quadratic',
+                    curveOffset: -100,
+                    sourceAnchor: 2,
+                    targetAnchor: 7,
+                    style: {
+                        stroke: '#333',
+                        endArrow: 'default',
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1),
+                            fill: '#333'
+                        }
+                    }
                 }
             },
             marker: {
@@ -85,7 +99,7 @@ SV.registerLayout('LinkQueue', {
             },
             layout: {
                 xInterval: 50,
-                yInterval: 50
+                yInterval: 58
             },
             behavior: {
                 dragNode: ['node']

demo/Layouter/LinkStack.js

@@ -20,7 +20,7 @@
             element: { 
                 default: {
                     type: 'link-list-node',
-                    label: '[id]',
+                    label: '[data]',
                     size: [60, 30],
                     style: {
                         stroke: '#333',
@@ -44,6 +44,20 @@
                             fill: '#333'
                         }
                     }
+                },
+                loopNext: {
+                    type: 'quadratic',
+                    curveOffset: -100,
+                    sourceAnchor: 2,
+                    targetAnchor: 7,
+                    style: {
+                        stroke: '#333',
+                        endArrow: 'default',
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1),
+                            fill: '#333'
+                        }
+                    }
                 }
             },
             marker: {
@@ -83,7 +97,7 @@
 
         let height = node.get('size')[1];
 
-        if(prev) {
+        if(prev && node.isSameGroup(prev)) {
             node.set('x', prev.get('x'));
             node.set('y', prev.get('y') - layoutOptions.yInterval - height);
         }

demo/Layouter/PCTree.js

@@ -0,0 +1,197 @@
+ 
+SV.registerLayout('PCTree', {
+
+    sourcesPreprocess(sources) {
+
+        let headNodes = sources.filter(item => item.type === 'PCTreeHead');
+
+        for(let i = 0; i < headNodes.length; i++){
+
+            let dataNode = {
+                type: 'PCTreePreHead',
+                id: headNodes[i].id + '_0',
+                data: headNodes[i].preData,
+                indexLeft: headNodes[i].index,
+                root: headNodes[i].root
+            }
+            
+            if(dataNode.root){
+                dataNode.indexTop = 'data';
+                headNodes[i].indexTop = ' parent  firstChild'
+            }
+            sources.push(dataNode)
+        }
+
+        return sources;
+    },
+
+    defineOptions() {
+        return {
+            node: {
+                PCTreePreHead: {
+                    type: 'rect',
+                    label: '[data]',
+                    size: [60, 34],
+                    labelOptions: {
+                        style: { fontSize: 16 }
+                    },
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3',
+                        offset: 25
+                    }
+                },
+                PCTreeHead: {
+                    type: 'two-cell-node',
+                    label: '[data]',
+                    size: [120, 34],
+                    style: {
+                        stroke: '#333', 
+                        fill: '#95e1d3'
+                    }
+                },
+                PCTreeNode: {
+                    type: 'link-list-node',
+                    label: '[data]',
+                    size: [60, 27],
+                    style: {
+                        stroke: '#333',
+                        fill: '#00AF92'
+                    }
+                }
+            },
+            indexLabel: {
+                indexTop: { position: 'top' },
+                indexLeft: { position: 'left' }
+            },
+            link: {
+                headNext: { 
+                    sourceAnchor: 1,
+                    targetAnchor: 6,
+                    style: {
+                        stroke: '#333',
+                        endArrow: {
+                            path: G6.Arrow.triangle(8, 6, 0), 
+                            fill: '#333'
+                        },
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1), 
+                            fill: '#333'
+                        }
+                    }
+                },
+                next: {
+                    sourceAnchor: 2,
+                    targetAnchor: 6,
+                    style: {
+                        stroke: '#333',
+                        endArrow: {
+                            path: G6.Arrow.triangle(8, 6, 0), 
+                            fill: '#333'
+                        },
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1), 
+                            fill: '#333'
+                        }
+                    }
+                }
+            },
+            marker: {
+                external: {
+                    type: 'pointer',
+                    anchor: 0,
+                    offset: 8,
+                    style: {
+                        fill: '#f08a5d'
+                    }
+                }
+            },
+            layout: {
+                xInterval: 50,
+                yInterval: 86
+            },
+            behavior: {
+                dragNode: ['PCTreeNode']
+            }
+        };
+    },
+
+    //判断node节点是否之前布局过
+    isUnique(value, allNodeIdValue){
+        let re = new RegExp("" + value);
+        return !re.test(allNodeIdValue);
+    },
+    
+    /**
+     * 对子树进行递归布局
+     * @param node 
+     * @param parent 
+     */
+    layoutItem(node, prev, layoutOptions, allNodeId) {
+        if(!node) {
+            return null;
+        }
+        let width = node.get('size')[0],
+            idValue = node.id.split('(')[1].slice(0, -1);
+        
+        //有y型链表的情况不用再布局
+        if(this.isUnique(idValue, allNodeId.value)){
+            if(prev) {
+                node.set('y', prev.get('y'));
+                node.set('x', prev.get('x') + layoutOptions.xInterval + width);
+            }
+    
+            allNodeId.value += idValue;
+    
+            if(node.next) {
+                this.layoutItem(node.next, node, layoutOptions, allNodeId);
+            }
+        }
+    },  
+
+    layout(elements, layoutOptions) {
+        let headNode = elements.filter(item => item.type === 'PCTreeHead'),
+            preHeadNode =  elements.filter(item => item.type === 'PCTreePreHead'),
+            roots = elements.filter(item => item.type === 'PCTreeNode' && item.root),
+            height = headNode[0].get('size')[1],
+            width = headNode[0].get('size')[0],
+            i,
+            allNodeId = { value: ''};  //引用类型用于传参
+    
+        for(i = 0; i < headNode.length; i++) {
+            let node = headNode[i],
+                preNode = preHeadNode[i];
+
+            node.set({
+                x:  0,
+                y: i * height
+            });
+
+            preNode.set({
+                x:  width  / 4,
+                y:  (i + 1) * height
+            })
+
+            if(node.headNext) {
+                let y = node.get('y') + height - node.headNext.get('size')[1],
+                    x = width + layoutOptions.xInterval * 2;
+
+                node.headNext.set({ x, y });
+                this.layoutItem(node.headNext, null, layoutOptions, allNodeId);
+            }
+        }
+
+        for(i = 0; i < roots.length; i++) {
+            let nodeWidth = roots[0].get('size')[0],
+                nodeInternalSum = i * (nodeWidth + layoutOptions.xInterval);
+
+            roots[i].set({
+                x: headNode[0].get('x') + width + layoutOptions.xInterval * 2 + nodeInternalSum, 
+                y: headNode[0].get('y') - layoutOptions.yInterval 
+            })
+        }
+    }
+});
+
+
+

demo/Layouter/PTree.js

@@ -35,8 +35,12 @@ SV.registerLayout('PTree', {
                 data: sources[i].parent
             });
         }
+        if(sources[0]){
             sources[0].indexLeft = 'data';
+        }
+        if(parentNodes[0]){
             parentNodes[0].indexLeft = 'parent';
+        }
 
         sources.push(...parentNodes);
 
@@ -70,14 +74,17 @@ SV.registerLayout('PTree', {
 
 
     layout(elements) {
-        let nodeLength = elements.length,
+        let nodeLength = elements.length;
-            halfLength = nodeLength / 2,
+
+        if(nodeLength == 0) return;
+        
+        let halfLength = nodeLength / 2,
             size = elements[0].get('size')[0],
             i;
         
             
         for (i = 0; i < nodeLength; i++) {
-            let x = (i % halfLength) * size;
+            let x = (i % halfLength) * size,
                 y = Math.floor(i / halfLength) * size;
 
             elements[i].set({ x, y });

demo/Layouter/TriTree.js

@@ -1,40 +1,36 @@
 /**
  * 三叉树
  */
- 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'
                         }
@@ -43,54 +39,77 @@
                 parent: {
                     type: 'line',
                     sourceAnchor: 4,
-                    targetAnchor: 2,
+                    targetAnchor: 6,
                     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'
+                        }
+                    }
+                },
+                r_parent: {
+                    type: 'quadratic',
+                    sourceAnchor: 4,
+                    targetAnchor: 5,
+                    curveOffset: -20,
+                    style: {
+                        stroke: '#999',
+                        lineAppendWidth: 10,
+                        lineWidth: 1.6,
+                        endArrow: 'default',
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1),
+                            fill: '#999'
+                        }
+                    }
+                },
+                l_parent: {
+                    type: 'quadratic',
+                    sourceAnchor: 4,
+                    targetAnchor: 2,
+                    curveOffset: 20,
+                    style: {
+                        stroke: '#999',
+                        lineAppendWidth: 10,
+                        lineWidth: 1.6,
+                        endArrow: 'default',
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1),
+                            fill: '#999'
                         }
                     }
                 },
             },
-            /**
-             * 指针
-             */
             marker: {
                 external: {
-                    type: "pointer",
+                    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 +118,7 @@
      */
     layoutItem(node, parent, index, layoutOptions) {
         // 次双亲不进行布局
-        if(!node) {
+        if (!node) {
             return null;
         }
 
@@ -109,20 +128,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 +150,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 +164,10 @@
             }
 
             //加入分组
-            if(leftGroup) {
+            if (leftGroup) {
                 group.add(leftGroup);
             }
-            if(rightGroup) {
+            if (rightGroup) {
                 group.add(rightGroup)
             }
 

demo/data.js

@@ -0,0 +1,292 @@
+const SOURCES_DATA = [{
+    "TriTree0": {
+        "data": [{
+                "external": [
+                    "T"
+                ],
+                "parent": [
+                    "0x0"
+                ],
+                "child": [
+                    "0xfd9ee0",
+                    "0xfd9f10"
+                ],
+                "id": "0xfd9eb0",
+                "name": "T",
+                "data": "A",
+                "root": true,
+                "type": "default"
+            },
+            {
+                "child": [
+                    "0x0",
+                    "0x0"
+                ],
+                "id": "0xfd9ee0",
+                "name": "T->lchild",
+                "data": "B",
+                "type": "default",
+                "l_parent": [
+                    "0xfd9eb0"
+                ],
+                "external": [
+                    "T1"
+                ]
+            },
+            {
+                "child": [
+                    "0x0",
+                    "0x0"
+                ],
+                "id": "0xfd9f10",
+                "name": "T->rchild",
+                "data": "C",
+                "type": "default",
+                "r_parent": [
+                    "0xfd9eb0"
+                ],
+                "external": [
+                    "T2"
+                ]
+            }
+        ],
+        "layouter": "TriTree"
+    },
+    "TriTree3": {
+        "data": [{
+            "external": [
+                "T3"
+            ],
+            "parent": [
+                "0x0"
+            ],
+            "child": [
+                "0x0",
+                "0x0"
+            ],
+            "id": "0xfd9f40",
+            "name": "T3",
+            "data": "D",
+            "root": true,
+            "type": "default"
+        }],
+        "layouter": "TriTree"
+    },
+    "TriTree4": {
+        "data": [{
+            "external": [
+                "T4"
+            ],
+            "parent": [
+                "0x0"
+            ],
+            "child": [
+                "0x0",
+                "0x0"
+            ],
+            "id": "0xfd9f70",
+            "name": "T4",
+            "data": "E",
+            "root": true,
+            "type": "default"
+        }],
+        "layouter": "TriTree"
+    },
+    "handleUpdate": {
+        "isEnterFunction": true,
+        "isFirstDebug": true
+    }
+}, {
+    "TriTree0": {
+        "data": [{
+                "external": [
+                    "T"
+                ],
+                "parent": [
+                    "0x0"
+                ],
+                "child": [
+                    "0xfd9ee0",
+                    "0xfd9f10"
+                ],
+                "id": "0xfd9eb0",
+                "name": "T",
+                "data": "A",
+                "root": true,
+                "type": "default"
+            },
+            {
+                "child": [
+                    "0x0",
+                    "0x0"
+                ],
+                "id": "0xfd9ee0",
+                "name": "T->lchild",
+                "data": "B",
+                "type": "default",
+                "l_parent": [
+                    "0xfd9eb0"
+                ],
+                "external": [
+                    "T1"
+                ]
+            },
+            {
+                "child": [
+                    "0x0",
+                    "0x0"
+                ],
+                "id": "0xfd9f10",
+                "name": "T->rchild",
+                "data": "C",
+                "type": "default",
+                "r_parent": [
+                    "0xfd9eb0"
+                ],
+                "external": [
+                    "T2"
+                ]
+            }
+        ],
+        "layouter": "TriTree"
+    },
+    "TriTree3": {
+        "data": [{
+            "external": [
+                "T3"
+            ],
+            "parent": [
+                "0x0"
+            ],
+            "child": [
+                "0x0",
+                "0x0"
+            ],
+            "id": "0xfd9f40",
+            "name": "T3",
+            "data": "D",
+            "root": true,
+            "type": "default"
+        }],
+        "layouter": "TriTree"
+    },
+    "TriTree4": {
+        "data": [{
+            "external": [
+                "T4"
+            ],
+            "parent": [
+                "0xfd9f40"
+            ],
+            "child": [
+                "0x0",
+                "0x0"
+            ],
+            "id": "0xfd9f70",
+            "name": "T4",
+            "data": "E",
+            "root": true,
+            "type": "default"
+        }],
+        "layouter": "TriTree"
+    },
+    "handleUpdate": {
+        "isEnterFunction": false,
+        "isFirstDebug": false
+    }
+}, {
+    "TriTree0": {
+        "data": [{
+                "external": [
+                    "T"
+                ],
+                "parent": [
+                    "0x0"
+                ],
+                "child": [
+                    "0xfd9ee0",
+                    "0xfd9f10"
+                ],
+                "id": "0xfd9eb0",
+                "name": "T",
+                "data": "A",
+                "root": true,
+                "type": "default"
+            },
+            {
+                "child": [
+                    "0x0",
+                    "0x0"
+                ],
+                "id": "0xfd9ee0",
+                "name": "T->lchild",
+                "data": "B",
+                "type": "default",
+                "l_parent": [
+                    "0xfd9eb0"
+                ],
+                "external": [
+                    "T1"
+                ]
+            },
+            {
+                "child": [
+                    "0x0",
+                    "0x0"
+                ],
+                "id": "0xfd9f10",
+                "name": "T->rchild",
+                "data": "C",
+                "type": "default",
+                "r_parent": [
+                    "0xfd9eb0"
+                ],
+                "external": [
+                    "T2"
+                ]
+            }
+        ],
+        "layouter": "TriTree"
+    },
+    "TriTree3": {
+        "data": [{
+                "external": [
+                    "T3"
+                ],
+                "parent": [
+                    "0x0"
+                ],
+                "child": [
+                    "0xfd9f70",
+                    "0x0"
+                ],
+                "id": "0xfd9f40",
+                "name": "T3",
+                "data": "D",
+                "root": true,
+                "type": "default"
+            },
+            {
+                "child": [
+                    "0x0",
+                    "0x0"
+                ],
+                "id": "0xfd9f70",
+                "name": "T3->lchild",
+                "data": "E",
+                "type": "default",
+                "l_parent": [
+                    "0xfd9f40"
+                ],
+                "external": [
+                    "T4"
+                ]
+            }
+        ],
+        "layouter": "TriTree"
+    },
+    "handleUpdate": {
+        "isEnterFunction": false,
+        "isFirstDebug": false
+    }
+}];

demo/demo.html

@@ -2,8 +2,8 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DEMO</title>
     <style>
         * {
@@ -50,7 +50,6 @@
 </head>
 
 <body>
-
     <div class="container" id="container">
         <div id="leak">
             <span>泄漏区</span>
@@ -67,15 +66,14 @@
 
     <script src="./../dist/sv.js"></script>
     <script>
-
         const Group = SV.Group,
             Bound = SV.Bound,
             G6 = SV.G6,
             Vector = SV.Vector;
-
     </script>
     <script src="./Layouter/LinkList.js"></script>
     <script src="./Layouter/BinaryTree.js"></script>
+    <script src="./Layouter/TriTree.js"></script>
     <script src="./Layouter/Stack.js"></script>
     <script src="./Layouter/LinkQueue.js"></script>
     <script src="./Layouter/GeneralizedList.js"></script>
@@ -87,9 +85,10 @@
     <script src="./Layouter/AdjoinTableGraph.js"></script>
     <script src="./Layouter/SqQueue.js"></script>
     <script src="./Layouter/PTree.js"></script>
+    <script src="./Layouter/PCTree.js"></script>
+    <script src="./data.js"></script>
 
     <script>
-
         let cur = SV(document.getElementById('container'), {
             view: {
                 leakAreaHeight: 130,
@@ -97,133 +96,8 @@
             },
         });
 
-
-        let data = [{
-            "sqStack0": {
-                "data": [
-                    {
-                        "id": "0x617eb5",
-                        "data": "",
-                        "index": 5,
-                        "cursor": "top"
-                    },
-                    {
-                        "id": "0x617eb4",
-                        "data": "2",
-                        "index": 4
-                    },
-                    {
-                        "id": "0x617eb3",
-                        "data": "6",
-                        "index": 3
-                    },
-                    {
-                        "id": "0x617eb2",
-                        "data": "7",
-                        "index": 2
-                    },
-                    {
-                        "id": "0x617eb1",
-                        "data": "9",
-                        "index": 1
-                    },
-                    {
-                        "id": "0x617eb0",
-                        "data": "1",
-                        "index": 0,
-                        "external": "S"
-                    }
-                ],
-                "layouter": "Stack"
-            }
-        }, {
-            "sqStack0": {
-                "data": [
-                    {
-                        "id": "0x617eb4",
-                        "data": "2",
-                        "index": 4,
-                        "cursor": "top",
-                        "type": "default"
-                    },
-                    {
-                        "id": "0x617eb3",
-                        "data": "6",
-                        "index": 3,
-                        "type": "default"
-                    },
-                    {
-                        "id": "0x617eb2",
-                        "data": "7",
-                        "index": 2,
-                        "type": "default"
-                    },
-                    {
-                        "id": "0x617eb1",
-                        "data": "9",
-                        "index": 1,
-                        "type": "default"
-                    },
-                    {
-                        "id": "0x617eb0",
-                        "data": "1",
-                        "index": 0,
-                        "bottomExternal": "S",
-                        "type": "default"
-                    }
-                ],
-                "layouter": "Stack"
-            }
-        }, {
-            "data": [
-                {
-                    "id": "0x617eb5",
-                    "data": "",
-                    "index": 5,
-                    "cursor": "top",
-                    "type": "default"
-                },
-                {
-                    "id": "0x617eb4",
-                    "data": "2",
-                    "index": 4,
-                    "type": "default"
-                },
-                {
-                    "id": "0x617eb3",
-                    "data": "6",
-                    "index": 3,
-                    "type": "default"
-                },
-                {
-                    "id": "0x617eb2",
-                    "data": "7",
-                    "index": 2,
-                    "type": "default"
-                },
-                {
-                    "id": "0x617eb1",
-                    "data": "9",
-                    "index": 1,
-                    "type": "default"
-                },
-                {
-                    "id": "0x617eb0",
-                    "data": "1",
-                    "index": 0,
-                    "bottomExternal": "S",
-                    "type": "default"
-                }
-            ],
-            "layouter": "Stack"
-        }];
-
-
-
-
-
         let dataIndex = 0,
-            curData = data[dataIndex];
+            curData = SOURCES_DATA[dataIndex];
 
         let enableBrushSelect = false;
 
@@ -235,12 +109,12 @@
         cur.render(curData);
 
         document.getElementById('btn-next').addEventListener('click', e => {
-            curData = data[++dataIndex];
+            curData = SOURCES_DATA[++dataIndex];
             cur.render(curData);
         });
 
         document.getElementById('btn-prev').addEventListener('click', e => {
-            curData = data[--dataIndex];
+            curData = SOURCES_DATA[--dataIndex];
             cur.render(curData);
         });
 
@@ -270,12 +144,10 @@
         // -------------------------------------------------------------------------------------------------------
 
         container.addEventListener('mousemove', e => {
-            let x = e.offsetX, y = e.offsetY;
+            let x = e.offsetX,
+                y = e.offsetY;
             pos.innerHTML = `${x},${y}`;
         });
-
-
-
     </script>
 </body>
 

demoV2/Layouter/BinaryTree.js

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

package.json

@@ -1,19 +1,20 @@
 {
-  "dependencies": {
-    "@antv/g6": "^4.4.1",
-    "merge": "^2.1.1"
-  },
-  "devDependencies": {
-    "merge": "^2.1.1",
-    "ts-loader": "^5.2.1",
-    "typescript": "^3.2.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.2.3"
-  },
   "scripts": {
     "build": "webpack --config webpack.config.product.js",
     "dep": "webpack --config webpack.config.product.js && node copyDist2Anyview.js",
-    "dev": "webpack --w --config webpack.config.develop.js",
+    "dev": "webpack --watch --config webpack.config.develop.js",
     "copy": "node copyDist2Anyview.js"
+  },
+  "devDependencies": {
+    "acorn": "^8.7.0",
+    "merge": "^2.1.1",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2"
+  },
+  "dependencies": {
+    "@antv/g6": "^4.6.4",
+    "merge": "^2.1.1"
   }
 }

src/BehaviorHelper/behaviorIssueHelper.ts

@@ -1,10 +1,9 @@
-import { Graph, INode } from "@antv/g6";
+import { G6Event, Graph, INode } from '@antv/g6';
-import { EventBus } from "../Common/eventBus";
+import { EventBus } from '../Common/eventBus';
-import { LayoutGroupTable } from "../Model/modelConstructor";
+import { LayoutGroupTable } from '../Model/modelConstructor';
-import { SVModel } from "../Model/SVModel";
+import { SVModel } from '../Model/SVModel';
-import { SVNode } from "../Model/SVNode";
+import { SVNode } from '../Model/SVNode';
-import { ViewContainer } from "../View/viewContainer";
+import { ViewContainer } from '../View/viewContainer';
-
 
 /**
  * 判断当前节点是否可以单独拖拽
@@ -23,8 +22,7 @@ const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | str
 	}
 
 	return false;
-}
+};
-
 
 /**
  * 判定该节点是否可以被拖拽
@@ -32,7 +30,11 @@ const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | str
  * 2. 当 dragNodeOption 声明了某些节点的type时（字符数组），这些节点可以单独拖拽
  * 3. 当 dragNodeOption 为 false 或者不包含在声明的type的节点，只能批量拖拽
  */
-export const DetermineNodeDrag = function (layoutGroupTable: LayoutGroupTable, node: SVNode, brushSelectedModels: SVModel[]) {
+export const DetermineNodeDrag = function (
+	layoutGroupTable: LayoutGroupTable,
+	node: SVNode,
+	brushSelectedModels: SVModel[]
+) {
 	const layoutGroup = layoutGroupTable.get(node.group),
 		dragNodeOption = layoutGroup.options.behavior?.dragNode,
 		canNodeDragAlone = checkNodeDragAlone(node, dragNodeOption);
@@ -45,14 +47,13 @@ export const DetermineNodeDrag = function (layoutGroupTable: LayoutGroupTable, n
 		nodeModelType = node.getModelType(),
 		modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType),
 		brushSelectedSameTypeModels = brushSelectedModels.filter(item => {
-            return item.group === node.group &&
+			return (
-                item.getModelType() === nodeModelType &&
+				item.group === node.group && item.getModelType() === nodeModelType && item.sourceType === nodeSourceType
-                item.sourceType === nodeSourceType
+			);
 		});
 
 	return modelList.length === brushSelectedSameTypeModels.length;
-}
+};
-
 
 /**
  * 在初始化渲染器之后，修正节点拖拽时，外部指针或者其他 appendage 没有跟着动的问题
@@ -76,7 +77,7 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
 				item.setSelectedState(false);
 
 				if (item instanceof SVNode) {
-                    item.appendages.forEach(appendage => appendage.setSelectedState(false));
+					item.getAppendagesList().forEach(appendage => appendage.setSelectedState(false));
 				}
 			});
 			viewContainer.brushSelectedModels.length = 0;
@@ -97,14 +98,14 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
 			node.setSelectedState(false);
 			node.set({
 				x: node.G6Item.getModel().x,
-                y: node.G6Item.getModel().y
+				y: node.G6Item.getModel().y,
 			});
 
-            node.appendages.forEach(item => {
+			node.getAppendagesList().forEach(item => {
 				item.setSelectedState(false);
 				item.set({
 					x: item.G6Item.getModel().x,
-                    y: item.G6Item.getModel().y
+					y: item.G6Item.getModel().y,
 				});
 			});
 		}
@@ -112,14 +113,14 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
 		viewContainer.brushSelectedModels.forEach(item => {
 			item.set({
 				x: item.G6Item.getModel().x,
-                y: item.G6Item.getModel().y
+				y: item.G6Item.getModel().y,
 			});
 
-            if(item instanceof SVNode) {
+			if (item instanceof SVNode) {
-                item.appendages.forEach(appendage => {
+				item.getAppendagesList().forEach(appendage => {
 					appendage.set({
 						x: appendage.G6Item.getModel().x,
-                        y: appendage.G6Item.getModel().y
+						y: appendage.G6Item.getModel().y,
 					});
 				});
 			}
@@ -127,7 +128,6 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
 	});
 }
 
-
 /**
  * 检测框选到的节点是不是都可以被选中
  * @param viewContainer
@@ -136,8 +136,8 @@ export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
 	const g6Instance: Graph = viewContainer.getG6Instance();
 
 	// 当框选完成后，监听被框选节点的数量变化事件，将被框选的节点添加到 brushSelectedModels 数组里面
-    g6Instance.on('nodeselectchange', event => {
+	g6Instance.on('nodeselectchange' as G6Event, event => {
-        const selectedItems = event.selectedItems as { nodes: INode[]; },
+		const selectedItems = event.selectedItems as { nodes: INode[] },
 			tmpSelectedModelList = [];
 
 		// 如果是点击选中，不理会
@@ -159,54 +159,44 @@ export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
 
 			if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) {
 				viewContainer.brushSelectedModels.push(node);
-            }
+			} else {
-            else {
 				node.setSelectedState(false);
 			}
 		});
 	});
 }
 
-
-
 /**
  * 解决泄漏区随着视图拖动的问题
  * @param g6Instance
  * @param hasLeak
  */
 export function SolveDragCanvasWithLeak(viewContainer: ViewContainer) {
-    let g6Instance = viewContainer.getG6Instance(),
+	let g6Instance = viewContainer.getG6Instance();
-        prevDy = 0;
 
 	g6Instance.on('viewportchange', event => {
 		if (event.action !== 'translate') {
 			return false;
 		}
 
-        let translateX = event.matrix[7],
+		let translateY = event.matrix[7],
-            dy = translateX - prevDy;
+			dy = translateY - viewContainer.lastLeakAreaTranslateY;
 
-        prevDy = translateX;
+        viewContainer.lastLeakAreaTranslateY = translateY;
 
 		viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
 		if (viewContainer.hasLeak) {
 			EventBus.emit('onLeakAreaUpdate', {
 				leakAreaY: viewContainer.leakAreaY,
-                hasLeak: viewContainer.hasLeak
+				hasLeak: viewContainer.hasLeak,
 			});
 		}
 	});
 }
 
-
-
-
-
 /**
  * 解决泄漏区随着视图缩放的问题（这里搞不出来，尽力了）
  * @param g6Instance
  * @param generalModelsGroup
  */
-export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) {
+export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) {}
-
-}

src/BehaviorHelper/initG6Behaviors.ts

@@ -45,7 +45,7 @@ export function InitG6Behaviors(engine: Engine, viewContainer: ViewContainer): M
         // 这里之所以要把节点和其 appendages 的选中状态设置为true，是因为 g6 处理拖拽节点的逻辑是将所以已选中的元素一起拖动，
         // 这样 appendages 就可以很自然地跟着节点动（我是看源码才知道的）
         node.setSelectedState(true);
-        node.appendages.forEach(item => {
+        node.getAppendagesList().forEach(item => {
             item.setSelectedState(true);
         });
 
@@ -53,8 +53,13 @@ export function InitG6Behaviors(engine: Engine, viewContainer: ViewContainer): M
     };
 
     const selectNodeFilter = event => {
-        let g6Item = event.item,
+        let g6Item = event.item;
-            node: SVNode = g6Item.SVModel;
+
+        if(g6Item === null) {
+            return false
+        }
+
+        let node: SVNode = g6Item.SVModel;
 
         if (g6Item === null || node.isNode() === false) {
             return false;

src/Common/boundingRect.ts

@@ -1,6 +1,4 @@
-import { Vector } from "./vector";
+import { Vector } from './vector';
-
-
 
 // 包围盒类型
 export type BoundingRect = {
@@ -10,10 +8,8 @@ export type BoundingRect = {
 	height: number;
 };
 
-
 // 包围盒操作
 export const Bound = {
-
 	/**
 	 * 从点集生成包围盒
 	 * @param points
@@ -25,17 +21,17 @@ export const Bound = {
 			minY = Infinity;
 
 		points.map(item => {
-            if(item[0] > maxX) maxX = item[0];
+			if (item[0] > maxX) maxX = item[0];
-            if(item[0] < minX) minX = item[0];
+			if (item[0] < minX) minX = item[0];
-            if(item[1] > maxY) maxY = item[1];
+			if (item[1] > maxY) maxY = item[1];
-            if(item[1] < minY) minY = item[1];
+			if (item[1] < minY) minY = item[1];
 		});
 
 		return {
 			x: minX,
 			y: minY,
 			width: maxX - minX,
-            height: maxY - minY
+			height: maxY - minY,
 		};
 	},
 
@@ -48,7 +44,7 @@ export const Bound = {
 			[bound.x, bound.y],
 			[bound.x + bound.width, bound.y],
 			[bound.x + bound.width, bound.y + bound.height],
-            [bound.x, bound.y + bound.height]
+			[bound.x, bound.y + bound.height],
 		];
 	},
 
@@ -57,20 +53,30 @@ export const Bound = {
 	 * @param arg
 	 */
 	union(...arg: BoundingRect[]): BoundingRect {
-        return arg.length > 1? 
+		if (arg.length === 0) {
-            arg.reduce((total, cur) => {
+			return {
-            let minX = total.x < cur.x? total.x: cur.x,
+				x: 0,
-                maxX = total.x + total.width < cur.x + cur.width? cur.x + cur.width: total.x + total.width,
+				y: 0,
-                minY = total.y < cur.y? total.y: cur.y,
+				width: 0,
-                maxY = total.y + total.height < cur.y + cur.height? cur.y + cur.height: total.y + total.height;
+				height: 0,
+			};
+		}
+
+		return arg.length > 1
+			? arg.reduce((total, cur) => {
+					let minX = Math.min(total.x, cur.x),
+						maxX = Math.max(total.x + total.width, cur.x + cur.width),
+						minY = Math.min(total.y, cur.y),
+						maxY = Math.max(total.y + total.height, cur.y + cur.height);
 
 					return {
 						x: minX,
 						y: minY,
 						width: maxX - minX,
-                height: maxY - minY
+						height: maxY - minY,
 					};
-        }): arg[0];
+			  })
+			: arg[0];
 	},
 
 	/**
@@ -79,31 +85,36 @@ export const Bound = {
 	 * @param b2
 	 */
 	intersect(b1: BoundingRect, b2: BoundingRect): BoundingRect {
-        let x, y, 
+		let x,
-            maxX, maxY,
+			y,
+			maxX,
+			maxY,
 			overlapsX,
-            overlapsY;
+			overlapsY,
+			b1x = b1.x,
+			b1mx = b1.x + b1.width,
+			b2x = b2.x,
+			b2mx = b2.x + b2.width,
+			b1y = b1.y,
+			b1my = b1.y + b1.height,
+			b2y = b2.y,
+			b2my = b2.y + b2.height;
 
-        if(b1.x < b2.x + b2.width && b1.x + b1.width > b2.x) {
+		x = Math.max(b1x, b2x);
-            x = b1.x < b2.x? b2.x: b1.x;
+		maxX = Math.min(b1mx, b2mx);
-            // maxX = b1.x + b1.width < b2.x + b2.width? b1.x + b1.width: b2.x + b2.width;
-            maxX = b1.x + b1.width;
 		overlapsX = maxX - x;
-        }
 
-        if(b1.y < b2.y + b2.height && b1.y + b1.height > b2.y) {
+		y = Math.max(b1y, b2y);
-            y = b1.y < b2.y? b2.y: b1.y;
+		maxY = Math.min(b1my, b2my);
-            maxY = b1.y + b1.height < b2.y + b2.height? b1.y + b1.height: b2.y + b2.height;
 		overlapsY = maxY - y;
-        }
 
-        if(!overlapsX || !overlapsY) return null;
+		if (!overlapsX || !overlapsY) return null;
 
 		return {
 			x,
 			y,
 			width: overlapsX,
-            height: overlapsY
+			height: overlapsY,
 		};
 	},
 
@@ -146,7 +157,5 @@ export const Bound = {
 		}
 
 		return false;
-    }
+	},
 };
-
-

src/Common/util.ts

@@ -122,21 +122,6 @@ export const Util = {
         return list;
     },
 
-    /**
-     * G6 data 转换器
-     * @param layoutGroup 
-     * @returns 
-     */
-    convertG6Data(layoutGroup: LayoutGroup): GraphData {
-        let nodes = [...layoutGroup.node, ...layoutGroup.marker],
-            edges = layoutGroup.link;
-
-        return {
-            nodes: nodes.map(item => item.getG6ModelProps()) as NodeConfig[],
-            edges: edges.map(item => item.getG6ModelProps()) as EdgeConfig[]
-        };
-    },
-
     /**
      * 将 modelList 转换到 G6Data
      * @param modelList

src/Model/SVLink.ts

@@ -1,8 +1,8 @@
-import { EdgeConfig, IEdge } from "@antv/g6-core";
+import { EdgeConfig, IEdge } from '@antv/g6-core';
-import { Util } from "../Common/util";
+import { Util } from '../Common/util';
-import { LinkLabelOption, LinkOption, Style } from "../options";
+import { LinkLabelOption, LinkOption, Style } from '../options';
-import { SVModel } from "./SVModel";
+import { SVModel } from './SVModel';
-import { SVNode } from "./SVNode";
+import { SVNode } from './SVNode';
 
 export class SVLink extends SVModel {
 	public node: SVNode;
@@ -12,11 +12,25 @@ export class SVLink extends SVModel {
 	public shadowG6Item: IEdge;
 	public G6Item: IEdge;
 
-    constructor(id: string, type: string, group: string, layout: string, node: SVNode, target: SVNode, index: number, options: LinkOption) { 
+	public nodeId: string;
+	public targetId: string;
+
+	constructor(
+		id: string,
+		type: string,
+		group: string,
+		layout: string,
+		node: SVNode,
+		target: SVNode,
+		index: number,
+		options: LinkOption
+	) {
 		super(id, type, group, layout, 'link');
 
 		this.node = node;
 		this.target = target;
+		this.nodeId = node.id;
+		this.targetId = target.id;
 		this.linkIndex = index;
 
 		node.links.outDegree.push(this);
@@ -28,14 +42,19 @@ export class SVLink extends SVModel {
 		let sourceAnchor = options.sourceAnchor,
 			targetAnchor = options.targetAnchor;
 
-        if(options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
+		if (options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
 			sourceAnchor = options.sourceAnchor(this.linkIndex);
 		}
 
-        if(options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
+		if (options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
 			targetAnchor = options.targetAnchor(this.linkIndex);
 		}
 
+		let label = this.target.sourceNode.freed ? 'freed' : '',
+			labelCfg = this.target.sourceNode.freed
+				? { position: 'start', autoRotate: true, refY: 7, style: { fontSize: 11, opacity: 0.8 } }
+				: Util.objectClone<LinkLabelOption>(options.labelOptions || ({} as LinkLabelOption));
+
 		return {
 			id: this.id,
 			type: options.type,
@@ -43,10 +62,28 @@ export class SVLink extends SVModel {
 			target: this.target.id,
 			sourceAnchor,
 			targetAnchor,
-            label: options.label,
+			label,
 			style: Util.objectClone<Style>(options.style),
-            labelCfg: Util.objectClone<LinkLabelOption>(options.labelOptions),
+			labelCfg,
-            curveOffset: options.curveOffset
+			curveOffset: options.curveOffset,
 		};
 	}
-};
+
+	triggerHighlight(changeHighlightColor: string) {
+		this.originStyle = Util.objectClone(this.G6ModelProps.style);
+		this.set('style', {
+			stroke: changeHighlightColor,
+		});
+	}
+
+	isEqual(link: SVLink): boolean {
+		return link.targetId === this.targetId && link.nodeId === this.nodeId && link.linkIndex === this.linkIndex;
+	}
+
+	beforeDestroy(): void {
+		Util.removeFromList(this.target.links.inDegree, item => item.id === this.id);
+		Util.removeFromList(this.node.links.outDegree, item => item.id === this.id);
+		this.node = null;
+		this.target = null;
+	}
+}

src/Model/SVModel.ts

@@ -1,13 +1,10 @@
-import { Util } from "../Common/util";
+import { Util } from '../Common/util';
-import { Style } from "../options";
+import { Style } from '../options';
-import { BoundingRect } from "../Common/boundingRect";
+import { BoundingRect } from '../Common/boundingRect';
-import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core";
+import { EdgeConfig, Item, NodeConfig } from '@antv/g6-core';
-import { Graph } from "@antv/g6";
+import { Graph } from '@antv/g6-pc';
 import merge from 'merge';
 
-
-
-
 export class SVModel {
 	public id: string;
 	public sourceType: string;
@@ -24,7 +21,7 @@ export class SVModel {
 	public discarded: boolean;
 	public freed: boolean;
 	public leaked: boolean;
-    public generalStyle: Partial<Style>;
+	public originStyle: Partial<Style>; // 用作保存修改前的样式
 
 	private transformMatrix: number[];
 	private modelType: string;
@@ -88,8 +85,7 @@ export class SVModel {
 
 		if (attr === 'style' || attr === 'labelCfg') {
 			this.G6ModelProps[attr] = merge(this.G6ModelProps[attr] || {}, value);
-        }
+		} else {
-        else {
 			this.G6ModelProps[attr] = value;
 		}
 
@@ -103,8 +99,7 @@ export class SVModel {
 			if (this.preLayout) {
 				const G6ItemModel = this.G6Item.getModel();
 				G6ItemModel[attr] = value;
-            }
+			} else {
-            else {
 				this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
 			}
 		}
@@ -122,11 +117,11 @@ export class SVModel {
 	updateG6ModelStyle(G6ModelProps: NodeConfig | EdgeConfig) {
 		const newG6ModelProps = {
 			style: {
-                ...G6ModelProps.style
+				...G6ModelProps.style,
 			},
 			labelCfg: {
-                ...G6ModelProps.labelCfg
+				...G6ModelProps.labelCfg,
-            }
+			},
 		};
 
 		this.G6ModelProps = merge.recursive(this.G6ModelProps, newG6ModelProps);
@@ -169,7 +164,7 @@ export class SVModel {
 	 * @param isSelected
 	 */
 	setSelectedState(isSelected: boolean) {
-        if(this.G6Item === null) {
+		if (this.G6Item === null) {
 			return;
 		}
 
@@ -192,6 +187,19 @@ export class SVModel {
 		return this.modelType;
 	}
 
+    triggerHighlight(changeHighlightColor: string) {
+        this.originStyle = Util.objectClone(this.G6ModelProps.style);
+        this.set('style', {
+            fill: changeHighlightColor,
+        });
+    }
+
+    restoreHighlight() {
+        if (this.originStyle) {
+            this.set('style', { ...this.originStyle });
+        }
+    }
+
     /**
 	 * 判断是否为节点model（SVNode）
 	 */
@@ -199,22 +207,17 @@ export class SVModel {
 		return false;
 	}
 
+    isEqual(model: SVModel): boolean {
+        return this.id === model.id;
+    }
 
+    beforeRender () {}
+    afterRender() {}
+
+    beforeDestroy () {}
+    afterDestroy() {
+        this.G6Item = null;
+        this.shadowG6Instance = null;
+        this.shadowG6Item = null;
+    }
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

src/Model/SVNode.ts

@@ -1,13 +1,11 @@
-import { INode, NodeConfig } from "@antv/g6-core";
+import { INode, NodeConfig } from '@antv/g6-core';
-import { Util } from "../Common/util";
+import { Util } from '../Common/util';
-import { NodeLabelOption, NodeOption, Style } from "../options";
+import { NodeLabelOption, NodeOption, Style } from '../options';
-import { SourceNode } from "../sources";
+import { SourceNode } from '../sources';
-import { SVLink } from "./SVLink";
+import { ModelConstructor } from './modelConstructor';
-import { SVModel } from "./SVModel";
+import { SVLink } from './SVLink';
-import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from "./SVNodeAppendage";
+import { SVModel } from './SVModel';
-
+import { SVNodeAppendage } from './SVNodeAppendage';
-
-
 
 export class SVNode extends SVModel {
 	public sourceId: string;
@@ -19,17 +17,17 @@ export class SVNode extends SVModel {
 
 	private label: string | string[];
 	private disable: boolean;
+	public appendages: { [key: string]: SVNodeAppendage[] };
 
-    public shadowG6Item: INode;
+	constructor(
-    public G6Item: INode;
+		id: string,
-
+		type: string,
-    public marker: SVMarker;
+		group: string,
-    public freedLabel: SVFreedLabel;
+		layout: string,
-    public indexLabel: SVIndexLabel;
+		sourceNode: SourceNode,
-    public addressLabel: SVAddressLabel;
+		label: string | string[],
-    public appendages: SVNodeAppendage[];
+		options: NodeOption
-
+	) {
-    constructor(id: string, type: string, group: string, layout: string, sourceNode: SourceNode, label: string | string[], options: NodeOption) {
 		super(id, type, group, layout, 'node');
 
 		this.group = group;
@@ -45,7 +43,7 @@ export class SVNode extends SVModel {
 		this.sourceId = sourceNode.id.toString();
     
 		this.links = { inDegree: [], outDegree: [] };
-        this.appendages = [];
+		this.appendages = {};
 		this.sourceNode = sourceNode;
 		this.label = label;
 		this.G6ModelProps = this.generateG6ModelProps(options);
@@ -66,9 +64,8 @@ export class SVNode extends SVModel {
 			label: this.label as string,
 			style: {
 				...style,
-                fill: this.disable ? '#ccc' : style.fill
 			},
-            labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
+			labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
 		};
 	}
 
@@ -86,7 +83,7 @@ export class SVNode extends SVModel {
 		}
 
 		this.G6Item.setState('selected', isSelected);
-        this.appendages.forEach(item => {
+		this.getAppendagesList().forEach(item => {
 			item.setSelectedState(isSelected);
 		});
 	}
@@ -94,8 +91,29 @@ export class SVNode extends SVModel {
 	getSourceId(): string {
 		return this.sourceId;
 	}
-};
 
+    getAppendagesList(): SVNodeAppendage[] {
+        const list = [];
 
+        Object.entries(this.appendages).forEach(item => {
+            list.push(...item[1]);
+        });
 
+        return list;
+    }
 
+	/**
+	 * 判断这个节点是否来自相同group
+	 * @param node
+	 */
+	isSameGroup(node: SVNode): boolean {
+        return ModelConstructor.isSameGroup(this, node);
+    }
+
+    beforeDestroy(): void {
+        this.sourceNode = null;
+        this.links.inDegree.length = 0;
+        this.links.outDegree.length = 0;
+        this.appendages = {};
+    }
+}

src/Model/SVNodeAppendage.ts

@@ -1,34 +1,50 @@
-import { INode, NodeConfig, EdgeConfig } from "@antv/g6-core";
+import { INode, NodeConfig, EdgeConfig } from '@antv/g6-core';
-import { Util } from "../Common/util";
+import { Bound, BoundingRect } from '../Common/boundingRect';
-import { AddressLabelOption, IndexLabelOption, MarkerOption, NodeLabelOption, Style } from "../options";
+import { Util } from '../Common/util';
-import { SVModel } from "./SVModel";
+import { AddressLabelOption, IndexLabelOption, MarkerOption, NodeLabelOption, Style } from '../options';
-import { SVNode } from "./SVNode";
+import { SVModel } from './SVModel';
-
+import { SVNode } from './SVNode';
-
-
 
 export class SVNodeAppendage extends SVModel {
+    public targetId: string;
 	public target: SVNode;
+    public label: string;
 
-    constructor(id: string, type: string, group: string, layout: string, modelType: string, target: SVNode) {
+	constructor(id: string, type: string, group: string, layout: string, modelType: string, target: SVNode, label: string | string[]) {
 		super(id, type, group, layout, modelType);
 
 		this.target = target;
-        this.target.appendages.push(this);
+        this.targetId = target.id;
+        this.label = typeof label === 'string' ? label : label.join(', ');
+
+		if (this.target.appendages[modelType] === undefined) {
+			this.target.appendages[modelType] = [];
+		}
+
+		this.target.appendages[modelType].push(this);
+	}
+
+	beforeDestroy(): void {
+		const targetAppendageList = this.target.appendages[this.getModelType()];
+
+		if (targetAppendageList) {
+            Util.removeFromList(targetAppendageList, item => item.id === this.id);
+		}
+
+		this.target = null;
+	}
+
+    isEqual(appendage: SVNodeAppendage): boolean {
+		return appendage.targetId === this.targetId && appendage.label === this.label;
 	}
 }
 
-
-
-
 /**
  * 已释放节点下面的文字（“已释放‘）
  */
 export class SVFreedLabel extends SVNodeAppendage {
 	constructor(id: string, type: string, group: string, layout: string, target: SVNode) {
-        super(id, type, group, layout, 'freedLabel', target);
+		super(id, type, group, layout, 'freedLabel', target, '已释放');
-
-        this.target.freedLabel = this;
 		this.G6ModelProps = this.generateG6ModelProps();
 	}
 
@@ -38,73 +54,80 @@ export class SVFreedLabel extends SVNodeAppendage {
 			x: 0,
 			y: 0,
 			type: 'rect',
-            label: '已释放',
+			label: this.label,
 			labelCfg: {
 				style: {
 					fill: '#b83b5e',
-                    opacity: 0.6
+					opacity: 0.6,
-                }
+				},
 			},
 			size: [0, 0],
 			style: {
 				opacity: 0,
 				stroke: null,
-                fill: 'transparent'
+				fill: 'transparent',
-            }
+			},
 		};
 	}
 }
 
-
 /**
  * 被移动到泄漏区的节点上面显示的地址
  */
 export class SVAddressLabel extends SVNodeAppendage {
-    private sourceId: string;
-
 	constructor(id: string, type: string, group: string, layout: string, target: SVNode, options: AddressLabelOption) {
-        super(id, type, group, layout, 'addressLabel', target);
+		super(id, type, group, layout, 'addressLabel', target, target.sourceId);
-
-        this.sourceId = target.sourceId;
-        this.target.addressLabel = this;
 		this.G6ModelProps = this.generateG6ModelProps(options);
 	}
 
+	getBound(): BoundingRect {
+		const textBound = this.shadowG6Item.getContainer().getChildren()[1].getBBox(),
+			keyBound = this.shadowG6Item.getBBox();
+		return {
+			x: keyBound.x + textBound.x,
+			y: keyBound.y + textBound.y,
+			width: textBound.width,
+			height: textBound.height,
+		};
+	}
+
 	generateG6ModelProps(options: AddressLabelOption) {
 		return {
 			id: this.id,
 			x: 0,
 			y: 0,
 			type: 'rect',
-            label: this.sourceId,
+			label: this.label,
 			labelCfg: {
 				style: {
 					fill: '#666',
 					fontSize: 16,
-                    ...options.style
+					...options.style,
-                }
+				},
 			},
 			size: [0, 0],
 			style: {
 				stroke: null,
-                fill: 'transparent'
+				fill: 'transparent',
-            }
+			},
 		};
 	}
 }
 
-
 /**
  * 节点的下标文字
  */
 export class SVIndexLabel extends SVNodeAppendage {
-    private value: string;
+	constructor(
-
+		id: string,
-    constructor(id: string, indexName: string, group: string, layout: string, value: string, target: SVNode, options: IndexLabelOption) {
+		indexName: string,
-        super(id, indexName, group, layout, 'indexLabel', target);
+		group: string,
-
+		layout: string,
-        this.target.indexLabel = this;
+		value: string,
-        this.value = value;
+		target: SVNode,
+		options: IndexLabelOption
+	) {
+		super(id, indexName, group, layout, 'indexLabel', target, value);
 		this.G6ModelProps = this.generateG6ModelProps(options) as NodeConfig;
 	}
 
@@ -114,7 +137,7 @@ export class SVIndexLabel extends SVNodeAppendage {
 			x: 0,
 			y: 0,
 			type: 'rect',
-            label: this.value,
+			label: this.label,
 			labelCfg: {
 				style: {
 					fill: '#bbb',
@@ -122,36 +145,37 @@ export class SVIndexLabel extends SVNodeAppendage {
 					textBaseline: 'middle',
 					fontSize: 14,
 					fontStyle: 'italic',
-                    ...options.style
+					...options.style,
-                }
+				},
 			},
 			size: [0, 0],
 			style: {
 				stroke: null,
-                fill: 'transparent'
+				fill: 'transparent',
-            }
+			},
 		};
 	}
 }
 
-
-
 /**
  * 外部指针
  */
 export class SVMarker extends SVNodeAppendage {
-    public label: string | string[];
 	public anchor: number;
 
 	public shadowG6Item: INode;
 	public G6Item: INode;
 
-    constructor(id: string, type: string, group: string, layout: string, label: string | string[], target: SVNode, options: MarkerOption) {
+	constructor(
-        super(id, type, group, layout, 'marker', target);
+		id: string,
-
+		type: string,
-        this.label = label;
+		group: string,
-
+		layout: string,
-        this.target.marker = this;
+		label: string | string[],
+		target: SVNode,
+		options: MarkerOption
+	) {
+		super(id, type, group, layout, 'marker', target, label);
 		this.G6ModelProps = this.generateG6ModelProps(options);
 	}
 
@@ -169,9 +193,9 @@ export class SVMarker extends SVNodeAppendage {
 			type: options.type || 'marker',
 			size: options.size || defaultSize,
 			anchorPoints: null,
-            label: typeof this.label === 'string' ? this.label : this.label.join(', '),
+			label: this.label,
 			style: Util.objectClone<Style>(options.style),
-            labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
+			labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
 		};
 	}
 
@@ -179,4 +203,4 @@ export class SVMarker extends SVNodeAppendage {
 		const { width, height } = this.shadowG6Item.getContainer().getChildren()[2].getBBox();
 		return Math.max(width, height);
 	}
-};
+}

src/Model/modelConstructor.ts

@@ -1,22 +1,27 @@
-import { Util } from "../Common/util";
+import { Group } from '../Common/group';
-import { Engine } from "../engine";
+import { Util } from '../Common/util';
-import { AddressLabelOption, IndexLabelOption, LayoutCreator, LayoutGroupOptions, LinkOption, MarkerOption, NodeOption } from "../options";
+import { Engine } from '../engine';
-import { sourceLinkData, LinkTarget, Sources, SourceNode } from "../sources";
+import {
-import { SV } from "../StructV";
+	AddressLabelOption,
-import { SVLink } from "./SVLink";
+	IndexLabelOption,
-import { SVModel } from "./SVModel";
+	LayoutCreator,
-import { SVNode } from "./SVNode";
+	LayoutGroupOptions,
-import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from "./SVNodeAppendage";
+	LinkOption,
-
+	MarkerOption,
+	NodeOption,
+} from '../options';
+import { sourceLinkData, LinkTarget, Sources, SourceNode } from '../sources';
+import { SV } from '../StructV';
+import { SVLink } from './SVLink';
+import { SVModel } from './SVModel';
+import { SVNode } from './SVNode';
+import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from './SVNodeAppendage';
 
 export type LayoutGroup = {
 	name: string;
 	node: SVNode[];
-    indexLabel: SVIndexLabel[];
+	appendage: SVNodeAppendage[];
-    freedLabel: SVFreedLabel[];
-    addressLabel: SVAddressLabel[];
 	link: SVLink[];
-    marker: SVMarker[];
 	layoutCreator: LayoutCreator;
 	layout: string;
 	options: LayoutGroupOptions;
@@ -24,10 +29,8 @@ export type LayoutGroup = {
 	isHide: boolean;
 };
 
-
 export type LayoutGroupTable = Map<string, LayoutGroup>;
 
-
 export class ModelConstructor {
 	private engine: Engine;
 	private layoutGroupTable: LayoutGroupTable;
@@ -46,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,
@@ -58,10 +62,7 @@ export class ModelConstructor {
 			let sourceDataString: string = JSON.stringify(sourceGroup.data),
 				prevString: string = this.prevSourcesStringMap[group],
 				nodeList: SVNode[] = [],
-                freedLabelList: SVFreedLabel[] = [],
+				appendageList: SVNodeAppendage[] = [];
-                addressLabelList: SVAddressLabel[] = [],
-                indexLabelList: SVIndexLabel[] = [],
-                markerList: SVMarker[] = [];
 
 			if (prevString === sourceDataString) {
 				return;
@@ -75,40 +76,37 @@ export class ModelConstructor {
 				addressLabelOption = options.addressLabel || {};
 
 			nodeList = this.constructNodes(group, layout, nodeOptions, sourceData);
-            markerList = this.constructMarkers(group, layout, markerOptions, nodeList);
+			appendageList.push(...this.constructMarkers(group, layout, markerOptions, nodeList));
-            indexLabelList = this.constructIndexLabel(group, layout, indexLabelOptions, nodeList);
+			appendageList.push(...this.constructIndexLabel(group, layout, indexLabelOptions, nodeList));
-            addressLabelList = this.constructAddressLabel(group, layout, addressLabelOption, nodeList);
+			appendageList.push(...this.constructAddressLabel(group, layout, addressLabelOption, nodeList));
 			nodeList.forEach(item => {
-                if(item.freedLabel) {
+				if (item.appendages.freedLabel) {
-                    freedLabelList.push(item.freedLabel);
+					appendageList.push(...item.appendages.freedLabel);
 				}
 			});
 
 			layoutGroupTable.set(group, {
 				name: group,
 				node: nodeList,
-                freedLabel: freedLabelList, 
+				appendage: appendageList,
-                addressLabel: addressLabelList,
-                indexLabel: indexLabelList,
 				link: [],
-                marker: markerList,
 				options,
 				layoutCreator,
-                modelList: [
+				modelList: [...nodeList, ...appendageList],
-                    ...nodeList, 
-                    ...markerList, 
-                    ...freedLabelList, 
-                    ...addressLabelList,
-                    ...indexLabelList
-                ],
 				layout,
-                isHide: false
+				isHide: false,
 			});
 		});
 
 		layoutGroupTable.forEach((layoutGroup: LayoutGroup, group: string) => {
 			const linkOptions = layoutGroup.options.link || {},
-                linkList: SVLink[] = this.constructLinks(group, layoutGroup.layout, linkOptions, layoutGroup.node, layoutGroupTable);
+				linkList: SVLink[] = this.constructLinks(
+					group,
+					layoutGroup.layout,
+					linkOptions,
+					layoutGroup.node,
+					layoutGroupTable
+				);
 
 			layoutGroup.link = linkList;
 			layoutGroup.modelList.push(...linkList);
@@ -119,7 +117,6 @@ export class ModelConstructor {
 		return this.layoutGroupTable;
 	}
 
-
 	/**
 	 * 从源数据构建 node 集
 	 * @param nodeOptions
@@ -128,7 +125,12 @@ export class ModelConstructor {
 	 * @param layout
 	 * @returns
 	 */
-    private constructNodes(group: string, layout: string, nodeOptions: { [key: string]: NodeOption }, sourceList: SourceNode[]): SVNode[] {
+	private constructNodes(
+		group: string,
+		layout: string,
+		nodeOptions: { [key: string]: NodeOption },
+		sourceList: SourceNode[]
+	): SVNode[] {
 		let defaultSourceNodeType: string = 'default',
 			nodeList: SVNode[] = [];
 
@@ -154,7 +156,13 @@ export class ModelConstructor {
 	 * @param layoutGroupTable
 	 * @returns
 	 */
-    private constructLinks(group: string, layout: string, linkOptions: { [key: string]: LinkOption }, nodes: SVNode[], layoutGroupTable: LayoutGroupTable): SVLink[] {
+	private constructLinks(
+		group: string,
+		layout: string,
+		linkOptions: { [key: string]: LinkOption },
+		nodes: SVNode[],
+		layoutGroupTable: LayoutGroupTable
+	): SVLink[] {
 		let linkList: SVLink[] = [],
 			linkNames = Object.keys(linkOptions);
 
@@ -174,7 +182,7 @@ export class ModelConstructor {
 				if (Array.isArray(sourceLinkData)) {
 					node[name] = sourceLinkData.map((item, index) => {
 						targetNode = this.fetchTargetNodes(layoutGroupTable, node, item);
-                        let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
+						let isGeneralLink = ModelConstructor.isGeneralLink(sourceLinkData.toString());
 
 						if (targetNode) {
 							link = this.createLink(name, group, layout, node, targetNode, index, linkOptions[name]);
@@ -183,13 +191,12 @@ export class ModelConstructor {
 
 						return isGeneralLink ? targetNode : null;
 					});
-                }
+				} else {
-                else {
 					targetNode = this.fetchTargetNodes(layoutGroupTable, node, sourceLinkData);
-                    let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
+					let isGeneralLink = ModelConstructor.isGeneralLink(sourceLinkData.toString());
 
 					if (targetNode) {
-                        link = this.createLink(name, group, layout, node, targetNode, null, linkOptions[name]);
+						link = this.createLink(name, group, layout, node, targetNode, 0, linkOptions[name]);
 						linkList.push(link);
 					}
 
@@ -207,7 +214,12 @@ export class ModelConstructor {
 	 * @param layout
 	 * @param indexLabelOptions
 	 */
-    private constructIndexLabel(group: string, layout: string, indexLabelOptions: { [key: string]: IndexLabelOption }, nodes: SVNode[]): SVIndexLabel[] {
+	private constructIndexLabel(
+		group: string,
+		layout: string,
+		indexLabelOptions: { [key: string]: IndexLabelOption },
+		nodes: SVNode[]
+	): SVIndexLabel[] {
 		let indexLabelList: SVIndexLabel[] = [],
 			indexNames = Object.keys(indexLabelOptions);
 
@@ -219,8 +231,16 @@ export class ModelConstructor {
 				// 若没有指针字段的结点则跳过
 				if (value === undefined || value === null) continue;
 
-                let id = `${group}.${name}#${value}`,
+				let id = `${group}[${name}(${value})]`,
-                    indexLabel = new SVIndexLabel(id, name, group, layout, value.toString(), node, indexLabelOptions[name]);
+					indexLabel = new SVIndexLabel(
+						id,
+						name,
+						group,
+						layout,
+						value.toString(),
+						node,
+						indexLabelOptions[name]
+					);
 
 				indexLabelList.push(indexLabel);
 			}
@@ -236,11 +256,23 @@ export class ModelConstructor {
 	 * @param addressLabelOption
 	 * @param nodes
 	 */
-    private constructAddressLabel(group: string, layout: string, addressLabelOption: AddressLabelOption, nodes: SVNode[]): SVAddressLabel[] {
+	private constructAddressLabel(
+		group: string,
+		layout: string,
+		addressLabelOption: AddressLabelOption,
+		nodes: SVNode[]
+	): SVAddressLabel[] {
 		let addressLabelList: SVAddressLabel[] = [];
 
 		nodes.forEach(item => {
-            const addressLabel = new SVAddressLabel(`${item.id}-address-label`, item.sourceType, group, layout, item, addressLabelOption);
+			const addressLabel = new SVAddressLabel(
+				`address-label(${item.id})`,
+				item.sourceType,
+				group,
+				layout,
+				item,
+				addressLabelOption
+			);
 			addressLabelList.push(addressLabel);
 		});
 
@@ -253,7 +285,12 @@ export class ModelConstructor {
 	 * @param nodes
 	 * @returns
 	 */
-    private constructMarkers(group: string, layout: string, markerOptions: { [key: string]: MarkerOption }, nodes: SVNode[]): SVMarker[] {
+	private constructMarkers(
+		group: string,
+		layout: string,
+		markerOptions: { [key: string]: MarkerOption },
+		nodes: SVNode[]
+	): SVMarker[] {
 		let markerList: SVMarker[] = [],
 			markerNames = Object.keys(markerOptions);
 
@@ -265,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);
@@ -285,8 +323,7 @@ export class ModelConstructor {
 
 		if (Array.isArray(label)) {
 			targetLabel = label.map(item => this.parserNodeContent(sourceNode, item) ?? '');
-        }
+		} else {
-        else {
 			targetLabel = this.parserNodeContent(sourceNode, label);
 		}
 
@@ -305,13 +342,20 @@ export class ModelConstructor {
 	 * @param layout
 	 * @param options
 	 */
-    private createNode(sourceNode: SourceNode, sourceNodeType: string, group: string, layout: string, options: NodeOption): SVNode {
+	private createNode(
+		sourceNode: SourceNode,
+		sourceNodeType: string,
+		group: string,
+		layout: string,
+		options: NodeOption
+	): SVNode {
 		let label: string | string[] = this.resolveNodeLabel(options.label, sourceNode),
-            id = sourceNodeType + '.' + sourceNode.id.toString(),
+			id = `${sourceNodeType}(${sourceNode.id.toString()})`,
+      
 			node = new SVNode(id, sourceNodeType, group, layout, sourceNode, label, options);
 
-        if(node.freed) {
+		if (node.freed) {
-            node.freedLabel = new SVFreedLabel(`${id}-freed-label`, sourceNodeType, group, layout, node);
+			new SVFreedLabel(`freed-label(${id})`, sourceNodeType, group, layout, node);
 		}
 
 		return node;
@@ -328,8 +372,16 @@ export class ModelConstructor {
 	 * @param options
 	 * @returns
 	 */
-    private createLink(linkName: string, group: string, layout: string, node: SVNode, target: SVNode, index: number, options: LinkOption): SVLink {
+	private createLink(
-        let id = `${linkName}(${node.id}-${target.id})`;
+		linkName: string,
+		group: string,
+		layout: string,
+		node: SVNode,
+		target: SVNode,
+		index: number,
+		options: LinkOption
+	): SVLink {
+		let id = `${linkName}{${node.id}-${target.id}}#${index}`;
 		return new SVLink(id, linkName, group, layout, node, target, index, options);
 	}
 
@@ -381,47 +433,39 @@ export class ModelConstructor {
 		if (info.length > 1) {
 			sourceNodeType = info.pop();
 			targetGroupName = info.pop();
-        }
+		} else {
-        else {
 			let field = info.pop(); 
 			if (layoutGroupTable.get(targetGroupName).node.find(item => item.sourceType === field)) {
 				sourceNodeType = field;
-            }
+			} else if (layoutGroupTable.has(field)) {
-            else if (layoutGroupTable.has(field)) {
 				targetGroupName = field;
-            }
+			} else {
-            else {
 				return null;
 			}
 		}
 
-        nodeList = layoutGroupTable.get(targetGroupName).node.filter(item => item.sourceType === sourceNodeType);
+    // 为了可以连接到不同group的结点
-
+    for (let layoutGroup of layoutGroupTable.values()) {
-        // 若目标node不存在，返回null
+      nodeList = layoutGroup.node.filter(item => item.sourceType === sourceNodeType);
       if (nodeList === undefined) {
-            return null;
+        continue;
       }
-
 		  targetNode = nodeList.find(item => item.sourceId === targetId);
+      if (targetNode) {
+        break;
+      }
+    }
+		// nodeList = layoutGroupTable.get(targetGroupName).node.filter(item => item.sourceType === sourceNodeType);
+
+		// // 若目标node不存在，返回null
+		// if (nodeList === undefined) {
+		// 	return null;
+		// }
+
+		// targetNode = nodeList.find(item => item.sourceId === targetId);
 		return targetNode || null;
 	}
 
-    /**
-     * 检测改指针是否为常规指针（指向另一个group）
-     * @param linkId 
-     */
-    private isGeneralLink(linkId: string): boolean {
-        let counter = 0;
-
-        for (let i = 0; i < linkId.length; i++) {
-            if (linkId[i] === '#') {
-                counter++;
-            }
-        }
-
-        return counter <= 2;
-    }
-
 	/**
 	 *
 	 * @returns
@@ -433,8 +477,114 @@ export class ModelConstructor {
 	/**
 	 * 销毁
 	 */
-    destroy() {
+	public destroy() {
 		this.layoutGroupTable = null;
 		this.prevSourcesStringMap = null;
 	}
-};
+
+	// -------------------------------------------------------------------------------------------------
+
+	/**
+	 * 检测改指针是否为常规指针（指向另一个group）
+	 * @param linkId
+	 */
+	static isGeneralLink(linkId: string): boolean {
+		let counter = 0;
+
+		for (let i = 0; i < linkId.length; i++) {
+			if (linkId[i] === '#') {
+				counter++;
+			}
+		}
+
+		return counter <= 2;
+	}
+
+	/**
+	 * 判断这个节点是否来自相同group
+	 * @param node1
+	 * @param node2
+	 */
+	static isSameGroup(node1: SVNode, node2: SVNode): boolean {
+		return node1.group === node2.group;
+	}
+
+    /**
+     * 获取簇
+     * - 什么为一个簇？有边相连的一堆节点，再加上这些节点各自的appendages，共同组成了一个簇
+     * @param models 
+     * @returns 
+     */
+	static getClusters(models: SVModel[]): Group[] {
+		const clusterGroupList = [],
+			idMap = {},
+            idName = '__clusterId';
+
+		models.forEach(item => {
+			idMap[item.id] = item;
+		});
+
+		const DFS = (model: SVModel, clusterId: number, idMap): SVModel[] => {
+            if(model === null) {
+                return [];
+            }
+
+			if (idMap[model.id] === undefined) {
+				return [];
+			}
+
+			if (model[idName] !== undefined) {
+				return [];
+			}
+
+			const list = [model];
+			model[idName] = clusterId;
+
+			if (model instanceof SVNode) {
+				model.getAppendagesList().forEach(item => {
+					list.push(...DFS(item, clusterId, idMap));
+				});
+
+				model.links.inDegree.forEach(item => {
+					list.push(...DFS(item, clusterId, idMap));
+				});
+
+				model.links.outDegree.forEach(item => {
+					list.push(...DFS(item, clusterId, idMap));
+				});
+			}
+
+			if (model instanceof SVLink) {
+				list.push(...DFS(model.node, clusterId, idMap));
+				list.push(...DFS(model.target, clusterId, idMap));
+			}
+
+			if (model instanceof SVNodeAppendage) {
+                list.push(...DFS(model.target, clusterId, idMap));
+			}
+
+			return list;
+		};
+
+		for (let i = 0; i < models.length; i++) {
+			const model = models[i];
+
+			if (model[idName] !== undefined) {
+                delete model[idName];
+				continue;
+			}
+
+			const group = new Group(),
+				clusterList = DFS(model, i, idMap);
+
+			clusterList.forEach(item => {
+				group.add(item);
+			});
+            
+			clusterGroupList.push(group);
+            delete model[idName];
+		}
+
+		return clusterGroupList;
+	}
+}

src/RegisteredShape/binaryTreeNode.ts

@@ -1,7 +1,8 @@
 import { Util } from '../Common/util';
 
-
+export default Util.registerShape(
-export default Util.registerShape('binary-tree-node', {
+	'binary-tree-node',
+	{
 		draw(cfg, group) {
 			cfg.size = cfg.size;
 
@@ -16,9 +17,9 @@ export default Util.registerShape('binary-tree-node', {
 					height: height,
 					stroke: cfg.style.stroke || '#333',
 					cursor: cfg.style.cursor,
-                fill: cfg.style.backgroundFill || '#eee'
+					fill: cfg.style.backgroundFill || '#eee',
 				},
-            name: 'wrapper'
+				name: 'wrapper',
 			});
 
 			group.addShape('rect', {
@@ -29,14 +30,15 @@ export default Util.registerShape('binary-tree-node', {
 					height: height,
 					fill: cfg.style.fill,
 					stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
+					cursor: cfg.style.cursor,
 				},
 				name: 'mid',
-            draggable: true
+				draggable: true,
 			});
 
-        if (cfg.label) {
 			const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+
+			if (cfg.label) {
 				group.addShape('text', {
 					attrs: {
 						x: width, // 居中
@@ -46,10 +48,50 @@ export default Util.registerShape('binary-tree-node', {
 						text: cfg.label,
 						fill: style.fill || '#000',
 						fontSize: style.fontSize || 16,
-                    cursor: cfg.style.cursor
+						cursor: cfg.style.cursor,
 					},
-                name: 'text',
+					name: 'label',
-                draggable: true
+					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';
+
+			//节点没有左孩子节点时
+			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: 'null-left',
+					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: 'null-right',
+					draggable: true,
 				});
 			}
 
@@ -61,7 +103,9 @@ export default Util.registerShape('binary-tree-node', {
 				[0.5, 0],
 				[0.875, 0.5],
 				[0.5, 1],
-            [0.125, 0.5]
+				[0.125, 0.5],
 			];
 		},
-}, 'rect');
+	},
+	'rect'
+);

src/RegisteredShape/chainHashTableNode.ts

@@ -0,0 +1,74 @@
+import { Util } from '../Common/util';
+export default Util.registerShape(
+    'chain-hashtable-node',
+    {
+        draw(cfg, group) {
+            cfg.size = cfg.size || [30, 30];
+    
+            const width = cfg.size[0],
+                height = cfg.size[1];
+    
+            const wrapperRect = group.addShape('rect', {
+                attrs: {
+                    x: width / 2,
+                    y: height / 2,
+                    width: width,
+                    height: height,
+                    stroke: cfg.style.stroke,
+                    fill: cfg.style.backgroundFill || '#eee'
+                },
+                name: 'wrapper',
+                draggable: true
+            });
+    
+            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
+                    },
+                    name: 'text',
+                    draggable: true
+                });
+            }
+
+            //节点没有后续指针时
+			if (!cfg.next && !cfg.loopNext) {
+				group.addShape('text', {
+					attrs: {
+						x: width,
+                        y: height,
+						textAlign: 'center',
+						textBaseline: 'middle',
+						text: '^',
+						fill: style.fill || '#000',
+						fontSize: 16,
+						cursor: cfg.style.cursor,
+					},
+					name: 'text',
+					draggable: true,
+				});
+			}
+    
+            return wrapperRect;
+        },
+
+        getAnchorPoints() {
+            return [
+                [1 / 6, 0],
+                [0.5, 0],
+                [0.5, 0.5],
+                [5 / 6, 0.5],
+                [0.5, 1],
+                [0, 0.5]
+            ];
+        }
+    }
+)

src/RegisteredShape/clenQueuePointer.ts

@@ -1,21 +1,14 @@
-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) {
 	const matrix1 = shape.getMatrix();
-    const newMatrix1 = transform(matrix1, [
+	const newMatrix1 = transform(matrix1, [['r', angle]]);
-        ['r', angle],
-    ]);
 	shape.setMatrix(newMatrix1);
 }
 function translate(shape, x, y, transform) {
 	const matrix1 = shape.getMatrix();
-    const newMatrix1 = transform(matrix1, [
+	const newMatrix1 = transform(matrix1, [['t', x, y]]);
-        ['t', x, y],
-    ]);
 	shape.setMatrix(newMatrix1);
 }
 function culcuRotate(angle, R) {
@@ -25,11 +18,9 @@ function culcuRotate(angle, R) {
 	return {
 		offsetX,
 		offsetY,
-    }
+	};
 }
 
-
-
 Util.registerShape('clen-queue-pointer', {
 	draw(cfg, group) {
 		let id = cfg.id as string;
@@ -44,10 +35,10 @@ Util.registerShape('clen-queue-pointer', {
 				fill: cfg.style.fill,
 				// 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) {
 			const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
 
@@ -59,28 +50,28 @@ Util.registerShape('clen-queue-pointer', {
 					height: 0,
 					text: cfg.label,
 					fill: null,
-                    radius: 2
+					radius: 2,
 				},
-                name: 'bgRect'
+				name: 'bgRect',
 			});
 
 			let label = cfg.label as string;
 
 			let pointerText = label.split('-')[0];
-            let y = pointerText=="front"?30:15;
+			let y = pointerText == 'front' ? 30 : 15;
 			const text = group.addShape('text', {
 				attrs: {
-                    x: culcuRotate(Math.PI/2 - angle, y).offsetX, 
+					x: culcuRotate(Math.PI / 2 - angle, y).offsetX,
-                    y: culcuRotate(Math.PI/2 - angle, y).offsetY,
+					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
+					fontSize: style.fontSize || 16,
 				},
-                name: 'pointer-text-shape'
+				name: 'pointer-text-shape',
 			});
 
 			// rotate(text, angle, G6.Util.transform);
@@ -90,8 +81,6 @@ Util.registerShape('clen-queue-pointer', {
 		translate(keyShape, 0, -75, G6.Util.transform);
 
 		return keyShape;
-
-        
 	},
 
 	getPath(cfg) {
@@ -104,9 +93,9 @@ Util.registerShape('clen-queue-pointer', {
 			['M', 0, 0],
 			['L', -width / 2, 0],
 			['L', -width / 2, -height],
-            ['L', -width / 2 - (arrowWidth / 2), -height],
+			['L', -width / 2 - arrowWidth / 2, -height],
-            ['L', 0, -height-arrowHeight],
+			['L', 0, -height - arrowHeight],
-            ['L', width / 2 + (arrowWidth / 2), -height],
+			['L', width / 2 + arrowWidth / 2, -height],
 			['L', width / 2, -height],
 			['L', width / 2, 0],
 			['Z'],
@@ -114,7 +103,4 @@ Util.registerShape('clen-queue-pointer', {
 
 		return path;
 	},
-
 });
-
-        

src/RegisteredShape/linkListNode.ts

@@ -1,8 +1,16 @@
-import { Util } from "../Common/util";
+/*
+ * @Author: your name
+ * @Date: 2022-01-26 01:58:25
+ * @LastEditTime: 2022-02-18 18:51:28
+ * @LastEditors: Please set LastEditors
+ * @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';
 
-
+export default Util.registerShape(
-
+	'link-list-node',
-export default Util.registerShape('link-list-node', {
+	{
 		draw(cfg, group) {
 			cfg.size = cfg.size || [30, 10];
 
@@ -17,9 +25,9 @@ export default Util.registerShape('link-list-node', {
 					height: height,
 					stroke: cfg.style.stroke || '#333',
 					fill: cfg.style.backgroundFill || '#eee',
-                cursor: cfg.style.cursor
+					cursor: cfg.style.cursor,
 				},
-            name: 'wrapper'
+				name: 'wrapper',
 			});
 
 			group.addShape('rect', {
@@ -30,14 +38,15 @@ export default Util.registerShape('link-list-node', {
 					height: height,
 					fill: cfg.style.fill,
 					stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
+					cursor: cfg.style.cursor,
 				},
 				name: 'main-rect',
-            draggable: true
+				draggable: true,
 			});
 
-        if (cfg.label) {
 			const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+
+			if (cfg.label) {
 				group.addShape('text', {
 					attrs: {
 						x: width * (5 / 6),
@@ -46,10 +55,28 @@ export default Util.registerShape('link-list-node', {
 						textBaseline: 'middle',
 						text: cfg.label,
 						fill: style.fill || '#000',
-                    fontSize: style.fontSize || 16
+						fontSize: style.fontSize || 16,
 					},
-                name: 'text',
+					name: 'label',
-                draggable: true
+					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: 'null',
+					draggable: true,
 				});
 			}
 
@@ -65,7 +92,9 @@ export default Util.registerShape('link-list-node', {
 				[5 / 6, 1],
 				[0.5, 1],
 				[0, 0.5],
-            [1 / 3, 1]
+				[1 / 3, 1],
 			];
-    }
+		},
-}, 'rect');
+	},
+	'rect'
+);

src/RegisteredShape/pointer.ts

@@ -1,15 +1,14 @@
 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
+				matrix: cfg.style.matrix,
 			},
-            name: 'pointer-path'
+			name: 'pointer-path',
 		});
 
 		if (cfg.label) {
@@ -21,9 +20,9 @@ export default Util.registerShape('pointer', {
 					y: 0,
 					text: cfg.label,
 					fill: null,
-                    radius: 2
+					radius: 2,
 				},
-                name: 'bgRect'
+				name: 'bgRect',
 			});
 
 			const text = group.addShape('text', {
@@ -34,33 +33,35 @@ export default Util.registerShape('pointer', {
 					textBaseline: 'middle',
 					text: cfg.label,
 					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: pointerWidth, height: pointerHeight } = keyShape.getBBox();
 			bgRect.attr({
-                width: textWidth + 6,
+				width: textWidth + pointerWidth + 6,
-                height: textHeight + 6
+				height: textHeight + pointerHeight + 6,
 			});
 
 			// 旋转文字
 			const markerEndPosition = cfg.markerEndPosition;
-            if(markerEndPosition) {
+			if (markerEndPosition) {
 				let textX = markerEndPosition[0],
 					textY = markerEndPosition[1];
 
 				text.attr({
 					x: textX,
-                    y: textY
+					y: textY,
 				});
 
 				bgRect.attr({
 					x: textX - textWidth / 2 - 3,
-                    y: textY - textHeight / 2 - 3
+					y: textY - textHeight / 2 - 3,
 				});
 			}
+			return bgRect;
 		}
 
 		return keyShape;
@@ -74,15 +75,15 @@ export default Util.registerShape('pointer', {
 
 		const path = [
 			['M', 0, 0],
-            ['L', -width / 2 - (arrowWidth / 2), -arrowHeight],
+			['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],
+			['L', width / 2 + arrowWidth / 2, -arrowHeight],
 			['Z'],
 		];
 
 		return path;
-    }
+	},
 });

src/RegisteredShape/threeCellNode.ts

@@ -0,0 +1,189 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-18 20:42:31
+ * @LastEditTime: 2022-02-17 21:57:59
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \测试数据c:\Users\13127\Desktop\最近的前端文件\可视化源码-new\StructV2\src\RegisteredShape\treeCellNode.ts
+ */
+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];
+
+		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 / 2,
+				y: height / 2,
+				width: width / 3,
+				height: height,
+				fill: cfg.style.fill,
+				stroke: cfg.style.stroke,
+			},
+			name: 'left-rect',
+			draggable: true,
+		});
+
+		group.addShape('rect', {
+			attrs: {
+				x: width * (5 / 6),
+				y: height / 2,
+				width: width / 3,
+				height: height,
+				fill: 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: 'rootLabel0',
+				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: 'rootLabel1',
+				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: 'rootLabel2',
+				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: 'index',
+				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: 'label1',
+				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: 'label2',
+				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: 'null',
+				draggable: true,
+			});
+		}
+
+		return wrapperRect;
+	},
+
+	getAnchorPoints() {
+		return [
+			[0.5, 0],
+			[5 / 6, 0.5],
+			[0.5, 1],
+			[0, 0.5],
+		];
+	},
+});

src/RegisteredShape/triTreeNode.ts

@@ -1,6 +1,5 @@
 import { Util } from '../Common/util';
 
-
 export default Util.registerShape('tri-tree-node', {
 	draw(cfg, group) {
 		cfg.size = cfg.size;
@@ -16,9 +15,9 @@ export default Util.registerShape('tri-tree-node', {
 				height: height,
 				stroke: cfg.style.stroke || '#333',
 				cursor: cfg.style.cursor,
-                fill: cfg.style.backgroundFill || '#eee'
+				fill: '#eee',
 			},
-            name: 'wrapper'
+			name: 'wrapper',
 		});
 
 		group.addShape('rect', {
@@ -29,10 +28,10 @@ export default Util.registerShape('tri-tree-node', {
 				height: height / 4,
 				fill: '#eee',
 				stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
+				cursor: cfg.style.cursor,
 			},
 			name: 'top',
-            draggable: true
+			draggable: true,
 		});
 
 		group.addShape('rect', {
@@ -40,17 +39,16 @@ export default Util.registerShape('tri-tree-node', {
 				x: width / 4 + width / 2,
 				y: height / 2 + height / 4,
 				width: width / 2,
-                height: height / 4 * 3,
+				height: (height / 4) * 3,
 				fill: cfg.color || cfg.style.fill,
 				stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
+				cursor: cfg.style.cursor,
 			},
 			name: 'bottom',
-            draggable: true
+			draggable: true,
 		});
-
-        if (cfg.label) {
 		const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+		if (cfg.label) {
 			group.addShape('text', {
 				attrs: {
 					x: width, // 居中
@@ -60,28 +58,71 @@ export default Util.registerShape('tri-tree-node', {
 					text: cfg.label,
 					fill: style.fill || '#000',
 					fontSize: style.fontSize || 16,
-                    cursor: cfg.style.cursor
+					cursor: cfg.style.cursor,
 				},
-                name: 'text',
+				name: 'label',
-                draggable: true
+				draggable: true,
 			});
 		}
+		let parent = cfg.parent || cfg.l_parent || cfg.r_parent;
+		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 = parent[0] == '0x0';
 
-        if (cfg.root) {
+
-            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+		if (isParentEmpty) {
+			{
 				group.addShape('text', {
 					attrs: {
 						x: width, // 居中
-                    y: height / 4 * 3,
+						y: (height / 4) * 3,
 						textAlign: 'center',
 						textBaseline: 'middle',
-                    text: "^",
+						text: '^',
 						fill: style.fill || '#000',
 						fontSize: style.fontSize || 14,
-                    cursor: cfg.style.cursor
+						cursor: cfg.style.cursor,
 					},
-                name: 'parent',
+					name: 'null-parent',
-                draggable: true
+					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: 'null-left',
+				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: 'null-right',
+				draggable: true,
 			});
 		}
 
@@ -92,9 +133,11 @@ export default Util.registerShape('tri-tree-node', {
 		return [
 			[0.125, 0.5],
 			[0.875, 0.5],
-            [0.5, 1],
+			[0.4, 1],
 			[0.5, 0],
-            [0.5, 0.125]
+			[0.5, 0.125],
+			[0.6, 1],
+			[0.5, 1],
 		];
 	},
-}, 'rect');
+});

src/RegisteredShape/twoCellNode.ts

@@ -1,8 +1,8 @@
 import { Util } from '../Common/util';
 
-
+export default Util.registerShape(
-
+	'two-cell-node',
-export default Util.registerShape('two-cell-node', {
+	{
 		draw(cfg, group) {
 			cfg.size = cfg.size || [30, 10];
 
@@ -16,9 +16,9 @@ export default Util.registerShape('two-cell-node', {
 					width: width,
 					height: height,
 					stroke: cfg.style.stroke,
-                fill: cfg.style.backgroundFill || '#eee'
+					fill: cfg.style.backgroundFill || '#eee',
 				},
-            name: 'wrapper'
+				name: 'wrapper',
 			});
 
 			group.addShape('rect', {
@@ -28,17 +28,18 @@ export default Util.registerShape('two-cell-node', {
 					width: width / 2,
 					height: height,
 					fill: cfg.style.fill,
-                stroke: cfg.style.stroke
+					stroke: cfg.style.stroke,
 				},
 				name: 'left-rect',
-            draggable: true
+				draggable: true,
 			});
 
 			const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
 
 			if (cfg.label) {
-            if(Array.isArray(cfg.label)) {
+				if (Array.isArray(cfg.label)) {
-                let tag = cfg.label[0], data = cfg.label[1];
+					let tag = cfg.label[0],
+						data = cfg.label[1];
 
 					group.addShape('text', {
 						attrs: {
@@ -51,8 +52,8 @@ export default Util.registerShape('two-cell-node', {
 							fontSize: style.fontSize || 16,
 							cursor: cfg.style.cursor,
 						},
-                    name: 'text',
+						name: 'tag',
-                    draggable: true
+						draggable: true,
 					});
 
 					group.addShape('text', {
@@ -66,11 +67,10 @@ export default Util.registerShape('two-cell-node', {
 							fontSize: style.fontSize || 16,
 							cursor: cfg.style.cursor,
 						},
-                    name: 'text',
+						name: 'data',
-                    draggable: true
+						draggable: true,
 					});
-            }
+				} else {
-            else {
 					group.addShape('text', {
 						attrs: {
 							x: width * (3 / 4),
@@ -82,12 +82,65 @@ export default Util.registerShape('two-cell-node', {
 							fontSize: style.fontSize || 16,
 							cursor: cfg.style.cursor,
 						},
-                    name: 'text',
+						name: 'label',
-                    draggable: true
+						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: 'null-headNext',
+					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: 'null-start',
+					draggable: true,
+				});
+			}
+
+			//pctree 数据结构中没有后续指针
+			if (cfg.id.includes('PCTreeHead') && !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: 'null-headNext2',
+					draggable: true,
+				});
+			}
 			return wrapperRect;
 		},
 
@@ -96,7 +149,9 @@ export default Util.registerShape('two-cell-node', {
 				[0.5, 0],
 				[3 / 4, 0.5],
 				[0.5, 1],
-            [0, 0.5]
+				[0, 0.5],
 			];
-    }
+		},
-}, 'rect');
+	},
+	'rect'
+);

src/StructV.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-26 01:58:25
+ * @LastEditTime: 2022-01-26 02:06:16
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \测试数据c:\Users\13127\Desktop\最近的前端文件\可视化0126\StructV2\src\StructV.ts
+ */
 import { Engine } from "./engine";
 import { Bound } from "./Common/boundingRect";
 import { Group } from "./Common/group";
@@ -6,15 +14,16 @@ import Pointer from "./RegisteredShape/pointer";
 import LinkListNode from "./RegisteredShape/linkListNode";
 import BinaryTreeNode from "./RegisteredShape/binaryTreeNode";
 import ForceNode from "./RegisteredShape/force";
+import TriTreeNode from "./RegisteredShape/triTreeNode";
 import CLenQueuePointer from "./RegisteredShape/clenQueuePointer";
 import TwoCellNode from "./RegisteredShape/twoCellNode";
+import ThreeCellNode from "./RegisteredShape/threeCellNode";
 import ArrayNode from "./RegisteredShape/arrayNode";
 import Cursor from "./RegisteredShape/cursor";
 import { Vector } from "./Common/vector";
 import { EngineOptions, LayoutCreator } from "./options";
 import { SourceNode } from "./sources";
 import { Util } from "./Common/util";
-import { SVModel } from "./Model/SVModel";
 import { SVNode } from "./Model/SVNode";
 
 
@@ -58,7 +67,9 @@ SV.registeredShape = [
     Pointer, 
     LinkListNode, 
     BinaryTreeNode, 
+    TriTreeNode,
     TwoCellNode,
+    ThreeCellNode,
     Cursor,
     ArrayNode,
     CLenQueuePointer,
@@ -85,5 +96,6 @@ SV.registerLayout = function(name: string, layoutCreator: LayoutCreator) {
     }
     
     SV.registeredLayout[name] = layoutCreator;
+    
 };
 

src/View/layoutProvider.ts

@@ -1,20 +1,21 @@
-import { IPoint } from '@antv/g6-core';
+import { IPoint, INode } from '@antv/g6-core';
 import { Bound, BoundingRect } from '../Common/boundingRect';
 import { Group } from '../Common/group';
 import { Util } from '../Common/util';
 import { Vector } from '../Common/vector';
 import { Engine } from '../engine';
-import { LayoutGroupTable } from '../Model/modelConstructor';
+import { LayoutGroupTable, ModelConstructor } from '../Model/modelConstructor';
 import { SVModel } from '../Model/SVModel';
 import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker } from '../Model/SVNodeAppendage';
 import { AddressLabelOption, IndexLabelOption, LayoutOptions, MarkerOption, ViewOptions } from '../options';
 import { ViewContainer } from './viewContainer';
 
-
 export class LayoutProvider {
 	private engine: Engine;
 	private viewOptions: ViewOptions;
 	private viewContainer: ViewContainer;
+	private leakAreaXoffset: number = 20;
+	private leakClusterXInterval = 25;
 
 	constructor(engine: Engine, viewContainer: ViewContainer) {
 		this.engine = engine;
@@ -22,7 +23,6 @@ export class LayoutProvider {
 		this.viewContainer = viewContainer;
 	}
 
-
 	/**
 	 * 布局前处理
 	 * @param layoutGroupTable
@@ -69,20 +69,23 @@ export class LayoutProvider {
 
 			let target = item.target,
 				targetBound: BoundingRect = target.getBound(),
-                g6AnchorPosition = item.target.shadowG6Item.getAnchorPoints()[anchor] as IPoint,
+				g6AnchorPosition = (<INode>item.target.shadowG6Item).getAnchorPoints()[anchor] as IPoint,
-                center: [number, number] = [targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2],
+				center: [number, number] = [
+					targetBound.x + targetBound.width / 2,
+					targetBound.y + targetBound.height / 2,
+				],
 				markerPosition: [number, number],
 				markerEndPosition: [number, number];
 
 			let anchorPosition: [number, number] = [g6AnchorPosition.x, g6AnchorPosition.y];
 
 			let anchorVector = Vector.subtract(anchorPosition, center),
-                angle = 0, len = Vector.length(anchorVector) + offset;
+				angle = 0,
+				len = Vector.length(anchorVector) + offset;
 
 			if (anchorVector[0] === 0) {
 				angle = anchorVector[1] > 0 ? -Math.PI : 0;
-            }
+			} else {
-            else {
 				angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
 			}
 
@@ -98,7 +101,7 @@ export class LayoutProvider {
 				x: markerPosition[0],
 				y: markerPosition[1],
 				rotation: angle,
-                markerEndPosition
+				markerEndPosition,
 			});
 		});
 	}
@@ -114,7 +117,7 @@ export class LayoutProvider {
 			item.set({
 				x: freedNodeBound.x + freedNodeBound.width / 2,
 				y: freedNodeBound.y + freedNodeBound.height * 1.5,
-                size: [freedNodeBound.width, 0]
+				size: [freedNodeBound.width, 0],
 			});
 		});
 	}
@@ -125,37 +128,44 @@ export class LayoutProvider {
 	 * @param indexLabelOptions
 	 */
 	private layoutIndexLabel(indexLabels: SVIndexLabel[], indexLabelOptions: { [key: string]: IndexLabelOption }) {
-        const indexLabelPositionMap: { [key: string]: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => { x: number, y: number } } = {
+		const indexLabelPositionMap: {
+			[key: string]: (
+				nodeBound: BoundingRect,
+				labelBound: BoundingRect,
+				offset: number
+			) => { x: number; y: number };
+		} = {
 			top: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
 					x: nodeBound.x + nodeBound.width / 2,
-                    y: nodeBound.y - offset
+					y: nodeBound.y - offset,
 				};
 			},
 			right: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
 					x: nodeBound.x + nodeBound.width + offset,
-                    y: nodeBound.y + nodeBound.height / 2
+					y: nodeBound.y + nodeBound.height / 2,
 				};
 			},
 			bottom: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
 					x: nodeBound.x + nodeBound.width / 2,
-                    y: nodeBound.y + nodeBound.height + offset
+					y: nodeBound.y + nodeBound.height + offset,
 				};
 			},
 			left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
-                    x: nodeBound.x - labelBound.width - offset,
+					x: nodeBound.x - labelBound.width / 2- offset,
-                    y: nodeBound.y + nodeBound.height / 2
+					y: nodeBound.y + nodeBound.height / 2,
 				};
-            }
+			},
 		};
 
 		indexLabels.forEach(item => {
 			const options: IndexLabelOption = indexLabelOptions[item.sourceType],
 				nodeBound = item.target.getBound(),
-                labelBound = item.getBound(),
+				// labelBound = item.getBound(),
+				labelBound = item.shadowG6Item.getContainer().getChildren()[1].getBBox(),
 				offset = options.offset ?? 20,
 				position = options.position ?? 'bottom';
 
@@ -176,12 +186,11 @@ export class LayoutProvider {
 
 			item.set({
 				x: nodeBound.x + nodeBound.width / 2,
-                y: nodeBound.y - offset
+				y: nodeBound.y - offset,
 			});
 		});
 	}
 
-
 	/**
 	 * 对每个组内部的model进行布局
 	 * @param layoutGroupTable
@@ -208,10 +217,15 @@ export class LayoutProvider {
 				indexLabelOptions = group.options.indexLabel || {},
 				addressLabelOption = group.options.addressLabel || {};
 
-            this.layoutIndexLabel(group.indexLabel, indexLabelOptions);
+			const indexLabel = group.appendage.filter(item => item instanceof SVIndexLabel) as SVIndexLabel[],
-            this.layoutFreedLabel(group.freedLabel);
+				freedLabel = group.appendage.filter(item => item instanceof SVFreedLabel) as SVFreedLabel[],
-            this.layoutAddressLabel(group.addressLabel, addressLabelOption);
+				addressLabel = group.appendage.filter(item => item instanceof SVAddressLabel) as SVAddressLabel[],
-            this.layoutMarker(group.marker, markerOptions);  // 布局外部指针
+				marker = group.appendage.filter(item => item instanceof SVMarker) as SVMarker[];
+
+			this.layoutIndexLabel(indexLabel, indexLabelOptions);
+			this.layoutFreedLabel(freedLabel);
+			this.layoutAddressLabel(addressLabel, addressLabelOption);
+			this.layoutMarker(marker, markerOptions); // 布局外部指针
 		});
 
 		return modelGroupList;
@@ -219,45 +233,36 @@ export class LayoutProvider {
 
 	/**
 	 * 对泄漏区进行布局
-     * @param leakModels 
 	 * @param accumulateLeakModels
+	 * // todo: 部分元素被抽离后的泄漏区
 	 */
-    private layoutLeakModels(leakModels: SVModel[], accumulateLeakModels: SVModel[]) {
+	private layoutLeakArea(accumulateLeakModels: SVModel[]) {
-        const group: Group = new Group(),
+		const containerHeight = this.viewContainer.getG6Instance().getHeight(),
-            containerHeight = this.viewContainer.getG6Instance().getHeight(),
 			leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
-            leakAreaY = containerHeight - leakAreaHeight,
+			leakAreaY = containerHeight - leakAreaHeight;
-            xOffset = 60;
 
 		let prevBound: BoundingRect;
 
 		// 避免在泄漏前拖拽节点导致的位置变化，先把节点位置重置为布局后的标准位置
-        leakModels.forEach(item => {
+		accumulateLeakModels.forEach(item => {
 			item.set({
 				x: item.layoutX,
-                y: item.layoutY
+				y: item.layoutY,
 			});
 		});
 
-        const globalLeakGroupBound: BoundingRect = accumulateLeakModels.length ?
+		const clusters = ModelConstructor.getClusters(accumulateLeakModels);
-            Bound.union(...accumulateLeakModels.map(item => item.getBound())) :
-            { x: 0, y: leakAreaY, width: 0, height: 0 };
 
-        const layoutGroups = Util.groupBy(leakModels, 'group');
+        // 每一个簇从左往右布局就完事了，比之前的方法简单稳定很多
-        Object.keys(layoutGroups).forEach(key => {
+		clusters.forEach(item => {
-            group.add(...layoutGroups[key]);
+			const bound = item.getBound(),
+				x = prevBound ? prevBound.x + prevBound.width + this.leakClusterXInterval : this.leakAreaXoffset,
+				dx = x - bound.x,
+				dy = leakAreaY - bound.y;
 
-            const currentBound: BoundingRect = group.getBound(),
+			item.translate(dx, dy);
-                prevBoundEnd = prevBound? prevBound.x + prevBound.width: 0,
+			Bound.translate(bound, dx, dy);
-                { x: groupX, y: groupY } = currentBound,
+			prevBound = bound;
-                dx = globalLeakGroupBound.x + globalLeakGroupBound.width + prevBoundEnd + xOffset - groupX,
-                dy = globalLeakGroupBound.y - groupY;
-
-            group.translate(dx, dy);
-            group.clear();
-            Bound.translate(currentBound, dx, dy);
-
-            prevBound = currentBound;
 		});
 	}
 
@@ -280,8 +285,7 @@ export class LayoutProvider {
 
 			if (prevBound) {
 				dx = prevBound.x + prevBound.width - bound.x;
-            }
+			} else {
-            else {
 				dx = bound.x;
 			}
 
@@ -295,7 +299,6 @@ export class LayoutProvider {
 		return wrapperGroup;
 	}
 
-
 	/**
 	 * 将视图调整至画布中心
 	 * @param models
@@ -304,40 +307,39 @@ export class LayoutProvider {
 	private fitCenter(group: Group) {
 		let width = this.viewContainer.getG6Instance().getWidth(),
 			height = this.viewContainer.getG6Instance().getHeight(),
+			viewBound: BoundingRect = group.getBound(),
 			leakAreaHeight = this.engine.viewOptions.leakAreaHeight;
 
-        if (this.viewContainer.hasLeak) {
+		const centerX = width / 2,
-            height = height - leakAreaHeight;
+			centerY = height / 2,
-        }
+			boundCenterX = viewBound.x + viewBound.width / 2;
 
-        const viewBound: BoundingRect = group.getBound(),
+		let dx = centerX - boundCenterX,
-            centerX = width / 2, centerY = height / 2,
+			dy = 0;
-            boundCenterX = viewBound.x + viewBound.width / 2,
+
-            boundCenterY = viewBound.y + viewBound.height / 2,
+		if (this.viewContainer.hasLeak) {
-            dx = centerX - boundCenterX,
+			const boundBottomY = viewBound.y + viewBound.height;
+			dy = height - leakAreaHeight - 130 - boundBottomY;
+		} else {
+			const boundCenterY = viewBound.y + viewBound.height / 2;
 			dy = centerY - boundCenterY;
+		}
 
 		group.translate(dx, dy);
 	}
 
-
-
 	/**
 	 * 布局
 	 * @param layoutGroupTable
-     * @param leakModels
+	 * @param accumulateLeakModels
-     * @param hasLeak
-     * @param needFitCenter
 	 */
-    public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[], leakModels: SVModel[]) {
+	public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[]) {
 		this.preLayoutProcess(layoutGroupTable);
 
 		const modelGroupList: Group[] = this.layoutModels(layoutGroupTable);
 		const generalGroup: Group = this.layoutGroups(modelGroupList);
 
-        if (leakModels.length) {
+		this.layoutLeakArea(accumulateLeakModels);
-            this.layoutLeakModels(leakModels, accumulateLeakModels);
-        }
 
 		this.fitCenter(generalGroup);
 		this.postLayoutProcess(layoutGroupTable);

src/View/reconcile.ts

@@ -1,14 +1,14 @@
-import { EventBus } from "../Common/eventBus";
+import { EventBus } from '../Common/eventBus';
-import { Util } from "../Common/util";
+import { Util } from '../Common/util';
-import { Engine } from "../engine";
+import { Engine } from '../engine';
-import { LayoutGroupTable } from "../Model/modelConstructor";
+import { LayoutGroupTable } from '../Model/modelConstructor';
-import { SVLink } from "../Model/SVLink";
+import { SVLink } from '../Model/SVLink';
-import { SVModel } from "../Model/SVModel";
+import { SVModel } from '../Model/SVModel';
-import { SVNode } from "../Model/SVNode";
+import { SVNode } from '../Model/SVNode';
-import { SVAddressLabel, SVMarker, SVNodeAppendage } from "../Model/SVNodeAppendage";
+import { SVAddressLabel, SVMarker, SVNodeAppendage } from '../Model/SVNodeAppendage';
-import { Animations } from "./animation";
+import { handleUpdate } from '../sources';
-import { Renderer } from "./renderer";
+import { Animations } from './animation';
-
+import { Renderer } from './renderer';
 
 export interface DiffResult {
 	CONTINUOUS: SVModel[];
@@ -17,13 +17,9 @@ export interface DiffResult {
 	FREED: SVNode[];
 	LEAKED: SVModel[];
 	UPDATE: SVModel[];
-    ACCUMULATE_LEAK: SVModel[];
 }
 
-
-
 export class Reconcile {
-
 	private engine: Engine;
 	private renderer: Renderer;
 	private isFirstPatch: boolean;
@@ -51,13 +47,21 @@ export class Reconcile {
 	 * @param accumulateLeakModels
 	 * @returns
 	 */
-    private getAppendModels(prevModelList: SVModel[], modelList: SVModel[], accumulateLeakModels: SVModel[]): SVModel[] {
+	private getAppendModels(
+		prevModelList: SVModel[],
+		modelList: SVModel[],
+		accumulateLeakModels: SVModel[]
+	): SVModel[] {
 		const appendModels = modelList.filter(item => !prevModelList.find(model => model.id === item.id));
 
+		// 看看新增的节点是不是从泄漏区来的
+		// 目前的判断方式比较傻：看看泄漏区有没有相同id的节点，但是发现这个方法可能不可靠，不知道还有没有更好的办法
 		appendModels.forEach(item => {
-            let removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id);
+			const removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id),
+				svModel = accumulateLeakModels[removeIndex];
 
 			if (removeIndex > -1) {
+				svModel.leaked = false;
 				accumulateLeakModels.splice(removeIndex, 1);
 			}
 		});
@@ -72,9 +76,13 @@ export class Reconcile {
 	 * @param modelList
 	 * @returns
 	 */
-    private getLeakModels(layoutGroupTable: LayoutGroupTable, prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
+	private getLeakModels(
-        let potentialLeakModels: SVModel[] = prevModelList.filter(item =>
+		layoutGroupTable: LayoutGroupTable,
-            !modelList.find(model => model.id === item.id) && !item.freed
+		prevModelList: SVModel[],
+		modelList: SVModel[]
+	): SVModel[] {
+		let potentialLeakModels: SVModel[] = prevModelList.filter(
+			item => !modelList.find(model => model.id === item.id) && !item.freed
 		);
 		const leakModels: SVModel[] = [];
 
@@ -87,7 +95,7 @@ export class Reconcile {
 
 		Object.keys(groups).forEach(key => {
 			const leakRule = layoutGroupTable.get(key).layoutCreator.defineLeakRule;
-            if(leakRule && typeof leakRule === 'function') {
+			if (leakRule && typeof leakRule === 'function') {
 				potentialLeakModels.push(...leakRule(groups[key]));
 			}
 		});
@@ -97,7 +105,12 @@ export class Reconcile {
 				item.leaked = true;
 				leakModels.push(item);
 
-                item.appendages.forEach(appendage => {
+				item.getAppendagesList().forEach(appendage => {
+					// 外部指针先不加入泄漏区（这个需要讨论一下，我觉得不应该）
+					if (appendage instanceof SVMarker) {
+						return;
+					}
+
 					appendage.leaked = true;
 					leakModels.push(appendage);
 				});
@@ -111,11 +124,6 @@ export class Reconcile {
 			}
 		});
 
-        leakModels.forEach(item => {
-            // 不能用上次的G6item了，不然布局的时候会没有动画
-            item.G6Item = null;
-        });
-
 		return leakModels;
 	}
 
@@ -124,7 +132,11 @@ export class Reconcile {
 	 * @param prevModelList
 	 * @param modelList
 	 */
-    private getRemoveModels(prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
+	private getRemoveModels(
+		prevModelList: SVModel[],
+		modelList: SVModel[],
+		accumulateLeakModels: SVModel[]
+	): SVModel[] {
 		let removedModels: SVModel[] = [];
 
 		for (let i = 0; i < prevModelList.length; i++) {
@@ -136,9 +148,24 @@ export class Reconcile {
 			}
 		}
 
-        return removedModels;
+		// 假如某个节点从泄漏区移回可视化区域，那么与原来泄漏结构的连线应该消失掉
+		for (let i = 0; i < accumulateLeakModels.length; i++) {
+			let leakModel = accumulateLeakModels[i];
+			if (leakModel instanceof SVLink) {
+				if (leakModel.node.leaked === false || leakModel.target.leaked === false) {
+					accumulateLeakModels.splice(i, 1);
+					i--;
+					removedModels.push(leakModel);
+				}
+			}
 		}
 
+		removedModels.forEach(item => {
+			item.beforeDestroy();
+		});
+
+		return removedModels;
+	}
 
 	/**
 	 * 找出重新指向的外部指针
@@ -150,9 +177,11 @@ export class Reconcile {
 		const prevMarkers: SVMarker[] = prevModelList.filter(item => item instanceof SVMarker) as SVMarker[],
 			markers: SVMarker[] = modelList.filter(item => item instanceof SVMarker) as SVMarker[];
 
-        return markers.filter(item => prevMarkers.find(prevItem => {
+		return markers.filter(item =>
-            return prevItem.id === item.id && prevItem.target.id !== item.target.id
+			prevMarkers.find(prevItem => {
-        }));
+				return prevItem.id === item.id && prevItem.target.id !== item.target.id;
+			})
+		);
 	}
 
 	/**
@@ -174,7 +203,7 @@ export class Reconcile {
 			const prevLabel = prevItem.get('label'),
 				label = item.get('label');
 
-            if (prevLabel !== label) {
+			if (String(prevLabel) !== String(label)) {
 				labelChangeModels.push(item);
 			}
 		});
@@ -233,18 +262,17 @@ export class Reconcile {
 					// 先将透明度改为0，隐藏掉
 					const AddressLabelG6Group = item.G6Item.getContainer();
 					AddressLabelG6Group.attr({ opacity: 0 });
-                }
+				} else {
-                else {
 					Animations.FADE_IN(item.G6Item, {
 						duration,
-                        timingFunction
+						timingFunction,
 					});
 				}
-            }
+			} else {
-            else {
 				Animations.APPEND(item.G6Item, {
 					duration,
-                    timingFunction
+					timingFunction,
+					callback: () => item.afterRender(),
 				});
 			}
 		});
@@ -263,7 +291,8 @@ export class Reconcile {
 				timingFunction,
 				callback: () => {
 					this.renderer.removeModel(item);
-                }
+					item.afterDestroy();
+				},
 			});
 		});
 	}
@@ -279,7 +308,7 @@ export class Reconcile {
 			if (item instanceof SVAddressLabel) {
 				Animations.FADE_IN(item.G6Item, {
 					duration,
-                    timingFunction
+					timingFunction,
 				});
 			}
 
@@ -289,19 +318,6 @@ export class Reconcile {
 		EventBus.emit('onLeak', leakModels);
 	}
 
-    /**
-     * 处理已经堆积的泄漏区 models
-     * @param accumulateModels 
-     */
-    private handleAccumulateLeakModels(accumulateModels: SVModel[]) {
-        accumulateModels.forEach(item => {
-            if (item.generalStyle) {
-                item.set('style', { ...item.generalStyle });
-            }
-        });
-    }
-
-
 	/**
 	 * 处理被释放的节点 models
 	 * @param freedModes
@@ -316,14 +332,20 @@ export class Reconcile {
 			item.set('style', { fill: '#ccc' });
 			nodeGroup.attr({ opacity: alpha });
 
-            if (item.marker) {
+			if (item.appendages.marker) {
-                const markerGroup = item.marker.G6Item.getContainer();
+				item.appendages.marker.forEach(marker => {
-                item.marker.set('style', { fill: '#ccc' });
+					const markerGroup = marker.G6Item.getContainer();
+					marker.set('style', { fill: '#ccc' });
 					markerGroup.attr({ opacity: alpha + 0.5 });
+				});
 			}
 
-            item.freedLabel.G6Item.toFront();
+			if (item.appendages.freedLabel) {
-            Animations.FADE_IN(item.freedLabel.G6Item, { duration, timingFunction });
+				item.appendages.freedLabel.forEach(freedLabel => {
+					freedLabel.G6Item.toFront();
+					Animations.FADE_IN(freedLabel.G6Item, { duration, timingFunction });
+				});
+			}
 		});
 
 		EventBus.emit('onFreed', freedModes);
@@ -341,23 +363,17 @@ export class Reconcile {
 		}
 
 		models.forEach(item => {
-            if (item.generalStyle === undefined) {
+			item.triggerHighlight(changeHighlightColor);
-                item.generalStyle = Util.objectClone(item.G6ModelProps.style);
-            }
-
-            if (item instanceof SVLink) {
-                item.set('style', {
-                    stroke: changeHighlightColor
-                });
-            }
-            else {
-                item.set('style', {
-                    fill: changeHighlightColor
-                });
-            }
 		});
 	}
 
+	/**
+	 * 过滤新增model中那些不需要高亮的model（比如target和node都一样的link，marker等）
+	 * @param appendModels
+	 */
+	private filterUnChangeModelsOfAppend(appendModels: SVModel[], prevModelList: SVModel[]): SVModel[] {
+		return appendModels.filter(item => !prevModelList.some(prev => item.isEqual(prev)));
+	}
 
 	/**
 	 * 进行diff
@@ -367,16 +383,24 @@ export class Reconcile {
 	 * @param accumulateLeakModels
 	 * @returns
 	 */
-    public diff(layoutGroupTable: LayoutGroupTable, prevModelList: SVModel[], modelList: SVModel[], accumulateLeakModels: SVModel[]): DiffResult {
+	public diff(
+		layoutGroupTable: LayoutGroupTable,
+		prevModelList: SVModel[],
+		modelList: SVModel[],
+		accumulateLeakModels: SVModel[],
+		isEnterFunction: boolean
+	): DiffResult {
 		const continuousModels: SVModel[] = this.getContinuousModels(prevModelList, modelList);
-        const leakModels: SVModel[] = this.getLeakModels(layoutGroupTable, prevModelList, modelList);
+		const leakModels: SVModel[] = isEnterFunction
+			? []
+			: this.getLeakModels(layoutGroupTable, prevModelList, modelList);
 		const appendModels: SVModel[] = this.getAppendModels(prevModelList, modelList, accumulateLeakModels);
-        const removeModels: SVModel[] = this.getRemoveModels(prevModelList, modelList);
+		const removeModels: SVModel[] = this.getRemoveModels(prevModelList, modelList, accumulateLeakModels);
 		const updateModels: SVModel[] = [
 			...this.getReTargetMarkers(prevModelList, modelList),
 			...this.getLabelChangeModels(prevModelList, modelList),
-            ...appendModels,
+			...this.filterUnChangeModelsOfAppend(appendModels, prevModelList),
-            ...leakModels
+			...leakModels,
 		];
 		const freedModels: SVNode[] = this.getFreedModels(prevModelList, modelList);
 
@@ -387,31 +411,19 @@ export class Reconcile {
 			FREED: freedModels,
 			LEAKED: leakModels,
 			UPDATE: updateModels,
-            ACCUMULATE_LEAK: [...accumulateLeakModels]
 		};
 	}
 
-
 	/**
 	 * 执行调和操作
 	 * @param diffResult
 	 * @param isFirstRender
 	 */
-    public patch(diffResult: DiffResult) {
+	public patch(diffResult: DiffResult, handleUpdate: handleUpdate) {
-        const {
+		const { APPEND, REMOVE, FREED, LEAKED, UPDATE, CONTINUOUS } = diffResult;
-            APPEND,
-            REMOVE,
-            FREED,
-            LEAKED,
-            UPDATE,
-            CONTINUOUS,
-            ACCUMULATE_LEAK
-        } = diffResult;
 
-        this.handleAccumulateLeakModels(ACCUMULATE_LEAK);
+		// 第一次渲染和进入函数的时候不高亮变化的元素
-
+		if (this.isFirstPatch === false && !handleUpdate?.isEnterFunction && !handleUpdate?.isFirstDebug) {
-        // 第一次渲染的时候不高亮变化的元素
-        if (this.isFirstPatch === false) {
 			this.handleChangeModels(UPDATE);
 		}
 
@@ -426,5 +438,5 @@ export class Reconcile {
 		}
 	}
 
-    public destroy() { }
+	public destroy() {}
 }

src/View/renderer.ts

@@ -4,16 +4,14 @@ import { Util } from '../Common/util';
 import { Tooltip, Graph, GraphData, Modes } from '@antv/g6';
 import { InitG6Behaviors } from '../BehaviorHelper/initG6Behaviors';
 
-
-
 export interface RenderModelPack {
 	leaKModels: SVModel[];
 	generalModel: SVModel[];
 }
 
-
+export type g6Behavior =
-export type g6Behavior = string | { type: string; shouldBegin?: Function; shouldUpdate?: Function; shouldEnd?: Function; };
+	| string
-
+	| { type: string; shouldBegin?: Function; shouldUpdate?: Function; shouldEnd?: Function };
 
 export class Renderer {
     private engine: Engine;

src/View/viewContainer.ts

@@ -1,20 +1,25 @@
-import { Engine } from "../engine";
+import { Engine } from '../engine';
-import { LayoutProvider } from "./layoutProvider";
+import { LayoutProvider } from './layoutProvider';
-import { LayoutGroupTable } from "../Model/modelConstructor";
+import { LayoutGroupTable } from '../Model/modelConstructor';
-import { Util } from "../Common/util";
+import { Util } from '../Common/util';
-import { SVModel } from "../Model/SVModel";
+import { SVModel } from '../Model/SVModel';
-import { Renderer } from "./renderer";
+import { Renderer } from './renderer';
-import { Reconcile } from "./reconcile";
+import { Reconcile } from './reconcile';
-import { EventBus } from "../Common/eventBus";
+import { EventBus } from '../Common/eventBus';
-import { Group } from "../Common/group";
+import { Group } from '../Common/group';
-import { Graph, Modes } from "@antv/g6-pc";
+import { Graph, Modes } from '@antv/g6-pc';
-import { InitG6Behaviors } from "../BehaviorHelper/initG6Behaviors";
+import { InitG6Behaviors } from '../BehaviorHelper/initG6Behaviors';
-import { SVNode } from "../Model/SVNode";
+import { SVNode } from '../Model/SVNode';
-import { SolveBrushSelectDrag, SolveDragCanvasWithLeak, SolveNodeAppendagesDrag, SolveZoomCanvasWithLeak } from "../BehaviorHelper/behaviorIssueHelper";
+import {
-
+	SolveBrushSelectDrag,
-
+	SolveDragCanvasWithLeak,
+	SolveNodeAppendagesDrag,
+	SolveZoomCanvasWithLeak,
+} from '../BehaviorHelper/behaviorIssueHelper';
+import { handleUpdate } from '../sources';
 
 export class ViewContainer {
+<<<<<<< HEAD
     private engine: Engine;
     private layoutProvider: LayoutProvider;
     private reconcile: Reconcile;
@@ -129,9 +134,153 @@ export class ViewContainer {
         this.renderer.refresh();
 
         this.leakAreaY += dy;
+=======
+	private engine: Engine;
+	private layoutProvider: LayoutProvider;
+	private reconcile: Reconcile;
+	public renderer: Renderer;
+
+	private layoutGroupTable: LayoutGroupTable;
+	private prevModelList: SVModel[];
+	private accumulateLeakModels: SVModel[];
+
+	public hasLeak: boolean;
+	public leakAreaY: number;
+    public lastLeakAreaTranslateY: number;
+	public brushSelectedModels: SVModel[]; // 保存框选过程中被选中的节点
+	public clickSelectNode: SVNode; // 点击选中的节点
+
+	constructor(engine: Engine, DOMContainer: HTMLElement) {
+		const behaviorsModes: Modes = InitG6Behaviors(engine, this);
+
+		this.engine = engine;
+		this.layoutProvider = new LayoutProvider(engine, this);
+		this.renderer = new Renderer(engine, DOMContainer, behaviorsModes);
+		this.reconcile = new Reconcile(engine, this.renderer);
+		this.layoutGroupTable = new Map();
+		this.prevModelList = [];
+		this.accumulateLeakModels = [];
+		this.hasLeak = false; // 判断是否已经发生过泄漏
+		this.brushSelectedModels = [];
+		this.clickSelectNode = null;
+
+		const g6Instance = this.renderer.getG6Instance(),
+			leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
+			height = g6Instance.getHeight(),
+			{ drag, zoom } = this.engine.behaviorOptions;
+
+		this.leakAreaY = height - leakAreaHeight;
+        this.lastLeakAreaTranslateY = 0;
+
+		SolveNodeAppendagesDrag(this);
+		SolveBrushSelectDrag(this);
+		drag && SolveDragCanvasWithLeak(this);
+		zoom && SolveZoomCanvasWithLeak(this);
+	}
+
+	// ----------------------------------------------------------------------------------------------
+
+	/**
+	 * 对主视图进行重新布局
+	 */
+	reLayout() {
+		const g6Instance = this.getG6Instance(),
+			group = g6Instance.getGroup(),
+			matrix = group.getMatrix(),
+			bound = group.getCanvasBBox();
+
+		const { duration, enable, timingFunction } = this.engine.animationOptions;
+
+		if (matrix) {
+			let dx = matrix[6],
+				dy = matrix[7];
+
+			g6Instance.moveTo(bound.minX - dx, bound.minY - dy, enable, {
+				duration,
+				easing: timingFunction,
+			});
+		}
+
+		const leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
+			height = g6Instance.getHeight();
+
+		this.leakAreaY = height - leakAreaHeight;
+        this.lastLeakAreaTranslateY = 0;
+		this.layoutProvider.layoutAll(this.layoutGroupTable, this.accumulateLeakModels);
+		g6Instance.refresh();
+
+>>>>>>> eac9d007bcc1b52fe573ddf6cb97030c9b2d3a6d
         EventBus.emit('onLeakAreaUpdate', {
             leakAreaY: this.leakAreaY,
-            hasLeak: this.hasLeak
+            hasLeak: this.hasLeak,
+        });
+	}
+
+	/**
+	 * 获取 g6 实例
+	 */
+	getG6Instance(): Graph {
+		return this.renderer.getG6Instance();
+	}
+
+	/**
+	 * 获取泄漏区里面的元素
+	 * @returns
+	 */
+	getAccumulateLeakModels(): SVModel[] {
+		return this.accumulateLeakModels;
+	}
+
+	/**
+	 *
+	 */
+	getLayoutGroupTable(): LayoutGroupTable {
+		return this.layoutGroupTable;
+	}
+
+	/**
+	 * 刷新视图
+	 */
+	refresh() {
+		this.renderer.getG6Instance().refresh();
+	}
+
+	/**
+	 * 重新调整容器尺寸
+	 * @param width
+	 * @param height
+	 */
+	resize(width: number, height: number) {
+		const g6Instance = this.getG6Instance(),
+			prevContainerHeight = g6Instance.getHeight(),
+			globalGroup: Group = new Group();
+
+		globalGroup.add(...this.prevModelList, ...this.accumulateLeakModels);
+		this.renderer.changeSize(width, height);
+
+		const containerHeight = g6Instance.getHeight(),
+			dy = containerHeight - prevContainerHeight;
+
+		globalGroup.translate(0, dy);
+		this.renderer.refresh();
+
+		this.leakAreaY += dy;
+		EventBus.emit('onLeakAreaUpdate', {
+			leakAreaY: this.leakAreaY,
+			hasLeak: this.hasLeak,
+		});
+	}
+
+	/**
+	 *
+	 * @param models
+	 */
+	private restoreHighlight(models: SVModel[]) {
+		models.forEach(item => {
+			// 不是free节点才进行还原
+			if (!item.freed) {
+				item.restoreHighlight();
+			}
 		});
 	}
 
@@ -140,42 +289,52 @@ export class ViewContainer {
 	 * @param models
 	 * @param layoutFn
 	 */
-    render(layoutGroupTable: LayoutGroupTable) {
+	render(layoutGroupTable: LayoutGroupTable, isSameSources: boolean, handleUpdate: handleUpdate) {
-        const modelList = Util.convertGroupTable2ModelList(layoutGroupTable),
+		const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
-            diffResult = this.reconcile.diff(this.layoutGroupTable, this.prevModelList, modelList, this.accumulateLeakModels),
-            renderModelList = [
-                ...modelList,
-                ...diffResult.REMOVE,
-                ...diffResult.LEAKED,
-                ...diffResult.ACCUMULATE_LEAK
-            ];
 
+		this.restoreHighlight([...modelList, ...this.accumulateLeakModels]);
+
+		// 如果数据没变的话，直接退出
+		if (isSameSources) {
+			return;
+		}
+
+		const diffResult = this.reconcile.diff(
+				this.layoutGroupTable,
+				this.prevModelList,
+				modelList,
+				this.accumulateLeakModels,
+				handleUpdate?.isEnterFunction
+			),
+			renderModelList = [...modelList, ...diffResult.REMOVE, ...diffResult.LEAKED, ...this.accumulateLeakModels];
+
+		// 从有泄漏区变成无泄漏区
 		if (this.hasLeak === true && this.accumulateLeakModels.length === 0) {
 			this.hasLeak = false;
 			EventBus.emit('onLeakAreaUpdate', {
 				leakAreaY: this.leakAreaY,
-                hasLeak: this.hasLeak
+				hasLeak: this.hasLeak,
 			});
 		}
 
+		// 从无泄漏区变成有泄漏区
 		if (diffResult.LEAKED.length) {
 			this.hasLeak = true;
 			EventBus.emit('onLeakAreaUpdate', {
 				leakAreaY: this.leakAreaY,
-                hasLeak: this.hasLeak
+				hasLeak: this.hasLeak,
 			});
 		}
 
+		this.accumulateLeakModels.push(...diffResult.LEAKED); // 对泄漏节点进行向后累积
 		this.renderer.build(renderModelList); // 首先在离屏canvas渲染先
-        this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels, diffResult.LEAKED); // 进行布局（设置model的x，y，样式等）
+		this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels); // 进行布局（设置model的x，y，样式等）
 
 		this.beforeRender();
 		this.renderer.render(renderModelList); // 渲染视图
-        this.reconcile.patch(diffResult); // 对视图上的某些变化进行对应的动作，比如：节点创建动画，节点消失动画等
+		this.reconcile.patch(diffResult, handleUpdate); // 对视图上的某些变化进行对应的动作，比如：节点创建动画，节点消失动画等
 		this.afterRender();
 
-        this.accumulateLeakModels.push(...diffResult.LEAKED);  // 对泄漏节点进行累积
-
 		this.layoutGroupTable = layoutGroupTable;
 		this.prevModelList = modelList;
 	}
@@ -193,10 +352,8 @@ export class ViewContainer {
 		this.brushSelectedModels.length = 0;
 	}
 
-
 	// ------------------------------------------------------------------------------
 
-
 	/**
 	 * 把渲染后要触发的逻辑放在这里
 	 */
@@ -211,16 +368,5 @@ export class ViewContainer {
 	/**
 	 * 把渲染前要触发的逻辑放在这里
 	 */
-    private beforeRender() { }
+	private beforeRender() {}
 }
-
-
-
-
-
-
-
-
-
-
-

src/engine.ts

@@ -1,4 +1,4 @@
-import { Sources } from "./sources";
+import { handleUpdate, Sources } from "./sources";
 import { LayoutGroupTable, ModelConstructor } from "./Model/modelConstructor";
 import { AnimationOptions, BehaviorOptions, EngineOptions, LayoutGroupOptions, ViewOptions } from "./options";
 import { EventBus } from "./Common/eventBus";
@@ -6,6 +6,7 @@ import { ViewContainer } from "./View/viewContainer";
 import { SVNode } from "./Model/SVNode";
 import { Util } from "./Common/util";
 import { SVModel } from "./Model/SVModel";
+import { G6Event } from "@antv/g6";
 
 
 export class Engine {
@@ -49,9 +50,10 @@ export class Engine {
     /**
      * 输入数据进行渲染
      * @param sources
-     * @param force
+     * @param prevStep
      */
     public render(source: Sources) {
+<<<<<<< HEAD
         if (source === undefined || source === null) {
             return;
         }
@@ -59,15 +61,36 @@ export class Engine {
         let stringSource = JSON.stringify(source);
         if (this.prevStringSource === stringSource) {
             return;
+=======
+        let isSameSources: boolean = false,
+            layoutGroupTable: LayoutGroupTable;
+
+        if (source === undefined || source === null) {
+            return;
+        }
+
+        let handleUpdate: handleUpdate = source.handleUpdate,
+            stringSource = JSON.stringify(source);
+            
+        if (this.prevStringSource === stringSource) {
+            isSameSources = true;
+>>>>>>> eac9d007bcc1b52fe573ddf6cb97030c9b2d3a6d
         }
 
         this.prevStringSource = stringSource;
 
+
+        if(isSameSources) {
+            // 若源数据两次一样的，用回上一次的layoutGroupTable
+            layoutGroupTable = this.modelConstructor.getLayoutGroupTable();
+        }
+        else {  
             // 1 转换模型（data => model）
-        const layoutGroupTable = this.modelConstructor.construct(source);
+            layoutGroupTable = this.modelConstructor.construct(source);
+        }
 
         // 2 渲染（使用g6进行渲染）
-        this.viewContainer.render(layoutGroupTable);
+        this.viewContainer.render(layoutGroupTable, isSameSources, handleUpdate);
     }
 
 
@@ -192,7 +215,7 @@ export class Engine {
             return;
         }
 
-        this.viewContainer.getG6Instance().on(eventName, event => {
+        this.viewContainer.getG6Instance().on(eventName as G6Event, event => {
             callback(event.item['SVModel']);
         });
     }

src/sources.ts

@@ -1,4 +1,3 @@
-
 // 连接目标信息
 export type LinkTarget = number | string;
 
@@ -14,13 +13,15 @@ export interface SourceNode {
 	[key: string]: any | sourceLinkData | sourceMarkerData;
 }
 
+export interface handleUpdate {
+	isEnterFunction: boolean;
+	isFirstDebug: boolean;
+}
 
 export type Sources = {
 	[key: string]: {
 		data: SourceNode[];
 		layouter: string;
-    }
+	};
+	handleUpdate?: handleUpdate | any;
 };
-    
-
-

tsconfig.json

@@ -2,7 +2,8 @@
     "compilerOptions": {
         "target": "ES2015",
         "module": "commonJS",
-        "removeComments": true
+        "removeComments": true,
+        "lib": ["DOM", "ES2015", "ES2016", "ES2017"]
     },
 	"exclude": [	
 		"node_modules"

webpack.config.product.js

@@ -1,6 +1,6 @@
 
-
 module.exports = {
+    mode: 'production',
     entry: './src/StructV.ts',
     output: {
         filename: './sv.js',
@@ -17,6 +17,5 @@ module.exports = {
                 loader: 'ts-loader'
             }
         ]
-    },
+    }
-    // devtool: 'eval-source-map'
 };