tokimeki-image-editor 0.2.7 → 0.2.9

package/dist/components/AnnotationTool.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
 import { screenToImageCoords } from '../utils/canvas';
-import { Pencil, Eraser, ArrowRight, Square, Brush } from 'lucide-svelte';
+import { Pencil, Eraser, ArrowRight, Square, Brush, Type } from 'lucide-svelte';
 import ToolPanel from './ToolPanel.svelte';
 let { canvas, image, viewport, transform, annotations, cropArea, initialTool, initialStrokeWidth, initialColor, onUpdate, onClose, onViewportChange } = $props();
 let containerElement = $state(null);
@@ -10,8 +10,87 @@ let currentTool = $state(initialTool ?? 'pen');
 let currentColor = $state(initialColor ?? '#FF6B6B');
 let strokeWidth = $state(initialStrokeWidth ?? 10);
 let shadowEnabled = $state(false);
+// Text tool state
+let fontSize = $state(48);
+let textInput = $state('');
+let isTextInputVisible = $state(false);
+let textInputPosition = $state(null);
+let textInputElement = $state(null);
+// Text drag state
+let isDraggingText = $state(false);
+let draggedTextId = $state(null);
+let textDragStart = $state(null);
+let isHoveringText = $state(false);
+// Text selection and resize state
+let selectedTextId = $state(null);
+let isResizingText = $state(false);
+let textResizeStart = $state(null);
+let isHoveringResizeHandle = $state(false);
+// Text editing state
+let editingTextId = $state(null);
+let editingTextValue = $state('');
+// Clear text selection and editing when switching away from text tool
+$effect(() => {
+    if (currentTool !== 'text') {
+        selectedTextId = null;
+        editingTextId = null;
+        editingTextValue = '';
+        isTextInputVisible = false;
+        textInputPosition = null;
+    }
+});
+// Update selected text color when currentColor changes
+let prevColor = $state(currentColor);
+$effect(() => {
+    if (selectedTextId && currentColor !== prevColor) {
+        const updatedAnnotations = annotations.map(a => {
+            if (a.id === selectedTextId) {
+                return { ...a, color: currentColor };
+            }
+            return a;
+        });
+        onUpdate(updatedAnnotations);
+    }
+    prevColor = currentColor;
+});
+// Get selected text annotation with canvas bounds
+let selectedTextBounds = $derived.by(() => {
+    if (!selectedTextId)
+        return null;
+    const annotation = annotations.find(a => a.id === selectedTextId);
+    if (!annotation || annotation.type !== 'text' || !annotation.text)
+        return null;
+    const point = toCanvasCoords(annotation.points[0]);
+    if (!point)
+        return null;
+    const totalScale = viewport.scale * viewport.zoom;
+    const scaledFontSize = (annotation.fontSize ?? 48) * totalScale;
+    const textWidth = calculateTextWidth(annotation.text, scaledFontSize);
+    const textHeight = scaledFontSize;
+    return {
+        annotation,
+        x: point.x,
+        y: point.y,
+        width: textWidth,
+        height: textHeight
+    };
+});
 // Preset colors - modern bright tones
 const colorPresets = ['#FF6B6B', '#FFA94D', '#FFD93D', '#6BCB77', '#4D96FF', '#9B72F2', '#F8F9FA', '#495057'];
+// Calculate text width considering full-width and half-width characters
+function calculateTextWidth(text, fontSize) {
+    let width = 0;
+    for (const char of text) {
+        const code = char.charCodeAt(0);
+        // Full-width characters: CJK, full-width alphanumeric, Hangul
+        const isFullWidth = (code >= 0x3000 && code <= 0x9FFF) || // CJK symbols, Hiragana, Katakana, CJK Unified
+            (code >= 0xFF00 && code <= 0xFFEF) || // Full-width forms
+            (code >= 0xAC00 && code <= 0xD7AF) || // Hangul syllables
+            (code >= 0x1100 && code <= 0x11FF); // Hangul Jamo
+        width += isFullWidth ? fontSize : fontSize * 0.6;
+    }
+    return width;
+}
 // Drawing state
 let isDrawing = $state(false);
 let currentAnnotation = $state(null);
