Shoot sketches

2026-07-12 12:14:39 +02:00
parent 99d1c46b7f
commit 4ae14cf8b2
2 changed files with 395 additions and 1 deletions
@@ -0,0 +1,373 @@
+"use client";
+
+import { useRef, useState, useEffect, useCallback } from "react";
+import { X, Undo2, Trash2, Save, Loader2, Pen, Eraser } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { TakeAttachmentData } from "./TakeEditorPanel";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface Stroke {
+  color: string;
+  width: number;
+  points: { x: number; y: number }[];
+}
+
+interface Props {
+  takeId: string;
+  onSaved: (attachment: TakeAttachmentData) => void;
+  onClose: () => void;
+}
+
+// ─── Config ───────────────────────────────────────────────────────────────────
+
+const BG_COLOR = "#1c1c1e";
+
+const COLORS = [
+  "#ffffff", "#d4d4d8",
+  "#f87171", "#fb923c", "#facc15",
+  "#4ade80", "#60a5fa", "#c084fc",
+];
+
+const BRUSH_SIZES = [2, 4, 8, 14, 24];
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function SketchPad({ takeId, onSaved, onClose }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const strokesRef = useRef<Stroke[]>([]);
+  const currentStrokeRef = useRef<Stroke | null>(null);
+  const isDrawingRef = useRef(false);
+
+  // strokeCount is only used to drive button enabled/disabled state reactively
+  const [strokeCount, setStrokeCount] = useState(0);
+  const [color, setColor] = useState("#ffffff");
+  const [brushSize, setBrushSize] = useState(4);
+  const [isEraser, setIsEraser] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // ── Redraw all committed strokes ───────────────────────────────────────────
+  const redraw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    ctx.fillStyle = BG_COLOR;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    for (const stroke of strokesRef.current) {
+      ctx.beginPath();
+      ctx.strokeStyle = stroke.color;
+      ctx.fillStyle = stroke.color;
+      ctx.lineWidth = stroke.width;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+
+      if (stroke.points.length === 1) {
+        // Single tap → dot
+        ctx.arc(stroke.points[0].x, stroke.points[0].y, stroke.width / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+        for (let i = 1; i < stroke.points.length; i++) {
+          ctx.lineTo(stroke.points[i].x, stroke.points[i].y);
+        }
+        ctx.stroke();
+      }
+    }
+  }, []);
+
+  // ── Size canvas to fill container on mount + window resize ────────────────
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const fit = () => {
+      const parent = canvas.parentElement;
+      if (!parent) return;
+      const { width, height } = parent.getBoundingClientRect();
+      canvas.width = Math.floor(width);
+      canvas.height = Math.floor(height);
+      redraw();
+    };
+
+    fit();
+    window.addEventListener("resize", fit);
+    return () => window.removeEventListener("resize", fit);
+  }, [redraw]);
+
+  // ── Keyboard shortcuts ────────────────────────────────────────────────────
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "p" && !e.metaKey && !e.ctrlKey) setIsEraser(false);
+      if (e.key === "e" && !e.metaKey && !e.ctrlKey) setIsEraser(true);
+      if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+        e.preventDefault();
+        strokesRef.current = strokesRef.current.slice(0, -1);
+        setStrokeCount(strokesRef.current.length);
+        redraw();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose, redraw]);
+
+  // ── Coordinate helper — CSS px → canvas buffer px ────────────────────────
+  const getPos = (e: React.PointerEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current!;
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: (e.clientX - rect.left) * (canvas.width / rect.width),
+      y: (e.clientY - rect.top) * (canvas.height / rect.height),
+    };
+  };
+
+  // ── Pointer handlers ──────────────────────────────────────────────────────
+  const onPointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
+    e.preventDefault();
+    (e.target as HTMLCanvasElement).setPointerCapture(e.pointerId);
+    isDrawingRef.current = true;
+
+    const pos = getPos(e);
+    const stroke: Stroke = {
+      color: isEraser ? BG_COLOR : color,
+      width: isEraser ? brushSize * 4 : brushSize,
+      points: [pos],
+    };
+    currentStrokeRef.current = stroke;
+
+    // Immediate dot feedback
+    const ctx = canvasRef.current!.getContext("2d")!;
+    ctx.beginPath();
+    ctx.fillStyle = stroke.color;
+    ctx.arc(pos.x, pos.y, stroke.width / 2, 0, Math.PI * 2);
+    ctx.fill();
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
+    if (!isDrawingRef.current || !currentStrokeRef.current) return;
+    e.preventDefault();
+
+    const pos = getPos(e);
+    const stroke = currentStrokeRef.current;
+    const prev = stroke.points[stroke.points.length - 1];
+    stroke.points.push(pos);
+
+    // Incremental draw — no full redraw needed during stroke
+    const ctx = canvasRef.current!.getContext("2d")!;
+    ctx.beginPath();
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.moveTo(prev.x, prev.y);
+    ctx.lineTo(pos.x, pos.y);
+    ctx.stroke();
+  };
+
+  const onPointerUp = () => {
+    if (!isDrawingRef.current) return;
+    isDrawingRef.current = false;
+    if (currentStrokeRef.current) {
+      strokesRef.current = [...strokesRef.current, currentStrokeRef.current];
+      setStrokeCount(strokesRef.current.length);
+      currentStrokeRef.current = null;
+    }
+  };
+
+  const undo = () => {
+    strokesRef.current = strokesRef.current.slice(0, -1);
+    setStrokeCount(strokesRef.current.length);
+    redraw();
+  };
+
+  const clear = () => {
+    strokesRef.current = [];
+    setStrokeCount(0);
+    redraw();
+  };
+
+  // ── Save ──────────────────────────────────────────────────────────────────
+  const save = async () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const blob = await new Promise<Blob | null>((resolve) =>
+        canvas.toBlob(resolve, "image/png")
+      );
+      if (!blob) throw new Error("Canvas export failed");
+
+      const fileName = `sketch_${Date.now()}.png`;
+      const fd = new FormData();
+      fd.append("file", new File([blob], fileName, { type: "image/png" }));
+      fd.append("type", "image");
+
+      const uploadRes = await fetch("/api/upload", { method: "POST", body: fd });
+      if (!uploadRes.ok) throw new Error("Upload failed");
+      const { url, key } = await uploadRes.json();
+
+      const attRes = await fetch(`/api/shoot-log/takes/${takeId}/attachments`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          fileUrl: url,
+          fileKey: key ?? "",
+          fileName,
+          fileSize: blob.size,
+          fileType: "IMAGE",
+          category: "MISCELLANEOUS",
+          caption: "Sketch",
+        }),
+      });
+      if (!attRes.ok) throw new Error("Failed to save attachment");
+      const { attachment } = await attRes.json();
+      onSaved(attachment as TakeAttachmentData);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── Render ───────────────────────────────────────────────────────────────
+  const activeColor = isEraser ? BG_COLOR : color;
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col" style={{ background: BG_COLOR }}>
+
+      {/* ── Toolbar ── */}
+      <div className="flex items-center gap-3 px-4 py-2 border-b border-zinc-800 bg-zinc-900/80 backdrop-blur shrink-0 flex-wrap">
+
+        {/* Pen / Eraser toggle */}
+        <div className="flex items-center gap-0.5 bg-zinc-800 rounded-lg p-0.5">
+          <button
+            onClick={() => setIsEraser(false)}
+            className={cn(
+              "p-1.5 rounded-md transition-colors",
+              !isEraser ? "bg-zinc-700 text-white shadow" : "text-zinc-500 hover:text-zinc-300"
+            )}
+            title="Pen (P)"
+          >
+            <Pen className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => setIsEraser(true)}
+            className={cn(
+              "p-1.5 rounded-md transition-colors",
+              isEraser ? "bg-zinc-700 text-red-400 shadow" : "text-zinc-500 hover:text-zinc-300"
+            )}
+            title="Eraser (E)"
+          >
+            <Eraser className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="w-px h-5 bg-zinc-700" />
+
+        {/* Colour swatches */}
+        <div className="flex items-center gap-1.5">
+          {COLORS.map((c) => (
+            <button
+              key={c}
+              onClick={() => { setColor(c); setIsEraser(false); }}
+              className={cn(
+                "rounded-full border-2 transition-all",
+                color === c && !isEraser
+                  ? "border-amber-400 scale-125"
+                  : "border-zinc-700 hover:border-zinc-400"
+              )}
+              style={{ width: 20, height: 20, backgroundColor: c }}
+            />
+          ))}
+        </div>
+
+        <div className="w-px h-5 bg-zinc-700" />
+
+        {/* Brush sizes */}
+        <div className="flex items-center gap-2">
+          {BRUSH_SIZES.map((s) => (
+            <button
+              key={s}
+              onClick={() => setBrushSize(s)}
+              className={cn(
+                "flex items-center justify-center rounded-full transition-all bg-zinc-800",
+                brushSize === s ? "ring-2 ring-amber-400" : "opacity-50 hover:opacity-100"
+              )}
+              style={{ width: s + 10, height: s + 10 }}
+              title={`${s}px`}
+            >
+              <div
+                className="rounded-full"
+                style={{ width: s, height: s, backgroundColor: activeColor === BG_COLOR ? "#ef4444" : activeColor }}
+              />
+            </button>
+          ))}
+        </div>
+
+        <div className="flex-1" />
+
+        {error && <span className="text-xs text-red-400">{error}</span>}
+
+        {/* Action buttons */}
+        <div className="flex items-center gap-1.5">
+          <button
+            onClick={undo}
+            disabled={strokeCount === 0}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-zinc-400 hover:text-white hover:bg-zinc-800 disabled:opacity-30 transition-colors"
+            title="Undo (Ctrl+Z)"
+          >
+            <Undo2 className="h-3.5 w-3.5" />
+            Undo
+          </button>
+          <button
+            onClick={clear}
+            disabled={strokeCount === 0}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-zinc-400 hover:text-white hover:bg-zinc-800 disabled:opacity-30 transition-colors"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+            Clear
+          </button>
+          <button
+            onClick={save}
+            disabled={saving || strokeCount === 0}
+            className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white disabled:opacity-50 transition-colors"
+          >
+            {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
+            {saving ? "Saving…" : "Save Sketch"}
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-zinc-500 hover:text-white hover:bg-zinc-800 transition-colors ml-1"
+            title="Discard (Esc)"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* ── Canvas ── */}
+      <div className="flex-1 relative overflow-hidden">
+        {strokeCount === 0 && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none select-none">
+            <p className="text-zinc-700 text-base">Draw your sketch…</p>
+          </div>
+        )}
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 cursor-crosshair"
+          style={{ touchAction: "none" }}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerLeave={onPointerUp}
+        />
+      </div>
+    </div>
+  );
+}
@@ -1,9 +1,10 @@
 "use client";

 import { useRef, useState, useCallback } from "react";
