tokimeki-image-editor 0.2.0 → 0.2.1

package/dist/components/AnnotationTool.svelte

@@ -14,6 +14,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 +86,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 +165,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 +205,12 @@ function handleMouseMove(event) {
     }
 }
 function handleMouseUp(event) {
+    // Stop panning
+    if (isPanning) {
+        isPanning = false;
+        panStart = null;
+        return;
+    }
     if (!isDrawing || !currentAnnotation) {
         isDrawing = false;
         return;
@@ -295,12 +341,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"
@@ -565,6 +614,14 @@ 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%;
@@ -732,7 +789,6 @@ let currentAnnotationCanvas = $derived.by(() => {
   }
 
   .control-group .value {
-    color: var(--primary-color, #63b97b);
     font-weight: 600;
   }
 

package/package.json

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