@plannotator/ui 0.22.0

package/components/ImageAnnotator/Toolbar.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import type { Tool } from './types';
+import { COLORS } from './types';
+
+interface ToolbarProps {
+  tool: Tool;
+  color: string;
+  strokeSize: number;
+  canUndo: boolean;
+  onToolChange: (tool: Tool) => void;
+  onColorChange: (color: string) => void;
+  onStrokeSizeChange: (size: number) => void;
+  onUndo: () => void;
+  onClear: () => void;
+  onSave: () => void;
+}
+
+const PenIcon = () => (
+  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+    <path d="M12 19l7-7 3 3-7 7-3-3z" />
+    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
+    <path d="M2 2l7.586 7.586" />
+    <circle cx="11" cy="11" r="2" />
+  </svg>
+);
+
+const ArrowIcon = () => (
+  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+    <line x1="5" y1="12" x2="19" y2="12" />
+    <polyline points="12 5 19 12 12 19" />
+  </svg>
+);
+
+const CircleIcon = () => (
+  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+    <circle cx="12" cy="12" r="10" />
+  </svg>
+);
+
+const UndoIcon = () => (
+  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+    <path d="M3 7v6h6" />
+    <path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13" />
+  </svg>
+);
+
+const ClearIcon = () => (
+  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+const MinusIcon = () => (
+  <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+    <path d="M5 12h14" />
+  </svg>
+);
+
+const PlusIcon = () => (
+  <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+const TOOLS: { id: Tool; icon: React.FC; label: string }[] = [
+  { id: 'pen', icon: PenIcon, label: 'Pen (1)' },
+  { id: 'arrow', icon: ArrowIcon, label: 'Arrow (2)' },
+  { id: 'circle', icon: CircleIcon, label: 'Circle (3)' },
+];
+
+const STROKE_SIZES = [3, 6, 10, 16, 24];
+
+export const Toolbar: React.FC<ToolbarProps> = ({
+  tool,
+  color,
+  strokeSize,
+  canUndo,
+  onToolChange,
+  onColorChange,
+  onStrokeSizeChange,
+  onUndo,
+  onClear,
+  onSave,
+}) => {
+  const currentSizeIndex = STROKE_SIZES.indexOf(strokeSize);
+  const canDecrease = currentSizeIndex > 0;
+  const canIncrease = currentSizeIndex < STROKE_SIZES.length - 1;
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 bg-popover border border-border rounded-lg shadow-xl">
+      {/* Tools */}
+      <div className="flex items-center gap-1">
+        {TOOLS.map(({ id, icon: Icon, label }) => (
+          <button
+            key={id}
+            type="button"
+            onClick={() => onToolChange(id)}
+            title={label}
+            className={`p-1.5 rounded transition-colors ${
+              tool === id
+                ? 'bg-primary text-primary-foreground'
+                : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            <Icon />
+          </button>
+        ))}
+      </div>
+
+      <div className="w-px h-5 bg-border" />
+
+      {/* Stroke size */}
+      <div className="flex items-center gap-0.5">
+        <button
+          type="button"
+          onClick={() => canDecrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex - 1])}
+          disabled={!canDecrease}
+          title="Smaller stroke"
+          className={`p-1 rounded transition-colors ${
+            canDecrease
+              ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
+              : 'text-muted-foreground/30 cursor-not-allowed'
+          }`}
+        >
+          <MinusIcon />
+        </button>
+        <div
+          className="w-5 h-5 flex items-center justify-center"
+          title={`Stroke size: ${strokeSize}`}
+        >
+          <div
+            className="rounded-full"
+            style={{
+              width: Math.min(strokeSize + 2, 16),
+              height: Math.min(strokeSize + 2, 16),
+              backgroundColor: color,
+            }}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={() => canIncrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex + 1])}
+          disabled={!canIncrease}
+          title="Larger stroke"
+          className={`p-1 rounded transition-colors ${
+            canIncrease
+              ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
+              : 'text-muted-foreground/30 cursor-not-allowed'
+          }`}
+        >
+          <PlusIcon />
+        </button>
+      </div>
+
+      <div className="w-px h-5 bg-border" />
+
+      {/* Colors */}
+      <div className="flex items-center gap-1">
+        {COLORS.map((c) => (
+          <button
+            key={c}
+            type="button"
+            onClick={() => onColorChange(c)}
+            className={`w-5 h-5 rounded-full border-2 transition-transform ${
+              color === c ? 'scale-110 border-foreground' : 'border-transparent hover:scale-105'
+            }`}
+            style={{ backgroundColor: c }}
+          />
+        ))}
+      </div>
+
+      <div className="w-px h-5 bg-border" />
+
+      {/* Undo */}
+      <button
+        type="button"
+        onClick={onUndo}
+        disabled={!canUndo}
+        title="Undo (Cmd+Z)"
+        className={`p-1.5 rounded transition-colors ${
+          canUndo
+            ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
+            : 'text-muted-foreground/30 cursor-not-allowed'
+        }`}
+      >
+        <UndoIcon />
+      </button>
+
+      {/* Clear all */}
+      <button
+        type="button"
+        onClick={onClear}
+        title="Clear all"
+        className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-destructive"
+      >
+        <ClearIcon />
+      </button>
+
+      <div className="w-px h-5 bg-border" />
+
+      {/* Save */}
+      <button
+        type="button"
+        onClick={onSave}
+        title="Save (Esc)"
+        className="p-1.5 rounded transition-colors bg-success text-success-foreground hover:opacity-90"
+      >
+        <CheckIcon />
+      </button>
+    </div>
+  );
+};

package/components/ImageAnnotator/index.tsx

@@ -0,0 +1,272 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { Canvas } from './Canvas';
+import { Toolbar } from './Toolbar';
+import { renderStroke } from './utils';
+import type { Point, Stroke, Tool, AnnotatorState } from './types';
+import { DEFAULT_STATE } from './types';
+
+interface ImageAnnotatorProps {
+  imageSrc: string;
+  isOpen: boolean;
+  onAccept: (blob: Blob, hasDrawings: boolean, name: string) => Promise<void>;
+  onClose: () => void;
+  /** Pre-populated image name (derived from filename) */
+  initialName?: string;
+}
+
+export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
+  imageSrc,
+  isOpen,
+  onAccept,
+  onClose,
+  initialName = '',
+}) => {
+  const [state, setState] = useState<AnnotatorState>(DEFAULT_STATE);
+  const [saving, setSaving] = useState(false);
+  const [name, setName] = useState(initialName);
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      setState(DEFAULT_STATE);
+      setName(initialName);
+    }
+  }, [isOpen, initialName]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't intercept when typing in the name input
+      const target = e.target as HTMLElement;
+      if (target.tagName === 'INPUT') {
+        if (e.key === 'Escape') {
+          // Blur and let the next Escape close
+          target.blur();
+          e.preventDefault();
+        }
+        return;
+      }
+
+      // Escape or Enter to accept
+      if (e.key === 'Escape' || e.key === 'Enter') {
+        e.preventDefault();
+        handleAccept();
+        return;
+      }
+
+      // Cmd+Z to undo
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+        e.preventDefault();
+        handleUndo();
+        return;
+      }
+
+      // 1/2/3 to switch tools
+      if (e.key === '1') setState(s => ({ ...s, tool: 'pen' }));
+      if (e.key === '2') setState(s => ({ ...s, tool: 'arrow' }));
+      if (e.key === '3') setState(s => ({ ...s, tool: 'circle' }));
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, state.strokes]);
+
+  const handleStrokeStart = useCallback((point: Point) => {
+    const id = crypto.randomUUID();
+    setState(s => ({
+      ...s,
+      currentStroke: {
+        id,
+        tool: s.tool,
+        points: [point],
+        color: s.color,
+        size: s.strokeSize,
+      },
+    }));
+  }, []);
+
+  const handleStrokeMove = useCallback((point: Point) => {
+    setState(s => {
+      if (!s.currentStroke) return s;
+      return {
+        ...s,
+        currentStroke: {
+          ...s.currentStroke,
+          points: [...s.currentStroke.points, point],
+        },
+      };
+    });
+  }, []);
+
+  const handleStrokeEnd = useCallback(() => {
+    setState(s => {
+      if (!s.currentStroke || s.currentStroke.points.length < 2) {
+        return { ...s, currentStroke: null };
+      }
+      return {
+        ...s,
+        strokes: [...s.strokes, s.currentStroke],
+        currentStroke: null,
+      };
+    });
+  }, []);
+
+  const handleUndo = useCallback(() => {
+    setState(s => ({
+      ...s,
+      strokes: s.strokes.slice(0, -1),
+    }));
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setState(s => ({
+      ...s,
+      strokes: [],
+      currentStroke: null,
+    }));
+  }, []);
+
+  const handleImageLoad = useCallback((img: HTMLImageElement) => {
+    imageRef.current = img;
+  }, []);
+
+  const handleAccept = async () => {
+    if (saving) return;
+    setSaving(true);
+
+    try {
+      const img = imageRef.current;
+      if (!img) {
+        onClose();
+        return;
+      }
+
+      const hasDrawings = state.strokes.length > 0;
+      const finalName = name.trim() || initialName || 'image';
+
+      // If no drawings, just pass through original image
+      if (!hasDrawings) {
+        const response = await fetch(imageSrc);
+        const blob = await response.blob();
+        await onAccept(blob, false, finalName);
+        onClose();
+        return;
+      }
+
+      // Composite image + drawings
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d')!;
+
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+
+      // Draw original image
+      ctx.drawImage(img, 0, 0);
+
+      // Scale factor from display size to natural size
+      const scale = img.naturalWidth / img.clientWidth;
+
+      // Draw all strokes at full resolution
+      state.strokes.forEach(stroke => {
+        renderStroke(ctx, stroke, scale);
+      });
+
+      // Convert to blob
+      canvas.toBlob(async (blob) => {
+        if (blob) {
+          await onAccept(blob, true, finalName);
+        }
+        onClose();
+      }, 'image/png');
+    } catch (err) {
+      console.error('Failed to save annotated image:', err);
+      onClose();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      handleAccept();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[200] flex items-center justify-center bg-background/90 backdrop-blur-sm"
+      data-popover-layer
+      onClick={handleBackdropClick}
+    >
+      {/* Canvas with image and toolbar */}
+      <div className="relative flex flex-col items-center gap-3" onClick={(e) => e.stopPropagation()}>
+        {/* Toolbar - above image */}
+        <Toolbar
+          tool={state.tool}
+          color={state.color}
+          strokeSize={state.strokeSize}
+          canUndo={state.strokes.length > 0}
+          onToolChange={(tool) => setState(s => ({ ...s, tool }))}
+          onColorChange={(color) => setState(s => ({ ...s, color }))}
+          onStrokeSizeChange={(strokeSize) => setState(s => ({ ...s, strokeSize }))}
+          onUndo={handleUndo}
+          onClear={handleClear}
+          onSave={handleAccept}
+        />
+
+        <Canvas
+          imageSrc={imageSrc}
+          strokes={state.strokes}
+          currentStroke={state.currentStroke}
+          tool={state.tool}
+          color={state.color}
+          onStrokeStart={handleStrokeStart}
+          onStrokeMove={handleStrokeMove}
+          onStrokeEnd={handleStrokeEnd}
+          onImageLoad={handleImageLoad}
+        />
+
+        {/* Image name input */}
+        {initialName && (
+          <div className="flex items-center gap-2 w-full max-w-xs">
+            <label className="text-xs text-muted-foreground whitespace-nowrap">Name</label>
+            <input
+              ref={nameInputRef}
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+                  e.preventDefault();
+                  handleAccept();
+                }
+              }}
+              className="flex-1 px-2 py-1 text-xs bg-muted/50 border border-border rounded-md text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+              placeholder="Image name..."
+            />
+          </div>
+        )}
+
+        {/* Accept hint */}
+        <div className="text-xs text-muted-foreground">
+          Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Esc</kbd> or <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Enter</kbd> or click outside to accept
+        </div>
+      </div>
+
+      {/* Loading overlay */}
+      {saving && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <div className="text-sm text-muted-foreground">Saving...</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageAnnotator;

package/components/ImageAnnotator/types.ts

@@ -0,0 +1,39 @@
+export type Tool = 'pen' | 'arrow' | 'circle';
+
+export interface Point {
+  x: number;
+  y: number;
+  pressure?: number;
+}
+
+export interface Stroke {
+  id: string;
+  tool: Tool;
+  points: Point[];
+  color: string;
+  size: number;
+}
+
+export interface AnnotatorState {
+  tool: Tool;
+  color: string;
+  strokeSize: number;
+  strokes: Stroke[];
+  currentStroke: Stroke | null;
+}
+
+export const COLORS = [
+  '#ef4444', // red
+  '#eab308', // yellow
+  '#22c55e', // green
+  '#3b82f6', // blue
+  '#ffffff', // white
+] as const;
+
+export const DEFAULT_STATE: AnnotatorState = {
+  tool: 'pen',
+  color: COLORS[0],
+  strokeSize: 6,
+  strokes: [],
+  currentStroke: null,
+};

package/components/ImageAnnotator/utils.ts

@@ -0,0 +1,147 @@
+import getStroke from 'perfect-freehand';
+import type { Point, Stroke } from './types';
+
+const STROKE_OPTIONS = {
+  size: 4,
+  thinning: 0.5,
+  smoothing: 0.5,
+  streamline: 0.5,
+};
+
+/**
+ * Convert perfect-freehand output to SVG path data
+ */
+function getSvgPathFromStroke(stroke: number[][]): string {
+  if (!stroke.length) return '';
+
+  const d = stroke.reduce(
+    (acc, [x0, y0], i, arr) => {
+      const [x1, y1] = arr[(i + 1) % arr.length];
+      acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
+      return acc;
+    },
+    ['M', ...stroke[0], 'Q']
+  );
+
+  d.push('Z');
+  return d.join(' ');
+}
+
+/**
+ * Render a freehand pen stroke using perfect-freehand
+ */
+export function renderPenStroke(
+  ctx: CanvasRenderingContext2D,
+  points: Point[],
+  color: string,
+  size: number,
+  scale = 1
+) {
+  if (points.length < 2) return;
+
+  const scaledPoints = points.map(p => [p.x * scale, p.y * scale, p.pressure ?? 0.5]);
+  const stroke = getStroke(scaledPoints, { ...STROKE_OPTIONS, size: size * scale });
+
+  const path = new Path2D(getSvgPathFromStroke(stroke));
+  ctx.fillStyle = color;
+  ctx.fill(path);
+}
+
+/**
+ * Render an arrow from start to end point
+ */
+export function renderArrow(
+  ctx: CanvasRenderingContext2D,
+  start: Point,
+  end: Point,
+  color: string,
+  size: number,
+  scale = 1
+) {
+  const x1 = start.x * scale;
+  const y1 = start.y * scale;
+  const x2 = end.x * scale;
+  const y2 = end.y * scale;
+
+  const lineWidth = size * scale * 0.75;
+  const headLength = size * scale * 3;
+
+  // Draw line
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.lineCap = 'round';
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+
+  // Draw arrowhead
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(
+    x2 - headLength * Math.cos(angle - Math.PI / 6),
+    y2 - headLength * Math.sin(angle - Math.PI / 6)
+  );
+  ctx.lineTo(
+    x2 - headLength * Math.cos(angle + Math.PI / 6),
+    y2 - headLength * Math.sin(angle + Math.PI / 6)
+  );
+  ctx.closePath();
+  ctx.fill();
+}
+
+/**
+ * Render a circle from edge to edge (first click is one edge, drag to opposite edge)
+ */
+export function renderCircle(
+  ctx: CanvasRenderingContext2D,
+  start: Point,
+  end: Point,
+  color: string,
+  size: number,
+  scale = 1
+) {
+  const x1 = start.x * scale;
+  const y1 = start.y * scale;
+  const x2 = end.x * scale;
+  const y2 = end.y * scale;
+
+  // Center is midpoint between start and end
+  const cx = (x1 + x2) / 2;
+  const cy = (y1 + y2) / 2;
+
+  // Radius is half the distance
+  const radius = Math.hypot(x2 - x1, y2 - y1) / 2;
+  const lineWidth = size * scale * 0.75;
+
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.stroke();
+}
+
+/**
+ * Render a stroke based on its tool type
+ */
+export function renderStroke(
+  ctx: CanvasRenderingContext2D,
+  stroke: Stroke,
+  scale = 1
+) {
+  if (stroke.points.length < 2) return;
+
+  switch (stroke.tool) {
+    case 'pen':
+      renderPenStroke(ctx, stroke.points, stroke.color, stroke.size, scale);
+      break;
+    case 'arrow':
+      renderArrow(ctx, stroke.points[0], stroke.points[stroke.points.length - 1], stroke.color, stroke.size, scale);
+      break;
+    case 'circle':
+      renderCircle(ctx, stroke.points[0], stroke.points[stroke.points.length - 1], stroke.color, stroke.size, scale);
+      break;
+  }
+}