@joewinke/jatui 0.1.11 → 0.1.19

package/src/lib/components/MarkupEditor.svelte

@@ -0,0 +1,485 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte"
+  import type { MarkupShape, MarkupTool, Point } from './markup'
+  import {
+    MARKUP_COLORS,
+    DEFAULT_STROKE_WIDTH,
+    renderAllShapes,
+    renderShape,
+    nextShapeId,
+  } from './markup'
+
+  interface Props {
+    imageUrl: string
+    initialShapes?: MarkupShape[]
+    onsave: (shapes: MarkupShape[]) => void
+    oncancel: () => void
+  }
+
+  let { imageUrl, initialShapes = [], onsave, oncancel }: Props = $props()
+
+  let tool = $state<MarkupTool>("arrow")
+  let color = $state(MARKUP_COLORS[0])
+  // svelte-ignore state_referenced_locally
+  let shapes = $state<MarkupShape[]>([...initialShapes])
+
+  // Canvas refs
+  let baseCanvas: HTMLCanvasElement | undefined = $state()
+  let overlayCanvas: HTMLCanvasElement | undefined = $state()
+
+  // Image dimensions (native)
+  let imgW = $state(0)
+  let imgH = $state(0)
+  let loaded = $state(false)
+  let loadError = $state(false)
+
+  // Drawing state
+  type DrawState = "idle" | "drawing" | "typing"
+  let drawState = $state<DrawState>("idle")
+  let startPoint: Point = { x: 0, y: 0 }
+  let freehandPoints: Point[] = []
+
+  // Text input
+  let textInput: HTMLInputElement | undefined = $state()
+  let textInputPos = $state({ x: 0, y: 0 })
+  let textInputCss = $state({ left: "0px", top: "0px" })
+  let textValue = $state("")
+
+  let baseImage: HTMLImageElement | null = null
+
+  onMount(() => {
+    const img = new Image()
+    img.crossOrigin = "anonymous"
+    img.onload = () => {
+      imgW = img.naturalWidth
+      imgH = img.naturalHeight
+      baseImage = img
+      loaded = true
+      requestAnimationFrame(() => redrawBase(img))
+    }
+    img.onerror = () => {
+      loadError = true
+    }
+    img.src = imageUrl
+  })
+
+  function redrawBase(img?: HTMLImageElement) {
+    if (!baseCanvas) return
+    const ctx = baseCanvas.getContext("2d")
+    if (!ctx) return
+    if (!img) img = baseImage ?? undefined
+    if (!img) return
+    baseCanvas.width = imgW
+    baseCanvas.height = imgH
+    ctx.drawImage(img, 0, 0, imgW, imgH)
+    renderAllShapes(ctx, shapes)
+  }
+
+  function clearOverlay() {
+    if (!overlayCanvas) return
+    const ctx = overlayCanvas.getContext("2d")
+    if (!ctx) return
+    overlayCanvas.width = imgW
+    overlayCanvas.height = imgH
+    ctx.clearRect(0, 0, imgW, imgH)
+  }
+
+  function canvasCoords(e: MouseEvent): Point {
+    if (!overlayCanvas) return { x: 0, y: 0 }
+    const rect = overlayCanvas.getBoundingClientRect()
+    const scaleX = imgW / rect.width
+    const scaleY = imgH / rect.height
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY,
+    }
+  }
+
+  function canvasToCss(p: Point): { left: string; top: string } {
+    if (!overlayCanvas) return { left: "0px", top: "0px" }
+    const rect = overlayCanvas.getBoundingClientRect()
+    return {
+      left: `${rect.left + p.x / (imgW / rect.width)}px`,
+      top: `${rect.top + p.y / (imgH / rect.height)}px`,
+    }
+  }
+
+  function buildShape(end: Point): MarkupShape | null {
+    const base = { color, strokeWidth: DEFAULT_STROKE_WIDTH }
+    switch (tool) {
+      case "arrow":
+        return {
+          ...base,
+          id: nextShapeId(),
+          type: "arrow",
+          start: startPoint,
+          end,
+        }
+      case "rectangle":
+        return {
+          ...base,
+          id: nextShapeId(),
+          type: "rectangle",
+          start: startPoint,
+          end,
+        }
+      case "ellipse":
+        return {
+          ...base,
+          id: nextShapeId(),
+          type: "ellipse",
+          start: startPoint,
+          end,
+        }
+      case "cloud":
+        return {
+          ...base,
+          id: nextShapeId(),
+          type: "cloud",
+          start: startPoint,
+          end,
+        }
+      case "freehand":
+        return {
+          ...base,
+          id: nextShapeId(),
+          type: "freehand",
+          points: [...freehandPoints, end],
+        }
+      default:
+        return null
+    }
+  }
+
+  function onPointerDown(e: MouseEvent) {
+    if (drawState === "typing") {
+      commitText()
+      return
+    }
+    const p = canvasCoords(e)
+    if (tool === "text") {
+      drawState = "typing"
+      textInputPos = p
+      textInputCss = canvasToCss(p)
+      textValue = ""
+      requestAnimationFrame(() => textInput?.focus())
+      return
+    }
+    drawState = "drawing"
+    startPoint = p
+    freehandPoints = [p]
+  }
+
+  function onPointerMove(e: MouseEvent) {
+    if (drawState !== "drawing") return
+    const p = canvasCoords(e)
+    if (tool === "freehand") freehandPoints.push(p)
+    clearOverlay()
+    const preview = buildShape(p)
+    if (preview && overlayCanvas) {
+      const ctx = overlayCanvas.getContext("2d")
+      if (ctx) renderShape(ctx, preview)
+    }
+  }
+
+  function onPointerUp(e: MouseEvent) {
+    if (drawState !== "drawing") return
+    const p = canvasCoords(e)
+    const shape = buildShape(p)
+    if (shape) {
+      shapes = [...shapes, shape]
+    }
+    drawState = "idle"
+    freehandPoints = []
+    clearOverlay()
+    redrawBase()
+  }
+
+  function commitText() {
+    if (textValue.trim()) {
+      const shape: MarkupShape = {
+        id: nextShapeId(),
+        type: "text",
+        color,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+        position: textInputPos,
+        content: textValue.trim(),
+        fontSize: 20,
+      }
+      shapes = [...shapes, shape]
+      redrawBase()
+    }
+    textValue = ""
+    drawState = "idle"
+  }
+
+  function handleTextKeydown(e: KeyboardEvent) {
+    e.stopPropagation()
+    if (e.key === "Enter") {
+      e.preventDefault()
+      commitText()
+    } else if (e.key === "Escape") {
+      e.preventDefault()
+      textValue = ""
+      drawState = "idle"
+    }
+  }
+
+  function undo() {
+    if (shapes.length === 0) return
+    shapes = shapes.slice(0, -1)
+    redrawBase()
+  }
+
+  function clearAll() {
+    shapes = []
+    redrawBase()
+  }
+
+  function handleSave() {
+    onsave(shapes)
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    e.stopPropagation()
+    if (e.key === "Escape" && drawState !== "typing") {
+      oncancel()
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "z") {
+      e.preventDefault()
+      undo()
+    }
+  }
+
+  const toolDefs: { tool: MarkupTool; label: string; icon: string }[] = [
+    { tool: "arrow", label: "Arrow", icon: "M5 19L19 5M19 5H9M19 5V15" },
+    { tool: "rectangle", label: "Box", icon: "M3 3h18v18H3z" },
+    {
+      tool: "ellipse",
+      label: "Circle",
+      icon: "", // special SVG
+    },
+    {
+      tool: "cloud",
+      label: "Cloud",
+      icon: "", // special SVG
+    },
+    {
+      tool: "freehand",
+      label: "Draw",
+      icon: "M3 17c1-2 3-6 5-6s3 4 5 4 3-6 5-6 2 4 3 4",
+    },
+    {
+      tool: "text",
+      label: "Text",
+      icon: "M6 4v16M18 4v16M6 12h12M8 4h-4M20 4h-4M8 20h-4M20 20h-4",
+    },
+  ]
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="fixed inset-0 z-50 bg-black/90 flex flex-col items-center"
+  onkeydown={handleKeydown}
+  onkeyup={(e) => e.stopPropagation()}
+  onkeypress={(e) => e.stopPropagation()}
+>
+  <!-- Toolbar -->
+  <div
+    class="flex items-center gap-1.5 px-3 py-2 bg-base-300 border-b border-base-content/10 w-full flex-shrink-0 flex-wrap"
+  >
+    <!-- Tool buttons -->
+    <div class="flex items-center gap-1">
+      {#each toolDefs as t}
+        <button
+          class="btn btn-xs gap-1 {tool === t.tool
+            ? 'btn-primary'
+            : 'btn-ghost text-base-content/60 hover:text-base-content'}"
+          onclick={() => {
+            tool = t.tool
+          }}
+          title={t.label}
+        >
+          {#if t.tool === "ellipse"}
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <ellipse
+                cx="12"
+                cy="12"
+                rx="10"
+                ry="7"
+                stroke="currentColor"
+                stroke-width="2"
+                fill="none"
+              />
+            </svg>
+          {:else if t.tool === "cloud"}
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M6 19a4 4 0 01-.88-7.903A5 5 0 1115.9 6h.1a4 4 0 110 8h-4"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                fill="none"
+              />
+            </svg>
+          {:else}
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <path
+                d={t.icon}
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                fill="none"
+              />
+            </svg>
+          {/if}
+          <span class="hidden sm:inline text-[11px]">{t.label}</span>
+        </button>
+      {/each}
+    </div>
+
+    <div class="divider divider-horizontal mx-0.5 h-5"></div>
+
+    <!-- Color swatches -->
+    <div class="flex items-center gap-1">
+      {#each MARKUP_COLORS as c}
+        <button
+          class="w-5 h-5 rounded-full border-2 transition-transform {color === c
+            ? 'border-white scale-110'
+            : 'border-transparent hover:scale-105'}"
+          style="background: {c}; {c === '#111827'
+            ? 'border-color: #6b7280;'
+            : ''}"
+          onclick={() => {
+            color = c
+          }}
+          title={c}
+        ></button>
+      {/each}
+    </div>
+
+    <div class="divider divider-horizontal mx-0.5 h-5"></div>
+
+    <!-- Actions -->
+    <div class="flex items-center gap-1">
+      <button
+        class="btn btn-xs btn-ghost text-base-content/60"
+        onclick={undo}
+        disabled={shapes.length === 0}
+        title="Undo (Ctrl+Z)"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M3 10h10a5 5 0 015 5v0a5 5 0 01-5 5H8M3 10l4-4M3 10l4 4"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span class="hidden sm:inline">Undo</span>
+      </button>
+      <button
+        class="btn btn-xs btn-ghost text-base-content/60"
+        onclick={clearAll}
+        disabled={shapes.length === 0}
+        title="Clear all"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M3 6h18M8 6V4h8v2M10 11v6M14 11v6M5 6l1 14h12l1-14"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span class="hidden sm:inline">Clear</span>
+      </button>
+    </div>
+
+    <div class="flex-1"></div>
+
+    <!-- Save/Cancel -->
+    <div class="flex items-center gap-1.5">
+      <button class="btn btn-xs btn-ghost" onclick={oncancel}>Cancel</button>
+      <button class="btn btn-xs btn-primary" onclick={handleSave}>
+        Save Markup
+      </button>
+    </div>
+  </div>
+
+  <!-- Canvas area -->
+  <div
+    class="flex-1 flex items-center justify-center relative overflow-hidden p-5"
+  >
+    {#if loadError}
+      <div class="text-center text-error">
+        <p>Failed to load image</p>
+      </div>
+    {:else if loaded}
+      <canvas
+        bind:this={baseCanvas}
+        width={imgW}
+        height={imgH}
+        class="markup-base-canvas rounded"
+      ></canvas>
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <canvas
+        bind:this={overlayCanvas}
+        width={imgW}
+        height={imgH}
+        class="markup-overlay-canvas"
+        class:cursor-crosshair={tool !== "text"}
+        class:cursor-text={tool === "text"}
+        onmousedown={onPointerDown}
+        onmousemove={onPointerMove}
+        onmouseup={onPointerUp}
+      ></canvas>
+    {:else}
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    {/if}
+  </div>
+
+  <!-- Text input overlay -->
+  {#if drawState === "typing"}
+    <input
+      bind:this={textInput}
+      type="text"
+      class="fixed bg-transparent border border-dashed border-white/50 outline-none text-base font-bold font-sans px-1 py-0.5 z-[60] min-w-[80px]"
+      style="left: {textInputCss.left}; top: {textInputCss.top}; color: {color};"
+      bind:value={textValue}
+      onkeydown={handleTextKeydown}
+      onblur={commitText}
+      placeholder="Type here..."
+    />
+  {/if}
+
+  <!-- Shapes count indicator -->
+  {#if shapes.length > 0}
+    <div
+      class="absolute bottom-4 left-4 badge badge-neutral badge-sm opacity-60"
+    >
+      {shapes.length} shape{shapes.length !== 1 ? "s" : ""}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .markup-base-canvas,
+  .markup-overlay-canvas {
+    max-width: calc(100vw - 80px);
+    max-height: calc(100vh - 120px);
+    object-fit: contain;
+  }
+
+  .markup-base-canvas {
+    display: block;
+  }
+
+  .markup-overlay-canvas {
+    position: absolute;
+  }
+</style>

package/src/lib/components/MarkupOverlay.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+  import type { MarkupShape } from './markup'
+  import { renderAllShapes } from './markup'
+
+  interface Props {
+    shapes: MarkupShape[]
+    imageUrl: string
+  }
+
+  let { shapes, imageUrl }: Props = $props()
+
+  let canvas: HTMLCanvasElement | undefined = $state()
+  let imgW = $state(0)
+  let imgH = $state(0)
+  let loaded = $state(false)
+
+  function render() {
+    if (!canvas || !loaded || shapes.length === 0) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    canvas.width = imgW
+    canvas.height = imgH
+    ctx.clearRect(0, 0, imgW, imgH)
+    renderAllShapes(ctx, shapes)
+  }
+
+  onMount(() => {
+    const img = new Image()
+    img.crossOrigin = "anonymous"
+    img.onload = () => {
+      imgW = img.naturalWidth
+      imgH = img.naturalHeight
+      loaded = true
+      requestAnimationFrame(render)
+    }
+    img.src = imageUrl
+  })
+
+  // Re-render when shapes change
+  $effect(() => {
+    if (shapes && loaded) {
+      render()
+    }
+  })
+</script>
+
+{#if loaded && shapes.length > 0}
+  <canvas
+    bind:this={canvas}
+    width={imgW}
+    height={imgH}
+    class="absolute inset-0 w-full h-full pointer-events-none z-[5]"
+  ></canvas>
+{/if}