Skip to content
Snippets Groups Projects
Commit 9050eda3 authored by Adam Procter's avatar Adam Procter
Browse files

show all nodes

parent b65efb1e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
canvas-10-feb/src/components/NodesLayer.vue
+ 14
− 3
View file @ 9050eda3
<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>
canvas-10-feb/src/components/otherNodeslayer.vue 0 → 100644
+ 33
− 0
View file @ 9050eda3
<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>
canvas-10-feb/src/store/index.js
+ 130
− 8
View file @ 9050eda3
......@@ -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)
......
canvas-10-feb/src/views/Home.vue
+ 13
− 4
View file @ 9050eda3
<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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment