From 6f9c7de2e35c2ba5b54ef753d55ab96b114176a7 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 23 Sep 2020 09:20:11 +0100
Subject: [PATCH] connection bug fixed / discarded view
Major Bug in connections fixed (still some draw positioning to improve and hide connections to discarded nodes - coming)
You can now review your discarded nodes and restore them if you wish (very basic and unstyled view)
---
app/src/components/ConnectionsLayer.vue | 50 ++++--
app/src/components/NodesLayer.vue | 10 +-
app/src/components/OtherNodeslayer.vue | 4 +-
app/src/router/index.js | 6 +
app/src/store/index.js | 48 +++++-
app/src/views/Discarded.vue | 202 ++++++++++++++++++++++++
app/src/views/Home.vue | 2 +
app/src/views/List.vue | 22 +--
8 files changed, 311 insertions(+), 33 deletions(-)
create mode 100644 app/src/views/Discarded.vue
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 4347b6d..a3c5844 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 ba5388a..7a06380 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 cfeac99..d433216 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 f95e43f..35c8aea 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 6b5e065..726d550 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 0000000..901dfab
--- /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 3f2e901..42dc852 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 50cc469..ee65f2c 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>
--
GitLab