diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4465174a8f8961eb30836d5eff1e1dfa0a02f80b..a413a510656a8d4fa56183843a1d232f30f7ee15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 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_
diff --git a/app/package.json b/app/package.json
index 7041aa6b20d8ef2fda6ac2ee644c3dfa11808b0c..179d7a515884725615c78d13baac75e692a09c7d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.40",
+ "version": "0.1.41",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 425fac5891923faaa1036328d40f886a44b4c75e..1533f675964073e7f7a155818e373adb0f2fe123 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/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>
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index e870a08dd4820687aaa6e878ee6b0d72d849b842..a59adea9888135cd869e91b79577a760652d234b 100644
--- a/app/src/components/NodesLayer.vue
+++ b/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', {
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 0b1f75efaaf5419807e5f3c57316d229b42ca519..04f1fc596678127fa4d8435b8815d70b5e1fd5c1 100644
--- a/app/src/store/index.js
+++ b/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