tokimeki-image-editor 0.2.0 → 0.2.2

package/dist/components/AdjustTool.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { X } from 'lucide-svelte';
+import ToolPanel from './ToolPanel.svelte';
 let { adjustments, onChange, onClose } = $props();
 function handleChange(key, value) {
     onChange({ [key]: value });
@@ -27,14 +27,9 @@ function handleWheel(e) {
 </script>
 
 <div class="adjust-tool" onwheel={handleWheel}>
-  <div class="tool-header">
-    <h3>{$_('editor.adjust')}</h3>
-    <button class="close-btn" onclick={onClose} title={$_('editor.close')}>
-      <X size={20} />
-    </button>
-  </div>
-
-  <div class="adjustments-grid">
+  <ToolPanel title={$_('editor.adjust')} {onClose}>
+    {#snippet children()}
+      <div class="adjustments-grid">
     <!-- Exposure -->
     <div class="adjustment-control">
       <label for="exposure">
@@ -194,60 +189,25 @@ function handleWheel(e) {
         oninput={(e) => handleChange('grain', Number(e.currentTarget.value))}
       />
     </div>
-  </div>
-
-  <div class="tool-actions">
-    <button class="btn btn-secondary" onclick={resetAll}>
-      {$_('editor.reset')}
-    </button>
-  </div>
+      </div>
+    {/snippet}
+
+    {#snippet actions()}
+      <button class="btn btn-secondary" onclick={resetAll}>
+        {$_('editor.reset')}
+      </button>
+    {/snippet}
+  </ToolPanel>
 </div>
 
 <style>
-  .adjust-tool {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .tool-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .tool-header h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #fff;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    background: transparent;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s;
-  }
-
-  .close-btn:hover {
-    background: #444;
-    color: #fff;
-  }
-
   .adjustments-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
   }
 
-  @media (max-width: 767px) {
-
+    @media (max-width: 767px) {
   .adjustments-grid {
       grid-template-columns: 1fr;
       gap: 0.75rem;
@@ -330,12 +290,6 @@ function handleWheel(e) {
     transform: scale(1.1);
   }
 
-  .tool-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
   .btn {
     padding: 0.5rem 1rem;
     border: none;

package/dist/components/AnnotationTool.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
 import { screenToImageCoords } from '../utils/canvas';
-import { X, Pencil, Eraser, ArrowRight, Square } from 'lucide-svelte';
+import { Pencil, Eraser, ArrowRight, Square } from 'lucide-svelte';
+import ToolPanel from './ToolPanel.svelte';
 let { canvas, image, viewport, transform, annotations, cropArea, onUpdate, onClose, onViewportChange } = $props();
 let containerElement = $state(null);
 // Tool settings
@@ -14,6 +15,10 @@ const colorPresets = ['#FF6B6B', '#FFA94D', '#FFD93D', '#6BCB77', '#4D96FF', '#9
 // Drawing state
 let isDrawing = $state(false);
 let currentAnnotation = $state(null);
+// Panning state (Space + drag)
+let isSpaceHeld = $state(false);
+let isPanning = $state(false);
+let panStart = $state(null);
 // Helper to get coordinates from mouse or touch event
 function getEventCoords(event) {
     if ('touches' in event && event.touches.length > 0) {
@@ -82,16 +87,41 @@ onMount(() => {
         }
     };
 });
+// Keyboard handlers for panning (Space + drag)
+function handleKeyDown(event) {
+    if (event.code === 'Space' && !isSpaceHeld) {
+        isSpaceHeld = true;
+        event.preventDefault();
+    }
+}
+function handleKeyUp(event) {
+    if (event.code === 'Space') {
+        isSpaceHeld = false;
+        isPanning = false;
+        panStart = null;
+    }
+}
 function handleMouseDown(event) {
     if (!canvas || !image)
         return;
     if ('button' in event && event.button !== 0)
         return;
     const coords = getEventCoords(event);
+    event.preventDefault();
+    // Start panning if space is held
+    if (isSpaceHeld) {
+        isPanning = true;
+        panStart = {
+            x: coords.clientX,
+            y: coords.clientY,
+            offsetX: viewport.offsetX,
+            offsetY: viewport.offsetY
+        };
+        return;
+    }
     const imagePoint = toImageCoords(coords.clientX, coords.clientY);
     if (!imagePoint)
         return;
-    event.preventDefault();
     if (currentTool === 'eraser') {
         // Find and remove annotation at click point
         const canvasPoint = { x: coords.clientX, y: coords.clientY };
@@ -136,9 +166,20 @@ function handleMouseDown(event) {
 // This absorbs micro-movements of the mouse
 const MIN_POINT_DISTANCE = 3;
 function handleMouseMove(event) {
+    const coords = getEventCoords(event);
+    // Handle panning
+    if (isPanning && panStart && onViewportChange) {
+        event.preventDefault();
+        const dx = coords.clientX - panStart.x;
+        const dy = coords.clientY - panStart.y;
+        onViewportChange({
+            offsetX: panStart.offsetX + dx,
+            offsetY: panStart.offsetY + dy
+        });
+        return;
+    }
     if (!isDrawing || !currentAnnotation || !canvas || !image)
         return;
-    const coords = getEventCoords(event);
     const imagePoint = toImageCoords(coords.clientX, coords.clientY);
     if (!imagePoint)
         return;
@@ -165,6 +206,12 @@ function handleMouseMove(event) {
     }
 }
 function handleMouseUp(event) {
+    // Stop panning
+    if (isPanning) {
+        isPanning = false;
+        panStart = null;
+        return;
+    }
     if (!isDrawing || !currentAnnotation) {
         isDrawing = false;
         return;
@@ -295,12 +342,15 @@ let currentAnnotationCanvas = $derived.by(() => {
 <svelte:window
   onmousemove={handleMouseMove}
   onmouseup={handleMouseUp}
+  onkeydown={handleKeyDown}
+  onkeyup={handleKeyUp}
 />
 
 <!-- Overlay -->
 <div
   bind:this={containerElement}
   class="annotation-tool-overlay"
+  class:panning={isSpaceHeld}
   onmousedown={handleMouseDown}
   role="button"
   tabindex="-1"
@@ -442,15 +492,8 @@ let currentAnnotationCanvas = $derived.by(() => {
 </div>
 
 <!-- Control panel -->
-<div class="annotation-tool-panel">
-  <div class="panel-header">
-    <h3>{$_('editor.annotate')}</h3>
-    <button class="close-btn" onclick={onClose} title={$_('editor.close')}>
-      <X size={20} />
-    </button>
-  </div>
-
-  <div class="panel-content">
+<ToolPanel title={$_('editor.annotate')} {onClose}>
+  {#snippet children()}
     <!-- Tool selection -->
     <div class="tool-group">
       <span class="group-label">{$_('annotate.tool')}</span>
@@ -544,15 +587,14 @@ let currentAnnotationCanvas = $derived.by(() => {
         </button>
       </label>
     </div>
+  {/snippet}
 
-    <!-- Actions -->
-    <div class="panel-actions">
-      <button class="btn btn-danger" onclick={handleClearAll} disabled={annotations.length === 0}>
-        {$_('annotate.clearAll')}
-      </button>
-    </div>
-  </div>
-</div>
+  {#snippet actions()}
+    <button class="btn btn-danger" onclick={handleClearAll} disabled={annotations.length === 0}>
+      {$_('annotate.clearAll')}
+    </button>
+  {/snippet}
+</ToolPanel>
 
 <style>
   .annotation-tool-overlay {
@@ -565,90 +607,51 @@ let currentAnnotationCanvas = $derived.by(() => {
     user-select: none;
   }
 
+    .annotation-tool-overlay.panning {
+      cursor: grab;
+    }
+
+    .annotation-tool-overlay.panning:active {
+      cursor: grabbing;
+    }
+
   .annotation-tool-svg {
     width: 100%;
     height: 100%;
     pointer-events: none;
   }
 
-  .annotation-tool-panel {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: rgba(30, 30, 30, 0.95);
-    border: 1px solid #444;
-    border-radius: 8px;
-    padding: 1rem;
-    min-width: 250px;
-    backdrop-filter: blur(10px);
-  }
-
-  @media (max-width: 767px) {
-
-  .annotation-tool-panel {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: auto;
-      bottom: 0;
-      width: auto;
-      min-width: auto;
-      max-height: 50vh;
-      border-radius: 16px 16px 0 0;
-      z-index: 1001;
-      overflow-y: auto
-  }
-    }
-
-  .panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .panel-header h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #fff;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    background: transparent;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s;
-  }
-
-  .close-btn:hover {
-    background: #444;
-    color: #fff;
-  }
-
-  .panel-content {
+  .tool-group,
+  .control-group {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
   }
 
+  @media (max-width: 767px) {
+
   .tool-group,
   .control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.75rem
   }
+    }
 
   .group-label {
     font-size: 0.9rem;
     color: #ccc;
   }
 
+  @media (max-width: 767px) {
+
+  .group-label {
+      font-size: 0.75rem;
+      white-space: nowrap;
+      min-width: 50px
+  }
+    }
+
   .tool-buttons {
     display: flex;
     gap: 0.5rem;
@@ -731,8 +734,15 @@ let currentAnnotationCanvas = $derived.by(() => {
     color: #ccc;
   }
 
+  @media (max-width: 767px) {
+
+  .control-group label {
+      font-size: 0.75rem;
+      gap: 0.5rem
+  }
+    }
+
   .control-group .value {
-    color: var(--primary-color, #63b97b);
     font-weight: 600;
   }
 
@@ -745,6 +755,14 @@ let currentAnnotationCanvas = $derived.by(() => {
     cursor: pointer;
   }
 
+  @media (max-width: 767px) {
+
+  .control-group input[type='range'] {
+      width: 80px;
+      flex-shrink: 0
+  }
+    }
+
   .control-group input[type='range']::-webkit-slider-thumb {
     appearance: none;
     width: 16px;
@@ -769,13 +787,6 @@ let currentAnnotationCanvas = $derived.by(() => {
     transition: all 0.2s;
   }
 
-  .panel-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-  }
-
   .btn {
     padding: 0.5rem 1rem;
     border: none;
@@ -785,6 +796,14 @@ let currentAnnotationCanvas = $derived.by(() => {
     transition: all 0.2s;
   }
 
+  @media (max-width: 767px) {
+
+  .btn {
+      padding: 0.4rem 0.75rem;
+      font-size: 0.75rem
+  }
+    }
+
   .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/BlurTool.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
 import { screenToImageCoords, imageToCanvasCoords } from '../utils/canvas';
-import { X } from 'lucide-svelte';
+import ToolPanel from './ToolPanel.svelte';
 let { canvas, image, viewport, transform, blurAreas, cropArea, onUpdate, onClose, onViewportChange } = $props();
 let containerElement = $state(null);
 // Helper to get coordinates from mouse or touch event
@@ -402,16 +402,9 @@ function handleTouchEnd(event) {
 </div>
 
 <!-- Control panel -->
-<div class="blur-tool-panel">
-  <div class="panel-header">
-    <h3>{$_('editor.blur')}</h3>
-    <button class="close-btn" onclick={onClose} title={$_('editor.close')}>
-      <X size={20} />
-    </button>
-  </div>
-
-  {#if selectedArea}
-    <div class="panel-content">
+<ToolPanel title={$_('editor.blur')} {onClose}>
+  {#snippet children()}
+    {#if selectedArea}
       <div class="control-group">
         <label for="blur-strength">
           <span>{$_('blur.strength')}</span>
@@ -426,19 +419,21 @@ function handleTouchEnd(event) {
           oninput={(e) => handleBlurStrengthChange(Number(e.currentTarget.value))}
         />
       </div>
-
-      <div class="panel-actions">
-        <button class="btn btn-danger" onclick={handleDeleteArea}>
-          {$_('editor.delete')}
-        </button>
+    {:else}
+      <div class="panel-hint">
+        <p>{$_('blur.hint')}</p>
       </div>
-    </div>
-  {:else}
-    <div class="panel-hint">
-      <p>{$_('blur.hint')}</p>
-    </div>
-  {/if}
-</div>
+    {/if}
+  {/snippet}
+
+  {#snippet actions()}
+    {#if selectedArea}
+      <button class="btn btn-danger" onclick={handleDeleteArea}>
+        {$_('editor.delete')}
+      </button>
+    {/if}
+  {/snippet}
+</ToolPanel>
 
 <style>
   .blur-tool-overlay {
@@ -461,55 +456,6 @@ function handleTouchEnd(event) {
     pointer-events: all;
   }
 
-  .blur-tool-panel {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: rgba(30, 30, 30, 0.95);
-    border: 1px solid #444;
-    border-radius: 8px;
-    padding: 1rem;
-    min-width: 250px;
-    backdrop-filter: blur(10px);
-  }
-
-  .panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .panel-header h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #fff;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    background: transparent;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s;
-  }
-
-  .close-btn:hover {
-    background: #444;
-    color: #fff;
-  }
-
-  .panel-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
   .control-group {
     display: flex;
     flex-direction: column;
@@ -568,12 +514,6 @@ function handleTouchEnd(event) {
     transform: scale(1.1);
   }
 
-  .panel-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
   .btn {
     padding: 0.5rem 1rem;
     border: none;