Merge branch 'schema1'

CHANGELOG.md

+# 0.1.4
+
+_11th March 2020_
+
+### Added
+
+- Added a SCHEMA.md document to the repo to outline the way to call to the data in PouchDB/ CouchDB
+
+### Changed
+
+- Changed store/index.js, Home.vue, NodesLayer.vue and OtherNodeslayer.vue to work with new Schema structure
+
 # 0.1.3
 
 _4th March 2020_

SCHEMA.md

@@ -26,7 +26,7 @@ This is version 1 of the API documents to be created. For now this document outl
       "connect_id": "xboi6bducmngjv0yrgdhpf",
       "start_id": "7nltu5jdotbeb6t9hgm9dd",
       "end_id": "z67hbvdxr8nrsixn5nt6b9",
-      "connected": true
+      "connected": "true"
     }
 
 ]
@@ -43,7 +43,8 @@ This is version 1 of the API documents to be created. For now this document outl
 "x_pos": 831,
 "y_pos": 293,
 "width": 386,
-"height": 417
+"height": 417,
+"z_index":1
 }
 ]
 

app/babel.config.js

 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};
+  presets: ['@vue/cli-plugin-babel/preset']
+}

app/package.json

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

app/src/components/NodesLayer.vue

@@ -3,11 +3,12 @@
     <div v-for="(value, index) in configPositions" v-bind:key="index">
       <vue-draggable-resizable
         class="innernode"
-        v-if="nodeid == value.nodeid"
+        v-if="nodeid == value.node_id"
         :w="value.width"
         :h="value.height"
-        :x="value.xpos"
-        :y="value.ypos"
+        :x="value.x_pos"
+        :y="value.y_pos"
+        :z="value.z_index"
         @activated="onActivated"
         @dragging="onDrag"
         @resizing="onResize"
@@ -17,24 +18,19 @@
         style="background-color: rgb(205, 234, 255)"
       >
         <form>
-          <div v-for="value in myNodes" v-bind:key="value.nodeid">
+          <div v-for="value in myNodes" v-bind:key="value.node_id">
             <textarea
-              v-if="nodeid == value.nodeid"
+              v-if="nodeid == value.node_id"
               @input="editNode"
-              v-model="value.nodetext"
+              v-model="value.node_text"
               :id="nodeid"
               class="drag-cancel"
             ></textarea>
           </div>
           <h3>Reactions</h3>
           <div v-for="(emojis, index) in configEmoji" :key="index">
-            <p class="allemoji" v-if="nodeid == emojis.docid">{{ emojis.emojitext }}</p>
+            <p class="allemoji" v-if="nodeid == emojis.node_id">{{ emojis.emoji_text }}</p>
           </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>
