diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
index 55a5e59d7c8652d4bef4f4b3e8c32040244f2e3b..3be4d8bca784b8d2dfb2c62083920d3e86f1e859 100644
--- a/canvas-10-feb/src/components/NodesLayer.vue
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -1,7 +1,14 @@
<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>
diff --git a/canvas-10-feb/src/components/otherNodeslayer.vue b/canvas-10-feb/src/components/otherNodeslayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25d7b1a03b96b13df1d0bf8fc03289aa57b1965e
--- /dev/null
+++ b/canvas-10-feb/src/components/otherNodeslayer.vue
@@ -0,0 +1,33 @@
+<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>
diff --git a/canvas-10-feb/src/store/index.js b/canvas-10-feb/src/store/index.js
index a4cdbc1fe7dbe74b2e73cadb31b205bb240ff0bd..9c113e64805278284f248c79accc5cf811fb6fb3 100644
--- a/canvas-10-feb/src/store/index.js
+++ b/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,124 @@ 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)
+ }
+ }
+ }
+ console.log(state.otherNodes)
})
.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 +188,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 +208,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)
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index fe75fedbcdbe8a5255c43618ea21b2c0b3910edc..21b6785b25e552ef28e53ad63d7b00204cc028dc 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,12 +1,18 @@
<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>