connections now use native SVG

You can now connect between all nodes using native SVG, this brings back previous pixijs functionality

CHANGELOG.md

+# 0.1.40
+
+_9th December 2020_
+
+## Fixed
+
+- Connections are now working in the same way as before but using native SVG code and no longer the pixi library.
+
 # 0.1.39
 
 _8th December 2020_

app/package.json

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

app/src/components/ConnectionsLayer.vue

@@ -31,6 +31,33 @@
           </g>
         </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">
+          <circle
+            v-if="nodes.node_id == value.node_id"
+            :cx="value.x_pos + value.width"
+            :cy="value.y_pos + value.height / 4"
+            r="15"
+            width="30"
+            height="30"
+            @mousedown.prevent="
+              buttonPress(nodes.node_id, value.x_pos, value.y_pos)
+            "
+            @mouseup.prevent="buttonUp(nodes.node_id, value.x_pos, value.y_pos)"
+          />
+        </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>
+      </g>
     </svg>
   </div>
 </template>
@@ -46,8 +73,9 @@ var xposstart
 var yposstart
 var xposend
 var yposend
-
+var connectmode = false
 let newLine
+
 let drawing = false
 
 export default {
@@ -83,39 +111,62 @@ export default {
         })
       })
     },
+
+    otherpositions_filtered: function () {
+      return this.configPositions.filter((otherpositions) => {
+        return this.otherNodes.some((node) => {
+          return otherpositions.node_id == node.node_id
+        })
+      })
+    },
   },
 
-  // watch: {
-  //   toolmode: {
-  //     handler() {
-  //       this.toolState()
-  //     },
-  //   },
-  // },
+  watch: {
+    toolmode: {
+      handler() {
+        this.toolState()
+      },
+    },
+  },
   methods: {
+    toolState() {
+      if (this.toolmode == 'connect') {
+        connectmode = true
+      } else {
+        connectmode = false
+      }
+    },
     // this should only fire if toolmode = connect
     buttonPress(id, x, y) {
-      drawing = true
-      this.id = id
-      this.x = x
-      this.y = y
-
-      newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line')
-
-      //newLine.setAttribute('id', 'line2');
-      newLine.setAttribute('stroke', 'red')
-      newLine.setAttribute('stroke-width', '2')
-      newLine.setAttribute('x1', event.clientX)
-      newLine.setAttribute('y1', event.clientY)
-      newLine.setAttribute('x2', event.clientX)
-      newLine.setAttribute('y2', event.clientY)
-
-      document.getElementById('connections').appendChild(newLine)
+      console.log(id, x, y)
+      if (connectmode == true) {
+        drawing = true
+        this.id = id
+        this.x = x
+        this.y = y
+
+        newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+
+        const pt = document.getElementById('connections').createSVGPoint()
+        pt.x = event.clientX
+        pt.y = event.clientY
+        const svgP = pt.matrixTransform(
+          document.getElementById('connections').getScreenCTM().inverse()
+        )
+
+        newLine.setAttribute('stroke', 'red')
+        newLine.setAttribute('stroke-width', '2')
+        newLine.setAttribute('x1', svgP.x)
+        newLine.setAttribute('y1', svgP.y)
+        newLine.setAttribute('x2', svgP.x)
+        newLine.setAttribute('y2', svgP.y)
+
+        document.getElementById('connections').appendChild(newLine)
+      }
     },
 
-    // this should only fire if ID is present
-    // lots of empty connections
     buttonUp(id, x, y) {
+      console.log(id, x, y)
       drawing = false
       document.getElementById('connections').removeChild(newLine)
       fromnode = this.id
@@ -137,9 +188,16 @@ export default {
   },
 }
 
-function onMouseMove(event) {
+function onMouseMove() {
   //Add code here
   if (drawing) {
+    // const pt = document.getElementById('connections').createSVGPoint()
+    // pt.x = event.clientX
+    // pt.y = event.clientY
+    // const svgP = pt.matrixTransform(
+    //   document.getElementById('connections').getScreenCTM().inverse()
+    // )
+
     newLine.setAttribute('x2', event.clientX)
     newLine.setAttribute('y2', event.clientY)
   }