tokimeki-image-editor 0.1.13 → 0.2.0

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

@@ -0,0 +1,15 @@
+import type { Annotation, Viewport, TransformState, CropArea } from '../types';
+interface Props {
+    canvas: HTMLCanvasElement | null;
+    image: HTMLImageElement | null;
+    viewport: Viewport;
+    transform: TransformState;
+    annotations: Annotation[];
+    cropArea?: CropArea | null;
+    onUpdate: (annotations: Annotation[]) => void;
+    onClose: () => void;
+    onViewportChange?: (viewport: Partial<Viewport>) => void;
+}
+declare const AnnotationTool: import("svelte").Component<Props, {}, "">;
+type AnnotationTool = ReturnType<typeof AnnotationTool>;
+export default AnnotationTool;

package/dist/components/Canvas.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { onMount, onDestroy } from 'svelte';
-import { drawImage, preloadStampImage, applyStamps } from '../utils/canvas';
+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 = [], onZoom, onViewportChange } = $props();
+let { canvas = $bindable(null), width, height, image, viewport, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = [], annotations = [], onZoom, onViewportChange } = $props();
 // Constants
 const PAN_OVERFLOW_MARGIN = 0.2; // Allow 20% overflow when panning
 // State
@@ -119,6 +119,7 @@ $effect(() => {
     cropArea?.height;
     blurAreas;
     stampAreas;
+    annotations;
     width;
     height;
 });
@@ -136,6 +137,7 @@ $effect(() => {
     cropArea;
     blurAreas;
     stampAreas;
+    annotations;
     imageLoadCounter;
 });
 // Preload stamp images
