fix: 增加哈希表

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/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

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

demo/Layouter/PCTree.js

@@ -1,14 +1,25 @@
  
-
-
 SV.registerLayout('PCTree', {
 
     sourcesPreprocess(sources) {
 
-        for(let i = 0; i < sources.length; i++){
+        let headNodes = sources.filter(item => item.type === 'PCTreeHead');
-            if(sources[i].root){
+
-                sources[i].rootLabel = ['data', 'parent', 'firstChild'];
+        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;
@@ -17,10 +28,23 @@ SV.registerLayout('PCTree', {
     defineOptions() {
         return {
             node: {
+                PCTreePreHead: {
+                    type: 'rect',
+                    label: '[data]',
+                    size: [60, 34],
+                    labelOptions: {
+                        style: { fontSize: 16 }
+                    },
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3',
+                        offset: 25
+                    }
+                },
                 PCTreeHead: {
-                    type: 'three-cell',
+                    type: 'two-cell-node',
-                    label: ['[data]','[parent]'],
+                    label: '[data]',
-                    size: [210, 33],
+                    size: [120, 34],
                     style: {
                         stroke: '#333', 
                         fill: '#95e1d3'
@@ -36,6 +60,10 @@ SV.registerLayout('PCTree', {
                     }
                 }
             },
+            indexLabel: {
+                indexTop: { position: 'top' },
+                indexLeft: { position: 'left' }
+            },
             link: {
                 headNext: { 
                     sourceAnchor: 1,
@@ -68,8 +96,19 @@ SV.registerLayout('PCTree', {
                     }
                 }
             },
+            marker: {
+                external: {
+                    type: 'pointer',
+                    anchor: 0,
+                    offset: 8,
+                    style: {
+                        fill: '#f08a5d'
+                    }
+                }
+            },
             layout: {
-                xInterval: 50
+                xInterval: 50,
+                yInterval: 86
             },
             behavior: {
                 dragNode: ['PCTreeNode']
@@ -77,50 +116,80 @@ SV.registerLayout('PCTree', {
         };
     },
 
+    //判断node节点是否之前布局过
+    isUnique(value, allNodeIdValue){
+        let re = new RegExp("" + value);
+        return !re.test(allNodeIdValue);
+    },
+    
     /**
      * 对子树进行递归布局
      * @param node 
      * @param parent 
      */
-     layoutItem(node, prev, layoutOptions) {
+    layoutItem(node, prev, layoutOptions, allNodeId) {
         if(!node) {
             return null;
         }
+        let width = node.get('size')[0],
+            idValue = node.id.split('(')[1].slice(0, -1);
         
-        let width = node.get('size')[0];
+        //有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);
+                this.layoutItem(node.next, node, layoutOptions, allNodeId);
+            }
         }
     },  
 
     layout(elements, layoutOptions) {
         let headNode = elements.filter(item => item.type === 'PCTreeHead'),
-            i;
+            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],
-                height = node.get('size')[1],
+                preNode = preHeadNode[i];
-                width = node.get('size')[0];
 
             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 * 3;
+                    x = width + layoutOptions.xInterval * 2;
 
                 node.headNext.set({ x, y });
-                this.layoutItem(node.headNext, null, layoutOptions);
+                this.layoutItem(node.headNext, null, layoutOptions, allNodeId);
             }
         }
+
+        for(i = 0; i < roots.length; i++) {
+            let nodeWidth = roots[0].get('size')[0],
+                nodeInternalSum = i * (nodeWidth + layoutOptions.xInterval);
+
+            roots[i].set({
+                x: headNode[0].get('x') + width + layoutOptions.xInterval * 2 + nodeInternalSum, 
+                y: headNode[0].get('y') - layoutOptions.yInterval 
+            })
+        }
     }
 });
 

demo/Layouter/PTree.js

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

demo/Layouter/TriTree.js

@@ -36,6 +36,21 @@ SV.registerLayout('TriTree', {
                         }
                     }
                 },
+                parent: {
+                    type: 'line',
+                    sourceAnchor: 4,
+                    targetAnchor: 6,
+                    style: {
+                        stroke: '#999',
+                        lineAppendWidth: 10,
+                        lineWidth: 1.6,
+                        endArrow: 'default',
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1),
+                            fill: '#999'
+                        }
+                    }
+                },
                 r_parent: {
                     type: 'quadratic',
                     sourceAnchor: 4,

demo/data.js

@@ -8,10 +8,10 @@ const SOURCES_DATA = [{
                     "0x0"
                 ],
                 "child": [
-                    "0xb07ee0",
+                    "0xfd9ee0",
-                    "0xb07f10"
+                    "0xfd9f10"
                 ],
-                "id": "0xb07eb0",
+                "id": "0xfd9eb0",
                 "name": "T",
                 "data": "A",
                 "root": true,
@@ -22,12 +22,12 @@ const SOURCES_DATA = [{
                     "0x0",
                     "0x0"
                 ],
-                "id": "0xb07ee0",
+                "id": "0xfd9ee0",
                 "name": "T->lchild",
                 "data": "B",
                 "type": "default",
                 "l_parent": [
-                    "0x0"
+                    "0xfd9eb0"
                 ],
                 "external": [
                     "T1"
@@ -38,12 +38,12 @@ const SOURCES_DATA = [{
                     "0x0",
                     "0x0"
                 ],
-                "id": "0xb07f10",
+                "id": "0xfd9f10",
                 "name": "T->rchild",
                 "data": "C",
                 "type": "default",
                 "r_parent": [
-                    "0x0"
+                    "0xfd9eb0"
                 ],
                 "external": [
                     "T2"
@@ -52,6 +52,144 @@ const SOURCES_DATA = [{
         ],
         "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
@@ -66,10 +204,10 @@ const SOURCES_DATA = [{
                     "0x0"
                 ],
                 "child": [
-                    "0xb07ee0",
+                    "0xfd9ee0",
-                    "0xb07f10"
+                    "0xfd9f10"
                 ],
-                "id": "0xb07eb0",
+                "id": "0xfd9eb0",
                 "name": "T",
                 "data": "A",
                 "root": true,
@@ -80,12 +218,12 @@ const SOURCES_DATA = [{
                     "0x0",
                     "0x0"
                 ],
-                "id": "0xb07ee0",
+                "id": "0xfd9ee0",
                 "name": "T->lchild",
                 "data": "B",
                 "type": "default",
                 "l_parent": [
-                    "0xb07eb0"
+                    "0xfd9eb0"
                 ],
                 "external": [
                     "T1"
@@ -96,12 +234,12 @@ const SOURCES_DATA = [{
                     "0x0",
                     "0x0"
                 ],
-                "id": "0xb07f10",
+                "id": "0xfd9f10",
                 "name": "T->rchild",
                 "data": "C",
                 "type": "default",
                 "r_parent": [
-                    "0x0"
+                    "0xfd9eb0"
                 ],
                 "external": [
                     "T2"
@@ -110,26 +248,21 @@ const SOURCES_DATA = [{
         ],
         "layouter": "TriTree"
     },
-    "handleUpdate": {
+    "TriTree3": {
-        "isEnterFunction": false,
-        "isFirstDebug": false
-    }
-}, {
-    "TriTree0": {
         "data": [{
                 "external": [
-                    "T"
+                    "T3"
                 ],
                 "parent": [
                     "0x0"
                 ],
                 "child": [
-                    "0xb07ee0",
+                    "0xfd9f70",
-                    "0xb07f10"
+                    "0x0"
                 ],
-                "id": "0xb07eb0",
+                "id": "0xfd9f40",
-                "name": "T",
+                "name": "T3",
-                "data": "A",
+                "data": "D",
                 "root": true,
                 "type": "default"
             },
@@ -138,31 +271,15 @@ const SOURCES_DATA = [{
                     "0x0",
                     "0x0"
                 ],
-                "id": "0xb07ee0",
+                "id": "0xfd9f70",
-                "name": "T->lchild",
+                "name": "T3->lchild",
-                "data": "B",
+                "data": "E",
                 "type": "default",
                 "l_parent": [
-                    "0xb07eb0"
+                    "0xfd9f40"
                 ],
                 "external": [
-                    "T1"
+                    "T4"
-                ]
-            },
-            {
-                "child": [
-                    "0x0",
-                    "0x0"
-                ],
-                "id": "0xb07f10",
-                "name": "T->rchild",
-                "data": "C",
-                "type": "default",
-                "r_parent": [
-                    "0xb07eb0"
-                ],
-                "external": [
-                    "T2"
                 ]
             }
         ],

package.json

@@ -1,19 +1,20 @@
 {
-  "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.1",
+    "@antv/g6": "^4.6.4",
     "merge": "^2.1.1"
   }
 }

src/BehaviorHelper/behaviorIssueHelper.ts

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

src/BehaviorHelper/initG6Behaviors.ts

@@ -53,8 +53,13 @@ export function InitG6Behaviors(engine: Engine, viewContainer: ViewContainer): M
     };
 
     const selectNodeFilter = event => {
-        let g6Item = event.item,
+        let g6Item = event.item;
-            node: SVNode = g6Item.SVModel;
+
+        if(g6Item === null) {
+            return false
+        }
+
+        let node: SVNode = g6Item.SVModel;
 
         if (g6Item === null || node.isNode() === false) {
             return false;

src/Model/modelConstructor.ts

@@ -444,14 +444,25 @@ export class ModelConstructor {
 			}
 		}
 
-		nodeList = layoutGroupTable.get(targetGroupName).node.filter(item => item.sourceType === sourceNodeType);
+    // 为了可以连接到不同group的结点
-
+    for (let layoutGroup of layoutGroupTable.values()) {
-		// 若目标node不存在，返回null
+      nodeList = layoutGroup.node.filter(item => item.sourceType === sourceNodeType);
       if (nodeList === undefined) {
-			return null;
+        continue;
       }
-
 		  targetNode = nodeList.find(item => item.sourceId === targetId);
+      if (targetNode) {
+        break;
+      }
+    }
+		// nodeList = layoutGroupTable.get(targetGroupName).node.filter(item => item.sourceType === sourceNodeType);
+
+		// // 若目标node不存在，返回null
+		// if (nodeList === undefined) {
+		// 	return null;
+		// }
+
+		// targetNode = nodeList.find(item => item.sourceId === targetId);
 		return targetNode || null;
 	}
 

src/RegisteredShape/binaryTreeNode.ts

@@ -50,7 +50,7 @@ export default Util.registerShape(
 						fontSize: style.fontSize || 16,
 						cursor: cfg.style.cursor,
 					},
-					name: 'text',
+					name: 'label',
 					draggable: true,
 				});
 			}
@@ -73,7 +73,7 @@ export default Util.registerShape(
 						fontSize: 16,
 						cursor: cfg.style.cursor,
 					},
-					name: 'text',
+					name: 'null-left',
 					draggable: true,
 				});
 			}
@@ -90,7 +90,7 @@ export default Util.registerShape(
 						fontSize: 16,
 						cursor: cfg.style.cursor,
 					},
-					name: 'text',
+					name: 'null-right',
 					draggable: true,
 				});
 			}

src/RegisteredShape/linkListNode.ts

@@ -57,7 +57,7 @@ export default Util.registerShape(
 						fill: style.fill || '#000',
 						fontSize: style.fontSize || 16,
 					},
-					name: 'text',
+					name: 'label',
 					draggable: true,
 				});
 			}
@@ -75,7 +75,7 @@ export default Util.registerShape(
 						fontSize: 16,
 						cursor: cfg.style.cursor,
 					},
-					name: 'text',
+					name: 'null',
 					draggable: true,
 				});
 			}

