@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/sketch.ts

@@ -0,0 +1,139 @@
+import type { Sketch } from "../core/index.js";
+import { elementAt } from "./capture.js";
+import { INK, INK_HALO, type Point } from "./ink.js";
+
+export { INK, INK_HALO, type Point } from "./ink.js";
+export type InkBox = { left: number; top: number; right: number; bottom: number };
+
+/** Most points one stroke keeps once simplified, so the anchor stays well under the service's size limit. */
+const MAX_POINTS = 240;
+/** A stroke smaller than this many pixels both ways is a tap, not a drawing. */
+const MIN_SIZE = 6;
+/** The drawn-on element must cover at least this share of the drawing's box, so circling a button picks the button. */
+const COVER = 0.25;
+
+/** Drops points within `tolerance` px of the line through their neighbours (Ramer–Douglas–Peucker). */
+export function simplify(points: Point[], tolerance = 1.5): Point[] {
+  if (points.length < 3) return points;
+  const keep = new Uint8Array(points.length);
+  keep[0] = 1;
+  keep[points.length - 1] = 1;
+  const stack: Array<[number, number]> = [[0, points.length - 1]];
+  while (stack.length) {
+    const [first, last] = stack.pop()!;
+    const a = points[first]!;
+    const b = points[last]!;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const length = Math.hypot(dx, dy) || 1;
+    let far = 0;
+    let index = -1;
+    for (let i = first + 1; i < last; i += 1) {
+      const p = points[i]!;
+      const distance =
+        dx || dy
+          ? Math.abs(dy * p.x - dx * p.y + b.x * a.y - b.y * a.x) / length
+          : Math.hypot(p.x - a.x, p.y - a.y);
+      if (distance > far) {
+        far = distance;
+        index = i;
+      }
+    }
+    if (index > 0 && far > tolerance) {
+      keep[index] = 1;
+      stack.push([first, index], [index, last]);
+    }
+  }
+  const kept = points.filter((_, i) => keep[i]);
+  if (kept.length <= MAX_POINTS) return kept;
+  return simplify(kept, tolerance * 2);
+}
+
+export function inkBox(points: Point[]): InkBox {
+  let left = Infinity;
+  let top = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  for (const { x, y } of points) {
+    left = Math.min(left, x);
+    top = Math.min(top, y);
+    right = Math.max(right, x);
+    bottom = Math.max(bottom, y);
+  }
+  return { left, top, right, bottom };
+}
+
+export function isTap(box: InkBox) {
+  return box.right - box.left < MIN_SIZE && box.bottom - box.top < MIN_SIZE;
+}
+
+/**
+ * The element a drawing is about: under the middle of the drawing, widened to the nearest ancestor that covers
+ * a fair share of it. Circling a button picks the button; circling a whole card picks the card.
+ */
+export function elementUnder(box: InkBox): Element | null {
+  let element = elementAt((box.left + box.right) / 2, (box.top + box.bottom) / 2);
+  const area = Math.max(1, (box.right - box.left) * (box.bottom - box.top));
+  while (element && element.parentElement && element.parentElement !== document.body) {
+    const rect = element.getBoundingClientRect();
+    if (rect.width * rect.height >= area * COVER) break;
+    element = element.parentElement;
+  }
+  return element;
+}
+
+/** Strokes in viewport coordinates, stored relative to `element`'s box. */
+export function sketchFor(element: Element, strokes: Point[][]): Sketch {
+  const rect = element.getBoundingClientRect();
+  return {
+    w: Math.round(rect.width),
+    h: Math.round(rect.height),
+    paths: strokes.map((stroke) =>
+      stroke.flatMap(({ x, y }) => [Math.round(x - rect.left), Math.round(y - rect.top)]),
+    ),
+  };
+}
+
+/** The drawing's box, relative to the element it is stored against. */
+export function sketchBox(sketch: Sketch): InkBox {
+  const points: Point[] = [];
+  for (const path of sketch.paths)
+    for (let i = 0; i + 1 < path.length; i += 2) points.push({ x: path[i]!, y: path[i + 1]! });
+  return inkBox(points);
+}
+
+/** A smooth SVG path through a flat x, y list: quadratic curves through each pair of midpoints. */
+export function pathData(path: number[], dx = 0, dy = 0) {
+  if (path.length < 4) return "";
+  const x = (i: number) => path[i * 2]! + dx;
+  const y = (i: number) => path[i * 2 + 1]! + dy;
+  const count = path.length / 2;
+  let d = `M${x(0)} ${y(0)}`;
+  for (let i = 1; i < count - 1; i += 1) {
+    d += ` Q${x(i)} ${y(i)} ${(x(i) + x(i + 1)) / 2} ${(y(i) + y(i + 1)) / 2}`;
+  }
+  return `${d} L${x(count - 1)} ${y(count - 1)}`;
+}
+
+/** Paints `sketch` on a canvas, given where its element's top-left corner lands and the canvas scale. */
+export function paintSketch(
+  ctx: CanvasRenderingContext2D,
+  sketch: Sketch,
+  origin: Point,
+  scale: number,
+) {
+  ctx.save();
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.scale(scale, scale);
+  const shape = new Path2D(
+    sketch.paths.map((path) => pathData(path, origin.x, origin.y)).join(" "),
+  );
+  ctx.lineWidth = 6;
+  ctx.strokeStyle = INK_HALO;
+  ctx.stroke(shape);
+  ctx.lineWidth = 3;
+  ctx.strokeStyle = INK;
+  ctx.stroke(shape);
+  ctx.restore();
+}