Merge branch 'couchmutations'

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

 <template>
   <div ref="nodes" class="node">
-    <form id="editForm" class="myScroll">
-      <textarea @input="editNode" v-model="thistext" :id="nodeid"></textarea>
+    <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>
       <p>markdown supported</p>
       <button>delete</button>
     </form>
@@ -10,6 +17,7 @@
 
 <script>
 import { drag } from './mixins/drag.js'
+import { mapState } from 'vuex'
 
 export default {
   name: 'NodesLayer',
@@ -27,6 +35,9 @@ export default {
     var nodes = this.$refs.nodes
     this.makeDraggable(nodes)
   },
+  computed: mapState({
+    myNodes: state => state.myNodes
+  }),
   methods: {
     setFocus() {
       // this.$refs.nodetext.focus()
@@ -44,7 +55,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .node {
-  background-color: aquamarine;
+  background-color: rgb(207, 177, 235);
   position: absolute;
 }
 </style>

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

+<template>
+  <div ref="othernodes" class="othernodes">
+    <form>
+      <p :id="nodeid">{{ nodetext }}</p>
+      <p>markdown supported</p>
+    </form>
+  </div>
+</template>
+
+<script>
+import { drag } from './mixins/drag.js'
+// import { mapState } from 'vuex'
+
+export default {
+  name: 'otherNodeslayer',
+  mixins: [drag],
+
+  props: { nodeid: Number, nodetext: String },
+
+  mounted() {
+    var othernodes = this.$refs.othernodes
+    this.makeDraggable(othernodes)
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.othernodes {
+  background-color: aquamarine;
+  /* position: absolute; */
+}
+</style>

canvas-10-feb/src/store/index.js

@@ -4,6 +4,9 @@ import PouchDB from 'pouchdb'
 import accounts from '../assets/settings.json'
 
 Vue.use(Vuex)
+// var rando = Math.random()
+//   .toString(16)
+//   .slice(2)
 var microcosm = 'podcast2020'
 var pouchdb = new PouchDB(microcosm)
 var remote =
@@ -17,7 +20,12 @@ var remote =
 
 const store = new Vuex.Store({
   state: {
+    localnodeid: null,
+    global_pos_name: 'positions',
+    // this is set with localStorage or could be random on Every Load
+    // so long as you can edit all nodes
     myclient: 'mac',
+    activeNode: {},
     // this will be objects containing arrays of all the handles / connections and nodes
     configConnect: {
       x: -25,
@@ -33,8 +41,14 @@ const store = new Vuex.Store({
       width: 10,
       fill: 'black'
     },
-    configNodes: [
+    myNodes: [
       // { nodeid: 1, nodetext: 'node 1' },
+    ],
+    otherNodes: [
+      //{}
+    ],
+    configPositions: [
+      //{}
     ]
   },
   mutations: {
@@ -45,18 +59,123 @@ const store = new Vuex.Store({
           attachments: true
         })
         .then(function(doc) {
-          state.configNodes = doc.rows[1].doc.nodes
+          var i
+          var j
+          for (i = 0; i < Object.keys(doc.rows).length; i++) {
+            if (state.myclient == doc.rows[i].key) {
+              state.myNodes = doc.rows[i].doc.nodes
+            }
+            if (
+              state.myclient != doc.rows[i].key &&
+              state.global_pos_name != doc.rows[i].key &&
+              state.global_con_name != doc.rows[i].key &&
+              state.global_emoji_name != doc.rows[i].key
+            ) {
+              for (j = 0; j < Object.keys(doc.rows[i].doc.nodes).length; j++) {
+                console.log(doc.rows[i].doc.nodes[j].nodeid)
+                console.log(doc.rows[i].doc.nodes[j].nodetext)
+                const newNode = {
+                  nodeid: doc.rows[i].doc.nodes[j].nodeid,
+                  nodetext: doc.rows[i].doc.nodes[j].nodetext
+                }
+                state.otherNodes.push(newNode)
+              }
+            }
+          }
         })
         .catch(function(err) {
           console.log(err)
         })
     },
+    GET_POSITIONS(state) {
+      pouchdb
+        .get(state.global_pos_name)
+        .then(function(doc) {
+          state.configPositions = doc.positions
+        })
+        .catch(function(err) {
+          console.log(err)
+          if (err.status == 404) {
+            return pouchdb.put({
+              _id: state.global_pos_name,
+              positions: []
+            })
+          }
+        })
+    },
+
+    MOVE_POS() {},
+
+    ADD_DOC(state, e) {
+      var uniqueid =
+        Math.random()
+          .toString(36)
+          .substring(2, 15) +
+        Math.random()
+          .toString(36)
+          .substring(2, 15)
+      state.localnodeid = uniqueid
+
+      pouchdb.get(state.myclient).then(function(doc) {
+        if (e == undefined) {
+          doc.notes.push({
+            nodeid: uniqueid,
+            nodetext: '',
+            nodeowner: state.myclient,
+            content_type: 'sheet',
+            deleted: false,
+            attachment_name: e
+          })
+        }
+
+        return pouchdb
+          .put({
+            _id: state.myclient,
+            _rev: doc._rev,
+            _attachments: doc._attachments,
+            nodes: doc.notes
+          })
+          .then(function() {
+            return pouchdb.get(state.myclient).then(function(doc) {
+              state.myNodes = doc.nodes
+              var end = Object.keys(state.myNodes).length - 1
+              const newNode = {
+                nodetext: state.myNodes[end].text,
+                nodeid: state.myNodes[end].id,
+                content_type: state.notes[end].content_type
+              }
+              state.activeNode = newNode
+            })
+          })
+          .catch(function(err) {
+            if (err.status == 404) {
+              // pouchdb.put({  })
+            }
+          })
+      })
+      pouchdb.get(state.global_pos_name).then(function(doc) {
+        doc.positions.push({
+          nodeid: uniqueid,
+          xpos: 50,
+          ypos: 50
+        })
+        return pouchdb
+          .put({
+            _id: state.global_pos_name,
+            _rev: doc._rev,
+            positions: doc.positions
+          })
+          .catch(function(err) {
+            console.log(err)
+          })
+      })
+    },
 
     EDIT_NODE(state, e) {
       var i
-      for (i = 0; i < Object.keys(state.configNodes).length; i++) {
-        if (e.nodeid == state.configNodes[i].nodeid) {
-          state.configNodes[i].nodetext = e.nodetext
+      for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+        if (e.nodeid == state.myNodes[i].nodeid) {
+          state.myNodes[i].nodetext = e.nodetext
         }
       }
       pouchdb
@@ -68,13 +187,13 @@ const store = new Vuex.Store({
               _id: state.myclient,
               _rev: doc._rev,
               _attachments: doc._attachments,
-              nodes: state.configNodes
+              nodes: state.myNodes
             }
           ])
         })
         .then(function() {
           return pouchdb.get(state.myclient).then(function(doc) {
-            state.configNodes = doc.nodes
+            state.myNodes = doc.nodes
           })
         })
         .catch(function(err) {
@@ -88,13 +207,15 @@ const store = new Vuex.Store({
     syncDB: () => {
       pouchdb.replicate.from(remote).on('complete', function() {
         store.commit('GET_NODES')
+        store.commit('GET_POSITIONS')
         // turn on two-way, continuous, retriable sync
         pouchdb
           .sync(remote, { live: true, retry: true, attachments: true })
           .on('change', function() {
             // pop info into function to find out more
-            //console.log('change')
+            console.log('change')
             store.commit('GET_NODES')
+            store.commit('GET_POSITIONS')
           })
           .on('paused', function() {
             // replication paused (e.g. replication up to date, user went offline)

canvas-10-feb/src/views/Home.vue

 <template>
   <div class="home">
-    <!-- The number of NodesLayers comes from store -->
+    <otherNodeslayer
+      v-for="value in otherNodes"
+      v-bind:key="value.nodeid"
+      v-bind:nodeid="value.nodeid"
+      v-bind:nodetext="value.nodetext"
+    />
     <NodesLayer
-      v-for="(value, index) in configNodes"
-      v-bind:key="index"
+      v-for="value in myNodes"
+      v-bind:key="value.nodeid"
       v-bind:nodeid="value.nodeid"
       v-bind:nodetext="value.nodetext"
     />
+
     <CanvasLayer />
     <ControlsLayer />
   </div>
@@ -16,6 +22,7 @@
 // @ is an alias to /src
 import CanvasLayer from '@/components/CanvasLayer.vue'
 import NodesLayer from '@/components/NodesLayer.vue'
+import otherNodeslayer from '@/components/otherNodeslayer.vue'
 import ControlsLayer from '@/components/ControlsLayer.vue'
 
 import { mapState } from 'vuex'
@@ -25,10 +32,12 @@ export default {
   components: {
     CanvasLayer,
     NodesLayer,
+    otherNodeslayer,
     ControlsLayer
   },
   computed: mapState({
-    configNodes: state => state.configNodes
+    myNodes: state => state.myNodes,
+    otherNodes: state => state.otherNodes
   })
 }
 </script>