tokimeki-image-editor 0.2.3 → 0.2.4

package/dist/components/AnnotationTool.svelte

@@ -15,10 +15,11 @@ const colorPresets = ['#FF6B6B', '#FFA94D', '#FFD93D', '#6BCB77', '#4D96FF', '#9
 // Drawing state
 let isDrawing = $state(false);
 let currentAnnotation = $state(null);
-// Panning state (Space + drag)
+// Panning state (Space + drag on desktop, 2-finger drag on mobile)
 let isSpaceHeld = $state(false);
 let isPanning = $state(false);
 let panStart = $state(null);
+let isTwoFingerTouch = $state(false);
 // Helper to get coordinates from mouse or touch event
 function getEventCoords(event) {
     if ('touches' in event && event.touches.length > 0) {
@@ -289,12 +290,79 @@ function pointToSegmentDistance(px, py, a, b) {
 function handleClearAll() {
     onUpdate([]);
 }
-const handleTouchStart = handleMouseDown;
-const handleTouchMove = handleMouseMove;
+function handleTouchStart(event) {
+    // Two-finger touch starts panning
+    if (event.touches.length === 2) {
+        event.preventDefault();
+        isTwoFingerTouch = true;
+        // Use the midpoint of the two touches
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        const midX = (touch1.clientX + touch2.clientX) / 2;
+        const midY = (touch1.clientY + touch2.clientY) / 2;
+        // Cancel any current drawing
+        if (isDrawing) {
+            isDrawing = false;
+            currentAnnotation = null;
+        }
+        isPanning = true;
+        panStart = {
+            x: midX,
+            y: midY,
+            offsetX: viewport.offsetX,
+            offsetY: viewport.offsetY
+        };
+        return;
+    }
+    // Single finger - normal drawing (only if not already in two-finger mode)
+    if (event.touches.length === 1 && !isTwoFingerTouch) {
+        handleMouseDown(event);
+    }
+}
+function handleTouchMove(event) {
+    // Two-finger panning
+    if (event.touches.length === 2 && isPanning && panStart && onViewportChange) {
+        event.preventDefault();
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        const midX = (touch1.clientX + touch2.clientX) / 2;
+        const midY = (touch1.clientY + touch2.clientY) / 2;
+        const dx = midX - panStart.x;
+        const dy = midY - panStart.y;
+        onViewportChange({
+            offsetX: panStart.offsetX + dx,
+            offsetY: panStart.offsetY + dy
+        });
+        return;
+    }
+    // Single finger drawing (only if not in two-finger mode)
+    if (event.touches.length === 1 && !isTwoFingerTouch) {
+        handleMouseMove(event);
+    }
+}
 function handleTouchEnd(event) {
+    // When all fingers are lifted
     if (event.touches.length === 0) {
+        if (isPanning) {
+            isPanning = false;
+            panStart = null;
+        }
+        isTwoFingerTouch = false;
         handleMouseUp();
     }
+    // When going from 2 fingers to 1, stay in pan mode but don't draw
+    else if (event.touches.length === 1 && isTwoFingerTouch) {
+        // Update pan start to the remaining finger position
+        if (isPanning && onViewportChange) {
+            const touch = event.touches[0];
+            panStart = {
+                x: touch.clientX,
+                y: touch.clientY,
+                offsetX: viewport.offsetX,
+                offsetY: viewport.offsetY
+            };
+        }
+    }
 }
 // Generate smooth SVG path using quadratic bezier curves
 function generateSmoothPath(points) {
@@ -350,7 +418,7 @@ let currentAnnotationCanvas = $derived.by(() => {
 <div
   bind:this={containerElement}
   class="annotation-tool-overlay"
-  class:panning={isSpaceHeld}
+  class:panning={isSpaceHeld || isTwoFingerTouch}
   onmousedown={handleMouseDown}
   role="button"
   tabindex="-1"

package/dist/components/ToolPanel.svelte

@@ -103,7 +103,7 @@ function handleSheetDragEnd() {
 
     @media (max-width: 767px) {
   .tool-panel {
-      position: absolute;
+      position: fixed;
       left: 0;
       right: 0;
       top: auto;
@@ -112,10 +112,11 @@ function handleSheetDragEnd() {
       min-width: auto;
       height: var(--sheet-max-height, 400px);
       border-radius: 16px 16px 0 0;
-      z-index: 1001;
+      z-index: 9999;
       overflow-y: auto;
       overscroll-behavior: contain;
       padding-top: 0;
+      padding-bottom: 1.5rem;
       transform: translateY(var(--sheet-offset, 0px));
       will-change: transform;
       backdrop-filter: none

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokimeki-image-editor",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",