@markup-canvas/core 1.0.0

package/src/lib/events/mouse/handleClickToZoom.ts

@@ -0,0 +1,54 @@
+import { CLICK_THRESHOLDS } from "@/lib/events/constants.js";
+import { withRulerOffset } from "@/lib/helpers/index.js";
+import { withTransition } from "@/lib/transition/withTransition.js";
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function handleClickToZoom(
+  event: MouseEvent,
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  mouseDownTime: number,
+  hasDragged: boolean,
+  isDragging: boolean
+): void {
+  const clickDuration = Date.now() - mouseDownTime;
+
+  // Check if Option/Alt key is required and pressed
+  const optionKeyPressed = event.altKey;
+  const shouldZoom = config.requireOptionForClickZoom ? optionKeyPressed : true;
+
+  if (clickDuration < CLICK_THRESHOLDS.MAX_DURATION && !hasDragged && !isDragging && shouldZoom) {
+    event.preventDefault();
+
+    const rect = canvas.container.getBoundingClientRect();
+    const rawClickX = event.clientX - rect.left;
+    const rawClickY = event.clientY - rect.top;
+
+    const { clickX, clickY } = withRulerOffset(canvas, rawClickX, rawClickY, (adjustedX, adjustedY) => ({
+      clickX: adjustedX,
+      clickY: adjustedY,
+    }));
+
+    // Convert canvas coordinates to content coordinates at current scale
+    const contentCoords = canvas.canvasToContent(clickX, clickY);
+
+    // Calculate the center of the canvas
+    const canvasCenterX = rect.width / 2;
+    const canvasCenterY = rect.height / 2;
+
+    const newScale = config.clickZoomLevel;
+
+    const newTranslateX = canvasCenterX - contentCoords.x * newScale;
+    const newTranslateY = canvasCenterY - contentCoords.y * newScale;
+
+    const newTransform: Partial<Transform> = {
+      scale: newScale,
+      translateX: newTranslateX,
+      translateY: newTranslateY,
+    };
+
+    withTransition(canvas.transformLayer, canvas.config, () => {
+      canvas.updateTransform(newTransform);
+    });
+  }
+}

package/src/lib/events/mouse/handleMouseDown.ts

@@ -0,0 +1,45 @@
+import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function handleMouseDown(
+  event: MouseEvent,
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  isDragEnabled: boolean,
+  isSpacePressed: boolean,
+  setters: {
+    setMouseDownTime: (value: number) => void;
+    setMouseDownX: (value: number) => void;
+    setMouseDownY: (value: number) => void;
+    setHasDragged: (value: boolean) => void;
+    setIsDragging: (value: boolean) => void;
+    setDragButton: (value: number) => void;
+    setLastMouseX: (value: number) => void;
+    setLastMouseY: (value: number) => void;
+  }
+): void {
+  const isLeftButton = event.button === 0;
+  const isMiddleButton = event.button === 1;
+
+  if (isLeftButton) {
+    setters.setMouseDownTime(Date.now());
+    setters.setMouseDownX(event.clientX);
+    setters.setMouseDownY(event.clientY);
+    setters.setHasDragged(false);
+  }
+
+  if (!isDragEnabled) return;
+
+  // Check if drag is allowed based on configuration
+  const canDrag = config.requireSpaceForMouseDrag ? isSpacePressed : true;
+
+  if (canDrag && ((isLeftButton && config.enableLeftDrag) || (isMiddleButton && config.enableMiddleDrag))) {
+    event.preventDefault();
+    // Don't set isDragging to true yet - wait for mouse move
+    setters.setDragButton(event.button);
+    setters.setLastMouseX(event.clientX);
+    setters.setLastMouseY(event.clientY);
+
+    updateCursor(canvas, config, isDragEnabled, isSpacePressed, false); // ← Changed to false
+  }
+}

package/src/lib/events/mouse/handleMouseLeave.ts

@@ -0,0 +1,18 @@
+import { resetDragState } from "@/lib/events/utils/resetDragState.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function handleMouseLeave(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  isDragEnabled: boolean,
+  isSpacePressed: boolean,
+  isDragging: boolean,
+  setters: {
+    setIsDragging: (value: boolean) => void;
+    setDragButton: (value: number) => void;
+  }
+): void {
+  if (isDragging) {
+    resetDragState(canvas, config, isDragEnabled, isSpacePressed, setters);
+  }
+}

