updated

canvas-10-feb/src/components/NodesLayer.vue

 <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()

canvas-10-feb/src/components/otherNodeslayer.vue

 <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 })
     }
   }
 }

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() {