diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ca3674b3e931dcc20828c017117e62c77dc7306..478d248732e7864e837c8e473d4334cdbfb40169 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 0.1.21
+
+_26th August 2020_
+
+### Changed
+
+- Minor tweaks to order for of onboarding
+
+### Added
+
+- version 1 of connections you can now connect nodes, drawn using PixiJS
+
# 0.1.20
_14th July 2020_
diff --git a/app/package.json b/app/package.json
index 9cb069b0328cc9ef48dd2012e78785f63424dc2b..7f19014b77ba230a59d0ef3ac6f9baa73f5abf1b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.20",
+ "version": "0.1.21",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
index 5003a1817ab686b74f0afb295100a598b7e0ab6d..c027a8ed6f85b50e7edc0229e53854599f25359c 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 1dbbdd3d44d616012bec1ca3e5fab60f8e163316..2616f46353d23465a4b95a41e0f72e7cb40e0869 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 82352ebf9ffda784677e8f3fa31f3f80acca57fb..53b16a728ef34a08ee4076a2312bbb5e772cb533 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/components/OnBoard.vue b/app/src/components/OnBoard.vue
index d860dfcdc1c3c26409fcb37159cb0bdb71729a50..fbc40b8142be9a32b429c257977dfa76aa5ac1d7 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -4,8 +4,8 @@
class="innernode"
:w="300"
:h="335"
- :x="560"
- :y="50"
+ :x="5"
+ :y="15"
:z="1"
:draggable="true"
style="background-color: #6fcf97;"
@@ -41,10 +41,10 @@
<vue-draggable-resizable
class="innernode"
- :w="300"
+ :w="310"
:h="375"
- :x="1100"
- :y="50"
+ :x="1050"
+ :y="15"
:z="1"
:draggable="true"
style="background-color: #6fcf97;"
@@ -92,9 +92,9 @@ export default {
localmicrocosm: Router.currentRoute.params.microcosm,
clientid: '',
nodetext:
- '## 3. What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
+ '## What shall we call you ? 👩â€ðŸš€ \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
nodetext2:
- '## 5. Start those engines ! 🎠\n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
+ '## Join/Start a microcosm ! 🚀 \n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
name: false,
microcosm: false,
// partc: false,
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 99450112437512f98fc0f6051cafad7f4a71081d..f1dc758033462a91ea71eb9f57ee32d5b1d8e4de 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) => {