trying to work out translation issue

app/src/experimental/ModeToolbar.vue

@@ -126,9 +126,4 @@ button {
 button.active {
   background: rgb(30, 30, 30);
 }
-
-@media only screen and (max-width: 600px) {
-  nav {
-  }
-}
 </style>

app/src/experimental/PanZoomContainer.vue

@@ -30,6 +30,16 @@
   </div>
 
   <div v-else ref="container" class="outer">
+    <!-- <div
+      ref="innerContainer"
+      v-bind:class="{ inner: true, active: true }"
+      v-bind:style="{
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `translate(${translation.x}px, ${translation.y}px) scale(${scale})`,
+      }"
+    > -->
+
     <div
       ref="innerContainer"
       v-bind:class="{ inner: true, active: true }"
@@ -98,7 +108,7 @@ export default {
         this.translation,
         this.scale
       )
-      // console.log(relativePoint, boardPoint)
+      console.log(relativePoint, boardPoint)
     },
     reset() {},
     onMouseDown(e) {

app/src/experimental/utils/view.js

@@ -2,7 +2,7 @@ import {
   clamp,
   lerpPoint,
   scalePoint,
-  distanceBetween
+  distanceBetween,
 } from '@/experimental/utils/numbers'
 
 //////////////////////////////////////////////////////////////////////
@@ -27,14 +27,14 @@ export const getNormalisedInteraction = (target, event, translation, scale) => {
 
   return {
     relativePoint: { x, y },
-    boardPoint: containerToBoardPoint({ x, y }, translation, scale)
+    boardPoint: containerToBoardPoint({ x, y }, translation, scale),
   }
 }
 
 export const containerToBoardPoint = (containerPoint, translation, scale) => {
   return {
     x: parseInt((containerPoint.x + -translation.x) / scale, 10),
-    y: parseInt((containerPoint.y + -translation.y) / scale, 10)
+    y: parseInt((containerPoint.y + -translation.y) / scale, 10),
   }
 }
 
@@ -58,7 +58,7 @@ export const getTranslatedPositionFromContainer = (
 
   return {
     x: point.x - (rect.left + translation.x),
-    y: point.y - (rect.top + translation.y)
+    y: point.y - (rect.top + translation.y),
   }
 }
 
@@ -79,7 +79,7 @@ export const changeViewFromWheelEvent = (
   const focalPtDelta = scalePoint(mousePosition, scaleRatio)
   const newTranslation = {
     x: translation.x - focalPtDelta.x,
-    y: translation.y - focalPtDelta.y
+    y: translation.y - focalPtDelta.y,
   }
 
   return [newScale, newTranslation]
@@ -111,7 +111,7 @@ export const changeViewFromMultiTouch = (
   )
   const dragDelta = {
     x: newMidPoint.x - startMidpoint.x,
-    y: newMidPoint.y - startMidpoint.y
+    y: newMidPoint.y - startMidpoint.y,
   }
   const scaleRatio = newScale / startScale
   const focalPoint = getTranslatedPositionFromContainer(
@@ -127,7 +127,9 @@ export const changeViewFromMultiTouch = (
       focalPointDelta.x +
       dragDelta.x,
     y:
-      interaction.origin.pointer.translation.y - focalPointDelta.y + dragDelta.y
+      interaction.origin.pointer.translation.y -
+      focalPointDelta.y +
+      dragDelta.y,
   }
   return [newTranslation, newScale]
 }
@@ -139,9 +141,9 @@ export const changeViewFromMultiTouch = (
  * @returns {Point}
  *
  *  */
-export const touchPoint = touch => {
+export const touchPoint = (touch) => {
   return {
     x: touch.clientX,
-    y: touch.clientY
+    y: touch.clientY,
   }
 }

app/src/views/Home.vue

@@ -55,10 +55,6 @@
             />
           </div>
           <div v-else>
-            <OnBoard
-              @clientAdded="clientAdded()"
-              @editTrue="(e) => editTrue(e)"
-            />
             <OtherNodeslayer
               v-for="value in otherNodes"
               v-bind:key="value.node_id"
@@ -72,6 +68,10 @@
               v-bind:nodeid="value.node_id"
               v-bind:nodetext="value.node_text"
             />
+            <OnBoard
+              @clientAdded="clientAdded()"
+              @editTrue="(e) => editTrue(e)"
+            />
           </div>
         </PanZoomContainer>