diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index a3b1a7311eaecfa7af1c6f5936fb5d11b047fb33..296eb9756e1fe8dd44ddb93f07c18549dffdad41 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -8,6 +8,14 @@
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
//var initialMoveTo
+//var id
+var fromnode
+var tonode
+var xposstart
+var yposstart
+var xposend
+var yposend
+var endState = false
export default {
name: 'ConnectionsLayer',
@@ -23,7 +31,7 @@ export default {
myNodes: (state) => state.myNodes,
otherNodes: (state) => state.otherNodes,
toolmode: (state) => state.ui.mode,
- connectionstate: (state) => state.connectionstate,
+ // connectionstate: (state) => state.connectionstate,
}),
watch: {
@@ -46,41 +54,34 @@ export default {
if (this.toolmode == 'connect') {
this.buttonsDraw()
} else {
- this.connectionsDraw()
+ // this.connectionsDraw()
}
},
- makeConnection() {
- // var i
- // var j
- // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
- // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
- // console.log(this.myNodes[i].node_id)
- // }
- // }
- // }
- // 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,
- // })
- // }
+ makeConnection(id, xpos, ypos) {
+ if (endState == false) {
+ fromnode = id
+ xposstart = xpos
+ yposstart = ypos
+ endState = true
+ //count = 1
+ // this.$store.dispatch('connectionState', true)
+ } else if (endState == true) {
+ tonode = id
+ xposend = xpos
+ yposend = ypos
+ // count = 0
+ // this.$store.dispatch('connectionState', false)
+ // console.log(fromnode, tonode, xposstart, yposstart, xposend, yposend)
+ this.$store.dispatch('makeConnect', {
+ fromnode,
+ tonode,
+ xposstart,
+ yposstart,
+ xposend,
+ yposend,
+ })
+ }
},
buttonsDraw() {
var i
@@ -88,12 +89,11 @@ export default {
//var n = 1
var ref = this
var buttonMap = {}
+ var buttonMapOther = {}
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
- // buttonMap['login'] = new PIXI.Graphics();
-
for (i = 0; i < Object.keys(this.myNodes).length; i++) {
buttonMap[i] = new PIXI.Graphics()
// console.log(buttonMap[i])
@@ -120,154 +120,71 @@ export default {
buttonMap[i].interactive = true
// Shows hand cursor
buttonMap[i].buttonMode = true
+ }
+
+ buttonMap[i]
+ .on('pointerdown', onDragStart)
+ .on('pointerdown', start)
+ .on('pointerup', onDragEnd)
+ .on('pointerup', finish)
+ .on('pointerupoutside', onDragEnd)
+ .on('pointermove', onDragMove)
+ }
+
+ for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
+ buttonMapOther[i] = new PIXI.Graphics()
+ // console.log(buttonMap[i])
+ for (j = 0; j < Object.keys(this.configPositions).length; j++) {
+ if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
+ buttonMapOther[i].name = this.otherNodes[i].node_id
+ // console.log(button_one.name)
+ buttonMapOther[i].lineStyle(0)
+ buttonMapOther[i].beginFill(0xcab6ff, 1)
+ // x, y, radius
+
+ buttonMapOther[i].drawCircle(
+ this.configPositions[j].x_pos + this.configPositions[j].width,
+ this.configPositions[j].y_pos +
+ this.configPositions[j].height / 2,
+ 15
+ )
+ buttonMapOther[i].endFill()
+ // names it the last one only?
+ }
+ stage.addChild(buttonMapOther[i])
- buttonMap[i]
- .on('pointerdown', onDragStart)
- .on('pointerdown', start)
- .on('pointerup', onDragEnd)
- .on('pointerupoutside', onDragEnd)
- .on('pointermove', onDragMove)
+ // Opt-in to interactivity
+ buttonMapOther[i].interactive = true
+ // Shows hand cursor
+ buttonMapOther[i].buttonMode = true
}
+
+ buttonMapOther[i]
+ .on('pointerdown', onDragStart)
+ .on('pointerdown', start)
+ .on('pointerup', onDragEnd)
+ .on('pointerup', finish)
+ .on('pointerupoutside', onDragEnd)
+ .on('pointermove', onDragMove)
}
- // const array = [...Array(Object.keys(this.myNodes).length)].map(
- // (k, kk) => {
- // const button = new PIXI.Graphics()
- // button.lineStyle(0)
- // button.beginFill(0xcab6ff, 1)
- // const txt = new PIXI.Text('name:' + kk)
- // button.name = String(kk)
- // // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
- // // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // // if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
- // // button.name = String(this.myNodes[i].node_id)
- // // }
- // // }
- // // }
- // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // button.drawCircle(
- // this.configPositions[j].x_pos + this.configPositions[j].width,
- // this.configPositions[j].y_pos +
- // this.configPositions[j].height / 2,
- // 15
- // )
- // // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
- // // if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
- // // // button.name = String(this.myNodes[i].node_id)
- // // }
- // // }
- // }
- // // button.position.set(50 * kk)
- // button.addChild(txt)
- // button.endFill()
- // return button
-
- //for (i = 0; i < Object.keys(this.myNodes).length; i++) {
- // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
- // // x, y, radius
- // const txt = new PIXI.Text('name:' + kk)
- // button.drawCircle(
- // this.configPositions[j].x_pos + this.configPositions[j].width,
- // this.configPositions[j].y_pos +
- // this.configPositions[j].height / 2,
- // 15
- // )
- // button.endFill()
- // button.addChild(txt)
- // return button
- // }
- // }
- // }
- // }
- // }
- // )
-
- // console.log(array)
- // stage.addChild(...array) // we add all instances of graphics from the array in a container.
-
- // const array = [...Array(10)].map((i, ii) => {
- // const button = new PIXI.Graphics()
- // // const txt = new PIXI.Text('name:' + ii) // just a visual debug help for you
- // // yes this is a good way to identify your pixi ref with a node name from DOM
- // // btw i prefer use Classes and extends (by context)
- // button.name = String(ii)
-
- // button.beginFill(0xde3249).drawRect(0, 0, 100, 100).endFill()
- // button.position.set(50 * ii)
- // button.blendMode = 1
- // // button.addChild(txt)
- // return button
- // })
- // console.log(array)
- // stage.addChild(...array) // we add all instances of grafics from the array in a container.
- // var buttons = []
- // let container = new PIXI.Container()
-
- // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
- // buttons = new PIXI.Graphics()
- // // console.log(buttons)
- // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
- // buttons.name = this.myNodes[i].node_id
- // // console.log(button_one.name)
- // buttons.lineStyle(0)
- // buttons.beginFill(0xcab6ff, 1)
- // // x, y, radius
-
- // buttons.drawCircle(
- // this.configPositions[j].x_pos + this.configPositions[j].width,
- // this.configPositions[j].y_pos +
- // this.configPositions[j].height / 2,
- // 15
- // )
- // buttons.endFill()
- // // names it the last one only?
- // }
- // }
- // }
-
- // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
- // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // if (this.myNodes[i].node_id == this.configPositions[j].node_id) {
- // texts.text = this.myNodes[i].node_id
- // texts.x = this.configPositions[j].x_pos
- // texts.y = this.configPositions[j].y_pos
- // }
- // }
- // }
-
- // for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
- // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
- // if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
- // buttons.name = this.otherNodes[i].node_id
-
- // buttons.lineStyle(0)
-
- // buttons.beginFill(0xcab6ff, 1)
- // // x, y, radius
- // buttons.drawCircle(
- // this.configPositions[j].x_pos + this.configPositions[j].width,
- // this.configPositions[j].y_pos +
- // this.configPositions[j].height / 2,
- // 15
- // )
- // buttons.endFill()
- // }
- // }
- // }
let line = new PIXI.Graphics()
var initialMoveTo
let lines = []
- function start() {
- ref.makeConnection()
+ function start(event) {
+ this.id = this.name
+ ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
+ }
+
+ function finish(event) {
+ this.id = this.name
+ ref.makeConnection(this.id, event.data.global.x, event.data.global.y)
}
function onDragStart(event) {
- console.log(this.name)
this.dragging = true
// returns on the last one in the loop
// console.log(button_one.name)
@@ -285,7 +202,7 @@ export default {
}
function onDragEnd() {
- console.log(this.name)
+ console.log('end')
this.dragging = false
stage.removeChild(line)
}
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 491f69f2e3de3c673e517288763d905d61e43741..f6bd5804a2e2f87f81a2b16de765e6178580eb56 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -75,85 +75,6 @@
</vue-draggable-resizable>
</div>
- <div v-else-if="toolmode == 'connect'">
- <vue-draggable-resizable
- class="innernode"
- v-if="nodeid == value.node_id"
- :w="value.width"
- :h="value.height"
- :x="value.x_pos"
- :y="value.y_pos"
- :z="value.z_index"
- :draggable="false"
- :resizable="false"
- style="background-color: rgb(205, 234, 255)"
- :min-width="200"
- :min-height="221"
- >
- <form>
- <div v-if="value.read_mode == false">
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <textarea
- v-if="nodeid == value.node_id"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- @input="editNode"
- v-model="value.node_text"
- :id="nodeid"
- class="drag-cancel"
- ref="nodetext"
- placeholder="Idea goes here! (auto saved every keystroke)"
- ></textarea>
- </div>
- </div>
- <div v-if="value.read_mode == true">
- <p
- class="read"
- :id="nodeid"
- :inner-html.prop="nodetext | marked"
- ></p>
- </div>
-
- <!-- <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>
-
- <p class="info">*markdown supported & autosaves</p>
- <div class="btn-row">
- <BaseButton buttonClass="danger" @click="deleteFlag()"
- >Hide</BaseButton
- >
- <BaseButton
- buttonClass="new-link"
- @mousedown="onClickNewLink(nodeid, value.x_pos, value.y_pos)"
- ></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>
- </vue-draggable-resizable>
- </div>
-
<!-- Same code as above when in any other mode other than move so you can drag nodes-->
<div v-else>
@@ -243,12 +164,6 @@ import { mapState } from 'vuex'
import marked from 'marked'
import lodash from 'lodash'
var readmode
-var fromnode
-var tonode
-var xposstart
-var yposstart
-var xposend
-var yposend
export default {
name: 'NodesLayer',
@@ -293,7 +208,6 @@ export default {
configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode,
- connectionstate: (state) => state.connectionstate,
}),
methods: {
onActivated() {
@@ -418,30 +332,6 @@ export default {
this.mode = 'Edit'
}
},
-
- onClickNewLink(id, xpos, ypos) {
- 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,
- })
- }
- },
},
}
</script>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index c6d737d3a2e0020693cf57dd53eea529e992d350..e8d2d9f58d7c3e2b2ae892ce6aee25f66f64c3a7 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -22,6 +22,7 @@
autocapitalize="none"
ref="objectname"
v-on:keyup.enter="setClient()"
+ autofocus
@focus="editTrue(true)"
@blur="editTrue(false)"
/>
@@ -58,7 +59,6 @@
placeholder="microcosm name"
autocorrect="off"
autocapitalize="none"
- autofocus
@focus="editTrue(true)"
@blur="editTrue(false)"
v-on:keyup.enter="createMicrocosm(), letsGo()"
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index cfdb94a2d04c6824070fff1394767c5037097775..b2226bff5702fe9f740570b8a76c6b2d3a3f900f 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -17,7 +17,7 @@
:resizable="false"
@dragstop="onDragstop"
@resizestop="onResizestop"
- style="border: 1px solid black; background-color: rgb(205, 234, 255);"
+ style="border: 1px solid black; background-color: rgb(205, 234, 255)"
>
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }}
@@ -100,108 +100,6 @@
</vue-draggable-resizable>
</div>
- <div v-else-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
@@ -216,7 +114,7 @@
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
- style="border: 1px solid black; background-color: rgb(205, 234, 255);"
+ style="border: 1px solid black; background-color: rgb(205, 234, 255)"
>
<p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }}
@@ -305,12 +203,6 @@
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',
@@ -344,7 +236,6 @@ export default {
configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode,
- connectionstate: (state) => state.connectionstate,
}),
methods: {
onActivated() {
@@ -442,30 +333,6 @@ 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 f02af08ca4b4b8eeed602d9a1a24d85e10a1e48d..c1afaab92beb024bb5e5a1b5032cec7868fc4ecf 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -42,7 +42,7 @@ var remote =
const store = new Vuex.Store({
state: {
shortcutstate: false,
- connectionstate: false,
+ // connectionstate: false,
version: process.env.VUE_APP_VERSION,
localnodeid: '',
global_pos_name: 'positions',
@@ -382,9 +382,9 @@ const store = new Vuex.Store({
state.shortcutstate = e
},
- CONNECTION_STATE(state, e) {
- state.connectionstate = e
- },
+ // CONNECTION_STATE(state, e) {
+ // state.connectionstate = e
+ // },
ADD_NODE(state, e) {
var uniqueid =
@@ -708,9 +708,9 @@ const store = new Vuex.Store({
commit('SHORTCUT_STATE', e)
},
- connectionState: ({ commit }, e) => {
- commit('CONNECTION_STATE', e)
- },
+ // connectionState: ({ commit }, e) => {
+ // commit('CONNECTION_STATE', e)
+ // },
deleteFlag: ({ commit }, e) => {
// var text = e.target.value
commit('DELETE_FLAG', e)