tokimeki-image-editor 0.2.2 → 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/ImageEditor.svelte

@@ -553,8 +553,14 @@ function handleKeyDown(event) {
     display: flex;
     align-items: center;
     width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
   }
 
+  .editor-header::-webkit-scrollbar {
+      display: none;
+    }
+
   .editor-body {
     display: flex;
     flex-direction: column;

package/dist/components/ToolPanel.svelte

@@ -1,36 +1,39 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
 import { X } from 'lucide-svelte';
 let { title, onClose, children, actions } = $props();
-// Bottom sheet state (mobile)
-let sheetHeight = $state(180);
+// Bottom sheet state (mobile) - using transform for GPU acceleration
+const SHEET_MAX_HEIGHT = 400;
+const SHEET_MIN_VISIBLE = 60;
+let sheetOffset = $state(SHEET_MAX_HEIGHT - 180); // How much to hide (0 = fully shown)
 let isSheetDragging = $state(false);
 let sheetDragStart = $state(null);
-const SHEET_MIN_HEIGHT = 60;
-const SHEET_MAX_HEIGHT = 400;
+let panelElement = $state(null);
 function getEventCoords(event) {
     if ('touches' in event && event.touches.length > 0) {
-        return { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };
+        return { clientY: event.touches[0].clientY };
     }
-    else if ('clientX' in event) {
-        return { clientX: event.clientX, clientY: event.clientY };
+    else if ('clientY' in event) {
+        return { clientY: event.clientY };
     }
-    return { clientX: 0, clientY: 0 };
+    return { clientY: 0 };
 }
 function handleSheetDragStart(event) {
     event.preventDefault();
     event.stopPropagation();
     const coords = getEventCoords(event);
     isSheetDragging = true;
-    sheetDragStart = { y: coords.clientY, height: sheetHeight };
+    sheetDragStart = { y: coords.clientY, offset: sheetOffset };
 }
 function handleSheetDragMove(event) {
     if (!isSheetDragging || !sheetDragStart)
         return;
     event.preventDefault();
     const coords = getEventCoords(event);
-    const deltaY = sheetDragStart.y - coords.clientY;
-    const newHeight = Math.max(SHEET_MIN_HEIGHT, Math.min(SHEET_MAX_HEIGHT, sheetDragStart.height + deltaY));
-    sheetHeight = newHeight;
+    const deltaY = coords.clientY - sheetDragStart.y;
+    // Clamp offset: 0 (fully visible) to (SHEET_MAX_HEIGHT - SHEET_MIN_VISIBLE)
+    const maxOffset = SHEET_MAX_HEIGHT - SHEET_MIN_VISIBLE;
+    const newOffset = Math.max(0, Math.min(maxOffset, sheetDragStart.offset + deltaY));
+    sheetOffset = newOffset;
 }
 function handleSheetDragEnd() {
     isSheetDragging = false;
@@ -46,8 +49,9 @@ function handleSheetDragEnd() {
 />
 
 <div
+  bind:this={panelElement}
   class="tool-panel"
-  style="--sheet-height: {sheetHeight}px"
+  style="--sheet-offset: {sheetOffset}px; --sheet-max-height: {SHEET_MAX_HEIGHT}px"
 >
   <!-- Drag handle for mobile bottom sheet -->
   <div
@@ -99,20 +103,23 @@ function handleSheetDragEnd() {
 
     @media (max-width: 767px) {
   .tool-panel {
-      position: absolute;
+      position: fixed;
       left: 0;
       right: 0;
       top: auto;
       bottom: 0;
       width: auto;
       min-width: auto;
-      height: var(--sheet-height, 180px);
-      max-height: 70vh;
+      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;
-      transition: height 0.05s ease-out
+      padding-bottom: 1.5rem;
+      transform: translateY(var(--sheet-offset, 0px));
+      will-change: transform;
+      backdrop-filter: none
   }
     }
 
@@ -128,7 +135,9 @@ function handleSheetDragEnd() {
       align-items: center;
       padding: 12px 0 8px;
       cursor: grab;
-      touch-action: none
+      touch-action: pan-x;
+      user-select: none;
+      -webkit-user-select: none
   }
 
       .sheet-drag-handle:active {

package/dist/components/Toolbar.svelte

@@ -122,13 +122,20 @@ let { mode, hasImage, canUndo, canRedo, isStandalone = false, onModeChange, onUn
     align-items: center;
     justify-content: center;
     overflow-x: auto;
+    scrollbar-width: none;
   }
 
+    .toolbar::-webkit-scrollbar {
+      display: none;
+    }
+
     @media (max-width: 767px) {
   .toolbar {
       justify-content: flex-start;
-      align-items: stretch;
-      gap: .5rem
+      align-items: center;
+      gap: .5rem;
+      padding: 0 .5rem;
+      -webkit-overflow-scrolling: touch
   }
     }
 
@@ -136,6 +143,7 @@ let { mode, hasImage, canUndo, canRedo, isStandalone = false, onModeChange, onUn
     display: flex;
     gap: .25rem;
     align-items: center;
+    flex-shrink: 0;
   }
 
   .history-controls {
@@ -146,10 +154,8 @@ let { mode, hasImage, canUndo, canRedo, isStandalone = false, onModeChange, onUn
   @media (max-width: 767px) {
 
   .history-controls {
-      border-right: none;
-      padding-right: 0;
-      border-bottom: 1px solid #444;
-      padding-bottom: .5rem
+      border-right: 1px solid #444;
+      padding-right: .5rem
   }
     }
 
@@ -157,6 +163,13 @@ let { mode, hasImage, canUndo, canRedo, isStandalone = false, onModeChange, onUn
     gap: .5rem;
   }
 
+  @media (max-width: 767px) {
+
+  .mode-controls {
+      gap: .25rem
+  }
+    }
+
   .toolbar-btn {
     display: flex;
     align-items: center;
@@ -169,6 +182,7 @@ let { mode, hasImage, canUndo, canRedo, isStandalone = false, onModeChange, onUn
     cursor: pointer;
     transition: all 0.2s;
     font-size: 0.9rem;
+    flex-shrink: 0;
   }
 
   @media (max-width: 767px) {
@@ -176,9 +190,11 @@ let { mode, hasImage, canUndo, canRedo, isStandalone = false, onModeChange, onUn
   .toolbar-btn {
       flex-direction: column;
       justify-content: center;
-      font-size: .6rem;
-      gap: .3rem;
-      width: 64px
+      font-size: .55rem;
+      gap: .2rem;
+      padding: .4rem .5rem;
+      min-width: 48px;
+      width: auto
   }
     }
 

package/package.json

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