package/src/lib/events/mouse/handleMouseMove.ts

@@ -0,0 +1,57 @@
+import { CLICK_THRESHOLDS } from "@/lib/events/constants.js";
+import { withRAFThrottle } from "@/lib/helpers/index.js";
+import type { Canvas, Transform } from "@/types/index.js";
+
+export function handleMouseMove(
+  event: MouseEvent,
+  canvas: Canvas,
+  isDragEnabled: boolean,
+  isDragging: boolean,
+  mouseDownTime: number,
+  mouseDownX: number,
+  mouseDownY: number,
+  lastMouseX: number,
+  lastMouseY: number,
+  setters: {
+    setHasDragged: (value: boolean) => void;
+    setIsDragging: (value: boolean) => void;
+    setLastMouseX: (value: number) => void;
+    setLastMouseY: (value: number) => void;
+  }
+): void {
+  if (mouseDownTime > 0) {
+    const deltaX = Math.abs(event.clientX - mouseDownX);
+    const deltaY = Math.abs(event.clientY - mouseDownY);
+    if (deltaX > CLICK_THRESHOLDS.MAX_MOVEMENT || deltaY > CLICK_THRESHOLDS.MAX_MOVEMENT) {
+      setters.setHasDragged(true);
+
+      if (!isDragging && isDragEnabled) {
+        setters.setIsDragging(true);
+      }
+    }
+  }
+
+  if (!isDragging || !isDragEnabled) return;
+
+  event.preventDefault();
+
+  const handleMouseMoveThrottled = withRAFThrottle((...args: unknown[]) => {
+    const moveEvent = args[0] as MouseEvent;
+    if (!isDragging || !isDragEnabled) return;
+
+    const deltaX = moveEvent.clientX - lastMouseX;
+    const deltaY = moveEvent.clientY - lastMouseY;
+
+    const newTransform: Partial<Transform> = {
+      translateX: canvas.transform.translateX + deltaX,
+      translateY: canvas.transform.translateY + deltaY,
+    };
+
+    canvas.updateTransform(newTransform);
+
+    setters.setLastMouseX(moveEvent.clientX);
+    setters.setLastMouseY(moveEvent.clientY);
+  });
+
+  handleMouseMoveThrottled(event);
+}

package/src/lib/events/mouse/handleMouseUp.ts

@@ -0,0 +1,40 @@
+import { handleClickToZoom } from "@/lib/events/mouse/handleClickToZoom.js";
+import { resetClickState } from "@/lib/events/utils/resetClickState.js";
+import { resetDragState } from "@/lib/events/utils/resetDragState.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function handleMouseUp(
+  event: MouseEvent,
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  isDragEnabled: boolean,
+  isSpacePressed: boolean,
+  isDragging: boolean,
+  dragButton: number,
+  mouseDownTime: number,
+  hasDragged: boolean,
+  setters: {
+    setIsDragging: (value: boolean) => void;
+    setDragButton: (value: number) => void;
+    setMouseDownTime: (value: number) => void;
+    setHasDragged: (value: boolean) => void;
+  }
+): void {
+  if (isDragging && event.button === dragButton) {
+    resetDragState(canvas, config, isDragEnabled, isSpacePressed, {
+      setIsDragging: setters.setIsDragging,
+      setDragButton: setters.setDragButton,
+    });
+  }
+
+  if (isDragEnabled && event.button === 0 && config.enableClickToZoom && mouseDownTime > 0) {
+    handleClickToZoom(event, canvas, config, mouseDownTime, hasDragged, isDragging);
+  }
+
+  if (event.button === 0) {
+    resetClickState({
+      setMouseDownTime: setters.setMouseDownTime,
+      setHasDragged: setters.setHasDragged,
+    });
+  }
+}

package/src/lib/events/mouse/setupMouseDrag.ts

@@ -0,0 +1,159 @@
+import { handleKeyDown } from "@/lib/events/keyboard/handleKeyDown.js";
+import { handleKeyUp } from "@/lib/events/keyboard/handleKeyUp.js";
+import { handleMouseDown } from "@/lib/events/mouse/handleMouseDown.js";
+import { handleMouseLeave } from "@/lib/events/mouse/handleMouseLeave.js";
+import { handleMouseMove } from "@/lib/events/mouse/handleMouseMove.js";
+import { handleMouseUp } from "@/lib/events/mouse/handleMouseUp.js";
+import { resetDragState } from "@/lib/events/utils/resetDragState.js";
+import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { MouseDragControls } from "@/types/events.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: true): MouseDragControls;
+export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: false): () => void;
+export function setupMouseEvents(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  withControls: boolean = true
+): MouseDragControls | (() => void) {
+  // State management
+  let isDragEnabled = true;
+  let isDragging = false;
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+  let dragButton = -1;
+  let isSpacePressed = false;
+
+  // Click-to-zoom tracking
+  let mouseDownTime = 0;
+  let mouseDownX = 0;
+  let mouseDownY = 0;
+  let hasDragged = false;
+
+  // State setters for passing to functions
+  const setters = {
+    setIsDragging: (value: boolean) => {
+      isDragging = value;
+    },
+    setDragButton: (value: number) => {
+      dragButton = value;
+    },
+    setIsSpacePressed: (value: boolean) => {
+      isSpacePressed = value;
+    },
+    setMouseDownTime: (value: number) => {
+      mouseDownTime = value;
+    },
+    setMouseDownX: (value: number) => {
+      mouseDownX = value;
+    },
+    setMouseDownY: (value: number) => {
+      mouseDownY = value;
+    },
+    setHasDragged: (value: boolean) => {
+      hasDragged = value;
+    },
+    setLastMouseX: (value: number) => {
+      lastMouseX = value;
+    },
+    setLastMouseY: (value: number) => {
+      lastMouseY = value;
+    },
+  };
+
+  // Event handler wrappers
+  const keyDownHandler = (event: KeyboardEvent) => {
+    handleKeyDown(event, canvas, config, isDragEnabled, isDragging, {
+      setIsSpacePressed: setters.setIsSpacePressed,
+    });
+  };
+
+  const keyUpHandler = (event: KeyboardEvent) => {
+    handleKeyUp(event, canvas, config, isDragEnabled, isDragging, {
+      setIsSpacePressed: setters.setIsSpacePressed,
+      setIsDragging: setters.setIsDragging,
+      setDragButton: setters.setDragButton,
+    });
+  };
+
+  const mouseDownHandler = (event: MouseEvent) => {
+    handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters);
+  };
+
+  const mouseMoveHandler = (event: MouseEvent) => {
+    handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
+      setHasDragged: setters.setHasDragged,
+      setIsDragging: setters.setIsDragging,
+      setLastMouseX: setters.setLastMouseX,
+      setLastMouseY: setters.setLastMouseY,
+    });
+  };
+
+  const mouseUpHandler = (event: MouseEvent) => {
+    handleMouseUp(event, canvas, config, isDragEnabled, isSpacePressed, isDragging, dragButton, mouseDownTime, hasDragged, {
+      setIsDragging: setters.setIsDragging,
+      setDragButton: setters.setDragButton,
+      setMouseDownTime: setters.setMouseDownTime,
+      setHasDragged: setters.setHasDragged,
+    });
+  };
+
+  const mouseLeaveHandler = () => {
+    handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragging, {
+      setIsDragging: setters.setIsDragging,
+      setDragButton: setters.setDragButton,
+    });
+  };
+
+  // Set up event listeners
+  canvas.container.addEventListener("mousedown", mouseDownHandler);
+  document.addEventListener("mousemove", mouseMoveHandler);
+  document.addEventListener("mouseup", mouseUpHandler);
+  canvas.container.addEventListener("mouseleave", mouseLeaveHandler);
+
+  // Add keyboard listeners if space requirement is enabled
+  if (config.requireSpaceForMouseDrag) {
+    document.addEventListener("keydown", keyDownHandler);
+    document.addEventListener("keyup", keyUpHandler);
+  }
+
+  updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+
+  const cleanup = () => {
+    canvas.container.removeEventListener("mousedown", mouseDownHandler);
+    document.removeEventListener("mousemove", mouseMoveHandler);
+    document.removeEventListener("mouseup", mouseUpHandler);
+    canvas.container.removeEventListener("mouseleave", mouseLeaveHandler);
+
+    if (config.requireSpaceForMouseDrag) {
+      document.removeEventListener("keydown", keyDownHandler);
+      document.removeEventListener("keyup", keyUpHandler);
+    }
+  };
+
+  if (withControls) {
+    return {
+      cleanup,
+      enable: () => {
+        isDragEnabled = true;
+        updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+        return true;
+      },
+      disable: () => {
+        isDragEnabled = false;
+        // Stop any current dragging
+        if (isDragging) {
+          resetDragState(canvas, config, isDragEnabled, isSpacePressed, {
+            setIsDragging: setters.setIsDragging,
+            setDragButton: setters.setDragButton,
+          });
+        }
+        updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+        return true;
+      },
+      isEnabled: () => isDragEnabled,
+    };
+  }
+
+  return cleanup;
+}

