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

demoV2/Layouter/Array.js

@@ -6,7 +6,7 @@ SV.registerLayout('Array', {
     sourcesPreprocess(sources) {
         const firstElement = sources[0];
 
-        if(firstElement.external) {
+        if (firstElement.external) {
             firstElement.headExternal = firstElement.external;
             delete firstElement.external;
         }
@@ -16,18 +16,17 @@ SV.registerLayout('Array', {
 
     defineOptions() {
         return {
-            element: { 
+            node: {
                 default: {
-                    type: 'indexed-node',
+                    type: 'array-node',
                     label: '[id]',
                     size: [60, 30],
+                    labelOptions: {
+                        style: { fontSize: 20 }
+                    },
                     style: {
                         stroke: '#333',
                         fill: '#95e1d3'
-                    },
-                    indexOptions: {
-                        index: { position: 'bottom' },
-                        indexTop: { position: 'top' }
                     }
                 }
             },
@@ -47,8 +46,9 @@ SV.registerLayout('Array', {
                     }
                 }
             },
-            behavior: {
-                dragNode: false
+            indexLabel: {
+                index: { position: 'bottom' },
+                indexRight: { position: 'right' }
             }
         };
     },
@@ -56,13 +56,13 @@ SV.registerLayout('Array', {
     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);
             }
         }
     }
-}); 
+});
 

demoV2/Layouter/BinaryTree.js

@@ -32,8 +32,9 @@ SV.registerLayout('BinaryTree', {
                     }
                 }
             },
-            pointer: {
+            marker: {
                 external: {
+                    type: 'pointer',
                     anchor: 0,
                     offset: 14,
                     style: {

demoV2/Layouter/PTree.js

@@ -0,0 +1,86 @@
+
+// 解析数据：
+// {
+//     PTree:{
+//         data:[
+//             {
+//                 id: '1001',
+//                 data: 'A',
+//                 parent: -1,
+//                 index: 0
+//             },
+//             {
+//                 id: '1002',
+//                 data: 'B',
+//                 parent: 0,
+//                 index: 1
+//             },
+//         ],
+//         layouter: 'PTree'
+
+//     }
+// }
+
+
+SV.registerLayout('PTree', {
+    
+    sourcesPreprocess(sources) {
+        let dataLength = sources.length;
+        let parentNodes = [];
+        let i;
+
+        for (i = 0; i < dataLength; i++) {
+            parentNodes.push({
+                id: `parent-${i}`,
+                data: sources[i].parent
+            });
+        }
+        sources[0].indexLeft = 'data';
+        parentNodes[0].indexLeft = 'parent';
+
+        sources.push(...parentNodes);
+
+        return sources;
+    },
+
+
+    defineOptions() {
+        return {
+            node: {
+                default: {
+                    type: 'rect',
+                    label: '[data]',
+                    size: [40, 40],
+                    labelOptions: {
+                        style: { fontSize: 16 }
+                    },
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3',
+                        offset: 25
+                    }
+                },  
+            },
+            indexLabel: {
+                index: { position: 'top' },
+                indexLeft: { position: 'left' }
+            }
+        };
+    },
+
+
+    layout(elements) {
+        let nodeLength = elements.length,
+            halfLength = nodeLength / 2,
+            size = elements[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 });
+        }
+    }
+});

demoV2/Layouter/SqQueue.js

@@ -0,0 +1,120 @@
+
+
+
+SV.registerLayout('SqQueue', {
+    defineOptions() {
+        return {
+            node: {
+                head: {
+                    type: 'rect',
+                    anchorPoints: [
+                        [0.5, 0],
+                        [1, 0.5],
+                        [0.5, 1],
+                        [0, 0.5]
+                    ],
+                    size: [60, 30],
+                    label: '[data]',
+                    style: {
+                        fill: '#95e1d3',
+                        stroke: "#333",
+                        cursor: 'pointer'
+                    },
+                },
+                node: {
+                    type: 'indexed-node',
+                    size: [60, 30],
+                    label: '[data]',
+                    style: {
+                        fill: '#95e1d3',
+                        stroke: "#333",
+                        cursor: 'pointer'
+                    }
+                }
+            },
+            link: {
+                front: {
+                    type: 'polyline',
+                    sourceAnchor: 1,
+                    targetAnchor: 5,
+                    style: {
+                        stroke: '#333',
+                        endArrow: 'default'
+                    }
+                },
+                rear: {
+                    type: 'polyline',
+                    sourceAnchor: 1,
+                    targetAnchor: 5,
+                    style: {
+                        stroke: '#333',
+                        endArrow: 'default'
+                    }
+                }
+            },
+            marker: {
+                external: {
+                    type: 'pointer',
+                    anchor: 0,
+                    offset: 8,
+                    labelOffset: 2,
+                    style: {
+                        fill: '#f08a5d'
+                    }
+                },
+                cursor: {
+                    type: 'cursor',
+                    anchor: 0,
+                    offset: 8,
+                    labelOffset: 2,
+                    style: {
+                        fill: '#f08a5d'
+                    }
+                }
+            }
+        };
+    },
+
+
+    layout(elements) {
+        let head = elements.filter(item => item.type === 'head'),
+            head1 = head[0],
+            head2 = head[1],
+            nodes = elements.filter(item => item.type !== 'head'),
+            headHeight = head1.get('size')[1],
+            headWidth = head1.get('size')[0],
+            nodeHeight = 0,
+            x = 0, y = 0;
+
+        if (nodes.length) {
+            let firstNode = nodes[0];
+            nodeHeight = firstNode.get('size')[1];
+            x = -50;
+            y = firstNode.get('y');
+
+            for (let i = 1; i < nodes.length; i++) {
+                let width = nodes[i].get('size')[0];
+                nodes[i].set('x', nodes[i - 1].get('x') + width);
+
+                if (nodes[i].empty) {
+                    nodes[i].set('style', {
+                        fill: null
+                    });
+                }
+            }
+        }
+
+
+        head1.set({ x, y: y + nodeHeight * 3 });
+
+        if (nodes.length) {
+            head2.set({ x, y: head1.get('y') + headHeight });
+        }
+        else {
+            head2.set({ x: x + headWidth, y });
+        }
+    }
+});
+
+
+