Skip to content
Snippets Groups Projects
Commit a102b461 authored by Adam Procter's avatar Adam Procter
Browse files

connections working 

a few bugs to do with implementation
parent a04d9a76
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/src/components/ConnectionsLayer.vue
+ 88
− 171
View file @ a102b461
...@@ -8,6 +8,14 @@ ...@@ -8,6 +8,14 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import * as PIXI from 'pixi.js' import * as PIXI from 'pixi.js'
//var initialMoveTo //var initialMoveTo
//var id
var fromnode
var tonode
var xposstart
var yposstart
var xposend
var yposend
var endState = false
export default { export default {
name: 'ConnectionsLayer', name: 'ConnectionsLayer',
...@@ -23,7 +31,7 @@ export default { ...@@ -23,7 +31,7 @@ export default {
myNodes: (state) => state.myNodes, myNodes: (state) => state.myNodes,
otherNodes: (state) => state.otherNodes, otherNodes: (state) => state.otherNodes,
toolmode: (state) => state.ui.mode, toolmode: (state) => state.ui.mode,
connectionstate: (state) => state.connectionstate, // connectionstate: (state) => state.connectionstate,
}), }),
watch: { watch: {
...@@ -46,41 +54,34 @@ export default { ...@@ -46,41 +54,34 @@ export default {
if (this.toolmode == 'connect') { if (this.toolmode == 'connect') {
this.buttonsDraw() this.buttonsDraw()
} else { } else {
this.connectionsDraw() // this.connectionsDraw()
} }
}, },
makeConnection() { makeConnection(id, xpos, ypos) {
// var i if (endState == false) {
// var j fromnode = id
// for (i = 0; i < Object.keys(this.myNodes).length; i++) { xposstart = xpos
// for (j = 0; j < Object.keys(this.configPositions).length; j++) { yposstart = ypos
// if (this.configPositions[j].node_id == this.myNodes[i].node_id) { endState = true
// console.log(this.myNodes[i].node_id) //count = 1
// } // this.$store.dispatch('connectionState', true)
// } } else if (endState == true) {
// } tonode = id
// if (this.connectionstate == false) { xposend = xpos
// fromnode = id yposend = ypos
// xposstart = xpos // count = 0
// yposstart = ypos // this.$store.dispatch('connectionState', false)
// //count = 1 // console.log(fromnode, tonode, xposstart, yposstart, xposend, yposend)
// this.$store.dispatch('connectionState', true) this.$store.dispatch('makeConnect', {
// } else if (this.connectionstate == true) { fromnode,
// tonode = id tonode,
// xposend = xpos xposstart,
// yposend = ypos yposstart,
// // count = 0 xposend,
// this.$store.dispatch('connectionState', false) yposend,
// this.$store.dispatch('makeConnect', { })
// fromnode, }
// tonode,
// xposstart,
// yposstart,
// xposend,
// yposend,
// })
// }
}, },
buttonsDraw() { buttonsDraw() {
var i var i
...@@ -88,12 +89,11 @@ export default { ...@@ -88,12 +89,11 @@ export default {
//var n = 1 //var n = 1
var ref = this var ref = this
var buttonMap = {} var buttonMap = {}
var buttonMapOther = {}
this.canvas = this.$refs.pixi this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage const stage = this.PIXIApp.stage
// buttonMap['login'] = new PIXI.Graphics();
for (i = 0; i < Object.keys(this.myNodes).length; i++) { for (i = 0; i < Object.keys(this.myNodes).length; i++) {
buttonMap[i] = new PIXI.Graphics() buttonMap[i] = new PIXI.Graphics()
// console.log(buttonMap[i]) // console.log(buttonMap[i])
...@@ -120,154 +120,71 @@ export default { ...@@ -120,154 +120,71 @@ export default {
buttonMap[i].interactive = true buttonMap[i].interactive = true
// Shows hand cursor // Shows hand cursor
buttonMap[i].buttonMode = true 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] // Opt-in to interactivity
.on('pointerdown', onDragStart) buttonMapOther[i].interactive = true
.on('pointerdown', start) // Shows hand cursor
.on('pointerup', onDragEnd) buttonMapOther[i].buttonMode = true
.on('pointerupoutside', onDragEnd)
.on('pointermove', onDragMove)
} }
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() let line = new PIXI.Graphics()
var initialMoveTo var initialMoveTo
let lines = [] let lines = []
function start() { function start(event) {
ref.makeConnection() 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) { function onDragStart(event) {
console.log(this.name)
this.dragging = true this.dragging = true
// returns on the last one in the loop // returns on the last one in the loop
// console.log(button_one.name) // console.log(button_one.name)
...@@ -285,7 +202,7 @@ export default { ...@@ -285,7 +202,7 @@ export default {
} }
function onDragEnd() { function onDragEnd() {
console.log(this.name) console.log('end')
this.dragging = false this.dragging = false
stage.removeChild(line) stage.removeChild(line)
} }
......
app/src/components/NodesLayer.vue
+ 0
− 110
View file @ a102b461
...@@ -75,85 +75,6 @@ ...@@ -75,85 +75,6 @@
</vue-draggable-resizable> </vue-draggable-resizable>
</div> </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 &amp; 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--> <!-- Same code as above when in any other mode other than move so you can drag nodes-->
<div v-else> <div v-else>
...@@ -243,12 +164,6 @@ import { mapState } from 'vuex' ...@@ -243,12 +164,6 @@ import { mapState } from 'vuex'
import marked from 'marked' import marked from 'marked'
import lodash from 'lodash' import lodash from 'lodash'
var readmode var readmode
var fromnode
var tonode
var xposstart
var yposstart
var xposend
var yposend
export default { export default {
name: 'NodesLayer', name: 'NodesLayer',
...@@ -293,7 +208,6 @@ export default { ...@@ -293,7 +208,6 @@ export default {
configConnections: (state) => state.configConnections, configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji, configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode, toolmode: (state) => state.ui.mode,
connectionstate: (state) => state.connectionstate,
}), }),
methods: { methods: {
onActivated() { onActivated() {
...@@ -418,30 +332,6 @@ export default { ...@@ -418,30 +332,6 @@ export default {
this.mode = 'Edit' 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> </script>
......
app/src/components/OnBoard.vue
+ 1
− 1
View file @ a102b461
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
autocapitalize="none" autocapitalize="none"
ref="objectname" ref="objectname"
v-on:keyup.enter="setClient()" v-on:keyup.enter="setClient()"
autofocus
@focus="editTrue(true)" @focus="editTrue(true)"
@blur="editTrue(false)" @blur="editTrue(false)"
/> />
...@@ -58,7 +59,6 @@ ...@@ -58,7 +59,6 @@
placeholder="microcosm name" placeholder="microcosm name"
autocorrect="off" autocorrect="off"
autocapitalize="none" autocapitalize="none"
autofocus
@focus="editTrue(true)" @focus="editTrue(true)"
@blur="editTrue(false)" @blur="editTrue(false)"
v-on:keyup.enter="createMicrocosm(), letsGo()" v-on:keyup.enter="createMicrocosm(), letsGo()"
......
app/src/components/OtherNodeslayer.vue
+ 2
− 135
View file @ a102b461
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
:resizable="false" :resizable="false"
@dragstop="onDragstop" @dragstop="onDragstop"
@resizestop="onResizestop" @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"> <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }} {{ nodeid }}
...@@ -100,108 +100,6 @@ ...@@ -100,108 +100,6 @@
</vue-draggable-resizable> </vue-draggable-resizable>
</div> </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> <div v-else>
<!-- make draggable false as we are panning around --> <!-- make draggable false as we are panning around -->
<vue-draggable-resizable <vue-draggable-resizable
...@@ -216,7 +114,7 @@ ...@@ -216,7 +114,7 @@
@resizing="onResize" @resizing="onResize"
@dragstop="onDragstop" @dragstop="onDragstop"
@resizestop="onResizestop" @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"> <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
{{ nodeid }} {{ nodeid }}
...@@ -305,12 +203,6 @@ ...@@ -305,12 +203,6 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import EmojiPicker from 'vue-emoji-picker' import EmojiPicker from 'vue-emoji-picker'
import marked from 'marked' import marked from 'marked'
var fromnode
var tonode
var xposstart
var yposstart
var xposend
var yposend
export default { export default {
name: 'otherNodeslayer', name: 'otherNodeslayer',
...@@ -344,7 +236,6 @@ export default { ...@@ -344,7 +236,6 @@ export default {
configConnections: (state) => state.configConnections, configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji, configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode, toolmode: (state) => state.ui.mode,
connectionstate: (state) => state.connectionstate,
}), }),
methods: { methods: {
onActivated() { onActivated() {
...@@ -442,30 +333,6 @@ export default { ...@@ -442,30 +333,6 @@ export default {
this.input = '' 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: { directives: {
focus: { focus: {
......
app/src/store/index.js
+ 7
− 7
View file @ a102b461
...@@ -42,7 +42,7 @@ var remote = ...@@ -42,7 +42,7 @@ var remote =
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
shortcutstate: false, shortcutstate: false,
connectionstate: false, // connectionstate: false,
version: process.env.VUE_APP_VERSION, version: process.env.VUE_APP_VERSION,
localnodeid: '', localnodeid: '',
global_pos_name: 'positions', global_pos_name: 'positions',
...@@ -382,9 +382,9 @@ const store = new Vuex.Store({ ...@@ -382,9 +382,9 @@ const store = new Vuex.Store({
state.shortcutstate = e state.shortcutstate = e
}, },
CONNECTION_STATE(state, e) { // CONNECTION_STATE(state, e) {
state.connectionstate = e // state.connectionstate = e
}, // },
ADD_NODE(state, e) { ADD_NODE(state, e) {
var uniqueid = var uniqueid =
...@@ -708,9 +708,9 @@ const store = new Vuex.Store({ ...@@ -708,9 +708,9 @@ const store = new Vuex.Store({
commit('SHORTCUT_STATE', e) commit('SHORTCUT_STATE', e)
}, },
connectionState: ({ commit }, e) => { // connectionState: ({ commit }, e) => {
commit('CONNECTION_STATE', e) // commit('CONNECTION_STATE', e)
}, // },
deleteFlag: ({ commit }, e) => { deleteFlag: ({ commit }, e) => {
// var text = e.target.value // var text = e.target.value
commit('DELETE_FLAG', e) commit('DELETE_FLAG', e)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment