feat(expo): annotation store and gesture-based canvas (pen tool v1)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Ripwords

packages/expo/src/annotation/canvas.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from "react"
+import { View } from "react-native"
+import { GestureDetector, Gesture } from "react-native-gesture-handler"
+import Svg, { Path } from "react-native-svg"
+import type { AnnotationStore } from "./store"
+import type { Shape, Tool, PenPoint } from "@reprojs/sdk-utils"
+import { newShapeId } from "@reprojs/sdk-utils"
+
+interface Props {
+  width: number
+  height: number
+  tool: Tool
+  color: string
+  strokeWidth: number
+  store: AnnotationStore
+}
+
+export function AnnotationCanvas({ width, height, tool, color, strokeWidth, store }: Props) {
+  const [draft, setDraft] = useState<PenPoint[]>([])
+
+  const pan = Gesture.Pan()
+    .onStart((e) => {
+      setDraft([{ x: e.x, y: e.y, p: 1 }])
+    })
+    .onUpdate((e) => {
+      setDraft((d) => [...d, { x: e.x, y: e.y, p: 1 }])
+    })
+    .onEnd(() => {
+      if (draft.length === 0) {
+        setDraft([])
+        return
+      }
+      const shape = buildShape(tool, draft, color, strokeWidth)
+      if (shape) store.addShape(shape)
+      setDraft([])
+    })
+
+  return (
+    <GestureDetector gesture={pan}>
+      <View style={{ width, height }}>
+        <Svg width={width} height={height}>
+          {store.snapshot().map((s, i) => renderCommitted(s, i))}
+          {draft.length > 0 && renderDraft(tool, draft, color, strokeWidth)}
+        </Svg>
+      </View>
+    </GestureDetector>
+  )
+}
+
+function buildShape(
+  tool: Tool,
+  points: PenPoint[],
+  color: string,
+  strokeWidth: number,
+): Shape | null {
+  const first = points[0]
+  const last = points[points.length - 1]
+  if (!first || !last) return null
+  const id = newShapeId()
+  if (tool === "pen") return { kind: "pen", id, color, strokeWidth, points }
+  if (tool === "arrow")
+    return {
+      kind: "arrow",
+      id,
+      color,
+      strokeWidth,
+      x1: first.x,
+      y1: first.y,
+      x2: last.x,
+      y2: last.y,
+    }
+  if (tool === "rect" || tool === "highlight") {
+    return {
+      kind: tool,
+      id,
+      color,
+      strokeWidth,
+      x: Math.min(first.x, last.x),
+      y: Math.min(first.y, last.y),
+      w: Math.abs(last.x - first.x),
+      h: Math.abs(last.y - first.y),
+    }
+  }
+  if (tool === "text")
+    return {
+      kind: "text",
+      id,
+      color,
+      strokeWidth,
+      x: first.x,
+      y: first.y,
+      w: 120,
+      h: 24,
+      content: "Tap to edit",
+      fontSize: 16,
+    }
+  return null
+}
+
+function renderCommitted(s: Shape, key: number): React.ReactNode {
+  if (s.kind === "pen") {
+    const d = s.points.map((pt, i) => `${i === 0 ? "M" : "L"}${pt.x},${pt.y}`).join(" ")
+    return <Path key={key} d={d} stroke={s.color} strokeWidth={s.strokeWidth} fill="none" />
+  }
+  // v1: only pen strokes rendered in-canvas; other shapes appear via the flatten view on submit.
+  return null
+}
+
+function renderDraft(
+  tool: Tool,
+  points: PenPoint[],
+  color: string,
+  strokeWidth: number,
+): React.ReactNode {
+  if (tool !== "pen") return null
+  const d = points.map((pt, i) => `${i === 0 ? "M" : "L"}${pt.x},${pt.y}`).join(" ")
+  return <Path d={d} stroke={color} strokeWidth={strokeWidth} fill="none" />
+}