src/RegisteredShape/threeCellNode.ts

@@ -69,7 +69,7 @@ export default registerNode('three-cell', {
 					fontStyle: 'italic',
 					cursor: cfg.style.cursor,
 				},
-				name: 'text',
+				name: 'rootLabel0',
 				draggable: true,
 			});
 
@@ -85,7 +85,7 @@ export default registerNode('three-cell', {
 					fontStyle: 'italic',
 					cursor: cfg.style.cursor,
 				},
-				name: 'text',
+				name: 'rootLabel1',
 				draggable: true,
 			});
 
@@ -101,7 +101,7 @@ export default registerNode('three-cell', {
 					fontStyle: 'italic',
 					cursor: cfg.style.cursor,
 				},
-				name: 'text',
+				name: 'rootLabel2',
 				draggable: true,
 			});
 		}
@@ -120,7 +120,7 @@ export default registerNode('three-cell', {
 					fontStyle: 'italic',
 					cursor: cfg.style.cursor,
 				},
-				name: 'text',
+				name: 'index',
 				draggable: true,
 			});
 		}
@@ -137,7 +137,7 @@ export default registerNode('three-cell', {
 					fontSize: style.fontSize || 16,
 					cursor: cfg.style.cursor,
 				},
-				name: 'text',
+				name: 'label1',
 				draggable: true,
 			});
 
