markupr 2.1.8 → 2.5.0

package/src/renderer/components/AnnotationOverlay.tsx

@@ -1,836 +0,0 @@
-/**
- * Annotation Overlay Component
- *
- * A professional screenshot annotation tool allowing users to:
- * - Draw shapes: Circle, Arrow, Rectangle, Freehand
- * - Pick colors: Red (default), Blue, Yellow, Green, White
- * - Undo/Redo with full history support
- * - Clear all annotations
- * - Save annotated screenshot
- *
- * Keyboard shortcuts:
- * - 1: Arrow tool
- * - 2: Circle tool
- * - 3: Rectangle tool
- * - 4: Freehand tool
- * - Z / Cmd+Z: Undo
- * - Y / Cmd+Shift+Z: Redo
- * - C: Clear all
- * - Escape: Cancel
- * - Enter: Save
- */
-
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-} from 'react';
-import type { Screenshot } from '../../shared/types';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-type Tool = 'circle' | 'arrow' | 'rectangle' | 'freehand';
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-interface Annotation {
-  id: string;
-  type: Tool;
-  points: Point[];
-  color: string;
-  strokeWidth: number;
-}
-
-interface AnnotationOverlayProps {
-  screenshot: Screenshot;
-  isActive: boolean;
-  onSave: (annotatedDataUrl: string) => void;
-  onCancel: () => void;
-}
-
-// =============================================================================
-// Constants
-// =============================================================================
-
-const TOOLS: { id: Tool; icon: string; label: string; shortcut: string }[] = [
-  { id: 'arrow', icon: '\u2197', label: 'Arrow', shortcut: '1' },
-  { id: 'circle', icon: '\u25CB', label: 'Circle', shortcut: '2' },
-  { id: 'rectangle', icon: '\u25A1', label: 'Rectangle', shortcut: '3' },
-  { id: 'freehand', icon: '\u270E', label: 'Freehand', shortcut: '4' },
-];
-
-const COLORS = [
-  { value: '#FF3B30', name: 'Red' },
-  { value: '#007AFF', name: 'Blue' },
-  { value: '#FFCC00', name: 'Yellow' },
-  { value: '#34C759', name: 'Green' },
-  { value: '#FFFFFF', name: 'White' },
-];
-
-const DEFAULT_STROKE_WIDTH = 3;
-const ARROWHEAD_LENGTH = 15;
-
-// =============================================================================
-// Drawing Utilities
-// =============================================================================
-
-function generateId(): string {
-  return `ann_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-}
-
-function drawArrow(
-  ctx: CanvasRenderingContext2D,
-  from: Point,
-  to: Point,
-  color: string,
-  strokeWidth: number
-): void {
-  const angle = Math.atan2(to.y - from.y, to.x - from.x);
-  const headLength = ARROWHEAD_LENGTH;
-
-  ctx.strokeStyle = color;
-  ctx.lineWidth = strokeWidth;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-
-  // Draw the line
-  ctx.beginPath();
-  ctx.moveTo(from.x, from.y);
-  ctx.lineTo(to.x, to.y);
-  ctx.stroke();
-
-  // Draw the arrowhead
-  ctx.beginPath();
-  ctx.moveTo(to.x, to.y);
-  ctx.lineTo(
-    to.x - headLength * Math.cos(angle - Math.PI / 6),
-    to.y - headLength * Math.sin(angle - Math.PI / 6)
-  );
-  ctx.stroke();
-
-  ctx.beginPath();
-  ctx.moveTo(to.x, to.y);
-  ctx.lineTo(
-    to.x - headLength * Math.cos(angle + Math.PI / 6),
-    to.y - headLength * Math.sin(angle + Math.PI / 6)
-  );
-  ctx.stroke();
-}
-
-function drawAnnotation(
-  ctx: CanvasRenderingContext2D,
-  annotation: Annotation
-): void {
-  ctx.strokeStyle = annotation.color;
-  ctx.lineWidth = annotation.strokeWidth;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-
-  switch (annotation.type) {
-    case 'circle': {
-      if (annotation.points.length < 2) return;
-      const [start, end] = annotation.points;
-      const radius = Math.hypot(end.x - start.x, end.y - start.y);
-      ctx.beginPath();
-      ctx.arc(start.x, start.y, radius, 0, Math.PI * 2);
-      ctx.stroke();
-      break;
-    }
-
-    case 'arrow': {
-      if (annotation.points.length < 2) return;
-      drawArrow(
-        ctx,
-        annotation.points[0],
-        annotation.points[1],
-        annotation.color,
-        annotation.strokeWidth
-      );
-      break;
-    }
-
-    case 'rectangle': {
-      if (annotation.points.length < 2) return;
-      const [p1, p2] = annotation.points;
-      ctx.beginPath();
-      ctx.rect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
-      ctx.stroke();
-      break;
-    }
-
-    case 'freehand': {
-      if (annotation.points.length < 2) return;
-      ctx.beginPath();
-      annotation.points.forEach((point, i) => {
-        if (i === 0) {
-          ctx.moveTo(point.x, point.y);
-        } else {
-          ctx.lineTo(point.x, point.y);
-        }
-      });
-      ctx.stroke();
-      break;
-    }
-  }
-}
-
-// =============================================================================
-// Toolbar Component
-// =============================================================================
-
-interface ToolbarProps {
-  tool: Tool;
-  color: string;
-  onToolChange: (tool: Tool) => void;
-  onColorChange: (color: string) => void;
-  onUndo: () => void;
-  onRedo: () => void;
-  onClear: () => void;
-  onSave: () => void;
-  onCancel: () => void;
-  canUndo: boolean;
-  canRedo: boolean;
-}
-
-const Toolbar: React.FC<ToolbarProps> = ({
-  tool,
-  color,
-  onToolChange,
-  onColorChange,
-  onUndo,
-  onRedo,
-  onClear,
-  onSave,
-  onCancel,
-  canUndo,
-  canRedo,
-}) => {
-  return (
-    <div style={toolbarStyles.container}>
-      {/* Tool buttons */}
-      <div style={toolbarStyles.section}>
-        {TOOLS.map((t) => (
-          <button
-            key={t.id}
-            onClick={() => onToolChange(t.id)}
-            style={{
-              ...toolbarStyles.button,
-              ...(tool === t.id ? toolbarStyles.buttonActive : {}),
-            }}
-            title={`${t.label} (${t.shortcut})`}
-          >
-            <span style={toolbarStyles.buttonIcon}>{t.icon}</span>
-          </button>
-        ))}
-      </div>
-
-      <div style={toolbarStyles.divider} />
-
-      {/* Color picker */}
-      <div style={toolbarStyles.section}>
-        {COLORS.map((c) => (
-          <button
-            key={c.value}
-            onClick={() => onColorChange(c.value)}
-            style={{
-              ...toolbarStyles.colorButton,
-              backgroundColor: c.value,
-              ...(color === c.value ? toolbarStyles.colorButtonActive : {}),
-            }}
-            title={c.name}
-          />
-        ))}
-      </div>
-
-      <div style={toolbarStyles.divider} />
-
-      {/* History controls */}
-      <div style={toolbarStyles.section}>
-        <button
-          onClick={onUndo}
-          disabled={!canUndo}
-          style={{
-            ...toolbarStyles.button,
-            ...(canUndo ? {} : toolbarStyles.buttonDisabled),
-          }}
-          title="Undo (Z)"
-        >
-          <span style={toolbarStyles.buttonIcon}>{'\u21A9'}</span>
-        </button>
-        <button
-          onClick={onRedo}
-          disabled={!canRedo}
-          style={{
-            ...toolbarStyles.button,
-            ...(canRedo ? {} : toolbarStyles.buttonDisabled),
-          }}
-          title="Redo (Y)"
-        >
-          <span style={toolbarStyles.buttonIcon}>{'\u21AA'}</span>
-        </button>
-        <button
-          onClick={onClear}
-          style={{
-            ...toolbarStyles.button,
-            ...toolbarStyles.buttonDanger,
-          }}
-          title="Clear All (C)"
-        >
-          <span style={toolbarStyles.buttonIcon}>{'\u2715'}</span>
-        </button>
-      </div>
-
-      <div style={toolbarStyles.divider} />
-
-      {/* Action buttons */}
-      <div style={toolbarStyles.section}>
-        <button
-          onClick={onCancel}
-          style={{
-            ...toolbarStyles.actionButton,
-            ...toolbarStyles.cancelButton,
-          }}
-          title="Cancel (Escape)"
-        >
-          Cancel
-        </button>
-        <button
-          onClick={onSave}
-          style={{
-            ...toolbarStyles.actionButton,
-            ...toolbarStyles.saveButton,
-          }}
-          title="Save (Enter)"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  );
-};
-
-const toolbarStyles: Record<string, React.CSSProperties> = {
-  container: {
-    position: 'fixed',
-    top: 16,
-    left: '50%',
-    transform: 'translateX(-50%)',
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-    padding: '8px 12px',
-    backgroundColor: 'rgba(17, 24, 39, 0.95)',
-    borderRadius: 12,
-    backdropFilter: 'blur(12px)',
-    WebkitBackdropFilter: 'blur(12px)',
-    boxShadow: `
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06),
-      0 0 0 1px rgba(75, 85, 99, 0.5)
-    `,
-    zIndex: 10001,
-    userSelect: 'none',
-  },
-  section: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4,
-  },
-  divider: {
-    width: 1,
-    height: 24,
-    backgroundColor: 'rgba(75, 85, 99, 0.5)',
-    margin: '0 4px',
-  },
-  button: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 36,
-    height: 36,
-    padding: 0,
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 8,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-    color: 'var(--text-primary)',
-  },
-  buttonActive: {
-    backgroundColor: 'var(--accent-default)',
-  },
-  buttonDisabled: {
-    opacity: 0.4,
-    cursor: 'not-allowed',
-  },
-  buttonDanger: {
-    color: 'var(--status-error)',
-  },
-  buttonIcon: {
-    fontSize: 18,
-    lineHeight: 1,
-  },
-  colorButton: {
-    width: 24,
-    height: 24,
-    padding: 0,
-    border: '2px solid transparent',
-    borderRadius: '50%',
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-  colorButtonActive: {
-    borderColor: 'var(--text-inverse)',
-    transform: 'scale(1.1)',
-  },
-  actionButton: {
-    padding: '6px 14px',
-    border: 'none',
-    borderRadius: 8,
-    fontSize: 13,
-    fontWeight: 600,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-  cancelButton: {
-    backgroundColor: 'rgba(75, 85, 99, 0.5)',
-    color: 'var(--text-primary)',
-  },
-  saveButton: {
-    backgroundColor: 'var(--status-success)',
-    color: 'var(--text-inverse)',
-  },
-};
-
-// =============================================================================
-// Hint Overlay Component
-// =============================================================================
-
-const HintOverlay: React.FC = () => {
-  const [visible, setVisible] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setVisible(false), 4000);
-    return () => clearTimeout(timer);
-  }, []);
-
-  if (!visible) return null;
-
-  return (
-    <div style={hintStyles.container}>
-      <div style={hintStyles.badge}>
-        <span style={hintStyles.text}>
-          Draw to annotate | Press <kbd style={hintStyles.kbd}>1-4</kbd> for
-          tools | <kbd style={hintStyles.kbd}>Z</kbd> to undo
-        </span>
-      </div>
-    </div>
-  );
-};
-
-const hintStyles: Record<string, React.CSSProperties> = {
-  container: {
-    position: 'fixed',
-    bottom: 24,
-    left: '50%',
-    transform: 'translateX(-50%)',
-    zIndex: 10001,
-    animation: 'toolbarFadeInUp 0.3s ease-out, fadeOut 0.3s ease-in 3.7s forwards',
-  },
-  badge: {
-    padding: '8px 16px',
-    backgroundColor: 'rgba(17, 24, 39, 0.9)',
-    borderRadius: 20,
-    backdropFilter: 'blur(8px)',
-  },
-  text: {
-    color: 'var(--text-secondary)',
-    fontSize: 13,
-  },
-  kbd: {
-    display: 'inline-block',
-    padding: '2px 6px',
-    marginLeft: 2,
-    marginRight: 2,
-    backgroundColor: 'rgba(75, 85, 99, 0.5)',
-    borderRadius: 4,
-    fontSize: 11,
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
-    color: 'var(--text-primary)',
-  },
-};
-
-// =============================================================================
-// Main Component
-// =============================================================================
-
-export const AnnotationOverlay: React.FC<AnnotationOverlayProps> = ({
-  screenshot,
-  isActive,
-  onSave,
-  onCancel,
-}) => {
-  // Canvas refs
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const imageRef = useRef<HTMLImageElement | null>(null);
-
-  // Drawing state
-  const [tool, setTool] = useState<Tool>('arrow');
-  const [color, setColor] = useState(COLORS[0].value);
-  const [annotations, setAnnotations] = useState<Annotation[]>([]);
-  const [currentAnnotation, setCurrentAnnotation] = useState<Annotation | null>(
-    null
-  );
-  const [isDrawing, setIsDrawing] = useState(false);
-
-  // History state (for undo/redo)
-  const [history, setHistory] = useState<Annotation[][]>([[]]);
-  const [historyIndex, setHistoryIndex] = useState(0);
-
-  // Compute derived state
-  const canUndo = historyIndex > 0;
-  const canRedo = historyIndex < history.length - 1;
-
-  // Get image source from screenshot
-  const imageSrc = useMemo(() => {
-    if (screenshot.base64) {
-      return `data:image/png;base64,${screenshot.base64}`;
-    }
-    // Fallback to file path with file:// protocol
-    return `file://${screenshot.imagePath}`;
-  }, [screenshot]);
-
-  // ==========================================================================
-  // Canvas Rendering
-  // ==========================================================================
-
-  const redrawCanvas = useCallback(() => {
-    const canvas = canvasRef.current;
-    const img = imageRef.current;
-    if (!canvas || !img) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Clear and draw image
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.drawImage(img, 0, 0);
-
-    // Draw all annotations
-    annotations.forEach((ann) => drawAnnotation(ctx, ann));
-
-    // Draw current annotation in progress
-    if (currentAnnotation) {
-      drawAnnotation(ctx, currentAnnotation);
-    }
-  }, [annotations, currentAnnotation]);
-
-  // Load image and set up canvas
-  useEffect(() => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-
-    img.onload = () => {
-      imageRef.current = img;
-      const canvas = canvasRef.current;
-      if (canvas) {
-        canvas.width = img.naturalWidth;
-        canvas.height = img.naturalHeight;
-        redrawCanvas();
-      }
-    };
-
-    img.onerror = () => {
-      console.error('Failed to load screenshot for annotation');
-    };
-
-    img.src = imageSrc;
-  }, [imageSrc, redrawCanvas]);
-
-  // Redraw when annotations change
-  useEffect(() => {
-    redrawCanvas();
-  }, [redrawCanvas]);
-
-  // ==========================================================================
-  // History Management
-  // ==========================================================================
-
-  const pushToHistory = useCallback(
-    (newAnnotations: Annotation[]) => {
-      // Remove any redo states
-      const newHistory = history.slice(0, historyIndex + 1);
-      newHistory.push(newAnnotations);
-
-      // Limit history to prevent memory issues
-      if (newHistory.length > 50) {
-        newHistory.shift();
-      }
-
-      setHistory(newHistory);
-      setHistoryIndex(newHistory.length - 1);
-    },
-    [history, historyIndex]
-  );
-
-  const undo = useCallback(() => {
-    if (historyIndex > 0) {
-      const newIndex = historyIndex - 1;
-      setHistoryIndex(newIndex);
-      setAnnotations(history[newIndex]);
-    }
-  }, [history, historyIndex]);
-
-  const redo = useCallback(() => {
-    if (historyIndex < history.length - 1) {
-      const newIndex = historyIndex + 1;
-      setHistoryIndex(newIndex);
-      setAnnotations(history[newIndex]);
-    }
-  }, [history, historyIndex]);
-
-  const clearAll = useCallback(() => {
-    setAnnotations([]);
-    pushToHistory([]);
-  }, [pushToHistory]);
-
-  // ==========================================================================
-  // Drawing Handlers
-  // ==========================================================================
-
-  const getCanvasCoordinates = useCallback(
-    (e: React.MouseEvent<HTMLCanvasElement>): Point => {
-      const canvas = canvasRef.current;
-      if (!canvas) return { x: 0, y: 0 };
-
-      const rect = canvas.getBoundingClientRect();
-      const scaleX = canvas.width / rect.width;
-      const scaleY = canvas.height / rect.height;
-
-      return {
-        x: (e.clientX - rect.left) * scaleX,
-        y: (e.clientY - rect.top) * scaleY,
-      };
-    },
-    []
-  );
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent<HTMLCanvasElement>) => {
-      if (e.button !== 0) return; // Only left click
-
-      const point = getCanvasCoordinates(e);
-      setIsDrawing(true);
-
-      const newAnnotation: Annotation = {
-        id: generateId(),
-        type: tool,
-        points: [point],
-        color,
-        strokeWidth: DEFAULT_STROKE_WIDTH,
-      };
-
-      setCurrentAnnotation(newAnnotation);
-    },
-    [tool, color, getCanvasCoordinates]
-  );
-
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent<HTMLCanvasElement>) => {
-      if (!isDrawing || !currentAnnotation) return;
-
-      const point = getCanvasCoordinates(e);
-
-      setCurrentAnnotation((prev) => {
-        if (!prev) return null;
-
-        if (prev.type === 'freehand') {
-          // Freehand: add all points
-          return {
-            ...prev,
-            points: [...prev.points, point],
-          };
-        } else {
-          // Other tools: keep start point, update end point
-          return {
-            ...prev,
-            points: [prev.points[0], point],
-          };
-        }
-      });
-    },
-    [isDrawing, currentAnnotation, getCanvasCoordinates]
-  );
-
-  const handleMouseUp = useCallback(() => {
-    if (!isDrawing || !currentAnnotation) return;
-
-    // Only save if annotation has enough points
-    if (currentAnnotation.points.length >= 2) {
-      const newAnnotations = [...annotations, currentAnnotation];
-      setAnnotations(newAnnotations);
-      pushToHistory(newAnnotations);
-    }
-
-    setIsDrawing(false);
-    setCurrentAnnotation(null);
-  }, [isDrawing, currentAnnotation, annotations, pushToHistory]);
-
-  // ==========================================================================
-  // Save Handler
-  // ==========================================================================
-
-  const handleSave = useCallback(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    // Export canvas as data URL
-    const dataUrl = canvas.toDataURL('image/png');
-    onSave(dataUrl);
-  }, [onSave]);
-
-  // ==========================================================================
-  // Keyboard Shortcuts
-  // ==========================================================================
-
-  useEffect(() => {
-    if (!isActive) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Don't handle if typing in an input
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement
-      ) {
-        return;
-      }
-
-      // Tool shortcuts
-      switch (e.key) {
-        case '1':
-          setTool('arrow');
-          break;
-        case '2':
-          setTool('circle');
-          break;
-        case '3':
-          setTool('rectangle');
-          break;
-        case '4':
-          setTool('freehand');
-          break;
-        case 'z':
-        case 'Z':
-          if (e.metaKey || e.ctrlKey) {
-            if (e.shiftKey) {
-              redo();
-            } else {
-              undo();
-            }
-            e.preventDefault();
-          } else if (!e.shiftKey) {
-            undo();
-          }
-          break;
-        case 'y':
-        case 'Y':
-          redo();
-          break;
-        case 'c':
-        case 'C':
-          if (!e.metaKey && !e.ctrlKey) {
-            clearAll();
-          }
-          break;
-        case 'Escape':
-          onCancel();
-          break;
-        case 'Enter':
-          handleSave();
-          break;
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isActive, undo, redo, clearAll, onCancel, handleSave]);
-
-  // ==========================================================================
-  // Render
-  // ==========================================================================
-
-  if (!isActive) return null;
-
-  return (
-    <>
-      {/* toolbarFadeInUp, fadeOut, pageFadeIn keyframes provided by animations.css */}
-
-      {/* Backdrop */}
-      <div
-        style={{
-          position: 'fixed',
-          inset: 0,
-          backgroundColor: 'rgba(0, 0, 0, 0.85)',
-          zIndex: 10000,
-          animation: 'pageFadeIn 0.2s ease-out',
-        }}
-      />
-
-      {/* Canvas container */}
-      <div
-        style={{
-          position: 'fixed',
-          inset: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: 60,
-          zIndex: 10000,
-        }}
-      >
-        <canvas
-          ref={canvasRef}
-          style={{
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain',
-            borderRadius: 8,
-            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
-            cursor: tool === 'freehand' ? 'crosshair' : 'crosshair',
-          }}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-        />
-      </div>
-
-      {/* Toolbar */}
-      <Toolbar
-        tool={tool}
-        color={color}
-        onToolChange={setTool}
-        onColorChange={setColor}
-        onUndo={undo}
-        onRedo={redo}
-        onClear={clearAll}
-        onSave={handleSave}
-        onCancel={onCancel}
-        canUndo={canUndo}
-        canRedo={canRedo}
-      />
-
-      {/* Hint overlay */}
-      <HintOverlay />
-    </>
-  );
-};
-
-export default AnnotationOverlay;