diff --git a/canvas-10-feb/package.json b/canvas-10-feb/package.json
index c8de4a4402f271c32999647acf846a2a0b59c98a..a6fd2aa1095185779e6f1cda7b6ea73aa41dee0e 100644
--- a/canvas-10-feb/package.json
+++ b/canvas-10-feb/package.json
@@ -10,7 +10,9 @@
"dependencies": {
"core-js": "^3.6.4",
"pouchdb": "^7.2.1",
+ "pouchdb-find": "^7.2.1",
"vue": "^2.6.11",
+ "vue-draggable-resizable": "^2.1.0",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
index 7542a58ddd0972063e5da1391563752427ebf073..be4a4a4dd548f49bc53b9f08715c759e21c6a532 100644
--- a/canvas-10-feb/src/components/NodesLayer.vue
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -1,44 +1,66 @@
<template>
<div ref="nodes" class="node">
- <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>
+ <vue-draggable-resizable
+ :w="200"
+ :h="200"
+ @dragging="onDrag"
+ @resizing="onResize"
+ style="background-color: rgb(205, 234, 255);"
+ >
+ <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>
+ <p>markdown supported</p>
+ <button>delete</button>
+ </form>
+ </vue-draggable-resizable>
</div>
</template>
<script>
-import { drag } from './mixins/drag.js'
+//import { drag } from './mixins/drag.js'
import { mapState } from 'vuex'
export default {
name: 'NodesLayer',
- mixins: [drag],
- props: { nodeid: Number, nodetext: String },
+ // mixins: [drag],
+ props: { nodeid: String, nodetext: String },
data() {
return {
- thistext: this.nodetext
+ thistext: this.nodetext,
+ width: 0,
+ height: 0,
+ x: 0,
+ y: 0
}
},
mounted() {
- var nodes = this.$refs.nodes
- this.makeDraggable(nodes)
+ // var nodes = this.$refs.nodes
+ // this.makeDraggable(nodes)
},
computed: mapState({
myNodes: state => state.myNodes
}),
methods: {
+ onResize: function(x, y, width, height) {
+ this.x = x
+ this.y = y
+ this.width = width
+ this.height = height
+ },
+ onDrag: function(x, y) {
+ this.x = x
+ this.y = y
+ },
setFocus() {
// this.$refs.nodetext.focus()
},
@@ -56,6 +78,12 @@ export default {
<style scoped>
.node {
background-color: rgb(207, 177, 235);
- position: absolute;
+ position: relative;
+}
+
+textarea {
+ width: 195px;
+ height: 120px;
+ resize: none;
}
</style>
diff --git a/canvas-10-feb/src/components/OnBoard.vue b/canvas-10-feb/src/components/OnBoard.vue
index cc29351a0077a66e7cfe43217dca3183754f5843..46edd71e8eabd2018e83c9a7b307d44b534916e8 100644
--- a/canvas-10-feb/src/components/OnBoard.vue
+++ b/canvas-10-feb/src/components/OnBoard.vue
@@ -92,6 +92,7 @@ export default {
this.$store.dispatch('setClient', this.clientid),
localStorage.setItem('myNNClient', this.clientid)
},
+
letsGo() {
this.$emit('clientAdded')
// this.$emit('readyMode')
diff --git a/canvas-10-feb/src/components/otherNodeslayer.vue b/canvas-10-feb/src/components/otherNodeslayer.vue
index 911ba249ee8d93c1bf20e51ff8b0119c7c6407f2..291d99f453b3758d0bab871d7fabb500f96a9f5f 100644
--- a/canvas-10-feb/src/components/otherNodeslayer.vue
+++ b/canvas-10-feb/src/components/otherNodeslayer.vue
@@ -1,22 +1,51 @@
<template>
<div ref="othernodes" class="node">
- <p :id="nodeid">{{ nodetext }}</p>
- <p>markdown supported</p>
+ <vue-draggable-resizable
+ :w="200"
+ :h="200"
+ @dragging="onDrag"
+ @resizing="onResize"
+ style="border: 1px solid black; background-color: rgb(205, 234, 255);"
+ >
+ <p :id="nodeid">{{ nodetext }}</p>
+ <p>markdown supported</p>
+ </vue-draggable-resizable>
</div>
</template>
<script>
-import { drag } from './mixins/drag.js'
+//import { drag } from './mixins/drag.js'
export default {
name: 'otherNodeslayer',
- mixins: [drag],
+ //mixins: [drag],
- props: { nodeid: Number, nodetext: String },
+ props: { nodeid: String, nodetext: String },
+
+ data: function() {
+ return {
+ width: 0,
+ height: 0,
+ x: 0,
+ y: 0
+ }
+ },
mounted() {
- var othernodes = this.$refs.othernodes
- this.makeDraggable(othernodes)
+ // var othernodes = this.$refs.othernodes
+ // this.makeDraggable(othernodes)
+ },
+ methods: {
+ onResize: function(x, y, width, height) {
+ this.x = x
+ this.y = y
+ this.width = width
+ this.height = height
+ },
+ onDrag: function(x, y) {
+ this.x = x
+ this.y = y
+ }
}
}
</script>
diff --git a/canvas-10-feb/src/store/index.js b/canvas-10-feb/src/store/index.js
index e9c1be593d76f3612d0646d00195051eee72a540..c8948b7951dd28f543501db850afdd116e3453de 100644
--- a/canvas-10-feb/src/store/index.js
+++ b/canvas-10-feb/src/store/index.js
@@ -1,35 +1,46 @@
import Vue from 'vue'
import Vuex from 'vuex'
import PouchDB from 'pouchdb'
+PouchDB.plugin(require('pouchdb-find'))
+import VueDraggableResizable from 'vue-draggable-resizable'
+
import accounts from '../assets/settings.json'
-//PouchDB.debug.enable('*')
+// PouchDB.debug.enable('*')
Vue.use(Vuex)
+Vue.component('vue-draggable-resizable', VueDraggableResizable)
+var myclient = 'firstvisit'
if (localStorage.getItem('mylastMicrocosm') == null) {
- var localmicrocosm = 'firstvisit'
+ var microcosm = 'firstvisit'
+} else {
+ microcosm = localStorage.getItem('mylastMicrocosm')
+}
+
+if (localStorage.getItem('myNNClient') == null) {
+ myclient = 'firstvisit'
} else {
- localmicrocosm = localStorage.getItem('mylastMicrocosm')
+ myclient = localStorage.getItem('myNNClient')
}
-var pouchdb = new PouchDB(localmicrocosm)
+var pouchdb = new PouchDB(microcosm)
var remote =
'https://' +
accounts.settings[0].name +
':' +
accounts.settings[0].password +
'@nn.adamprocter.co.uk/' +
- localmicrocosm +
+ microcosm +
'/'
const store = new Vuex.Store({
state: {
- localnodeid: null,
+ localnodeid: '',
global_pos_name: 'positions',
global_con_name: 'connections',
global_emoji_name: 'emojis',
microcosm: '',
- myclient: 'mac',
+ myclient: myclient,
activeNode: {},
// this will be objects containing arrays of all the handles / connections and nodes
configConnect: {
@@ -46,6 +57,7 @@ const store = new Vuex.Store({
width: 10,
fill: 'black'
},
+ allNodes: [],
myNodes: [
// { nodeid: 1, nodetext: 'node 1' },
],
@@ -63,30 +75,36 @@ const store = new Vuex.Store({
]
},
mutations: {
+ // CREATE_INDEX() {
+ // pouchdb.createIndex({
+ // index: { fields: ['name'] }
+ // })
+ // },
+
CREATE_MICROCOSM(state, doc) {
pouchdb.close().then(function() {
- localmicrocosm = doc
- pouchdb = new PouchDB(localmicrocosm)
+ // console.log(doc)
+ microcosm = doc
+ pouchdb = new PouchDB(microcosm)
remote =
'https://' +
accounts.settings[0].name +
':' +
accounts.settings[0].password +
'@nn.adamprocter.co.uk/' +
- localmicrocosm +
+ microcosm +
'/'
+
store.dispatch('syncDB')
})
},
SET_CLIENT(state, doc) {
state.myclient = doc
- console.log(state.myclient)
- store.commit('SET_MY_NODE')
- store.commit('GET_NODES')
+ store.commit('GET_MY_NODES')
},
- SET_MY_NODE(state) {
+ GET_MY_NODES(state) {
pouchdb
.get(state.myclient)
.then(function(doc) {
@@ -104,11 +122,18 @@ const store = new Vuex.Store({
return pouchdb.put({
_id: state.myclient,
_attachments: {},
- myNodes: [
+ nodes: [
{
- // FIXME: these are here as GET_NODES cant hunt a blank
+ // FIXME: these values are here as GET_NODES cant hunt a blank
+ // this shouldnt be here
+ index: uniqueid,
nodeid: uniqueid,
- nodetext: 'Device ' + state.myclient
+ nodetext: state.myclient,
+ nodeowner: state.myclient,
+ content_type: 'sheet',
+ // TEMP: this hides it by being auto deleted
+ deleted: true,
+ attachment_name: ''
}
]
})
@@ -116,41 +141,64 @@ const store = new Vuex.Store({
})
},
- GET_NODES(state) {
+ GET_ALL_NODES(state) {
pouchdb
.allDocs({
include_docs: true,
attachments: true
})
.then(function(doc) {
- 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)
- }
- }
- }
+ state.microcosm = microcosm
+ state.allNodes = doc.rows
+ console.log(state.allNodes)
})
.catch(function(err) {
console.log(err)
})
},
+
+ // GET_NODES(state) {
+ // //console.log(state)
+ // pouchdb
+ // .allDocs({
+ // include_docs: true,
+ // attachments: true
+ // })
+ // .then(function(doc) {
+ // state.microcosm = microcosm
+ // })
+ // .catch(function(err) {
+ // console.log(err)
+ // })
+ // },
+
+ // GET_ALL_NODES(state) {
+ // pouchdb
+ // .allDocs({
+ // include_docs: true,
+ // attachments: true
+ // })
+ // .then(function(doc) {
+ // //state.otherNodes = doc.rows
+ // var i
+ // for (i = 0; i < Object.keys(doc.rows).length; i++) {
+ // console.log(doc.rows[i].doc.nodes)
+ // //state.otherNodes = doc.rows[i].doc.nodes
+ // const newNode = {
+ // index: doc.rows[i].doc.nodes,
+ // nodeid: doc.rows[i].doc.nodes,
+ // nodetext: doc.rows[i].doc.nodes
+ // }
+ // state.otherNodes.push(newNode)
+ // }
+ // console.log(state.otherNodes)
+ // // doc.rows[i].doc.nodes
+ // })
+ // .catch(function(err) {
+ // console.log(err)
+ // })
+ // },
+
GET_POSITIONS(state) {
pouchdb
.get(state.global_pos_name)
@@ -183,6 +231,7 @@ const store = new Vuex.Store({
pouchdb.get(state.myclient).then(function(doc) {
if (e == undefined) {
doc.notes.push({
+ index: uniqueid,
nodeid: uniqueid,
nodetext: '',
nodeowner: state.myclient,
@@ -197,16 +246,17 @@ const store = new Vuex.Store({
_id: state.myclient,
_rev: doc._rev,
_attachments: doc._attachments,
- nodes: doc.notes
+ index: doc.uniqueid,
+ nodes: doc.nodes
})
.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
+ nodetext: state.myNodes[end].text
+ // content_type: state.notes[end].content_type
}
state.activeNode = newNode
})
@@ -239,13 +289,22 @@ const store = new Vuex.Store({
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
+ var uniqueid =
+ Math.random()
+ .toString(36)
+ .substring(2, 15) +
+ Math.random()
+ .toString(36)
+ .substring(2, 15)
+ ;(state.myNodes[i].nodetext = e.nodetext),
+ (state.myNodes[i].index = uniqueid)
}
}
pouchdb
.get(state.myclient)
.then(function(doc) {
// put the store into pouchdb
+
return pouchdb.bulkDocs([
{
_id: state.myclient,
@@ -270,15 +329,16 @@ const store = new Vuex.Store({
actions: {
syncDB: () => {
pouchdb.replicate.from(remote).on('complete', function() {
- store.commit('GET_NODES')
+ store.commit('GET_ALL_NODES')
+ store.commit('GET_MY_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')
- store.commit('GET_NODES')
+ store.commit('GET_ALL_NODES')
+ store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS')
})
.on('paused', function() {
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 5b329a967107064d4bf013e02db5e6164f2a5acf..e207385786b634b3632bacae8b9257b04ecf1489 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,6 +1,5 @@
<template>
<div class="home">
- <OnBoard @clientAdded="clientAdded()" />
<div v-if="clientset">
<NodesLayer
v-for="value in myNodes"
@@ -17,6 +16,7 @@
<CanvasLayer />
<ControlsLayer />
</div>
+ <OnBoard v-else @clientAdded="clientAdded()" />
</div>
</template>
@@ -53,7 +53,6 @@ export default {
methods: {
clientAdded() {
this.clientset = !this.clientset
- console.log(this.clientset)
}
}
}
diff --git a/canvas-10-feb/yarn.lock b/canvas-10-feb/yarn.lock
index 48cdebaf4bc17ae2423f4c6738645cd2b5ba1d45..1a520fd794f066e93fbb959141edb6c02d472f65 100644
--- a/canvas-10-feb/yarn.lock
+++ b/canvas-10-feb/yarn.lock
@@ -5604,6 +5604,95 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2
source-map "^0.6.1"
supports-color "^6.1.0"
+pouchdb-abstract-mapreduce@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-abstract-mapreduce/-/pouchdb-abstract-mapreduce-7.2.1.tgz#ad87d89d0e376be8e7740b767365572422d940a8"
+ dependencies:
+ pouchdb-binary-utils "7.2.1"
+ pouchdb-collate "7.2.1"
+ pouchdb-collections "7.2.1"
+ pouchdb-errors "7.2.1"
+ pouchdb-fetch "7.2.1"
+ pouchdb-mapreduce-utils "7.2.1"
+ pouchdb-md5 "7.2.1"
+ pouchdb-utils "7.2.1"
+
+pouchdb-binary-utils@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-binary-utils/-/pouchdb-binary-utils-7.2.1.tgz#ad23ed63d09699e7e6244f846b5cf07c6d9d4b8b"
+ dependencies:
+ buffer-from "1.1.0"
+
+pouchdb-collate@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-collate/-/pouchdb-collate-7.2.1.tgz#1e8bcd8c8d007fb93b9e259f18f9525144253102"
+
+pouchdb-collections@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-7.2.1.tgz#768c2c578b22eda9ac0c92a4b1106d18f3c113fb"
+
+pouchdb-errors@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-errors/-/pouchdb-errors-7.2.1.tgz#798f5279a0d363d6b93c97a1b65ee903f61af143"
+ dependencies:
+ inherits "2.0.4"
+
+pouchdb-fetch@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-fetch/-/pouchdb-fetch-7.2.1.tgz#f5373e7344b7434f53e900954b9b0caf71361a0a"
+ dependencies:
+ abort-controller "3.0.0"
+ fetch-cookie "0.7.3"
+ node-fetch "2.4.1"
+
+pouchdb-find@^7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-find/-/pouchdb-find-7.2.1.tgz#20604e7979bad74a0f423e5a30fc00d5aafed0e9"
+ dependencies:
+ pouchdb-abstract-mapreduce "7.2.1"
+ pouchdb-collate "7.2.1"
+ pouchdb-errors "7.2.1"
+ pouchdb-fetch "7.2.1"
+ pouchdb-md5 "7.2.1"
+ pouchdb-selector-core "7.2.1"
+ pouchdb-utils "7.2.1"
+
+pouchdb-mapreduce-utils@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-mapreduce-utils/-/pouchdb-mapreduce-utils-7.2.1.tgz#ca0f1954b40b774ff427295373337f8def520f2b"
+ dependencies:
+ argsarray "0.0.1"
+ inherits "2.0.4"
+ pouchdb-collections "7.2.1"
+ pouchdb-utils "7.2.1"
+
+pouchdb-md5@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-md5/-/pouchdb-md5-7.2.1.tgz#2b057b148b3f31491d77c4dd6b6139af31b07f66"
+ dependencies:
+ pouchdb-binary-utils "7.2.1"
+ spark-md5 "3.0.0"
+
+pouchdb-selector-core@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-selector-core/-/pouchdb-selector-core-7.2.1.tgz#0eb190dff1df62d416ba670fdd84565542aa0183"
+ dependencies:
+ pouchdb-collate "7.2.1"
+ pouchdb-utils "7.2.1"
+
+pouchdb-utils@7.2.1:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/pouchdb-utils/-/pouchdb-utils-7.2.1.tgz#5dec1c53c8ecba717e5762311e9a1def2d4ebf9c"
+ dependencies:
+ argsarray "0.0.1"
+ clone-buffer "1.0.0"
+ immediate "3.0.6"
+ inherits "2.0.4"
+ pouchdb-collections "7.2.1"
+ pouchdb-errors "7.2.1"
+ pouchdb-md5 "7.2.1"
+ uuid "3.3.3"
+
pouchdb@^7.2.1:
version "7.2.1"
resolved "https://registry.yarnpkg.com/pouchdb/-/pouchdb-7.2.1.tgz#619e3d5c2463ddd94a4b1bf40d44408c46e9de79"
@@ -7054,6 +7143,10 @@ vm-browserify@^1.0.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+vue-draggable-resizable@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/vue-draggable-resizable/-/vue-draggable-resizable-2.1.0.tgz#b590212aef3c07d040aeceda784438068170fb08"
+
vue-eslint-parser@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6"