gesture support attempt

Author: mkbabb

demo/@/components/custom/animation-controls/AnimationControlsGroup.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="w-full h-screen grid lg:grid-cols-3 grid-cols-1 lg:grid-rows-1 justify-items-center justify-center items-center lg:overflow-hidden relative"
+        class="w-full min-h-screen grid lg:grid-cols-3 grid-cols-1 lg:grid-rows-1 justify-items-center justify-center items-center lg:overflow-hidden relative"
         v-bind="$attrs"
     >
         <div

demo/@/components/custom/animation-controls/animationStores.ts

@@ -158,4 +158,4 @@ export const deepDefaultStore = (store: any, defaultStore: any) => {
     }
 };
 
-resetAllStores();
+// resetAllStores();

demo/@/components/custom/orbital-drag/OrbitalDrag.vue

@@ -7,6 +7,9 @@
         @touchstart="startDrag"
         @touchmove="drag"
         @touchend="stopDrag"
+        @gesturestart="startGesture"
+        @gesturechange="gesture"
+        @gestureend="stopGesture"
     >
         <slot></slot>
     </div>
@@ -30,6 +33,20 @@ import { clamp } from "@src/math";
 import { angleUnits } from "@src/parsing/units";
 import { get } from "http";
 
+const normalizeAngle = (angle: number, unit: (typeof angleUnits)[number]): number => {
+    switch (unit) {
+        case "rad":
+            return angle % (2 * Math.PI);
+        case "grad":
+            return angle % 400;
+        case "turn":
+            return angle % 1;
+        default:
+        case "deg":
+            return angle % 360;
+    }
+};
+
 type PressedKeys = {
     x: boolean;
     y: boolean;
@@ -70,6 +87,16 @@ const getDefaultPreviousMousePosition = () => {
 
 let previousMousePosition = $ref(getDefaultPreviousMousePosition());
 
+const getDefaultGestureState = () => {
+    return {
+        x: 0,
+        y: 0,
+        scale: 1,
+    };
+};
+
+let previousGestureState = $ref(getDefaultGestureState());
+
 let pressedKeys = $ref<PressedKeys>({
     x: false,
     y: false,
@@ -123,18 +150,20 @@ const stopDrag = (event: MouseEvent | TouchEvent) => {
     isDragging = false;
 };
 
-const normalizeAngle = (angle: number, unit: (typeof angleUnits)[number]): number => {
-    switch (unit) {
-        case "rad":
-            return angle % (2 * Math.PI);
-        case "grad":
-            return angle % 400;
-        case "turn":
-            return angle % 1;
-        default:
-        case "deg":
-            return angle % 360;
-    }
+const startGesture = (event: any) => {
+    event.preventDefault();
+
+    isTouching = true;
+
+    previousGestureState = {
+        x: event.screenX,
+        y: event.screenY,
+        scale: event.scale ?? 1,
+    };
+};
+
+const stopGesture = () => {
+    isTouching = false;
 };
 
 const updateTransform = (
@@ -218,6 +247,32 @@ const drag = (event: MouseEvent | TouchEvent) => {
     previousMousePosition = { x, y };
 };
 
+const gesture = (event: any) => {
+    if (!isTouching) return;
+
+    const { screenX, screenY, scale } = event;
+
+    const deltaX = screenX - previousGestureState.x;
+    const deltaY = screenY - previousGestureState.y;
+    const deltaScale = scale - previousGestureState.scale;
+
+    if (
+        Math.abs(deltaX) < 1e-4 &&
+        Math.abs(deltaY) < 1e-4 &&
+        Math.abs(deltaScale) < 1e-4
+    )
+        return;
+
+    updateTranslation("x", deltaX);
+    updateTranslation("y", deltaY);
+
+    updateScale("x", deltaScale);
+    updateScale("y", deltaScale);
+    updateScale("z", deltaScale);
+
+    previousGestureState = { x: screenX, y: screenY, scale };
+};
+
 const handleAxisSpecificDrag = (deltaX: number, deltaY: number) => {
     const delta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;
 
@@ -342,8 +397,12 @@ onMounted(() => {
     useEventListener(window, "mouseleave", stopDrag);
 
     useEventListener(window, "touchmove", drag);
-    // useEventListener(window, "touchstart", startDrag);
-    // useEventListener(window, "touchend", stopDrag);
+    useEventListener(window, "touchstart", startDrag);
+    useEventListener(window, "touchend", stopDrag);
+
+    useEventListener(window, "gestureStart", startGesture);
+    useEventListener(window, "gestureChange", gesture);
+    useEventListener(window, "gestureEnd", stopGesture);
 
     resume();
 });
@@ -366,6 +425,10 @@ onUnmounted(() => {
     window.removeEventListener("touchstart", startDrag);
     window.removeEventListener("touchend", stopDrag);
 
+    window.removeEventListener("gestureStart", startGesture);
+    window.removeEventListener("gestureChange", gesture);
+    window.removeEventListener("gestureEnd", stopGesture);
+
     pause();
 });