@@ -152,7 +152,7 @@ export default registerNode('three-cell', {
 					fontSize: style.fontSize || 16,
 					cursor: cfg.style.cursor,
 				},
-				name: 'text',
+				name: 'label2',
 				draggable: true,
 			});
 		}
@@ -170,7 +170,7 @@ export default registerNode('three-cell', {
 					fontSize: 22,
 					cursor: cfg.style.cursor,
 				},
-				name: 'text',
+				name: 'null',
 				draggable: true,
 			});
 		}

src/RegisteredShape/triTreeNode.ts

@@ -1,8 +1,6 @@
 import { Util } from '../Common/util';
 
-export default Util.registerShape(
+export default Util.registerShape('tri-tree-node', {
-	'tri-tree-node',
-	{
 	draw(cfg, group) {
 		cfg.size = cfg.size;
 
@@ -17,9 +15,9 @@ export default Util.registerShape(
 				height: height,
 				stroke: cfg.style.stroke || '#333',
 				cursor: cfg.style.cursor,
-                fill: '#eee'
+				fill: '#eee',
 			},
-            name: 'wrapper'
+			name: 'wrapper',
 		});
 
 		group.addShape('rect', {
@@ -30,10 +28,10 @@ export default Util.registerShape(
 				height: height / 4,
 				fill: '#eee',
 				stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
+				cursor: cfg.style.cursor,
 			},
 			name: 'top',
-            draggable: true
+			draggable: true,
 		});
 
 		group.addShape('rect', {
@@ -41,17 +39,16 @@ export default Util.registerShape(
 				x: width / 4 + width / 2,
 				y: height / 2 + height / 4,
 				width: width / 2,
-                height: height / 4 * 3,
+				height: (height / 4) * 3,
 				fill: cfg.color || cfg.style.fill,
 				stroke: cfg.style.stroke || '#333',
-                cursor: cfg.style.cursor
+				cursor: cfg.style.cursor,
 			},
 			name: 'bottom',
-            draggable: true
+			draggable: true,
 		});
 		const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
 		if (cfg.label) {
-            
 			group.addShape('text', {
 				attrs: {
 					x: width, // 居中
@@ -61,34 +58,35 @@ export default Util.registerShape(
 					text: cfg.label,
 					fill: style.fill || '#000',
 					fontSize: style.fontSize || 16,
-                    cursor: cfg.style.cursor
+					cursor: cfg.style.cursor,
 				},
-                name: 'text',
+				name: 'label',
-                draggable: true
+				draggable: true,
 			});
 		}
+		let parent = cfg.parent || cfg.l_parent || cfg.r_parent;
 		const isLeftEmpty =
 				!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
 			isRightEmpty =
 				!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0',
-        isparentEmpty = cfg.parent == "0x0" || cfg.l_parent == "0x0" || cfg.r_parent == "0x0";
+			isParentEmpty = parent[0] == '0x0';
 
 
-        if (isparentEmpty) {
+		if (isParentEmpty) {
 			{
 				group.addShape('text', {
 					attrs: {
 						x: width, // 居中
-                    y: height / 4 * 3,
+						y: (height / 4) * 3,
 						textAlign: 'center',
 						textBaseline: 'middle',
-                    text: "^",
+						text: '^',
 						fill: style.fill || '#000',
 						fontSize: style.fontSize || 14,
-                    cursor: cfg.style.cursor
+						cursor: cfg.style.cursor,
 					},
-                name: 'parent',
+					name: 'null-parent',
-                draggable: true
+					draggable: true,
 				});
 			}
 		}
@@ -106,7 +104,7 @@ export default Util.registerShape(
 					fontSize: 16,
 					cursor: cfg.style.cursor,
 				},
-        name: 'text',
+				name: 'null-left',
 				draggable: true,
 			});
 		}
@@ -123,12 +121,11 @@ export default Util.registerShape(
 					fontSize: 16,
 					cursor: cfg.style.cursor,
 				},
-        name: 'text',
+				name: 'null-right',
 				draggable: true,
 			});
 		}
 
