From 0cdb74ba4ae2780ec75a73b0852c41c0218bb94f Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 9 Jun 2020 14:53:50 +0100
Subject: [PATCH] trying to work out translation issue
---
app/src/experimental/ModeToolbar.vue | 5 -----
app/src/experimental/PanZoomContainer.vue | 12 +++++++++++-
app/src/experimental/utils/view.js | 20 +++++++++++---------
app/src/views/Home.vue | 8 ++++----
4 files changed, 26 insertions(+), 19 deletions(-)
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index 71cb9bd..a669b35 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/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>
diff --git a/app/src/experimental/PanZoomContainer.vue b/app/src/experimental/PanZoomContainer.vue
index 5f3a967..8b43d1c 100644
--- a/app/src/experimental/PanZoomContainer.vue
+++ b/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) {
diff --git a/app/src/experimental/utils/view.js b/app/src/experimental/utils/view.js
index 4b90b00..abdf521 100644
--- a/app/src/experimental/utils/view.js
+++ b/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,
}
}
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index b86e6ca..0968be4 100644
--- a/app/src/views/Home.vue
+++ b/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>
--
GitLab