From 15cd6111748f3c5f3cce9db6c5015ed4df5fc579 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 3 Dec 2020 12:08:29 +0000
Subject: [PATCH] wip new nodes
---
app/src/components/ListLayer.vue | 7 +
app/src/components/NodesLayer.vue | 254 +++++++-----------------------
app/src/views/Organise.vue | 9 +-
3 files changed, 63 insertions(+), 207 deletions(-)
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 6958777..a2928c6 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -82,6 +82,13 @@ export default {
},
},
+ // this is to stop sync chasing bug
+ myArray: null,
+ created() {
+ //access the custom option using $options
+ this.$options.myArray = this.nodes_filtered
+ },
+
methods: {
editNode(e) {
var nodeid = e.target.id
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 5ef7432..843241d 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -1,93 +1,10 @@
<template>
<div ref="nodes" class="node">
- <div v-for="(value, index) in configPositions" v-bind:key="index">
- <div v-if="toolmode == 'move'">
+ <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
+ <div v-for="(value, index) in configPositions" v-bind:key="index">
<draggable
class="innernode"
- v-if="nodeid == value.node_id && deleted == false"
- :w="value.width"
- :h="value.height"
- :x="value.x_pos"
- :y="value.y_pos"
- :z="value.z_index"
- :scale="scale"
- :draggable="false"
- :resizable="false"
- style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
- :min-width="200"
- :min-height="220"
- >
- <form>
- <div v-if="value.read_mode == false">
- <div v-for="value in $options.myArray" v-bind:key="value.node_id">
- <textarea
- v-if="nodeid == value.node_id"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- v-model="value.node_text"
- autofocus
- @input="editNode"
- :id="nodeid"
- class="drag-cancel"
- ref="nodetext"
- placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
- ></textarea>
- </div>
- <p class="info">*markdown supported & autosaves</p>
- </div>
- <div v-if="value.read_mode == true">
- <p
- class="read"
- :id="nodeid"
- :inner-html.prop="nodetext | marked"
- ></p>
- </div>
-
- <!-- <h3>Reactions</h3> -->
-
- <div class="allemoji">
- <div
- class="eachemoji"
- v-for="(emojis, index) in configEmoji"
- :key="index"
- >
- <p v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
- </div>
- </div>
-
- <div class="btn-row">
- <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
- >Delete</BaseButton
- > -->
- <!-- <div v-if="value.read_mode == true">
- <BaseButton
- class="read"
- buttonClass="action"
- @click="readFlag()"
- >Edit Mode
- </BaseButton>
- </div>
- <div v-else>
- <BaseButton
- class="read"
- buttonClass="action"
- @click="readFlag()"
- >Read Mode</BaseButton
- >
- </div> -->
- </div>
- </form>
- </draggable>
- </div>
-
- <!-- Same code as above when in any other mode other than move so you can drag nodes-->
-
- <div v-else>
- <draggable
- class="innernode"
- v-if="nodeid == value.node_id && deleted == false"
+ v-if="nodes.node_id == value.node_id"
:w="value.width"
:h="value.height"
:x="value.x_pos"
@@ -104,68 +21,46 @@
:min-width="200"
:min-height="220"
>
- <form>
- <div v-if="value.read_mode == false">
- <div v-for="value in $options.myArray" v-bind:key="value.node_id">
- <div v-if="nodeid == value.node_id">
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- v-model="value.node_text"
- @input="editNode"
- :id="nodeid"
- class="drag-cancel"
- ref="nodetext"
- placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
- >
- </textarea>
- </div>
- </div>
+ <form class="nodes">
+ <template v-if="nodes.read_mode == false">
+ <textarea
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ v-model="nodes.node_text"
+ @input="editNode"
+ :id="nodes.node_id"
+ placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
+ ></textarea>
<p class="info">*markdown supported & autosaves</p>
- </div>
- <div v-if="value.read_mode == true">
+ </template>
+ <template v-else>
<p
- class="read"
- :id="nodeid"
- :inner-html.prop="nodetext | marked"
+ :id="nodes.node_id"
+ :inner-html.prop="nodes.node_text | marked"
></p>
+ </template>
+
+ <div class="btn-row">
+ <SvgButton
+ buttonClass="nodes"
+ @click.prevent="deleteFlag(nodes.node_id)"
+ />
+ <SvgButton2
+ buttonClass="nodes"
+ @click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
+ />
</div>
- <!-- <h3>Reactions</h3> -->
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
- <p v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
- </div>
- </div>
- <div class="btn-row">
- <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
- >Discard</BaseButton
- > -->
- <SvgButton buttonClass="nodes" @click.prevent="deleteFlag()" />
- <div v-if="value.read_mode == true">
- <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
- <!-- <BaseButton
- class="read"
- buttonClass="action"
- @click="readFlag()"
- >Edit Mode
- </BaseButton> -->
- </div>
- <div v-else>
- <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
- <!-- <BaseButton
- class="read"
- buttonClass="action"
- @click="readFlag()"
- >Read Mode</BaseButton
- > -->
+ <template v-if="emojis.node_id == nodes.node_id">{{
+ emojis.emoji_text
+ }}</template>
</div>
</div>
</form>
@@ -222,18 +117,27 @@ export default {
// this.$refs.nodetext.focus()
// },
- computed: mapState({
- scale: (state) => state.ui.scale,
- myNodes: (state) => state.myNodes,
- configPositions: (state) => state.configPositions,
- configConnections: (state) => state.configConnections,
- configEmoji: (state) => state.configEmoji,
- toolmode: (state) => state.ui.mode,
- }),
+ computed: {
+ ...mapState({
+ scale: (state) => state.ui.scale,
+ myNodes: (state) => state.myNodes,
+ configPositions: (state) => state.configPositions,
+ configConnections: (state) => state.configConnections,
+ configEmoji: (state) => state.configEmoji,
+ toolmode: (state) => state.ui.mode,
+ }),
+
+ nodes_filtered: function () {
+ return this.myNodes.filter((nodes) => {
+ return nodes.deleted == false
+ })
+ },
+ },
+ // this is to stop sync chasing bug
myArray: null,
created() {
//access the custom option using $options
- this.$options.myArray = this.myNodes
+ this.$options.myArray = this.nodes_filtered
},
methods: {
@@ -326,46 +230,6 @@ export default {
// // console.log(e)
},
- // _.debounce(function(e) {
- // this.input = e.target.value;
- // }, 300)
-
- // editNode(e) {
- // const el = e.target
- // const cursorPos = el.selectionStart
- // console.log(cursorPos)
- // var nodeid = e.target.id
- // var nodetext = e.target.value
- // this.$store.dispatch('editNode', { nodeid, nodetext })
-
- // this.$nextTick(() => {
- // e.target.selectionStart = e.target.selectionEnd = cursorPos
- // })
-
- // this.$nextTick(() => {
- // el.setSelectionRange(cursorPos, cursorPos)
- // })
- //},
-
- // editNode: lodash.debounce(function (e) {
- // var nodeid = e.target.id
- // var nodetext = e.target.value
- // this.$store.dispatch('editNode', { nodeid, nodetext })
- // }, 600),
-
- // editNode: lodash.debounce(function (e) {
- // const el = e.target
- // const cursorPos = el.selectionStart
-
- // var nodeid = e.target.id
- // var nodetext = e.target.value
- // this.$store.dispatch('editNode', { nodeid, nodetext })
-
- // this.$nextTick(() => {
- // el.setSelectionRange(cursorPos, cursorPos)
- // })
- // }, 600),
-
editNode(e) {
var nodeid = e.target.id
var nodetext = e.target.value
@@ -380,23 +244,15 @@ export default {
// nothing happens
}
},
- readFlag(e) {
- e = this.nodeid
- var i
- for (i = 0; i < Object.keys(this.configPositions).length; i++) {
- if (this.configPositions[i].node_id == this.nodeid) {
- this.localreadmode = this.configPositions[i].read_mode
- }
- }
+ readFlag(e, f) {
+ readmode = f
+ readmode = !readmode
+ this.$store.dispatch('readFlag', { e, readmode })
- if (this.localreadmode == true) {
- readmode = false
- this.$store.dispatch('legacyreadFlag', { e, readmode })
+ if (readmode == true) {
this.mode = 'Read'
} else {
- readmode = true
- this.$store.dispatch('legacyreadFlag', { e, readmode })
this.mode = 'Edit'
}
},
diff --git a/app/src/views/Organise.vue b/app/src/views/Organise.vue
index 89de3b4..531d780 100644
--- a/app/src/views/Organise.vue
+++ b/app/src/views/Organise.vue
@@ -42,14 +42,7 @@
v-bind:nodetext="value.node_text"
v-bind:deleted="value.deleted"
/>
- <NodesLayer
- @edit-true="(e) => editTrue(e)"
- v-for="value in myNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- v-bind:deleted="value.deleted"
- />
+ <NodesLayer @edit-true="(e) => editTrue(e)" />
<TipsLayer />
<ModeCardorg />
<ConnectionsLayer />
--
GitLab