package/src/lib/events/mouse/setupMouseEvents.ts

@@ -0,0 +1,158 @@
+import { handleKeyDown } from "@/lib/events/keyboard/handleKeyDown.js";
+import { handleKeyUp } from "@/lib/events/keyboard/handleKeyUp.js";
+import { handleMouseDown } from "@/lib/events/mouse/handleMouseDown.js";
+import { handleMouseLeave } from "@/lib/events/mouse/handleMouseLeave.js";
+import { handleMouseMove } from "@/lib/events/mouse/handleMouseMove.js";
+import { handleMouseUp } from "@/lib/events/mouse/handleMouseUp.js";
+import { resetDragState } from "@/lib/events/utils/resetDragState.js";
+import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { MouseDragControls } from "@/types/events.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: true): MouseDragControls;
+export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: false): () => void;
+export function setupMouseEvents(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  withControls: boolean = true
+): MouseDragControls | (() => void) {
+  // State management
+  let isDragEnabled = true;
+  let isDragging = false;
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+  let dragButton = -1;
+  let isSpacePressed = false;
+
+  // Click-to-zoom tracking
+  let mouseDownTime = 0;
+  let mouseDownX = 0;
+  let mouseDownY = 0;
+  let hasDragged = false;
+
+  // State setters for passing to functions
+  const setters = {
+    setIsDragging: (value: boolean) => {
+      isDragging = value;
+    },
+    setDragButton: (value: number) => {
+      dragButton = value;
+    },
+    setIsSpacePressed: (value: boolean) => {
+      isSpacePressed = value;
+    },
+    setMouseDownTime: (value: number) => {
+      mouseDownTime = value;
+    },
+    setMouseDownX: (value: number) => {
+      mouseDownX = value;
+    },
+    setMouseDownY: (value: number) => {
+      mouseDownY = value;
+    },
+    setHasDragged: (value: boolean) => {
+      hasDragged = value;
+    },
+    setLastMouseX: (value: number) => {
+      lastMouseX = value;
+    },
+    setLastMouseY: (value: number) => {
+      lastMouseY = value;
+    },
+  };
+
+  // Event handler wrappers
+  const keyDownHandler = (event: KeyboardEvent) => {
+    handleKeyDown(event, canvas, config, isDragEnabled, isDragging, {
+      setIsSpacePressed: setters.setIsSpacePressed,
+    });
+  };
+
+  const keyUpHandler = (event: KeyboardEvent) => {
+    handleKeyUp(event, canvas, config, isDragEnabled, isDragging, {
+      setIsSpacePressed: setters.setIsSpacePressed,
+      setIsDragging: setters.setIsDragging,
+      setDragButton: setters.setDragButton,
+    });
+  };
+
+  const mouseDownHandler = (event: MouseEvent) => {
+    handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters);
+  };
+
+  const mouseMoveHandler = (event: MouseEvent) => {
+    handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
+      setHasDragged: setters.setHasDragged,
+      setIsDragging: setters.setIsDragging,
+      setLastMouseX: setters.setLastMouseX,
+      setLastMouseY: setters.setLastMouseY,
+    });
+  };
+
+  const mouseUpHandler = (event: MouseEvent) => {
+    handleMouseUp(event, canvas, config, isDragEnabled, isSpacePressed, isDragging, dragButton, mouseDownTime, hasDragged, {
+      setIsDragging: setters.setIsDragging,
+      setDragButton: setters.setDragButton,
+      setMouseDownTime: setters.setMouseDownTime,
+      setHasDragged: setters.setHasDragged,
+    });
+  };
+
+  const mouseLeaveHandler = () => {
+    handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragging, {
+      setIsDragging: setters.setIsDragging,
+      setDragButton: setters.setDragButton,
+    });
+  };
+
+  // Set up event listeners
+  canvas.container.addEventListener("mousedown", mouseDownHandler);
+  document.addEventListener("mousemove", mouseMoveHandler);
+  document.addEventListener("mouseup", mouseUpHandler);
+  canvas.container.addEventListener("mouseleave", mouseLeaveHandler);
+
+  if (config.requireSpaceForMouseDrag) {
+    document.addEventListener("keydown", keyDownHandler);
+    document.addEventListener("keyup", keyUpHandler);
+  }
+
+  updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+
+  const cleanup = () => {
+    canvas.container.removeEventListener("mousedown", mouseDownHandler);
+    document.removeEventListener("mousemove", mouseMoveHandler);
+    document.removeEventListener("mouseup", mouseUpHandler);
+    canvas.container.removeEventListener("mouseleave", mouseLeaveHandler);
+
+    if (config.requireSpaceForMouseDrag) {
+      document.removeEventListener("keydown", keyDownHandler);
+      document.removeEventListener("keyup", keyUpHandler);
+    }
+  };
+
+  if (withControls) {
+    return {
+      cleanup,
+      enable: () => {
+        isDragEnabled = true;
+        updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+        return true;
+      },
+      disable: () => {
+        isDragEnabled = false;
+        // Stop any current dragging
+        if (isDragging) {
+          resetDragState(canvas, config, isDragEnabled, isSpacePressed, {
+            setIsDragging: setters.setIsDragging,
+            setDragButton: setters.setDragButton,
+          });
+        }
+        updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+        return true;
+      },
+      isEnabled: () => isDragEnabled,
+    };
+  }
+
+  return cleanup;
+}

