diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9dfd69cdcc184a50014eb1d0c59582dead59dc13..4465174a8f8961eb30836d5eff1e1dfa0a02f80b 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 84516345016c1571431c78319fefc86b4dbb8478..768a637237d1450a03104a302e9fef42f00f5fb7 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",
@@ -13,7 +13,6 @@
"file-loader": "^6.2.0",
"ipfs": "^0.52.2",
"marked": "^1.2.5",
- "pixi.js": "^5.3.3",
"pouchdb": "^7.2.2",
"vue": "^2.6.12",
"vue-draggable-resizable": "^2.2.0",
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 2addb63c675feb4d4a8d584b56b107ed31ca3086..8a66b3b5d7d10f2ae20fcabc06b19dd38b2b7cd3 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -1,12 +1,70 @@
<template>
- <div class="connections">
- <canvas ref="pixi" id="pixi"></canvas>
+ <div>
+ <!-- view box same width as canvas -->
+ <!-- falls off edge -->
+ <svg id="connections" viewBox="0 0 2000 2000">
+ <g v-for="(value, index) in positions_filtered" v-bind:key="index">
+ <!-- still empty divs -->
+ <g v-for="(nodes, index) in nodes_filtered" 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 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>
+ </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>
<script>
import { mapState } from 'vuex'
-import * as PIXI from 'pixi.js'
+
//var initialMoveTo
//var id
var fromnode
@@ -15,296 +73,153 @@ var xposstart
var yposstart
var xposend
var yposend
-var endState = false
+var connectmode = false
+let newLine
+
+let drawing = false
export default {
name: 'ConnectionsLayer',
data() {
return {
- // localtoolstate: this.toolmode,
+ id: Number,
+ x: Number,
+ y: Number,
}
},
- computed: mapState({
- configConnections: (state) => state.configConnections,
- configPositions: (state) => state.configPositions,
- myNodes: (state) => state.myNodes,
- otherNodes: (state) => state.otherNodes,
- toolmode: (state) => state.ui.mode,
- // connectionstate: (state) => state.connectionstate,
- }),
+ computed: {
+ ...mapState({
+ configConnections: (state) => state.configConnections,
+ configPositions: (state) => state.configPositions,
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ toolmode: (state) => state.ui.mode,
+ // connectionstate: (state) => state.connectionstate,
+ }),
+
+ nodes_filtered: function () {
+ return this.myNodes.filter((nodes) => {
+ return nodes.deleted == false
+ })
+ },
- watch: {
- configConnections: {
- deep: true,
+ positions_filtered: function () {
+ return this.configPositions.filter((positions) => {
+ return this.myNodes.some((node) => {
+ return positions.node_id == node.node_id
+ })
+ })
+ },
- handler() {
- this.connectionsDraw()
- },
+ 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()
},
},
},
-
methods: {
toolState() {
if (this.toolmode == 'connect') {
- this.buttonsDraw()
+ connectmode = true
} else {
- this.connectionsDraw()
+ connectmode = false
}
},
+ // this should only fire if toolmode = connect
+ buttonPress(id, x, y) {
+ 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()
+ )
- makeConnection(id, xpos, ypos) {
- if (endState == false) {
- fromnode = id
- xposstart = xpos
- yposstart = ypos
-
- //count = 1
- // this.$store.dispatch('connectionState', true)
- } else if (endState == true) {
- tonode = id
- xposend = xpos
- yposend = ypos
+ 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)
- // count = 0
- // this.$store.dispatch('connectionState', false)
- // console.log(fromnode, tonode, xposstart, yposstart, xposend, yposend)
- this.$store.dispatch('makeConnect', {
- fromnode,
- tonode,
- xposstart,
- yposstart,
- xposend,
- yposend,
- })
- endState = false
+ document.getElementById('connections').appendChild(newLine)
}
},
- buttonsDraw() {
- var i
- var j
- //var n = 1
- var ref = this
- var buttonMap = {}
- var buttonMapOther = {}
-
- this.canvas = this.$refs.pixi
- const stage = this.PIXIApp.stage
- //const allButtons = new PIXI.Container()
-
- for (i = 0; i < Object.keys(this.myNodes).length; i++) {
- buttonMap[i] = new PIXI.Graphics()
- // console.log(buttonMap[i])
- for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- if (
- this.configPositions[j].node_id == this.myNodes[i].node_id &&
- this.myNodes[i].deleted == false
- ) {
- buttonMap[i].name = this.myNodes[i].node_id
- // console.log(button_one.name)
- buttonMap[i].lineStyle(1)
- buttonMap[i].beginFill(0xcab6ff, 1)
- // x, y, radius
-
- buttonMap[i].drawCircle(
- this.configPositions[j].x_pos + this.configPositions[j].width,
- this.configPositions[j].y_pos +
- this.configPositions[j].height / 2,
- 15
- )
- buttonMap[i].endFill()
- // names it the last one only?
- }
- // allButtons.addChild(buttonMap[i])
- // stage.addChild(allButtons)
- stage.addChild(buttonMap[i])
- // Opt-in to interactivity
- buttonMap[i].interactive = true
- // Shows hand cursor
- buttonMap[i].buttonMode = true
- }
-
- buttonMap[i]
- .on('pointerdown', onDragStart)
- .on('pointerdown', start)
- .on('pointerup', onDragEnd)
- .on('pointerup', finish)
- .on('pointerupoutside', onDragEndOutside)
- .on('pointermove', onDragMove)
- }
-
- for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
- buttonMapOther[i] = new PIXI.Graphics()
- // console.log(buttonMap[i])
- for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
- buttonMapOther[i].name = this.otherNodes[i].node_id
- // console.log(button_one.name)
- buttonMapOther[i].lineStyle(1)
- buttonMapOther[i].beginFill(0xcab6ff, 1)
- // x, y, radius
-
- buttonMapOther[i].drawCircle(
- this.configPositions[j].x_pos + this.configPositions[j].width,
- this.configPositions[j].y_pos +
- this.configPositions[j].height / 2,
- 15
- )
- buttonMapOther[i].endFill()
- // names it the last one only?
- }
- stage.addChild(buttonMapOther[i])
-
- // Opt-in to interactivity
- buttonMapOther[i].interactive = true
- // Shows hand cursor
- buttonMapOther[i].buttonMode = true
- }
-
- buttonMapOther[i]
- .on('pointerdown', onDragStart)
- .on('pointerdown', start)
- .on('pointerup', finish)
- .on('pointerup', onDragEnd)
- .on('pointerupoutside', onDragEndOutside)
- .on('pointermove', onDragMove)
- }
-
- let line = new PIXI.Graphics()
- var initialMoveTo
- let lines = []
-
- function start(event) {
- // console.log(this.getChildByName)
- this.id = this.name
- ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
- }
-
- function finish(event) {
- this.id = this.name
- if (this.id != fromnode) {
- endState = true
- ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
- } else {
- endState = false
- }
- }
-
- function onDragStart(event) {
- this.dragging = true
- // returns on the last one in the loop
- // console.log(button_one.name)
- let mouseX = event.data.global.x
- let mouseY = event.data.global.y
- initialMoveTo = [mouseX, mouseY]
-
- line.lineStyle(8, 0xcab6ff)
- line.moveTo(mouseX, mouseY)
-
- lines = [line].concat(lines)
-
- stage.addChild(line)
- }
-
- function onDragEnd() {
- //endState = true
- this.dragging = false
- stage.removeChild(line)
- }
-
- function onDragEndOutside() {
- stage.removeChild(line)
- // console.log('outside')
- // console.log(this.name)
- // console.log(fromnode)
- // if (this.name != fromnode) {
- // console.log('diff')
- // endState = true
- // this.dragging = false
- // stage.removeChild(line)
- // this.finish()
- // }
- // } else {
- // endState = false
- // this.dragging = false
- // stage.removeChild(line)
- // }
- }
-
- function onDragMove(event) {
- if (this.dragging) {
- let mouseX = event.data.global.x
- let mouseY = event.data.global.y
- lines[0].clear()
- lines[0].lineStyle(8, 0xcab6ff)
- lines[0].moveTo(initialMoveTo[0], initialMoveTo[1])
- lines[0].lineTo(mouseX, mouseY)
- }
- }
+ buttonUp(id, x, y) {
+ console.log(id, x, y)
+ drawing = false
+ document.getElementById('connections').removeChild(newLine)
+ fromnode = this.id
+ xposstart = this.x
+ yposstart = this.y
+ tonode = id
+ xposend = x
+ yposend = y
+
+ this.$store.dispatch('makeConnect', {
+ fromnode,
+ tonode,
+ xposstart,
+ yposstart,
+ xposend,
+ yposend,
+ })
},
+ },
+}
- connectionsDraw() {
- var i
- // var j
- this.canvas = this.$refs.pixi
- const stage = this.PIXIApp.stage
- let graphics = new PIXI.Graphics()
- //let line = new PIXI.Graphics()
-
- graphics.lineStyle(8, 0xcab6ff)
- // move the lines to start and end pos based on if to_node == node_id
- // or from_id == node_id
- //start_id == node_id
- // this will put them in the same place as buttons
-
- // for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
-
- // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // if (this.configConnections[j].start_id == this.otherNodes[i].node_id) {
-
- // for (j = 0; j < Object.keys(this.otherNodes).length; j++) {
- for (i = 0; i < Object.keys(this.configConnections).length; i++) {
- //start
-
- graphics.moveTo(
- this.configConnections[i].x_pos_start,
- this.configConnections[i].y_pos_start
- )
+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)
+ }
+}
+function onMouseUp() {
+ if (drawing) {
+ document.getElementById('connections').removeChild(newLine)
+ }
+}
- //end
- graphics.lineTo(
- this.configConnections[i].x_pos_end,
- this.configConnections[i].y_pos_end
- )
- }
- // }
- for (var l = stage.children.length - 1; l >= 0; l--) {
- stage.removeChild(stage.children[l])
- }
+function setup() {
+ document.addEventListener('mousemove', onMouseMove)
+ document.addEventListener('mouseup', onMouseUp)
+}
- stage.addChild(graphics)
- if (this.toolmode == 'connect') {
- this.buttonsDraw()
- }
- },
- },
- mounted() {
- const canvas = this.$refs.pixi
- this.PIXIApp = new PIXI.Application({
- width: 3000,
- height: 3000,
- antialias: true,
- transparent: true,
- view: canvas,
- })
+window.onload = () => setup()
+</script>
- this.connectionsDraw()
- },
+<style scoped>
+circle {
+ fill: rgb(187, 227, 255);
+ stroke: black;
+ stroke-width: 2;
}
-</script>
+</style>
diff --git a/app/src/components/old/ConnectionsLayer.vue b/app/src/components/old/ConnectionsLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2addb63c675feb4d4a8d584b56b107ed31ca3086
--- /dev/null
+++ b/app/src/components/old/ConnectionsLayer.vue
@@ -0,0 +1,310 @@
+<template>
+ <div class="connections">
+ <canvas ref="pixi" id="pixi"></canvas>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import * as PIXI from 'pixi.js'
+//var initialMoveTo
+//var id
+var fromnode
+var tonode
+var xposstart
+var yposstart
+var xposend
+var yposend
+var endState = false
+
+export default {
+ name: 'ConnectionsLayer',
+
+ data() {
+ return {
+ // localtoolstate: this.toolmode,
+ }
+ },
+ computed: mapState({
+ configConnections: (state) => state.configConnections,
+ configPositions: (state) => state.configPositions,
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ toolmode: (state) => state.ui.mode,
+ // connectionstate: (state) => state.connectionstate,
+ }),
+
+ watch: {
+ configConnections: {
+ deep: true,
+
+ handler() {
+ this.connectionsDraw()
+ },
+ },
+ toolmode: {
+ handler() {
+ this.toolState()
+ },
+ },
+ },
+
+ methods: {
+ toolState() {
+ if (this.toolmode == 'connect') {
+ this.buttonsDraw()
+ } else {
+ this.connectionsDraw()
+ }
+ },
+
+ makeConnection(id, xpos, ypos) {
+ if (endState == false) {
+ fromnode = id
+ xposstart = xpos
+ yposstart = ypos
+
+ //count = 1
+ // this.$store.dispatch('connectionState', true)
+ } else if (endState == true) {
+ tonode = id
+ xposend = xpos
+ yposend = ypos
+
+ // count = 0
+ // this.$store.dispatch('connectionState', false)
+ // console.log(fromnode, tonode, xposstart, yposstart, xposend, yposend)
+ this.$store.dispatch('makeConnect', {
+ fromnode,
+ tonode,
+ xposstart,
+ yposstart,
+ xposend,
+ yposend,
+ })
+ endState = false
+ }
+ },
+ buttonsDraw() {
+ var i
+ var j
+ //var n = 1
+ var ref = this
+ var buttonMap = {}
+ var buttonMapOther = {}
+
+ this.canvas = this.$refs.pixi
+ const stage = this.PIXIApp.stage
+ //const allButtons = new PIXI.Container()
+
+ for (i = 0; i < Object.keys(this.myNodes).length; i++) {
+ buttonMap[i] = new PIXI.Graphics()
+ // console.log(buttonMap[i])
+ for (j = 0; j < Object.keys(this.configPositions).length; j++) {
+ if (
+ this.configPositions[j].node_id == this.myNodes[i].node_id &&
+ this.myNodes[i].deleted == false
+ ) {
+ buttonMap[i].name = this.myNodes[i].node_id
+ // console.log(button_one.name)
+ buttonMap[i].lineStyle(1)
+ buttonMap[i].beginFill(0xcab6ff, 1)
+ // x, y, radius
+
+ buttonMap[i].drawCircle(
+ this.configPositions[j].x_pos + this.configPositions[j].width,
+ this.configPositions[j].y_pos +
+ this.configPositions[j].height / 2,
+ 15
+ )
+ buttonMap[i].endFill()
+ // names it the last one only?
+ }
+ // allButtons.addChild(buttonMap[i])
+ // stage.addChild(allButtons)
+ stage.addChild(buttonMap[i])
+ // Opt-in to interactivity
+ buttonMap[i].interactive = true
+ // Shows hand cursor
+ buttonMap[i].buttonMode = true
+ }
+
+ buttonMap[i]
+ .on('pointerdown', onDragStart)
+ .on('pointerdown', start)
+ .on('pointerup', onDragEnd)
+ .on('pointerup', finish)
+ .on('pointerupoutside', onDragEndOutside)
+ .on('pointermove', onDragMove)
+ }
+
+ for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
+ buttonMapOther[i] = new PIXI.Graphics()
+ // console.log(buttonMap[i])
+ for (j = 0; j < Object.keys(this.configPositions).length; j++) {
+ if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
+ buttonMapOther[i].name = this.otherNodes[i].node_id
+ // console.log(button_one.name)
+ buttonMapOther[i].lineStyle(1)
+ buttonMapOther[i].beginFill(0xcab6ff, 1)
+ // x, y, radius
+
+ buttonMapOther[i].drawCircle(
+ this.configPositions[j].x_pos + this.configPositions[j].width,
+ this.configPositions[j].y_pos +
+ this.configPositions[j].height / 2,
+ 15
+ )
+ buttonMapOther[i].endFill()
+ // names it the last one only?
+ }
+ stage.addChild(buttonMapOther[i])
+
+ // Opt-in to interactivity
+ buttonMapOther[i].interactive = true
+ // Shows hand cursor
+ buttonMapOther[i].buttonMode = true
+ }
+
+ buttonMapOther[i]
+ .on('pointerdown', onDragStart)
+ .on('pointerdown', start)
+ .on('pointerup', finish)
+ .on('pointerup', onDragEnd)
+ .on('pointerupoutside', onDragEndOutside)
+ .on('pointermove', onDragMove)
+ }
+
+ let line = new PIXI.Graphics()
+ var initialMoveTo
+ let lines = []
+
+ function start(event) {
+ // console.log(this.getChildByName)
+ this.id = this.name
+ ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
+ }
+
+ function finish(event) {
+ this.id = this.name
+ if (this.id != fromnode) {
+ endState = true
+ ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
+ } else {
+ endState = false
+ }
+ }
+
+ function onDragStart(event) {
+ this.dragging = true
+ // returns on the last one in the loop
+ // console.log(button_one.name)
+ let mouseX = event.data.global.x
+ let mouseY = event.data.global.y
+
+ initialMoveTo = [mouseX, mouseY]
+
+ line.lineStyle(8, 0xcab6ff)
+ line.moveTo(mouseX, mouseY)
+
+ lines = [line].concat(lines)
+
+ stage.addChild(line)
+ }
+
+ function onDragEnd() {
+ //endState = true
+ this.dragging = false
+ stage.removeChild(line)
+ }
+
+ function onDragEndOutside() {
+ stage.removeChild(line)
+ // console.log('outside')
+ // console.log(this.name)
+ // console.log(fromnode)
+ // if (this.name != fromnode) {
+ // console.log('diff')
+ // endState = true
+ // this.dragging = false
+ // stage.removeChild(line)
+ // this.finish()
+ // }
+ // } else {
+ // endState = false
+ // this.dragging = false
+ // stage.removeChild(line)
+ // }
+ }
+
+ function onDragMove(event) {
+ if (this.dragging) {
+ let mouseX = event.data.global.x
+ let mouseY = event.data.global.y
+ lines[0].clear()
+ lines[0].lineStyle(8, 0xcab6ff)
+ lines[0].moveTo(initialMoveTo[0], initialMoveTo[1])
+ lines[0].lineTo(mouseX, mouseY)
+ }
+ }
+ },
+
+ connectionsDraw() {
+ var i
+ // var j
+ this.canvas = this.$refs.pixi
+ const stage = this.PIXIApp.stage
+ let graphics = new PIXI.Graphics()
+ //let line = new PIXI.Graphics()
+
+ graphics.lineStyle(8, 0xcab6ff)
+ // move the lines to start and end pos based on if to_node == node_id
+ // or from_id == node_id
+ //start_id == node_id
+ // this will put them in the same place as buttons
+
+ // for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
+
+ // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
+ // if (this.configConnections[j].start_id == this.otherNodes[i].node_id) {
+
+ // for (j = 0; j < Object.keys(this.otherNodes).length; j++) {
+ for (i = 0; i < Object.keys(this.configConnections).length; i++) {
+ //start
+
+ graphics.moveTo(
+ this.configConnections[i].x_pos_start,
+ this.configConnections[i].y_pos_start
+ )
+
+ //end
+ graphics.lineTo(
+ this.configConnections[i].x_pos_end,
+ this.configConnections[i].y_pos_end
+ )
+ }
+ // }
+ for (var l = stage.children.length - 1; l >= 0; l--) {
+ stage.removeChild(stage.children[l])
+ }
+
+ stage.addChild(graphics)
+ if (this.toolmode == 'connect') {
+ this.buttonsDraw()
+ }
+ },
+ },
+ mounted() {
+ const canvas = this.$refs.pixi
+ this.PIXIApp = new PIXI.Application({
+ width: 3000,
+ height: 3000,
+ antialias: true,
+ transparent: true,
+ view: canvas,
+ })
+
+ this.connectionsDraw()
+ },
+}
+</script>
diff --git a/app/src/views/Organise.vue b/app/src/views/Organise.vue
index f0325accc840857086795cfa275dde0bf9de2f53..39fe72a2e6ca6a7576369219c3e52f2b09ab7ae8 100644
--- a/app/src/views/Organise.vue
+++ b/app/src/views/Organise.vue
@@ -39,7 +39,7 @@
<NodesLayer @edit-true="(e) => editTrue(e)" />
<TipsLayer />
<ModeCardorg />
- <!-- <ConnectionsLayer /> -->
+ <ConnectionsLayer />
</div>
<div v-else>
@@ -49,9 +49,9 @@
@client-added="clientAdded()"
@edit-true="(e) => editTrue(e)"
/>
- <!-- <ConnectionsLayer /> -->
+ <ConnectionsLayer />
</div>
- <ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
+ <!-- <ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer> -->
</PanZoomContainer>
<!-- <ToolBar /> -->
<ModeToolbar
@@ -77,12 +77,12 @@
<script>
import PanZoomContainer from '@/experimental/PanZoomContainer'
-// import ConnectionsLayer from '@/components/ConnectionsLayer'
+import ConnectionsLayer from '@/components/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer'
import OffLine from '@/components/OffLine'
// import ToolBar from '@/components/ToolBar'
-import ScribbleLayer from '@/components/ScribbleLayer'
+//import ScribbleLayer from '@/components/ScribbleLayer'
import UploadLayer from '@/components/UploadLayer'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import OnBoard from '@/components/OnBoard.vue'
@@ -214,12 +214,12 @@ export default {
// SelectionLayer,
NodesLayer,
OtherNodeslayer,
- // ConnectionsLayer,
+ ConnectionsLayer,
OnBoard,
// ToolBar,
OffLine,
UploadLayer,
- ScribbleLayer,
+ // ScribbleLayer,
TipsLayer,
ModeCardorg,
},