From 878ae84fda8b3f1abf9f94d7ed81335fb35c660f Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 19 May 2020 17:20:43 +0100
Subject: [PATCH] added Nodes to Sandbox
---
app/src/experimental/ModeToolbar.vue | 12 +++----
app/src/experimental/PanZoomContainer.vue | 30 ++++++++---------
app/src/experimental/uiStore.js | 29 +++++++++--------
app/src/views/Home.vue | 18 +++++------
app/src/views/Sandbox.vue | 39 +++++++++++++++++------
5 files changed, 74 insertions(+), 54 deletions(-)
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index 59ca38d..caac947 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -22,11 +22,11 @@ import * as allModes from '@/experimental/modes'
export default {
computed: {
...mapState({
- mode: state => state.ui.mode
+ mode: (state) => state.ui.mode,
}),
...mapGetters({
- activeMode: 'ui/activeMode'
- })
+ activeMode: 'ui/activeMode',
+ }),
},
methods: {
setMode(mode) {
@@ -34,13 +34,13 @@ export default {
},
isActive(mode) {
return this.mode === mode.name
- }
+ },
},
data() {
return {
- allModes
+ allModes,
}
- }
+ },
}
</script>
diff --git a/app/src/experimental/PanZoomContainer.vue b/app/src/experimental/PanZoomContainer.vue
index 3b06ff3..30218df 100644
--- a/app/src/experimental/PanZoomContainer.vue
+++ b/app/src/experimental/PanZoomContainer.vue
@@ -51,7 +51,7 @@
v-bind:style="{
width: `${width}px`,
height: `${height}px`,
- transform: `translate(${translation.x}px, ${translation.y}px) scale(${scale})`
+ transform: `translate(${translation.x}px, ${translation.y}px) scale(${scale})`,
}"
>
{{ JSON.stringify(interaction) }}
@@ -65,27 +65,27 @@ import { constrainTranslation } from '@/experimental/utils/numbers'
import {
getNormalisedInteraction,
changeViewFromWheelEvent,
- changeViewFromMultiTouchEvent
+ changeViewFromMultiTouchEvent,
} from '@/experimental/utils/view'
export default {
name: 'map-interaction',
data() {
return {
- shouldPreventTouchEndDefault: false
+ shouldPreventTouchEndDefault: false,
}
},
computed: {
...mapState({
- interaction: state => state.ui.interaction
- })
+ interaction: (state) => state.ui.interaction,
+ }),
},
props: {
translationBounds: {
type: Object,
default() {
return { xMin: -500, xMax: 500, yMin: -500, yMax: 500 }
- }
+ },
},
translation: Object,
scale: Number,
@@ -93,12 +93,12 @@ export default {
height: Number,
minScale: {
type: Number,
- default: 0.3
+ default: 0.3,
},
maxScale: {
type: Number,
- default: 2.0
- }
+ default: 2.0,
+ },
},
methods: {
handleEventCapture(e) {
@@ -156,7 +156,7 @@ export default {
e.preventDefault()
e.stopPropagation()
- console.log(e)
+ // console.log(e)
this.handleWheel(e)
},
@@ -168,10 +168,10 @@ export default {
const dragY = pointer.clientY - startPointer.clientY
const newTranslation = {
x: translation.x + dragX,
- y: translation.y + dragY
+ y: translation.y + dragY,
}
- console.log(dragX, dragY)
+ //console.log(dragX, dragY)
this.$store.commit(
'ui/setTranslation',
@@ -188,7 +188,7 @@ export default {
this.$store.commit('ui/setOrigin', {
points,
scale: this.scale,
- translation: this.translation
+ translation: this.translation,
})
},
handleWheel(e) {
@@ -215,7 +215,7 @@ export default {
'ui/setTranslation',
constrainTranslation(newTranslation, this.translationBounds)
)
- }
- }
+ },
+ },
}
</script>
diff --git a/app/src/experimental/uiStore.js b/app/src/experimental/uiStore.js
index bbf903b..b1d4cb3 100644
--- a/app/src/experimental/uiStore.js
+++ b/app/src/experimental/uiStore.js
@@ -10,35 +10,35 @@ const store = {
x: 10,
y: 10,
width: 100,
- height: 200
- }
+ height: 200,
+ },
},
selection: {
links: [],
- nodes: []
+ nodes: [],
},
mode: 'move',
scale: 1,
translation: {
x: 0,
- y: 0
- }
+ y: 0,
+ },
},
getters: {
- isScaled: state => !(state.scale === 1.0),
- isTranslated: state =>
+ isScaled: (state) => !(state.scale === 1.0),
+ isTranslated: (state) =>
!(state.translation.x === 0 && state.translation.y === 0),
- activeMode: state => {
+ activeMode: (state) => {
return allModes[state.mode]
},
- modeContainerStyle: state => {
+ modeContainerStyle: (state) => {
return {
- cursor: allModes[state.mode].cursor || 'initial'
+ cursor: allModes[state.mode].cursor || 'initial',
}
},
- scalePercentage: state => {
+ scalePercentage: (state) => {
return `${(state.scale * 100).toFixed(0)}%`
- }
+ },
},
mutations: {
setOrigin(state, origin) {
@@ -50,6 +50,7 @@ const store = {
setMode(state, mode) {
if (allModes[mode]) {
state.mode = mode
+ console.log(mode)
} else {
console.warn(`${mode} is not a valid mode`)
}
@@ -59,8 +60,8 @@ const store = {
},
setTranslation(state, { x, y }) {
state.translation = { x, y }
- }
- }
+ },
+ },
}
export default store
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 17a3d19..8515a9c 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -25,7 +25,7 @@
/>
<NodesLayer
- @editTrue="e => editTrue(e)"
+ @editTrue="(e) => editTrue(e)"
v-for="value in myNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
@@ -72,11 +72,11 @@ export default {
}
},
- data: function() {
+ data: function () {
return {
clientset: false,
listview: false,
- offline: false
+ offline: false,
}
},
@@ -86,12 +86,12 @@ export default {
OtherNodeslayer,
ListLayer,
OtherListlayer,
- ControlsLayer
+ ControlsLayer,
},
computed: mapState({
- myNodes: state => state.myNodes,
- otherNodes: state => state.otherNodes,
- shortcutstate: state => state.shortcutstate
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ shortcutstate: (state) => state.shortcutstate,
}),
methods: {
clientAdded() {
@@ -120,8 +120,8 @@ export default {
},
onlineTriggered() {
this.offline = false
- }
- }
+ },
+ },
}
</script>
diff --git a/app/src/views/Sandbox.vue b/app/src/views/Sandbox.vue
index d656461..c662b58 100644
--- a/app/src/views/Sandbox.vue
+++ b/app/src/views/Sandbox.vue
@@ -7,6 +7,19 @@
v-bind:translation="translation"
>
<h1>Nodes</h1>
+
+ <OtherNodeslayer
+ v-for="value in otherNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ />
+ <NodesLayer
+ v-for="value in myNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ />
</PanZoomContainer>
<SelectionLayer
v-if="domContainerReady"
@@ -21,6 +34,8 @@
<script>
import PanZoomContainer from '@/experimental/PanZoomContainer'
+import NodesLayer from '@/components/NodesLayer'
+import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import ModeToolbar from '@/experimental/ModeToolbar'
import ViewToolbar from '@/experimental/ViewToolbar'
import SelectionLayer from '@/experimental/layers/SelectionLayer'
@@ -28,12 +43,12 @@ import { mapGetters, mapState } from 'vuex'
export default {
name: 'Sandbox',
- data: function() {
+ data: function () {
return {
elementWidth: undefined,
elementHeight: undefined,
width: 2000,
- height: 2000
+ height: 2000,
}
},
computed: {
@@ -41,14 +56,16 @@ export default {
return !!this.elementWidth && !!this.elementHeight
},
...mapState({
- interaction: state => state.ui.interaction,
- scale: state => state.ui.scale,
- translation: state => state.ui.translation
+ interaction: (state) => state.ui.interaction,
+ scale: (state) => state.ui.scale,
+ translation: (state) => state.ui.translation,
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
}),
...mapGetters({
activeMode: 'ui/activeMode',
- modeContainerStyle: 'ui/modeContainerStyle'
- })
+ modeContainerStyle: 'ui/modeContainerStyle',
+ }),
},
mounted() {
window.addEventListener('resize', this.handleResize)
@@ -62,14 +79,16 @@ export default {
const { offsetWidth, offsetHeight } = this.$refs.container
this.elementWidth = offsetWidth
this.elementHeight = offsetHeight
- }
+ },
},
components: {
ModeToolbar,
ViewToolbar,
PanZoomContainer,
- SelectionLayer
- }
+ SelectionLayer,
+ NodesLayer,
+ OtherNodeslayer,
+ },
}
</script>
--
GitLab