@bendyline/squisq-editor-react 1.5.3 → 1.6.0

package/src/scene/layers/nodeCard.tsx

@@ -0,0 +1,145 @@
+/**
+ * nodeCard — synthesize the (rect + label) layer pair for a diagram node.
+ *
+ * Mirrors the shape `diagramBlock.ts` emits for SSR so the editor and
+ * preview render identical pixels. The actual Layer instances are
+ * regular ShapeLayer + TextLayer objects — the Scene's RenderLayer
+ * draws them with the normal SSR components.
+ *
+ * Edges are NOT generated here; the DiagramAdapter renders edges as a
+ * separate PathLayer pass since they need to be drawn behind the cards.
+ */
+
+import type { ShapeLayer, TextLayer, Layer } from '@bendyline/squisq/schemas';
+
+export const NODE_WIDTH = 180;
+export const NODE_HEIGHT = 64;
+
+export interface DiagramNodeDescriptor {
+  /** Stable id (matches the heading slug / Pandoc `#id`). */
+  id: string;
+  /** Display label. */
+  label: string;
+  /** Top-left position in viewport units. */
+  x: number;
+  /** Top-left position in viewport units. */
+  y: number;
+  /** Width in viewport units. Defaults to `NODE_WIDTH`. */
+  width?: number;
+  /** Height in viewport units. Defaults to `NODE_HEIGHT`. */
+  height?: number;
+  /** Optional override fill color (resolved from a color scheme). */
+  fill?: string;
+  /** Optional override stroke color. */
+  stroke?: string;
+  /** Optional shape: 'rect' (default) or 'pill' (fully rounded). */
+  shape?: 'rect' | 'pill';
+}
+
+/**
+ * Build a (card, label) pair of Layer objects for a diagram node. Both
+ * layers share an id prefix (`node-card-<id>` / `node-label-<id>`) so
+ * the SceneSelection overlay can highlight the card while hit-testing
+ * works on the card's bounding rect.
+ */
+export function nodeCardLayers(node: DiagramNodeDescriptor): [ShapeLayer, TextLayer] {
+  const width = node.width ?? NODE_WIDTH;
+  const height = node.height ?? NODE_HEIGHT;
+  const card: ShapeLayer = {
+    id: `node-card-${node.id}`,
+    type: 'shape',
+    position: { x: node.x, y: node.y, width, height },
+    content: {
+      shape: 'rect',
+      fill: node.fill ?? '#ffffff',
+      stroke: node.stroke ?? '#1e293b',
+      strokeWidth: 2,
+      borderRadius: node.shape === 'pill' ? height / 2 : 10,
+    },
+  };
+
+  // Scale the label font with the node height so resized cards stay
+  // legible without the text overflowing.
+  const fontSize = Math.max(12, Math.min(48, Math.round(height * 0.34)));
+
+  // Label has no explicit height — that keeps its bounding box
+  // unresolvable in `layerBounds`, which in turn keeps it out of the
+  // Scene's hit-test. The label rides along visually via `layerFollows`
+  // but never wins a pointer-down (the card underneath does), so a
+  // drag-on-text moves the card as expected.
+  const label: TextLayer = {
+    id: `node-label-${node.id}`,
+    type: 'text',
+    position: {
+      x: node.x + width / 2,
+      y: node.y + height / 2,
+      width,
+      anchor: 'center',
+    },
+    content: {
+      text: node.label,
+      style: {
+        fontSize,
+        fontWeight: 'bold',
+        color: node.stroke ?? '#1e293b',
+        textAlign: 'center',
+      },
+    },
+  };
+
+  return [card, label];
+}
+
+/**
+ * Convenience: derive a node-label id from a node-card id. Used by
+ * `layerFollows` to keep labels visually attached to their cards during
+ * drag and resize previews.
+ */
+export function labelLayerIdForCard(cardId: string): string {
+  if (!cardId.startsWith('node-card-')) return cardId;
+  return `node-label-${cardId.slice('node-card-'.length)}`;
+}
+
+/**
+ * Convenience: derive a node-card id from a node-label id.
+ */
+export function cardLayerIdForLabel(labelId: string): string {
+  if (!labelId.startsWith('node-label-')) return labelId;
+  return `node-card-${labelId.slice('node-label-'.length)}`;
+}
+
+/**
+ * Implementation of the Scene's `layerFollows` prop for diagram mode —
+ * a label layer follows its card layer, so dragging or resizing the
+ * card visually moves both.
+ */
+export function diagramLayerFollows(layerId: string): string | null {
+  if (layerId.startsWith('node-label-')) return cardLayerIdForLabel(layerId);
+  return null;
+}
+
+/**
+ * Convert a list of diagram nodes to a flat Layer[] suitable for
+ * `<Scene layers={...} />`. Returns cards followed by labels so labels
+ * paint over their cards.
+ */
+export function nodesToCardLayers(nodes: readonly DiagramNodeDescriptor[]): Layer[] {
+  const cards: ShapeLayer[] = [];
+  const labels: TextLayer[] = [];
+  for (const n of nodes) {
+    const [c, l] = nodeCardLayers(n);
+    cards.push(c);
+    labels.push(l);
+  }
+  return [...cards, ...labels];
+}
+
+/**
+ * Pull the node id back out of a card layer's synthetic id. Returns null
+ * if the layer wasn't produced by `nodeCardLayers`.
+ */
+export function nodeIdFromCardLayerId(layerId: string): string | null {
+  if (layerId.startsWith('node-card-')) return layerId.slice('node-card-'.length);
+  if (layerId.startsWith('node-label-')) return layerId.slice('node-label-'.length);
+  return null;
+}

