diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7fe4e24e27688bd915131b8fc21efb380a1be869..2f7781d2f09f3aa7da467462639a8a7b12bba8c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# 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_
diff --git a/app/package.json b/app/package.json
index 774653f189076374acf6cccaf04bea2514eb15bb..f03c16559384c74737fab6a23634eab7cd3fbb2a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.1",
+ "version": "0.1.2",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/DeBug.vue b/app/src/components/DeBug.vue
index 68c32af54caa4cd3d7d9bdd185f55ae392d4390e..34150a9fcb45f99c2a8dc724b7a29a3c414c5928 100644
--- a/app/src/components/DeBug.vue
+++ b/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
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 058163c9e6ddbc35b383dd63a2746418a0d19318..0c89324debbfddef75a8e84194488ed3cb3b445f 100644
--- a/app/src/components/NodesLayer.vue
+++ b/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>
@@ -25,12 +28,10 @@
<p v-if="nodeid == value.nodeid">
{{ localx }}, ({{ value.xpos }}) {{ localy }}
</p>
- </div> -->
+ </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;
}
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 3f6690bedb31fa8c6ec26a6ed9be8e9bb4d790fc..3c17b1b137584cba9023ba6f691c6eb6de7b8b8e 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/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 })
}
}
}
diff --git a/app/src/store/index.js b/app/src/store/index.js
index c25958670d3eaa65f3b87e3a630609a044a0beba..a491a8fcaef432d2b5991b5266039f4a323bfa4f 100644
--- a/app/src/store/index.js
+++ b/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) => {