diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index f2aae147b43f27cee4be1d4c428eee2819e77335..ae4b6f2f3efd4b20251f4e90f997bf85ae057357 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 f5f49e71ec90a9945df8f167a8645b9c2cb70d53..1cb04b91d7e3f8d5121ce081fb6120d52b3e2c98 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 f1dc758033462a91ea71eb9f57ee32d5b1d8e4de..f02af08ca4b4b8eeed602d9a1a24d85e10a1e48d 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)