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
             }
         };
     },
@@ -90,19 +87,19 @@ SV.registerLayout('LinkList', {
      * @param node 
      * @param parent 
      */
-    layoutItem(node, prev, layoutOptions) {
-        if(!node) {
+     layoutItem(node, prev, layoutOptions) {
+        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
             });
         }
-        sources[0].indexLeft = 'data';
-        parentNodes[0].indexLeft = '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,
-            halfLength = nodeLength / 2,
+        let nodeLength = elements.length;
+
+        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 {
-            /**
-             * 结点
-             */
-            element: { 
+            node: {
                 default: {
                     type: 'tri-tree-node',
                     size: [60, 30],
                     label: '[data]',
                     style: {
-                        fill: '#ff2e63',
-                        stroke: "#333",
-                        cursor: 'pointer'
+                        fill: '#95e1d3',
+                        stroke: '#333',
+                        cursor: 'pointer',
+                        backgroundFill: '#eee'
+                    },
+                    labelOptions: {
+                        style: { fontSize: 16 }
                     }
                 }
             },
-            /**
-             * 箭头
-             */
             link: {
                 child: {
-                    type: 'line',
                     sourceAnchor: index => index,
                     targetAnchor: 3,
+                    type: 'line',
                     style: {
                         stroke: '#333',
-                        //边的响应范围
-                        lineAppendWidth: 6,
-                        cursor: 'pointer',
+                        lineAppendWidth: 10,
+                        lineWidth: 1.6,
                         endArrow: 'default',
                         startArrow: {
-                            //参数：半径、偏移量
                             path: G6.Arrow.circle(2, -1),
                             fill: '#333'
                         }
@@ -43,54 +39,77 @@
                 parent: {
                     type: 'line',
                     sourceAnchor: 4,
-                    targetAnchor: 2,
+                    targetAnchor: 6,
                     style: {
-                        stroke: '#A9A9A9',
-                        //边的响应范围
-                        lineAppendWidth: 6,
-                        cursor: 'pointer',
+                        stroke: '#999',
+                        lineAppendWidth: 10,
+                        lineWidth: 1.6,
                         endArrow: 'default',
                         startArrow: {
-                            //参数：半径、偏移量
                             path: G6.Arrow.circle(2, -1),
-                            fill: '#333'
+                            fill: '#999'
+                        }
+                    }
+                },
+                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 name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <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 { EventBus } from "../Common/eventBus";
-import { LayoutGroupTable } from "../Model/modelConstructor";
-import { SVModel } from "../Model/SVModel";
-import { SVNode } from "../Model/SVNode";
-import { ViewContainer } from "../View/viewContainer";
-
+import { G6Event, Graph, INode } from '@antv/g6';
+import { EventBus } from '../Common/eventBus';
+import { LayoutGroupTable } from '../Model/modelConstructor';
+import { SVModel } from '../Model/SVModel';
+import { SVNode } from '../Model/SVNode';
+import { ViewContainer } from '../View/viewContainer';
 
 /**
  * 判断当前节点是否可以单独拖拽
@@ -12,19 +11,18 @@ import { ViewContainer } from "../View/viewContainer";
  * @param dragNodeOption
  */
 const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | string[]): boolean {
-    const nodeSourceType = node.sourceType;
+	const nodeSourceType = node.sourceType;
 
-    if (Array.isArray(dragNodeOption)) {
-        return dragNodeOption.includes(nodeSourceType);
-    }
+	if (Array.isArray(dragNodeOption)) {
+		return dragNodeOption.includes(nodeSourceType);
+	}
 
-    if (dragNodeOption === undefined || dragNodeOption === true) {
-        return true;
-    }
-
-    return false;
-}
+	if (dragNodeOption === undefined || dragNodeOption === true) {
+		return true;
+	}
 
+	return false;
+};
 
 /**
  * 判定该节点是否可以被拖拽
@@ -32,181 +30,173 @@ 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[]) {
-    const layoutGroup = layoutGroupTable.get(node.group),
-        dragNodeOption = layoutGroup.options.behavior?.dragNode,
-        canNodeDragAlone = checkNodeDragAlone(node, dragNodeOption);
+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);
 
-    if (canNodeDragAlone) {
-        return true;
-    }
+	if (canNodeDragAlone) {
+		return true;
+	}
 
-    const nodeSourceType = node.sourceType,
-        nodeModelType = node.getModelType(),
-        modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType),
-        brushSelectedSameTypeModels = brushSelectedModels.filter(item => {
-            return item.group === node.group &&
-                item.getModelType() === nodeModelType &&
-                item.sourceType === nodeSourceType
-        });
-
-    return modelList.length === brushSelectedSameTypeModels.length;
-}
+	const nodeSourceType = node.sourceType,
+		nodeModelType = node.getModelType(),
+		modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType),
+		brushSelectedSameTypeModels = brushSelectedModels.filter(item => {
+			return (
+				item.group === node.group && item.getModelType() === nodeModelType && item.sourceType === nodeSourceType
+			);
+		});
 
+	return modelList.length === brushSelectedSameTypeModels.length;
+};
 
 /**
  * 在初始化渲染器之后，修正节点拖拽时，外部指针或者其他 appendage 没有跟着动的问题
  *
  */
 export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
-    const g6Instance: Graph = viewContainer.getG6Instance();
+	const g6Instance: Graph = viewContainer.getG6Instance();
 
-    g6Instance.on('node:dragstart', event => {
-        let node: SVNode = event.item['SVModel'];
+	g6Instance.on('node:dragstart', event => {
+		let node: SVNode = event.item['SVModel'];
 
-        if (node instanceof SVNode === false) {
-            return;
-        }
+		if (node instanceof SVNode === false) {
+			return;
+		}
 
-        const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
+		const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
 
-        // 如果在框选完成之后，拖拽了被框选之外的其他节点，那么取消已框选的节点的选中状态
-        if (isNodeSelected === undefined) {
-            viewContainer.brushSelectedModels.forEach(item => {
-                item.setSelectedState(false);
+		// 如果在框选完成之后，拖拽了被框选之外的其他节点，那么取消已框选的节点的选中状态
+		if (isNodeSelected === undefined) {
+			viewContainer.brushSelectedModels.forEach(item => {
+				item.setSelectedState(false);
 
-                if (item instanceof SVNode) {
-                    item.appendages.forEach(appendage => appendage.setSelectedState(false));
-                }
-            });
-            viewContainer.brushSelectedModels.length = 0;
-        }
-    });
+				if (item instanceof SVNode) {
+					item.getAppendagesList().forEach(appendage => appendage.setSelectedState(false));
+				}
+			});
+			viewContainer.brushSelectedModels.length = 0;
+		}
+	});
 
-    g6Instance.on('node:dragend', event => {
-        let node: SVNode = event.item['SVModel'];
+	g6Instance.on('node:dragend', event => {
+		let node: SVNode = event.item['SVModel'];
 
-        if (node instanceof SVNode === false) {
-            return;
-        }
+		if (node instanceof SVNode === false) {
+			return;
+		}
 
-        const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
+		const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
 
-        // 如果当前拖拽的节点是在已框选选中的节点之中，那么不需要取消选中的状态，否则需要取消
-        if (isNodeSelected === undefined) {
-            node.setSelectedState(false);
-            node.set({
-                x: node.G6Item.getModel().x,
-                y: node.G6Item.getModel().y
-            });
+		// 如果当前拖拽的节点是在已框选选中的节点之中，那么不需要取消选中的状态，否则需要取消
+		if (isNodeSelected === undefined) {
+			node.setSelectedState(false);
+			node.set({
+				x: node.G6Item.getModel().x,
+				y: node.G6Item.getModel().y,
+			});
 
-            node.appendages.forEach(item => {
-                item.setSelectedState(false);
-                item.set({
-                    x: item.G6Item.getModel().x,
-                    y: item.G6Item.getModel().y
-                });
-            });
-        }
+			node.getAppendagesList().forEach(item => {
+				item.setSelectedState(false);
+				item.set({
+					x: item.G6Item.getModel().x,
+					y: item.G6Item.getModel().y,
+				});
+			});
+		}
 
-        viewContainer.brushSelectedModels.forEach(item => {
-            item.set({
-                x: item.G6Item.getModel().x,
-                y: item.G6Item.getModel().y
-            });
+		viewContainer.brushSelectedModels.forEach(item => {
+			item.set({
+				x: item.G6Item.getModel().x,
+				y: item.G6Item.getModel().y,
+			});
 
-            if(item instanceof SVNode) {
-                item.appendages.forEach(appendage => {
-                    appendage.set({
-                        x: appendage.G6Item.getModel().x,
-                        y: appendage.G6Item.getModel().y
-                    });
-                });
-            }
-        });
-    });
+			if (item instanceof SVNode) {
+				item.getAppendagesList().forEach(appendage => {
+					appendage.set({
+						x: appendage.G6Item.getModel().x,
+						y: appendage.G6Item.getModel().y,
+					});
+				});
+			}
+		});
+	});
 }
 
-
 /**
  * 检测框选到的节点是不是都可以被选中
  * @param viewContainer
  */
 export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
-    const g6Instance: Graph = viewContainer.getG6Instance();
+	const g6Instance: Graph = viewContainer.getG6Instance();
 
-    // 当框选完成后，监听被框选节点的数量变化事件，将被框选的节点添加到 brushSelectedModels 数组里面
-    g6Instance.on('nodeselectchange', event => {
-        const selectedItems = event.selectedItems as { nodes: INode[]; },
-            tmpSelectedModelList = [];
+	// 当框选完成后，监听被框选节点的数量变化事件，将被框选的节点添加到 brushSelectedModels 数组里面
+	g6Instance.on('nodeselectchange' as G6Event, event => {
+		const selectedItems = event.selectedItems as { nodes: INode[] },
+			tmpSelectedModelList = [];
 
-        // 如果是点击选中，不理会
-        if (event.target) {
-            return;
-        }
+		// 如果是点击选中，不理会
+		if (event.target) {
+			return;
+		}
 
-        // 先清空上一次框选保存的内容
-        viewContainer.brushSelectedModels.length = 0;
+		// 先清空上一次框选保存的内容
+		viewContainer.brushSelectedModels.length = 0;
 
-        // 首先将已框选中的节点加到一个临时队列
-        selectedItems.nodes.forEach(item => {
-            tmpSelectedModelList.push(item['SVModel']);
-        });
+		// 首先将已框选中的节点加到一个临时队列
+		selectedItems.nodes.forEach(item => {
+			tmpSelectedModelList.push(item['SVModel']);
+		});
 
-        // 之后逐个检测被框选中的节点是否可以拖拽，可以拖拽的才加入到真正的框选队列
-        selectedItems.nodes.forEach(item => {
-            const node: SVNode = item['SVModel'];
+		// 之后逐个检测被框选中的节点是否可以拖拽，可以拖拽的才加入到真正的框选队列
+		selectedItems.nodes.forEach(item => {
+			const node: SVNode = item['SVModel'];
 
-            if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) {
-                viewContainer.brushSelectedModels.push(node);
-            }
-            else {
-                node.setSelectedState(false);
-            }
-        });
-    });
+			if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) {
+				viewContainer.brushSelectedModels.push(node);
+			} else {
+				node.setSelectedState(false);
+			}
+		});
+	});
 }
 
-
-
 /**
  * 解决泄漏区随着视图拖动的问题
  * @param g6Instance
  * @param hasLeak
  */
 export function SolveDragCanvasWithLeak(viewContainer: ViewContainer) {
-    let g6Instance = viewContainer.getG6Instance(),
-        prevDy = 0;
+	let g6Instance = viewContainer.getG6Instance();
 
-    g6Instance.on('viewportchange', event => {
-        if (event.action !== 'translate') {
-            return false;
-        }
+	g6Instance.on('viewportchange', event => {
+		if (event.action !== 'translate') {
+			return false;
+		}
 
-        let translateX = event.matrix[7],
-            dy = translateX - prevDy;
+		let translateY = event.matrix[7],
+			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
-            });
-        }
-    });
+		viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
+		if (viewContainer.hasLeak) {
+			EventBus.emit('onLeakAreaUpdate', {
+				leakAreaY: viewContainer.leakAreaY,
+				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,
-            node: SVNode = g6Item.SVModel;
+        let g6Item = event.item;
+
+        if(g6Item === null) {
+            return false
+        }
+
+        let node: SVNode = g6Item.SVModel;
 
         if (g6Item === null || node.isNode() === false) {
             return false;

src/Common/boundingRect.ts

@@ -1,152 +1,161 @@
-import { Vector } from "./vector";
-
-
+import { Vector } from './vector';
 
 // 包围盒类型
 export type BoundingRect = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
 };
 
-
 // 包围盒操作
 export const Bound = {
+	/**
+	 * 从点集生成包围盒
+	 * @param points
+	 */
+	fromPoints(points: Array<[number, number]>): BoundingRect {
+		let maxX = -Infinity,
+			minX = Infinity,
+			maxY = -Infinity,
+			minY = Infinity;
 
-    /**
-     * 从点集生成包围盒
-     * @param points 
-     */
-    fromPoints(points: Array<[number, number]>): BoundingRect {
-        let maxX = -Infinity,
-            minX = Infinity,
-            maxY = -Infinity,
-            minY = Infinity;
+		points.map(item => {
+			if (item[0] > maxX) maxX = item[0];
+			if (item[0] < minX) minX = item[0];
+			if (item[1] > maxY) maxY = item[1];
+			if (item[1] < minY) minY = item[1];
+		});
 
-        points.map(item => {
-            if(item[0] > maxX) maxX = item[0];
-            if(item[0] < minX) minX = item[0];
-            if(item[1] > maxY) maxY = item[1];
-            if(item[1] < minY) minY = item[1];
-        });
+		return {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY,
+		};
+	},
 
-        return {
-            x: minX,
-            y: minY,
-            width: maxX - minX,
-            height: maxY - minY
-        };
-    },
+	/**
+	 * 由包围盒转化为四个顶点（顺时针）
+	 * @param bound
+	 */
+	toPoints(bound: BoundingRect): Array<[number, number]> {
+		return [
+			[bound.x, bound.y],
+			[bound.x + bound.width, bound.y],
+			[bound.x + bound.width, bound.y + bound.height],
+			[bound.x, bound.y + bound.height],
+		];
+	},
 
-    /**
-     * 由包围盒转化为四个顶点（顺时针）
-     * @param bound 
-     */
-    toPoints(bound: BoundingRect): Array<[number, number]> {
-        return [
-            [bound.x, bound.y],
-            [bound.x + bound.width, bound.y],
-            [bound.x + bound.width, bound.y + bound.height],
-            [bound.x, bound.y + bound.height]
-        ];
-    },
+	/**
+	 * 求包围盒并集
+	 * @param arg
+	 */
+	union(...arg: BoundingRect[]): BoundingRect {
+		if (arg.length === 0) {
+			return {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0,
+			};
+		}
 
-    /**
-     * 求包围盒并集
-     * @param arg 
-     */
-    union(...arg: BoundingRect[]): BoundingRect {
-        return arg.length > 1? 
-            arg.reduce((total, cur) => {
-            let minX = total.x < cur.x? total.x: cur.x,
-                maxX = total.x + total.width < cur.x + cur.width? cur.x + cur.width: total.x + total.width,
-                minY = total.y < cur.y? total.y: cur.y,
-                maxY = total.y + total.height < cur.y + cur.height? cur.y + cur.height: total.y + total.height;
+		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
-            };
-        }): arg[0];
-    },
+					return {
+						x: minX,
+						y: minY,
+						width: maxX - minX,
+						height: maxY - minY,
+					};
+			  })
+			: arg[0];
+	},
 
-    /**
-     * 包围盒求交集
-     * @param b1 
-     * @param b2 
-     */
-    intersect(b1: BoundingRect, b2: BoundingRect): BoundingRect {
-        let x, y, 
-            maxX, maxY,
-            overlapsX,
-            overlapsY;
+	/**
+	 * 包围盒求交集
+	 * @param b1
+	 * @param b2
+	 */
+	intersect(b1: BoundingRect, b2: BoundingRect): BoundingRect {
+		let x,
+			y,
+			maxX,
+			maxY,
+			overlapsX,
+			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 = b1.x < b2.x? b2.x: b1.x;
-            // 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;
-        }
+		x = Math.max(b1x, b2x);
+		maxX = Math.min(b1mx, b2mx);
+		overlapsX = maxX - x;
 
-        if(b1.y < b2.y + b2.height && b1.y + b1.height > b2.y) {
-            y = b1.y < b2.y? b2.y: b1.y;
-            maxY = b1.y + b1.height < b2.y + b2.height? b1.y + b1.height: b2.y + b2.height;
-            overlapsY = maxY - y;
-        }
+		y = Math.max(b1y, b2y);
+		maxY = Math.min(b1my, b2my);
+		overlapsY = maxY - y;
 
-        if(!overlapsX || !overlapsY) return null;
+		if (!overlapsX || !overlapsY) return null;
 
-        return {
-            x,
-            y,
-            width: overlapsX,
-            height: overlapsY
-        };
-    },
+		return {
+			x,
+			y,
+			width: overlapsX,
+			height: overlapsY,
+		};
+	},
 
-    /**
-     * 位移包围盒
-     * @param bound
-     * @param dx 
-     * @param dy 
-     */
-    translate(bound: BoundingRect, dx: number, dy: number) {
-        bound.x += dx;
-        bound.y += dy;
-    },
+	/**
+	 * 位移包围盒
+	 * @param bound
+	 * @param dx
+	 * @param dy
+	 */
+	translate(bound: BoundingRect, dx: number, dy: number) {
+		bound.x += dx;
+		bound.y += dy;
+	},
 
-    /**
-     * 求包围盒旋转后新形成的包围盒
-     * @param bound 
-     * @param rot
-     */
-    rotation(bound: BoundingRect, rot: number): BoundingRect {
-        let cx = bound.x + bound.width / 2,
-            cy = bound.y + bound.height / 2;
+	/**
+	 * 求包围盒旋转后新形成的包围盒
+	 * @param bound
+	 * @param rot
+	 */
+	rotation(bound: BoundingRect, rot: number): BoundingRect {
+		let cx = bound.x + bound.width / 2,
+			cy = bound.y + bound.height / 2;
 
-        return Bound.fromPoints(Bound.toPoints(bound).map(item => Vector.rotation(rot, item, [cx, cy])));
-    },
+		return Bound.fromPoints(Bound.toPoints(bound).map(item => Vector.rotation(rot, item, [cx, cy])));
+	},
 
-    /**
-     * 判断两个包围盒是否相交
-     * @param b1 
-     * @param b2 
-     */
-    isOverlap(b1: BoundingRect, b2: BoundingRect): boolean {
-        let maxX1 = b1.x + b1.width,
-            maxY1 = b1.y + b1.height,
-            maxX2 = b2.x + b2.width,
-            maxY2 = b2.y + b2.height;
+	/**
+	 * 判断两个包围盒是否相交
+	 * @param b1
+	 * @param b2
+	 */
+	isOverlap(b1: BoundingRect, b2: BoundingRect): boolean {
+		let maxX1 = b1.x + b1.width,
+			maxY1 = b1.y + b1.height,
+			maxX2 = b2.x + b2.width,
+			maxY2 = b2.y + b2.height;
 
-        if (b1.x < maxX2 && b2.x < maxX1 && b1.y < maxY2 && b2.y < maxY1) {
-            return true;
-        }
+		if (b1.x < maxX2 && b2.x < maxX1 && b1.y < maxY2 && b2.y < maxY1) {
+			return true;
+		}
 
-        return false;
-    }
+		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,52 +1,89 @@
-import { EdgeConfig, IEdge } from "@antv/g6-core";
-import { Util } from "../Common/util";
-import { LinkLabelOption, LinkOption, Style } from "../options";
-import { SVModel } from "./SVModel";
-import { SVNode } from "./SVNode";
+import { EdgeConfig, IEdge } from '@antv/g6-core';
+import { Util } from '../Common/util';
+import { LinkLabelOption, LinkOption, Style } from '../options';
+import { SVModel } from './SVModel';
+import { SVNode } from './SVNode';
 
 export class SVLink extends SVModel {
-    public node: SVNode;
-    public target: SVNode;
-    public linkIndex: number;
+	public node: SVNode;
+	public target: SVNode;
+	public linkIndex: number;
 
-    public shadowG6Item: IEdge;
-    public G6Item: IEdge;
+	public shadowG6Item: IEdge;
+	public G6Item: IEdge;
 
-    constructor(id: string, type: string, group: string, layout: string, node: SVNode, target: SVNode, index: number, options: LinkOption) { 
-        super(id, type, group, layout, 'link');
+	public nodeId: string;
+	public targetId: string;
 
-        this.node = node;
-        this.target = target;
-        this.linkIndex = index;
+	constructor(
+		id: string,
+		type: string,
+		group: string,
+		layout: string,
+		node: SVNode,
+		target: SVNode,
+		index: number,
+		options: LinkOption
+	) {
+		super(id, type, group, layout, 'link');
 
-        node.links.outDegree.push(this);
-        target.links.inDegree.push(this);
-        this.G6ModelProps = this.generateG6ModelProps(options);
-    }
+		this.node = node;
+		this.target = target;
+		this.nodeId = node.id;
+		this.targetId = target.id;
+		this.linkIndex = index;
 
-    generateG6ModelProps(options: LinkOption): EdgeConfig {
-        let sourceAnchor = options.sourceAnchor, 
-            targetAnchor = options.targetAnchor;
+		node.links.outDegree.push(this);
+		target.links.inDegree.push(this);
+		this.G6ModelProps = this.generateG6ModelProps(options);
+	}
 
-        if(options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
-            sourceAnchor = options.sourceAnchor(this.linkIndex);
-        }
+	generateG6ModelProps(options: LinkOption): EdgeConfig {
+		let sourceAnchor = options.sourceAnchor,
+			targetAnchor = options.targetAnchor;
 
-        if(options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
-            targetAnchor = options.targetAnchor(this.linkIndex);
-        }
+		if (options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
+			sourceAnchor = options.sourceAnchor(this.linkIndex);
+		}
 
-        return {
-            id: this.id,
-            type: options.type,
-            source: this.node.id,
-            target: this.target.id,
-            sourceAnchor,
-            targetAnchor,
-            label: options.label,
-            style: Util.objectClone<Style>(options.style),
-            labelCfg: Util.objectClone<LinkLabelOption>(options.labelOptions),
-            curveOffset: options.curveOffset
-        };
-    }
-};
+		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,
+			source: this.node.id,
+			target: this.target.id,
+			sourceAnchor,
+			targetAnchor,
+			label,
+			style: Util.objectClone<Style>(options.style),
+			labelCfg,
+			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,220 +1,223 @@
-import { Util } from "../Common/util";
-import { Style } from "../options";
-import { BoundingRect } from "../Common/boundingRect";
-import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core";
-import { Graph } from "@antv/g6";
+import { Util } from '../Common/util';
+import { Style } from '../options';
+import { BoundingRect } from '../Common/boundingRect';
+import { EdgeConfig, Item, NodeConfig } from '@antv/g6-core';
+import { Graph } from '@antv/g6-pc';
 import merge from 'merge';
 
-
-
-
 export class SVModel {
-    public id: string;
-    public sourceType: string;
+	public id: string;
+	public sourceType: string;
 
-    public g6Instance: Graph;
-    public shadowG6Instance: Graph;
-    public group: string;
-    public layout: string;
-    public G6ModelProps: NodeConfig | EdgeConfig;
-    public shadowG6Item: Item;
-    public G6Item: Item;
+	public g6Instance: Graph;
+	public shadowG6Instance: Graph;
+	public group: string;
+	public layout: string;
+	public G6ModelProps: NodeConfig | EdgeConfig;
+	public shadowG6Item: Item;
+	public G6Item: Item;
 
-    public preLayout: boolean;   // 是否进入预备布局阶段
-    public discarded: boolean;
-    public freed: boolean;
-    public leaked: boolean;
-    public generalStyle: Partial<Style>;
+	public preLayout: boolean; // 是否进入预备布局阶段
+	public discarded: boolean;
+	public freed: boolean;
+	public leaked: boolean;
+	public originStyle: Partial<Style>; // 用作保存修改前的样式
 
-    private transformMatrix: number[];
-    private modelType: string;
+	private transformMatrix: number[];
+	private modelType: string;
 
-    public layoutX: number;
-    public layoutY: number;
+	public layoutX: number;
+	public layoutY: number;
 
-    constructor(id: string, type: string, group: string, layout: string, modelType: string) {
-        this.id = id;
-        this.sourceType = type;
-        this.group = group;
-        this.layout = layout;
-        this.shadowG6Item = null;
+	constructor(id: string, type: string, group: string, layout: string, modelType: string) {
+		this.id = id;
+		this.sourceType = type;
+		this.group = group;
+		this.layout = layout;
+		this.shadowG6Item = null;
+		this.G6Item = null;
+		this.preLayout = false;
+		this.discarded = false;
+		this.freed = false;
+		this.leaked = false;
+		this.transformMatrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+		this.modelType = modelType;
+	}
+
+	/**
+	 * @override
+	 * 定义 G6 model 的属性
+	 * @param option
+	 */
+	generateG6ModelProps(options: unknown): NodeConfig | EdgeConfig {
+		return null;
+	}
+
+	/**
+	 * 获取 G6 model 的属性
+	 * @param attr
+	 */
+	get(attr: string): any {
+		return this.G6ModelProps[attr];
+	}
+
+	/**
+	 * 设置 G6 model 的属性
+	 * @param attr
+	 * @param value
+	 * @returns
+	 */
+	set(attr: string | object, value?: any) {
+		if (this.discarded) {
+			return;
+		}
+
+		if (typeof attr === 'object') {
+			Object.keys(attr).map(item => {
+				this.set(item, attr[item]);
+			});
+			return;
+		}
+
+		if (this.G6ModelProps[attr] === value) {
+			return;
+		}
+
+		if (attr === 'style' || attr === 'labelCfg') {
+			this.G6ModelProps[attr] = merge(this.G6ModelProps[attr] || {}, value);
+		} else {
+			this.G6ModelProps[attr] = value;
+		}
+
+		if (attr === 'rotation') {
+			const matrix = Util.calcRotateMatrix(this.getMatrix(), value);
+			this.setMatrix(matrix);
+		}
+
+		// 更新G6Item
+		if (this.G6Item) {
+			if (this.preLayout) {
+				const G6ItemModel = this.G6Item.getModel();
+				G6ItemModel[attr] = value;
+			} else {
+				this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
+			}
+		}
+
+		// 更新shadowG6Item
+		if (this.shadowG6Item) {
+			this.shadowG6Instance.updateItem(this.shadowG6Item, this.G6ModelProps);
+		}
+	}
+
+	/**
+	 *
+	 * @param G6ModelProps
+	 */
+	updateG6ModelStyle(G6ModelProps: NodeConfig | EdgeConfig) {
+		const newG6ModelProps = {
+			style: {
+				...G6ModelProps.style,
+			},
+			labelCfg: {
+				...G6ModelProps.labelCfg,
+			},
+		};
+
+		this.G6ModelProps = merge.recursive(this.G6ModelProps, newG6ModelProps);
+
+		if (this.G6Item) {
+			this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
+		}
+
+		if (this.shadowG6Item) {
+			this.shadowG6Instance.updateItem(this.shadowG6Item, this.G6ModelProps);
+		}
+	}
+
+	/**
+	 * 获取包围盒
+	 * @returns
+	 */
+	getBound(): BoundingRect {
+		return this.shadowG6Item.getBBox();
+	}
+
+	/**
+	 * 获取变换矩阵
+	 */
+	getMatrix(): number[] {
+		return [...this.transformMatrix];
+	}
+
+	/**
+	 * 设置变换矩阵
+	 * @param matrix
+	 */
+	setMatrix(matrix: number[]) {
+		this.transformMatrix = matrix;
+		this.set('style', { matrix });
+	}
+
+	/**
+	 * 设置是否被选中的状态
+	 * @param isSelected
+	 */
+	setSelectedState(isSelected: boolean) {
+		if (this.G6Item === null) {
+			return;
+		}
+
+		this.G6Item.setState('selected', isSelected);
+	}
+
+	/**
+	 *
+	 * @returns
+	 */
+	getG6ModelProps(): NodeConfig | EdgeConfig {
+		return Util.objectClone(this.G6ModelProps);
+	}
+
+	/**
+	 * 获取 model 类型
+	 * @returns
+	 */
+	getModelType(): string {
+		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）
+	 */
+	isNode(): boolean {
+		return false;
+	}
+
+    isEqual(model: SVModel): boolean {
+        return this.id === model.id;
+    }
+
+    beforeRender () {}
+    afterRender() {}
+
+    beforeDestroy () {}
+    afterDestroy() {
         this.G6Item = null;
-        this.preLayout = false;
-        this.discarded = false;
-        this.freed = false;
-        this.leaked = false;
-        this.transformMatrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
-        this.modelType = modelType;
+        this.shadowG6Instance = null;
+        this.shadowG6Item = null;
     }
-
-    /**
-     * @override
-     * 定义 G6 model 的属性
-     * @param option 
-     */
-    generateG6ModelProps(options: unknown): NodeConfig | EdgeConfig {
-        return null;
-    }
-
-    /**
-     * 获取 G6 model 的属性
-     * @param attr 
-     */
-    get(attr: string): any {
-        return this.G6ModelProps[attr];
-    }
-
-    /**
-     * 设置 G6 model 的属性
-     * @param attr 
-     * @param value 
-     * @returns 
-     */
-    set(attr: string | object, value?: any) {
-        if (this.discarded) {
-            return;
-        }
-
-        if (typeof attr === 'object') {
-            Object.keys(attr).map(item => {
-                this.set(item, attr[item]);
-            });
-            return;
-        }
-
-        if (this.G6ModelProps[attr] === value) {
-            return;
-        }
-
-        if (attr === 'style' || attr === 'labelCfg') {
-            this.G6ModelProps[attr] = merge(this.G6ModelProps[attr] || {}, value);
-        }
-        else {
-            this.G6ModelProps[attr] = value;
-        }
-
-        if (attr === 'rotation') {
-            const matrix = Util.calcRotateMatrix(this.getMatrix(), value);
-            this.setMatrix(matrix);
-        }
-
-        // 更新G6Item
-        if (this.G6Item) {
-            if (this.preLayout) {
-                const G6ItemModel = this.G6Item.getModel();
-                G6ItemModel[attr] = value;
-            }
-            else {
-                this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
-            }
-        }
-
-        // 更新shadowG6Item
-        if (this.shadowG6Item) {
-            this.shadowG6Instance.updateItem(this.shadowG6Item, this.G6ModelProps);
-        }
-    }
-
-    /**
-     * 
-     * @param G6ModelProps 
-     */
-    updateG6ModelStyle(G6ModelProps: NodeConfig | EdgeConfig) {
-        const newG6ModelProps = { 
-            style: {
-                ...G6ModelProps.style
-            },
-            labelCfg: {
-                ...G6ModelProps.labelCfg
-            }
-        };
-
-        this.G6ModelProps = merge.recursive(this.G6ModelProps, newG6ModelProps);
-
-        if (this.G6Item) {
-            this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
-        }
-
-        if (this.shadowG6Item) {
-            this.shadowG6Instance.updateItem(this.shadowG6Item, this.G6ModelProps);
-        }
-    }
-
-    /**
-     * 获取包围盒
-     * @returns 
-     */
-    getBound(): BoundingRect {
-        return this.shadowG6Item.getBBox();
-    }
-
-    /**
-     * 获取变换矩阵
-     */
-    getMatrix(): number[] {
-        return [...this.transformMatrix];
-    }
-
-    /**
-     * 设置变换矩阵
-     * @param matrix 
-     */
-    setMatrix(matrix: number[]) {
-        this.transformMatrix = matrix;
-        this.set('style', { matrix });
-    }
-
-    /**
-     * 设置是否被选中的状态
-     * @param isSelected 
-     */
-    setSelectedState(isSelected: boolean) {
-        if(this.G6Item === null) {
-            return;
-        }
-
-        this.G6Item.setState('selected', isSelected);
-    }
-
-    /**
-     * 
-     * @returns 
-     */
-    getG6ModelProps(): NodeConfig | EdgeConfig {
-        return Util.objectClone(this.G6ModelProps);
-    }
-
-    /**
-     * 获取 model 类型
-     * @returns 
-     */
-    getModelType(): string {
-        return this.modelType;
-    }
-
-    /**
-     * 判断是否为节点model（SVNode）
-     */
-    isNode(): boolean {
-        return false;
-    }
-
-
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

src/Model/SVNode.ts

@@ -1,101 +1,119 @@
-import { INode, NodeConfig } from "@antv/g6-core";
-import { Util } from "../Common/util";
-import { NodeLabelOption, NodeOption, Style } from "../options";
-import { SourceNode } from "../sources";
-import { SVLink } from "./SVLink";
-import { SVModel } from "./SVModel";
-import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from "./SVNodeAppendage";
-
-
-
+import { INode, NodeConfig } from '@antv/g6-core';
+import { Util } from '../Common/util';
+import { NodeLabelOption, NodeOption, Style } from '../options';
+import { SourceNode } from '../sources';
+import { ModelConstructor } from './modelConstructor';
+import { SVLink } from './SVLink';
+import { SVModel } from './SVModel';
+import { SVNodeAppendage } from './SVNodeAppendage';
 
 export class SVNode extends SVModel {
-    public sourceId: string;
-    public sourceNode: SourceNode;
-    public links: {
-        inDegree: SVLink[];
-        outDegree: SVLink[];
-    };
+	public sourceId: string;
+	public sourceNode: SourceNode;
+	public links: {
+		inDegree: SVLink[];
+		outDegree: SVLink[];
+	};
 
-    private label: string | string[];
-    private disable: boolean;
+	private label: string | string[];
+	private disable: boolean;
+	public appendages: { [key: string]: SVNodeAppendage[] };
 
-    public shadowG6Item: INode;
-    public G6Item: INode;
+	constructor(
+		id: string,
+		type: string,
+		group: string,
+		layout: string,
+		sourceNode: SourceNode,
+		label: string | string[],
+		options: NodeOption
+	) {
+		super(id, type, group, layout, 'node');
 
-    public marker: SVMarker;
-    public freedLabel: SVFreedLabel;
-    public indexLabel: SVIndexLabel;
-    public addressLabel: SVAddressLabel;
-    public appendages: SVNodeAppendage[];
+		this.group = group;
+		this.layout = layout;
 
-    constructor(id: string, type: string, group: string, layout: string, sourceNode: SourceNode, label: string | string[], options: NodeOption) {
-        super(id, type, group, layout, 'node');
+		Object.keys(sourceNode).map(prop => {
+			if (prop !== 'id') {
+				this[prop] = sourceNode[prop];
+			}
+		});
 
-        this.group = group;
-        this.layout = layout;
+		this.sourceNode = sourceNode;
+		this.sourceId = sourceNode.id.toString();
     
-        Object.keys(sourceNode).map(prop => {
-            if (prop !== 'id') {
-                this[prop] = sourceNode[prop];
-            }
+		this.links = { inDegree: [], outDegree: [] };
+		this.appendages = {};
+		this.sourceNode = sourceNode;
+		this.label = label;
+		this.G6ModelProps = this.generateG6ModelProps(options);
+	}
+
+	generateG6ModelProps(options: NodeOption): NodeConfig {
+		const style = Util.objectClone<Style>(options.style);
+
+		return {
+			...this.sourceNode,
+			id: this.id,
+			x: 0,
+			y: 0,
+			rotation: options.rotation || 0,
+			type: options.type,
+			size: options.size || [60, 30],
+			anchorPoints: options.anchorPoints,
+			label: this.label as string,
+			style: {
+				...style,
+			},
+			labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
+		};
+	}
+
+	isNode(): boolean {
+		return true;
+	}
+
+	/**
+	 * 设置是否被选中的状态
+	 * @param isSelected
+	 */
+	setSelectedState(isSelected: boolean) {
+		if (this.G6Item === null) {
+			return;
+		}
+
+		this.G6Item.setState('selected', isSelected);
+		this.getAppendagesList().forEach(item => {
+			item.setSelectedState(isSelected);
+		});
+	}
+
+	getSourceId(): string {
+		return this.sourceId;
+	}
+
+    getAppendagesList(): SVNodeAppendage[] {
+        const list = [];
+
+        Object.entries(this.appendages).forEach(item => {
+            list.push(...item[1]);
         });
 
-        this.sourceNode = sourceNode;
-        this.sourceId = sourceNode.id.toString();
-
-        this.links = { inDegree: [], outDegree: [] };
-        this.appendages = [];
-        this.sourceNode = sourceNode;
-        this.label = label;
-        this.G6ModelProps = this.generateG6ModelProps(options);
+        return list;
     }
 
-    generateG6ModelProps(options: NodeOption): NodeConfig {
-        const style = Util.objectClone<Style>(options.style);
-
-        return {
-            ...this.sourceNode,
-            id: this.id,
-            x: 0,
-            y: 0,
-            rotation: options.rotation || 0,
-            type: options.type,
-            size: options.size || [60, 30],
-            anchorPoints: options.anchorPoints,
-            label: this.label as string,
-            style: {
-                ...style,
-                fill: this.disable ? '#ccc' : style.fill
-            },
-            labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
-        };
+	/**
+	 * 判断这个节点是否来自相同group
+	 * @param node
+	 */
+	isSameGroup(node: SVNode): boolean {
+        return ModelConstructor.isSameGroup(this, node);
     }
 
-    isNode(): boolean {
-        return true;
+    beforeDestroy(): void {
+        this.sourceNode = null;
+        this.links.inDegree.length = 0;
+        this.links.outDegree.length = 0;
+        this.appendages = {};
     }
-
-    /**
-     * 设置是否被选中的状态
-     * @param isSelected 
-     */
-    setSelectedState(isSelected: boolean) {
-        if (this.G6Item === null) {
-            return;
-        }
-
-        this.G6Item.setState('selected', isSelected);
-        this.appendages.forEach(item => {
-            item.setSelectedState(isSelected);
-        });
-    }
-
-    getSourceId(): string {
-        return this.sourceId;
-    }
-};
-
-
-
-
+}

src/Model/SVNodeAppendage.ts

@@ -1,182 +1,206 @@
-import { INode, NodeConfig, EdgeConfig } from "@antv/g6-core";
-import { Util } from "../Common/util";
-import { AddressLabelOption, IndexLabelOption, MarkerOption, NodeLabelOption, Style } from "../options";
-import { SVModel } from "./SVModel";
-import { SVNode } from "./SVNode";
-
-
-
+import { INode, NodeConfig, EdgeConfig } from '@antv/g6-core';
+import { Bound, BoundingRect } from '../Common/boundingRect';
+import { Util } from '../Common/util';
+import { AddressLabelOption, IndexLabelOption, MarkerOption, NodeLabelOption, Style } from '../options';
+import { SVModel } from './SVModel';
+import { SVNode } from './SVNode';
 
 export class SVNodeAppendage extends SVModel {
-    public target: SVNode;
+    public targetId: string;
+	public target: SVNode;
+    public label: string;
 
-    constructor(id: string, type: string, group: string, layout: string, modelType: string, target: SVNode) {
-        super(id, type, group, layout, modelType);
+	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.target = target;
+        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);
+	constructor(id: string, type: string, group: string, layout: string, target: SVNode) {
+		super(id, type, group, layout, 'freedLabel', target, '已释放');
+		this.G6ModelProps = this.generateG6ModelProps();
+	}
 
-        this.target.freedLabel = this;
-        this.G6ModelProps = this.generateG6ModelProps();
-    }
-
-    generateG6ModelProps() {
-        return {
-            id: this.id,
-            x: 0,
-            y: 0,
-            type: 'rect',
-            label: '已释放',
-            labelCfg: {
-                style: {
-                    fill: '#b83b5e',
-                    opacity: 0.6
-                }
-            },
-            size: [0, 0],
-            style: {
-                opacity: 0,
-                stroke: null,
-                fill: 'transparent'
-            }
-        };
-    }
+	generateG6ModelProps() {
+		return {
+			id: this.id,
+			x: 0,
+			y: 0,
+			type: 'rect',
+			label: this.label,
+			labelCfg: {
+				style: {
+					fill: '#b83b5e',
+					opacity: 0.6,
+				},
+			},
+			size: [0, 0],
+			style: {
+				opacity: 0,
+				stroke: null,
+				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, target.sourceId);
+		this.G6ModelProps = this.generateG6ModelProps(options);
+	}
 
-    constructor(id: string, type: string, group: string, layout: string, target: SVNode, options: AddressLabelOption) {
-        super(id, type, group, layout, 'addressLabel', target);
+	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,
+		};
+	}
 
-        this.sourceId = target.sourceId;
-        this.target.addressLabel = this;
-        this.G6ModelProps = this.generateG6ModelProps(options);
-    }
-
-    generateG6ModelProps(options: AddressLabelOption) {
-        return {
-            id: this.id,
-            x: 0,
-            y: 0,
-            type: 'rect',
-            label: this.sourceId,
-            labelCfg: {
-                style: {
-                    fill: '#666',
-                    fontSize: 16,
-                    ...options.style
-                }
-            },
-            size: [0, 0],
-            style: {
-                stroke: null,
-                fill: 'transparent'
-            }
-        };
-    }
+	generateG6ModelProps(options: AddressLabelOption) {
+		return {
+			id: this.id,
+			x: 0,
+			y: 0,
+			type: 'rect',
+			label: this.label,
+			labelCfg: {
+				style: {
+					fill: '#666',
+					fontSize: 16,
+					...options.style,
+				},
+			},
+			size: [0, 0],
+			style: {
+				stroke: null,
+				fill: 'transparent',
+			},
+		};
+	}
 }
 
-
 /**
  * 节点的下标文字
  */
 export class SVIndexLabel extends SVNodeAppendage {
-    private value: string;
+	constructor(
+		id: string,
+		indexName: string,
+		group: string,
+		layout: string,
+		value: string,
+		target: SVNode,
+		options: IndexLabelOption
+	) {
+		super(id, indexName, group, layout, 'indexLabel', target, value);
+		this.G6ModelProps = this.generateG6ModelProps(options) as NodeConfig;
+	}
 
-    constructor(id: string, indexName: string, group: string, layout: string, value: string, target: SVNode, options: IndexLabelOption) {
-        super(id, indexName, group, layout, 'indexLabel', target);
-
-        this.target.indexLabel = this;
-        this.value = value;
-        this.G6ModelProps = this.generateG6ModelProps(options) as NodeConfig;
-    }
-
-    generateG6ModelProps(options: IndexLabelOption): NodeConfig | EdgeConfig {
-        return {
-            id: this.id,
-            x: 0,
-            y: 0,
-            type: 'rect',
-            label: this.value,
-            labelCfg: {
-                style: {
-                    fill: '#bbb',
-                    textAlign: 'center',
-                    textBaseline: 'middle',
-                    fontSize: 14,
-                    fontStyle: 'italic',
-                    ...options.style
-                }
-            },
-            size: [0, 0],
-            style: {
-                stroke: null,
-                fill: 'transparent'
-            }
-        };
-    }
+	generateG6ModelProps(options: IndexLabelOption): NodeConfig | EdgeConfig {
+		return {
+			id: this.id,
+			x: 0,
+			y: 0,
+			type: 'rect',
+			label: this.label,
+			labelCfg: {
+				style: {
+					fill: '#bbb',
+					textAlign: 'center',
+					textBaseline: 'middle',
+					fontSize: 14,
+					fontStyle: 'italic',
+					...options.style,
+				},
+			},
+			size: [0, 0],
+			style: {
+				stroke: null,
+				fill: 'transparent',
+			},
+		};
+	}
 }
 
-
-
 /**
  * 外部指针
  */
 export class SVMarker extends SVNodeAppendage {
-    public label: string | string[];
-    public anchor: number;
+	public anchor: number;
 
-    public shadowG6Item: INode;
-    public G6Item: INode;
+	public shadowG6Item: INode;
+	public G6Item: INode;
 
-    constructor(id: string, type: string, group: string, layout: string, label: string | string[], target: SVNode, options: MarkerOption) {
-        super(id, type, group, layout, 'marker', target);
+	constructor(
+		id: string,
+		type: string,
+		group: string,
+		layout: string,
+		label: string | string[],
+		target: SVNode,
+		options: MarkerOption
+	) {
+		super(id, type, group, layout, 'marker', target, label);
+		this.G6ModelProps = this.generateG6ModelProps(options);
+	}
 
-        this.label = label;
+	generateG6ModelProps(options: MarkerOption): NodeConfig {
+		this.anchor = options.anchor;
 
-        this.target.marker = this;
-        this.G6ModelProps = this.generateG6ModelProps(options);
-    }
+		const type = options.type,
+			defaultSize: [number, number] = type === 'pointer' ? [8, 30] : [12, 12];
 
-    generateG6ModelProps(options: MarkerOption): NodeConfig {
-        this.anchor = options.anchor;
+		return {
+			id: this.id,
+			x: 0,
+			y: 0,
+			rotation: 0,
+			type: options.type || 'marker',
+			size: options.size || defaultSize,
+			anchorPoints: null,
+			label: this.label,
+			style: Util.objectClone<Style>(options.style),
+			labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
+		};
+	}
 
-        const type = options.type,
-            defaultSize: [number, number] = type === 'pointer' ? [8, 30] : [12, 12];
-
-        return {
-            id: this.id,
-            x: 0,
-            y: 0,
-            rotation: 0,
-            type: options.type || 'marker',
-            size: options.size || defaultSize,
-            anchorPoints: null,
-            label: typeof this.label === 'string' ? this.label : this.label.join(', '),
-            style: Util.objectClone<Style>(options.style),
-            labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
-        };
-    }
-
-    public getLabelSizeRadius(): number {
-        const { width, height } = this.shadowG6Item.getContainer().getChildren()[2].getBBox();
-        return Math.max(width, height);
-    }
-};
+	public getLabelSizeRadius(): number {
+		const { width, height } = this.shadowG6Item.getContainer().getChildren()[2].getBBox();
+		return Math.max(width, height);
+	}
+}

src/RegisteredShape/binaryTreeNode.ts

@@ -1,67 +1,111 @@
 import { Util } from '../Common/util';
 
+export default Util.registerShape(
+	'binary-tree-node',
+	{
+		draw(cfg, group) {
+			cfg.size = cfg.size;
 
-export default Util.registerShape('binary-tree-node', {
-    draw(cfg, group) {
-        cfg.size = cfg.size;
+			const width = cfg.size[0],
+				height = cfg.size[1];
 
-        const width = cfg.size[0],
-            height = cfg.size[1];
+			const wrapperRect = group.addShape('rect', {
+				attrs: {
+					x: width / 2,
+					y: height / 2,
+					width: width,
+					height: height,
+					stroke: cfg.style.stroke || '#333',
+					cursor: cfg.style.cursor,
+					fill: cfg.style.backgroundFill || '#eee',
+				},
+				name: 'wrapper',
+			});
 
-        const wrapperRect = group.addShape('rect', {
-            attrs: {
-                x: width / 2,
-                y: height / 2,
-                width: width,
-                height: height,
-                stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor,
-                fill: cfg.style.backgroundFill || '#eee'
-            },
-            name: 'wrapper'
-        });
+			group.addShape('rect', {
+				attrs: {
+					x: width / 4 + width / 2,
+					y: height / 2,
+					width: width / 2,
+					height: height,
+					fill: cfg.style.fill,
+					stroke: cfg.style.stroke || '#333',
+					cursor: cfg.style.cursor,
+				},
+				name: 'mid',
+				draggable: true,
+			});
 
-        group.addShape('rect', {
-            attrs: {
-                x: width / 4 + width / 2,
-                y: height / 2,
-                width: width / 2,
-                height: height,
-                fill: cfg.style.fill,
-                stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
-            },
-            name: 'mid',
-            draggable: true
-        });
+			const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
 
-        if (cfg.label) {
-            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
-            group.addShape('text', {
-                attrs: {
-                    x: width, // 居中
-                    y: height,
-                    textAlign: 'center',
-                    textBaseline: 'middle',
-                    text: cfg.label,
-                    fill: style.fill || '#000',
-                    fontSize: style.fontSize || 16,
-                    cursor: cfg.style.cursor
-                },
-                name: 'text',
-                draggable: true
-            });
-        }
+			if (cfg.label) {
+				group.addShape('text', {
+					attrs: {
+						x: width, // 居中
+						y: height,
+						textAlign: 'center',
+						textBaseline: 'middle',
+						text: cfg.label,
+						fill: style.fill || '#000',
+						fontSize: style.fontSize || 16,
+						cursor: cfg.style.cursor,
+					},
+					name: 'label',
+					draggable: true,
+				});
+			}
 
-        return wrapperRect;
-    },
+			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';
 
-    getAnchorPoints() {
-        return [
-            [0.5, 0],
-            [0.875, 0.5],
-            [0.5, 1],
-            [0.125, 0.5]
-        ];
-    },
-}, 'rect');
+			//节点没有左孩子节点时
+			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,
+				});
+			}
+
+			return wrapperRect;
+		},
+
+		getAnchorPoints() {
+			return [
+				[0.5, 0],
+				[0.875, 0.5],
+				[0.5, 1],
+				[0.125, 0.5],
+			];
+		},
+	},
+	'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,120 +1,106 @@
-import G6 from "@antv/g6";
-import { Util } from "../Common/util";
-
-
-
+import G6 from '@antv/g6';
+import { Util } from '../Common/util';
 
 export default function rotate(shape, angle, transform) {
-    const matrix1 = shape.getMatrix();
-    const newMatrix1 = transform(matrix1, [
-        ['r', angle],
-    ]);
-    shape.setMatrix(newMatrix1);
+	const matrix1 = shape.getMatrix();
+	const newMatrix1 = transform(matrix1, [['r', angle]]);
+	shape.setMatrix(newMatrix1);
 }
 function translate(shape, x, y, transform) {
-    const matrix1 = shape.getMatrix();
-    const newMatrix1 = transform(matrix1, [
-        ['t', x, y],
-    ]);
-    shape.setMatrix(newMatrix1);
+	const matrix1 = shape.getMatrix();
+	const newMatrix1 = transform(matrix1, [['t', x, y]]);
+	shape.setMatrix(newMatrix1);
 }
 function culcuRotate(angle, R) {
-    let offsetX = Math.cos(angle) * R;
-    let offsetY = -Math.sin(angle) * R;
-    console.log(offsetX, offsetY, R);
-    return {
-        offsetX,
-        offsetY,
-    }
+	let offsetX = Math.cos(angle) * R;
+	let offsetY = -Math.sin(angle) * R;
+	console.log(offsetX, offsetY, R);
+	return {
+		offsetX,
+		offsetY,
+	};
 }
 
-
-
 Util.registerShape('clen-queue-pointer', {
-    draw(cfg, group) {
-        let id = cfg.id as string;
+	draw(cfg, group) {
+		let id = cfg.id as string;
 
-        const index = parseInt(id.split('-')[1]);
-        const len = parseInt(id.split('-')[2]);
-        const keyShape = group.addShape('path', {
-            attrs: {
-                x: 0,
-                y: 0,
-                path: this.getPath(cfg),
-                fill: cfg.style.fill,
-                // matrix: cfg.style.matrix
-            },
-            name: 'pointer-path'
-        });
+		const index = parseInt(id.split('-')[1]);
+		const len = parseInt(id.split('-')[2]);
+		const keyShape = group.addShape('path', {
+			attrs: {
+				x: 0,
+				y: 0,
+				path: this.getPath(cfg),
+				fill: cfg.style.fill,
+				// matrix: cfg.style.matrix
+			},
+			name: 'pointer-path',
+		});
 
-        const angle = index *  Math.PI * 2 / len;
-        if (cfg.label) {
-            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+		const angle = (index * Math.PI * 2) / len;
+		if (cfg.label) {
+			const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
 
-            const bgRect = group.addShape('rect', {
-                attrs: {
-                    x: 0, 
-                    y: 0,
-                    width: 0,
-                    height: 0,
-                    text: cfg.label,
-                    fill: null,
-                    radius: 2
-                },
-                name: 'bgRect'
-            });
+			const bgRect = group.addShape('rect', {
+				attrs: {
+					x: 0,
+					y: 0,
+					width: 0,
+					height: 0,
+					text: cfg.label,
+					fill: null,
+					radius: 2,
+				},
+				name: 'bgRect',
+			});
 
-            let label = cfg.label as string;
+			let label = cfg.label as string;
 
-            let pointerText = label.split('-')[0];
-            let y = pointerText=="front"?30:15;
-            const text = group.addShape('text', {
-                attrs: {
-                    x: culcuRotate(Math.PI/2 - angle, y).offsetX, 
-                    y: culcuRotate(Math.PI/2 - angle, y).offsetY,
-                    // x: 0, 
-                    // y: 0,
-                    textAlign: 'center',
-                    textBaseline: 'middle',
-                    text: pointerText,
-                    fill: style.fill || '#999',
-                    fontSize: style.fontSize || 16
-                },
-                name: 'pointer-text-shape'
-            });
+			let pointerText = label.split('-')[0];
+			let y = pointerText == 'front' ? 30 : 15;
+			const text = group.addShape('text', {
+				attrs: {
+					x: culcuRotate(Math.PI / 2 - angle, y).offsetX,
+					y: culcuRotate(Math.PI / 2 - angle, y).offsetY,
+					// x: 0,
+					// y: 0,
+					textAlign: 'center',
+					textBaseline: 'middle',
+					text: pointerText,
+					fill: style.fill || '#999',
+					fontSize: style.fontSize || 16,
+				},
+				name: 'pointer-text-shape',
+			});
 
-            // rotate(text, angle, G6.Util.transform);
-            translate(text, 0, -75, G6.Util.transform);
-        }
-        rotate(keyShape, angle, G6.Util.transform);
-        translate(keyShape, 0, -75, G6.Util.transform);
+			// rotate(text, angle, G6.Util.transform);
+			translate(text, 0, -75, G6.Util.transform);
+		}
+		rotate(keyShape, angle, G6.Util.transform);
+		translate(keyShape, 0, -75, G6.Util.transform);
 
-        return keyShape;
+		return keyShape;
+	},
 
+	getPath(cfg) {
+		let width = 1,
+			height = 38,
+			arrowWidth = width + 4,
+			arrowHeight = height * 0.3;
 
-    },
-    
-    getPath(cfg) {
-        let width = 1,
-            height = 38,
-            arrowWidth = width + 4,
-            arrowHeight = height * 0.3;
-
-        const path = [
-            ['M', 0, 0], 
-            ['L', -width / 2, 0],
-            ['L', -width / 2, -height],
-            ['L', -width / 2 - (arrowWidth / 2), -height],
-            ['L', 0, -height-arrowHeight],
-            ['L', width / 2 + (arrowWidth / 2), -height],
-            ['L', width / 2, -height],
-            ['L', width / 2, 0],
-            ['Z'], 
-        ];
-
-        return path;
-    },
+		const path = [
+			['M', 0, 0],
+			['L', -width / 2, 0],
+			['L', -width / 2, -height],
+			['L', -width / 2 - arrowWidth / 2, -height],
+			['L', 0, -height - arrowHeight],
+			['L', width / 2 + arrowWidth / 2, -height],
+			['L', width / 2, -height],
+			['L', width / 2, 0],
+			['Z'],
+		];
 
+		return path;
+	},
 });
-
-        

src/RegisteredShape/linkListNode.ts

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

src/RegisteredShape/pointer.ts

@@ -1,88 +1,89 @@
 import { Util } from '../Common/util';
 
-
 export default Util.registerShape('pointer', {
-    draw(cfg, group) {
-        const keyShape = group.addShape('path', {
-            attrs: {
-                path: this.getPath(cfg),
-                fill: cfg.style.fill,
-                matrix: cfg.style.matrix
-            },
-            name: 'pointer-path'
-        });
+	draw(cfg, group) {
+		const keyShape = group.addShape('path', {
+			attrs: {
+				path: this.getPath(cfg),
+				fill: cfg.style.fill,
+				matrix: cfg.style.matrix,
+			},
+			name: 'pointer-path',
+		});
 
-        if (cfg.label) {
-            const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {};
+		if (cfg.label) {
+			const labelStyle = (cfg.labelCfg && cfg.labelCfg.style) || {};
 
-            const bgRect = group.addShape('rect', {
-                attrs: {
-                    x: 0, 
-                    y: 0,
-                    text: cfg.label,
-                    fill: null,
-                    radius: 2
-                },
-                name: 'bgRect'
-            });
+			const bgRect = group.addShape('rect', {
+				attrs: {
+					x: 0,
+					y: 0,
+					text: cfg.label,
+					fill: null,
+					radius: 2,
+				},
+				name: 'bgRect',
+			});
 
-            const text = group.addShape('text', {
-                attrs: {
-                    x: 0, 
-                    y: 0,
-                    textAlign: 'center',
-                    textBaseline: 'middle',
-                    text: cfg.label,
-                    fill: labelStyle.fill || '#999',
-                    fontSize: labelStyle.fontSize || 16
-                },
-                name: 'pointer-text-shape'
-            });
+			const text = group.addShape('text', {
+				attrs: {
+					x: 0,
+					y: 0,
+					textAlign: 'center',
+					textBaseline: 'middle',
+					text: cfg.label,
+					fill: labelStyle.fill || '#999',
+					fontSize: labelStyle.fontSize || 16,
+				},
+				name: 'pointer-text-shape',
+			});
 
-            const { width: textWidth, height: textHeight } = text.getBBox();
-            bgRect.attr({ 
-                width: textWidth + 6,
-                height: textHeight + 6
-            });
+			const { width: textWidth, height: textHeight } = text.getBBox();
+			const { width: pointerWidth, height: pointerHeight } = keyShape.getBBox();
+			bgRect.attr({
+				width: textWidth + pointerWidth + 6,
+				height: textHeight + pointerHeight + 6,
+			});
 
-            // 旋转文字
-            const markerEndPosition = cfg.markerEndPosition;
-            if(markerEndPosition) {
-                let textX = markerEndPosition[0],
-                    textY = markerEndPosition[1];
+			// 旋转文字
+			const markerEndPosition = cfg.markerEndPosition;
+			if (markerEndPosition) {
+				let textX = markerEndPosition[0],
+					textY = markerEndPosition[1];
 
-                text.attr({ 
-                    x: textX,
-                    y: textY
-                });
+				text.attr({
+					x: textX,
+					y: textY,
+				});
 
-                bgRect.attr({ 
-                    x: textX - textWidth / 2 - 3,
-                    y: textY - textHeight / 2 - 3
-                });
-            }
-        }
+				bgRect.attr({
+					x: textX - textWidth / 2 - 3,
+					y: textY - textHeight / 2 - 3,
+				});
+			}
+			return bgRect;
+		}
 
-        return keyShape;
-    },
+		return keyShape;
+	},
 
-    getPath(cfg) {
-        let width = cfg.size[0],
-            height = cfg.size[1],
-            arrowWidth = width + 4,
-            arrowHeight = height * 0.3;
+	getPath(cfg) {
+		let width = cfg.size[0],
+			height = cfg.size[1],
+			arrowWidth = width + 4,
+			arrowHeight = height * 0.3;
 
-        const path = [
-            ['M', 0, 0], 
-            ['L', -width / 2 - (arrowWidth / 2), -arrowHeight],
-            ['L', -width / 2, -arrowHeight],
-            ['L', -width / 2, -height],
-            ['L', width / 2, -height],
-            ['L', width / 2, -arrowHeight],
-            ['L', width / 2 + (arrowWidth / 2), -arrowHeight],
-            ['Z'], 
-        ];
+		const path = [
+			['M', 0, 0],
+			['L', -width / 2 - arrowWidth / 2, -arrowHeight],
+			['L', -width / 2, -arrowHeight],
+			['L', -width / 2, -height],
+			['L', width / 2, -height],
+			['L', width / 2, -arrowHeight],
+			['L', width / 2 + arrowWidth / 2, -arrowHeight],
+			['Z'],
+		];
 
-        return path;
-    }
+		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,100 +1,143 @@
 import { Util } from '../Common/util';
 
-
 export default Util.registerShape('tri-tree-node', {
-    draw(cfg, group) {
-        cfg.size = cfg.size;
+	draw(cfg, group) {
+		cfg.size = cfg.size;
 
-        const width = cfg.size[0],
-              height = cfg.size[1];
+		const width = cfg.size[0],
+			height = cfg.size[1];
 
-        const wrapperRect = group.addShape('rect', {
-            attrs: {
-                x: width / 2,
-                y: height / 2,
-                width: width,
-                height: height,
-                stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor,
-                fill: cfg.style.backgroundFill || '#eee'
-            },
-            name: 'wrapper'
-        });
+		const wrapperRect = group.addShape('rect', {
+			attrs: {
+				x: width / 2,
+				y: height / 2,
+				width: width,
+				height: height,
+				stroke: cfg.style.stroke || '#333',
+				cursor: cfg.style.cursor,
+				fill: '#eee',
+			},
+			name: 'wrapper',
+		});
 
-        group.addShape('rect', {
-            attrs: {
-                x: width / 4 + width / 2,
-                y: height / 2,
-                width: width / 2,
-                height: height / 4,
-                fill: '#eee',
-                stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
-            },
-            name: 'top',
-            draggable: true
-        });
+		group.addShape('rect', {
+			attrs: {
+				x: width / 4 + width / 2,
+				y: height / 2,
+				width: width / 2,
+				height: height / 4,
+				fill: '#eee',
+				stroke: cfg.style.stroke || '#333',
+				cursor: cfg.style.cursor,
+			},
+			name: 'top',
+			draggable: true,
+		});
 
-        group.addShape('rect', {
-            attrs: {
-                x: width / 4 + width / 2,
-                y: height / 2 + height / 4,
-                width: width / 2,
-                height: height / 4 * 3,
-                fill: cfg.color || cfg.style.fill,
-                stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
-            },
-            name: 'bottom',
-            draggable: true
-        });
+		group.addShape('rect', {
+			attrs: {
+				x: width / 4 + width / 2,
+				y: height / 2 + height / 4,
+				width: width / 2,
+				height: (height / 4) * 3,
+				fill: cfg.color || cfg.style.fill,
+				stroke: cfg.style.stroke || '#333',
+				cursor: cfg.style.cursor,
+			},
+			name: 'bottom',
+			draggable: true,
+		});
+		const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+		if (cfg.label) {
+			group.addShape('text', {
+				attrs: {
+					x: width, // 居中
+					y: height + height / 8,
+					textAlign: 'center',
+					textBaseline: 'middle',
+					text: cfg.label,
+					fill: style.fill || '#000',
+					fontSize: style.fontSize || 16,
+					cursor: cfg.style.cursor,
+				},
+				name: 'label',
+				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.label) {
-            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
-            group.addShape('text', {
-                attrs: {
-                    x: width, // 居中
-                    y: height + height / 8,
-                    textAlign: 'center',
-                    textBaseline: 'middle',
-                    text: cfg.label,
-                    fill: style.fill || '#000',
-                    fontSize: style.fontSize || 16,
-                    cursor: cfg.style.cursor
-                },
-                name: 'text',
-                draggable: true
-            });
-        }
 
-        if (cfg.root) {
-            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
-            group.addShape('text', {
-                attrs: {
-                    x: width, // 居中
-                    y: height / 4 * 3,
-                    textAlign: 'center',
-                    textBaseline: 'middle',
-                    text: "^",
-                    fill: style.fill || '#000',
-                    fontSize: style.fontSize || 14,
-                    cursor: cfg.style.cursor
-                },
-                name: 'parent',
-                draggable: true
-            });
-        }
+		if (isParentEmpty) {
+			{
+				group.addShape('text', {
+					attrs: {
+						x: width, // 居中
+						y: (height / 4) * 3,
+						textAlign: 'center',
+						textBaseline: 'middle',
+						text: '^',
+						fill: style.fill || '#000',
+						fontSize: style.fontSize || 14,
+						cursor: cfg.style.cursor,
+					},
+					name: 'null-parent',
+					draggable: true,
+				});
+			}
+		}
 
-        return wrapperRect;
-    },
+		//节点没有左孩子节点时
+		if (isLeftEmpty) {
+			group.addShape('text', {
+				attrs: {
+					x: width * (5 / 8),
+					y: height * (8 / 7),
+					textAlign: 'center',
+					textBaseline: 'middle',
+					text: '^',
+					fill: style.fill || '#000',
+					fontSize: 16,
+					cursor: cfg.style.cursor,
+				},
+				name: '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,
+			});
+		}
 
-    getAnchorPoints() {
-        return [
-            [0.125, 0.5],
-            [0.875, 0.5],
-            [0.5, 1],
-            [0.5, 0],
-            [0.5, 0.125]
-        ];
-    },
-}, 'rect');
+		return wrapperRect;
+	},
+
+	getAnchorPoints() {
+		return [
+			[0.125, 0.5],
+			[0.875, 0.5],
+			[0.4, 1],
+			[0.5, 0],
+			[0.5, 0.125],
+			[0.6, 1],
+			[0.5, 1],
+		];
+	},
+});

src/RegisteredShape/twoCellNode.ts

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

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,345 +1,347 @@
-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 engine: Engine;
+	private viewOptions: ViewOptions;
+	private viewContainer: ViewContainer;
+	private leakAreaXoffset: number = 20;
+	private leakClusterXInterval = 25;
 
-    constructor(engine: Engine, viewContainer: ViewContainer) {
-        this.engine = engine;
-        this.viewOptions = this.engine.viewOptions;
-        this.viewContainer = viewContainer;
-    }
+	constructor(engine: Engine, viewContainer: ViewContainer) {
+		this.engine = engine;
+		this.viewOptions = this.engine.viewOptions;
+		this.viewContainer = viewContainer;
+	}
 
+	/**
+	 * 布局前处理
+	 * @param layoutGroupTable
+	 */
+	private preLayoutProcess(layoutGroupTable: LayoutGroupTable) {
+		const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
 
-    /**
-     * 布局前处理
-     * @param layoutGroupTable
-     */
-    private preLayoutProcess(layoutGroupTable: LayoutGroupTable) {
-        const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
+		modelList.forEach(item => {
+			item.preLayout = true;
 
-        modelList.forEach(item => {
-            item.preLayout = true;
+			item.set('rotation', item.get('rotation'));
+			item.set({ x: 0, y: 0 });
+		});
+	}
 
-            item.set('rotation', item.get('rotation'));
-            item.set({ x: 0, y: 0 });
-        });
-    }
+	/**
+	 * 布局后处理
+	 * @param layoutGroupTable
+	 */
+	private postLayoutProcess(layoutGroupTable: LayoutGroupTable) {
+		const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
 
-    /**
-     * 布局后处理
-     * @param layoutGroupTable 
-     */
-    private postLayoutProcess(layoutGroupTable: LayoutGroupTable) {
-        const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
+		modelList.forEach(item => {
+			item.preLayout = false;
 
-        modelList.forEach(item => {
-            item.preLayout = false;
+			// 用两个变量保存节点布局完成后的坐标，因为拖拽节点会改变节点的x，y坐标
+			// 然后当节点移动到泄漏区的时候，不应该保持节点被拖拽后的状态，应该恢复到布局完成后的状态，不然就会很奇怪
+			item.layoutX = item.get('x');
+			item.layoutY = item.get('y');
+		});
+	}
 
-            // 用两个变量保存节点布局完成后的坐标，因为拖拽节点会改变节点的x，y坐标
-            // 然后当节点移动到泄漏区的时候，不应该保持节点被拖拽后的状态，应该恢复到布局完成后的状态，不然就会很奇怪
-            item.layoutX = item.get('x');
-            item.layoutY = item.get('y');
-        });
-    }
+	/**
+	 * 布局外部指针
+	 * @param marker
+	 * @param markerOptions
+	 */
+	private layoutMarker(markers: SVMarker[], markerOptions: { [key: string]: MarkerOption }) {
+		markers.forEach(item => {
+			const options: MarkerOption = markerOptions[item.sourceType],
+				offset = options.offset ?? 8,
+				anchor = item.anchor ?? 0,
+				labelOffset = options.labelOffset ?? 2;
 
-    /**
-     * 布局外部指针
-     * @param marker 
-     * @param markerOptions
-     */
-    private layoutMarker(markers: SVMarker[], markerOptions: { [key: string]: MarkerOption }) {
-        markers.forEach(item => {
-            const options: MarkerOption = markerOptions[item.sourceType],
-                offset = options.offset ?? 8,
-                anchor = item.anchor ?? 0,
-                labelOffset = options.labelOffset ?? 2;
+			let target = item.target,
+				targetBound: BoundingRect = target.getBound(),
+				g6AnchorPosition = (<INode>item.target.shadowG6Item).getAnchorPoints()[anchor] as IPoint,
+				center: [number, number] = [
+					targetBound.x + targetBound.width / 2,
+					targetBound.y + targetBound.height / 2,
+				],
+				markerPosition: [number, number],
+				markerEndPosition: [number, number];
 
-            let target = item.target,
-                targetBound: BoundingRect = target.getBound(),
-                g6AnchorPosition = item.target.shadowG6Item.getAnchorPoints()[anchor] as IPoint,
-                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 anchorPosition: [number, number] = [g6AnchorPosition.x, g6AnchorPosition.y];
+			let anchorVector = Vector.subtract(anchorPosition, center),
+				angle = 0,
+				len = Vector.length(anchorVector) + offset;
 
-            let anchorVector = Vector.subtract(anchorPosition, center),
-                angle = 0, len = Vector.length(anchorVector) + offset;
+			if (anchorVector[0] === 0) {
+				angle = anchorVector[1] > 0 ? -Math.PI : 0;
+			} else {
+				angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
+			}
 
-            if (anchorVector[0] === 0) {
-                angle = anchorVector[1] > 0 ? -Math.PI : 0;
-            }
-            else {
-                angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
-            }
+			const markerHeight = item.get('size')[1],
+				labelRadius = item.getLabelSizeRadius() / 2;
 
-            const markerHeight = item.get('size')[1],
-                labelRadius = item.getLabelSizeRadius() / 2;
+			anchorVector = Vector.normalize(anchorVector);
+			markerPosition = Vector.location(center, anchorVector, len);
+			markerEndPosition = Vector.location(center, anchorVector, markerHeight + len + labelRadius + labelOffset);
+			markerEndPosition = Vector.subtract(markerEndPosition, markerPosition);
 
-            anchorVector = Vector.normalize(anchorVector);
-            markerPosition = Vector.location(center, anchorVector, len);
-            markerEndPosition = Vector.location(center, anchorVector, markerHeight + len + labelRadius + labelOffset);
-            markerEndPosition = Vector.subtract(markerEndPosition, markerPosition);
+			item.set({
+				x: markerPosition[0],
+				y: markerPosition[1],
+				rotation: angle,
+				markerEndPosition,
+			});
+		});
+	}
 
-            item.set({
-                x: markerPosition[0],
-                y: markerPosition[1],
-                rotation: angle,
-                markerEndPosition
-            });
-        });
-    }
+	/**
+	 * 布局节点的‘已释放’文本
+	 * @param freedLabels
+	 */
+	private layoutFreedLabel(freedLabels: SVFreedLabel[]) {
+		freedLabels.forEach(item => {
+			const freedNodeBound = item.target.getBound();
 
-    /**
-     * 布局节点的‘已释放’文本
-     * @param freedLabels 
-     */
-    private layoutFreedLabel(freedLabels: SVFreedLabel[]) {
-        freedLabels.forEach(item => {
-            const freedNodeBound = item.target.getBound();
+			item.set({
+				x: freedNodeBound.x + freedNodeBound.width / 2,
+				y: freedNodeBound.y + freedNodeBound.height * 1.5,
+				size: [freedNodeBound.width, 0],
+			});
+		});
+	}
 
-            item.set({
-                x: freedNodeBound.x + freedNodeBound.width / 2,
-                y: freedNodeBound.y + freedNodeBound.height * 1.5,
-                size: [freedNodeBound.width, 0]
-            });
-        });
-    }
+	/**
+	 *
+	 * @param indexLabels
+	 * @param indexLabelOptions
+	 */
+	private layoutIndexLabel(indexLabels: SVIndexLabel[], indexLabelOptions: { [key: string]: IndexLabelOption }) {
+		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,
+				};
+			},
+			right: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
+				return {
+					x: nodeBound.x + nodeBound.width + offset,
+					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,
+				};
+			},
+			left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
+				return {
+					x: nodeBound.x - labelBound.width / 2- offset,
+					y: nodeBound.y + nodeBound.height / 2,
+				};
+			},
+		};
 
-    /**
-     * 
-     * @param indexLabels 
-     * @param indexLabelOptions 
-     */
-    private layoutIndexLabel(indexLabels: SVIndexLabel[], indexLabelOptions: { [key: string]: IndexLabelOption }) {
-        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
-                };
-            },
-            right: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
-                return {
-                    x: nodeBound.x + nodeBound.width + offset,
-                    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
-                };
-            },
-            left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
-                return {
-                    x: nodeBound.x - labelBound.width - offset,
-                    y: nodeBound.y + nodeBound.height / 2
-                };
-            }
-        };
+		indexLabels.forEach(item => {
+			const options: IndexLabelOption = indexLabelOptions[item.sourceType],
+				nodeBound = item.target.getBound(),
+				// labelBound = item.getBound(),
+				labelBound = item.shadowG6Item.getContainer().getChildren()[1].getBBox(),
+				offset = options.offset ?? 20,
+				position = options.position ?? 'bottom';
 
-        indexLabels.forEach(item => {
-            const options: IndexLabelOption = indexLabelOptions[item.sourceType],
-                nodeBound = item.target.getBound(),
-                labelBound = item.getBound(),
-                offset = options.offset ?? 20,
-                position = options.position ?? 'bottom';
+			const pos = indexLabelPositionMap[position](nodeBound, labelBound, offset);
+			item.set(pos);
+		});
+	}
 
-            const pos = indexLabelPositionMap[position](nodeBound, labelBound, offset);
-            item.set(pos);
-        });
-    }
+	/**
+	 * 布局泄漏区节点上面的address label
+	 * @param leakAddress
+	 */
+	private layoutAddressLabel(leakAddress: SVAddressLabel[], addressLabelOption: AddressLabelOption) {
+		const offset = addressLabelOption.offset || 16;
 
-    /**
-     * 布局泄漏区节点上面的address label
-     * @param leakAddress
-     */
-    private layoutAddressLabel(leakAddress: SVAddressLabel[], addressLabelOption: AddressLabelOption) {
-        const offset = addressLabelOption.offset || 16;
+		leakAddress.forEach(item => {
+			const nodeBound = item.target.getBound();
 
-        leakAddress.forEach(item => {
-            const nodeBound = item.target.getBound();
+			item.set({
+				x: nodeBound.x + nodeBound.width / 2,
+				y: nodeBound.y - offset,
+			});
+		});
+	}
 
-            item.set({
-                x: nodeBound.x + nodeBound.width / 2,
-                y: nodeBound.y - offset
-            });
-        });
-    }
+	/**
+	 * 对每个组内部的model进行布局
+	 * @param layoutGroupTable
+	 */
+	private layoutModels(layoutGroupTable: LayoutGroupTable): Group[] {
+		const modelGroupList: Group[] = [];
 
+		layoutGroupTable.forEach(group => {
+			const modelList: SVModel[] = group.modelList,
+				modelGroup: Group = new Group();
 
-    /**
-     * 对每个组内部的model进行布局
-     * @param layoutGroupTable
-     */
-    private layoutModels(layoutGroupTable: LayoutGroupTable): Group[] {
-        const modelGroupList: Group[] = [];
+			const layoutOptions: LayoutOptions = group.options.layout;
 
-        layoutGroupTable.forEach(group => {
-            const modelList: SVModel[] = group.modelList,
-                modelGroup: Group = new Group();
+			modelList.forEach(item => {
+				modelGroup.add(item);
+			});
 
-            const layoutOptions: LayoutOptions = group.options.layout;
+			group.layoutCreator.layout(group.node, layoutOptions); // 布局节点
+			modelGroupList.push(modelGroup);
+		});
 
-            modelList.forEach(item => {
-                modelGroup.add(item);
-            });
+		layoutGroupTable.forEach(group => {
+			const markerOptions = group.options.marker || {},
+				indexLabelOptions = group.options.indexLabel || {},
+				addressLabelOption = group.options.addressLabel || {};
 
-            group.layoutCreator.layout(group.node, layoutOptions);  // 布局节点
-            modelGroupList.push(modelGroup);
-        });
+			const indexLabel = group.appendage.filter(item => item instanceof SVIndexLabel) as SVIndexLabel[],
+				freedLabel = group.appendage.filter(item => item instanceof SVFreedLabel) as SVFreedLabel[],
+				addressLabel = group.appendage.filter(item => item instanceof SVAddressLabel) as SVAddressLabel[],
+				marker = group.appendage.filter(item => item instanceof SVMarker) as SVMarker[];
 
-        layoutGroupTable.forEach(group => {
-            const markerOptions = group.options.marker || {},
-                indexLabelOptions = group.options.indexLabel || {},
-                addressLabelOption = group.options.addressLabel || {};
+			this.layoutIndexLabel(indexLabel, indexLabelOptions);
+			this.layoutFreedLabel(freedLabel);
+			this.layoutAddressLabel(addressLabel, addressLabelOption);
+			this.layoutMarker(marker, markerOptions); // 布局外部指针
+		});
 
-            this.layoutIndexLabel(group.indexLabel, indexLabelOptions);
-            this.layoutFreedLabel(group.freedLabel);
-            this.layoutAddressLabel(group.addressLabel, addressLabelOption);
-            this.layoutMarker(group.marker, markerOptions);  // 布局外部指针
-        });
+		return modelGroupList;
+	}
 
-        return modelGroupList;
-    }
+	/**
+	 * 对泄漏区进行布局
+	 * @param accumulateLeakModels
+	 * // todo: 部分元素被抽离后的泄漏区
+	 */
+	private layoutLeakArea(accumulateLeakModels: SVModel[]) {
+		const containerHeight = this.viewContainer.getG6Instance().getHeight(),
+			leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
+			leakAreaY = containerHeight - leakAreaHeight;
 
-    /**
-     * 对泄漏区进行布局
-     * @param leakModels 
-     * @param accumulateLeakModels
-     */
-    private layoutLeakModels(leakModels: SVModel[], accumulateLeakModels: SVModel[]) {
-        const group: Group = new Group(),
-            containerHeight = this.viewContainer.getG6Instance().getHeight(),
-            leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
-            leakAreaY = containerHeight - leakAreaHeight,
-            xOffset = 60;
+		let prevBound: BoundingRect;
 
-        let prevBound: BoundingRect;
+		// 避免在泄漏前拖拽节点导致的位置变化，先把节点位置重置为布局后的标准位置
+		accumulateLeakModels.forEach(item => {
+			item.set({
+				x: item.layoutX,
+				y: item.layoutY,
+			});
+		});
 
-        // 避免在泄漏前拖拽节点导致的位置变化，先把节点位置重置为布局后的标准位置
-        leakModels.forEach(item => {
-            item.set({
-                x: item.layoutX,
-                y: item.layoutY
-            });
-        });
+		const clusters = ModelConstructor.getClusters(accumulateLeakModels);
 
-        const globalLeakGroupBound: BoundingRect = accumulateLeakModels.length ?
-            Bound.union(...accumulateLeakModels.map(item => item.getBound())) :
-            { x: 0, y: leakAreaY, width: 0, height: 0 };
+        // 每一个簇从左往右布局就完事了，比之前的方法简单稳定很多
+		clusters.forEach(item => {
+			const bound = item.getBound(),
+				x = prevBound ? prevBound.x + prevBound.width + this.leakClusterXInterval : this.leakAreaXoffset,
+				dx = x - bound.x,
+				dy = leakAreaY - bound.y;
 
-        const layoutGroups = Util.groupBy(leakModels, 'group');
-        Object.keys(layoutGroups).forEach(key => {
-            group.add(...layoutGroups[key]);
+			item.translate(dx, dy);
+			Bound.translate(bound, dx, dy);
+			prevBound = bound;
+		});
+	}
 
-            const currentBound: BoundingRect = group.getBound(),
-                prevBoundEnd = prevBound? prevBound.x + prevBound.width: 0,
-                { x: groupX, y: groupY } = currentBound,
-                dx = globalLeakGroupBound.x + globalLeakGroupBound.width + prevBoundEnd + xOffset - groupX,
-                dy = globalLeakGroupBound.y - groupY;
+	/**
+	 * 对所有组进行相互布局
+	 * @param modelGroupTable
+	 */
+	private layoutGroups(modelGroupList: Group[]): Group {
+		let wrapperGroup: Group = new Group(),
+			group: Group,
+			prevBound: BoundingRect,
+			bound: BoundingRect,
+			boundList: BoundingRect[] = [],
+			dx = 0;
 
-            group.translate(dx, dy);
-            group.clear();
-            Bound.translate(currentBound, dx, dy);
+		// 左往右布局
+		for (let i = 0; i < modelGroupList.length; i++) {
+			group = modelGroupList[i];
+			bound = group.getPaddingBound(this.viewOptions.groupPadding);
 
-            prevBound = currentBound;
-        });
-    }
+			if (prevBound) {
+				dx = prevBound.x + prevBound.width - bound.x;
+			} else {
+				dx = bound.x;
+			}
 
-    /**
-     * 对所有组进行相互布局
-     * @param modelGroupTable 
-     */
-    private layoutGroups(modelGroupList: Group[]): Group {
-        let wrapperGroup: Group = new Group(),
-            group: Group,
-            prevBound: BoundingRect,
-            bound: BoundingRect,
-            boundList: BoundingRect[] = [],
-            dx = 0;
+			group.translate(dx, 0);
+			Bound.translate(bound, dx, 0);
+			boundList.push(bound);
+			wrapperGroup.add(group);
+			prevBound = bound;
+		}
 
-        // 左往右布局
-        for (let i = 0; i < modelGroupList.length; i++) {
-            group = modelGroupList[i];
-            bound = group.getPaddingBound(this.viewOptions.groupPadding);
+		return wrapperGroup;
+	}
 
-            if (prevBound) {
-                dx = prevBound.x + prevBound.width - bound.x;
-            }
-            else {
-                dx = bound.x;
-            }
+	/**
+	 * 将视图调整至画布中心
+	 * @param models
+	 * @param leakAreaHeight
+	 */
+	private fitCenter(group: Group) {
+		let width = this.viewContainer.getG6Instance().getWidth(),
+			height = this.viewContainer.getG6Instance().getHeight(),
+			viewBound: BoundingRect = group.getBound(),
+			leakAreaHeight = this.engine.viewOptions.leakAreaHeight;
 
-            group.translate(dx, 0);
-            Bound.translate(bound, dx, 0);
-            boundList.push(bound);
-            wrapperGroup.add(group);
-            prevBound = bound;
-        }
+		const centerX = width / 2,
+			centerY = height / 2,
+			boundCenterX = viewBound.x + viewBound.width / 2;
 
-        return wrapperGroup;
-    }
+		let dx = centerX - boundCenterX,
+			dy = 0;
 
+		if (this.viewContainer.hasLeak) {
+			const boundBottomY = viewBound.y + viewBound.height;
+			dy = height - leakAreaHeight - 130 - boundBottomY;
+		} else {
+			const boundCenterY = viewBound.y + viewBound.height / 2;
+			dy = centerY - boundCenterY;
+		}
 
-    /**
-     * 将视图调整至画布中心
-     * @param models
-     * @param leakAreaHeight
-     */
-    private fitCenter(group: Group) {
-        let width = this.viewContainer.getG6Instance().getWidth(),
-            height = this.viewContainer.getG6Instance().getHeight(),
-            leakAreaHeight = this.engine.viewOptions.leakAreaHeight;
+		group.translate(dx, dy);
+	}
 
-        if (this.viewContainer.hasLeak) {
-            height = height - leakAreaHeight;
-        }
+	/**
+	 * 布局
+	 * @param layoutGroupTable
+	 * @param accumulateLeakModels
+	 */
+	public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[]) {
+		this.preLayoutProcess(layoutGroupTable);
 
-        const viewBound: BoundingRect = group.getBound(),
-            centerX = width / 2, centerY = height / 2,
-            boundCenterX = viewBound.x + viewBound.width / 2,
-            boundCenterY = viewBound.y + viewBound.height / 2,
-            dx = centerX - boundCenterX,
-            dy = centerY - boundCenterY;
+		const modelGroupList: Group[] = this.layoutModels(layoutGroupTable);
+		const generalGroup: Group = this.layoutGroups(modelGroupList);
 
-        group.translate(dx, dy);
-    }
+		this.layoutLeakArea(accumulateLeakModels);
 