packages/expo/src/annotation/store.test.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "bun:test"
+import { createAnnotationStore } from "./store"
+import { newShapeId } from "@reprojs/sdk-utils"
+import type { Shape } from "@reprojs/sdk-utils"
+
+function rect(color = "#f00", x = 0): Shape {
+  return { kind: "rect", id: newShapeId(), color, strokeWidth: 2, x, y: 0, w: 1, h: 1 }
+}
+
+test("addShape appends and snapshot returns the list", () => {
+  const s = createAnnotationStore()
+  s.addShape(rect())
+  expect(s.snapshot()).toHaveLength(1)
+})
+
+test("undo removes last, redo re-adds", () => {
+  const s = createAnnotationStore()
+  s.addShape(rect())
+  s.undo()
+  expect(s.snapshot()).toHaveLength(0)
+  s.redo()
+  expect(s.snapshot()).toHaveLength(1)
+})
+
+test("addShape after undo discards redo stack", () => {
+  const s = createAnnotationStore()
+  s.addShape(rect("#f00", 0))
+  s.undo()
+  s.addShape(rect("#0f0", 1))
+  expect(s.snapshot()).toHaveLength(1)
+  s.redo() // no-op
+  expect(s.snapshot()).toHaveLength(1)
+})
+
+test("clear empties and resets stacks", () => {
+  const s = createAnnotationStore()
+  s.addShape(rect())
+  s.clear()
+  expect(s.snapshot()).toEqual([])
+  s.redo()
+  expect(s.snapshot()).toEqual([])
+})

packages/expo/src/annotation/store.ts

@@ -0,0 +1,52 @@
+import type { Shape } from "@reprojs/sdk-utils"
+
+export interface AnnotationStore {
+  addShape: (s: Shape) => void
+  undo: () => void
+  redo: () => void
+  clear: () => void
+  snapshot: () => Shape[]
+  subscribe: (fn: () => void) => () => void
+}
+
+export function createAnnotationStore(): AnnotationStore {
+  let shapes: Shape[] = []
+  let redoStack: Shape[] = []
+  const listeners = new Set<() => void>()
+  const notify = () => {
+    for (const l of listeners) l()
+  }
+  return {
+    addShape(s) {
+      shapes = [...shapes, s]
+      redoStack = []
+      notify()
+    },
+    undo() {
+      if (!shapes.length) return
+      const popped = shapes[shapes.length - 1]
+      shapes = shapes.slice(0, -1)
+      if (popped) redoStack = [...redoStack, popped]
+      notify()
+    },
+    redo() {
+      if (!redoStack.length) return
+      const last = redoStack[redoStack.length - 1]
+      redoStack = redoStack.slice(0, -1)
+      if (last) shapes = [...shapes, last]
+      notify()
+    },
+    clear() {
+      shapes = []
+      redoStack = []
+      notify()
+    },
+    snapshot: () => shapes,
+    subscribe(fn) {
+      listeners.add(fn)
+      return () => {
+        listeners.delete(fn)
+      }
+    },
+  }
+}

packages/expo/src/annotation/toolbar.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Pressable, Text, View } from "react-native"
+import type { Tool } from "@reprojs/sdk-utils"
+import type { AnnotationStore } from "./store"
+
+interface Props {
+  tool: Tool
+  onToolChange: (t: Tool) => void
+  store: AnnotationStore
+}
+
+const TOOLS: Tool[] = ["pen", "arrow", "rect", "highlight", "text"]
+
+export function AnnotationToolbar({ tool, onToolChange, store }: Props) {
+  return (
+    <View style={{ flexDirection: "row", padding: 8, gap: 8 }}>
+      {TOOLS.map((t) => (
+        <Pressable
+          key={t}
+          onPress={() => onToolChange(t)}
+          style={{ padding: 8, backgroundColor: t === tool ? "#6366f1" : "#e5e7eb" }}
+        >
+          <Text style={{ color: t === tool ? "white" : "#111" }}>{t}</Text>
+        </Pressable>
+      ))}
+      <Pressable onPress={() => store.undo()} style={{ padding: 8, backgroundColor: "#e5e7eb" }}>
+        <Text>undo</Text>
+      </Pressable>
+      <Pressable onPress={() => store.redo()} style={{ padding: 8, backgroundColor: "#e5e7eb" }}>
+        <Text>redo</Text>
+      </Pressable>
+      <Pressable onPress={() => store.clear()} style={{ padding: 8, backgroundColor: "#e5e7eb" }}>
+        <Text>clear</Text>
+      </Pressable>
+    </View>
+  )
+}