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

bug fixes and added tips node

parent 5d3a6af4
No related branches found
No related tags found
No related merge requests found
No preview for this file type
......@@ -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>
......@@ -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>
......
......@@ -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"
......
<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>
......@@ -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'
......
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment