ADD: Netdoc graph event handlings

frontend/src/views/nd/Netdoc.vue

@@ -46,24 +46,15 @@
       </b-col>
       <b-col>
         <b-card class="shadow-sm network-card" no-body>
-          <Network id="network" :nodes="[{id: 1,  label: 'circle',  shape: 'circle' },
-        {id: 2,  label: 'ellipse', shape: 'ellipse'},
-        {id: 3,  label: 'database',shape: 'database'},
-        {id: 4,  label: 'box',     shape: 'box'    },
-        {id: 5,  label: 'diamond', shape: 'diamond'},
-        {id: 6,  label: 'dot',     shape: 'dot'},
-        {id: 7,  label: 'square',  shape: 'square'},
-        {id: 8,  label: 'triangle',shape: 'triangle'}]"
-                   :edges=" [
-                 {from: 1, to: 2},
-                 {from: 2, to: 3},
-                 {from: 2, to: 4},
-                 {from: 2, to: 5},
-                 {from: 5, to: 6},
-                 {from: 5, to: 7},
-                 {from: 6, to: 8}
-                 ]"
+          <Network id="network"
+                   :nodes="network_nodes"
+                   :edges="network_edges"
                    :options="network_options"
+                   :events="['click', 'selectNode', 'hoverNode', 'dragStart']"
+                   @select-node="onNodeSelected"
+                   @hover-node="onNodeHovered"
+                   @drag-start="onDragStarted"
+                   @click="onClicked"
           />
         </b-card>
       </b-col>
@@ -89,18 +80,21 @@ export default {
       vlan2l2pports: {},
       vlan2pports: {},
       bcd_collapse_states: [],
+      network_nodes: [{ id: 0, label: 'Base', shape: 'circle' }],
+      network_edges: [],
       network_options: {
         nodes: {
-          borderWidth: 4
+          borderWidth: 4,
+          font: {
+            color: 'white',
+            face: 'arial'
+          }
         },
         edges: {
           color: 'lightgray'
-        },
-        font: {
-          color: 'red',
-          face: 'arial'
         }
-      }
+      },
+      interaction: { hover: true }
     }
   },
   async created() {
@@ -117,6 +111,31 @@ export default {
     },
     sort_bcds(a, b) {
       return (a.vlan_count === b.vlan_count) ? 0 : a.vlan_count ? -1 : 1
+    },
+    onClicked(e) {
+      if (e.nodes.length === 0) return
+      const selectedId = e.nodes[0]
+      const newId = this.network_nodes.length
+      this.network_nodes.push({ id: newId, label: 'Base', shape: 'circle' })
+      this.network_edges.push({ from: selectedId, to: newId })
+      window.console.log(newId)
+    },
+    onNodeSelected(e) {
+      const selectedId = e.nodes[0]
+      const newId = this.network_nodes.length
+      this.network_nodes.push({ id: newId, label: 'Base', shape: 'circle' })
+      this.network_edges.push({ from: selectedId, to: newId })
+      window.console.log(newId)
+    },
+    onNodeHovered(e) {
+      const selectedId = e.node
+      const newId = this.network_nodes.length
+      this.network_nodes.push({ id: newId, label: 'Base', shape: 'circle' })
+      this.network_edges.push({ from: selectedId, to: newId })
+      window.console.log(newId)
+    },
+    onDragStarted(e) {
+      window.console.log(e)
     }
   }
 }
@@ -141,7 +160,7 @@ export default {
 }
 
 .network-card {
-  height: 100%;
+  height: 75vh;
 }
 
 #network {