-
-
-    /**
-     * 布局
-     * @param layoutGroupTable 
-     * @param leakModels
-     * @param hasLeak
-     * @param needFitCenter
-     */
-    public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[], leakModels: SVModel[]) {
-        this.preLayoutProcess(layoutGroupTable);
-
-        const modelGroupList: Group[] = this.layoutModels(layoutGroupTable);
-        const generalGroup: Group = this.layoutGroups(modelGroupList);
-
-        if (leakModels.length) {
-            this.layoutLeakModels(leakModels, accumulateLeakModels);
-        }
-
-        this.fitCenter(generalGroup);
-        this.postLayoutProcess(layoutGroupTable);
-    }
+		this.fitCenter(generalGroup);
+		this.postLayoutProcess(layoutGroupTable);
+	}
 }

src/View/reconcile.ts

@@ -1,430 +1,442 @@
-import { EventBus } from "../Common/eventBus";
-import { Util } from "../Common/util";
-import { Engine } from "../engine";
-import { LayoutGroupTable } from "../Model/modelConstructor";
-import { SVLink } from "../Model/SVLink";
-import { SVModel } from "../Model/SVModel";
-import { SVNode } from "../Model/SVNode";
-import { SVAddressLabel, SVMarker, SVNodeAppendage } from "../Model/SVNodeAppendage";
-import { Animations } from "./animation";
-import { Renderer } from "./renderer";
-
+import { EventBus } from '../Common/eventBus';
+import { Util } from '../Common/util';
+import { Engine } from '../engine';
+import { LayoutGroupTable } from '../Model/modelConstructor';
+import { SVLink } from '../Model/SVLink';
+import { SVModel } from '../Model/SVModel';
+import { SVNode } from '../Model/SVNode';
+import { SVAddressLabel, SVMarker, SVNodeAppendage } from '../Model/SVNodeAppendage';
+import { handleUpdate } from '../sources';
+import { Animations } from './animation';
+import { Renderer } from './renderer';
 
 export interface DiffResult {
-    CONTINUOUS: SVModel[];
-    APPEND: SVModel[];
-    REMOVE: SVModel[];
-    FREED: SVNode[];
-    LEAKED: SVModel[];
-    UPDATE: SVModel[];
-    ACCUMULATE_LEAK: SVModel[];
+	CONTINUOUS: SVModel[];
+	APPEND: SVModel[];
+	REMOVE: SVModel[];
+	FREED: SVNode[];
+	LEAKED: SVModel[];
+	UPDATE: SVModel[];
 }
 