@@ -59,12 +55,7 @@ export default {
 
   data() {
     return {
-      thistext: this.nodetext,
-      width: this.nodewidth,
-      height: this.nodeheight,
-      localx: 0,
-      localy: 0,
-      globalscale: 0.7
+      pickupz: 99
     }
   },
 
@@ -79,8 +70,9 @@ export default {
   methods: {
     onActivated() {
       var i
+
       for (i = 0; i < Object.keys(this.configPositions).length; i++) {
-        if (this.configPositions[i].nodeid == this.nodeid) {
+        if (this.configPositions[i].node_id == this.nodeid) {
           this.width = this.configPositions[i].width
           this.height = this.configPositions[i].height
         }
@@ -92,36 +84,53 @@ export default {
       this.width = width
       this.height = height
     },
-    onResizestop(x, y, width, height) {
+    onResizestop(x, y, width, height, zindex) {
       var localnodeid = this.nodeid
+      zindex = this.pickupz
       var i
       for (i = 0; i < Object.keys(this.configPositions).length; i++) {
-        if (this.configPositions[i].nodeid == this.nodeid) {
+        if (this.configPositions[i].node_id == this.nodeid) {
           this.width = this.configPositions[i].width
           this.height = this.configPositions[i].height
+          this.pickupz = this.configPositions[i].z_index
         }
       }
       this.width = width
       this.height = height
-      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+      this.$store.dispatch('movePos', {
+        localnodeid,
+        x,
+        y,
+        width,
+        height,
+        zindex
+      })
     },
     onDrag(x, y) {
       this.localx = x
       this.localy = y
     },
-    onDragstop(x, y, width, height) {
+    onDragstop(x, y, width, height, zindex) {
       var localnodeid = this.nodeid
-
+      zindex = this.pickupz
       width = this.width
       height = this.height
       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
+        if (this.configPositions[i].node_id == this.nodeid) {
+          this.localx = this.configPositions[i].x_pos
+          this.localy = this.configPositions[i].y_pos
+          this.pickupz = this.configPositions[i].z_index
         }
       }
-      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+      this.$store.dispatch('movePos', {
+        localnodeid,
+        x,
+        y,
+        width,
+        height,
+        zindex
+      })
     },
 
     setFocus() {

app/src/components/OnBoard.vue

@@ -5,9 +5,7 @@
       nodenogg.in is a
       <span>work in progress</span> collaborative co-creation research and
       design thinking tool, read more details and links in the
-      <a
-        href="/#/about"
-      >about</a> section.
+      <a href="/#/about">about</a> section.
     </p>
 
     <form v-show="parta">

app/src/components/OtherNodeslayer.vue

@@ -2,11 +2,12 @@
   <div ref="othernodes" class="node">
     <div v-for="(value, index) in configPositions" v-bind:key="index">
       <vue-draggable-resizable
-        v-if="nodeid == value.nodeid"
+        v-if="nodeid == value.node_id"
         :w="value.width"
         :h="value.height"
-        :x="value.xpos"
-        :y="value.ypos"
+        :x="value.x_pos"
+        :y="value.y_pos"
+        :z="value.z_index"
         @activated="onActivated"
         @dragging="onDrag"
         @resizing="onResize"
@@ -17,7 +18,7 @@
         <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
         <h3>Reactions</h3>
         <div v-for="(emojis, index) in configEmoji" :key="index">
-          <p class="allemoji" v-if="nodeid == emojis.docid">{{ emojis.emojitext }}</p>
+          <p class="allemoji" v-if="nodeid == emojis.node_id">{{ emojis.emoji_text }}</p>
         </div>
         <div class="react" v-if="nodeid != undefined">
           <h2>React</h2>
@@ -91,13 +92,9 @@ export default {
 
   data() {
     return {
-      thistext: this.nodetext,
-      width: this.nodewidth,
-      height: this.nodeheight,
-      localx: 0,
-      localy: 0,
       input: '',
-      search: ''
+      search: '',
+      pickupz: 99
     }
   },
 
@@ -115,9 +112,10 @@ export default {
     onActivated() {
       var i
       for (i = 0; i < Object.keys(this.configPositions).length; i++) {
-        if (this.configPositions[i].nodeid == this.nodeid) {
+        if (this.configPositions[i].node_id == this.nodeid) {
           this.width = this.configPositions[i].width
           this.height = this.configPositions[i].height
+          this.pickupz = this.configPositions[i].z_index
         }
       }
     },
@@ -127,44 +125,62 @@ export default {
       this.width = width
       this.height = height
     },
-    onResizestop(x, y, width, height) {
+    onResizestop(x, y, width, height, zindex) {
       var localnodeid = this.nodeid
+      zindex = this.pickupz
       var i
       for (i = 0; i < Object.keys(this.configPositions).length; i++) {
-        if (this.configPositions[i].nodeid == this.nodeid) {
+        if (this.configPositions[i].node_id == this.nodeid) {
           this.width = this.configPositions[i].width
           this.height = this.configPositions[i].height
+          this.pickupz = this.configPositions[i].z_index
         }
       }
       this.width = width
       this.height = height
-      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+      this.$store.dispatch('movePos', {
+        localnodeid,
+        x,
+        y,
+        width,
+        height,
+        zindex
+      })
     },
     onDrag(x, y) {
       this.localx = x
       this.localy = y
     },
-    onDragstop(x, y, width, height) {
+    onDragstop(x, y, width, height, zindex) {
       var localnodeid = this.nodeid
+      zindex = this.pickupz
       width = this.width
       height = this.height
       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
+        if (this.configPositions[i].node_id == this.nodeid) {
+          this.localx = this.configPositions[i].x_pos
+          this.localy = this.configPositions[i].y_pos
+          this.pickupz = this.configPositions[i].z_index
         }
       }
-      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+      this.$store.dispatch('movePos', {
+        localnodeid,
+        x,
+        y,
+        width,
+        height,
+        zindex
+      })
     },
     append(emoji) {
       this.input += emoji
     },
-    sentReact(docid, emojitext) {
+    sentReact(nodeid, emojitext) {
       emojitext = this.input
-      docid = this.nodeid
+      nodeid = this.nodeid
       this.$store.dispatch('addEmoji', {
-        docid,
+        nodeid,
         emojitext
       })
 
@@ -183,7 +199,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .node {
   background-color: aquamarine;
   position: absolute;

app/src/store/index.js

@@ -43,20 +43,8 @@ const store = new Vuex.Store({
     myclient: myclient,
     activeNode: {},
     // this will be objects containing arrays of all the handles / connections and nodes
-    configConnect: {
-      x: -25,
-      y: -25,
-      height: 50,
-      width: 50,
-      fill: 'rgb(200, 0, 0)'
-    },
-    configHandle: {
-      x: 25,
-      y: 25,
-      height: 10,
-      width: 10,
-      fill: 'black'
-    },
+    configConnect: {},
+    configHandle: {},
     allNodes: [],
     myNodes: [
       // { nodeid: 1, nodetext: 'node 1' },
@@ -115,7 +103,9 @@ const store = new Vuex.Store({
       for (i = 0; i < Object.keys(state.allNodes).length; i++) {
         if (
           state.allNodes[i].id != state.myclient &&
-          state.allNodes[i].id != state.global_pos_name
+          state.allNodes[i].id != state.global_pos_name &&
+          state.allNodes[i].id != state.global_emoji_name &&
+          state.allNodes[i].id != state.global_con_name
         ) {
           for (
             j = 0;
@@ -123,8 +113,8 @@ const store = new Vuex.Store({
             j++
           ) {
             const newNode = {
-              nodeid: state.allNodes[i].doc.nodes[j].nodeid,
-              nodetext: state.allNodes[i].doc.nodes[j].nodetext
+              node_id: state.allNodes[i].doc.nodes[j].node_id,
+              node_text: state.allNodes[i].doc.nodes[j].node_text
             }
 
             state.otherNodes.push(newNode)
@@ -162,9 +152,9 @@ const store = new Vuex.Store({
                   // FIXME: these values are here as GET_ALL_NODES cant hunt a blank
                   // this shouldnt need to be here
 
-                  nodeid: uniqueid,
-                  nodetext: 'Ignore this node' + state.myclient,
-                  nodeowner: state.myclient,
+                  node_id: uniqueid,
+                  node_text: 'Ignore this node' + state.myclient,
+                  node_owner: state.myclient,
                   content_type: 'sheet',
                   // TEMP: this hides the first node card as its effectivly auto deleted
                   deleted: true,
@@ -196,11 +186,12 @@ const store = new Vuex.Store({
     MOVE_POS(state, e) {
       var i
       for (i = 0; i < Object.keys(state.configPositions).length; i++) {
-        if (e.localnodeid == state.configPositions[i].nodeid) {
-          state.configPositions[i].xpos = e.x
-          state.configPositions[i].ypos = e.y
+        if (e.localnodeid == state.configPositions[i].node_id) {
+          state.configPositions[i].x_pos = e.x
+          state.configPositions[i].y_pos = e.y
           state.configPositions[i].width = e.width
           state.configPositions[i].height = e.height
+          state.configPositions[i].z_index = e.zindex
         }
       }
 
@@ -242,9 +233,9 @@ const store = new Vuex.Store({
       pouchdb.get(state.myclient).then(function(doc) {
         if (e == undefined) {
           doc.nodes.push({
-            nodeid: uniqueid,
-            nodetext: '',
-            nodeowner: state.myclient,
+            node_id: uniqueid,
+            node_text: '',
+            node_owner: state.myclient,
             content_type: 'sheet',
             deleted: false,
             attachment_name: e
@@ -278,11 +269,12 @@ const store = new Vuex.Store({
       })
       pouchdb.get(state.global_pos_name).then(function(doc) {
         doc.positions.push({
-          nodeid: uniqueid,
-          xpos: 50,
-          ypos: 50,
+          node_id: uniqueid,
+          x_pos: 50,
+          y_pos: 50,
           width: 200,
-          height: 250
+          height: 250,
+          z_index: 1
         })
         return pouchdb
           .put({
@@ -299,8 +291,8 @@ const store = new Vuex.Store({
     EDIT_NODE(state, e) {
       var i
       for (i = 0; i < Object.keys(state.myNodes).length; i++) {
-        if (e.nodeid == state.myNodes[i].nodeid) {
-          state.myNodes[i].nodetext = e.nodetext
+        if (e.nodeid == state.myNodes[i].node_id) {
+          state.myNodes[i].node_text = e.nodetext
         }
       }
       pouchdb
@@ -332,7 +324,7 @@ const store = new Vuex.Store({
     DELETE_FLAG(state, e) {
       var i
       for (i = 0; i < Object.keys(state.myNodes).length; i++) {
-        if (e.e == state.myNodes[i].nodeid) {
+        if (e.e == state.myNodes[i].node_id) {
           state.myNodes[i].deleted = true
         }
       }
@@ -387,9 +379,9 @@ const store = new Vuex.Store({
           .substring(2, 15)
       pouchdb.get(state.global_emoji_name).then(function(doc) {
         doc.emojis.push({
-          id: uniqueid,
-          docid: e.docid,
-          emojitext: e.emojitext
+          emoji_id: uniqueid,
+          node_id: e.nodeid,
+          emoji_text: e.emojitext
         })
         return pouchdb
           .put({
@@ -448,8 +440,8 @@ const store = new Vuex.Store({
       commit('SET_CLIENT', e)
     },
 
-    movePos: ({ commit }, nodeid, xpos, ypos, width, height) => {
-      commit('MOVE_POS', nodeid, xpos, ypos, width, height)
+    movePos: ({ commit }, nodeid, xpos, ypos, width, height, zindex) => {
+      commit('MOVE_POS', nodeid, xpos, ypos, width, height, zindex)
     },
 
     addNode: ({ commit }, e) => {
@@ -462,9 +454,9 @@ const store = new Vuex.Store({
       // var text = e.target.value
       commit('DELETE_FLAG', e)
     },
-    addEmoji: ({ commit }, { docid, emojitext }) => {
+    addEmoji: ({ commit }, { nodeid, emojitext }) => {
       commit('ADD_EMOJI', {
-        docid,
+        nodeid,
         emojitext
       })
     }

app/src/views/About.vue

@@ -23,7 +23,8 @@
       version {{ myVersion }} - See full
       <a
         href="https://gitlab.adamprocter.co.uk/nn/nodenoggin/-/blob/master/CHANGELOG.md"
-      >Changelog</a>
+        >Changelog</a
+      >
     </h3>
 
     <h3>known issues</h3>
@@ -51,9 +52,9 @@
       </li>
       <li>
         &nbsp;
-        <a
-          href="https://discursive.adamprocter.co.uk/categories/phd/"
-        >discursive (phd catergory link)</a>
+        <a href="https://discursive.adamprocter.co.uk/categories/phd/"
+          >discursive (phd catergory link)</a
+        >
         (blog)
       </li>
       <li>
@@ -76,7 +77,9 @@
       </li>
       <li>
         &nbsp;
-        <a href="https://github.com/adamprocter/couchdoc-mirror/issues">issues</a>
+        <a href="https://github.com/adamprocter/couchdoc-mirror/issues"
+          >issues</a
+        >
         (raise and review)
       </li>
     </ul>

app/src/views/Home.vue

@@ -4,16 +4,16 @@
     <div v-if="clientset">
       <OtherNodeslayer
         v-for="value in otherNodes"
-        v-bind:key="value.nodeid"
-        v-bind:nodeid="value.nodeid"
-        v-bind:nodetext="value.nodetext"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
       />
 
       <NodesLayer
         v-for="value in myNodes"
-        v-bind:key="value.nodeid"
-        v-bind:nodeid="value.nodeid"
-        v-bind:nodetext="value.nodetext"
+        v-bind:key="value.node_id"
+        v-bind:nodeid="value.node_id"
+        v-bind:nodetext="value.node_text"
       />
 
       <CanvasLayer />

app/vue.config.js

-process.env.VUE_APP_VERSION = require('./package.json').version
\ No newline at end of file
+process.env.VUE_APP_VERSION = require('./package.json').version