-
 		return wrapperRect;
 	},
 
@@ -140,7 +137,7 @@ export default Util.registerShape(
 			[0.5, 0],
 			[0.5, 0.125],
 			[0.6, 1],
+			[0.5, 1],
 		];
 	},
-}
+});
-);

src/RegisteredShape/twoCellNode.ts

@@ -52,7 +52,7 @@ export default Util.registerShape(
 							fontSize: style.fontSize || 16,
 							cursor: cfg.style.cursor,
 						},
-						name: 'text',
+						name: 'tag',
 						draggable: true,
 					});
 
@@ -67,7 +67,7 @@ export default Util.registerShape(
 							fontSize: style.fontSize || 16,
 							cursor: cfg.style.cursor,
 						},
-						name: 'text',
+						name: 'data',
 						draggable: true,
 					});
 				} else {
@@ -82,7 +82,7 @@ export default Util.registerShape(
 							fontSize: style.fontSize || 16,
 							cursor: cfg.style.cursor,
 						},
-						name: 'text',
+						name: 'label',
 						draggable: true,
 					});
 				}
@@ -101,7 +101,7 @@ export default Util.registerShape(
 						fontSize: 20,
 						cursor: cfg.style.cursor,
 					},
-					name: 'text',
+					name: 'null-headNext',
 					draggable: true,
 				});
 			}