package/src/scene/layers/renderLayer.tsx

@@ -0,0 +1,70 @@
+/**
+ * renderLayer — render a single Layer for the editor surface.
+ *
+ * Reuses the SSR layer components from `@bendyline/squisq-react` so what
+ * the editor shows matches what the final block render produces. The
+ * Scene already runs inside an SVG group with the viewport transform
+ * applied, so the SSR components — which assume they're rendered inside
+ * a `<svg>` with the viewport in user units — drop in unmodified.
+ *
+ * Editor decorations (the selection outline, drag handles) are NOT
+ * rendered here. The Scene renders the SceneSelection overlay separately
+ * so a layer's bounding rect can be highlighted without modifying the
+ * layer's own DOM.
+ */
+
+import {
+  ImageLayer,
+  TextLayer,
+  ShapeLayer,
+  PathLayer,
+  VideoLayer,
+  MapLayer,
+  TableLayer,
+} from '@bendyline/squisq-react';
+import type { Layer } from '@bendyline/squisq/schemas';
+
+interface RenderLayerProps {
+  layer: Layer;
+  viewport: { width: number; height: number };
+  /**
+   * Layer renderers accept a `blockTime` to drive Ken Burns / animations.
+   * In editor mode we always pin to t=0 so static positions are shown
+   * (no Ken Burns drift) and selection outlines stay aligned.
+   */
+  blockTime?: number;
+  /**
+   * Base path for resolving media URLs (image / video / map tile cache).
+   * Defaults to empty — the host should pass the same value used by the
+   * preview renderer so editor and preview show identical content.
+   */
+  basePath?: string;
+}
+
+export function RenderLayer({ layer, viewport, blockTime = 0, basePath = '' }: RenderLayerProps) {
+  switch (layer.type) {
+    case 'image':
+      return (
+        <ImageLayer layer={layer} viewport={viewport} blockTime={blockTime} basePath={basePath} />
+      );
+    case 'text':
+      return <TextLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+    case 'shape':
+      return <ShapeLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+    case 'path':
+      return <PathLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+    case 'video':
+      return (
+        <VideoLayer layer={layer} viewport={viewport} blockTime={blockTime} basePath={basePath} />
+      );
+    case 'map':
+      return (
+        <MapLayer layer={layer} viewport={viewport} blockTime={blockTime} basePath={basePath} />
+      );
+    case 'table':
+      return <TableLayer layer={layer} viewport={viewport} blockTime={blockTime} />;
+    default:
+      // Exhaustiveness check — TypeScript will flag any unhandled types.
+      return null;
+  }
+}

