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

pixi connections 

version 1 of connections is working
parent ea75100e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/src/components/BaseButton.vue
+ 1
− 1
View file @ c99fb8dd
......@@ -71,7 +71,7 @@ button.new-link {
border-radius: 10px;
border: 2px solid rgba(0, 0, 0, 0.1);
z-index: 100;
background: rgb(253, 180, 243);
background-color: #cab6ff;
outline: none;
}
</style>
app/src/components/ConnectionsLayer.vue
+ 29
− 84
View file @ c99fb8dd
......@@ -11,23 +11,23 @@ import * as PIXI from 'pixi.js'
export default {
name: 'ConnectionsLayer',
computed: mapState({
toolmode: (state) => state.ui.mode,
configConnections: (state) => state.configConnections,
}),
// data() {
// // return {
// // // app: new PIXI.Application({
// // // width: window.innerWidth,
// // // height: window.innerHeight,
// // // antialias: true,
// // // transparent: true,
// // // view: canvas,
// // // }),
// // }
// },
watch: {
configConnections: {
deep: true,
handler() {
this.drawPixi()
},
},
},
methods: {
drawPixi() {
var i
var canvas = document.getElementById('pixi')
const app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
......@@ -35,83 +35,28 @@ export default {
transparent: true,
view: canvas,
})
let graphics = new PIXI.Graphics()
///graphics.x = app.renderer.width / 2
//graphics.y = app.renderer.width / 2
//document.body.appendChild(app.view)
// graphics.lineStyle(0)
// graphics.beginFill(0xde3249, 1)
// graphics.drawCircle(100, 250, 50)
// graphics.endFill()
// graphics.lineStyle(0)
// graphics.beginFill(0xde3249, 1)
// graphics.drawCircle(300, 250, 50)
// graphics.endFill()
graphics.lineStyle(8, 0x000000)
//start
graphics.moveTo(300, 250)
//end
graphics.lineTo(500, 250)
// graphics.lineStyle(2, 0xffffff, 1)
// graphics.moveTo(0, 0)
graphics.lineStyle(8, 0xcab6ff)
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//console.log('tock')
//console.log(this.configConnections[i].x_pos_start)
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,
this.configConnections[i].y_pos_start
)
//end
graphics.lineTo(
this.configConnections[i].x_pos_end,
this.configConnections[i].y_pos_end
)
}
app.stage.addChild(graphics)
},
},
mounted() {
this.drawPixi()
},
}
// TODO: This is a sample of drawing lines with mouse with PIXI
// Opt-in to interactivity
// graphics.interactive = true
// // Shows hand cursor
// graphics.buttonMode = true
// graphics
// .on('pointerdown', onDragStart)
// .on('pointerup', onDragEnd)
// .on('pointerupoutside', onDragEnd)
// .on('pointermove', onDragMove)
// let lines = []
// let initialMoveTo
// function onDragStart(event) {
// this.dragging = true
// let mouseX = event.data.global.x
// let mouseY = event.data.global.y
// initialMoveTo = [mouseX, mouseY]
// let line = new PIXI.Graphics()
// line.lineStyle(6, 0xffffff)
// line.moveTo(mouseX, mouseY)
// lines = [line].concat(lines)
// app.stage.addChild(line)
// }
// function onDragEnd() {
// this.dragging = false
// }
// function onDragMove(event) {
// if (this.dragging) {
// let mouseX = event.data.global.x
// let mouseY = event.data.global.y
// lines[0].clear()
// lines[0].lineStyle(6, 0xffffff)
// lines[0].moveTo(initialMoveTo[0], initialMoveTo[1])
// lines[0].lineTo(mouseX, mouseY)
// }
// }
</script>
app/src/components/NodesLayer.vue
+ 132
− 20
View file @ c99fb8dd
......@@ -11,6 +11,7 @@
:y="posvalue.y_pos"
:z="posvalue.z_index"
:draggable="false"
:resizable="false"
style="background-color: rgb(205, 234, 255);"
>
<form>
......@@ -72,6 +73,83 @@
</vue-draggable-resizable>
</div>
<div v-else-if="toolmode == 'connect'">
<vue-draggable-resizable
class="innernode"
v-if="nodeid == posvalue.node_id"
:w="posvalue.width"
:h="posvalue.height"
:x="posvalue.x_pos"
:y="posvalue.y_pos"
:z="posvalue.z_index"
:draggable="false"
:resizable="false"
style="background-color: rgb(205, 234, 255);"
>
<form>
<div v-if="posvalue.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="posvalue.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()"
>Delete</BaseButton
>
<BaseButton
buttonClass="new-link"
@click="onClickNewLink(nodeid, posvalue.x_pos, posvalue.y_pos)"
></BaseButton>
<div v-if="posvalue.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>
......@@ -115,21 +193,6 @@
:id="nodeid"
:inner-html.prop="nodetext | marked"
></p>
<!-- <button class="link-node" /> -->
<!-- <button
class="new-link"
v-on:mousedown="() => onClickNewLink(node.id)"
/>
<button
class="link-node"
v-for="link of node.links"
v-bind:key="link.id"
v-bind:style="{
backgroundColor: getPalette(link.color, 'dark'),
}"
/> -->
</div>
<!-- <h3>Reactions</h3> -->
......@@ -174,6 +237,13 @@ import { mapState } from 'vuex'
import marked from 'marked'
import lodash from 'lodash'
var readmode
var count = 0
var fromnode
var tonode
var xposstart
var yposstart
var xposend
var yposend
export default {
name: 'NodesLayer',
......@@ -215,13 +285,13 @@ export default {
computed: mapState({
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
configConnections: (state) => state.configConnections,
configEmoji: (state) => state.configEmoji,
toolmode: (state) => state.ui.mode,
}),
methods: {
onActivated() {
var i
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
if (this.configPositions[i].node_id == this.nodeid) {
this.width = this.configPositions[i].width
......@@ -267,6 +337,7 @@ export default {
width = this.width
height = this.height
var i
// FIXME: What is this for loop doing ??
for (i = 0; i < Object.keys(this.configPositions).length; i++) {
if (this.configPositions[i].node_id == this.nodeid) {
this.localx = this.configPositions[i].x_pos
......@@ -282,6 +353,29 @@ export default {
height,
zindex,
})
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,
y,
})
}
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,
y,
})
}
}
},
editTrue(e) {
......@@ -324,10 +418,28 @@ export default {
}
},
onClickNewLink(e) {
// e = this.nodeid
console.log(e)
//this.newLink = { from: id };
onClickNewLink(id, xpos, ypos) {
if (count == 0) {
fromnode = id
xposstart = xpos
yposstart = ypos
count = 1
} else if (count == 1) {
tonode = id
xposend = xpos
yposend = ypos
count = 0
this.$store.dispatch('makeConnect', {
fromnode,
tonode,
xposstart,
yposstart,
xposend,
yposend,
})
}
// this.$store.dispatch('deleteFlag', { e })
},
},
}
......
app/src/store/index.js
+ 82
− 9
View file @ c99fb8dd
......@@ -242,15 +242,81 @@ const store = new Vuex.Store({
y_pos_end: e.yposend,
})
// from db | in app
// connect_id | connectID
// start_id | startID
pouchdb
.get(state.global_con_name)
.then(function (doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: state.global_con_name,
_rev: doc._rev,
connections: state.configConnections,
},
])
})
.then(function () {
return pouchdb.get(state.global_con_name).then(function (doc) {
state.configConnections = doc.connections
})
})
.catch(function (err) {
if (err.status == 404) {
// pouchdb.put({ })
}
})
},
UPDATE_CONNECT(state, e) {
// console.log(e)
var i
for (i = 0; i < Object.keys(state.configConnections).length; i++) {
if (e.localnodeid == state.configConnections[i].start_id) {
state.configConnections[i].x_pos_start = e.x
state.configConnections[i].y_pos_start = e.y
}
}
pouchdb
.get(state.global_con_name)
.then(function (doc) {
//console.log(doc)
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: state.global_con_name,
_rev: doc._rev,
connections: state.configConnections,
},
])
})
.then(function () {
return pouchdb.get(state.global_con_name).then(function (doc) {
state.configConnections = doc.connections
})
})
.catch(function (err) {
if (err.status == 404) {
// pouchdb.put({ })
}
})
},
UPDATE_CONNECT_TWO(state, e) {
// console.log(e)
var i
for (i = 0; i < Object.keys(state.configConnections).length; i++) {
if (e.localnodeid == state.configConnections[i].end_id) {
state.configConnections[i].x_pos_end = e.x
state.configConnections[i].y_pos_end = e.y
}
}
pouchdb
.get(state.global_con_name)
.then(function (doc) {
//console.log(doc)
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: state.global_con_name,
......@@ -272,6 +338,7 @@ const store = new Vuex.Store({
},
MOVE_POS(state, e) {
//console.log(e)
var i
for (i = 0; i < Object.keys(state.configPositions).length; i++) {
if (e.localnodeid == state.configPositions[i].node_id) {
......@@ -601,6 +668,13 @@ const store = new Vuex.Store({
movePos: ({ commit }, nodeid, xpos, ypos, width, height, zindex) => {
commit('MOVE_POS', nodeid, xpos, ypos, width, height, zindex)
},
updateConnect: ({ commit }, fromnode, xposstart, yposstart) => {
commit('UPDATE_CONNECT', fromnode, xposstart, yposstart)
},
updateConnectTwo: ({ commit }, tonode, xposend, yposend) => {
commit('UPDATE_CONNECT_TWO', tonode, xposend, yposend)
},
readFlag: ({ commit }, e) => {
// var text = e.target.value
commit('READ_FLAG', e)
......@@ -614,16 +688,15 @@ const store = new Vuex.Store({
makeConnect: (
{ commit },
{ connectid, fromnode, tonode, path, color, linedash, linewidth }
{ fromnode, tonode, xposstart, yposstart, yposend, xposend }
) => {
commit('MAKE_CONNECT', {
connectid,
fromnode,
tonode,
path,
color,
linedash,
linewidth,
xposstart,
yposstart,
yposend,
xposend,
})
},
shortcutState: ({ commit }, e) => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment