@1agh/maude 1.4.5 → 1.5.0

package/apps/studio/annotations/ui/pipeline-context.ts

@@ -0,0 +1,17 @@
+/**
+ * @file       annotations/ui/pipeline-context.ts — the layer's pointer pipeline, for its chrome
+ * @scope      apps/studio/annotations/ui/pipeline-context.ts
+ * @purpose    Components the annotation layer renders (the resize overlay's
+ *             handles) start their gestures on the layer's one pipeline
+ *             (pointer-pipeline.ts) instead of adding document listeners of
+ *             their own.
+ */
+
+import { createContext, useContext } from 'react';
+import type { PointerPipeline } from './pointer-pipeline.ts';
+
+export const AnnotationPipelineContext = createContext<PointerPipeline | null>(null);
+
+export function useAnnotationPipeline(): PointerPipeline | null {
+  return useContext(AnnotationPipelineContext);
+}

package/apps/studio/annotations/ui/pointer-pipeline.ts

@@ -0,0 +1,150 @@
+/**
+ * @file       annotations/ui/pointer-pipeline.ts — one pointer pipeline for the annotation layer
+ * @scope      apps/studio/annotations/ui/pointer-pipeline.ts
+ * @purpose    DDR-242 AD8 (Task 21). The layer used to install a document
+ *             capture listener per interaction (select/drag/marquee, group
+ *             resize, connector dots, right-click…), each with its own
+ *             per-gesture pointermove/up listeners and its own copy of the
+ *             "is this chrome?" skip-list. Which one won depended on the
+ *             order effects happened to register, and a skip-list that missed
+ *             one class turned a handle drag into a marquee (ce641b18) or an
+ *             artboard drag into a lost selection (3db83a8a).
+ *
+ *             Here there is ONE set of document listeners. Stages are tried
+ *             in explicit priority order (lowest first); the first to claim a
+ *             pointerdown owns the gesture, and only that gesture sees the
+ *             following moves and the release. `state` is the tool state
+ *             machine's current node: `idle`, or the kind of the gesture in
+ *             flight (`dragging`, `marquee`, `resizing`, `connecting`, …).
+ *
+ *             Pure DOM, React-free: the layer registers stages from effects.
+ */
+
+export interface Gesture {
+  /** State-machine node while this gesture runs (`dragging`, `marquee`, …). */
+  kind: string;
+  move?(e: PointerEvent): void;
+  up?(e: PointerEvent): void;
+  /** Pointercancel, or a new pointerdown arriving before the release. */
+  cancel?(e: PointerEvent | null): void;
+}
+
+/**
+ * What a stage answers to a pointerdown:
+ *   - a Gesture: claimed, the stage owns the moves and the release;
+ *   - 'pass': claimed for someone else — the target's own handlers (a resize
+ *     handle, a toolbar button, a text editor) run; no later stage does;
+ *   - undefined / false: not mine, try the next stage.
+ */
+export type Claim = Gesture | 'pass' | undefined | false | void;
+
+export interface Stage {
+  /** Lower runs first. */
+  priority: number;
+  name: string;
+  down(e: PointerEvent): Claim;
+}
+
+export interface PipelineTrace {
+  stage: string;
+  claim: 'gesture' | 'pass';
+  kind?: string;
+}
+
+export class PointerPipeline {
+  private stages: Stage[] = [];
+  private active: { gesture: Gesture; pointerId: number } | null = null;
+  private listeners: Array<[string, EventListener]> = [];
+  private doc: Document | null = null;
+  /** Last claim, for tooling and tests. */
+  lastClaim: PipelineTrace | null = null;
+  onState: ((state: string) => void) | null = null;
+
+  get state(): string {
+    return this.active?.gesture.kind ?? 'idle';
+  }
+
+  /** Register a stage; returns its unregister function. */
+  add(stage: Stage): () => void {
+    this.stages = [...this.stages, stage].sort((a, b) => a.priority - b.priority);
+    return () => {
+      this.stages = this.stages.filter((s) => s !== stage);
+    };
+  }
+
+  attach(doc: Document): () => void {
+    this.detach();
+    this.doc = doc;
+    const on = (type: string, fn: (e: PointerEvent) => void) => {
+      const l = fn as unknown as EventListener;
+      doc.addEventListener(type, l, true);
+      this.listeners.push([type, l]);
+    };
+    on('pointerdown', (e) => this.down(e));
+    on('pointermove', (e) => this.move(e));
+    on('pointerup', (e) => this.up(e));
+    on('pointercancel', (e) => this.cancel(e));
+    return () => this.detach();
+  }
+
+  detach(): void {
+    if (this.doc) {
+      for (const [type, l] of this.listeners) this.doc.removeEventListener(type, l, true);
+    }
+    this.listeners = [];
+    this.doc = null;
+    this.end(null);
+  }
+
+  /** Start a gesture from outside a stage (a stage that claimed via 'pass' but still wants moves). */
+  begin(pointerId: number, gesture: Gesture): void {
+    this.end(null);
+    this.active = { gesture, pointerId };
+    this.onState?.(gesture.kind);
+  }
+
+  private end(e: PointerEvent | null): void {
+    const a = this.active;
+    if (!a) return;
+    this.active = null;
+    a.gesture.cancel?.(e);
+    this.onState?.('idle');
+  }
+
+  private down(e: PointerEvent): void {
+    // A second pointer (or a lost release) ends whatever was running.
+    if (this.active) this.end(e);
+    for (const stage of this.stages) {
+      const claim = stage.down(e);
+      if (!claim) continue;
+      if (claim === 'pass') {
+        this.lastClaim = { stage: stage.name, claim: 'pass' };
+        return;
+      }
+      this.lastClaim = { stage: stage.name, claim: 'gesture', kind: claim.kind };
+      this.active = { gesture: claim, pointerId: e.pointerId };
+      this.onState?.(claim.kind);
+      return;
+    }
+    this.lastClaim = null;
+  }
+
+  private move(e: PointerEvent): void {
+    const a = this.active;
+    if (a && e.pointerId === a.pointerId) a.gesture.move?.(e);
+  }
+
+  private up(e: PointerEvent): void {
+    const a = this.active;
+    if (!a || e.pointerId !== a.pointerId) return;
+    this.active = null;
+    a.gesture.up?.(e);
+    this.onState?.('idle');
+  }
+
+  private cancel(e: PointerEvent): void {
+    const a = this.active;
+    if (!a || e.pointerId !== a.pointerId) return;
+    this.end(e);
+  }
+}

