From c99fb8dd6b47df2bf46d711ec35834dc3870ea76 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 26 Aug 2020 17:21:03 +0100
Subject: [PATCH] pixi connections
version 1 of connections is working
---
app/src/components/BaseButton.vue | 2 +-
app/src/components/ConnectionsLayer.vue | 113 +++++-------------
app/src/components/NodesLayer.vue | 152 ++++++++++++++++++++----
app/src/store/index.js | 91 ++++++++++++--
4 files changed, 244 insertions(+), 114 deletions(-)
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
index 5003a18..c027a8e 100644
--- a/app/src/components/BaseButton.vue
+++ b/app/src/components/BaseButton.vue
@@ -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>
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 1dbbdd3..2616f46 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -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>
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 82352eb..53b16a7 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -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 & 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 })
},
},
}
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 9945011..f1dc758 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -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) => {
--
GitLab