diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue
index aea285fdbab5dd0eacefde032c8843edb84c40c3..0ec9a4d63e9c405825d9554ff23883cbfe6da9a2 100644
--- a/app/src/components/CardsLayer.vue
+++ b/app/src/components/CardsLayer.vue
@@ -1,54 +1,48 @@
<template>
- <div>
- <div v-for="(value, index) in configPositions" v-bind:key="index">
- <div class="nodes" v-if="nodeid == value.node_id && deleted == false">
- <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)"
- autofocus
- v-model="value.node_text"
- @input="editNode"
- :id="nodeid"
- ref="nodetext"
- placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
- ></textarea>
- </div>
- <p class="info">*markdown supported & autosaves</p>
+ <div class="grid">
+ <div v-for="(nodes, index) in nodes_filtered" v-bind:key="index">
+ <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"
+ ref="nodetext"
+ placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
+ ></textarea>
+ </template>
+ <template v-else>
+ <p
+ :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>
+
+ <div class="allemoji">
+ <div
+ class="eachemoji"
+ v-for="(emojis, index) in configEmoji"
+ :key="index"
+ >
+ <template v-if="emojis.node_id == nodes.node_id">{{
+ emojis.emoji_text
+ }}</template>
</div>
- <div class="readmode" v-if="value.read_mode && deleted == false">
- <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
- </div>
- <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">
- <SvgButton buttonClass="nodes" @click.prevent="deleteFlag()" />
- <div v-if="value.read_mode == true && deleted == false">
- <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()" />
- </div>
- </div>
- </form>
- </div>
+ </div>
+ </form>
</div>
</div>
</template>
@@ -69,26 +63,28 @@ export default {
}
},
- props: {
- nodeid: String,
- nodetext: String,
- deleted: Boolean,
- },
-
filters: {
marked: marked,
},
+ computed: {
+ ...mapState({
+ myNodes: (state) => state.myNodes,
+ configPositions: (state) => state.configPositions,
+ configEmoji: (state) => state.configEmoji,
+ }),
+
+ nodes_filtered: function () {
+ return this.myNodes.filter((nodes) => {
+ return nodes.deleted == false
+ })
+ },
+ },
- computed: mapState({
- myNodes: (state) => state.myNodes,
- configPositions: (state) => state.configPositions,
- configEmoji: (state) => state.configEmoji,
- }),
-
+ // this is to stop sync chasing bug
myArray: null,
- created() {
- this.$options.myArray = this.myNodes
- this.readFlag
+ mounted() {
+ //access the custom option using $options
+ this.$options.myArray = this.nodes_filtered
},
methods: {
@@ -110,29 +106,17 @@ 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'
}
},
- // setFocus() {
- // this.$refs.nodetext.focus()
- // },
},
components: {
SvgButton,
@@ -142,6 +126,10 @@ export default {
</script>
<style lang="css" scoped>
+.grid {
+ display: flex;
+ flex-wrap: wrap;
+}
.nodes {
min-width: 343px;
max-width: 343px;
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 9f8342d72a09c147020904be3e01e98c09622055..b5f1d0016fa2f9ce0594cf4fe07f2b9bdcd5411e 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -1,10 +1,9 @@
<template>
<div ref="nodes" class="node">
- <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
- <div v-for="(value, index) in configPositions" v-bind:key="index">
+ <div v-for="(value, index) in positions_filtered" v-bind:key="index">
+ <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<draggable
class="innernode"
- v-if="nodes.node_id == value.node_id"
:w="value.width"
:h="value.height"
:x="value.x_pos"
@@ -40,7 +39,7 @@
:inner-html.prop="nodes.node_text | marked"
></p>
</template>
-
+ <!-- // v-if == 'select' -->
<div class="btn-row">
<SvgButton
buttonClass="nodes"
@@ -51,7 +50,7 @@
@click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
/>
</div>
-
+ <!-- // v-else // empty div -->
<div class="allemoji">
<div
class="eachemoji"
@@ -125,23 +124,30 @@ export default {
return nodes.deleted == false
})
},
+
+ positions_filtered: function () {
+ return this.configPositions.filter((positions) => {
+ return this.myNodes.find((node) => {
+ return !node.deleted && positions.node_id == node.node_id
+ })
+ })
+ },
},
// this is to stop sync chasing bug
myArray: null,
- // NOTE: ok created here but not if this is the first view to load
+ // NOTE: ok as created here but NOT if this is the first view to load
created() {
//access the custom option using $options
this.$options.myArray = this.nodes_filtered
},
updated() {
- this.$options.myArray = this.nodes_filtered
+ if (this.toolmode == 'addNode') {
+ this.$options.myArray = this.nodes_filtered
+ this.$store.commit('ui/setMode', 'select')
+ }
},
- // updated() {
- // this.$options.myArray = this.nodes_filtered
- // },
-
methods: {
onActivated(e) {
this.nodeid = e
@@ -153,8 +159,7 @@ export default {
}
}
},
- onResize(x, y, width, height, e) {
- console.log(e)
+ onResize(x, y, width, height) {
this.localx = x
this.localy = y
this.width = width
@@ -230,8 +235,6 @@ export default {
editTrue(e) {
this.$emit('edit-true', e)
- // this.firstload = false
- // // console.log(e)
},
editNode(e) {
diff --git a/app/src/components/OtherCardslayer.vue b/app/src/components/OtherCardslayer.vue
index f84d7c9025e87121a7a336992567729946c34648..711d1bc4904b785231bac1c526cdee79b43f83c7 100644
--- a/app/src/components/OtherCardslayer.vue
+++ b/app/src/components/OtherCardslayer.vue
@@ -1,11 +1,11 @@
<template>
- <div>
- <div v-if="deleted == false">
+ <div class="grid">
+ <div v-for="(nodes, index) in othernodes_filtered" v-bind:key="index">
<div class="nodes">
- <p :inner-html.prop="nodetext | marked"></p>
+ <p :inner-html.prop="nodes.node_text | marked"></p>
<div class="eeee">
- <input :value="nodeid" name="id" readonly hidden />
+ <input :value="nodes.node_id" name="id" readonly hidden />
<input
id="emojifield"
class="regular-input"
@@ -38,7 +38,7 @@
:style="{ top: display.y + 'px', left: display.x + 'px' }"
>
<div class="emoji-picker__search">
- <input type="text" v-model="search" v-focus />
+ <input type="text" v-model="search" />
</div>
<div>
<div v-for="(emojiGroup, category) in emojis" :key="category">
@@ -47,7 +47,7 @@
<span
v-for="(emoji, emojiName) in emojiGroup"
:key="emojiName"
- @click="insert(emoji), sentReact()"
+ @click="insert(emoji), sentReact(nodes.node_id)"
:title="emojiName"
>{{ emoji }}</span
>
@@ -64,7 +64,7 @@
v-for="(emojis, index) in configEmoji"
:key="index"
>
- <p v-if="nodeid == emojis.node_id">
+ <p v-if="nodes.node_id == emojis.node_id">
{{ emojis.emoji_text }}
</p>
</div>
@@ -79,6 +79,10 @@
import { mapState } from 'vuex'
import EmojiPicker from 'vue-emoji-picker'
import marked from 'marked'
+
+var nodeid
+var emojitext
+
export default {
name: 'OtherCardslayer',
@@ -93,16 +97,18 @@ export default {
}
},
- props: {
- nodeid: String,
- nodetext: String,
- deleted: Boolean,
- },
+ computed: {
+ ...mapState({
+ otherNodes: (state) => state.otherNodes,
+ configEmoji: (state) => state.configEmoji,
+ }),
- computed: mapState({
- otherNodes: (state) => state.otherNodes,
- configEmoji: (state) => state.configEmoji,
- }),
+ othernodes_filtered: function () {
+ return this.otherNodes.filter((nodes) => {
+ return nodes.deleted == false
+ })
+ },
+ },
filters: {
marked: marked,
@@ -112,9 +118,10 @@ export default {
append(emoji) {
this.input += emoji
},
- sentReact(nodeid, emojitext) {
+ sentReact(e) {
emojitext = this.input
- nodeid = this.nodeid
+ nodeid = e
+
this.$store.dispatch('addEmoji', {
nodeid,
emojitext,
@@ -127,6 +134,10 @@ export default {
</script>
<style lang="css" scoped>
+.grid {
+ display: flex;
+ flex-wrap: wrap;
+}
.nodes {
min-width: 343px;
max-width: 343px;
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 35d1234de59da83c53cc46d4061d9b9c312bea21..387c00702d3d89a4e164a408e3573cde0d7904e7 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -1,51 +1,39 @@
<template>
<div ref="othernodes" class="node">
- <div v-for="(value, index) in configPositions" v-bind:key="index">
- <div v-if="toolmode == 'move'">
- <!-- make draggable false as we are panning around -->
+ <div v-for="(value, index) in positions_filtered" v-bind:key="index">
+ <div v-for="(nodes, index) in othernodes_filtered" v-bind:key="index">
<draggable
- 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"
- @activated="onActivated"
+ @activated="onActivated(nodes.node_id)"
@dragging="onDrag"
@resizing="onResize"
- :draggable="false"
- :resizable="false"
@dragstop="onDragstop"
@resizestop="onResizestop"
style="border: 2px solid black; background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="220"
>
- <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
- <!-- <h3>Reactions</h3> -->
+ <p
+ class="read"
+ :id="nodes.node_id"
+ :inner-html.prop="nodes.node_text | marked"
+ ></p>
- <div class="react" v-if="nodeid != undefined">
- <!-- <h2>React</h2> -->
+ <div class="react">
<div class="eeee">
- <input :value="nodeid" name="id" readonly hidden />
+ <input :value="nodes.node_id" name="id" readonly hidden />
<input
id="emojifield"
class="regular-input"
v-model="input"
readonly
/>
- <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>
+
<emoji-picker @emoji="append" :search="search">
<div
class="emoji-invoker"
@@ -74,7 +62,7 @@
:style="{ top: display.y + 'px', left: display.x + 'px' }"
>
<div class="emoji-picker__search">
- <input type="text" v-model="search" v-focus />
+ <input type="text" v-model="search" />
</div>
<div>
<div
@@ -86,7 +74,7 @@
<span
v-for="(emoji, emojiName) in emojiGroup"
:key="emojiName"
- @click="insert(emoji)"
+ @click="insert(emoji), sentReact(nodes.node_id)"
:title="emojiName"
>{{ emoji }}</span
>
@@ -96,113 +84,17 @@
</div>
</div>
</emoji-picker>
- <!-- <div class="btn-row">
- <BaseButton buttonClass="action" @click="sentReact()"
- >Send Reaction</BaseButton
- >
- </div> -->
- </div>
- </div>
- </draggable>
- </div>
-
- <div v-else>
- <draggable
- 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"
- @activated="onActivated"
- @dragging="onDrag"
- @resizing="onResize"
- @dragstop="onDragstop"
- @resizestop="onResizestop"
- style="border: 2px solid black; background-color: rgb(205, 234, 255)"
- :min-width="200"
- :min-height="220"
- >
- <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
- <!-- <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="react" v-if="nodeid != undefined">
- <!-- <h2>React</h2> -->
- <div class="eeee">
- <input :value="nodeid" name="id" readonly hidden />
- <input
- id="emojifield"
- class="regular-input"
- v-model="input"
- readonly
- />
-
- <emoji-picker @emoji="append" :search="search">
- <div
- class="emoji-invoker"
- slot="emoji-invoker"
- slot-scope="{ events: { click: clickEvent } }"
- @click.stop="clickEvent"
- >
- <svg
- height="24"
- viewBox="0 0 24 24"
- width="24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path d="M0 0h24v24H0z" fill="none" />
- <path
- d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
- />
- </svg>
- </div>
+ <div class="allemoji">
<div
- slot="emoji-picker"
- slot-scope="{ emojis, insert, display }"
+ class="eachemoji"
+ v-for="(emojis, index) in configEmoji"
+ :key="index"
>
- <div
- class="emoji-picker"
- :style="{ top: display.y + 'px', left: display.x + 'px' }"
- >
- <div class="emoji-picker__search">
- <input type="text" v-model="search" v-focus />
- </div>
- <div>
- <div
- v-for="(emojiGroup, category) in emojis"
- :key="category"
- >
- <h5>{{ category }}</h5>
- <div class="emojis">
- <span
- v-for="(emoji, emojiName) in emojiGroup"
- :key="emojiName"
- @click="insert(emoji), sentReact()"
- :title="emojiName"
- >{{ emoji }}</span
- >
- </div>
- </div>
- </div>
- </div>
+ <p v-if="nodes.node_id == emojis.node_id">
+ {{ emojis.emoji_text }}
+ </p>
</div>
- </emoji-picker>
- <!-- <div class="btn-row">
- <BaseButton buttonClass="action" @click="sentReact()"
- >Send Reaction</BaseButton
- >
- </div> -->
+ </div>
</div>
</div>
</draggable>
@@ -224,19 +116,13 @@ export default {
draggable,
EmojiPicker,
},
- props: {
- nodeid: String,
- nodetext: String,
- nodewidth: Number,
- nodeheight: Number,
- deleted: Boolean,
- },
data() {
return {
input: '',
search: '',
pickupz: 1,
+ nodeid: String,
}
},
@@ -245,16 +131,34 @@ export default {
},
mounted() {},
- computed: mapState({
- scale: (state) => state.ui.scale,
- otherNodes: (state) => state.otherNodes,
- configPositions: (state) => state.configPositions,
- configConnections: (state) => state.configConnections,
- configEmoji: (state) => state.configEmoji,
- toolmode: (state) => state.ui.mode,
- }),
+ computed: {
+ ...mapState({
+ scale: (state) => state.ui.scale,
+ otherNodes: (state) => state.otherNodes,
+ configPositions: (state) => state.configPositions,
+ configConnections: (state) => state.configConnections,
+ configEmoji: (state) => state.configEmoji,
+ toolmode: (state) => state.ui.mode,
+ }),
+
+ othernodes_filtered: function () {
+ return this.otherNodes.filter((nodes) => {
+ return nodes.deleted == false
+ })
+ },
+
+ positions_filtered: function () {
+ return this.configPositions.filter((positions) => {
+ return this.otherNodes.find((node) => {
+ return !node.deleted && positions.node_id == node.node_id
+ })
+ })
+ },
+ },
+
methods: {
- onActivated() {
+ onActivated(e) {
+ this.nodeid = e
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
if (this.configPositions[i].node_id == this.nodeid) {
@@ -401,7 +305,7 @@ h3 {
top: -0.5rem;
right: 0.5rem;
width: 1.5rem;
- height: 1.5rem;
+ height: 2.5rem;
/* transform: scale(1.6); */
/* margin: 0em 0em 1em 0em; */
/* border-radius: 50%; */
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
index 35e6fe6b5a4ef9a25c1976428b713248d374ec52..13ad2aea68c06eb603f0437435f733d479ff2058 100644
--- a/app/src/views/Cards.vue
+++ b/app/src/views/Cards.vue
@@ -3,24 +3,9 @@
<div v-if="clientset">
<h1 class="mobile">All nodes - card view</h1>
- <div class="grid">
- <CardsLayer
- @editTrue="(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"
- />
+ <CardsLayer @editTrue="(e) => editTrue(e)" />
- <OtherCardslayer
- v-for="value in otherNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- v-bind:deleted="value.deleted"
- />
- </div>
+ <OtherCardslayer />
<div class="btn-row">
<!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
@@ -156,11 +141,6 @@ export default {
</script>
<style lang="css" scoped>
-.grid {
- display: flex;
- flex-wrap: wrap;
-}
-
.mobile {
margin-left: 1em;
font-size: 1em;
diff --git a/app/src/views/Organise.vue b/app/src/views/Organise.vue
index 531d7801c65aa5692b944fe452c00e220f5bf7db..0339fd36a0aec5cd949538dba3b5fae4a12ee589 100644
--- a/app/src/views/Organise.vue
+++ b/app/src/views/Organise.vue
@@ -35,40 +35,21 @@
v-bind:translation="translation"
>
<div v-if="clientset">
- <OtherNodeslayer
- v-for="value in otherNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- v-bind:deleted="value.deleted"
- />
+ <OtherNodeslayer />
<NodesLayer @edit-true="(e) => editTrue(e)" />
<TipsLayer />
<ModeCardorg />
- <ConnectionsLayer />
+ <!-- <ConnectionsLayer /> -->
</div>
<div v-else>
- <OtherNodeslayer
- v-for="value in otherNodes"
- 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)"
- 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"
- />
+ <OtherNodeslayer />
+ <NodesLayer @edit-true="(e) => editTrue(e)" />
<OnBoard
@client-added="clientAdded()"
@edit-true="(e) => editTrue(e)"
/>
- <ConnectionsLayer />
+ <!-- <ConnectionsLayer /> -->
</div>
<ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
</PanZoomContainer>
@@ -95,7 +76,7 @@
<script>
import PanZoomContainer from '@/experimental/PanZoomContainer'
-import ConnectionsLayer from '@/components/ConnectionsLayer'
+//import ConnectionsLayer from '@/components/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer'
import OffLine from '@/components/OffLine'
@@ -231,7 +212,7 @@ export default {
// SelectionLayer,
NodesLayer,
OtherNodeslayer,
- ConnectionsLayer,
+ // ConnectionsLayer,
OnBoard,
// ToolBar,
OffLine,