fix: 新增可以修改整体样式的接口

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,9 +16,9 @@ SV.registerLayout('Array', {
 
     defineOptions() {
         return {
-            node: { 
+            node: {
                 default: {
-                    type: 'rect',
+                    type: 'array-node',
                     label: '[id]',
                     size: [60, 30],
                     labelOptions: {
@@ -56,77 +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);
             }
         }
     }
-}); 
+});
 
-
-
-
-SV.registerLayout('Array', {
-
-    sourcesPreprocess(sources) {
-        const firstElement = sources[0];
-
-        if(firstElement.external) {
-            firstElement.headExternal = firstElement.external;
-            delete firstElement.external;
-        }
-
-        return sources;
-    },
-
-    defineOptions() {
-        return {
-            node: { 
-                default: {
-                    type: 'indexed-node',
-                    label: '[id]',
-                    size: [60, 30],
-                    style: {
-                        stroke: '#333',
-                        fill: '#355c7d'
-                    }
-                }
-            },
-            marker: {
-                headExternal: {
-                    type: 'pointer',
-                    anchor: 3,
-                    style: {
-                        fill: '#f08a5d'
-                    }
-                },
-                external: {
-                    type: 'pointer',
-                    anchor: 0,
-                    style: {
-                        fill: '#f08a5d'
-                    }
-                }
-            },
-            indexLabel: {
-                index: { position: 'bottom' },
-                indexTop: { position: 'top' }
-            }
-        };
-    },
-
-    layout(elements) {
-        let arr = elements;
-
-        for(let i = 0; i < arr.length; i++) {
-            let width = arr[i].get('size')[0];
-
-            if(i > 0) {
-                arr[i].set('x', arr[i - 1].get('x') + width);
-            }
-        }
-    }
-}, 'colorful'); 

demoV2/demo2.html

@@ -100,27 +100,8 @@
 
 
         let data = [{
-            PTree: {
-                data: [
-                    {
-                        id: '1001',
-                        data: 'A',
-                        parent: -1,
-                        index: 0
-                    },
-                    {
-                        id: '1002',
-                        data: 'B',
-                        parent: 0,
-                        index: 1
-                    },
-                ],
-                layouter: 'PTree'
-
-            }
-        }, {
             Array: {
-                data: [{ id: 1, data: 1 }, { id: 2, data: 2 }, { id: 3, data: 3 }],
+                data: [{ id: 1, data: 1, external: 'list' }, { id: 2, data: 2 }, { id: 3, data: 3 }],
                 layouter: 'Array'
             }
         }, {
@@ -172,7 +153,7 @@
         });
 
         document.getElementById('switch-mode').addEventListener('click', e => {
-            cur.switchMode('Array', 'colorful');
+            cur.updateStyle('Array', newArrayOption);
         });
 
         const leak = document.getElementById('leak');