package/src/lib/events/touch/getTouchCenter.ts

@@ -0,0 +1,6 @@
+export function getTouchCenter(touch1: Touch, touch2: Touch): { x: number; y: number } {
+  return {
+    x: (touch1.clientX + touch2.clientX) / 2,
+    y: (touch1.clientY + touch2.clientY) / 2,
+  };
+}

package/src/lib/events/touch/getTouchDistance.ts

@@ -0,0 +1,5 @@
+export function getTouchDistance(touch1: Touch, touch2: Touch): number {
+  const dx = touch1.clientX - touch2.clientX;
+  const dy = touch1.clientY - touch2.clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}

package/src/lib/events/touch/handleTouchEnd.ts

@@ -0,0 +1,9 @@
+import type { TouchState } from "@/types/index.js";
+
+export function handleTouchEnd(event: TouchEvent, touchState: TouchState): void {
+  touchState.touches = Array.from(event.touches);
+
+  if (touchState.touches.length < 2) {
+    touchState.lastDistance = 0;
+  }
+}

package/src/lib/events/touch/handleTouchMove.ts

@@ -0,0 +1,58 @@
+import { getTouchCenter } from "@/lib/events/touch/getTouchCenter.js";
+import { getTouchDistance } from "@/lib/events/touch/getTouchDistance.js";
+import { withRAFThrottle, withRulerOffsetObject } from "@/lib/helpers/index.js";
+import { applyZoomToCanvas } from "@/lib/transform/applyZoomToCanvas.js";
+import type { Canvas, TouchState, Transform } from "@/types/index.js";
+
+export function handleTouchMove(event: TouchEvent, canvas: Canvas, touchState: TouchState): void {
+  event.preventDefault();
+
+  const currentTouches = Array.from(event.touches);
+
+  // Enhanced RAF-throttled touch move handler for smooth gesture performance
+  const handleTouchMoveThrottled = withRAFThrottle((...args: unknown[]) => {
+    const touches = args[0] as Touch[];
+    if (touches.length === 1) {
+      // Single touch pan
+      if (touchState.touches.length === 1) {
+        const deltaX = touches[0].clientX - touchState.touches[0].clientX;
+        const deltaY = touches[0].clientY - touchState.touches[0].clientY;
+
+        const newTransform: Partial<Transform> = {
+          translateX: canvas.transform.translateX + deltaX,
+          translateY: canvas.transform.translateY + deltaY,
+        };
+
+        canvas.updateTransform(newTransform);
+      }
+    } else if (touches.length === 2) {
+      // Two finger pinch zoom
+      const currentDistance = getTouchDistance(touches[0], touches[1]);
+      const currentCenter = getTouchCenter(touches[0], touches[1]);
+
+      if (touchState.lastDistance > 0) {
+        const rawZoomFactor = currentDistance / touchState.lastDistance;
+
+        // Get center relative to canvas content area (accounting for rulers)
+        const rect = canvas.container.getBoundingClientRect();
+        let centerX = currentCenter.x - rect.left;
+        let centerY = currentCenter.y - rect.top;
+
+        // Account for ruler offset if rulers are present
+        const adjustedCenter = withRulerOffsetObject(canvas, { x: centerX, y: centerY }, (adjusted) => adjusted);
+        centerX = adjustedCenter.x;
+        centerY = adjustedCenter.y;
+
+        // Touch zoom uses global transition settings
+        applyZoomToCanvas(canvas, rawZoomFactor, centerX, centerY);
+      }
+
+      touchState.lastDistance = currentDistance;
+      touchState.lastCenter = currentCenter;
+    }
+
+    touchState.touches = touches;
+  });
+
+  handleTouchMoveThrottled(currentTouches);
+}

