feat: Handle nodes selection and nodes properties window

zwave-js · Jan 2, 2020 · 1a03f72 · 1a03f72
1 parent 5c73aa4
commit 1a03f72
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 92 deletions.
diff --git a/src/assets/css/my-mesh.css b/src/assets/css/my-mesh.css
@@ -1,19 +1,42 @@
 .node.controller {
-    stroke: purple;
+  stroke: #9C27B0;
+  fill: #E1BEE7;
 }
 
 .node.sleep {
-    stroke: yellow;
+  stroke: #FFEB3B;
+  fill: #FFF9C4;
 }
 
 .node.alive {
-    stroke: green;
+  stroke: #4CAF50;
+  fill: #C8E6C9;
 }
 
-.node.failed .node.removed  {
-    stroke: black;
-} 
+.node.failed .node.removed {
+  stroke: #9E9E9E;
+  fill: #F5F5F5;
+}
+
+.node.dead {
+  stroke: #f44336;
+  fill: #ffcdd2;
+}
+
+.node.selected {
+  stroke: #1976d2;
+  fill: #03A9F4;
+}
+
+.node-label {
+  fill: #1976d2;
+}
 
-.node.dead  {
-    stroke: red;
-} 
+.details {
+  position: absolute;
+  top: 150px;
+  left: 30px;
+  background: #ccccccaa;
+  border: 2px solid black;
+  border-radius: 20px
+}
diff --git a/src/assets/css/my-orgchart.css b/src/assets/css/my-orgchart.css
diff --git a/src/components/Mesh.vue b/src/components/Mesh.vue
@@ -3,25 +3,73 @@
     <v-card>
       <v-container grid-list-md>
         <v-layout row wrap>
-          <v-flex xs3>
+          <v-flex xs2 md2>
             <v-text-field label="Nodes size" v-model.number="nodeSize" min="10" type="number"></v-text-field>
           </v-flex>
-          <v-flex xs3>
-            <v-text-field label="Link size" v-model.number="fontSize" min="10" type="number"></v-text-field>
+          <v-flex xs2 md2>
+            <v-text-field label="Font size" v-model.number="fontSize" min="10" type="number"></v-text-field>
           </v-flex>
-          <v-flex xs3>
-              <v-btn color="success" @click="downloadSVG">Download SVG</v-btn>
+          <v-flex xs3 md2>
+            <v-text-field label="Distance" v-model.number="force" min="100" type="number"></v-text-field>
+          </v-flex>
+          <v-flex xs5 md6>
+            <v-btn color="success" @click="downloadSVG">Download SVG</v-btn>
           </v-flex>
         </v-layout>
       </v-container>
 
       <d3-network
+        id="mesh"
         ref="mesh"
         :net-nodes="activeNodes"
         :net-links="links"
         :options="options"
+        :selection="selection"
         @node-click="nodeClick"
       />
+
+      <div id="properties" draggable v-show="showProperties" class="details">
+        <v-icon
+          @click="showProperties=false"
+          style="cursor:pointer;position:absolute;right:10px;top:10px"
+        >clear</v-icon>
+        <v-subheader>Node properties</v-subheader>
+        <v-list
+          v-if="selectedNode"
+          dense
+          style="min-width:300px;background:transparent"
+        >
+          <v-list-tile>
+            <v-list-tile-content>ID</v-list-tile-content>
+            <v-list-tile-content class="align-end">{{ selectedNode.data.node_id }}</v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile>
+            <v-list-tile-content>Status</v-list-tile-content>
+            <v-list-tile-content class="align-end">{{ selectedNode.data.status }}</v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile>
+            <v-list-tile-content>Type</v-list-tile-content>
+            <v-list-tile-content class="align-end">{{ selectedNode.data.type }}</v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile>
+            <v-list-tile-content>Product</v-list-tile-content>
+            <v-list-tile-content class="align-end">{{ selectedNode.data.product }}</v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile>
+            <v-list-tile-content>Manufacturer</v-list-tile-content>
+            <v-list-tile-content class="align-end">{{ selectedNode.data.manufacturer }}</v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile>
+            <v-list-tile-content>Name</v-list-tile-content>
+            <v-list-tile-content class="align-end">{{ selectedNode.data.name }}</v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile>
+            <v-list-tile-content>Location</v-list-tile-content>
+            <v-list-tile-content class="align-end">{{ selectedNode.data.loc }}</v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </div>
+
       <v-speed-dial bottom fab right fixed v-model="fab">
         <v-btn slot="activator" color="blue darken-2" dark fab hover v-model="fab">
           <v-icon>add</v-icon>
@@ -54,7 +102,7 @@ export default {
     options () {
       return {
         canvas: false,
-        force: 1500,
+        force: this.force,
         offset: {
           x: 0,
           y: 0
@@ -67,23 +115,39 @@ export default {
         strLinks: true,
         resizeListener: true
       }
+    },
+    selection () {
+      var s = {
+        nodes: [],
+        links: []
+      }
+
+      if (this.selectedNode) {
+        s.nodes[this.selectedNode.id] = this.selectedNode
+      }
+
+      return s
     }
   },
   data () {
     return {
       nodeSize: 20,
       fontSize: 10,
+      force: 2000,
       nodes: [],
       links: [],
-      fab: false
+      fab: false,
+      selectedNode: null,
+      showProperties: false
     }
   },
   methods: {
     showSnackbar (text) {
       this.$emit('showSnackbar', text)
     },
     nodeClick (e, node) {
-      this.selectedNode = this.nodes[node.id]
+      this.selectedNode = this.selectedNode === node ? null : node
+      this.showProperties = !!this.selectedNode
     },
     downloadSVG () {
       this.$refs.mesh.screenShot('myNetwork.svg', true, true)
@@ -92,10 +156,10 @@ export default {
       return {
         id: n.node_id,
         _cssClass: this.nodeClass(n),
-        name: n.product,
+        name: n.name ? n.name : n.product,
         node_id: n.node_id,
         status: n.status,
-        failed: n.failed
+        data: n
       }
     },
     nodeClass (n) {
@@ -122,6 +186,8 @@ export default {
       })
     },
     updateLinks () {
+      this.links = []
+
       for (const source of this.nodes) {
         if (source.neighbors) {
           for (const target of source.neighbors) {
@@ -179,6 +245,36 @@ export default {
 
     this.socket.emit(this.socketActions.init, true)
     this.refresh()
+
+    // make properties window draggable
+    var propertiesDiv = document.getElementById('properties')
+    var mesh = document.getElementById('mesh')
+    var isDown = false
+    var offset = [0, 0]
+    var dimensions = [mesh.clientWidth, mesh.clientHeight]
+
+    propertiesDiv.addEventListener('mousedown', function (e) {
+      isDown = true
+      offset = [
+        propertiesDiv.offsetLeft - e.clientX,
+        propertiesDiv.offsetTop - e.clientY
+      ]
+    }, true)
+
+    document.addEventListener('mouseup', function () {
+      isDown = false
+    }, true)
+
+    document.addEventListener('mousemove', function (e) {
+      event.preventDefault()
+      if (isDown) {
+        var l = e.clientX
+        var r = e.clientY
+
+        if (l > 0 && l < dimensions[0]) { propertiesDiv.style.left = l + offset[0] + 'px' }
+        if (r > 0 && r < dimensions[1]) { propertiesDiv.style.top = r + offset[1] + 'px' }
+      }
+    }, true)
   }
 }
 </script>