@shopify/klint 0.0.96 → 0.0.97

package/dist/index.cjs

@@ -1713,10 +1713,28 @@ var DEFAULT_SCROLL_STATE = {
   velocity: 0,
   lastTime: 0
 };
+var DEFAULT_GESTURE_STATE = {
+  active: false,
+  touches: null,
+  startTouches: null,
+  startDistance: 0,
+  currentDistance: 0,
+  scale: 1,
+  rotation: 0,
+  startTime: 0,
+  deltaX: 0,
+  deltaY: 0,
+  velocityX: 0,
+  velocityY: 0,
+  lastTime: 0,
+  lastX: 0,
+  lastY: 0
+};
 function useKlint() {
   const contextRef = (0, import_react2.useRef)(null);
   const mouseRef = (0, import_react2.useRef)(null);
   const scrollRef = (0, import_react2.useRef)(null);
+  const gestureRef = (0, import_react2.useRef)(null);
   const useDev = () => {
     return;
   };
@@ -1883,6 +1901,169 @@ function useKlint() {
       onScroll: (callback) => scrollCallbackRef.current = callback
     };
   };
+  const KlintGesture = () => {
+    if (!gestureRef.current) {
+      gestureRef.current = { ...DEFAULT_GESTURE_STATE };
+    }
+    const tapCallbackRef = (0, import_react2.useRef)(null);
+    const swipeCallbackRef = (0, import_react2.useRef)(null);
+    const pinchCallbackRef = (0, import_react2.useRef)(null);
+    const rotateCallbackRef = (0, import_react2.useRef)(null);
+    const touchStartCallbackRef = (0, import_react2.useRef)(null);
+    const touchMoveCallbackRef = (0, import_react2.useRef)(null);
+    const touchEndCallbackRef = (0, import_react2.useRef)(null);
+    (0, import_react2.useEffect)(() => {
+      if (!contextRef.current?.canvas) return;
+      const canvas = contextRef.current.canvas;
+      const ctx = contextRef.current;
+      const getDistance = (t1, t2) => {
+        const dx = t1.clientX - t2.clientX;
+        const dy = t1.clientY - t2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+      };
+      const getAngle = (t1, t2) => {
+        return Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) * 180 / Math.PI;
+      };
+      const getTouchCenter = (touches) => {
+        if (touches.length === 1) {
+          return {
+            x: touches[0].clientX,
+            y: touches[0].clientY
+          };
+        }
+        let sumX = 0;
+        let sumY = 0;
+        for (let i = 0; i < touches.length; i++) {
+          sumX += touches[i].clientX;
+          sumY += touches[i].clientY;
+        }
+        return {
+          x: sumX / touches.length,
+          y: sumY / touches.length
+        };
+      };
+      const handleTouchStart = (e) => {
+        if (!gestureRef.current) return;
+        const now = performance.now();
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.active = true;
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.startTouches = e.touches;
+        gestureRef.current.startTime = now;
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        gestureRef.current.deltaX = 0;
+        gestureRef.current.deltaY = 0;
+        gestureRef.current.velocityX = 0;
+        gestureRef.current.velocityY = 0;
+        if (e.touches.length >= 2) {
+          gestureRef.current.startDistance = getDistance(
+            e.touches[0],
+            e.touches[1]
+          );
+          gestureRef.current.currentDistance = gestureRef.current.startDistance;
+          gestureRef.current.scale = 1;
+          gestureRef.current.rotation = getAngle(e.touches[0], e.touches[1]);
+        }
+        if (touchStartCallbackRef.current) {
+          touchStartCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchMove = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active) return;
+        const now = performance.now();
+        const deltaTime = now - gestureRef.current.lastTime;
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.deltaX = touchCenter.x - gestureRef.current.lastX;
+        gestureRef.current.deltaY = touchCenter.y - gestureRef.current.lastY;
+        if (deltaTime > 0) {
+          gestureRef.current.velocityX = gestureRef.current.deltaX / deltaTime;
+          gestureRef.current.velocityY = gestureRef.current.deltaY / deltaTime;
+        }
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        if (e.touches.length >= 2) {
+          const currentDistance = getDistance(e.touches[0], e.touches[1]);
+          gestureRef.current.currentDistance = currentDistance;
+          if (gestureRef.current.startDistance > 0) {
+            gestureRef.current.scale = currentDistance / gestureRef.current.startDistance;
+          }
+          const currentAngle = getAngle(e.touches[0], e.touches[1]);
+          const startAngle = gestureRef.current.rotation;
+          gestureRef.current.rotation = currentAngle - startAngle;
+          if (pinchCallbackRef.current) {
+            pinchCallbackRef.current(ctx, e, gestureRef.current);
+          }
+          if (rotateCallbackRef.current && Math.abs(gestureRef.current.rotation) > 5) {
+            rotateCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        if (touchMoveCallbackRef.current) {
+          touchMoveCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchEnd = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active || !gestureRef.current.startTouches)
+          return;
+        const now = performance.now();
+        const touchDuration = now - gestureRef.current.startTime;
+        if (touchDuration < 300 && Math.abs(gestureRef.current.deltaX) < 10 && Math.abs(gestureRef.current.deltaY) < 10) {
+          if (tapCallbackRef.current) {
+            tapCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        const swipeThreshold = 50;
+        const isHorizontalSwipe = Math.abs(gestureRef.current.deltaX) > Math.abs(gestureRef.current.deltaY);
+        if (swipeCallbackRef.current && touchDuration < 300) {
+          if (isHorizontalSwipe && Math.abs(gestureRef.current.deltaX) > swipeThreshold) {
+            const direction = gestureRef.current.deltaX > 0 ? "right" : "left";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          } else if (!isHorizontalSwipe && Math.abs(gestureRef.current.deltaY) > swipeThreshold) {
+            const direction = gestureRef.current.deltaY > 0 ? "down" : "up";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          }
+        }
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+        if (e.touches.length === 0) {
+          gestureRef.current.active = false;
+        }
+      };
+      const handleTouchCancel = (e) => {
+        if (!gestureRef.current) return;
+        gestureRef.current.active = false;
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      canvas.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+      canvas.addEventListener("touchend", handleTouchEnd);
+      canvas.addEventListener("touchcancel", handleTouchCancel);
+      return () => {
+        canvas.removeEventListener("touchstart", handleTouchStart);
+        canvas.removeEventListener("touchmove", handleTouchMove);
+        canvas.removeEventListener("touchend", handleTouchEnd);
+        canvas.removeEventListener("touchcancel", handleTouchCancel);
+      };
+    }, []);
+    return {
+      gesture: gestureRef.current,
+      onTap: (callback) => tapCallbackRef.current = callback,
+      onSwipe: (callback) => swipeCallbackRef.current = callback,
+      onPinch: (callback) => pinchCallbackRef.current = callback,
+      onRotate: (callback) => rotateCallbackRef.current = callback,
+      onTouchStart: (callback) => touchStartCallbackRef.current = callback,
+      onTouchMove: (callback) => touchMoveCallbackRef.current = callback,
+      onTouchEnd: (callback) => touchEndCallbackRef.current = callback
+    };
+  };
   const KlintWindow = () => {
     const resizeCallbackRef = (0, import_react2.useRef)(
       null
@@ -1994,6 +2175,7 @@ function useKlint() {
     },
     KlintMouse,
     KlintScroll,
+    KlintGesture,
     KlintWindow,
     KlintImage,
     togglePlay,

package/dist/index.d.cts

@@ -688,6 +688,23 @@ interface KlintScroll {
     velocity: number;
     lastTime: number;
 }
+interface KlintGesture {
+    active: boolean;
+    touches: TouchList | null;
+    startTouches: TouchList | null;
+    startDistance: number;
+    currentDistance: number;
+    scale: number;
+    rotation: number;
+    startTime: number;
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    lastTime: number;
+    lastX: number;
+    lastY: number;
+}
 declare function useKlint(): {
     context: {
         context: KlintContext | null;
@@ -705,6 +722,16 @@ declare function useKlint(): {
         scroll: KlintScroll;
         onScroll: (callback: (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void) => (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void;
     };
+    KlintGesture: () => {
+        gesture: KlintGesture;
+        onTap: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onSwipe: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void;
+        onPinch: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onRotate: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchStart: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchMove: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchEnd: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+    };
     KlintWindow: () => {
         onResize: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
         onBlur: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;

package/dist/index.d.ts

@@ -688,6 +688,23 @@ interface KlintScroll {
     velocity: number;
     lastTime: number;
 }
+interface KlintGesture {
+    active: boolean;
+    touches: TouchList | null;
+    startTouches: TouchList | null;
+    startDistance: number;
+    currentDistance: number;
+    scale: number;
+    rotation: number;
+    startTime: number;
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    lastTime: number;
+    lastX: number;
+    lastY: number;
+}
 declare function useKlint(): {
     context: {
         context: KlintContext | null;
@@ -705,6 +722,16 @@ declare function useKlint(): {
         scroll: KlintScroll;
         onScroll: (callback: (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void) => (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void;
     };
+    KlintGesture: () => {
+        gesture: KlintGesture;
+        onTap: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onSwipe: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void;
+        onPinch: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onRotate: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchStart: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchMove: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchEnd: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+    };
     KlintWindow: () => {
         onResize: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
         onBlur: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;

package/dist/index.js

@@ -1670,10 +1670,28 @@ var DEFAULT_SCROLL_STATE = {
   velocity: 0,
   lastTime: 0
 };
+var DEFAULT_GESTURE_STATE = {
+  active: false,
+  touches: null,
+  startTouches: null,
+  startDistance: 0,
+  currentDistance: 0,
+  scale: 1,
+  rotation: 0,
+  startTime: 0,
+  deltaX: 0,
+  deltaY: 0,
+  velocityX: 0,
+  velocityY: 0,
+  lastTime: 0,
+  lastX: 0,
+  lastY: 0
+};
 function useKlint() {
   const contextRef = useRef2(null);
   const mouseRef = useRef2(null);
   const scrollRef = useRef2(null);
+  const gestureRef = useRef2(null);
   const useDev = () => {
     return;
   };
@@ -1840,6 +1858,169 @@ function useKlint() {
       onScroll: (callback) => scrollCallbackRef.current = callback
     };
   };
+  const KlintGesture = () => {
+    if (!gestureRef.current) {
+      gestureRef.current = { ...DEFAULT_GESTURE_STATE };
+    }
+    const tapCallbackRef = useRef2(null);
+    const swipeCallbackRef = useRef2(null);
+    const pinchCallbackRef = useRef2(null);
+    const rotateCallbackRef = useRef2(null);
+    const touchStartCallbackRef = useRef2(null);
+    const touchMoveCallbackRef = useRef2(null);
+    const touchEndCallbackRef = useRef2(null);
+    useEffect2(() => {
+      if (!contextRef.current?.canvas) return;
+      const canvas = contextRef.current.canvas;
+      const ctx = contextRef.current;
+      const getDistance = (t1, t2) => {
+        const dx = t1.clientX - t2.clientX;
+        const dy = t1.clientY - t2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+      };
+      const getAngle = (t1, t2) => {
+        return Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) * 180 / Math.PI;
+      };
+      const getTouchCenter = (touches) => {
+        if (touches.length === 1) {
+          return {
+            x: touches[0].clientX,
+            y: touches[0].clientY
+          };
+        }
+        let sumX = 0;
+        let sumY = 0;
+        for (let i = 0; i < touches.length; i++) {
+          sumX += touches[i].clientX;
+          sumY += touches[i].clientY;
+        }
+        return {
+          x: sumX / touches.length,
+          y: sumY / touches.length
+        };
+      };
+      const handleTouchStart = (e) => {
+        if (!gestureRef.current) return;
+        const now = performance.now();
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.active = true;
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.startTouches = e.touches;
+        gestureRef.current.startTime = now;
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        gestureRef.current.deltaX = 0;
+        gestureRef.current.deltaY = 0;
+        gestureRef.current.velocityX = 0;
+        gestureRef.current.velocityY = 0;
+        if (e.touches.length >= 2) {
+          gestureRef.current.startDistance = getDistance(
+            e.touches[0],
+            e.touches[1]
+          );
+          gestureRef.current.currentDistance = gestureRef.current.startDistance;
+          gestureRef.current.scale = 1;
+          gestureRef.current.rotation = getAngle(e.touches[0], e.touches[1]);
+        }
+        if (touchStartCallbackRef.current) {
+          touchStartCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchMove = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active) return;
+        const now = performance.now();
+        const deltaTime = now - gestureRef.current.lastTime;
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.deltaX = touchCenter.x - gestureRef.current.lastX;
+        gestureRef.current.deltaY = touchCenter.y - gestureRef.current.lastY;
+        if (deltaTime > 0) {
+          gestureRef.current.velocityX = gestureRef.current.deltaX / deltaTime;
+          gestureRef.current.velocityY = gestureRef.current.deltaY / deltaTime;
+        }
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        if (e.touches.length >= 2) {
+          const currentDistance = getDistance(e.touches[0], e.touches[1]);
+          gestureRef.current.currentDistance = currentDistance;
+          if (gestureRef.current.startDistance > 0) {
+            gestureRef.current.scale = currentDistance / gestureRef.current.startDistance;
+          }
+          const currentAngle = getAngle(e.touches[0], e.touches[1]);
+          const startAngle = gestureRef.current.rotation;
+          gestureRef.current.rotation = currentAngle - startAngle;
+          if (pinchCallbackRef.current) {
+            pinchCallbackRef.current(ctx, e, gestureRef.current);
+          }
+          if (rotateCallbackRef.current && Math.abs(gestureRef.current.rotation) > 5) {
+            rotateCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        if (touchMoveCallbackRef.current) {
+          touchMoveCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchEnd = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active || !gestureRef.current.startTouches)
+          return;
+        const now = performance.now();
+        const touchDuration = now - gestureRef.current.startTime;
+        if (touchDuration < 300 && Math.abs(gestureRef.current.deltaX) < 10 && Math.abs(gestureRef.current.deltaY) < 10) {
+          if (tapCallbackRef.current) {
+            tapCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        const swipeThreshold = 50;
+        const isHorizontalSwipe = Math.abs(gestureRef.current.deltaX) > Math.abs(gestureRef.current.deltaY);
+        if (swipeCallbackRef.current && touchDuration < 300) {
+          if (isHorizontalSwipe && Math.abs(gestureRef.current.deltaX) > swipeThreshold) {
+            const direction = gestureRef.current.deltaX > 0 ? "right" : "left";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          } else if (!isHorizontalSwipe && Math.abs(gestureRef.current.deltaY) > swipeThreshold) {
+            const direction = gestureRef.current.deltaY > 0 ? "down" : "up";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          }
+        }
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+        if (e.touches.length === 0) {
+          gestureRef.current.active = false;
+        }
+      };
+      const handleTouchCancel = (e) => {
+        if (!gestureRef.current) return;
+        gestureRef.current.active = false;
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      canvas.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+      canvas.addEventListener("touchend", handleTouchEnd);
+      canvas.addEventListener("touchcancel", handleTouchCancel);
+      return () => {
+        canvas.removeEventListener("touchstart", handleTouchStart);
+        canvas.removeEventListener("touchmove", handleTouchMove);
+        canvas.removeEventListener("touchend", handleTouchEnd);
+        canvas.removeEventListener("touchcancel", handleTouchCancel);
+      };
+    }, []);
+    return {
+      gesture: gestureRef.current,
+      onTap: (callback) => tapCallbackRef.current = callback,
+      onSwipe: (callback) => swipeCallbackRef.current = callback,
+      onPinch: (callback) => pinchCallbackRef.current = callback,
+      onRotate: (callback) => rotateCallbackRef.current = callback,
+      onTouchStart: (callback) => touchStartCallbackRef.current = callback,
+      onTouchMove: (callback) => touchMoveCallbackRef.current = callback,
+      onTouchEnd: (callback) => touchEndCallbackRef.current = callback
+    };
+  };
   const KlintWindow = () => {
     const resizeCallbackRef = useRef2(
       null
@@ -1951,6 +2132,7 @@ function useKlint() {
     },
     KlintMouse,
     KlintScroll,
+    KlintGesture,
     KlintWindow,
     KlintImage,
     togglePlay,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shopify/klint",
   "author": "arthurcloche",
   "license": "MIT",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "description": "A modern creative coding library",
   "type": "module",
   "main": "dist/index.cjs",