-
-
 export class Reconcile {
-
-    private engine: Engine;
-    private renderer: Renderer;
-    private isFirstPatch: boolean;
-
-    constructor(engine: Engine, renderer: Renderer) {
-        this.engine = engine;
-        this.renderer = renderer;
-        this.isFirstPatch = true;
-    }
-
-    /**
-     * 获取上一次渲染存在的，这一次渲染也存在的models
-     * @param prevModelList 
-     * @param modelList 
-     */
-    private getContinuousModels(prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
-        const continuousModels = modelList.filter(item => prevModelList.find(prevModel => item.id === prevModel.id));
-        return continuousModels;
-    }
-
-    /**
-     * 获取新增的节点，这些节点有可能来自泄漏区（上一步的情况）
-     * @param prevModelList 
-     * @param modelList 
-     * @param accumulateLeakModels 
-     * @returns 
-     */
-    private getAppendModels(prevModelList: SVModel[], modelList: SVModel[], accumulateLeakModels: SVModel[]): SVModel[] {
-        const appendModels = modelList.filter(item => !prevModelList.find(model => model.id === item.id));
-
-        appendModels.forEach(item => {
-            let removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id);
-
-            if (removeIndex > -1) {
-                accumulateLeakModels.splice(removeIndex, 1);
-            }
-        });
-
-        return appendModels;
-    }
-
-    /**
-     * 获取被泄露的节点
-     * @param layoutGroupTable 
-     * @param prevModelList 
-     * @param modelList 
-     * @returns 
-     */
-    private getLeakModels(layoutGroupTable: LayoutGroupTable, prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
-        let potentialLeakModels: SVModel[] = prevModelList.filter(item =>
-            !modelList.find(model => model.id === item.id) && !item.freed
-        );
-        const leakModels: SVModel[] = [];
-
-        // 先把节点拿出来
-        const potentialLeakNodes = potentialLeakModels.filter(item => item.isNode()) as SVNode[],
-              groups = Util.groupBy<SVNode>(potentialLeakNodes, 'group');
-
-        // 再把非节点的model拿出来
-        potentialLeakModels = potentialLeakModels.filter(item => item.isNode() === false);
-        
-        Object.keys(groups).forEach(key => {
-            const leakRule = layoutGroupTable.get(key).layoutCreator.defineLeakRule;
-            if(leakRule && typeof leakRule === 'function') {
-                potentialLeakModels.push(...leakRule(groups[key]));
-            }
-        });
-
-        potentialLeakModels.forEach(item => {
-            if (item instanceof SVNode) {
-                item.leaked = true;
-                leakModels.push(item);
-
-                item.appendages.forEach(appendage => {
-                    appendage.leaked = true;
-                    leakModels.push(appendage);
-                });
-            }
-        });
-
-        potentialLeakModels.forEach(item => {
-            if (item instanceof SVLink && item.node.leaked !== false && item.target.leaked !== false) {
-                item.leaked = true;
-                leakModels.push(item);
-            }
-        });
-
-        leakModels.forEach(item => {
-            // 不能用上次的G6item了，不然布局的时候会没有动画
-            item.G6Item = null;
-        });
-
-        return leakModels;
-    }
-
-    /**
-     * 找出需要移除的节点
-     * @param prevModelList 
-     * @param modelList 
-     */
-    private getRemoveModels(prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
-        let removedModels: SVModel[] = [];
-
-        for (let i = 0; i < prevModelList.length; i++) {
-            let prevModel = prevModelList[i],
-                target = modelList.find(item => item.id === prevModel.id);
-
-            if (target === undefined && !prevModel.leaked) {
-                removedModels.push(prevModel);
-            }
-        }
-
-        return removedModels;
-    }
-
-
-    /**
-     * 找出重新指向的外部指针
-     * @param prevModelList 
-     * @param modelList 
-     * @returns 
-     */
-    private getReTargetMarkers(prevModelList: SVModel[], modelList: SVModel[]): SVMarker[] {
-        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 prevItem.id === item.id && prevItem.target.id !== item.target.id
-        }));
-    }
-
-    /**
-     * 找出前后 label 发生变化的 model
-     * @param prevModelList 
-     * @param modelList 
-     * @returns 
-     */
-    private getLabelChangeModels(prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
-        let labelChangeModels: SVModel[] = [];
-
-        modelList.forEach(item => {
-            const prevItem = prevModelList.find(prevItem => prevItem.id === item.id);
-
-            if (prevItem === undefined) {
-                return;
-            }
-
-            const prevLabel = prevItem.get('label'),
-                label = item.get('label');
-
-            if (prevLabel !== label) {
-                labelChangeModels.push(item);
-            }
-        });
-
-        return labelChangeModels;
-    }
-
-    /**
-     * 获取被 free 的节点
-     * @param prevModelList
-     * @param modelList 
-     * @returns 
-     */
-    private getFreedModels(prevModelList: SVModel[], modelList: SVModel[]): SVNode[] {
-        const freedNodes = modelList.filter(item => item instanceof SVNode && item.freed) as SVNode[];
-
-        freedNodes.forEach(item => {
-            const prev = prevModelList.find(prevModel => item.id === prevModel.id);
-
-            if (prev) {
-                item.set('label', prev.get('label'));
-            }
-        });
-
-        return freedNodes;
-    }
-
-    // ------------------------------------------------------------------------------------------------
-
-    /**
-     * 处理不变的models
-     * @param continuousModels 
-     */
-    private handleContinuousModels(continuousModels: SVModel[]) {
-        for (let i = 0; i < continuousModels.length; i++) {
-            let model = continuousModels[i];
-
-            if (model instanceof SVNode) {
-                const group = model.G6Item.getContainer();
-                group.attr({ opacity: 1 });
-            }
-        }
-    }
-
-    /**
-     * 处理新增的 models
-     * @param appendData 
-     */
-    private handleAppendModels(appendModels: SVModel[]) {
-        let { duration, timingFunction } = this.engine.animationOptions;
-
-        appendModels.forEach(item => {
-            if (item instanceof SVNodeAppendage) {
-                // 先不显示泄漏区节点上面的地址文本
-                if (item instanceof SVAddressLabel) {
-                    // 先将透明度改为0，隐藏掉
-                    const AddressLabelG6Group = item.G6Item.getContainer();
-                    AddressLabelG6Group.attr({ opacity: 0 });
-                }
-                else {
-                    Animations.FADE_IN(item.G6Item, {
-                        duration,
-                        timingFunction
-                    });
-                }
-            }
-            else {
-                Animations.APPEND(item.G6Item, {
-                    duration,
-                    timingFunction
-                });
-            }
-        });
-    }
-
-    /**
-     * 处理被移除 models
-     * @param removeData 
-     */
-    private handleRemoveModels(removeModels: SVModel[]) {
-        let { duration, timingFunction } = this.engine.animationOptions;
-
-        removeModels.forEach(item => {
-            Animations.REMOVE(item.G6Item, {
-                duration,
-                timingFunction,
-                callback: () => {
-                    this.renderer.removeModel(item);
-                }
-            });
-        });
-    }
-
-    /**
-     * 处理泄漏区 models
-     * @param leakModels 
-     */
-    private handleLeakModels(leakModels: SVModel[]) {
-        let { duration, timingFunction } = this.engine.animationOptions;
-
-        leakModels.forEach(item => {
-            if (item instanceof SVAddressLabel) {
-                Animations.FADE_IN(item.G6Item, {
-                    duration,
-                    timingFunction
-                });
-            }
-
-            item.G6Item.enableCapture(false);
-        });
-
-        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 
-     */
-    private handleFreedModels(freedModes: SVNode[]) {
-        const { duration, timingFunction } = this.engine.animationOptions,
-            alpha = 0.4;
-
-        freedModes.forEach(item => {
-            const nodeGroup = item.G6Item.getContainer();
-
-            item.set('style', { fill: '#ccc' });
-            nodeGroup.attr({ opacity: alpha });
-
-            if (item.marker) {
-                const markerGroup = item.marker.G6Item.getContainer();
-                item.marker.set('style', { fill: '#ccc' });
-                markerGroup.attr({ opacity: alpha + 0.5 });
-            }
-
-            item.freedLabel.G6Item.toFront();
-            Animations.FADE_IN(item.freedLabel.G6Item, { duration, timingFunction });
-        });
-
-        EventBus.emit('onFreed', freedModes);
-    }
-
-    /**
-     * 处理发生变化的 models
-     * @param models 
-     */
-    private handleChangeModels(models: SVModel[]) {
-        const changeHighlightColor: string = this.engine.viewOptions.updateHighlight;
-
-        if (!changeHighlightColor || typeof changeHighlightColor !== 'string') {
-            return;
-        }
-
-        models.forEach(item => {
-            if (item.generalStyle === undefined) {
-                item.generalStyle = Util.objectClone(item.G6ModelProps.style);
-            }
-
-            if (item instanceof SVLink) {
-                item.set('style', {
-                    stroke: changeHighlightColor
-                });
-            }
-            else {
-                item.set('style', {
-                    fill: changeHighlightColor
-                });
-            }
-        });
-    }
-
-
-    /**
-     * 进行diff
-     * @param layoutGroupTable 
-     * @param prevModelList 
-     * @param modelList 
-     * @param accumulateLeakModels 
-     * @returns 
-     */
-    public diff(layoutGroupTable: LayoutGroupTable, prevModelList: SVModel[], modelList: SVModel[], accumulateLeakModels: SVModel[]): DiffResult {
-        const continuousModels: SVModel[] = this.getContinuousModels(prevModelList, modelList);
-        const leakModels: SVModel[] = this.getLeakModels(layoutGroupTable, prevModelList, modelList);
-        const appendModels: SVModel[] = this.getAppendModels(prevModelList, modelList, accumulateLeakModels);
-        const removeModels: SVModel[] = this.getRemoveModels(prevModelList, modelList);
-        const updateModels: SVModel[] = [
-            ...this.getReTargetMarkers(prevModelList, modelList),
-            ...this.getLabelChangeModels(prevModelList, modelList),
-            ...appendModels,
-            ...leakModels
-        ];
-        const freedModels: SVNode[] = this.getFreedModels(prevModelList, modelList);
-
-        return {
-            CONTINUOUS: continuousModels,
-            APPEND: appendModels,
-            REMOVE: removeModels,
-            FREED: freedModels,
-            LEAKED: leakModels,
-            UPDATE: updateModels,
-            ACCUMULATE_LEAK: [...accumulateLeakModels]
-        };
-    }
-
-
-    /**
-     * 执行调和操作
-     * @param diffResult 
-     * @param isFirstRender
-     */
-    public patch(diffResult: DiffResult) {
-        const {
-            APPEND,
-            REMOVE,
-            FREED,
-            LEAKED,
-            UPDATE,
-            CONTINUOUS,
-            ACCUMULATE_LEAK
-        } = diffResult;
-
-        this.handleAccumulateLeakModels(ACCUMULATE_LEAK);
-
-        // 第一次渲染的时候不高亮变化的元素
-        if (this.isFirstPatch === false) {
-            this.handleChangeModels(UPDATE);
-        }
-
-        this.handleContinuousModels(CONTINUOUS);
-        this.handleFreedModels(FREED);
-        this.handleAppendModels(APPEND);
-        this.handleLeakModels(LEAKED);
-        this.handleRemoveModels(REMOVE);
-
-        if (this.isFirstPatch) {
-            this.isFirstPatch = false;
-        }
-    }
-
-    public destroy() { }
+	private engine: Engine;
+	private renderer: Renderer;
+	private isFirstPatch: boolean;
+
+	constructor(engine: Engine, renderer: Renderer) {
+		this.engine = engine;
+		this.renderer = renderer;
+		this.isFirstPatch = true;
+	}
+
+	/**
+	 * 获取上一次渲染存在的，这一次渲染也存在的models
+	 * @param prevModelList
+	 * @param modelList
+	 */
+	private getContinuousModels(prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
+		const continuousModels = modelList.filter(item => prevModelList.find(prevModel => item.id === prevModel.id));
+		return continuousModels;
+	}
+
+	/**
+	 * 获取新增的节点，这些节点有可能来自泄漏区（上一步的情况）
+	 * @param prevModelList
+	 * @param modelList
+	 * @param accumulateLeakModels
+	 * @returns
+	 */
+	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 => {
+			const removeIndex = accumulateLeakModels.findIndex(leakModel => item.id === leakModel.id),
+				svModel = accumulateLeakModels[removeIndex];
+
+			if (removeIndex > -1) {
+				svModel.leaked = false;
+				accumulateLeakModels.splice(removeIndex, 1);
+			}
+		});
+
+		return appendModels;
+	}
+
+	/**
+	 * 获取被泄露的节点
+	 * @param layoutGroupTable
+	 * @param prevModelList
+	 * @param modelList
+	 * @returns
+	 */
+	private getLeakModels(
+		layoutGroupTable: LayoutGroupTable,
+		prevModelList: SVModel[],
+		modelList: SVModel[]
+	): SVModel[] {
+		let potentialLeakModels: SVModel[] = prevModelList.filter(
+			item => !modelList.find(model => model.id === item.id) && !item.freed
+		);
+		const leakModels: SVModel[] = [];
+
+		// 先把节点拿出来
+		const potentialLeakNodes = potentialLeakModels.filter(item => item.isNode()) as SVNode[],
+			groups = Util.groupBy<SVNode>(potentialLeakNodes, 'group');
+
+		// 再把非节点的model拿出来
+		potentialLeakModels = potentialLeakModels.filter(item => item.isNode() === false);
+
+		Object.keys(groups).forEach(key => {
+			const leakRule = layoutGroupTable.get(key).layoutCreator.defineLeakRule;
+			if (leakRule && typeof leakRule === 'function') {
+				potentialLeakModels.push(...leakRule(groups[key]));
+			}
+		});
+
+		potentialLeakModels.forEach(item => {
+			if (item instanceof SVNode) {
+				item.leaked = true;
+				leakModels.push(item);
+
+				item.getAppendagesList().forEach(appendage => {
+					// 外部指针先不加入泄漏区（这个需要讨论一下，我觉得不应该）
+					if (appendage instanceof SVMarker) {
+						return;
+					}
+
+					appendage.leaked = true;
+					leakModels.push(appendage);
+				});
+			}
+		});
+
+		potentialLeakModels.forEach(item => {
+			if (item instanceof SVLink && item.node.leaked !== false && item.target.leaked !== false) {
+				item.leaked = true;
+				leakModels.push(item);
+			}
+		});
+
+		return leakModels;
+	}
+
+	/**
+	 * 找出需要移除的节点
+	 * @param prevModelList
+	 * @param modelList
+	 */
+	private getRemoveModels(
+		prevModelList: SVModel[],
+		modelList: SVModel[],
+		accumulateLeakModels: SVModel[]
+	): SVModel[] {
+		let removedModels: SVModel[] = [];
+
+		for (let i = 0; i < prevModelList.length; i++) {
+			let prevModel = prevModelList[i],
+				target = modelList.find(item => item.id === prevModel.id);
+
+			if (target === undefined && !prevModel.leaked) {
+				removedModels.push(prevModel);
+			}
+		}
+
+		// 假如某个节点从泄漏区移回可视化区域，那么与原来泄漏结构的连线应该消失掉
+		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;
+	}
+
+	/**
+	 * 找出重新指向的外部指针
+	 * @param prevModelList
+	 * @param modelList
+	 * @returns
+	 */
+	private getReTargetMarkers(prevModelList: SVModel[], modelList: SVModel[]): SVMarker[] {
+		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 prevItem.id === item.id && prevItem.target.id !== item.target.id;
+			})
+		);
+	}
+
+	/**
+	 * 找出前后 label 发生变化的 model
+	 * @param prevModelList
+	 * @param modelList
+	 * @returns
+	 */
+	private getLabelChangeModels(prevModelList: SVModel[], modelList: SVModel[]): SVModel[] {
+		let labelChangeModels: SVModel[] = [];
+
+		modelList.forEach(item => {
+			const prevItem = prevModelList.find(prevItem => prevItem.id === item.id);
+
+			if (prevItem === undefined) {
+				return;
+			}
+
+			const prevLabel = prevItem.get('label'),
+				label = item.get('label');
+
+			if (String(prevLabel) !== String(label)) {
+				labelChangeModels.push(item);
+			}
+		});
+
+		return labelChangeModels;
+	}
+
+	/**
+	 * 获取被 free 的节点
+	 * @param prevModelList
+	 * @param modelList
+	 * @returns
+	 */
+	private getFreedModels(prevModelList: SVModel[], modelList: SVModel[]): SVNode[] {
+		const freedNodes = modelList.filter(item => item instanceof SVNode && item.freed) as SVNode[];
+
+		freedNodes.forEach(item => {
+			const prev = prevModelList.find(prevModel => item.id === prevModel.id);
+
+			if (prev) {
+				item.set('label', prev.get('label'));
+			}
+		});
+
+		return freedNodes;
+	}
+
+	// ------------------------------------------------------------------------------------------------
+
+	/**
+	 * 处理不变的models
+	 * @param continuousModels
+	 */
+	private handleContinuousModels(continuousModels: SVModel[]) {
+		for (let i = 0; i < continuousModels.length; i++) {
+			let model = continuousModels[i];
+
+			if (model instanceof SVNode) {
+				const group = model.G6Item.getContainer();
+				group.attr({ opacity: 1 });
+			}
+		}
+	}
+
+	/**
+	 * 处理新增的 models
+	 * @param appendData
+	 */
+	private handleAppendModels(appendModels: SVModel[]) {
+		let { duration, timingFunction } = this.engine.animationOptions;
+
+		appendModels.forEach(item => {
+			if (item instanceof SVNodeAppendage) {
+				// 先不显示泄漏区节点上面的地址文本
+				if (item instanceof SVAddressLabel) {
+					// 先将透明度改为0，隐藏掉
+					const AddressLabelG6Group = item.G6Item.getContainer();
+					AddressLabelG6Group.attr({ opacity: 0 });
+				} else {
+					Animations.FADE_IN(item.G6Item, {
+						duration,
+						timingFunction,
+					});
+				}
+			} else {
+				Animations.APPEND(item.G6Item, {
+					duration,
+					timingFunction,
+					callback: () => item.afterRender(),
+				});
+			}
+		});
+	}
+
+	/**
+	 * 处理被移除 models
+	 * @param removeData
+	 */
+	private handleRemoveModels(removeModels: SVModel[]) {
+		let { duration, timingFunction } = this.engine.animationOptions;
+
+		removeModels.forEach(item => {
+			Animations.REMOVE(item.G6Item, {
+				duration,
+				timingFunction,
+				callback: () => {
+					this.renderer.removeModel(item);
+					item.afterDestroy();
+				},
+			});
+		});
+	}
+
+	/**
+	 * 处理泄漏区 models
+	 * @param leakModels
+	 */
+	private handleLeakModels(leakModels: SVModel[]) {
+		let { duration, timingFunction } = this.engine.animationOptions;
+
+		leakModels.forEach(item => {
+			if (item instanceof SVAddressLabel) {
+				Animations.FADE_IN(item.G6Item, {
+					duration,
+					timingFunction,
+				});
+			}
+
+			item.G6Item.enableCapture(false);
+		});
+
+		EventBus.emit('onLeak', leakModels);
+	}
+
+	/**
+	 * 处理被释放的节点 models
+	 * @param freedModes
+	 */
+	private handleFreedModels(freedModes: SVNode[]) {
+		const { duration, timingFunction } = this.engine.animationOptions,
+			alpha = 0.4;
+
+		freedModes.forEach(item => {
+			const nodeGroup = item.G6Item.getContainer();
+
+			item.set('style', { fill: '#ccc' });
+			nodeGroup.attr({ opacity: alpha });
+
+			if (item.appendages.marker) {
+				item.appendages.marker.forEach(marker => {
+					const markerGroup = marker.G6Item.getContainer();
+					marker.set('style', { fill: '#ccc' });
+					markerGroup.attr({ opacity: alpha + 0.5 });
+				});
+			}
+
+			if (item.appendages.freedLabel) {
+				item.appendages.freedLabel.forEach(freedLabel => {
+					freedLabel.G6Item.toFront();
+					Animations.FADE_IN(freedLabel.G6Item, { duration, timingFunction });
+				});
+			}
+		});
+
+		EventBus.emit('onFreed', freedModes);
+	}
+
+	/**
+	 * 处理发生变化的 models
+	 * @param models
+	 */
+	private handleChangeModels(models: SVModel[]) {
+		const changeHighlightColor: string = this.engine.viewOptions.updateHighlight;
+
+		if (!changeHighlightColor || typeof changeHighlightColor !== 'string') {
+			return;
+		}
+
+		models.forEach(item => {
+			item.triggerHighlight(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
+	 * @param layoutGroupTable
+	 * @param prevModelList
+	 * @param modelList
+	 * @param accumulateLeakModels
+	 * @returns
+	 */
+	public diff(
+		layoutGroupTable: LayoutGroupTable,
+		prevModelList: SVModel[],
+		modelList: SVModel[],
+		accumulateLeakModels: SVModel[],
+		isEnterFunction: boolean
+	): DiffResult {
+		const continuousModels: SVModel[] = this.getContinuousModels(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, accumulateLeakModels);
+		const updateModels: SVModel[] = [
+			...this.getReTargetMarkers(prevModelList, modelList),
+			...this.getLabelChangeModels(prevModelList, modelList),
+			...this.filterUnChangeModelsOfAppend(appendModels, prevModelList),
+			...leakModels,
+		];
+		const freedModels: SVNode[] = this.getFreedModels(prevModelList, modelList);
+
+		return {
+			CONTINUOUS: continuousModels,
+			APPEND: appendModels,
+			REMOVE: removeModels,
+			FREED: freedModels,
+			LEAKED: leakModels,
+			UPDATE: updateModels,
+		};
+	}
+
+	/**
+	 * 执行调和操作
+	 * @param diffResult
+	 * @param isFirstRender
+	 */
+	public patch(diffResult: DiffResult, handleUpdate: handleUpdate) {
+		const { APPEND, REMOVE, FREED, LEAKED, UPDATE, CONTINUOUS } = diffResult;
+
+		// 第一次渲染和进入函数的时候不高亮变化的元素
+		if (this.isFirstPatch === false && !handleUpdate?.isEnterFunction && !handleUpdate?.isFirstDebug) {
+			this.handleChangeModels(UPDATE);
+		}
+
+		this.handleContinuousModels(CONTINUOUS);
+		this.handleFreedModels(FREED);
+		this.handleAppendModels(APPEND);
+		this.handleLeakModels(LEAKED);
+		this.handleRemoveModels(REMOVE);
+
+		if (this.isFirstPatch) {
+			this.isFirstPatch = false;
+		}
+	}
+
+	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[];
+	leaKModels: SVModel[];
+	generalModel: SVModel[];
 }
 
-
-export type g6Behavior = string | { type: string; shouldBegin?: Function; shouldUpdate?: Function; shouldEnd?: Function; };
-
+export type g6Behavior =
+	| 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 { LayoutProvider } from "./layoutProvider";
-import { LayoutGroupTable } from "../Model/modelConstructor";
-import { Util } from "../Common/util";
-import { SVModel } from "../Model/SVModel";
-import { Renderer } from "./renderer";
-import { Reconcile } from "./reconcile";
-import { EventBus } from "../Common/eventBus";
-import { Group } from "../Common/group";
-import { Graph, Modes } from "@antv/g6-pc";
-import { InitG6Behaviors } from "../BehaviorHelper/initG6Behaviors";
-import { SVNode } from "../Model/SVNode";
-import { SolveBrushSelectDrag, SolveDragCanvasWithLeak, SolveNodeAppendagesDrag, SolveZoomCanvasWithLeak } from "../BehaviorHelper/behaviorIssueHelper";
-
-
+import { Engine } from '../engine';
+import { LayoutProvider } from './layoutProvider';
+import { LayoutGroupTable } from '../Model/modelConstructor';
+import { Util } from '../Common/util';
+import { SVModel } from '../Model/SVModel';
+import { Renderer } from './renderer';
+import { Reconcile } from './reconcile';
+import { EventBus } from '../Common/eventBus';
+import { Group } from '../Common/group';
+import { Graph, Modes } from '@antv/g6-pc';
+import { InitG6Behaviors } from '../BehaviorHelper/initG6Behaviors';
+import { SVNode } from '../Model/SVNode';
+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,98 +134,239 @@ 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,
         });
-    }
+	}
 
