feat: 增加框选功能

demoV2/Layouter/ChainHashTable.js

@@ -34,7 +34,7 @@ SV.registerLayout('ChainHashTable', {
                 start: { 
                     type: 'line',
                     sourceAnchor: 1,
-                    targetAnchor: 5,
+                    targetAnchor: 6,
                     style: {
                         stroke: '#333',
                         endArrow: {
@@ -77,7 +77,7 @@ SV.registerLayout('ChainHashTable', {
                 xInterval: 50,
                 yInterval: 50
             },
-            interaction: {
+            behavior: {
                 dragNode: ['node']
             }
         };

demoV2/Layouter/LinkList.js

@@ -77,6 +77,9 @@ SV.registerLayout('LinkList', {
             layout: {
                 xInterval: 50,
                 yInterval: 50
+            },
+            behavior: {
+                dragNode: false
             }
         };
     },

demoV2/demo2.html

@@ -62,6 +62,7 @@
     <button id="resize">resize</button>
     <button id="relayout">relayout</button>
     <button id="switch-mode">switch mode</button>
+    <button id="brush-select">brush-select</button>
     <span id="pos"></span>
 
     <script src="./../dist/sv.js"></script>
@@ -89,8 +90,6 @@
 
     <script>
 
-        const curSelectData = { element: null, style: null };
-
         let cur = SV(document.getElementById('container'), {
             view: {
                 leakAreaHeight: 130,
@@ -101,18 +100,82 @@
 
         let data = [{
             Array: {
-                data: [{ id: 1, data: 1, external: 'list' }, { id: 2, data: 2 }, { id: 3, data: 3 }],
-                layouter: 'Array'
+                data: [
+                    { id: 1, data: 1, child: [2, 3], external: 'exx' },
+                    { id: 2, data: 2 },
+                    { id: 3, data: 3, child: [6, 4] },
+                    { id: 4, data: 4 },
+                    { id: 6, data: 6 }
+                ],
+                layouter: 'BinaryTree'
+            },
+            L: {
+                data: [
+                    { id: 11, data: 11, next: 22, external: 'tt' },
+                    { id: 22, data: 22, next: 33 },
+                    { id: 33, data: 33, next: 44 },
+                    { id: 44, data: 44, freed: true }
+                ],
+                layouter: 'LinkList'
+            },
+            "ChainHashTable": {
+                "data": [
+                    {
+                        "type": "head",
+                        "id": "0x618090",
+                        "data": "T"
+                    },
+                    {
+                        "type": "node",
+                        "id": "0x618030",
+                        "data": "N"
+                    },
+                    {
+                        "type": "head",
+                        "id": "0x6180f0",
+                        "data": "U",
+                        "start": "node#0x618030"
+                    },
+                    {
+                        "type": "node",
+                        "id": "0x617ff0",
+                        "data": "V",
+                        "next": "node#0x617fd0"
+                    },
+                    {
+                        "type": "node",
+                        "id": "0x617fd0",
+                        "data": "A"
+                    },
+                    {
+                        "type": "head",
+                        "id": "0x618010",
+                        "data": "O",
+                        "start": "node#0x617ff0"
+                    },
+                    {
+                        "type": "node",
+                        "id": "0x618050",
+                        "data": "K"
+                    },
+                    {
+                        "type": "head",
+                        "id": "0x6180b0",
+                        "data": "R",
+                        "start": "node#0x618050"
+                    }
+                ],
+                    "layouter": "ChainHashTable"
             }
         }, {
             Array: {
-                data: [{ id: 1, data: 1 }, { id: 2, data: 2 }],
-                layouter: 'Array'
-            }
-        }, {
-            Array: {
-                data: [{ id: 1, data: 1 }, { id: 5, data: 5 }],
-                layouter: 'Array'
+                data: [
+                    { id: 1, data: 1, child: [2, 3], external: 'exx' },
+                    { id: 2, data: 2 },
+                    { id: 3, data: 3, child: [6, 7] },
+                    { id: 7, data: 7 }
+                ],
+                layouter: 'BinaryTree'
             }
         }];
 
@@ -123,6 +186,13 @@
         let dataIndex = 0,
             curData = data[dataIndex];
 
+        let enableBrushSelect = false;
+
+        const container = document.getElementById('container'),
+            pos = document.getElementById('pos');
+
+        const leak = document.getElementById('leak');
+
         cur.render(curData);
 
         document.getElementById('btn-next').addEventListener('click', e => {
@@ -135,14 +205,6 @@
             cur.render(curData);
         });
 
-        const container = document.getElementById('container'),
-            pos = document.getElementById('pos');
-
-        container.addEventListener('mousemove', e => {
-            let x = e.offsetX, y = e.offsetY;
-            pos.innerHTML = `${x},${y}`;
-        });
-
         document.getElementById('resize').addEventListener('click', e => {
             container.style.height = 800 + 'px';
             cur.resize(container.offsetWidth, container.offsetHeight);
@@ -156,7 +218,10 @@
             cur.updateStyle('Array', newArrayOption);
         });
 
-        const leak = document.getElementById('leak');
+        document.getElementById('brush-select').addEventListener('click', e => {
+            enableBrushSelect = !enableBrushSelect;
+            cur.switchBrushSelect(enableBrushSelect);
+        });
 
         cur.on('onLeakAreaUpdate', payload => {
             leak.style.opacity = payload.hasLeak ? 1 : 0;
@@ -165,6 +230,12 @@
 
         // -------------------------------------------------------------------------------------------------------
 
+        container.addEventListener('mousemove', e => {
+            let x = e.offsetX, y = e.offsetY;
+            pos.innerHTML = `${x},${y}`;
+        });
+
+
 
     </script>
 </body>