package/apps/studio/annotations/ui/render-model.ts

@@ -0,0 +1,264 @@
+/**
+ * @file       annotations/ui/render-model.ts — what the scene draws, per element
+ * @scope      apps/studio/annotations/ui/render-model.ts
+ * @purpose    The scene (element-node.tsx) draws v2 element records in WORLD
+ *             space, one DOM node per element, in paint order. A `RenderItem`
+ *             is that record plus what the scene resolved for it (arrow
+ *             endpoints).
+ *
+ *             `renderItemsFromStrokes` is the TRANSITIONAL source while the
+ *             layer still edits v1 `Stroke[]` (removed with the v1 adapter,
+ *             Task 26). It maps each stroke straight to a view record WITHOUT
+ *             the validator: the UI also draws states that are never persisted
+ *             (an image whose upload is still running carries a `blob:` href
+ *             the validator would drop, making the picture blink out). One
+ *             record per stroke object, cached, so an unchanged stroke keeps
+ *             its record identity and its node skips re-rendering.
+ */
+
+import type { Stroke } from '../../annotations-model.ts';
+import type { AnnotationElement } from '../types.ts';
+
+export interface ArrowAnchor {
+  el: string;
+  nx: number;
+  ny: number;
+}
+
+/** World endpoints of an arrow plus the magnet each bound end sits on. */
+export interface ResolvedEnds {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  startAnchor?: ArrowAnchor;
+  endAnchor?: ArrowAnchor;
+}
+
+export interface RenderItem {
+  /** World-space record (no `parent`: containment is already resolved). */
+  el: AnnotationElement;
+  ends?: ResolvedEnds;
+}
+
+type Label = Extract<Stroke, { tool: 'text' }>;
+
+function fmt(s: {
+  bold?: boolean;
+  italic?: boolean;
+  strike?: boolean;
+  underline?: boolean;
+  listType?: string;
+  align?: string;
+}): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  if (s.bold) out.bold = true;
+  if (s.italic) out.italic = true;
+  if (s.strike) out.strike = true;
+  if (s.underline) out.underline = true;
+  if (s.listType) out.list = s.listType;
+  if (s.align) out.align = s.align;
+  return out;
+}
+
+function author(s: Stroke): Record<string, unknown> {
+  if (s.author === 'ai') return { author: { kind: 'ai' } };
+  if (s.authorName) return { author: { kind: 'human', name: s.authorName } };
+  return {};
+}
+
+function box(x: number, y: number, w: number, h: number) {
+  return {
+    x: Math.min(x, x + w),
+    y: Math.min(y, y + h),
+    w: Math.abs(w),
+    h: Math.abs(h),
+  };
+}
+
+/** One stroke (and a shape's anchored label) → its world-space view record. */
+export function strokeToRenderItem(s: Stroke, label?: Label): RenderItem | null {
+  const head = { id: s.id, index: 'a0', ...author(s) };
+  const rot = s.rotation ? { rot: s.rotation } : {};
+  switch (s.tool) {
+    case 'element':
+      return { el: { ...s.el, id: s.id } };
+    case 'sticky':
+      return {
+        el: {
+          ...head,
+          type: 'sticky',
+          ...box(s.x, s.y, s.w, s.h),
+          ...rot,
+          fill: s.color,
+          text: s.text,
+          fontSize: s.fontSize,
+          radius: s.cornerRadius,
+          ...fmt(s),
+        },
+      };
+    case 'text':
+      if (s.anchorId) return null; // drawn inside its host
+      return {
+        el: {
+          ...head,
+          type: 'text',
+          x: s.x ?? 0,
+          y: s.y ?? 0,
+          ...rot,
+          text: s.text,
+          fontSize: s.fontSize,
+          color: s.color,
+          ...fmt(s),
+        },
+      };
+    case 'rect':
+    case 'ellipse':
+    case 'polygon': {
+      const b =
+        s.tool === 'ellipse'
+          ? { x: s.cx - s.rx, y: s.cy - s.ry, w: s.rx * 2, h: s.ry * 2 }
+          : box(s.x, s.y, s.w, s.h);
+      return {
+        el: {
+          ...head,
+          type: 'shape',
+          kind: s.tool === 'polygon' ? s.shape : s.tool,
+          ...b,
+          ...rot,
+          color: s.color,
+          width: s.width,
+          fill: s.fill ?? null,
+          ...(s.tool === 'rect' && s.cornerRadius ? { radius: s.cornerRadius } : {}),
+          ...(s.dashed ? { dashed: true } : {}),
+          ...(label
+            ? {
+                label: {
+                  text: label.text,
+                  fontSize: label.fontSize,
+                  color: label.color,
+                  ...fmt(label),
+                },
+              }
+            : {}),
+        },
+      };
+    }
+    case 'arrow':
+      return {
+        el: {
+          ...head,
+          type: 'arrow',
+          start: { x: s.x1, y: s.y1 },
+          end: { x: s.x2, y: s.y2 },
+          color: s.color,
+          width: s.width,
+          ...(s.startHead ? { startHead: s.startHead } : {}),
+          ...(s.endHead ? { endHead: s.endHead } : {}),
+          ...(s.dashed ? { dashed: true } : {}),
+          ...(s.lineType ? { line: s.lineType } : {}),
+        },
+        ends: {
+          x1: s.x1,
+          y1: s.y1,
+          x2: s.x2,
+          y2: s.y2,
+          ...(s.startBind
+            ? { startAnchor: { el: s.startBind.hostId, nx: s.startBind.nx, ny: s.startBind.ny } }
+            : {}),
+          ...(s.endBind
+            ? { endAnchor: { el: s.endBind.hostId, nx: s.endBind.nx, ny: s.endBind.ny } }
+            : {}),
+        },
+      };
+    case 'pen':
+      return {
+        el: {
+          ...head,
+          type: 'pen',
+          points: s.points.flat(),
+          color: s.color,
+          width: s.width,
+          ...(s.highlighter ? { highlighter: true } : {}),
+        },
+      };
+    case 'image':
+      return {
+        el: {
+          ...head,
+          type: 'image',
+          ...box(s.x, s.y, s.w, s.h),
+          ...rot,
+          href: s.href,
+          alt: s.alt ?? '',
+        },
+      };
+    case 'link':
+      return {
+        el: {
+          ...head,
+          type: 'link',
+          ...box(s.x, s.y, s.w, s.h),
+          ...rot,
+          url: s.url,
+          title: s.title,
+          domain: s.domain,
+        },
+      };
+    case 'mediaref':
+      return {
+        el: {
+          ...head,
+          type: 'mediaref',
+          ...box(s.x, s.y, s.w, s.h),
+          ...rot,
+          src: s.src,
+          media: s.mediaKind,
+          title: s.title,
+        },
+      };
+    case 'section':
+      return {
+        el: {
+          ...head,
+          type: 'section',
+          ...box(s.x, s.y, s.w, s.h),
+          label: s.label,
+          color: s.color,
+        },
+      };
+    default:
+      return null;
+  }
+}
+
+const cache = new WeakMap<Stroke, { label: Label | undefined; item: RenderItem | null }>();
+
+/**
+ * The strokes in paint order as view records. `unknown` are elements of a type
+ * this build does not know (a newer peer's) — drawn as labelled placeholders,
+ * never dropped.
+ */
+export function renderItemsFromStrokes(
+  strokes: readonly Stroke[],
+  unknown: readonly AnnotationElement[] = []
+): RenderItem[] {
+  const labels = new Map<string, Label>();
+  for (const s of strokes) {
+    if (s.tool === 'text' && s.anchorId && !labels.has(s.anchorId)) labels.set(s.anchorId, s);
+  }
+  const out: RenderItem[] = [];
+  for (const s of strokes) {
+    const label = labels.get(s.id);
+    const hit = cache.get(s);
+    let item: RenderItem | null;
+    if (hit && hit.label === label) item = hit.item;
+    else {
+      item = strokeToRenderItem(s, label);
+      cache.set(s, { label, item });
+    }
+    if (item) out.push(item);
+  }
+  for (const el of unknown) out.push({ el });
+  return out;
+}

