From 1b465071febdf01f2cd42ecab945f89e76cd2b4c Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Sat, 29 Aug 2020 14:00:03 +0100
Subject: [PATCH] bug fixes and added tips node
---
.DS_Store | Bin 10244 -> 10244 bytes
app/src/components/ConnectionsLayer.vue | 84 +++++++++++++++++++
app/src/components/OnBoard.vue | 2 +
app/src/components/OtherNodeslayer.vue | 3 +-
app/src/components/TipsLayer.vue | 96 ++++++++++++++++++++++
app/src/experimental/PanZoomContainer.vue | 3 +-
app/src/views/Home.vue | 3 +
7 files changed, 189 insertions(+), 2 deletions(-)
create mode 100644 app/src/components/TipsLayer.vue
diff --git a/.DS_Store b/.DS_Store
index f2b4ad9acc52a2fd2ab9bc29fcbef9318ee5cbe2..cc033aad6a0370c6abc5ce7e459b00bfbac18abd 100644
GIT binary patch
delta 134
zcmZn(XbIThE?{^vsURn_xWvHVIwKP^3o9Et2L}f?2QNo#a7KQ4a7kiGX|YpcQ8b7b
zkXVwDlsLIpz>|rSbMhMjd3_FXRYP0Pgxt!i>YCcRnG9gS$Oxes_@Ok6nzh+h@D$&~
R2A$393cpx3>xwcn0|2o*Ao2hJ
delta 201
zcmZn(XbIThF5vbxsURn_xWvHV1|t(Q3o9Et2PYRN4<{cdXKZjretB?7Vo7PSQ({rP
zfJ|^^N@`MKQFvxbNk&L&o@-8OS!$ktkxybt>f{Om&-7@JhJeJ944@)TWrv&x3?RVC
z!5J?gQC)3fVXC8GWMELMqfl*bZlI%JVr*7h%gM<hsqPjOSK8D!Yxa_*%a$KH4A#ZK
e$Oxes1fevHI<i?%@D$%>c7<Ooo3Dy6GXnrZUN#N@
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index f487e97..5431196 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 fbc40b8..af3d8bb 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 1cb04b9..cfdb94a 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 0000000..36832b3
--- /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 90788da..9a930e5 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 fb5a99b..3f2e901 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>
--
GitLab