修改pctree的bug

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',

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);
+            }
     
-        if(prev) {
+            allNodeId.value += idValue;
-            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);
+                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
+                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 
+            })
+        }
     }
 });
 

src/RegisteredShape/twoCellNode.ts

@@ -124,6 +124,23 @@ export default Util.registerShape(
 				});
 			}
 
+			//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: 'text',
+					draggable: true,
+				});
+			}
 			return wrapperRect;
 		},
 

webpack.config.product.js

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