Merge branch 'zindex' into main

CHANGELOG.md

+# 0.1.41
+
+_11th December 2020_
+
+### Changed
+
+- added basic z-index incrementing, when you touch a node it will jump to the front a node gets to within max z-index > 2147483640 all nodes will reset to 0.
+
 # 0.1.40
 
 _9th December 2020_

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

app/src/components/ConnectionsLayer.vue

@@ -35,34 +35,41 @@
         </g>
       </g>
 
-      <g v-for="(value, index) in otherpositions_filtered" v-bind:key="index">
-        <g v-for="(nodes, index) in otherNodes" v-bind:key="index">
+      <g
+        v-for="(others, index) in otherpositions_filtered"
+        v-bind:key="'o' + index"
+      >
+        <g v-for="(othernodes, index) in otherNodes" v-bind:key="index">
           <template v-if="toolmode == 'connect'">
             <circle
-              v-if="nodes.node_id == value.node_id"
-              :cx="value.x_pos + value.width"
-              :cy="value.y_pos + value.height / 4"
+              v-if="othernodes.node_id == others.node_id"
+              :cx="others.x_pos + others.width"
+              :cy="others.y_pos + others.height / 4"
               r="15"
               width="30"
               height="30"
               @mousedown.prevent="
-                buttonPress(nodes.node_id, value.x_pos, value.y_pos)
+                buttonPress(othernodes.node_id, others.x_pos, others.y_pos)
               "
               @mouseup.prevent="
-                buttonUp(nodes.node_id, value.x_pos, value.y_pos)
+                buttonUp(othernodes.node_id, others.x_pos, others.y_pos)
               "
             />
           </template>
-        </g>
-        <g v-for="(lines, index) in configConnections" v-bind:key="index">
-          <line
-            v-if="lines.start_id == value.node_id"
-            :x1="lines.x_pos_start + value.width"
-            :y1="lines.y_pos_start + value.height / 4"
-            :x2="lines.x_pos_end"
-            :y2="lines.y_pos_end + value.height / 4"
-            style="stroke: rgb(255, 0, 0); stroke-width: 2"
-          />
+
+          <g
+            v-for="(otherlines, index) in configConnections"
+            v-bind:key="index"
+          >
+            <line
+              v-if="otherlines.start_id == others.node_id"
+              :x1="otherlines.x_pos_start + others.width"
+              :y1="otherlines.y_pos_start + others.height / 4"
+              :x2="otherlines.x_pos_end"
+              :y2="otherlines.y_pos_end + others.height / 4"
+              style="stroke: rgb(255, 0, 0); stroke-width: 2"
+            />
+          </g>
         </g>
       </g>
     </svg>

app/src/components/NodesLayer.vue

@@ -12,7 +12,7 @@
             :y="value.y_pos"
             :z="value.z_index"
             :scale="scale"
-            @activated="onActivated(nodes.node_id)"
+            @activated="onActivated(nodes.node_id, value.z_index)"
             :draggable="false"
             :resizable="false"
             @dragging="onDrag"
@@ -90,7 +90,7 @@
             :y="value.y_pos"
             :z="value.z_index"
             :scale="scale"
-            @activated="onActivated(nodes.node_id)"
+            @activated="onActivated(nodes.node_id, value.z_index)"
             @dragging="onDrag"
             @resizing="onResize"
             @dragstop="onDragstop"
@@ -200,6 +200,7 @@ export default {
     ...mapState({
       scale: (state) => state.ui.scale,
       myNodes: (state) => state.myNodes,
+
       configPositions: (state) => state.configPositions,
       configConnections: (state) => state.configConnections,
       configEmoji: (state) => state.configEmoji,
@@ -266,13 +267,33 @@ export default {
       this.$options.positionsArray = this.positions_filtered
       this.$forceUpdate()
     },
-    onActivated(e) {
-      this.nodeid = e
+    onActivated(id, zindex) {
+      this.zindex = zindex
+      this.nodeid = id
       var i
+      var zindexes = []
+
       for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        //console.log(Math.max(...this.configPositions[i].z_index))
+        zindexes.push(this.configPositions[i].z_index)
+        if (this.configPositions[i].node_id == this.nodeid) {
+          this.width = this.configPositions[i].width
+          this.height = this.configPositions[i].height
+          this.zindex = this.configPositions[i].z_index
+        }
+        // console.log(Math.max(...zindexes))
+      }
+      var topZ = Math.max(...zindexes)
+
+      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        if (topZ > 2147483640) {
+          this.configPositions[i].z_index = 0
+        }
+
         if (this.configPositions[i].node_id == this.nodeid) {
           this.width = this.configPositions[i].width
           this.height = this.configPositions[i].height
+          this.configPositions[i].z_index = topZ + 1
         }
       }
     },
@@ -282,15 +303,15 @@ export default {
       this.width = width
       this.height = height
     },
-    onResizestop(x, y, width, height, zindex) {
+    onResizestop(x, y, width, height) {
       var localnodeid = this.nodeid
-      zindex = this.pickupz
+      var zindex
       var i
       for (i = 0; i < Object.keys(this.configPositions).length; i++) {
         if (this.configPositions[i].node_id == this.nodeid) {
           this.width = this.configPositions[i].width
           this.height = this.configPositions[i].height
-          this.pickupz = this.configPositions[i].z_index
+          zindex = this.configPositions[i].z_index
         }
       }
       this.width = width
@@ -308,9 +329,9 @@ export default {
       this.localx = x
       this.localy = y
     },
-    onDragstop(x, y, width, height, zindex) {
+    onDragstop(x, y, width, height) {
       var localnodeid = this.nodeid
-      zindex = this.pickupz
+      var zindex
       width = this.width
       height = this.height
       var i
@@ -319,7 +340,7 @@ export default {
         if (this.configPositions[i].node_id == this.nodeid) {
           this.localx = this.configPositions[i].x_pos
           this.localy = this.configPositions[i].y_pos
-          this.pickupz = this.configPositions[i].z_index
+          zindex = this.configPositions[i].z_index
         }
       }
       this.$store.dispatch('movePos', {

app/src/store/index.js

@@ -391,6 +391,22 @@ const store = new Vuex.Store({
     // },
 
     ADD_NODE(state) {
+      var i
+      var totalNodes = []
+      const reducer = (accumulator, currentValue) => accumulator + currentValue
+      for (i = 0; i < Object.keys(state.allNodes).length; i++) {
+        if (
+          state.allNodes[i].id != state.global_pos_name &&
+          state.allNodes[i].id != state.global_emoji_name &&
+          state.allNodes[i].id != state.global_con_name //&&
+          //
+        ) {
+          // console.log(state.allNodes[i].doc.nodes.length)
+          totalNodes.push(state.allNodes[i].doc.nodes.length)
+        }
+      }
+
+      var zindex = totalNodes.reduce(reducer)
       var uniqueid =
         Math.random().toString(36).substring(2, 15) +
         Math.random().toString(36).substring(2, 15)
@@ -461,7 +477,7 @@ const store = new Vuex.Store({
           y_pos: localypos,
           width: 200,
           height: 370,
-          z_index: 10,
+          z_index: zindex,
           read_mode: false,
         })
         return pouchdb