-    /**
-     * 渲染所有视图
-     * @param models 
-     * @param layoutFn 
-     */
-    render(layoutGroupTable: 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
-            ];
+	/**
+	 * 获取 g6 实例
+	 */
+	getG6Instance(): Graph {
+		return this.renderer.getG6Instance();
+	}
 
-        if (this.hasLeak === true && this.accumulateLeakModels.length === 0) {
-            this.hasLeak = false;
-            EventBus.emit('onLeakAreaUpdate', {
-                leakAreaY: this.leakAreaY,
-                hasLeak: this.hasLeak
-            });
-        }
+	/**
+	 * 获取泄漏区里面的元素
+	 * @returns
+	 */
+	getAccumulateLeakModels(): SVModel[] {
+		return this.accumulateLeakModels;
+	}
 
-        if (diffResult.LEAKED.length) {
-            this.hasLeak = true;
-            EventBus.emit('onLeakAreaUpdate', {
-                leakAreaY: this.leakAreaY,
-                hasLeak: this.hasLeak
-            });
-        }
+	/**
+	 *
+	 */
+	getLayoutGroupTable(): LayoutGroupTable {
+		return this.layoutGroupTable;
+	}
 
-        this.renderer.build(renderModelList); // 首先在离屏canvas渲染先
-        this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels, diffResult.LEAKED); // 进行布局（设置model的x，y，样式等）
+	/**
+	 * 刷新视图
+	 */
+	refresh() {
+		this.renderer.getG6Instance().refresh();
+	}
 
