fix: 修改ptree和pctree的布局

demo/Layouter/PCTree.js

@@ -13,11 +13,25 @@ SV.registerLayout('PCTree', {
                 data: headNodes[i].preData,
                 indexLeft: headNodes[i].index,
                 root: headNodes[i].root
-            }
+            };
+            let externalNode = {
+                type: 'structureExteral',
+                id: headNodes[0].id + '_1',
+            };
 
             if(dataNode.root){
                 dataNode.indexTop = 'data';
-                headNodes[i].indexTop = ' parent  firstChild'
+                headNodes[i].indexTop = ' parent  firstChild';
+
+                if(headNodes[i].cursor){
+                    externalNode.cursor = headNodes[i].cursor;
+                    delete headNodes[i].cursor;
+                }else{
+                    externalNode.external = headNodes[i].external;
+                    delete headNodes[i].external;
+                }
+
+                sources.push(externalNode)
             }
             sources.push(dataNode)
         }
@@ -58,6 +72,10 @@ SV.registerLayout('PCTree', {
                         stroke: '#333',
                         fill: '#00AF92'
                     }
+                },
+                structureExteral: {
+                    type: 'rect',
+                    size: [0, 0]
                 }
             },
             indexLabel: {
@@ -94,6 +112,20 @@ SV.registerLayout('PCTree', {
                             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: {
@@ -104,6 +136,13 @@ SV.registerLayout('PCTree', {
                     style: {
                         fill: '#f08a5d'
                     }
+                },
+                cursor: {
+                    type: 'cursor',
+                    anchor: 0,
+                    style: {
+                        fill: '#f08a5d'
+                    }
                 }
             },
             layout: {
@@ -127,7 +166,7 @@ SV.registerLayout('PCTree', {
      * @param node 
      * @param parent 
      */
-    layoutItem(node, prev, layoutOptions, allNodeId) {
+    layoutItem(node, prev, layoutOptions, allNodeId, isRootNode) {
         if(!node) {
             return null;
         }
@@ -141,10 +180,14 @@ SV.registerLayout('PCTree', {
                 node.set('x', prev.get('x') + layoutOptions.xInterval + width);
             }
     
+            //如果是有root标识的和其后续节点，则不用记录id
+            //方便重更新布局
+            if(!isRootNode){
                 allNodeId.value += idValue;
+            }
     
             if(node.next) {
-                this.layoutItem(node.next, node, layoutOptions, allNodeId);
+                this.layoutItem(node.next, node, layoutOptions, allNodeId, isRootNode);
             }
         }
     },  
@@ -152,6 +195,7 @@ SV.registerLayout('PCTree', {
     layout(elements, layoutOptions) {
         let headNode = elements.filter(item => item.type === 'PCTreeHead'),
             preHeadNode =  elements.filter(item => item.type === 'PCTreePreHead'),
+            externalNode =  elements.filter(item => item.type === 'structureExteral'),
             roots = elements.filter(item => item.type === 'PCTreeNode' && item.root),
             height = headNode[0].get('size')[1],
             width = headNode[0].get('size')[0],
@@ -177,10 +221,17 @@ SV.registerLayout('PCTree', {
                     x = width + layoutOptions.xInterval * 2;
 
                 node.headNext.set({ x, y });
-                this.layoutItem(node.headNext, null, layoutOptions, allNodeId);
+                this.layoutItem(node.headNext, null, layoutOptions, allNodeId, false);
             }
         }
 
+        if(externalNode.length > 0){
+            externalNode[0].set({
+                x:  -25,
+                y: i / 2 * height
+            });
+        }
+
         for(i = 0; i < roots.length; i++) {
             let nodeWidth = roots[0].get('size')[0],
                 nodeInternalSum = i * (nodeWidth + layoutOptions.xInterval);
@@ -189,6 +240,8 @@ SV.registerLayout('PCTree', {
                 x: headNode[0].get('x') + width + layoutOptions.xInterval * 2 + nodeInternalSum, 
                 y: headNode[0].get('y') - layoutOptions.yInterval 
             })
+
+            this.layoutItem(roots[i], null, layoutOptions, allNodeId, true);
         }
     }
 });

demo/Layouter/PTree.js

@@ -26,24 +26,27 @@ SV.registerLayout('PTree', {
     
     sourcesPreprocess(sources) {
         let dataLength = sources.length;
-        let parentNodes = [];
         let i;
 
         for (i = 0; i < dataLength; i++) {
-            parentNodes.push({
+            let parentNode = {
                 id: `parent-${i}`,
                 data: sources[i].parent
+            };
+                
+            if(sources[i].index === 0){
+                sources[i].indexLeft = 'data';
+                parentNode.indexLeft = 'parent';
+
+                sources.push({
+                    type: 'nameNode',
+                    id: sources[i].id + '_0',
+                    data: sources[i].name
                 });
-        }
-        if(sources[0]){
-            sources[0].indexLeft = 'data';
-        }
-        if(parentNodes[0]){
-            parentNodes[0].indexLeft = 'parent';
-        }
-
-        sources.push(...parentNodes);
 
+            }
+            sources.push(parentNode);
+        }
         return sources;
     },
 
@@ -51,6 +54,14 @@ SV.registerLayout('PTree', {
     defineOptions() {
         return {
             node: {
+                nameNode: {
+                    type: 'rect',
+                    size: [0, 0],
+                    label: '[data]',
+                    labelOptions: {
+                        style: { fontSize: 16 }
+                    },
+                },
                 default: {
                     type: 'rect',
                     label: '[data]',
@@ -68,26 +79,40 @@ SV.registerLayout('PTree', {
             indexLabel: {
                 index: { position: 'top' },
                 indexLeft: { position: 'left' }
-            }
+            },
+            layout: {
+                xInterval: 20
+            },
         };
     },
 
 
-    layout(elements) {
+    layout(elements, layoutOptions) {
-        let nodeLength = elements.length;
+        let nodes = elements.filter(item => item.type === 'default'),
+            nodeLength = nodes.length,
+            nameNode = elements.filter(item => item.type === 'nameNode')[0];
 
         if(nodeLength == 0) return;
         
         let halfLength = nodeLength / 2,
-            size = elements[0].get('size')[0],
+            size = nodes[0].get('size')[0],
             i;
         
-            
         for (i = 0; i < nodeLength; i++) {
             let x = (i % halfLength) * size,
                 y = Math.floor(i / halfLength) * size;
 
-            elements[i].set({ x, y });
+            nodes[i].set({ x, y });
+        }
+
+        //数据结构名
+        if(nameNode){
+            let labelBound = nameNode.shadowG6Item.getContainer().getChildren()[1].getBBox();
+
+            nameNode.set({
+                x: -size / 2 - layoutOptions.xInterval  - labelBound.width / 2,
+                y: -size / 2 - layoutOptions.xInterval
+            })
         }
     }
 });