From cbfa741ff4fb7681ad91249aabf82943bce799b2 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 24 Feb 2020 23:52:21 +0000
Subject: [PATCH] updated
---
canvas-10-feb/src/components/NodesLayer.vue | 90 ++++++++++---------
.../src/components/otherNodeslayer.vue | 67 +++++++++-----
canvas-10-feb/src/views/Home.vue | 3 +-
3 files changed, 94 insertions(+), 66 deletions(-)
diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
index 6028482..058163c 100644
--- a/canvas-10-feb/src/components/NodesLayer.vue
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -1,31 +1,39 @@
<template>
<div ref="nodes" class="node">
- <vue-draggable-resizable
- :w="200"
- :h="250"
- @dragging="onDrag"
- @resizing="onResize"
- @dragstop="onDragstop"
- style="background-color: rgb(205, 234, 255);"
- >
- <form>
- <div v-for="value in myNodes" v-bind:key="value.nodeid">
- <textarea
- v-if="nodeid == value.nodeid"
- @input="editNode"
- v-model="value.nodetext"
- :id="nodeid"
- ></textarea>
- </div>
- <div v-for="(value, index) in configPositions" v-bind:key="index">
- <p v-if="nodeid == value.nodeid">{{ x }}, {{ y }}</p>
- </div>
- <p>markdown supported</p>
- <button class="danger" @click="deleteFlag()">
- Delete
- </button>
- </form>
- </vue-draggable-resizable>
+ <div v-for="(value, index) in configPositions" v-bind:key="index">
+ <vue-draggable-resizable
+ v-if="nodeid == value.nodeid"
+ :w="200"
+ :h="250"
+ :x="value.xpos"
+ :y="value.ypos"
+ @dragging="onDrag"
+ @resizing="onResize"
+ @dragstop="onDragstop"
+ style="background-color: rgb(205, 234, 255);"
+ >
+ <form>
+ <div v-for="value in myNodes" v-bind:key="value.nodeid">
+ <textarea
+ v-if="nodeid == value.nodeid"
+ @input="editNode"
+ v-model="value.nodetext"
+ :id="nodeid"
+ ></textarea>
+ </div>
+ <!-- <div v-for="(value, index) in configPositions" v-bind:key="index">
+ <p v-if="nodeid == value.nodeid">
+ {{ localx }}, ({{ value.xpos }}) {{ localy }}
+ </p>
+ </div> -->
+
+ <p>markdown supported</p>
+ <button class="danger" @click="deleteFlag()">
+ Delete
+ </button>
+ </form>
+ </vue-draggable-resizable>
+ </div>
</div>
</template>
@@ -35,21 +43,20 @@ import { mapState } from 'vuex'
export default {
name: 'NodesLayer',
- props: { nodeid: String, nodetext: String, xpos: Number, ypos: Number },
+ props: { nodeid: String, nodetext: String },
data() {
return {
thistext: this.nodetext,
width: 0,
height: 0,
- x: this.xpos,
- y: this.ypos
+ localx: 0,
+ localy: 0
}
},
mounted() {
- // var nodes = this.$refs.nodes
- // this.makeDraggable(nodes)
+ //
},
computed: mapState({
myNodes: state => state.myNodes,
@@ -57,24 +64,27 @@ export default {
}),
methods: {
onResize(x, y, width, height) {
- this.x = x
- this.y = y
+ this.localx = x
+ this.localy = y
this.width = width
this.height = height
},
onDrag(x, y) {
- this.x = x
- this.y = y
+ this.localx = x
+ this.localy = y
},
onDragstop(x, y) {
var localnodeid = this.nodeid
- // console.log(x)
- // console.log(y)
- // console.log(localnodeid)
+
+ var i
+ for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+ if (this.configPositions[i].nodeid == this.nodeid) {
+ this.localx = this.configPositions[i].xpos
+ this.localy = this.configPositions[i].ypos
+ }
+ }
this.$store.dispatch('movePos', { localnodeid, x, y })
},
- // end DRAG update the right positions in DB
- // this.$store.dispatch('movePos', {this.nodeid, this.x, this.y})
setFocus() {
// this.$refs.nodetext.focus()
diff --git a/canvas-10-feb/src/components/otherNodeslayer.vue b/canvas-10-feb/src/components/otherNodeslayer.vue
index 0719517..3f6690b 100644
--- a/canvas-10-feb/src/components/otherNodeslayer.vue
+++ b/canvas-10-feb/src/components/otherNodeslayer.vue
@@ -1,33 +1,39 @@
<template>
<div ref="othernodes" class="node">
- <vue-draggable-resizable
- :w="200"
- :h="200"
- @dragging="onDrag"
- @resizing="onResize"
- style="border: 1px solid black; background-color: rgb(205, 234, 255);"
- >
- <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
- </vue-draggable-resizable>
+ <div v-for="(value, index) in configPositions" v-bind:key="index">
+ <vue-draggable-resizable
+ v-if="nodeid == value.nodeid"
+ :w="200"
+ :h="250"
+ :x="value.xpos"
+ :y="value.ypos"
+ @dragging="onDrag"
+ @resizing="onResize"
+ @dragstop="onDragstop"
+ style="border: 1px solid black; background-color: rgb(205, 234, 255);"
+ >
+ <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
+ </vue-draggable-resizable>
+ </div>
</div>
</template>
<script>
-//import { drag } from './mixins/drag.js'
+import { mapState } from 'vuex'
import marked from 'marked'
export default {
name: 'otherNodeslayer',
- //mixins: [drag],
props: { nodeid: String, nodetext: String },
- data: function() {
+ data() {
return {
+ thistext: this.nodetext,
width: 0,
height: 0,
- x: 0,
- y: 0
+ localx: 0,
+ localy: 0
}
},
@@ -35,20 +41,33 @@ export default {
marked: marked
},
- mounted() {
- // var othernodes = this.$refs.othernodes
- // this.makeDraggable(othernodes)
- },
+ mounted() {},
+ computed: mapState({
+ otherNodes: state => state.otherNodes,
+ configPositions: state => state.configPositions
+ }),
methods: {
- onResize: function(x, y, width, height) {
- this.x = x
- this.y = y
+ onResize(x, y, width, height) {
+ this.localx = x
+ this.localy = y
this.width = width
this.height = height
},
- onDrag: function(x, y) {
- this.x = x
- this.y = y
+ onDrag(x, y) {
+ this.localx = x
+ this.localy = y
+ },
+ onDragstop(x, y) {
+ var localnodeid = this.nodeid
+
+ var i
+ for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+ if (this.configPositions[i].nodeid == this.nodeid) {
+ this.localx = this.configPositions[i].xpos
+ this.localy = this.configPositions[i].ypos
+ }
+ }
+ this.$store.dispatch('movePos', { localnodeid, x, y })
}
}
}
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index b54ef67..da2ed08 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -54,8 +54,7 @@ export default {
},
computed: mapState({
myNodes: state => state.myNodes,
- otherNodes: state => state.otherNodes,
- configPositions: state => state.configPositions
+ otherNodes: state => state.otherNodes
}),
methods: {
clientAdded() {
--
GitLab