@@ -161,18 +163,23 @@ function renderWebGPU() {
         return;
     ensureCanvasSize(canvasElement, width, height);
     renderWithAdjustments(adjustments, viewport, transform, width, height, currentImage.width, currentImage.height, cropArea, blurAreas);
-    // Render stamps on overlay canvas
-    if (overlayCanvasElement && stampAreas.length > 0) {
+    // Render stamps and annotations on overlay canvas
+    if (overlayCanvasElement && (stampAreas.length > 0 || annotations.length > 0)) {
         ensureCanvasSize(overlayCanvasElement, width, height);
         // Clear overlay canvas
         const ctx = overlayCanvasElement.getContext('2d');
         if (ctx) {
             ctx.clearRect(0, 0, width, height);
-            applyStamps(overlayCanvasElement, currentImage, viewport, stampAreas, cropArea);
+            if (stampAreas.length > 0) {
+                applyStamps(overlayCanvasElement, currentImage, viewport, stampAreas, cropArea);
+            }
+            if (annotations.length > 0) {
+                applyAnnotations(overlayCanvasElement, currentImage, viewport, annotations, cropArea);
+            }
         }
     }
     else if (overlayCanvasElement) {
-        // Clear overlay if no stamps
+        // Clear overlay if no stamps or annotations
         const ctx = overlayCanvasElement.getContext('2d');
         if (ctx) {
             ctx.clearRect(0, 0, width, height);
@@ -210,7 +217,7 @@ async function performRender() {
         return;
     canvasElement.width = width;
     canvasElement.height = height;
-    await drawImage(canvasElement, image, viewport, transform, adjustments, cropArea, blurAreas, stampAreas);
+    await drawImage(canvasElement, image, viewport, transform, adjustments, cropArea, blurAreas, stampAreas, annotations);
 }
 function handleMouseDown(e) {
     if (e.button === 0 || e.button === 1) {

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

@@ -1,4 +1,4 @@
-import type { Viewport, TransformState, CropArea, AdjustmentsState, BlurArea, StampArea } from '../types';
+import type { Viewport, TransformState, CropArea, AdjustmentsState, BlurArea, StampArea, Annotation } from '../types';
 interface Props {
     canvas?: HTMLCanvasElement | null;
     width: number;
@@ -10,6 +10,7 @@ interface Props {
     cropArea?: CropArea | null;
     blurAreas?: BlurArea[];
     stampAreas?: StampArea[];
+    annotations?: Annotation[];
     onZoom?: (delta: number, centerX?: number, centerY?: number) => void;
     onViewportChange?: (viewportUpdate: Partial<Viewport>) => void;
 }

package/dist/components/ImageEditor.svelte

@@ -11,6 +11,7 @@ import AdjustTool from './AdjustTool.svelte';
 import FilterTool from './FilterTool.svelte';
 import BlurTool from './BlurTool.svelte';
 import StampTool from './StampTool.svelte';
+import AnnotationTool from './AnnotationTool.svelte';
 import ExportTool from './ExportTool.svelte';
 let { initialImage, width = 800, height = 600, isStandalone = false, onComplete, onCancel, onExport } = $props();
 let state = $state({
@@ -41,7 +42,8 @@ let state = $state({
     },
     history: createEmptyHistory(),
     blurAreas: [],
-    stampAreas: []
+    stampAreas: [],
+    annotations: []
 });
 let canvasElement = $state(null);
 let fileInput = $state(null);
@@ -80,6 +82,7 @@ $effect(() => {
                 };
                 state.blurAreas = [];
                 state.stampAreas = [];
+                state.annotations = [];
                 // Reset history and save initial state
                 state.history = createEmptyHistory();
                 saveToHistory();
@@ -119,6 +122,8 @@ async function handleFileUpload(file) {
             scale: fitScale
         };
         state.blurAreas = [];
+        state.stampAreas = [];
+        state.annotations = [];
         // Reset history and save initial state
         state.history = createEmptyHistory();
         saveToHistory();
@@ -200,11 +205,15 @@ function handleStampAreasChange(stampAreas) {
     state.stampAreas = stampAreas;
     saveToHistory();
 }
+function handleAnnotationsChange(annotations) {
+    state.annotations = annotations;
+    saveToHistory();
+}
 async function handleExport() {
     if (!state.imageData.original)
         return;
     // Use WebGPU for export when available
-    const exportCanvas = await applyTransformWithWebGPU(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas);
+    const exportCanvas = await applyTransformWithWebGPU(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas, state.annotations);
     const dataUrl = exportCanvas.toDataURL(state.exportOptions.format === 'jpeg' ? 'image/jpeg' : 'image/png', state.exportOptions.quality);
     const filename = `edited-image-${Date.now()}.${state.exportOptions.format}`;
     downloadImage(dataUrl, filename);
@@ -216,7 +225,7 @@ async function handleComplete() {
     if (!state.imageData.original || !onComplete)
         return;
     // Use WebGPU for export when available
-    const exportCanvas = await applyTransformWithWebGPU(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas);
+    const exportCanvas = await applyTransformWithWebGPU(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas, state.annotations);
     const format = state.exportOptions.format === 'jpeg' ? 'image/jpeg' : 'image/png';
     const dataUrl = exportCanvas.toDataURL(state.exportOptions.format === 'jpeg' ? 'image/jpeg' : 'image/png', state.exportOptions.quality);
     // Convert to blob
@@ -271,7 +280,7 @@ function handleZoom(delta, centerX, centerY) {
     state.viewport.zoom = newZoom;
 }
 function saveToHistory() {
-    const snapshot = createSnapshot(state.cropArea, state.transform, state.adjustments, state.viewport, state.blurAreas, state.stampAreas);
+    const snapshot = createSnapshot(state.cropArea, state.transform, state.adjustments, state.viewport, state.blurAreas, state.stampAreas, state.annotations);
     state.history = addToHistory(state.history, snapshot);
 }
 function applySnapshot(snapshot) {
@@ -283,6 +292,10 @@ function applySnapshot(snapshot) {
     state.viewport = { ...snapshot.viewport };
     state.blurAreas = snapshot.blurAreas ? snapshot.blurAreas.map((area) => ({ ...area })) : [];
     state.stampAreas = snapshot.stampAreas ? snapshot.stampAreas.map((area) => ({ ...area })) : [];
+    state.annotations = snapshot.annotations ? snapshot.annotations.map((a) => ({
+        ...a,
+        points: a.points.map((p) => ({ ...p }))
+    })) : [];
 }
 function handleUndo() {
     const result = undo(state.history);
@@ -417,6 +430,7 @@ function handleKeyDown(event) {
           cropArea={state.cropArea}
           blurAreas={state.blurAreas}
           stampAreas={state.stampAreas}
+          annotations={state.annotations}
           onZoom={handleZoom}
           onViewportChange={handleViewportChange}
         />
@@ -456,6 +470,18 @@ function handleKeyDown(event) {
             onClose={() => state.mode = null}
             onViewportChange={handleViewportChange}
           />
+        {:else if state.mode === 'annotate'}
+          <AnnotationTool
+            canvas={canvasElement}
+            image={state.imageData.original}
+            viewport={state.viewport}
+            transform={state.transform}
+            annotations={state.annotations}
+            cropArea={state.cropArea}
+            onUpdate={handleAnnotationsChange}
+            onClose={() => state.mode = null}
+            onViewportChange={handleViewportChange}
+          />
         {/if}
 
         {#if state.mode === 'adjust'}

package/dist/components/Toolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { Crop, Download, SlidersHorizontal, Sparkles, Droplet, Sticker } from 'lucide-svelte';
+import { Crop, Download, SlidersHorizontal, Sparkles, Droplet, Sticker, PenLine } from 'lucide-svelte';
 let { mode, hasImage, isStandalone = false, onModeChange, } = $props();
 </script>
 
@@ -59,6 +59,17 @@ let { mode, hasImage, isStandalone = false, onModeChange, } = $props();
     <span>{$_('editor.stamp')}</span>
   </button>
 
+  <button
+    class="toolbar-btn"
+    class:active={mode === 'annotate'}
+    disabled={!hasImage}
+    onclick={() => onModeChange('annotate')}
+    title={$_('toolbar.annotate')}
+  >
+    <PenLine size={20} />
+    <span>{$_('editor.annotate')}</span>
+  </button>
+
   {#if isStandalone}
     <button
       class="toolbar-btn"

package/dist/i18n/locales/en.json

@@ -8,6 +8,7 @@
     "filter": "Filter",
     "blur": "Blur",
     "stamp": "Stamp",
+    "annotate": "Annotate",
     "none": "None",
     "flip": "Flip",
     "flipHorizontal": "Flip Horizontal",
@@ -37,6 +38,7 @@
     "filter": "Filters",
     "blur": "Blur Tool",
     "stamp": "Stamp Tool",
+    "annotate": "Annotation Tool",
     "export": "Export Image",
     "undo": "Undo (Ctrl+Z)",
     "redo": "Redo (Ctrl+Shift+Z)"
@@ -75,5 +77,16 @@
   "blur": {
     "strength": "Blur Strength",
     "hint": "Drag on the image to create a blur area. Click on an existing area to edit it."
+  },
+  "annotate": {
+    "tool": "Tool",
+    "pen": "Pen",
+    "eraser": "Eraser",
+    "arrow": "Arrow",
+    "rectangle": "Rectangle",
+    "color": "Color",
+    "strokeWidth": "Stroke Width",
+    "shadow": "Shadow",
+    "clearAll": "Clear All"
   }
 }

package/dist/i18n/locales/ja.json

@@ -8,6 +8,7 @@
     "filter": "フィルター",
     "blur": "ぼかし",
     "stamp": "スタンプ",
+    "annotate": "ペン",
     "none": "なし",
     "flip": "反転",
     "flipHorizontal": "左右反転",
@@ -37,6 +38,7 @@
     "filter": "フィルター",
     "blur": "ぼかしツール",
     "stamp": "スタンプツール",
+    "annotate": "アノテーションツール",
     "export": "画像をエクスポート",
     "undo": "元に戻す (Ctrl+Z)",
     "redo": "やり直す (Ctrl+Shift+Z)"
@@ -75,5 +77,16 @@
   "blur": {
     "strength": "ぼかしの強さ",
     "hint": "画像上をドラッグしてぼかし領域を作成します。既存の領域をクリックすると編集できます。"
+  },
+  "annotate": {
+    "tool": "ツール",
+    "pen": "ペン",
+    "eraser": "消しゴム",
+    "arrow": "矢印",
+    "rectangle": "四角形",
+    "color": "色",
+    "strokeWidth": "線の太さ",
+    "shadow": "影",
+    "clearAll": "すべて消去"
   }
 }

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type EditorMode = 'crop' | 'rotate' | 'adjust' | 'filter' | 'blur' | 'stamp' | 'export' | null;
+export type EditorMode = 'crop' | 'rotate' | 'adjust' | 'filter' | 'blur' | 'stamp' | 'annotate' | 'export' | null;
 export interface ImageData {
     original: HTMLImageElement | null;
     current: HTMLImageElement | null;
@@ -37,6 +37,19 @@ export interface StampArea {
     stampType: StampType;
     stampContent: string;
 }
+export type AnnotationType = 'pen' | 'arrow' | 'rectangle';
+export interface AnnotationPoint {
+    x: number;
+    y: number;
+}
+export interface Annotation {
+    id: string;
+    type: AnnotationType;
+    color: string;
+    strokeWidth: number;
+    points: AnnotationPoint[];
+    shadow: boolean;
+}
 export interface TransformState {
     rotation: number;
     flipHorizontal: boolean;
@@ -79,6 +92,7 @@ export interface HistorySnapshot {
     viewport: Viewport;
     blurAreas: BlurArea[];
     stampAreas: StampArea[];
+    annotations: Annotation[];
 }
 export interface EditorHistory {
     past: HistorySnapshot[];
@@ -96,4 +110,5 @@ export interface EditorState {
     history: EditorHistory;
     blurAreas: BlurArea[];
     stampAreas: StampArea[];
+    annotations: Annotation[];
 }

package/dist/utils/canvas.d.ts

@@ -1,17 +1,17 @@
-import type { CropArea, TransformState, ExportOptions, Viewport, AdjustmentsState, BlurArea, StampArea } from '../types';
+import type { CropArea, TransformState, ExportOptions, Viewport, AdjustmentsState, BlurArea, StampArea, Annotation } from '../types';
 export declare function preloadStampImage(url: string): Promise<HTMLImageElement>;
 export declare function getStampImage(url: string): HTMLImageElement | null;
 export declare function loadImage(file: File): Promise<HTMLImageElement>;
 export declare function calculateFitScale(imageWidth: number, imageHeight: number, canvasWidth: number, canvasHeight: number): number;
-export declare function drawImage(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): Promise<void>;
+export declare function drawImage(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[], annotations?: Annotation[]): Promise<void>;
 export declare function exportCanvas(canvas: HTMLCanvasElement, options: ExportOptions): string;
 export declare function downloadImage(dataUrl: string, filename: string): void;
-export declare function applyTransform(img: HTMLImageElement, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): Promise<HTMLCanvasElement>;
+export declare function applyTransform(img: HTMLImageElement, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[], annotations?: Annotation[]): Promise<HTMLCanvasElement>;
 /**
  * Apply all transformations and export using WebGPU (when available)
  * Falls back to Canvas2D if WebGPU is not supported
  */
-export declare function applyTransformWithWebGPU(img: HTMLImageElement, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): Promise<HTMLCanvasElement>;
+export declare function applyTransformWithWebGPU(img: HTMLImageElement, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[], annotations?: Annotation[]): Promise<HTMLCanvasElement>;
 export declare function screenToImageCoords(screenX: number, screenY: number, canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, transform: TransformState): {
     x: number;
     y: number;
@@ -33,3 +33,8 @@ export declare function applyBlurAreas(canvas: HTMLCanvasElement, img: HTMLImage
  * Apply stamp decorations to the canvas
  */
 export declare function applyStamps(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, stampAreas: StampArea[], cropArea?: CropArea | null): void;
+/**
+ * Apply annotation drawings to the canvas
+ * Supports pen strokes, arrows, and rectangles
+ */
+export declare function applyAnnotations(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, annotations: Annotation[], cropArea?: CropArea | null): void;

package/dist/utils/canvas.js

@@ -42,7 +42,7 @@ export function calculateFitScale(imageWidth, imageHeight, canvasWidth, canvasHe
     const scaleY = canvasHeight / imageHeight;
     return Math.min(scaleX, scaleY, 1); // Don't scale up, only down
 }
-export async function drawImage(canvas, img, viewport, transform, adjustments, cropArea, blurAreas, stampAreas) {
+export async function drawImage(canvas, img, viewport, transform, adjustments, cropArea, blurAreas, stampAreas, annotations) {
     const ctx = canvas.getContext('2d');
     if (!ctx)
         return;
@@ -83,6 +83,10 @@ export async function drawImage(canvas, img, viewport, transform, adjustments, c
     if (stampAreas && stampAreas.length > 0) {
         applyStamps(canvas, img, viewport, stampAreas, cropArea);
     }
+    // Apply annotations
+    if (annotations && annotations.length > 0) {
+        applyAnnotations(canvas, img, viewport, annotations, cropArea);
+    }
 }
 export function exportCanvas(canvas, options) {
     if (options.format === 'jpeg') {
@@ -96,7 +100,7 @@ export function downloadImage(dataUrl, filename) {
     link.href = dataUrl;
     link.click();
 }
-export async function applyTransform(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = []) {
+export async function applyTransform(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = [], annotations = []) {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     if (!ctx)
@@ -139,22 +143,26 @@ export async function applyTransform(img, transform, adjustments, cropArea = nul
     if (stampAreas.length > 0) {
         applyStamps(canvas, img, exportViewport, stampAreas, cropArea);
     }
+    // Apply annotations for export
+    if (annotations.length > 0) {
+        applyAnnotations(canvas, img, exportViewport, annotations, cropArea);
+    }
     return canvas;
 }
 /**
  * Apply all transformations and export using WebGPU (when available)
  * Falls back to Canvas2D if WebGPU is not supported
  */
-export async function applyTransformWithWebGPU(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = []) {
+export async function applyTransformWithWebGPU(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = [], annotations = []) {
     // Try WebGPU export first
     if (navigator.gpu) {
         try {
             const { exportWithWebGPU } = await import('./webgpu-render');
             const webgpuCanvas = await exportWithWebGPU(img, adjustments, transform, cropArea, blurAreas);
             if (webgpuCanvas) {
-                // Apply stamps on top (WebGPU doesn't handle stamps yet)
-                if (stampAreas.length > 0) {
-                    // Create a new Canvas2D to composite WebGPU result + stamps
+                // Apply stamps and annotations on top (WebGPU doesn't handle these yet)
+                if (stampAreas.length > 0 || annotations.length > 0) {
+                    // Create a new Canvas2D to composite WebGPU result + stamps + annotations
                     const finalCanvas = document.createElement('canvas');
                     finalCanvas.width = webgpuCanvas.width;
                     finalCanvas.height = webgpuCanvas.height;
@@ -169,7 +177,12 @@ export async function applyTransformWithWebGPU(img, transform, adjustments, crop
                             offsetY: 0,
                             scale: 1
                         };
-                        applyStamps(finalCanvas, img, exportViewport, stampAreas, cropArea);
+                        if (stampAreas.length > 0) {
+                            applyStamps(finalCanvas, img, exportViewport, stampAreas, cropArea);
+                        }
+                        if (annotations.length > 0) {
+                            applyAnnotations(finalCanvas, img, exportViewport, annotations, cropArea);
+                        }
                         return finalCanvas;
                     }
                 }
@@ -181,7 +194,7 @@ export async function applyTransformWithWebGPU(img, transform, adjustments, crop
         }
     }
     // Fallback to Canvas2D
-    return applyTransform(img, transform, adjustments, cropArea, blurAreas, stampAreas);
+    return applyTransform(img, transform, adjustments, cropArea, blurAreas, stampAreas, annotations);
 }
 export function screenToImageCoords(screenX, screenY, canvas, img, viewport, transform) {
     const rect = canvas.getBoundingClientRect();
@@ -334,3 +347,122 @@ export function applyStamps(canvas, img, viewport, stampAreas, cropArea) {
         ctx.restore();
     });
 }
+/**
+ * Apply annotation drawings to the canvas
+ * Supports pen strokes, arrows, and rectangles
+ */
+export function applyAnnotations(canvas, img, viewport, annotations, cropArea) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const totalScale = viewport.scale * viewport.zoom;
+    // Determine source dimensions based on crop
+    const sourceWidth = cropArea ? cropArea.width : img.width;
+    const sourceHeight = cropArea ? cropArea.height : img.height;
+    const offsetX = cropArea ? cropArea.x : 0;
+    const offsetY = cropArea ? cropArea.y : 0;
+    // Helper to convert image coords to canvas coords
+    const toCanvasCoords = (x, y) => {
+        const relativeX = x - offsetX;
+        const relativeY = y - offsetY;
+        return {
+            x: (relativeX - sourceWidth / 2) * totalScale + centerX + viewport.offsetX,
+            y: (relativeY - sourceHeight / 2) * totalScale + centerY + viewport.offsetY
+        };
+    };
+    annotations.forEach(annotation => {
+        if (annotation.points.length === 0)
+            return;
+        ctx.save();
+        ctx.strokeStyle = annotation.color;
+        ctx.fillStyle = annotation.color;
+        ctx.lineWidth = annotation.strokeWidth * totalScale;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        // Apply shadow if enabled
+        if (annotation.shadow) {
+            ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+            ctx.shadowBlur = 6;
+            ctx.shadowOffsetX = 3;
+            ctx.shadowOffsetY = 3;
+        }
+        if (annotation.type === 'pen') {
+            // Draw pen stroke with smooth curves
+            const points = annotation.points.map(p => toCanvasCoords(p.x, p.y));
+            if (points.length === 0)
+                return;
+            ctx.beginPath();
+            ctx.moveTo(points[0].x, points[0].y);
+            if (points.length === 1) {
+                // Single point - just a dot
+                ctx.lineTo(points[0].x, points[0].y);
+            }
+            else if (points.length === 2) {
+                // Two points - straight line
+                ctx.lineTo(points[1].x, points[1].y);
+            }
+            else {
+                // Use quadratic bezier curves for smooth lines
+                for (let i = 1; i < points.length - 1; i++) {
+                    const prev = points[i - 1];
+                    const curr = points[i];
+                    const next = points[i + 1];
+                    if (i === 1) {
+                        // First segment: line to first midpoint
+                        const firstMidX = (prev.x + curr.x) / 2;
+                        const firstMidY = (prev.y + curr.y) / 2;
+                        ctx.lineTo(firstMidX, firstMidY);
+                    }
+                    // Calculate end point (midpoint between current and next)
+                    const endX = (curr.x + next.x) / 2;
+                    const endY = (curr.y + next.y) / 2;
+                    // Quadratic bezier curve with current point as control point
+                    ctx.quadraticCurveTo(curr.x, curr.y, endX, endY);
+                }
+                // Final segment to last point
+                const lastPoint = points[points.length - 1];
+                ctx.lineTo(lastPoint.x, lastPoint.y);
+            }
+            ctx.stroke();
+        }
+        else if (annotation.type === 'arrow' && annotation.points.length >= 2) {
+            // Draw arrow
+            const start = toCanvasCoords(annotation.points[0].x, annotation.points[0].y);
+            const end = toCanvasCoords(annotation.points[1].x, annotation.points[1].y);
+            const angle = Math.atan2(end.y - start.y, end.x - start.x);
+            const scaledStroke = annotation.strokeWidth * totalScale;
+            const headLength = scaledStroke * 3;
+            const headWidth = scaledStroke * 2;
+            // Draw line (shortened to not overlap with arrowhead)
+            const lineEndX = end.x - headLength * 0.7 * Math.cos(angle);
+            const lineEndY = end.y - headLength * 0.7 * Math.sin(angle);
+            ctx.beginPath();
+            ctx.moveTo(start.x, start.y);
+            ctx.lineTo(lineEndX, lineEndY);
+            ctx.stroke();
+            // Draw arrowhead
+            ctx.beginPath();
+            ctx.moveTo(end.x, end.y);
+            ctx.lineTo(end.x - headLength * Math.cos(angle) + headWidth * Math.sin(angle), end.y - headLength * Math.sin(angle) - headWidth * Math.cos(angle));
+            ctx.lineTo(end.x - headLength * Math.cos(angle) - headWidth * Math.sin(angle), end.y - headLength * Math.sin(angle) + headWidth * Math.cos(angle));
+            ctx.closePath();
+            ctx.fill();
+        }
+        else if (annotation.type === 'rectangle' && annotation.points.length >= 2) {
+            // Draw rounded rectangle
+            const start = toCanvasCoords(annotation.points[0].x, annotation.points[0].y);
+            const end = toCanvasCoords(annotation.points[1].x, annotation.points[1].y);
+            const rectX = Math.min(start.x, end.x);
+            const rectY = Math.min(start.y, end.y);
+            const rectWidth = Math.abs(end.x - start.x);
+            const rectHeight = Math.abs(end.y - start.y);
+            const cornerRadius = annotation.strokeWidth * totalScale * 1.5;
+            ctx.beginPath();
+            ctx.roundRect(rectX, rectY, rectWidth, rectHeight, cornerRadius);
+            ctx.stroke();
+        }
+        ctx.restore();
+    });
+}

package/dist/utils/history.d.ts

@@ -1,7 +1,7 @@
 import type { HistorySnapshot, EditorHistory } from '../types';
 export declare const MAX_HISTORY_SIZE = 50;
 export declare function createEmptyHistory(): EditorHistory;
-export declare function createSnapshot(cropArea: any, transform: any, adjustments: any, viewport: any, blurAreas?: any[], stampAreas?: any[]): HistorySnapshot;
+export declare function createSnapshot(cropArea: any, transform: any, adjustments: any, viewport: any, blurAreas?: any[], stampAreas?: any[], annotations?: any[]): HistorySnapshot;
 export declare function addToHistory(history: EditorHistory, snapshot: HistorySnapshot): EditorHistory;
 export declare function undo(history: EditorHistory): {
     history: EditorHistory;

package/dist/utils/history.js

@@ -7,14 +7,18 @@ export function createEmptyHistory() {
         future: []
     };
 }
-export function createSnapshot(cropArea, transform, adjustments, viewport, blurAreas = [], stampAreas = []) {
+export function createSnapshot(cropArea, transform, adjustments, viewport, blurAreas = [], stampAreas = [], annotations = []) {
     return {
         cropArea: cropArea ? { ...cropArea } : null,
         transform: { ...transform },
         adjustments: { ...adjustments },
         viewport: { ...viewport },
         blurAreas: blurAreas.map(area => ({ ...area })),
-        stampAreas: stampAreas.map(area => ({ ...area }))
+        stampAreas: stampAreas.map(area => ({ ...area })),
+        annotations: annotations.map(annotation => ({
+            ...annotation,
+            points: annotation.points.map((p) => ({ ...p }))
+        }))
     };
 }
 export function addToHistory(history, snapshot) {

package/package.json

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

package/dist/shaders/blur.wgsl

@@ -1,59 +0,0 @@
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) uv: vec2<f32>,
-};
-
-struct BlurUniforms {
-  direction: vec2<f32>,  // (1, 0) for horizontal, (0, 1) for vertical
-  radius: f32,
-  padding: f32,
-};
-
-@group(0) @binding(0) var mySampler: sampler;
-@group(0) @binding(1) var myTexture: texture_2d<f32>;
-@group(0) @binding(2) var<uniform> blur: BlurUniforms;
-
-@vertex
-fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
-  var pos = array<vec2<f32>, 3>(
-    vec2<f32>(-1.0, -1.0),
-    vec2<f32>( 3.0, -1.0),
-    vec2<f32>(-1.0,  3.0)
-  );
-  var output: VertexOutput;
-  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
-  // Convert NDC to UV with Y-flip (NDC bottom-left maps to UV top-left)
-  let uv = pos[VertexIndex] * 0.5 + 0.5;
-  output.uv = vec2<f32>(uv.x, 1.0 - uv.y);
-  return output;
-}
-
-@fragment
-fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  let r = i32(blur.radius);
-
-  // Pass-through if radius is 0
-  if (r == 0) {
-    return textureSample(myTexture, mySampler, uv);
-  }
-
-  let texSize = vec2<f32>(textureDimensions(myTexture));
-  let texelSize = 1.0 / texSize;
-
-  // Gaussian blur weights (for radius up to 10)
-  // Pre-normalized weights for different radii
-  var color = vec4<f32>(0.0);
-
-  // Simple box blur for now (equal weights)
-  // TODO: Use proper Gaussian weights
-  let totalSamples = f32(r * 2 + 1);
-
-  // Sample along the blur direction
-  for (var i = -r; i <= r; i = i + 1) {
-    let offset = vec2<f32>(f32(i)) * blur.direction * texelSize;
-    let sampleUV = uv + offset;
-    color = color + textureSample(myTexture, mySampler, sampleUV) / totalSamples;
-  }
-
-  return color;
-}