ignore controls while a smooth pan is in progress

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;