-        this.beforeRender();
-        this.renderer.render(renderModelList); // 渲染视图
-        this.reconcile.patch(diffResult); // 对视图上的某些变化进行对应的动作，比如：节点创建动画，节点消失动画等
-        this.afterRender();
+	/**
+	 * 重新调整容器尺寸
+	 * @param width
+	 * @param height
+	 */
+	resize(width: number, height: number) {
+		const g6Instance = this.getG6Instance(),
+			prevContainerHeight = g6Instance.getHeight(),
+			globalGroup: Group = new Group();
 
-        this.accumulateLeakModels.push(...diffResult.LEAKED);  // 对泄漏节点进行累积
+		globalGroup.add(...this.prevModelList, ...this.accumulateLeakModels);
+		this.renderer.changeSize(width, height);
 
-        this.layoutGroupTable = layoutGroupTable;
-        this.prevModelList = modelList;
-    }
+		const containerHeight = g6Instance.getHeight(),
+			dy = containerHeight - prevContainerHeight;
 
-    /**
-     * 销毁
-     */
-    destroy() {
-        this.renderer.destroy();
-        this.reconcile.destroy();
-        this.layoutProvider = null;
-        this.layoutGroupTable = null;
-        this.prevModelList.length = 0;
-        this.accumulateLeakModels.length = 0;
-        this.brushSelectedModels.length = 0;
-    }
+		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();
+			}
+		});
+	}
 
