diff --git a/.DS_Store b/.DS_Store
index f2b4ad9acc52a2fd2ab9bc29fcbef9318ee5cbe2..cc033aad6a0370c6abc5ce7e459b00bfbac18abd 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index f487e97a90c8ddc99456fa6e55b79c3e2ade0710..543119641542a1cd5d7f5a6ade507ea262e8815d 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -7,6 +7,7 @@
<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
+//var initialMoveTo
export default {
name: 'ConnectionsLayer',
@@ -30,8 +31,20 @@ export default {
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics()
+ //let line = new PIXI.Graphics()
+
graphics.lineStyle(8, 0xcab6ff)
+ // FIXME: removes connections probably need to be own function
+ // for (i = 0; i < Object.keys(this.configConnections).length; i++) {
+ // // static circle - needs to be same place as buttons
+ // graphics.lineStyle(0)
+ // graphics.beginFill(0xde3249, 1)
+ // graphics.drawCircle(100, 250, 50)
+ // graphics.endFill()
+ // stage.addChild(graphics)
+ // }
+
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start
graphics.moveTo(
@@ -47,8 +60,78 @@ export default {
for (var j = stage.children.length - 1; j >= 0; j--) {
stage.removeChild(stage.children[j])
}
+
stage.addChild(graphics)
},
+
+ //FIXME : this is a sketch of the final code for connection buttons
+ // Eventually can move this all from nodes layers as well (which make sense)
+ connectingDraw() {
+ var i
+ this.canvas = this.$refs.pixi
+ const stage = this.PIXIApp.stage
+ let circle = new PIXI.Graphics()
+ let line = new PIXI.Graphics()
+
+ circle.lineStyle(8, 0xcab6ff)
+
+ for (i = 0; i < Object.keys(this.configConnections).length; i++) {
+ // static circle - needs to be same place as buttons
+ circle.lineStyle(0)
+ circle.beginFill(0xde3249, 1)
+ circle.drawCircle(100, 250, 50)
+ circle.endFill()
+ stage.addChild(circle)
+ }
+
+ // connection on move
+ var initialMoveTo
+ // Opt-in to interactivity
+ circle.interactive = true
+
+ // Shows hand cursor
+ circle.buttonMode = true
+
+ circle
+ .on('pointerdown', onDragStart)
+ .on('pointerup', onDragEnd)
+ .on('pointerupoutside', onDragEnd)
+ .on('pointermove', onDragMove)
+
+ let lines = []
+
+ function onDragStart(event) {
+ this.dragging = true
+
+ let mouseX = event.data.global.x
+ let mouseY = event.data.global.y
+
+ initialMoveTo = [mouseX, mouseY]
+
+ line.lineStyle(8, 0xcab6ff)
+ line.moveTo(mouseX, mouseY)
+
+ lines = [line].concat(lines)
+
+ stage.addChild(line)
+ }
+
+ function onDragEnd() {
+ this.dragging = false
+ stage.removeChild(line)
+ }
+
+ function onDragMove(event) {
+ if (this.dragging) {
+ let mouseX = event.data.global.x
+ let mouseY = event.data.global.y
+ lines[0].clear()
+ lines[0].lineStyle(8, 0xcab6ff)
+ lines[0].moveTo(initialMoveTo[0], initialMoveTo[1])
+ lines[0].lineTo(mouseX, mouseY)
+ }
+ }
+ },
},
mounted() {
const canvas = this.$refs.pixi
@@ -60,6 +143,7 @@ export default {
view: canvas,
})
this.drawPixi()
+ this.connectingDraw()
},
}
</script>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index fbc40b8142be9a32b429c257977dfa76aa5ac1d7..af3d8bbbcecf35c0e19d89041605c1e22ef2d456 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -8,6 +8,7 @@
:y="15"
:z="1"
:draggable="true"
+ :resizable="false"
style="background-color: #6fcf97;"
>
<form>
@@ -47,6 +48,7 @@
:y="15"
:z="1"
:draggable="true"
+ :resizable="false"
style="background-color: #6fcf97;"
>
<form>
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 1cb04b91d7e3f8d5121ce081fb6120d52b3e2c98..cfdb94a2d04c6824070fff1394767c5037097775 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -26,6 +26,7 @@
<div v-for="(emojis, index) in configEmoji" :key="index">
<p class="allemoji" v-if="nodeid == emojis.node_id">
{{ emojis.emoji_text }}
+ MOVE MODE
</p>
</div>
<div class="react" v-if="nodeid != undefined">
@@ -99,7 +100,7 @@
</vue-draggable-resizable>
</div>
- <div v-if="toolmode == 'connect'">
+ <div v-else-if="toolmode == 'connect'">
<!-- make draggable false as we are panning around -->
<vue-draggable-resizable
v-if="nodeid == value.node_id"
diff --git a/app/src/components/TipsLayer.vue b/app/src/components/TipsLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36832b38a583f41e744ab8a80b91838c4081997f
--- /dev/null
+++ b/app/src/components/TipsLayer.vue
@@ -0,0 +1,96 @@
+<template>
+ <div ref="nodes" class="node">
+ <vue-draggable-resizable
+ class="innernode"
+ :w="250"
+ :h="225"
+ :x="205"
+ :y="15"
+ :z="1"
+ :draggable="true"
+ :resizable="false"
+ style="background-color: #6fcf97;"
+ >
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext | marked"></p>
+
+ <div class="btn-row">
+ <BaseButton buttonClass="danger" @click="deleteFlag()"
+ >Hide</BaseButton
+ >
+ </div>
+ </div>
+ </vue-draggable-resizable>
+ </div>
+</template>
+
+<script>
+import marked from 'marked'
+
+export default {
+ data: function () {
+ return {
+ nodetext:
+ '## Shortcuts 🢠-> 🰠\n **n** to create new nodes. </br> **c** create connections </br> **a** or **s** select mode. </br> **m** move mode',
+ }
+ },
+
+ mounted() {},
+ filters: {
+ marked: marked,
+ },
+
+ methods: {},
+}
+</script>
+
+<style lang="css" scoped>
+.start {
+ opacity: 0;
+ filter: alpha(opacity=0);
+}
+.vdr {
+ padding: 0 0.5em;
+}
+
+.content {
+ overflow: hidden;
+ max-height: 100%;
+}
+
+h1,
+h2,
+h3,
+p {
+ margin: 0px;
+}
+
+h2 {
+ float: right;
+ font-size: 3em;
+}
+
+h3 {
+ font-size: 3em;
+ margin-top: 0.5em;
+}
+
+.btn-row {
+ margin-bottom: 5px;
+ padding: 0px 0px 15px 10px;
+ border-radius: 4px;
+}
+
+input {
+ font-size: 1em;
+ padding: 10px;
+ /* margin-left: 20px; */
+ border-radius: 4px;
+ display: flex;
+ justify-content: center;
+ margin: 10px;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-style: dotted;
+}
+</style>
diff --git a/app/src/experimental/PanZoomContainer.vue b/app/src/experimental/PanZoomContainer.vue
index 90788da51160e6c34882d33f94f4244e6ed9af31..9a930e5ba7f480537ae308ed336063bb3caac49e 100644
--- a/app/src/experimental/PanZoomContainer.vue
+++ b/app/src/experimental/PanZoomContainer.vue
@@ -25,6 +25,7 @@
<!-- {{ JSON.stringify(interaction) }} -->
<!-- view paramaters not being utilised ? -->
<!-- {{ mode }} -->
+
<slot />
</div>
</div>
@@ -57,7 +58,7 @@
import { mapState } from 'vuex'
import { constrainTranslation } from '@/experimental/utils/numbers'
import {
- // getNormalisedInteraction,
+ // getNormalisedInteraction,
changeViewFromWheelEvent,
changeViewFromMultiTouchEvent,
} from '@/experimental/utils/view'
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index fb5a99b57eb570136285fe871f6eb1c8b934888a..3f2e901b021fc3c10f6b5c37722f53dfc1218472 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -48,6 +48,7 @@
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
/>
+ <TipsLayer />
<ConnectionsLayer />
</div>
@@ -103,6 +104,7 @@ import ScribbleLayer from '@/components/ScribbleLayer'
import UploadLayer from '@/components/UploadLayer'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import OnBoard from '@/components/OnBoard.vue'
+import TipsLayer from '@/components/TipsLayer.vue'
import ModeToolbar from '@/experimental/ModeToolbar'
import ViewToolbar from '@/experimental/ViewToolbar'
// import SelectionLayer from '@/experimental/layers/SelectionLayer'
@@ -224,6 +226,7 @@ export default {
OffLine,
UploadLayer,
ScribbleLayer,
+ TipsLayer,
},
}
</script>