tokimeki-image-editor 0.2.4 → 0.2.6

package/dist/components/AnnotationTool.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
 import { screenToImageCoords } from '../utils/canvas';
-import { Pencil, Eraser, ArrowRight, Square } from 'lucide-svelte';
+import { Pencil, Eraser, ArrowRight, Square, Brush } from 'lucide-svelte';
 import ToolPanel from './ToolPanel.svelte';
-let { canvas, image, viewport, transform, annotations, cropArea, onUpdate, onClose, onViewportChange } = $props();
+let { canvas, image, viewport, transform, annotations, cropArea, initialStrokeWidth, initialColor, onUpdate, onClose, onViewportChange } = $props();
 let containerElement = $state(null);
 // Tool settings
 let currentTool = $state('pen');
-let currentColor = $state('#FF6B6B');
-let strokeWidth = $state(10);
+let currentColor = $state(initialColor ?? '#FF6B6B');
+let strokeWidth = $state(initialStrokeWidth ?? 10);
 let shadowEnabled = $state(false);
 // Preset colors - modern bright tones
 const colorPresets = ['#FF6B6B', '#FFA94D', '#FFD93D', '#6BCB77', '#4D96FF', '#9B72F2', '#F8F9FA', '#495057'];
 // Drawing state
 let isDrawing = $state(false);
 let currentAnnotation = $state(null);
+// Brush state for speed-based width calculation
+let lastPointTime = $state(0);
+let lastPointPos = $state(null);
+let recentSpeeds = $state([]); // Track recent speeds for exit stroke analysis
+let strokeStartTime = $state(0); // Track when stroke started
 // Panning state (Space + drag on desktop, 2-finger drag on mobile)
 let isSpaceHeld = $state(false);
 let isPanning = $state(false);
@@ -152,6 +157,25 @@ function handleMouseDown(event) {
             shadow: shadowEnabled
         };
     }
+    else if (currentTool === 'brush') {
+        // Initialize brush with time tracking for speed-based width
+        const now = performance.now();
+        lastPointTime = now;
+        strokeStartTime = now;
+        lastPointPos = { x: imagePoint.x, y: imagePoint.y };
+        recentSpeeds = [];
+        // Start with a very thin width (entry stroke - 入り)
+        // This creates the characteristic thin entry of calligraphy
+        const initialWidth = strokeWidth * 0.15;
+        currentAnnotation = {
+            id: `annotation-${Date.now()}`,
+            type: 'brush',
+            color: currentColor,
+            strokeWidth: strokeWidth,
+            points: [{ ...imagePoint, width: initialWidth }],
+            shadow: shadowEnabled
+        };
+    }
     else if (currentTool === 'arrow' || currentTool === 'rectangle') {
         currentAnnotation = {
             id: `annotation-${Date.now()}`,
@@ -199,6 +223,56 @@ function handleMouseMove(event) {
             };
         }
     }
