From 5d3a6af498a4ae2761953e05515ea259f4cb6fe2 Mon Sep 17 00:00:00 2001 From: Adam Procter <adamprocter@researchnot.es> Date: Thu, 27 Aug 2020 17:14:47 +0100 Subject: [PATCH] updating to store using store to keep track of initial connections - step 1 --- app/src/components/NodesLayer.vue | 19 ++- app/src/components/OtherNodeslayer.vue | 153 +++++++++++++++++++++++++ app/src/store/index.js | 9 ++ 3 files changed, 169 insertions(+), 12 deletions(-) diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue index f2aae14..ae4b6f2 100644 --- a/app/src/components/NodesLayer.vue +++ b/app/src/components/NodesLayer.vue @@ -237,7 +237,6 @@ import { mapState } from 'vuex' import marked from 'marked' import lodash from 'lodash' var readmode -var count = 0 var fromnode var tonode var xposstart @@ -288,6 +287,7 @@ export default { configConnections: (state) => state.configConnections, configEmoji: (state) => state.configEmoji, toolmode: (state) => state.ui.mode, + connectionstate: (state) => state.connectionstate, }), methods: { onActivated() { @@ -356,10 +356,7 @@ export default { var j for (j = 0; j < Object.keys(this.configConnections).length; j++) { - // FIXME: What is this for loop doing ?? if (this.configConnections[j].start_id == this.nodeid) { - // this.localxstart = this.configConnections[j].x_pos_start - // this.localystart = this.configConnections[j].y_pos_start this.$store.dispatch('updateConnect', { localnodeid, x, @@ -367,8 +364,6 @@ export default { }) } if (this.configConnections[j].end_id == this.nodeid) { - // this.localxstart = this.configConnections[j].x_pos_start - // this.localystart = this.configConnections[j].y_pos_start this.$store.dispatch('updateConnectTwo', { localnodeid, x, @@ -419,16 +414,18 @@ export default { }, onClickNewLink(id, xpos, ypos) { - if (count == 0) { + if (this.connectionstate == false) { fromnode = id xposstart = xpos yposstart = ypos - count = 1 - } else if (count == 1) { + //count = 1 + this.$store.dispatch('connectionState', true) + } else if (this.connectionstate == true) { tonode = id xposend = xpos yposend = ypos - count = 0 + // count = 0 + this.$store.dispatch('connectionState', false) this.$store.dispatch('makeConnect', { fromnode, tonode, @@ -438,8 +435,6 @@ export default { yposend, }) } - - // this.$store.dispatch('deleteFlag', { e }) }, }, } diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue index f5f49e7..1cb04b9 100644 --- a/app/src/components/OtherNodeslayer.vue +++ b/app/src/components/OtherNodeslayer.vue @@ -14,6 +14,7 @@ @dragging="onDrag" @resizing="onResize" :draggable="false" + :resizable="false" @dragstop="onDragstop" @resizestop="onResizestop" style="border: 1px solid black; background-color: rgb(205, 234, 255);" @@ -98,6 +99,108 @@ </vue-draggable-resizable> </div> + <div v-if="toolmode == 'connect'"> + <!-- make draggable false as we are panning around --> + <vue-draggable-resizable + v-if="nodeid == value.node_id" + :w="value.width" + :h="value.height" + :x="value.x_pos" + :y="value.y_pos" + :z="value.z_index" + @activated="onActivated" + @dragging="onDrag" + @resizing="onResize" + :draggable="false" + :resizable="false" + @dragstop="onDragstop" + @resizestop="onResizestop" + style="border: 1px solid black; background-color: rgb(205, 234, 255);" + > + <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"> + {{ nodeid }} + </p> + <BaseButton + buttonClass="new-link" + @click="onClickNewLink(nodeid, value.x_pos, value.y_pos)" + ></BaseButton> + <!-- <h3>Reactions</h3> --> + <div v-for="(emojis, index) in configEmoji" :key="index"> + <p class="allemoji" v-if="nodeid == emojis.node_id"> + {{ emojis.emoji_text }} + </p> + </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 + slot="emoji-picker" + slot-scope="{ emojis, insert, display }" + > + <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)" + :title="emojiName" + >{{ emoji }}</span + > + </div> + </div> + </div> + </div> + </div> + </emoji-picker> + <!-- <div class="btn-row"> + <BaseButton buttonClass="action" @click="sentReact()" + >Send Reaction</BaseButton + > + </div> --> + </div> + </div> + </vue-draggable-resizable> + </div> + <div v-else> <!-- make draggable false as we are panning around --> <vue-draggable-resizable @@ -201,6 +304,12 @@ import { mapState } from 'vuex' import EmojiPicker from 'vue-emoji-picker' import marked from 'marked' +var fromnode +var tonode +var xposstart +var yposstart +var xposend +var yposend export default { name: 'otherNodeslayer', @@ -231,8 +340,10 @@ export default { computed: mapState({ otherNodes: (state) => state.otherNodes, configPositions: (state) => state.configPositions, + configConnections: (state) => state.configConnections, configEmoji: (state) => state.configEmoji, toolmode: (state) => state.ui.mode, + connectionstate: (state) => state.connectionstate, }), methods: { onActivated() { @@ -298,6 +409,24 @@ export default { height, zindex, }) + + var j + for (j = 0; j < Object.keys(this.configConnections).length; j++) { + if (this.configConnections[j].start_id == this.nodeid) { + this.$store.dispatch('updateConnect', { + localnodeid, + x, + y, + }) + } + if (this.configConnections[j].end_id == this.nodeid) { + this.$store.dispatch('updateConnectTwo', { + localnodeid, + x, + y, + }) + } + } }, append(emoji) { this.input += emoji @@ -312,6 +441,30 @@ export default { this.input = '' }, + onClickNewLink(id, xpos, ypos) { + console.log(this.connectionstate) + if (this.connectionstate == false) { + fromnode = id + xposstart = xpos + yposstart = ypos + //count = 1 + this.$store.dispatch('connectionState', true) + } else if (this.connectionstate == true) { + tonode = id + xposend = xpos + yposend = ypos + // count = 0 + this.$store.dispatch('connectionState', false) + this.$store.dispatch('makeConnect', { + fromnode, + tonode, + xposstart, + yposstart, + xposend, + yposend, + }) + } + }, }, directives: { focus: { diff --git a/app/src/store/index.js b/app/src/store/index.js index f1dc758..f02af08 100644 --- a/app/src/store/index.js +++ b/app/src/store/index.js @@ -42,6 +42,7 @@ var remote = const store = new Vuex.Store({ state: { shortcutstate: false, + connectionstate: false, version: process.env.VUE_APP_VERSION, localnodeid: '', global_pos_name: 'positions', @@ -381,6 +382,10 @@ const store = new Vuex.Store({ state.shortcutstate = e }, + CONNECTION_STATE(state, e) { + state.connectionstate = e + }, + ADD_NODE(state, e) { var uniqueid = Math.random().toString(36).substring(2, 15) + @@ -702,6 +707,10 @@ const store = new Vuex.Store({ shortcutState: ({ commit }, e) => { commit('SHORTCUT_STATE', e) }, + + connectionState: ({ commit }, e) => { + commit('CONNECTION_STATE', e) + }, deleteFlag: ({ commit }, e) => { // var text = e.target.value commit('DELETE_FLAG', e) -- GitLab