added Nodes to Sandbox

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>
 

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>

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

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>
 

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>