package/apps/studio/annotations/ui/scene.tsx

@@ -0,0 +1,63 @@
+/**
+ * @file       annotations/ui/scene.tsx — the annotation elements, in paint order
+ * @scope      apps/studio/annotations/ui/scene.tsx
+ * @purpose    Portaled into `.dc-world` (whose CSS transform does pan/zoom), one
+ *             node per element (element-node.tsx). Selection chrome (halos,
+ *             marquee, guides, handles) stays in the `.dc-annot-svg` overlay the
+ *             layer renders after this, so it always paints on top.
+ *
+ *             `data-mdcc-annotations` marks the scene for export capture, which
+ *             hides annotations from exported artboards.
+ */
+
+import { type EditRequest, ElementNode, PendingTextNode } from './element-node.tsx';
+import type { RenderItem } from './render-model.ts';
+
+export interface PendingText {
+  x: number;
+  y: number;
+  color: string;
+  fontSize: number;
+}
+
+export function AnnotationScene({
+  items,
+  interactive,
+  editingId,
+  edit,
+  pending,
+  resolveAsset,
+}: {
+  items: readonly RenderItem[];
+  interactive: boolean;
+  /** Element whose text slot is open in the editor. */
+  editingId: string | null;
+  edit: EditRequest | null;
+  /** A text caret not yet backed by an element (born on commit). */
+  pending: PendingText | null;
+  resolveAsset: (href: string) => string;
+}) {
+  return (
+    <div className="dc-annot-scene" data-mdcc-annotations="1">
+      {items.map((it) => (
+        <ElementNode
+          key={it.el.id}
+          el={it.el}
+          ends={it.ends}
+          interactive={interactive}
+          edit={it.el.id === editingId ? edit : null}
+          resolveAsset={resolveAsset}
+        />
+      ))}
+      {pending && edit ? (
+        <PendingTextNode
+          x={pending.x}
+          y={pending.y}
+          color={pending.color}
+          fontSize={pending.fontSize}
+          edit={edit}
+        />
+      ) : null}
+    </div>
+  );
+}