updating to store

using store to keep track of initial connections - step 1

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 })
     },
   },
 }

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: {

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)