package/src/scene/layers/shapeLayers.ts

@@ -0,0 +1,201 @@
+/**
+ * shapeLayers — synthesize Scene Layer(s) for a drawing shape.
+ *
+ * The drawing editor's counterpart to `nodeCard.tsx`: a core `DrawingShape`
+ * (from `computeDrawingLayout`) becomes a primary Layer (`dshape-<id>`) plus,
+ * for non-text shapes with a label, a follower TextLayer (`dlabel-<id>`).
+ * The Scene's `RenderLayer` draws them with the normal SSR components, so the
+ * canvas and the `drawingBlock` preview render the same primitives.
+ *
+ * Coordinates are author units used 1:1 as the Scene's viewport units (the
+ * same convention diagrams use) — the SSR template fit-scales independently.
+ */
+
+import type { Layer, ShapeLayer, TextLayer, PathLayer } from '@bendyline/squisq/schemas';
+import { shapePath, type DrawingShape } from '@bendyline/squisq/doc';
+
+/** Prefix for a shape's primary (geometry) layer id. */
+const SHAPE_PREFIX = 'dshape-';
+/** Prefix for a shape's follower label layer id. */
+const LABEL_PREFIX = 'dlabel-';
+
+const DEFAULT_STROKE = '#1e293b';
+const DEFAULT_FILL = 'none';
+
+/** A `{id,x,y,width,height}` box per shape — feeds the connector renderer. */
+export interface ShapeBox {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Build the Scene layer(s) for one shape. rect/circle → ShapeLayer;
+ * line/arrow → ShapeLayer `line` (a bounding-box line, editable via the
+ * Select tool's resize handles); path → PathLayer; text → TextLayer. A
+ * non-text shape with a label also gets a centered, hit-test-transparent
+ * label layer that follows the primary (see {@link drawingLayerFollows}).
+ */
+export function shapeToLayers(shape: DrawingShape): Layer[] {
+  const { id, x, y, width, height } = shape;
+  const stroke = shape.stroke ?? DEFAULT_STROKE;
+  const fill = shape.fill ?? DEFAULT_FILL;
+  const strokeWidth = shape.strokeWidth ?? 2;
+
+  if (shape.kind === 'text') {
+    const text: TextLayer = {
+      id: `${SHAPE_PREFIX}${id}`,
+      type: 'text',
+      position: { x, y, width, height },
+      content: {
+        text: shape.text ?? shape.label ?? '',
+        style: {
+          fontSize: labelFontSize(height),
+          color: stroke,
+          textAlign: 'center',
+        },
+      },
+    };
+    return [text];
+  }
+
+  let primary: Layer;
+  if (shape.kind === 'rect' || shape.kind === 'circle') {
+    const layer: ShapeLayer = {
+      id: `${SHAPE_PREFIX}${id}`,
+      type: 'shape',
+      position: { x, y, width, height },
+      content: {
+        shape: shape.kind,
+        fill,
+        stroke,
+        strokeWidth,
+        ...(shape.kind === 'rect' && shape.borderRadius != null
+          ? { borderRadius: shape.borderRadius }
+          : {}),
+      },
+    };
+    primary = layer;
+  } else if (shape.kind === 'path') {
+    const layer: PathLayer = {
+      id: `${SHAPE_PREFIX}${id}`,
+      type: 'path',
+      position: { x, y, width, height },
+      content: {
+        d: shape.d ?? `M ${x} ${y} L ${x + width} ${y + height}`,
+        stroke,
+        strokeWidth,
+        fill,
+        ...(shape.dasharray ? { dasharray: shape.dasharray } : {}),
+      },
+    };
+    primary = layer;
+  } else if (shape.kind === 'line') {
+    // Plain line → a bounding-box line (editable via resize handles).
+    const layer: ShapeLayer = {
+      id: `${SHAPE_PREFIX}${id}`,
+      type: 'shape',
+      position: { x, y, width, height },
+      content: { shape: 'line', stroke, strokeWidth },
+    };
+    primary = layer;
+  } else if (shape.kind === 'arrow') {
+    const layer: PathLayer = {
+      id: `${SHAPE_PREFIX}${id}`,
+      type: 'path',
+      position: { x, y, width, height },
+      content: {
+        d: `M ${x} ${y} L ${x + width} ${y + height}`,
+        stroke,
+        strokeWidth,
+        fill: 'none',
+        endMarker: 'arrow',
+      },
+    };
+    primary = layer;
+  } else {
+    // Named polygon / curved shape → computed filled path.
+    const layer: PathLayer = {
+      id: `${SHAPE_PREFIX}${id}`,
+      type: 'path',
+      position: { x, y, width, height },
+      content: {
+        d: shapePath(shape.kind, x, y, width, height) ?? `M ${x} ${y} L ${x + width} ${y + height}`,
+        stroke,
+        strokeWidth,
+        fill,
+        ...(shape.dasharray ? { dasharray: shape.dasharray } : {}),
+      },
+    };
+    primary = layer;
+  }
+
+  const out: Layer[] = [primary];
+  if (shape.label) {
+    // No explicit height keeps the label out of the hit-test (the primary
+    // wins pointer-down), exactly like nodeCard's label.
+    out.push({
+      id: `${LABEL_PREFIX}${id}`,
+      type: 'text',
+      position: { x: x + width / 2, y: y + height / 2, width, anchor: 'center' },
+      content: {
+        text: shape.label,
+        style: {
+          fontSize: labelFontSize(height),
+          fontWeight: 'bold',
+          color: stroke,
+          textAlign: 'center',
+        },
+      },
+    } satisfies TextLayer);
+  }
+  return out;
+}
+
+/** Convert shapes to a flat Layer[] — primaries first, then labels (paint order). */
+export function shapesToSceneLayers(shapes: readonly DrawingShape[]): Layer[] {
+  const primaries: Layer[] = [];
+  const labels: Layer[] = [];
+  for (const shape of shapes) {
+    const [primary, label] = shapeToLayers(shape);
+    primaries.push(primary);
+    if (label) labels.push(label);
+  }
+  return [...primaries, ...labels];
+}
+
+/** `{id,x,y,width,height}` boxes for the connector renderer. */
+export function shapeBoxes(shapes: readonly DrawingShape[]): ShapeBox[] {
+  return shapes.map((s) => ({ id: s.id, x: s.x, y: s.y, width: s.width, height: s.height }));
+}
+
+/** A label layer follows its primary shape during drag/resize previews. */
+export function drawingLayerFollows(layerId: string): string | null {
+  if (layerId.startsWith(LABEL_PREFIX)) {
+    return `${SHAPE_PREFIX}${layerId.slice(LABEL_PREFIX.length)}`;
+  }
+  return null;
+}
+
+/** Recover the shape (heading) id from a primary or label layer id. */
+export function shapeIdFromLayerId(layerId: string): string | null {
+  if (layerId.startsWith(SHAPE_PREFIX)) return layerId.slice(SHAPE_PREFIX.length);
+  if (layerId.startsWith(LABEL_PREFIX)) return layerId.slice(LABEL_PREFIX.length);
+  return null;
+}
+
+/** True for a primary shape layer id (not a label). */
+export function isPrimaryShapeLayer(layerId: string): boolean {
+  return layerId.startsWith(SHAPE_PREFIX);
+}
+
+/** The primary layer id for a shape (heading) id. */
+export function primaryLayerId(shapeId: string): string {
+  return `${SHAPE_PREFIX}${shapeId}`;
+}
+
+function labelFontSize(height: number): number {
+  return Math.max(12, Math.min(48, Math.round(height * 0.34)));
+}

package/src/scene/paths/bezierEdit.ts

@@ -0,0 +1,208 @@
+/**
+ * bezierEdit — parse / serialize SVG path `d` strings to and from an
+ * editable control-point representation.
+ *
+ * v1 supports the common subset authors actually draw:
+ *   - `M x y`      (moveto, absolute)
+ *   - `L x y`      (lineto, absolute)
+ *   - `C x1 y1 x2 y2 x y`  (cubic bezier)
+ *   - `Z` / `z`    (closepath)
+ *
+ * Other commands (Q, T, A, S, H, V, relative variants) round-trip as
+ * opaque tokens — they survive serialize/parse but can't be edited via
+ * control points in the UI. This keeps the editor honest about what it
+ * can edit while still preserving paths authored by hand.
+ */
+
+export interface PathPoint {
+  /** Anchor coordinate (where a segment ends / a moveto starts). */
+  x: number;
+  y: number;
+  /**
+   * Incoming control handle (controls the curve approaching this point).
+   * Null for moveto and lineto segments.
+   */
+  cpIn?: { x: number; y: number };
+  /**
+   * Outgoing control handle (controls the curve leaving this point).
+   * Null for the final point in an open path.
+   */
+  cpOut?: { x: number; y: number };
+  /**
+   * The SVG command that produced this point. Drives serialization back
+   * to the right command letter.
+   */
+  kind: 'move' | 'line' | 'curve' | 'close';
+}
+
+export interface ParsedPath {
+  points: PathPoint[];
+  /** True if the path ends with `Z`/`z`. */
+  closed: boolean;
+}
+
+/**
+ * Parse an SVG `d` string. Unknown commands are silently skipped — they
+ * don't appear in the result, which means re-serializing a parsed-then-
+ * serialized path is lossless only for the supported subset. Callers
+ * that need fidelity should keep the original string around for
+ * untouched paths.
+ */
+export function parsePath(d: string): ParsedPath {
+  const tokens = tokenize(d);
+  const points: PathPoint[] = [];
+  let closed = false;
+  let i = 0;
+  while (i < tokens.length) {
+    const cmd = tokens[i++];
+    if (typeof cmd !== 'string') continue;
+    switch (cmd) {
+      case 'M':
+      case 'm': {
+        const x = takeNum(tokens, i++);
+        const y = takeNum(tokens, i++);
+        if (x == null || y == null) return { points, closed };
+        points.push({ kind: 'move', x, y });
+        // Subsequent coordinate pairs after an M are implicit L's.
+        while (i + 1 < tokens.length && typeof tokens[i] === 'number') {
+          const lx = takeNum(tokens, i++);
+          const ly = takeNum(tokens, i++);
+          if (lx == null || ly == null) break;
+          points.push({ kind: 'line', x: lx, y: ly });
+        }
+        break;
+      }
+      case 'L':
+      case 'l': {
+        while (i + 1 < tokens.length && typeof tokens[i] === 'number') {
+          const x = takeNum(tokens, i++);
+          const y = takeNum(tokens, i++);
+          if (x == null || y == null) break;
+          points.push({ kind: 'line', x, y });
+        }
+        break;
+      }
+      case 'C':
+      case 'c': {
+        while (i + 5 < tokens.length && typeof tokens[i] === 'number') {
+          const x1 = takeNum(tokens, i++);
+          const y1 = takeNum(tokens, i++);
+          const x2 = takeNum(tokens, i++);
+          const y2 = takeNum(tokens, i++);
+          const x = takeNum(tokens, i++);
+          const y = takeNum(tokens, i++);
+          if (x1 == null || y1 == null || x2 == null || y2 == null || x == null || y == null) break;
+          // The previous point gets an outgoing control handle.
+          const prev = points[points.length - 1];
+          if (prev) prev.cpOut = { x: x1, y: y1 };
+          points.push({ kind: 'curve', x, y, cpIn: { x: x2, y: y2 } });
+        }
+        break;
+      }
+      case 'Z':
+      case 'z':
+        closed = true;
+        break;
+      default:
+        // Unsupported command — skip any numeric args that follow.
+        while (i < tokens.length && typeof tokens[i] === 'number') i++;
+        break;
+    }
+  }
+  return { points, closed };
+}
+
+/**
+ * Serialize a ParsedPath back into an SVG `d` string. Uses absolute
+ * commands and a single space between tokens. Round-trip behavior:
+ * `serialize(parse(d))` is equivalent (not byte-identical) for paths
+ * built from M/L/C/Z; whitespace and number formatting are normalized.
+ */
+export function serializePath(path: ParsedPath): string {
+  const parts: string[] = [];
+  for (let i = 0; i < path.points.length; i++) {
+    const p = path.points[i];
+    switch (p.kind) {
+      case 'move':
+        parts.push(`M ${fmt(p.x)} ${fmt(p.y)}`);
+        break;
+      case 'line':
+        parts.push(`L ${fmt(p.x)} ${fmt(p.y)}`);
+        break;
+      case 'curve': {
+        const prev = path.points[i - 1];
+        const out = prev?.cpOut ?? { x: prev?.x ?? p.x, y: prev?.y ?? p.y };
+        const inc = p.cpIn ?? { x: p.x, y: p.y };
+        parts.push(
+          `C ${fmt(out.x)} ${fmt(out.y)} ${fmt(inc.x)} ${fmt(inc.y)} ${fmt(p.x)} ${fmt(p.y)}`,
+        );
+        break;
+      }
+      case 'close':
+        // Encoded via the trailing Z below.
+        break;
+    }
+  }
+  if (path.closed) parts.push('Z');
+  return parts.join(' ');
+}
+
+/**
+ * Update the anchor coordinate of point `index`, shifting its incoming
+ * and outgoing control handles by the same delta so the curve shape is
+ * preserved. Returns a new ParsedPath; doesn't mutate the input.
+ */
+export function moveAnchor(path: ParsedPath, index: number, dx: number, dy: number): ParsedPath {
+  if (index < 0 || index >= path.points.length) return path;
+  const next: PathPoint[] = path.points.map((p, i) => {
+    if (i !== index) return p;
+    const out: PathPoint = { ...p, x: p.x + dx, y: p.y + dy };
+    if (p.cpIn) out.cpIn = { x: p.cpIn.x + dx, y: p.cpIn.y + dy };
+    if (p.cpOut) out.cpOut = { x: p.cpOut.x + dx, y: p.cpOut.y + dy };
+    return out;
+  });
+  return { points: next, closed: path.closed };
+}
+
+/** Update a single control handle on point `index`. */
+export function moveHandle(
+  path: ParsedPath,
+  index: number,
+  side: 'cpIn' | 'cpOut',
+  x: number,
+  y: number,
+): ParsedPath {
+  if (index < 0 || index >= path.points.length) return path;
+  const next: PathPoint[] = path.points.map((p, i) => {
+    if (i !== index) return p;
+    return { ...p, [side]: { x, y } } as PathPoint;
+  });
+  return { points: next, closed: path.closed };
+}
+
+// ── Internals ──────────────────────────────────────────────
+
+type Token = string | number;
+
+function tokenize(d: string): Token[] {
+  const out: Token[] = [];
+  // Split on whitespace and commas, plus pull out single-letter commands.
+  const re = /([a-zA-Z])|(-?\d*\.?\d+(?:[eE][+-]?\d+)?)/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(d)) !== null) {
+    if (m[1]) out.push(m[1]);
+    else if (m[2]) out.push(parseFloat(m[2]));
+  }
+  return out;
+}
+
+function takeNum(tokens: Token[], i: number): number | null {
+  const t = tokens[i];
+  return typeof t === 'number' ? t : null;
+}
+
+function fmt(n: number): string {
+  // Keep integer-valued numbers tidy; otherwise trim to 3 decimal places.
+  if (Number.isInteger(n)) return String(n);
+  return n.toFixed(3).replace(/\.?0+$/, '');
+}