changed myNodes

myNodes now is not reactive which fixed the major sync bug !! YES !

CHANGELOG.md

+# 0.1.25
+
+_2nd October 2020_
+
+### Fixed
+
+- Major sync bug when multiplayer is now fixed!
+
 # 0.1.24
 
 _23rd September 2020_

app/package.json

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

app/src/components/NodesLayer.vue

@@ -18,11 +18,12 @@
         >
           <form>
             <div v-if="value.read_mode == false">
-              <div v-for="value in myNodes" v-bind:key="value.node_id">
+              <div v-for="value in $options.myArray" v-bind:key="value.node_id">
                 <textarea
                   v-if="nodeid == value.node_id"
                   @focus="editTrue(true)"
                   @blur="editTrue(false)"
+                  v-model="value.node_text"
                   autofocus
                   @input="editNode"
                   :id="nodeid"
@@ -102,18 +103,20 @@
         >
           <form>
             <div v-if="value.read_mode == false">
-              <div v-for="value in myNodes" v-bind:key="value.node_id">
+              <div v-for="value in $options.myArray" v-bind:key="value.node_id">
                 <div v-if="nodeid == value.node_id">
                   <textarea
                     @focus="editTrue(true)"
                     @blur="editTrue(false)"
                     autofocus
+                    v-model="value.node_text"
                     @input="editNode"
                     :id="nodeid"
                     class="drag-cancel"
                     ref="nodetext"
                     placeholder="Idea goes here! (auto saved every keystroke)"
-                  ></textarea>
+                  >
+                  </textarea>
                 </div>
               </div>
             </div>
@@ -188,6 +191,7 @@ export default {
       pickupz: 1,
       localreadmode: false,
       mode: '',
+      // firstload: true,
     }
   },
 
@@ -216,6 +220,12 @@ export default {
     configEmoji: (state) => state.configEmoji,
     toolmode: (state) => state.ui.mode,
   }),
+  myArray: null,
+  created() {
+    //access the custom option using $options
+    this.$options.myArray = this.myNodes
+  },
+
   methods: {
     onActivated() {
       var i
@@ -302,6 +312,7 @@ export default {
 
     editTrue(e) {
       this.$emit('editTrue', e)
+      // this.firstload = false
       //  // console.log(e)
     },
 

app/src/views/List.vue

@@ -27,6 +27,7 @@
               @focus="editTrue(true)"
               @blur="editTrue(false)"
               autofocus
+              v-model="value.node_text"
               @input="editNode"
               :id="nodeid"
               ref="nodetext"
@@ -109,6 +110,7 @@ import ModeToolbar from '@/experimental/ModeToolbar'
 import { mapState } from 'vuex'
 import marked from 'marked'
 import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
+import lodash from 'lodash'
 
 export default {
   name: 'List',
@@ -201,11 +203,11 @@ export default {
       this.$store.dispatch('shortcutState', e)
     },
 
-    editNode(e) {
+    editNode: lodash.debounce(function (e) {
       var nodeid = e.target.id
       var nodetext = e.target.value
       this.$store.dispatch('editNode', { nodeid, nodetext })
-    },
+    }, 2000),
   },
 }
 </script>