tokimeki-image-editor 0.2.2 → 0.2.3

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
@@ -106,13 +110,15 @@ function handleSheetDragEnd() {
       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;
       overflow-y: auto;
+      overscroll-behavior: contain;
       padding-top: 0;
-      transition: height 0.05s ease-out
+      transform: translateY(var(--sheet-offset, 0px));
+      will-change: transform;
+      backdrop-filter: none
   }
     }
 
@@ -128,7 +134,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.3",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",