From 4dbb9094b769263e9b51f4c57b7690ffadcb1420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 12 Jan 2021 18:59:05 +0100
Subject: [PATCH] ignore controls while a smooth pan is in progress

---
 app/src/components/SVGContent.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue
index a7d2439..533d001 100644
--- a/app/src/components/SVGContent.vue
+++ b/app/src/components/SVGContent.vue
@@ -83,6 +83,7 @@ export default defineComponent({
       x: ref(0),
       y: ref(0)
     });
+    const panning = ref(false);
 
     onMounted(async () => {
       const element = root.value as unknown as HTMLDivElement;
@@ -110,7 +111,13 @@ export default defineComponent({
         maxZoom: 3637937,
         zoomSpeed: 0.05,
         zoomDoubleClickSpeed: 1,
-        onDoubleClick: function () {
+        beforeMouseDown: () => {
+          return panning.value;
+        },
+        beforeWheel: () => {
+          return panning.value;
+        },
+        onDoubleClick: () => {
           if (!document.fullscreenElement) {
             console.debug("[SVG] Fullscreen requested.");
             document.body.requestFullscreen();
@@ -147,6 +154,8 @@ export default defineComponent({
         const svgTargetY = (target.y.baseVal.value + target.height.baseVal.value / 2) * currentRatio;
 
         if (smooth) {
+          panning.value = true;
+
           pz.smoothMoveTo(
               svgTargetX * -1 + window.innerWidth / 2,
               svgTargetY * -1 + window.innerHeight / 2,
@@ -159,6 +168,9 @@ export default defineComponent({
                 (svgTargetY + finalTransform.y),
                 targetScale
             );
+            setTimeout(() => {
+              panning.value = false;
+            }, 400);
           }, 400 * 2);
         } else {
           pz.moveTo(
@@ -249,7 +261,7 @@ export default defineComponent({
         const MOVE_EDGE_Y = window.innerHeight * .25;
         const MAX_SPEED = 20;
 
-        if (document.fullscreenElement && mouse) {
+        if (mouse && !panning.value && document.fullscreenElement) {
           let horizontalShift: number;
           let verticalShift: number;