From fc9daed53d1aeffec95c951bec7c1b6c886caa88 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 9 Dec 2020 17:41:36 +0000
Subject: [PATCH] connections now use native SVG
You can now connect between all nodes using native SVG, this brings back previous pixijs functionality
---
CHANGELOG.md | 8 ++
app/package.json | 2 +-
app/src/components/ConnectionsLayer.vue | 112 ++++++++++++++++++------
3 files changed, 94 insertions(+), 28 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9dfd69c..4465174 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 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_
diff --git a/app/package.json b/app/package.json
index 7ad16a1..768a637 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.39",
+ "version": "0.1.40",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index f8eedab..8a66b3b 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/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)
}
--
GitLab