-import { Upload, X, Loader2, ImageIcon, ZoomIn } from "lucide-react";
+import { Upload, X, Loader2, ImageIcon, ZoomIn, Pencil } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { TakeAttachmentData } from "./TakeEditorPanel";
+import { SketchPad } from "./SketchPad";

 // ─── Lightbox ─────────────────────────────────────────────────────────────────

@@ -89,6 +90,7 @@ export function TakeImageGallery({ takeId, attachments, onChange }: Props) {
  const [uploading, setUploading] = useState(false);
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
  const [dragOver, setDragOver] = useState(false);
+  const [showSketch, setShowSketch] = useState(false);

  const imageAttachments = attachments.filter((a) => a.fileType === "IMAGE");

@@ -238,6 +240,16 @@ export function TakeImageGallery({ takeId, attachments, onChange }: Props) {
        </div>
      )}

+      {/* Sketch button */}
+      <button
+        type="button"
+        onClick={() => setShowSketch(true)}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg border border-zinc-700 hover:border-zinc-500 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+      >
+        <Pencil className="h-3.5 w-3.5" />
+        Add Sketch
+      </button>
+
      {imageAttachments.length === 0 && !uploading && (
        <div className="flex items-center gap-2 text-zinc-600 text-xs py-2">
          <ImageIcon className="h-4 w-4" />
@@ -245,6 +257,15 @@ export function TakeImageGallery({ takeId, attachments, onChange }: Props) {
        </div>
      )}

+      {/* Sketch pad */}
+      {showSketch && (
+        <SketchPad
+          takeId={takeId}
+          onSaved={(attachment) => onChange([...attachments, attachment])}
+          onClose={() => setShowSketch(false)}
+        />
+      )}
+
      {/* Lightbox */}
      {lightboxIndex !== null && (
        <Lightbox