@@ -119,11 +119,28 @@ export default Util.registerShape(
 						fontSize: 20,
 						cursor: cfg.style.cursor,
 					},
-					name: 'text',
+					name: 'null-start',
 					draggable: true,
 				});
 			}
 
+			//pctree 数据结构中没有后续指针
+			if (cfg.id.includes('PCTreeHead') && !cfg.headNext) {
+				group.addShape('text', {
+					attrs: {
+						x: width * (5 / 4),
+						y: height * (8 / 7),
+						textAlign: 'center',
+						textBaseline: 'middle',
+						text: '^',
+						fill: style.fill || '#000',
+						fontSize: 20,
+						cursor: cfg.style.cursor,
+					},
+					name: 'null-headNext2',
+					draggable: true,
+				});
+			}
 			return wrapperRect;
 		},
 

src/View/layoutProvider.ts

@@ -155,7 +155,7 @@ export class LayoutProvider {
 			},
 			left: (nodeBound: BoundingRect, labelBound: BoundingRect, offset: number) => {
 				return {
-					x: nodeBound.x - labelBound.width - offset,
+					x: nodeBound.x - labelBound.width / 2- offset,
 					y: nodeBound.y + nodeBound.height / 2,
 				};
 			},
@@ -164,7 +164,8 @@ export class LayoutProvider {
 		indexLabels.forEach(item => {
 			const options: IndexLabelOption = indexLabelOptions[item.sourceType],
 				nodeBound = item.target.getBound(),
-				labelBound = item.getBound(),
+				// labelBound = item.getBound(),
+				labelBound = item.shadowG6Item.getContainer().getChildren()[1].getBBox(),
 				offset = options.offset ?? 20,
 				position = options.position ?? 'bottom';
 

src/View/viewContainer.ts

@@ -30,6 +30,7 @@ export class ViewContainer {
 
 	public hasLeak: boolean;
 	public leakAreaY: number;
+    public lastLeakAreaTranslateY: number;
 	public brushSelectedModels: SVModel[]; // 保存框选过程中被选中的节点
 	public clickSelectNode: SVNode; // 点击选中的节点
 
@@ -49,10 +50,11 @@ export class ViewContainer {
 
 		const g6Instance = this.renderer.getG6Instance(),
 			leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
-			height = this.getG6Instance().getHeight(),
+			height = g6Instance.getHeight(),
 			{ drag, zoom } = this.engine.behaviorOptions;
 
 		this.leakAreaY = height - leakAreaHeight;
+        this.lastLeakAreaTranslateY = 0;
 
 		SolveNodeAppendagesDrag(this);
 		SolveBrushSelectDrag(this);
@@ -68,17 +70,33 @@ export class ViewContainer {
 	reLayout() {
 		const g6Instance = this.getG6Instance(),
 			group = g6Instance.getGroup(),
-			matrix = group.getMatrix();
+			matrix = group.getMatrix(),
+			bound = group.getCanvasBBox();
+
+		const { duration, enable, timingFunction } = this.engine.animationOptions;
 
 		if (matrix) {
 			let dx = matrix[6],
 				dy = matrix[7];
 
-			g6Instance.translate(-dx, -dy);
+			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();
+
+        EventBus.emit('onLeakAreaUpdate', {
+            leakAreaY: this.leakAreaY,
+            hasLeak: this.hasLeak,
+        });
 	}
 
 	/**
@@ -143,8 +161,8 @@ export class ViewContainer {
 	private restoreHighlight(models: SVModel[]) {
 		models.forEach(item => {
 			// 不是free节点才进行还原
-            if(!item.freed) {
+			if (!item.freed) {
-                item.restoreHighlight()
+				item.restoreHighlight();
 			}
 		});
 	}

src/engine.ts

@@ -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 {
@@ -204,7 +205,7 @@ export class Engine {
             return;
         }
 
-        this.viewContainer.getG6Instance().on(eventName, event => {
+        this.viewContainer.getG6Instance().on(eventName as G6Event, event => {
             callback(event.item['SVModel']);
         });
     }

webpack.config.product.js

@@ -1,6 +1,6 @@
 
-
 module.exports = {
+    mode: 'production',
     entry: './src/StructV.ts',
     output: {
         filename: './sv.js',