package/src/lib/events/touch/handleTouchStart.ts

@@ -0,0 +1,14 @@
+import { getTouchCenter } from "@/lib/events/touch/getTouchCenter.js";
+import { getTouchDistance } from "@/lib/events/touch/getTouchDistance.js";
+import type { TouchState } from "@/types/index.js";
+
+export function handleTouchStart(event: TouchEvent, touchState: TouchState): void {
+  event.preventDefault();
+
+  touchState.touches = Array.from(event.touches);
+
+  if (touchState.touches.length === 2) {
+    touchState.lastDistance = getTouchDistance(touchState.touches[0], touchState.touches[1]);
+    touchState.lastCenter = getTouchCenter(touchState.touches[0], touchState.touches[1]);
+  }
+}

package/src/lib/events/touch/setupTouchEvents.ts

@@ -0,0 +1,40 @@
+import { handleTouchEnd } from "@/lib/events/touch/handleTouchEnd.js";
+import { handleTouchMove } from "@/lib/events/touch/handleTouchMove.js";
+import { handleTouchStart } from "@/lib/events/touch/handleTouchStart.js";
+import type { Canvas, TouchState } from "@/types/index.js";
+
+export function setupTouchEvents(canvas: Canvas): () => void {
+  const touchState: TouchState = {
+    touches: [],
+    lastDistance: 0,
+    lastCenter: { x: 0, y: 0 },
+  };
+
+  const touchStartHandler = (event: TouchEvent) => {
+    handleTouchStart(event, touchState);
+  };
+
+  const touchMoveHandler = (event: TouchEvent) => {
+    handleTouchMove(event, canvas, touchState);
+  };
+
+  const touchEndHandler = (event: TouchEvent) => {
+    handleTouchEnd(event, touchState);
+  };
+
+  canvas.container.addEventListener("touchstart", touchStartHandler, {
+    passive: false,
+  });
+  canvas.container.addEventListener("touchmove", touchMoveHandler, {
+    passive: false,
+  });
+  canvas.container.addEventListener("touchend", touchEndHandler, {
+    passive: false,
+  });
+
+  return () => {
+    canvas.container.removeEventListener("touchstart", touchStartHandler);
+    canvas.container.removeEventListener("touchmove", touchMoveHandler);
+    canvas.container.removeEventListener("touchend", touchEndHandler);
+  };
+}