Merge branch 'fixhandles'

CHANGELOG.md

+# 0.1.2
+
+_1st March 2020_
+
+### Added
+
+- Imported missing css for handles for vue draggable, nodes are now resizable
+- Size of node is also sync'd in realtime cross devices
+
 # 0.1.1
 
 _29th Feb 2020_

app/package.json

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

app/src/components/DeBug.vue

@@ -2,9 +2,11 @@
   <div class="debug">
     <hr />
     <!-- <h2>Debug Options</h2> -->
-    <h4>LAST UPDATE 29th Feb 2020.</h4>
+    <h4>LAST UPDATE 1st March 2020.</h4>
     <p>You need to know what this button does before you press it.</p>
-    <button class="danger" @click="removeLocal()">Join another microcosm</button>
+    <button class="danger" @click="removeLocal()">
+      Join another microcosm
+    </button>
     <!-- <button @click="exportStorage()">Export my contributions</button>
     <button class="danger" v-on:click="deleteClient">
       Delete my contributions (inc. attachments) permanently

app/src/components/NodesLayer.vue

@@ -2,14 +2,17 @@
   <div ref="nodes" class="node">
     <div v-for="(value, index) in configPositions" v-bind:key="index">
       <vue-draggable-resizable
+        class="innernode"
         v-if="nodeid == value.nodeid"
-        :w="200"
-        :h="250"
+        :w="value.width"
+        :h="value.height"
         :x="value.xpos"
         :y="value.ypos"
+        @activated="onActivated"
         @dragging="onDrag"
         @resizing="onResize"
         @dragstop="onDragstop"
+        @resizestop="onResizestop"
         style="background-color: rgb(205, 234, 255);"
       >
         <form>
@@ -28,9 +31,7 @@
           </div>-->
 
           <p>markdown supported</p>
-          <button class="danger" @click="deleteFlag()">
-            Delete
-          </button>
+          <button class="danger" @click="deleteFlag()">Delete</button>
         </form>
       </vue-draggable-resizable>
     </div>
@@ -43,13 +44,18 @@ import { mapState } from 'vuex'
 export default {
   name: 'NodesLayer',
 
-  props: { nodeid: String, nodetext: String },
+  props: {
+    nodeid: String,
+    nodetext: String,
+    nodewidth: Number,
+    nodeheight: Number
+  },
 
   data() {
     return {
       thistext: this.nodetext,
-      width: 0,
-      height: 0,
+      width: this.nodewidth,
+      height: this.nodeheight,
       localx: 0,
       localy: 0
     }
@@ -63,19 +69,43 @@ export default {
     configPositions: state => state.configPositions
   }),
   methods: {
+    onActivated() {
+      var i
+      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        if (this.configPositions[i].nodeid == this.nodeid) {
+          this.width = this.configPositions[i].width
+          this.height = this.configPositions[i].height
+        }
+      }
+    },
     onResize(x, y, width, height) {
       this.localx = x
       this.localy = y
       this.width = width
       this.height = height
     },
+    onResizestop(x, y, width, height) {
+      var localnodeid = this.nodeid
+      var i
+      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        if (this.configPositions[i].nodeid == this.nodeid) {
+          this.width = this.configPositions[i].width
+          this.height = this.configPositions[i].height
+        }
+      }
+      this.width = width
+      this.height = height
+      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+    },
     onDrag(x, y) {
       this.localx = x
       this.localy = y
     },
-    onDragstop(x, y) {
+    onDragstop(x, y, width, height) {
       var localnodeid = this.nodeid
 
+      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) {
@@ -83,7 +113,7 @@ export default {
           this.localy = this.configPositions[i].ypos
         }
       }
-      this.$store.dispatch('movePos', { localnodeid, x, y })
+      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
     },
 
     setFocus() {
@@ -105,12 +135,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .node {
-  background-color: rgb(207, 177, 235);
   position: relative;
 }
 
 textarea {
-  width: 195px;
+  width: 100%;
   height: 120px;
   resize: none;
 }

app/src/components/OtherNodeslayer.vue

@@ -3,13 +3,15 @@
     <div v-for="(value, index) in configPositions" v-bind:key="index">
       <vue-draggable-resizable
         v-if="nodeid == value.nodeid"
-        :w="200"
-        :h="250"
+        :w="value.width"
+        :h="value.height"
         :x="value.xpos"
         :y="value.ypos"
+        @activated="onActivated"
         @dragging="onDrag"
         @resizing="onResize"
         @dragstop="onDragstop"
+        @resizestop="onResizestop"
         style="border: 1px solid black; background-color: rgb(205, 234, 255);"
       >
         <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
@@ -25,13 +27,18 @@ import marked from 'marked'
 export default {
   name: 'otherNodeslayer',
 
-  props: { nodeid: String, nodetext: String },
+  props: {
+    nodeid: String,
+    nodetext: String,
+    nodewidth: Number,
+    nodeheight: Number
+  },
 
   data() {
     return {
       thistext: this.nodetext,
-      width: 0,
-      height: 0,
+      width: this.nodewidth,
+      height: this.nodeheight,
       localx: 0,
       localy: 0
     }
@@ -47,19 +54,42 @@ export default {
     configPositions: state => state.configPositions
   }),
   methods: {
+    onActivated() {
+      var i
+      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        if (this.configPositions[i].nodeid == this.nodeid) {
+          this.width = this.configPositions[i].width
+          this.height = this.configPositions[i].height
+        }
+      }
+    },
     onResize(x, y, width, height) {
       this.localx = x
       this.localy = y
       this.width = width
       this.height = height
     },
+    onResizestop(x, y, width, height) {
+      var localnodeid = this.nodeid
+      var i
+      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        if (this.configPositions[i].nodeid == this.nodeid) {
+          this.width = this.configPositions[i].width
+          this.height = this.configPositions[i].height
+        }
+      }
+      this.width = width
+      this.height = height
+      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
+    },
     onDrag(x, y) {
       this.localx = x
       this.localy = y
     },
-    onDragstop(x, y) {
+    onDragstop(x, y, width, height) {
       var localnodeid = this.nodeid
-
+      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) {
@@ -67,7 +97,7 @@ export default {
           this.localy = this.configPositions[i].ypos
         }
       }
-      this.$store.dispatch('movePos', { localnodeid, x, y })
+      this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
     }
   }
 }

app/src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import PouchDB from 'pouchdb'
 PouchDB.plugin(require('pouchdb-find'))
 import VueDraggableResizable from 'vue-draggable-resizable'
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
 Vue.use(Vuex)
 Vue.component('vue-draggable-resizable', VueDraggableResizable)
@@ -193,12 +194,13 @@ const store = new Vuex.Store({
     },
 
     MOVE_POS(state, e) {
-      //console.log(e.localnodeid)
       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
+          state.configPositions[i].width = e.width
+          state.configPositions[i].height = e.height
         }
       }
 
@@ -278,7 +280,9 @@ const store = new Vuex.Store({
         doc.positions.push({
           nodeid: uniqueid,
           xpos: 50,
-          ypos: 50
+          ypos: 50,
+          width: 200,
+          height: 250
         })
         return pouchdb
           .put({
@@ -399,8 +403,8 @@ const store = new Vuex.Store({
       commit('SET_CLIENT', e)
     },
 
-    movePos: ({ commit }, nodeid, xpos, ypos) => {
-      commit('MOVE_POS', nodeid, xpos, ypos)
+    movePos: ({ commit }, nodeid, xpos, ypos, width, height) => {
+      commit('MOVE_POS', nodeid, xpos, ypos, width, height)
     },
 
     addNode: ({ commit }, e) => {