+	/**
+	 * 渲染所有视图
+	 * @param models
+	 * @param layoutFn
+	 */
+	render(layoutGroupTable: LayoutGroupTable, isSameSources: boolean, handleUpdate: handleUpdate) {
+		const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
 
-    /**
-     * 把渲染后要触发的逻辑放在这里
-     */
-    private afterRender() {
-        this.prevModelList.forEach(item => {
-            if (item.leaked === false) {
-                item.discarded = true;
-            }
-        });
-    }
+		this.restoreHighlight([...modelList, ...this.accumulateLeakModels]);
 
-    /**
-     * 把渲染前要触发的逻辑放在这里
-     */
-    private beforeRender() { }
+		// 如果数据没变的话，直接退出
+		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,
+			});
+		}
+
+		// 从无泄漏区变成有泄漏区
+		if (diffResult.LEAKED.length) {
+			this.hasLeak = true;
+			EventBus.emit('onLeakAreaUpdate', {
+				leakAreaY: this.leakAreaY,
+				hasLeak: this.hasLeak,
+			});
+		}
+
+		this.accumulateLeakModels.push(...diffResult.LEAKED); // 对泄漏节点进行向后累积
+		this.renderer.build(renderModelList); // 首先在离屏canvas渲染先
+		this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels); // 进行布局（设置model的x，y，样式等）
+
+		this.beforeRender();
+		this.renderer.render(renderModelList); // 渲染视图
+		this.reconcile.patch(diffResult, handleUpdate); // 对视图上的某些变化进行对应的动作，比如：节点创建动画，节点消失动画等
+		this.afterRender();
+
+		this.layoutGroupTable = layoutGroupTable;
+		this.prevModelList = modelList;
+	}
+
+	/**
+	 * 销毁
+	 */
+	destroy() {
+		this.renderer.destroy();
+		this.reconcile.destroy();
+		this.layoutProvider = null;
+		this.layoutGroupTable = null;
+		this.prevModelList.length = 0;
+		this.accumulateLeakModels.length = 0;
+		this.brushSelectedModels.length = 0;
+	}
+
+	// ------------------------------------------------------------------------------
+
+	/**
+	 * 把渲染后要触发的逻辑放在这里
+	 */
+	private afterRender() {
+		this.prevModelList.forEach(item => {
+			if (item.leaked === false) {
+				item.discarded = true;
+			}
+		});
+	}
+
+	/**
+	 * 把渲染前要触发的逻辑放在这里
+	 */
+	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;
 
-        // 1 转换模型（data => model）
-        const layoutGroupTable = this.modelConstructor.construct(source);
+
+        if(isSameSources) {
+            // 若源数据两次一样的，用回上一次的layoutGroupTable
+            layoutGroupTable = this.modelConstructor.getLayoutGroupTable();
+        }
+        else {  
+            // 1 转换模型（data => model）
+            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;
 
@@ -10,17 +9,19 @@ export type sourceMarkerData = string | string[];
 
 // 源数据单元
 export interface SourceNode {
-    id: string | number;
-    [key: string]: any | sourceLinkData | sourceMarkerData;
+	id: string | number;
+	[key: string]: any | sourceLinkData | sourceMarkerData;
 }
 
+export interface handleUpdate {
+	isEnterFunction: boolean;
+	isFirstDebug: boolean;
+}
 
 export type Sources = {
-    [key: string]: { 
-        data: SourceNode[]; 
-        layouter: string; 
-    }
+	[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'
+    }
 };