@@ -95,12 +174,22 @@ onMount(() => {
 });
 // Keyboard handlers for panning (Space + drag)
 function handleKeyDown(event) {
+    // Skip if input/textarea is focused (allow normal text input)
+    const target = event.target;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+        return;
+    }
     if (event.code === 'Space' && !isSpaceHeld) {
         isSpaceHeld = true;
         event.preventDefault();
     }
 }
 function handleKeyUp(event) {
+    // Skip if input/textarea is focused
+    const target = event.target;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+        return;
+    }
     if (event.code === 'Space') {
         isSpaceHeld = false;
         isPanning = false;
@@ -128,6 +217,63 @@ function handleMouseDown(event) {
     const imagePoint = toImageCoords(coords.clientX, coords.clientY);
     if (!imagePoint)
         return;
+    if (currentTool === 'text') {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        const canvasX = (coords.clientX - rect.left) * scaleX;
+        const canvasY = (coords.clientY - rect.top) * scaleY;
+        // Check if clicking on resize handle of selected text
+        if (selectedTextBounds) {
+            const handleSize = 12;
+            const handleX = selectedTextBounds.x + selectedTextBounds.width;
+            const handleY = selectedTextBounds.y + selectedTextBounds.height;
+            if (canvasX >= handleX - handleSize && canvasX <= handleX + handleSize &&
+                canvasY >= handleY - handleSize && canvasY <= handleY + handleSize) {
+                // Start resizing
+                isResizingText = true;
+                textResizeStart = {
+                    y: coords.clientY,
+                    originalFontSize: selectedTextBounds.annotation.fontSize ?? 48
+                };
+                return;
+            }
+        }
+        // Check if clicking on existing text annotation
+        const textAnnotation = findTextAnnotationAtPoint(canvasX, canvasY);
+        if (textAnnotation) {
+            // Cancel any open text input first
+            if (isTextInputVisible) {
+                cancelTextInput();
+            }
+            // Select and start dragging immediately
+            selectedTextId = textAnnotation.id;
+            isDraggingText = true;
+            draggedTextId = textAnnotation.id;
+            textDragStart = {
+                x: coords.clientX,
+                y: coords.clientY,
+                originalX: textAnnotation.points[0].x,
+                originalY: textAnnotation.points[0].y
+            };
+            return;
+        }
+        // Clicking elsewhere - deselect and show text input for new text
+        selectedTextId = null;
+        textInputPosition = {
+            x: coords.clientX - rect.left,
+            y: coords.clientY - rect.top,
+            imageX: imagePoint.x,
+            imageY: imagePoint.y
+        };
+        textInput = '';
+        isTextInputVisible = true;
+        // Focus the input after it's rendered
+        setTimeout(() => {
+            textInputElement?.focus();
+        }, 10);
+        return;
+    }
     if (currentTool === 'eraser') {
         // Find and remove annotation at click point
         const canvasPoint = { x: coords.clientX, y: coords.clientY };
@@ -192,6 +338,33 @@ function handleMouseDown(event) {
 const MIN_POINT_DISTANCE = 3;
 function handleMouseMove(event) {
     const coords = getEventCoords(event);
+    // Check hover state for text tool
+    if (currentTool === 'text' && canvas && !isDraggingText && !isPanning && !isResizingText) {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        const canvasX = (coords.clientX - rect.left) * scaleX;
+        const canvasY = (coords.clientY - rect.top) * scaleY;
+        // Check if hovering over resize handle
+        if (selectedTextBounds) {
+            const handleSize = 12;
+            const handleX = selectedTextBounds.x + selectedTextBounds.width;
+            const handleY = selectedTextBounds.y + selectedTextBounds.height;
+            if (canvasX >= handleX - handleSize && canvasX <= handleX + handleSize &&
+                canvasY >= handleY - handleSize && canvasY <= handleY + handleSize) {
+                isHoveringText = false;
+                isHoveringResizeHandle = true;
+                return;
+            }
+        }
+        isHoveringResizeHandle = false;
+        const textAnnotation = findTextAnnotationAtPoint(canvasX, canvasY);
+        isHoveringText = textAnnotation !== null;
+    }
+    else if (currentTool !== 'text') {
+        isHoveringText = false;
+        isHoveringResizeHandle = false;
+    }
     // Handle panning
     if (isPanning && panStart && onViewportChange) {
         event.preventDefault();
@@ -203,6 +376,43 @@ function handleMouseMove(event) {
         });
         return;
     }
+    // Handle text resizing
+    if (isResizingText && selectedTextId && textResizeStart) {
+        event.preventDefault();
+        const dy = coords.clientY - textResizeStart.y;
+        // Scale: moving down increases size, moving up decreases
+        const scaleFactor = 1 + dy / 100;
+        const newFontSize = Math.max(12, Math.min(300, textResizeStart.originalFontSize * scaleFactor));
+        const updatedAnnotations = annotations.map(a => {
+            if (a.id === selectedTextId) {
+                return { ...a, fontSize: Math.round(newFontSize) };
+            }
+            return a;
+        });
+        onUpdate(updatedAnnotations);
+        return;
+    }
+    // Handle text dragging
+    if (isDraggingText && draggedTextId && textDragStart && canvas) {
+        event.preventDefault();
+        const rect = canvas.getBoundingClientRect();
+        const totalScale = viewport.scale * viewport.zoom;
+        // Calculate delta in screen pixels, then convert to image coordinates
+        const dx = (coords.clientX - textDragStart.x) * (canvas.width / rect.width) / totalScale;
+        const dy = (coords.clientY - textDragStart.y) * (canvas.height / rect.height) / totalScale;
+        // Update the annotation position
+        const updatedAnnotations = annotations.map(a => {
+            if (a.id === draggedTextId) {
+                return {
+                    ...a,
+                    points: [{ x: textDragStart.originalX + dx, y: textDragStart.originalY + dy }]
+                };
+            }
+            return a;
+        });
+        onUpdate(updatedAnnotations);
+        return;
+    }
     if (!isDrawing || !currentAnnotation || !canvas || !image)
         return;
     const imagePoint = toImageCoords(coords.clientX, coords.clientY);
@@ -287,6 +497,19 @@ function handleMouseUp(event) {
         panStart = null;
         return;
     }
+    // Stop text resizing
+    if (isResizingText) {
+        isResizingText = false;
+        textResizeStart = null;
+        return;
+    }
+    // Stop text dragging
+    if (isDraggingText) {
+        isDraggingText = false;
+        draggedTextId = null;
+        textDragStart = null;
+        return;
+    }
     if (!isDrawing || !currentAnnotation) {
         isDrawing = false;
         return;
@@ -376,6 +599,27 @@ function handleMouseUp(event) {
     recentSpeeds = [];
     strokeStartTime = 0;
 }
+function findTextAnnotationAtPoint(canvasX, canvasY) {
+    const totalScale = viewport.scale * viewport.zoom;
+    for (let i = annotations.length - 1; i >= 0; i--) {
+        const annotation = annotations[i];
+        if (annotation.type !== 'text' || !annotation.text)
+            continue;
+        const points = annotation.points.map(p => toCanvasCoords(p)).filter(Boolean);
+        if (points.length === 0)
+            continue;
+        const fontSize = (annotation.fontSize ?? 48) * totalScale;
+        const textWidth = calculateTextWidth(annotation.text, fontSize);
+        const textHeight = fontSize;
+        const textX = points[0].x;
+        const textY = points[0].y;
+        if (canvasX >= textX - 5 && canvasX <= textX + textWidth + 5 &&
+            canvasY >= textY - 5 && canvasY <= textY + textHeight + 5) {
+            return annotation;
+        }
+    }
+    return null;
+}
 function findAnnotationAtPoint(canvasX, canvasY) {
     const hitRadius = 10;
     for (let i = annotations.length - 1; i >= 0; i--) {
@@ -411,6 +655,20 @@ function findAnnotationAtPoint(canvasX, canvasY) {
                     return i;
             }
         }
+        else if (annotation.type === 'text' && annotation.text) {
+            if (points.length >= 1) {
+                const totalScale = viewport.scale * viewport.zoom;
+                const fontSize = (annotation.fontSize ?? 48) * totalScale;
+                const textWidth = calculateTextWidth(annotation.text, fontSize);
+                const textHeight = fontSize;
+                const textX = points[0].x;
+                const textY = points[0].y;
+                if (canvasX >= textX - hitRadius && canvasX <= textX + textWidth + hitRadius &&
+                    canvasY >= textY - hitRadius && canvasY <= textY + textHeight + hitRadius) {
+                    return i;
+                }
+            }
+        }
     }
     return -1;
 }
@@ -430,6 +688,103 @@ function pointToSegmentDistance(px, py, a, b) {
 function handleClearAll() {
     onUpdate([]);
 }
+function confirmTextInput() {
+    if (textInput.trim() && textInputPosition) {
+        const newAnnotation = {
+            id: `annotation-${Date.now()}`,
+            type: 'text',
+            color: currentColor,
+            strokeWidth: strokeWidth,
+            points: [{ x: textInputPosition.imageX, y: textInputPosition.imageY }],
+            shadow: shadowEnabled,
+            text: textInput.trim(),
+            fontSize: fontSize
+        };
+        onUpdate([...annotations, newAnnotation]);
+    }
+    cancelTextInput();
+}
+function cancelTextInput() {
+    isTextInputVisible = false;
+    textInput = '';
+    textInputPosition = null;
+}
+function handleTextInputKeydown(event) {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        if (editingTextId) {
+            confirmTextEdit();
+        }
+        else {
+            confirmTextInput();
+        }
+    }
+    else if (event.key === 'Escape') {
+        event.preventDefault();
+        if (editingTextId) {
+            cancelTextEdit();
+        }
+        else {
+            cancelTextInput();
+        }
+    }
+}
+function startTextEdit(annotation) {
+    if (!annotation.text)
+        return;
+    editingTextId = annotation.id;
+    editingTextValue = annotation.text;
+    isTextInputVisible = true;
+    // Position the input at the text location
+    const point = toCanvasCoords(annotation.points[0]);
+    if (point && canvas) {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = rect.width / canvas.width;
+        const scaleY = rect.height / canvas.height;
+        textInputPosition = {
+            x: point.x * scaleX,
+            y: point.y * scaleY,
+            imageX: annotation.points[0].x,
+            imageY: annotation.points[0].y
+        };
+    }
+    setTimeout(() => {
+        textInputElement?.focus();
+        textInputElement?.select();
+    }, 10);
+}
+function confirmTextEdit() {
+    if (editingTextId && editingTextValue.trim()) {
+        const updatedAnnotations = annotations.map(a => {
+            if (a.id === editingTextId) {
+                return { ...a, text: editingTextValue.trim() };
+            }
+            return a;
+        });
+        onUpdate(updatedAnnotations);
+    }
+    cancelTextEdit();
+}
+function cancelTextEdit() {
+    editingTextId = null;
+    editingTextValue = '';
+    isTextInputVisible = false;
+    textInputPosition = null;
+}
+function handleDoubleClick(event) {
+    if (currentTool !== 'text' || !canvas)
+        return;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const canvasX = (event.clientX - rect.left) * scaleX;
+    const canvasY = (event.clientY - rect.top) * scaleY;
+    const textAnnotation = findTextAnnotationAtPoint(canvasX, canvasY);
+    if (textAnnotation) {
+        event.preventDefault();
+        startTextEdit(textAnnotation);
+    }
+}
 function handleTouchStart(event) {
     // Two-finger touch starts panning
     if (event.touches.length === 2) {
@@ -764,7 +1119,13 @@ let currentAnnotationCanvas = $derived.by(() => {
   bind:this={containerElement}
   class="annotation-tool-overlay"
   class:panning={isSpaceHeld || isTwoFingerTouch}
+  class:dragging-text={isDraggingText}
+  class:text-mode={currentTool === 'text'}
+  class:hovering-text={isHoveringText}
+  class:hovering-resize={isHoveringResizeHandle}
+  class:resizing-text={isResizingText}
   onmousedown={handleMouseDown}
+  ondblclick={handleDoubleClick}
   role="button"
   tabindex="-1"
 >
@@ -783,15 +1144,26 @@ let currentAnnotationCanvas = $derived.by(() => {
       {@const shadowFilter = annotation.shadow ? 'url(#annotation-shadow)' : 'none'}
 
       {#if annotation.type === 'pen' && points.length > 0}
-        <path
-          d={generateSmoothPath(points)}
-          fill="none"
-          stroke={annotation.color}
-          stroke-width={annotation.strokeWidth * totalScale}
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          filter={shadowFilter}
-        />
+        {#if points.length === 1}
+          <!-- Single point - draw a dot -->
+          <circle
+            cx={points[0].x}
+            cy={points[0].y}
+            r={annotation.strokeWidth * totalScale / 2}
+            fill={annotation.color}
+            filter={shadowFilter}
+          />
+        {:else}
+          <path
+            d={generateSmoothPath(points)}
+            fill="none"
+            stroke={annotation.color}
+            stroke-width={annotation.strokeWidth * totalScale}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            filter={shadowFilter}
+          />
+        {/if}
       {:else if annotation.type === 'brush' && points.length >= 1}
         {@const brushPoints = annotation.points.map(p => {
           const canvasCoords = toCanvasCoords(p);
@@ -848,6 +1220,18 @@ let currentAnnotationCanvas = $derived.by(() => {
           stroke-width={annotation.strokeWidth * totalScale}
           filter={shadowFilter}
         />
+      {:else if annotation.type === 'text' && points.length >= 1 && annotation.text && annotation.id !== editingTextId}
+        {@const scaledFontSize = (annotation.fontSize ?? 48) * totalScale}
+        <text
+          x={points[0].x}
+          y={points[0].y + scaledFontSize * 0.88}
+          fill={annotation.color}
+          font-size={scaledFontSize}
+          font-family="sans-serif"
+          font-weight="bold"
+          dominant-baseline="alphabetic"
+          filter={shadowFilter}
+        >{annotation.text}</text>
       {/if}
     {/each}
 
@@ -858,15 +1242,26 @@ let currentAnnotationCanvas = $derived.by(() => {
       {@const currentShadowFilter = currentAnnotationCanvas.shadow ? 'url(#annotation-shadow)' : 'none'}
 
       {#if currentAnnotationCanvas.type === 'pen'}
-        <path
-          d={generateSmoothPath(points)}
-          fill="none"
-          stroke={currentAnnotationCanvas.color}
-          stroke-width={currentAnnotationCanvas.strokeWidth * totalScale}
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          filter={currentShadowFilter}
-        />
+        {#if points.length === 1}
+          <!-- Single point - draw a dot -->
+          <circle
+            cx={points[0].x}
+            cy={points[0].y}
+            r={currentAnnotationCanvas.strokeWidth * totalScale / 2}
+            fill={currentAnnotationCanvas.color}
+            filter={currentShadowFilter}
+          />
+        {:else}
+          <path
+            d={generateSmoothPath(points)}
+            fill="none"
+            stroke={currentAnnotationCanvas.color}
+            stroke-width={currentAnnotationCanvas.strokeWidth * totalScale}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            filter={currentShadowFilter}
+          />
+        {/if}
       {:else if currentAnnotationCanvas.type === 'brush' && points.length >= 1}
         <path
           d={generateBrushPath(points, currentAnnotationCanvas.strokeWidth, totalScale)}
@@ -920,7 +1315,70 @@ let currentAnnotationCanvas = $derived.by(() => {
         />
       {/if}
     {/if}
+
+    <!-- Selection box and resize handle for selected text -->
+    {#if selectedTextBounds}
+      {@const padding = 4}
+      {@const handleSize = 10}
+      <rect
+        x={selectedTextBounds.x - padding}
+        y={selectedTextBounds.y - padding}
+        width={selectedTextBounds.width + padding * 2}
+        height={selectedTextBounds.height + padding * 2}
+        fill="none"
+        stroke="var(--primary-color, #63b97b)"
+        stroke-width="2"
+        stroke-dasharray="4 2"
+      />
+      <!-- Resize handle (bottom-right corner) -->
+      <rect
+        x={selectedTextBounds.x + selectedTextBounds.width - handleSize / 2 + padding}
+        y={selectedTextBounds.y + selectedTextBounds.height - handleSize / 2 + padding}
+        width={handleSize}
+        height={handleSize}
+        fill="var(--primary-color, #63b97b)"
+        stroke="#fff"
+        stroke-width="1"
+        rx="2"
+        class="resize-handle"
+      />
+    {/if}
   </svg>
+
+  <!-- Text input overlay -->
+  {#if isTextInputVisible && textInputPosition}
+    {@const editingAnnotation = editingTextId ? annotations.find(a => a.id === editingTextId) : null}
+    {@const inputColor = editingAnnotation?.color ?? currentColor}
+    {@const inputFontSize = (editingAnnotation?.fontSize ?? fontSize) * viewport.scale * viewport.zoom}
+    <div
+      class="text-input-container"
+      style="left: {textInputPosition.x}px; top: {textInputPosition.y}px;"
+    >
+      {#if editingTextId}
+        <input
+          bind:this={textInputElement}
+          type="text"
+          class="text-input"
+          bind:value={editingTextValue}
+          onkeydown={handleTextInputKeydown}
+          onblur={confirmTextEdit}
+          placeholder={$_('annotate.textPlaceholder')}
+          style="color: {inputColor}; font-size: {inputFontSize}px;"
+        />
+      {:else}
+        <input
+          bind:this={textInputElement}
+          type="text"
+          class="text-input"
+          bind:value={textInput}
+          onkeydown={handleTextInputKeydown}
+          onblur={confirmTextInput}
+          placeholder={$_('annotate.textPlaceholder')}
+          style="color: {inputColor}; font-size: {inputFontSize}px;"
+        />
+      {/if}
+    </div>
+  {/if}
 </div>
 
 <!-- Control panel -->
@@ -970,6 +1428,14 @@ let currentAnnotationCanvas = $derived.by(() => {
         >
           <Square size={20} />
         </button>
+        <button
+          class="tool-btn"
+          class:active={currentTool === 'text'}
+          onclick={() => currentTool = 'text'}
+          title={$_('annotate.text')}
+        >
+          <Type size={20} />
+        </button>
       </div>
     </div>
 
@@ -995,20 +1461,39 @@ let currentAnnotationCanvas = $derived.by(() => {
       </div>
     </div>
 
-    <!-- Stroke width -->
-    <div class="control-group">
-      <label for="stroke-width">
-        <span>{$_('annotate.strokeWidth')}</span>
-        <span class="value">{strokeWidth}px</span>
-      </label>
-      <input
-        id="stroke-width"
-        type="range"
-        min="5"
-        max="100"
-        bind:value={strokeWidth}
-      />
-    </div>
+    <!-- Stroke width (hidden for text tool) -->
+    {#if currentTool !== 'text'}
+      <div class="control-group">
+        <label for="stroke-width">
+          <span>{$_('annotate.strokeWidth')}</span>
+          <span class="value">{strokeWidth}px</span>
+        </label>
+        <input
+          id="stroke-width"
+          type="range"
+          min="5"
+          max="100"
+          bind:value={strokeWidth}
+        />
+      </div>
+    {/if}
+
+    <!-- Font size (text tool only) -->
+    {#if currentTool === 'text'}
+      <div class="control-group">
+        <label for="font-size">
+          <span>{$_('annotate.fontSize')}</span>
+          <span class="value">{fontSize}px</span>
+        </label>
+        <input
+          id="font-size"
+          type="range"
+          min="12"
+          max="200"
+          bind:value={fontSize}
+        />
+      </div>
+    {/if}
 
     <!-- Shadow toggle -->
     <div class="control-group">
@@ -1055,6 +1540,20 @@ let currentAnnotationCanvas = $derived.by(() => {
       cursor: grabbing;
     }
 
+    .annotation-tool-overlay.text-mode {
+      cursor: text;
+    }
+
+    .annotation-tool-overlay.hovering-text,
+    .annotation-tool-overlay.dragging-text {
+      cursor: move;
+    }
+
+    .annotation-tool-overlay.hovering-resize,
+    .annotation-tool-overlay.resizing-text {
+      cursor: nwse-resize;
+    }
+
   .annotation-tool-svg {
     width: 100%;
     height: 100%;
@@ -1300,4 +1799,26 @@ let currentAnnotationCanvas = $derived.by(() => {
 
   .toggle-btn.active .toggle-thumb {
     transform: translateX(20px);
-  }</style>
+  }
+
+  .text-input-container {
+    position: absolute;
+    z-index: 10;
+    transform: translateY(-50%);
+  }
+
+  .text-input {
+    background: rgba(0, 0, 0, 0.7);
+    border: 2px solid var(--primary-color, #63b97b);
+    border-radius: 4px;
+    padding: 4px 8px;
+    min-width: 100px;
+    max-width: 400px;
+    font-weight: bold;
+    outline: none;
+  }
+
+  .text-input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+      font-weight: normal;
+    }</style>

package/dist/components/Canvas.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { onMount, onDestroy } from 'svelte';
 import { drawImage, preloadStampImage, applyStamps, applyAnnotations } from '../utils/canvas';
 import { initWebGPUCanvas, uploadImageToGPU, renderWithAdjustments, cleanupWebGPU, isWebGPUInitialized } from '../utils/webgpu-render';
-let { canvas = $bindable(null), width, height, image, viewport, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = [], annotations = [], onZoom, onViewportChange } = $props();
+let { canvas = $bindable(null), width, height, image, viewport, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = [], annotations = [], skipAnnotations = false, onZoom, onViewportChange } = $props();
 // Constants
 const PAN_OVERFLOW_MARGIN = 0.2; // Allow 20% overflow when panning
 // State
@@ -164,7 +164,8 @@ function renderWebGPU() {
     ensureCanvasSize(canvasElement, width, height);
     renderWithAdjustments(adjustments, viewport, transform, width, height, currentImage.width, currentImage.height, cropArea, blurAreas);
     // Render stamps and annotations on overlay canvas
-    if (overlayCanvasElement && (stampAreas.length > 0 || annotations.length > 0)) {
+    const shouldRenderAnnotations = !skipAnnotations && annotations.length > 0;
+    if (overlayCanvasElement && (stampAreas.length > 0 || shouldRenderAnnotations)) {
         ensureCanvasSize(overlayCanvasElement, width, height);
         // Clear overlay canvas
         const ctx = overlayCanvasElement.getContext('2d');
@@ -173,7 +174,7 @@ function renderWebGPU() {
             if (stampAreas.length > 0) {
                 applyStamps(overlayCanvasElement, currentImage, viewport, stampAreas, cropArea);
             }
-            if (annotations.length > 0) {
+            if (shouldRenderAnnotations) {
                 applyAnnotations(overlayCanvasElement, currentImage, viewport, annotations, cropArea);
             }
         }
@@ -217,7 +218,7 @@ async function performRender() {
         return;
     canvasElement.width = width;
     canvasElement.height = height;
-    await drawImage(canvasElement, image, viewport, transform, adjustments, cropArea, blurAreas, stampAreas, annotations);
+    await drawImage(canvasElement, image, viewport, transform, adjustments, cropArea, blurAreas, stampAreas, skipAnnotations ? [] : annotations);
 }
 function handleMouseDown(e) {
     if (e.button === 0 || e.button === 1) {

package/dist/components/Canvas.svelte.d.ts

@@ -11,6 +11,7 @@ interface Props {
     blurAreas?: BlurArea[];
     stampAreas?: StampArea[];
     annotations?: Annotation[];
+    skipAnnotations?: boolean;
     onZoom?: (delta: number, centerX?: number, centerY?: number) => void;
     onViewportChange?: (viewportUpdate: Partial<Viewport>) => void;
 }

package/dist/components/ImageEditor.svelte

@@ -439,6 +439,7 @@ function handleKeyDown(event) {
           blurAreas={state.blurAreas}
           stampAreas={state.stampAreas}
           annotations={state.annotations}
+          skipAnnotations={state.mode === 'annotate'}
           onZoom={handleZoom}
           onViewportChange={handleViewportChange}
         />

package/dist/components/ToolPanel.svelte

@@ -51,7 +51,7 @@ function handleSheetDragEnd() {
 <div
   bind:this={panelElement}
   class="tool-panel"
-  style="--sheet-offset: {sheetOffset}px; --sheet-max-height: {SHEET_MAX_HEIGHT}px"
+  style="--sheet-offset: {sheetOffset}px; --sheet-max-height: {SHEET_MAX_HEIGHT}px; --sheet-visible-height: {SHEET_MAX_HEIGHT - sheetOffset}px"
 >
   <!-- Drag handle for mobile bottom sheet -->
   <div
@@ -113,8 +113,9 @@ function handleSheetDragEnd() {
       height: var(--sheet-max-height, 400px);
       border-radius: 16px 16px 0 0;
       z-index: 9999;
-      overflow-y: auto;
-      overscroll-behavior: contain;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
       padding-top: 0;
       padding-bottom: 1.5rem;
       transform: translateY(var(--sheet-offset, 0px));
@@ -137,7 +138,8 @@ function handleSheetDragEnd() {
       cursor: grab;
       touch-action: pan-x;
       user-select: none;
-      -webkit-user-select: none
+      -webkit-user-select: none;
+      flex-shrink: 0
   }
 
       .sheet-drag-handle:active {
@@ -162,7 +164,8 @@ function handleSheetDragEnd() {
   @media (max-width: 767px) {
 
   .panel-header {
-      margin-bottom: 0.5rem
+      margin-bottom: 0.5rem;
+      flex-shrink: 0
   }
     }
 
@@ -206,7 +209,13 @@ function handleSheetDragEnd() {
   @media (max-width: 767px) {
 
   .panel-content {
-      gap: 0.75rem
+      gap: 0.75rem;
+      flex: 1;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      min-height: 0;
+      /* Calculate max height: visible area - header (~40px) - padding - actions (~50px) - drag handle (~32px) */
+      max-height: calc(var(--sheet-visible-height, 400px) - 130px)
   }
     }
 
@@ -220,6 +229,7 @@ function handleSheetDragEnd() {
   @media (max-width: 767px) {
 
   .panel-actions {
-      margin-top: 0.5rem
+      margin-top: 0.5rem;
+      flex-shrink: 0
   }
     }</style>

package/dist/config/stamps.js

@@ -17,6 +17,7 @@ export const STAMP_ASSETS = [
     { id: 'emoji-cloud', type: 'emoji', content: '☁️', preview: '☁️' },
     { id: 'emoji-flower', type: 'emoji', content: '🌸', preview: '🌸' },
     { id: 'emoji-cherry', type: 'emoji', content: '🍒', preview: '🍒' },
+    { id: 'emoji-bamboo', type: 'emoji', content: '🎍', preview: '🎍' },
     // { id: 'image-1', type: 'image', content: '/stamps/christmas_tree.png', preview: '/stamps/christmas_tree.png' },
     // { id: 'svg-1', type: 'svg', content: '/stamps/svg-1.svg', preview: '/stamps/svg-1.svg' }
 ];

package/dist/i18n/locales/en.json

@@ -85,9 +85,12 @@
     "eraser": "Eraser",
     "arrow": "Arrow",
     "rectangle": "Rectangle",
+    "text": "Text",
     "color": "Color",
     "strokeWidth": "Stroke Width",
+    "fontSize": "Font Size",
     "shadow": "Shadow",
-    "clearAll": "Clear All"
+    "clearAll": "Clear All",
+    "textPlaceholder": "Enter text..."
   }
 }

package/dist/i18n/locales/ja.json

@@ -85,9 +85,12 @@
     "eraser": "消しゴム",
     "arrow": "矢印",
     "rectangle": "四角形",
+    "text": "テキスト",
     "color": "色",
     "strokeWidth": "線の太さ",
+    "fontSize": "フォントサイズ",
     "shadow": "影",
-    "clearAll": "すべて消去"
+    "clearAll": "すべて消去",
+    "textPlaceholder": "テキストを入力..."
   }
 }

package/dist/types.d.ts

@@ -37,7 +37,7 @@ export interface StampArea {
     stampType: StampType;
     stampContent: string;
 }
-export type AnnotationType = 'pen' | 'brush' | 'arrow' | 'rectangle';
+export type AnnotationType = 'pen' | 'brush' | 'arrow' | 'rectangle' | 'text';
 export interface AnnotationPoint {
     x: number;
     y: number;
@@ -50,6 +50,8 @@ export interface Annotation {
     strokeWidth: number;
     points: AnnotationPoint[];
     shadow: boolean;
+    text?: string;
+    fontSize?: number;
 }
 export interface TransformState {
     rotation: number;

package/dist/utils/canvas.js

@@ -641,6 +641,15 @@ export function applyAnnotations(canvas, img, viewport, annotations, cropArea) {
             ctx.roundRect(rectX, rectY, rectWidth, rectHeight, cornerRadius);
             ctx.stroke();
         }
+        else if (annotation.type === 'text' && annotation.points.length >= 1 && annotation.text) {
+            // Draw text annotation
+            const pos = toCanvasCoords(annotation.points[0].x, annotation.points[0].y);
+            const scaledFontSize = (annotation.fontSize ?? 48) * totalScale;
+            ctx.font = `bold ${scaledFontSize}px sans-serif`;
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'alphabetic';
+            ctx.fillText(annotation.text, pos.x, pos.y + scaledFontSize * 0.88);
+        }
         ctx.restore();
     });
 }

package/package.json

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