+    else if (currentTool === 'brush') {
+        // Calculate speed-based width for brush
+        const now = performance.now();
+        const timeDelta = now - lastPointTime;
+        const strokeAge = now - strokeStartTime; // How long since stroke started
+        if (lastPointPos && timeDelta > 0) {
+            const dx = imagePoint.x - lastPointPos.x;
+            const dy = imagePoint.y - lastPointPos.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            // Calculate speed (pixels per millisecond)
+            const speed = distance / timeDelta;
+            // Adaptive minimum distance: slower drawing requires larger gaps to reduce zigzag
+            // Fast drawing (speed > 0.5): use smaller threshold for detail
+            // Slow drawing (speed < 0.2): use larger threshold to prevent zigzag
+            const baseMinDistance = MIN_POINT_DISTANCE;
+            const slowSpeedFactor = Math.max(0, 1 - speed * 2); // 1 at speed=0, 0 at speed>=0.5
+            const adaptiveMinDistance = baseMinDistance * (1 + slowSpeedFactor * 2); // 1x to 3x base distance
+            if (distance >= adaptiveMinDistance) {
+                // Track recent speeds for exit stroke analysis (とめ/はね detection)
+                recentSpeeds = [...recentSpeeds.slice(-9), speed];
+                // Map speed to width: faster = thinner, slower = thicker
+                const minWidth = strokeWidth * 0.2;
+                const maxWidth = strokeWidth * 2.5;
+                // Inverse relationship: high speed = low width
+                // Use exponential decay for more natural feel
+                const speedFactor = Math.exp(-speed * 2.5);
+                let targetWidth = minWidth + (maxWidth - minWidth) * speedFactor;
+                // Entry stroke enhancement (入り): gradually increase width for first ~100ms
+                // This creates smoother entry
+                if (strokeAge < 150) {
+                    const entryFactor = Math.min(1, strokeAge / 150);
+                    // Use easing function for smooth entry
+                    const easedEntry = 1 - Math.pow(1 - entryFactor, 3); // Cubic ease-out
+                    const entryMinWidth = strokeWidth * 0.15;
+                    targetWidth = entryMinWidth + (targetWidth - entryMinWidth) * easedEntry;
+                }
+                // Smooth width transition - use stronger smoothing for slow drawing
+                // This prevents rapid width changes that cause zigzag
+                const lastWidth = currentAnnotation.points[currentAnnotation.points.length - 1].width || strokeWidth;
+                const smoothingFactor = 0.3 + slowSpeedFactor * 0.4; // 0.3 (fast) to 0.7 (slow)
+                const smoothedWidth = lastWidth * (1 - smoothingFactor) + targetWidth * smoothingFactor;
+                currentAnnotation = {
+                    ...currentAnnotation,
+                    points: [...currentAnnotation.points, { ...imagePoint, width: smoothedWidth }]
+                };
+                lastPointTime = now;
+                lastPointPos = { x: imagePoint.x, y: imagePoint.y };
+            }
+        }
+    }
     else if (currentTool === 'arrow' || currentTool === 'rectangle') {
         currentAnnotation = {
             ...currentAnnotation,
@@ -217,11 +291,73 @@ function handleMouseUp(event) {
         isDrawing = false;
         return;
     }
+    // Apply exit stroke (抜き) for brush - differentiate とめ (tome) vs はね (hane)
+    if (currentAnnotation.type === 'brush' && currentAnnotation.points.length >= 2) {
+        const points = [...currentAnnotation.points];
+        // Analyze exit velocity to determine stroke ending type
+        // とめ (tome): slow ending = deliberate stop, maintain width
+        // はね (hane): fast ending = flicking motion, taper sharply
+        const avgExitSpeed = recentSpeeds.length > 0
+            ? recentSpeeds.reduce((a, b) => a + b, 0) / recentSpeeds.length
+            : 0.5;
+        // Speed threshold: below = とめ, above = はね
+        // Typical speeds: 0.1-0.3 (slow), 0.3-0.8 (medium), 0.8+ (fast)
+        const isHane = avgExitSpeed > 0.5; // Fast exit = はね
+        const isTome = avgExitSpeed < 0.25; // Slow exit = とめ
+        if (isTome) {
+            // とめ (stopping stroke): maintain width at the end, slight rounding
+            // Apply minimal tapering to create a deliberate stop appearance
+            const taperCount = Math.min(2, Math.floor(points.length * 0.15));
+            for (let i = 0; i < taperCount; i++) {
+                const idx = points.length - 1 - i;
+                if (idx >= 0 && points[idx].width !== undefined) {
+                    const taperFactor = (i + 1) / (taperCount + 1);
+                    // Very subtle taper - maintain most of the width
+                    points[idx] = {
+                        ...points[idx],
+                        width: points[idx].width * (1 - taperFactor * 0.2)
+                    };
+                }
+            }
+        }
+        else if (isHane) {
+            // はね (flicking stroke): sharp taper for dynamic flick appearance
+            const taperCount = Math.min(8, Math.floor(points.length * 0.4));
+            for (let i = 0; i < taperCount; i++) {
+                const idx = points.length - 1 - i;
+                if (idx >= 0 && points[idx].width !== undefined) {
+                    const taperFactor = (i + 1) / taperCount;
+                    // Strong taper with exponential curve for sharp flick
+                    const easedTaper = Math.pow(taperFactor, 1.5);
+                    points[idx] = {
+                        ...points[idx],
+                        width: points[idx].width * (1 - easedTaper * 0.9)
+                    };
+                }
+            }
+        }
+        else {
+            // Medium speed: normal taper
+            const taperCount = Math.min(5, Math.floor(points.length * 0.3));
+            for (let i = 0; i < taperCount; i++) {
+                const idx = points.length - 1 - i;
+                if (idx >= 0 && points[idx].width !== undefined) {
+                    const taperFactor = (i + 1) / taperCount;
+                    points[idx] = {
+                        ...points[idx],
+                        width: points[idx].width * (1 - taperFactor * 0.6)
+                    };
+                }
+            }
+        }
+        currentAnnotation = { ...currentAnnotation, points };
+    }
     // Only save if annotation has enough points
     if (currentAnnotation.points.length >= 2 ||
-        (currentAnnotation.type === 'pen' && currentAnnotation.points.length >= 1)) {
+        (currentAnnotation.type === 'pen' && currentAnnotation.points.length >= 1) ||
+        (currentAnnotation.type === 'brush' && currentAnnotation.points.length >= 1)) {
         // For arrow/rectangle, ensure start and end are different
-        if (currentAnnotation.type !== 'pen') {
+        if (currentAnnotation.type !== 'pen' && currentAnnotation.type !== 'brush') {
             const start = currentAnnotation.points[0];
             const end = currentAnnotation.points[1];
             const distance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
@@ -235,6 +371,10 @@ function handleMouseUp(event) {
     }
     isDrawing = false;
     currentAnnotation = null;
+    lastPointTime = 0;
+    lastPointPos = null;
+    recentSpeeds = [];
+    strokeStartTime = 0;
 }
 function findAnnotationAtPoint(canvasX, canvasY) {
     const hitRadius = 10;
@@ -398,11 +538,216 @@ function generateSmoothPath(points) {
     path += ` L ${lastPoint.x} ${lastPoint.y}`;
     return path;
 }
-// Get current annotation canvas coordinates
+// Smooth a series of points using moving average
+function smoothPoints(points, windowSize = 3) {
+    if (points.length < 3)
+        return points;
+    const result = [];
+    const halfWindow = Math.floor(windowSize / 2);
+    for (let i = 0; i < points.length; i++) {
+        // Keep first and last points unchanged for proper shape
+        if (i < halfWindow || i >= points.length - halfWindow) {
+            result.push(points[i]);
+            continue;
+        }
+        let sumX = 0, sumY = 0, count = 0;
+        for (let j = -halfWindow; j <= halfWindow; j++) {
+            const idx = i + j;
+            if (idx >= 0 && idx < points.length) {
+                sumX += points[idx].x;
+                sumY += points[idx].y;
+                count++;
+            }
+        }
+        result.push({ x: sumX / count, y: sumY / count });
+    }
+    return result;
+}
+// Interpolate points for smoother brush strokes
+function interpolateBrushPoints(points) {
+    if (points.length < 2)
+        return points;
+    const result = [];
+    for (let i = 0; i < points.length - 1; i++) {
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const dist = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+        result.push(p1);
+        // Add interpolated points if distance is large
+        const interpolateCount = Math.floor(dist / 5); // Add point every 5 pixels
+        for (let j = 1; j < interpolateCount; j++) {
+            const t = j / interpolateCount;
+            // Use smoothstep for width interpolation
+            const smoothT = t * t * (3 - 2 * t);
+            result.push({
+                x: p1.x + (p2.x - p1.x) * t,
+                y: p1.y + (p2.y - p1.y) * t,
+                width: p1.width !== undefined && p2.width !== undefined
+                    ? p1.width + (p2.width - p1.width) * smoothT
+                    : undefined
+            });
+        }
+    }
+    result.push(points[points.length - 1]);
+    return result;
+}
+// Generate a filled SVG path for variable-width brush strokes
+function generateBrushPath(points, baseWidth, scale) {
+    // Handle single point - create an elliptical brush mark (点)
+    if (points.length === 1) {
+        const p = points[0];
+        const width = ((p.width ?? baseWidth) * scale) / 2;
+        // Create a slightly elongated ellipse for brush-like appearance
+        const rx = width * 0.8;
+        const ry = width * 1.2;
+        return `M ${p.x} ${p.y - ry}
+              C ${p.x + rx * 0.55} ${p.y - ry} ${p.x + rx} ${p.y - ry * 0.55} ${p.x + rx} ${p.y}
+              C ${p.x + rx} ${p.y + ry * 0.55} ${p.x + rx * 0.55} ${p.y + ry} ${p.x} ${p.y + ry}
+              C ${p.x - rx * 0.55} ${p.y + ry} ${p.x - rx} ${p.y + ry * 0.55} ${p.x - rx} ${p.y}
+              C ${p.x - rx} ${p.y - ry * 0.55} ${p.x - rx * 0.55} ${p.y - ry} ${p.x} ${p.y - ry} Z`;
+    }
+    // Handle 2 points - create a teardrop/brush stroke shape
+    if (points.length === 2) {
+        const p1 = points[0];
+        const p2 = points[1];
+        const w1 = ((p1.width ?? baseWidth * 0.3) * scale) / 2;
+        const w2 = ((p2.width ?? baseWidth * 0.5) * scale) / 2;
+        // Direction vector
+        const dx = p2.x - p1.x;
+        const dy = p2.y - p1.y;
+        const len = Math.sqrt(dx * dx + dy * dy);
+        if (len === 0)
+            return '';
+        // Perpendicular
+        const nx = -dy / len;
+        const ny = dx / len;
+        // Create teardrop shape
+        const startLeft = { x: p1.x + nx * w1, y: p1.y + ny * w1 };
+        const startRight = { x: p1.x - nx * w1, y: p1.y - ny * w1 };
+        const endLeft = { x: p2.x + nx * w2, y: p2.y + ny * w2 };
+        const endRight = { x: p2.x - nx * w2, y: p2.y - ny * w2 };
+        // Extend the tip slightly for brush-like appearance
+        const tipExtend = w2 * 0.3;
+        const tipX = p2.x + (dx / len) * tipExtend;
+        const tipY = p2.y + (dy / len) * tipExtend;
+        return `M ${startLeft.x} ${startLeft.y}
+              Q ${(startLeft.x + endLeft.x) / 2 + nx * w2 * 0.3} ${(startLeft.y + endLeft.y) / 2 + ny * w2 * 0.3} ${endLeft.x} ${endLeft.y}
+              Q ${tipX + nx * w2 * 0.2} ${tipY + ny * w2 * 0.2} ${tipX} ${tipY}
+              Q ${tipX - nx * w2 * 0.2} ${tipY - ny * w2 * 0.2} ${endRight.x} ${endRight.y}
+              Q ${(startRight.x + endRight.x) / 2 - nx * w2 * 0.3} ${(startRight.y + endRight.y) / 2 - ny * w2 * 0.3} ${startRight.x} ${startRight.y}
+              Z`;
+    }
+    // For 3+ points, interpolate for smoother curves
+    const interpolated = interpolateBrushPoints(points);
+    let leftSide = [];
+    let rightSide = [];
+    for (let i = 0; i < interpolated.length; i++) {
+        const curr = interpolated[i];
+        const width = ((curr.width ?? baseWidth) * scale) / 2;
+        // Calculate direction using central difference when possible
+        let dx, dy;
+        if (i === 0) {
+            dx = interpolated[1].x - curr.x;
+            dy = interpolated[1].y - curr.y;
+        }
+        else if (i === interpolated.length - 1) {
+            dx = curr.x - interpolated[i - 1].x;
+            dy = curr.y - interpolated[i - 1].y;
+        }
+        else {
+            // Use wider window for smoother direction calculation
+            const lookback = Math.min(i, 3);
+            const lookforward = Math.min(interpolated.length - 1 - i, 3);
+            dx = interpolated[i + lookforward].x - interpolated[i - lookback].x;
+            dy = interpolated[i + lookforward].y - interpolated[i - lookback].y;
+        }
+        // Normalize
+        const len = Math.sqrt(dx * dx + dy * dy);
+        if (len === 0)
+            continue;
+        const nx = -dy / len; // Perpendicular
+        const ny = dx / len;
+        leftSide.push({ x: curr.x + nx * width, y: curr.y + ny * width });
+        rightSide.push({ x: curr.x - nx * width, y: curr.y - ny * width });
+    }
+    if (leftSide.length < 2)
+        return '';
+    // Apply smoothing to both sides to reduce zigzag
+    leftSide = smoothPoints(leftSide, 5);
+    rightSide = smoothPoints(rightSide, 5);
+    // Build path: left side forward, right side backward
+    let path = `M ${leftSide[0].x} ${leftSide[0].y}`;
+    // Smooth left side with quadratic curves
+    for (let i = 1; i < leftSide.length - 1; i++) {
+        const curr = leftSide[i];
+        const next = leftSide[i + 1];
+        const endX = (curr.x + next.x) / 2;
+        const endY = (curr.y + next.y) / 2;
+        path += ` Q ${curr.x} ${curr.y} ${endX} ${endY}`;
+    }
+    path += ` L ${leftSide[leftSide.length - 1].x} ${leftSide[leftSide.length - 1].y}`;
+    // End cap - smooth connection at stroke tip
+    const lastLeft = leftSide[leftSide.length - 1];
+    const lastRight = rightSide[rightSide.length - 1];
+    const lastPoint = interpolated[interpolated.length - 1];
+    const lastWidth = ((lastPoint.width ?? baseWidth) * scale) / 2;
+    // Create rounded end cap using bezier curve
+    const tipExtend = lastWidth * 0.4;
+    const lastDx = interpolated.length > 1
+        ? interpolated[interpolated.length - 1].x - interpolated[interpolated.length - 2].x
+        : 0;
+    const lastDy = interpolated.length > 1
+        ? interpolated[interpolated.length - 1].y - interpolated[interpolated.length - 2].y
+        : 0;
+    const lastLen = Math.sqrt(lastDx * lastDx + lastDy * lastDy);
+    if (lastLen > 0) {
+        const tipX = lastPoint.x + (lastDx / lastLen) * tipExtend;
+        const tipY = lastPoint.y + (lastDy / lastLen) * tipExtend;
+        path += ` Q ${tipX} ${tipY} ${lastRight.x} ${lastRight.y}`;
+    }
+    else {
+        path += ` L ${lastRight.x} ${lastRight.y}`;
+    }
+    // Smooth right side backward
+    for (let i = rightSide.length - 2; i > 0; i--) {
+        const curr = rightSide[i];
+        const prev = rightSide[i - 1];
+        const endX = (curr.x + prev.x) / 2;
+        const endY = (curr.y + prev.y) / 2;
+        path += ` Q ${curr.x} ${curr.y} ${endX} ${endY}`;
+    }
+    path += ` L ${rightSide[0].x} ${rightSide[0].y}`;
+    // Start cap - smooth connection at stroke start
+    const firstLeft = leftSide[0];
+    const firstRight = rightSide[0];
+    const firstPoint = interpolated[0];
+    const firstWidth = ((firstPoint.width ?? baseWidth) * scale) / 2;
+    const startExtend = firstWidth * 0.3;
+    const firstDx = interpolated.length > 1
+        ? interpolated[0].x - interpolated[1].x
+        : 0;
+    const firstDy = interpolated.length > 1
+        ? interpolated[0].y - interpolated[1].y
+        : 0;
+    const firstLen = Math.sqrt(firstDx * firstDx + firstDy * firstDy);
+    if (firstLen > 0) {
+        const startTipX = firstPoint.x + (firstDx / firstLen) * startExtend;
+        const startTipY = firstPoint.y + (firstDy / firstLen) * startExtend;
+        path += ` Q ${startTipX} ${startTipY} ${firstLeft.x} ${firstLeft.y}`;
+    }
+    path += ' Z'; // Close path
+    return path;
+}
+// Get current annotation canvas coordinates with width data for brush
 let currentAnnotationCanvas = $derived.by(() => {
     if (!currentAnnotation)
         return null;
-    const points = currentAnnotation.points.map(p => toCanvasCoords(p)).filter(Boolean);
+    const points = currentAnnotation.points.map(p => {
+        const canvasCoords = toCanvasCoords(p);
+        if (!canvasCoords)
+            return null;
+        return { ...canvasCoords, width: p.width };
+    }).filter(Boolean);
     return { ...currentAnnotation, canvasPoints: points };
 });
 </script>
@@ -447,6 +792,18 @@ let currentAnnotationCanvas = $derived.by(() => {
           stroke-linejoin="round"
           filter={shadowFilter}
         />
+      {:else if annotation.type === 'brush' && points.length >= 1}
+        {@const brushPoints = annotation.points.map(p => {
+          const canvasCoords = toCanvasCoords(p);
+          if (!canvasCoords) return null;
+          return { ...canvasCoords, width: p.width };
+        }).filter(Boolean) as { x: number; y: number; width?: number }[]}
+        <path
+          d={generateBrushPath(brushPoints, annotation.strokeWidth, totalScale)}
+          fill={annotation.color}
+          stroke="none"
+          filter={shadowFilter}
+        />
       {:else if annotation.type === 'arrow' && points.length >= 2}
         {@const start = points[0]}
         {@const end = points[1]}
@@ -510,6 +867,13 @@ let currentAnnotationCanvas = $derived.by(() => {
           stroke-linejoin="round"
           filter={currentShadowFilter}
         />
+      {:else if currentAnnotationCanvas.type === 'brush' && points.length >= 1}
+        <path
+          d={generateBrushPath(points, currentAnnotationCanvas.strokeWidth, totalScale)}
+          fill={currentAnnotationCanvas.color}
+          stroke="none"
+          filter={currentShadowFilter}
+        />
       {:else if currentAnnotationCanvas.type === 'arrow' && points.length >= 2}
         {@const start = points[0]}
         {@const end = points[1]}
@@ -574,6 +938,14 @@ let currentAnnotationCanvas = $derived.by(() => {
         >
           <Pencil size={20} />
         </button>
+        <button
+          class="tool-btn"
+          class:active={currentTool === 'brush'}
+          onclick={() => currentTool = 'brush'}
+          title={$_('annotate.brush')}
+        >
+          <Brush size={20} />
+        </button>
         <button
           class="tool-btn"
           class:active={currentTool === 'eraser'}
@@ -633,7 +1005,7 @@ let currentAnnotationCanvas = $derived.by(() => {
         id="stroke-width"
         type="range"
         min="5"
-        max="50"
+        max="100"
         bind:value={strokeWidth}
       />
     </div>

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

@@ -6,6 +6,8 @@ interface Props {
     transform: TransformState;
     annotations: Annotation[];
     cropArea?: CropArea | null;
+    initialStrokeWidth?: number;
+    initialColor?: string;
     onUpdate: (annotations: Annotation[]) => void;
     onClose: () => void;
     onViewportChange?: (viewport: Partial<Viewport>) => void;

package/dist/components/ImageEditor.svelte

@@ -13,7 +13,7 @@ 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 { initialImage, initialMode = null, initialStrokeWidth, initialColor, width = 800, height = 600, isStandalone = false, onComplete, onCancel, onExport } = $props();
 let state = $state({
     mode: null,
     imageData: {
@@ -86,6 +86,10 @@ $effect(() => {
                 // Reset history and save initial state
                 state.history = createEmptyHistory();
                 saveToHistory();
+                // Apply initial mode if specified
+                if (initialMode) {
+                    state.mode = initialMode;
+                }
             };
             img.onerror = (error) => {
                 console.error('Failed to load initial image:', error);
@@ -127,6 +131,10 @@ async function handleFileUpload(file) {
         // Reset history and save initial state
         state.history = createEmptyHistory();
         saveToHistory();
+        // Apply initial mode if specified
+        if (initialMode) {
+            state.mode = initialMode;
+        }
     }
     catch (error) {
         console.error('Failed to load image:', error);
@@ -478,6 +486,8 @@ function handleKeyDown(event) {
             transform={state.transform}
             annotations={state.annotations}
             cropArea={state.cropArea}
+            {initialStrokeWidth}
+            {initialColor}
             onUpdate={handleAnnotationsChange}
             onClose={() => state.mode = null}
             onViewportChange={handleViewportChange}

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

@@ -1,6 +1,10 @@
 import '../i18n';
+import type { EditorMode } from '../types';
 interface Props {
     initialImage?: File | string;
+    initialMode?: EditorMode;
+    initialStrokeWidth?: number;
+    initialColor?: string;
     width?: number;
     height?: number;
     isStandalone?: boolean;

package/dist/i18n/locales/en.json

@@ -81,6 +81,7 @@
   "annotate": {
     "tool": "Tool",
     "pen": "Pen",
+    "brush": "Brush",
     "eraser": "Eraser",
     "arrow": "Arrow",
     "rectangle": "Rectangle",

package/dist/i18n/locales/ja.json

@@ -81,6 +81,7 @@
   "annotate": {
     "tool": "ツール",
     "pen": "ペン",
+    "brush": "毛筆",
     "eraser": "消しゴム",
     "arrow": "矢印",
     "rectangle": "四角形",

package/dist/types.d.ts

@@ -37,10 +37,11 @@ export interface StampArea {
     stampType: StampType;
     stampContent: string;
 }
-export type AnnotationType = 'pen' | 'arrow' | 'rectangle';
+export type AnnotationType = 'pen' | 'brush' | 'arrow' | 'rectangle';
 export interface AnnotationPoint {
     x: number;
     y: number;
+    width?: number;
 }
 export interface Annotation {
     id: string;

package/dist/utils/canvas.js

@@ -427,6 +427,184 @@ export function applyAnnotations(canvas, img, viewport, annotations, cropArea) {
             }
             ctx.stroke();
         }
+        else if (annotation.type === 'brush' && annotation.points.length >= 1) {
+            // Draw brush stroke with variable width
+            const rawPoints = annotation.points.map(p => ({
+                ...toCanvasCoords(p.x, p.y),
+                width: p.width ?? annotation.strokeWidth
+            }));
+            // Handle single point - create an elliptical brush mark (点)
+            if (rawPoints.length === 1) {
+                const p = rawPoints[0];
+                const width = (p.width * totalScale) / 2;
+                const rx = width * 0.8;
+                const ry = width * 1.2;
+                ctx.beginPath();
+                ctx.ellipse(p.x, p.y, rx, ry, 0, 0, Math.PI * 2);
+                ctx.fill();
+                // Handle 2 points - create a teardrop/brush stroke shape
+            }
+            else if (rawPoints.length === 2) {
+                const p1 = rawPoints[0];
+                const p2 = rawPoints[1];
+                const w1 = ((p1.width ?? annotation.strokeWidth * 0.3) * totalScale) / 2;
+                const w2 = ((p2.width ?? annotation.strokeWidth * 0.5) * totalScale) / 2;
+                const dx = p2.x - p1.x;
+                const dy = p2.y - p1.y;
+                const len = Math.sqrt(dx * dx + dy * dy);
+                if (len > 0) {
+                    const nx = -dy / len;
+                    const ny = dx / len;
+                    const tipExtend = w2 * 0.3;
+                    const tipX = p2.x + (dx / len) * tipExtend;
+                    const tipY = p2.y + (dy / len) * tipExtend;
+                    ctx.beginPath();
+                    ctx.moveTo(p1.x + nx * w1, p1.y + ny * w1);
+                    ctx.quadraticCurveTo((p1.x + nx * w1 + p2.x + nx * w2) / 2 + nx * w2 * 0.3, (p1.y + ny * w1 + p2.y + ny * w2) / 2 + ny * w2 * 0.3, p2.x + nx * w2, p2.y + ny * w2);
+                    ctx.quadraticCurveTo(tipX + nx * w2 * 0.2, tipY + ny * w2 * 0.2, tipX, tipY);
+                    ctx.quadraticCurveTo(tipX - nx * w2 * 0.2, tipY - ny * w2 * 0.2, p2.x - nx * w2, p2.y - ny * w2);
+                    ctx.quadraticCurveTo((p1.x - nx * w1 + p2.x - nx * w2) / 2 - nx * w2 * 0.3, (p1.y - ny * w1 + p2.y - ny * w2) / 2 - ny * w2 * 0.3, p1.x - nx * w1, p1.y - ny * w1);
+                    ctx.closePath();
+                    ctx.fill();
+                }
+                // Handle 3+ points with interpolation for smoother curves
+            }
+            else {
+                // Interpolate points for smoother curves
+                const interpolated = [];
+                for (let i = 0; i < rawPoints.length - 1; i++) {
+                    const p1 = rawPoints[i];
+                    const p2 = rawPoints[i + 1];
+                    const dist = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+                    interpolated.push(p1);
+                    const interpolateCount = Math.floor(dist / 5);
+                    for (let j = 1; j < interpolateCount; j++) {
+                        const t = j / interpolateCount;
+                        const smoothT = t * t * (3 - 2 * t);
+                        interpolated.push({
+                            x: p1.x + (p2.x - p1.x) * t,
+                            y: p1.y + (p2.y - p1.y) * t,
+                            width: p1.width + (p2.width - p1.width) * smoothT
+                        });
+                    }
+                }
+                interpolated.push(rawPoints[rawPoints.length - 1]);
+                // Generate outline for variable-width path
+                let leftSide = [];
+                let rightSide = [];
+                for (let i = 0; i < interpolated.length; i++) {
+                    const curr = interpolated[i];
+                    const width = (curr.width * totalScale) / 2;
+                    let dx, dy;
+                    if (i === 0) {
+                        dx = interpolated[1].x - curr.x;
+                        dy = interpolated[1].y - curr.y;
+                    }
+                    else if (i === interpolated.length - 1) {
+                        dx = curr.x - interpolated[i - 1].x;
+                        dy = curr.y - interpolated[i - 1].y;
+                    }
+                    else {
+                        const lookback = Math.min(i, 3);
+                        const lookforward = Math.min(interpolated.length - 1 - i, 3);
+                        dx = interpolated[i + lookforward].x - interpolated[i - lookback].x;
+                        dy = interpolated[i + lookforward].y - interpolated[i - lookback].y;
+                    }
+                    const len = Math.sqrt(dx * dx + dy * dy);
+                    if (len === 0)
+                        continue;
+                    const nx = -dy / len;
+                    const ny = dx / len;
+                    leftSide.push({ x: curr.x + nx * width, y: curr.y + ny * width });
+                    rightSide.push({ x: curr.x - nx * width, y: curr.y - ny * width });
+                }
+                // Smooth the outline points to reduce zigzag
+                const smoothOutline = (pts, windowSize = 5) => {
+                    if (pts.length < 3)
+                        return pts;
+                    const result = [];
+                    const halfWindow = Math.floor(windowSize / 2);
+                    for (let i = 0; i < pts.length; i++) {
+                        if (i < halfWindow || i >= pts.length - halfWindow) {
+                            result.push(pts[i]);
+                            continue;
+                        }
+                        let sumX = 0, sumY = 0, count = 0;
+                        for (let j = -halfWindow; j <= halfWindow; j++) {
+                            const idx = i + j;
+                            if (idx >= 0 && idx < pts.length) {
+                                sumX += pts[idx].x;
+                                sumY += pts[idx].y;
+                                count++;
+                            }
+                        }
+                        result.push({ x: sumX / count, y: sumY / count });
+                    }
+                    return result;
+                };
+                leftSide = smoothOutline(leftSide);
+                rightSide = smoothOutline(rightSide);
+                if (leftSide.length >= 2) {
+                    ctx.beginPath();
+                    ctx.moveTo(leftSide[0].x, leftSide[0].y);
+                    // Left side with smooth curves
+                    for (let i = 1; i < leftSide.length - 1; i++) {
+                        const curr = leftSide[i];
+                        const next = leftSide[i + 1];
+                        const endX = (curr.x + next.x) / 2;
+                        const endY = (curr.y + next.y) / 2;
+                        ctx.quadraticCurveTo(curr.x, curr.y, endX, endY);
+                    }
+                    ctx.lineTo(leftSide[leftSide.length - 1].x, leftSide[leftSide.length - 1].y);
+                    // End cap with rounded connection
+                    const lastPoint = interpolated[interpolated.length - 1];
+                    const lastWidth = (lastPoint.width * totalScale) / 2;
+                    const tipExtend = lastWidth * 0.4;
+                    const lastDx = interpolated.length > 1
+                        ? interpolated[interpolated.length - 1].x - interpolated[interpolated.length - 2].x
+                        : 0;
+                    const lastDy = interpolated.length > 1
+                        ? interpolated[interpolated.length - 1].y - interpolated[interpolated.length - 2].y
+                        : 0;
+                    const lastLen = Math.sqrt(lastDx * lastDx + lastDy * lastDy);
+                    if (lastLen > 0) {
+                        const tipX = lastPoint.x + (lastDx / lastLen) * tipExtend;
+                        const tipY = lastPoint.y + (lastDy / lastLen) * tipExtend;
+                        ctx.quadraticCurveTo(tipX, tipY, rightSide[rightSide.length - 1].x, rightSide[rightSide.length - 1].y);
+                    }
+                    else {
+                        ctx.lineTo(rightSide[rightSide.length - 1].x, rightSide[rightSide.length - 1].y);
+                    }
+                    // Right side backward with smooth curves
+                    for (let i = rightSide.length - 2; i > 0; i--) {
+                        const curr = rightSide[i];
+                        const prev = rightSide[i - 1];
+                        const endX = (curr.x + prev.x) / 2;
+                        const endY = (curr.y + prev.y) / 2;
+                        ctx.quadraticCurveTo(curr.x, curr.y, endX, endY);
+                    }
+                    ctx.lineTo(rightSide[0].x, rightSide[0].y);
+                    // Start cap with rounded connection
+                    const firstPoint = interpolated[0];
+                    const firstWidth = (firstPoint.width * totalScale) / 2;
+                    const startExtend = firstWidth * 0.3;
+                    const firstDx = interpolated.length > 1
+                        ? interpolated[0].x - interpolated[1].x
+                        : 0;
+                    const firstDy = interpolated.length > 1
+                        ? interpolated[0].y - interpolated[1].y
+                        : 0;
+                    const firstLen = Math.sqrt(firstDx * firstDx + firstDy * firstDy);
+                    if (firstLen > 0) {
+                        const startTipX = firstPoint.x + (firstDx / firstLen) * startExtend;
+                        const startTipY = firstPoint.y + (firstDy / firstLen) * startExtend;
+                        ctx.quadraticCurveTo(startTipX, startTipY, leftSide[0].x, leftSide[0].y);
+                    }
+                    ctx.closePath();
+                    ctx.fill();
+                }
+            }
+        }
         else if (annotation.type === 'arrow' && annotation.points.length >= 2) {
             // Draw arrow
             const start = toCanvasCoords(annotation.points[0].x, annotation.points[0].y);

package/package.json

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