diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 4347b6d1f45bd573db97502044578b811995d3fb..a3c58449f2e7724d5b56c001efaf49c1602c4b12 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -63,13 +63,14 @@ export default {
fromnode = id
xposstart = xpos
yposstart = ypos
- endState = true
+
//count = 1
// this.$store.dispatch('connectionState', true)
} else if (endState == true) {
tonode = id
xposend = xpos
yposend = ypos
+
// count = 0
// this.$store.dispatch('connectionState', false)
// console.log(fromnode, tonode, xposstart, yposstart, xposend, yposend)
@@ -81,6 +82,7 @@ export default {
xposend,
yposend,
})
+ endState = false
}
},
buttonsDraw() {
@@ -93,12 +95,16 @@ export default {
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
+ //const allButtons = new PIXI.Container()
for (i = 0; i < Object.keys(this.myNodes).length; i++) {
buttonMap[i] = new PIXI.Graphics()
// console.log(buttonMap[i])
for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
+ if (
+ this.configPositions[j].node_id == this.myNodes[i].node_id &&
+ this.myNodes[i].node_id == false
+ ) {
buttonMap[i].name = this.myNodes[i].node_id
// console.log(button_one.name)
buttonMap[i].lineStyle(1)
@@ -114,8 +120,9 @@ export default {
buttonMap[i].endFill()
// names it the last one only?
}
+ // allButtons.addChild(buttonMap[i])
+ // stage.addChild(allButtons)
stage.addChild(buttonMap[i])
-
// Opt-in to interactivity
buttonMap[i].interactive = true
// Shows hand cursor
@@ -135,7 +142,10 @@ export default {
buttonMapOther[i] = new PIXI.Graphics()
// console.log(buttonMap[i])
for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
+ if (
+ this.configPositions[j].node_id == this.otherNodes[i].node_id &&
+ this.myNodes[i].node_id == false
+ ) {
buttonMapOther[i].name = this.otherNodes[i].node_id
// console.log(button_one.name)
buttonMapOther[i].lineStyle(1)
@@ -169,21 +179,23 @@ export default {
}
let line = new PIXI.Graphics()
-
var initialMoveTo
-
let lines = []
function start(event) {
- // console.log('start')
+ // console.log(this.getChildByName)
this.id = this.name
ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
}
function finish(event) {
- // console.log('finish')
this.id = this.name
- ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
+ if (this.id != fromnode) {
+ endState = true
+ ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
+ } else {
+ endState = false
+ }
}
function onDragStart(event) {
@@ -204,16 +216,28 @@ export default {
}
function onDragEnd() {
- //console.log('end')
+ //endState = true
this.dragging = false
stage.removeChild(line)
}
function onDragEndOutside() {
- // console.log('Outside')
- endState = false
- this.dragging = false
stage.removeChild(line)
+ // console.log('outside')
+ // console.log(this.name)
+ // console.log(fromnode)
+ // if (this.name != fromnode) {
+ // console.log('diff')
+ // endState = true
+ // this.dragging = false
+ // stage.removeChild(line)
+ // this.finish()
+ // }
+ // } else {
+ // endState = false
+ // this.dragging = false
+ // stage.removeChild(line)
+ // }
}
function onDragMove(event) {
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index ba5388ae576209bfb028bf8464d892c235ca1717..7a06380427f6e5594a59e846c438a2a097dc0912 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -4,7 +4,7 @@
<div v-if="toolmode == 'move'">
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == value.node_id"
+ v-if="nodeid == value.node_id && deleted == false"
:w="value.width"
:h="value.height"
:x="value.x_pos"
@@ -14,7 +14,7 @@
:resizable="false"
style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
:min-width="200"
- :min-height="370"
+ :min-height="220"
>
<form>
<div v-if="value.read_mode == false">
@@ -85,7 +85,7 @@
<div v-else>
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == value.node_id"
+ v-if="nodeid == value.node_id && deleted == false"
:w="value.width"
:h="value.height"
:x="value.x_pos"
@@ -99,7 +99,7 @@
:drag-cancel="'.drag-cancel'"
style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
:min-width="200"
- :min-height="370"
+ :min-height="220"
>
<form>
<div v-if="value.read_mode == false">
@@ -142,7 +142,7 @@
<p class="info">*markdown supported & autosaves</p>
<div class="btn-row">
<BaseButton buttonClass="danger" @click="deleteFlag()"
- >Hide</BaseButton
+ >Discard</BaseButton
>
<div v-if="value.read_mode == true">
<BaseButton
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index cfeac99d026345dab75c60a19018f084071663b5..d4332164c7b7f253706fdecfe5cba773dcaeb857 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -19,7 +19,7 @@
@resizestop="onResizestop"
style="border: 2px solid black; background-color: rgb(205, 234, 255)"
:min-width="200"
- :min-height="370"
+ :min-height="220"
>
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }}
@@ -121,7 +121,7 @@
@resizestop="onResizestop"
style="border: 2px solid black; background-color: rgb(205, 234, 255)"
:min-width="200"
- :min-height="370"
+ :min-height="220"
>
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }}
diff --git a/app/src/router/index.js b/app/src/router/index.js
index f95e43fa2ee5835177cca232ba875faee62c5b6e..35c8aead158318abebd11f6d60288b0af388e03a 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import List from '../views/List.vue'
+import Discarded from '../views/Discarded.vue'
// import Oldhome from '../views/Oldhome'
//import Test from '../views/Test'
@@ -18,6 +19,11 @@ export const routes = [
name: 'Mobile',
component: List,
},
+ {
+ path: '/discarded',
+ name: 'Discarded',
+ component: Discarded,
+ },
{
path: '/about',
name: 'About',
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 6b5e065a3735029a2615ff4283c23f04f86f3924..726d5500a58cdd758d4837b5ed65ae1a0ef98ec7 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -162,9 +162,10 @@ const store = new Vuex.Store({
.then(function (doc) {
var i
for (i = 0; i < Object.keys(doc.nodes).length; i++) {
- if (doc.nodes[i].deleted == true) {
- doc.nodes.splice(i, 1)
- }
+ // PREVIOUS: approach to removing nodes that are flagged as deleted before
+ // if (doc.nodes[i].deleted == true) {
+ // // doc.nodes.splice(i, 1)
+ // }
state.myNodes = doc.nodes
}
})
@@ -539,6 +540,39 @@ const store = new Vuex.Store({
})
},
+ RESTORE_NODE(state, e) {
+ console.log(e)
+ var i
+ for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+ if (e.e == state.myNodes[i].node_id) {
+ state.myNodes[i].deleted = false
+ }
+ }
+ pouchdb
+ .get(state.myclient)
+ .then(function (doc) {
+ // put the store into pouchdb
+ return pouchdb.bulkDocs([
+ {
+ _id: state.myclient,
+ _rev: doc._rev,
+ _attachments: doc._attachments,
+ nodes: state.myNodes,
+ },
+ ])
+ })
+ .then(function () {
+ return pouchdb.get(state.myclient).then(function (doc) {
+ state.myNodes = doc.nodes
+ })
+ })
+ .catch(function (err) {
+ if (err.status == 404) {
+ // pouchdb.put({ })
+ }
+ })
+ },
+
READ_FLAG(state, e) {
var i
// console.log(e.e)
@@ -625,6 +659,7 @@ const store = new Vuex.Store({
pouchdb.replicate.from(remote).on('complete', function () {
store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES')
+
store.commit('GET_POSITIONS')
store.commit('GET_CONNECTIONS')
store.commit('GET_EMOJI')
@@ -640,6 +675,7 @@ const store = new Vuex.Store({
// pop info into function to find out more
store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES')
+
store.commit('GET_POSITIONS')
store.commit('GET_CONNECTIONS')
store.commit('GET_EMOJI')
@@ -680,6 +716,7 @@ const store = new Vuex.Store({
updateConnectTwo: ({ commit }, tonode, xposend, yposend) => {
commit('UPDATE_CONNECT_TWO', tonode, xposend, yposend)
},
+
readFlag: ({ commit }, e) => {
// var text = e.target.value
commit('READ_FLAG', e)
@@ -716,6 +753,11 @@ const store = new Vuex.Store({
commit('DELETE_FLAG', e)
},
+ restoreNode: ({ commit }, e) => {
+ // var text = e.target.value
+ commit('RESTORE_NODE', e)
+ },
+
addEmoji: ({ commit }, { nodeid, emojitext }) => {
commit('ADD_EMOJI', {
nodeid,
diff --git a/app/src/views/Discarded.vue b/app/src/views/Discarded.vue
new file mode 100644
index 0000000000000000000000000000000000000000..901dfabf9aced6fe7847536cce55a39b0f1fb2cd
--- /dev/null
+++ b/app/src/views/Discarded.vue
@@ -0,0 +1,202 @@
+<template>
+ <div id="discardwrapper">
+ <h1 class="restore">Your discarded nodes</h1>
+
+ <div v-if="clientset">
+ <form>
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
+ <div v-if="value.deleted == true">
+ {{ value.node_text }}
+
+ <div class="btn-row">
+ <BaseButton
+ class="new"
+ buttonClass="action"
+ @click="restoreNode(value.node_id)"
+ >Restore</BaseButton
+ >
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ <!-- // onboarding for list view -->
+ <div v-else>
+ <form>
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
+
+ <div v-if="name == false">
+ <input
+ type="text"
+ v-model.trim="clientid"
+ placeholder="device name"
+ autocorrect="off"
+ autocapitalize="none"
+ ref="objectname"
+ v-on:keyup.enter="setClient()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+ <div class="btn-row">
+ <BaseButton buttonClass="special" @click="setClient()"
+ >Store</BaseButton
+ >
+ </div>
+ </div>
+ <div v-else>
+ <h4>Saved</h4>
+ </div>
+ </div>
+ </form>
+
+ <form>
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
+ <div v-if="microcosm == false">
+ <input
+ type="text"
+ v-model.trim="localmicrocosm"
+ placeholder="microcosm name"
+ autocorrect="off"
+ autocapitalize="none"
+ autofocus
+ v-on:keyup.enter="createMicrocosm()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+ <div class="btn-row">
+ <BaseButton
+ buttonClass="special"
+ @click="createMicrocosm(), letsGo()"
+ >Create Microcosm</BaseButton
+ >
+ </div>
+ </div>
+ <div v-else>
+ <h4>Loading...</h4>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ <!-- </div> -->
+</template>
+
+<script>
+// import OffLine from '@/components/OffLine'
+// import OnBoard from '@/components/OnBoard.vue'
+import Router from '@/router'
+
+import { mapState } from 'vuex'
+import marked from 'marked'
+import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
+
+export default {
+ name: 'Discarded',
+ mixins: [shortcutsMixin],
+ data: function () {
+ return {
+ localmicrocosm: Router.currentRoute.params.microcosm,
+ clientid: '',
+ clientset: false,
+ offline: false,
+ nodetext1:
+ '## What shall we call you ? 👩â€ðŸš€ \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
+ nodetext2:
+ '## Join/Start a microcosm ! 🚀 \n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
+ name: false,
+ microcosm: false,
+ }
+ },
+
+ props: {
+ nodeid: String,
+ nodetext: String,
+ deleted: Boolean,
+ },
+
+ computed: mapState({
+ myNodes: (state) => state.myNodes,
+ configPositions: (state) => state.configPositions,
+ shortcutstate: (state) => state.shortcutstate,
+ }),
+
+ created() {
+ if (typeof window !== 'undefined') {
+ document.addEventListener('keydown', this.handleKeyPress)
+ }
+ },
+
+ beforeDestroy() {
+ if (typeof window !== 'undefined') {
+ document.removeEventListener('keydown', this.handleKeyPress)
+ }
+ },
+
+ mounted() {
+ if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
+ this.clientid = localStorage.myNNClient
+ this.localmicrocosm = localStorage.mylastMicrocosm
+ this.createMicrocosm()
+ this.setClient()
+ this.letsGo()
+ this.clientset = 'true'
+ }
+ },
+
+ components: {
+ // OnBoard,
+ // OffLine,
+ //ModeToolbar,
+ },
+
+ filters: {
+ marked: marked,
+ },
+ methods: {
+ clientAdded() {
+ this.clientset = !this.clientset
+ },
+
+ createMicrocosm() {
+ this.$store.dispatch('createMicrocosm', this.localmicrocosm)
+ localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+ this.microcosm = true
+ },
+ setClient() {
+ this.$store.dispatch('setClient', this.clientid),
+ localStorage.setItem('myNNClient', this.clientid)
+ this.name = true
+ },
+
+ letsGo() {
+ this.clientset = !this.clientset
+ this.$emit('clientAdded')
+ },
+
+ restoreNode(e) {
+ this.$store.dispatch('restoreNode', { e })
+ },
+
+ editTrue(e) {
+ this.$store.dispatch('shortcutState', e)
+ },
+
+ editNode(e) {
+ var nodeid = e.target.id
+ var nodetext = e.target.value
+ this.$store.dispatch('editNode', { nodeid, nodetext })
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+textarea {
+ width: 95%;
+ height: 100px;
+ margin-left: 1em;
+ margin-bottom: 1em;
+}
+</style>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 3f2e901b021fc3c10f6b5c37722f53dfc1218472..42dc8524019a7adc7becd623e3fcb7cb6ab932e2 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -47,6 +47,7 @@
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
/>
<TipsLayer />
<ConnectionsLayer />
@@ -65,6 +66,7 @@
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
/>
<OnBoard
@clientAdded="clientAdded()"
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 50cc46970f03ece59124f00d4d2664dc505c4e7d..ee65f2ced8e5ec67376bb76d30a304f0e3bdd712 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -22,16 +22,18 @@
v-for="value in myNodes.slice().reverse()"
v-bind:key="value.node_id"
>
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- @input="editNode"
- v-model="value.node_text"
- :id="nodeid"
- ref="nodetext"
- placeholder="Idea goes here!"
- ></textarea>
+ <div v-if="value.deleted == false">
+ <textarea
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ @input="editNode"
+ v-model="value.node_text"
+ :id="nodeid"
+ ref="nodetext"
+ placeholder="Idea goes here!"
+ ></textarea>
+ </div>
</div>
</form>
</div>