@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/scene/layers/nodeCard.tsx

@@ -1,164 +0,0 @@
-/**
- * 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';
-import { DIAGRAM_LABEL_LINE_HEIGHT, fitDiagramLabel } from '@bendyline/squisq/doc';
-
-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';
-  /**
-   * 'container' renders as a background grouping card: translucent fill,
-   * muted stroke, label anchored near the top edge instead of centered
-   * (children paint over the interior).
-   */
-  kind?: 'container';
-}
-
-/**
- * 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 isContainer = node.kind === 'container';
-  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 ?? (isContainer ? '#94a3b8' : '#ffffff'),
-      ...(isContainer ? { fillOpacity: 0.12 } : {}),
-      stroke: node.stroke ?? (isContainer ? '#94a3b8' : '#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. Containers keep a fixed, small
-  // title size — their height tracks their children, not their label.
-  const labelText = isContainer ? (node.label.split('\n')[0] ?? '') : node.label;
-  const preferredFontSize = Math.max(12, Math.min(48, Math.round(height * 0.34)));
-  const fit = isContainer
-    ? { fontSize: 16, firstLineOffset: 0, textWidth: width }
-    : fitDiagramLabel(labelText, width, height, preferredFontSize);
-  const { fontSize } = fit;
-
-  // 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.
-  //
-  // Container labels anchor near the top edge — the interior belongs to
-  // the children painting over it.
-  const label: TextLayer = {
-    id: `node-label-${node.id}`,
-    type: 'text',
-    position: {
-      x: node.x + width / 2,
-      y: isContainer ? node.y + fontSize + 8 : node.y + height / 2 + fit.firstLineOffset,
-      width: fit.textWidth,
-      anchor: 'center',
-    },
-    content: {
-      text: labelText,
-      style: {
-        fontSize,
-        ...(!isContainer ? { lineHeight: DIAGRAM_LABEL_LINE_HEIGHT } : {}),
-        fontWeight: 'bold',
-        color: node.stroke ?? (isContainer ? '#64748b' : '#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

@@ -1,70 +0,0 @@
-/**
- * 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

@@ -1,201 +0,0 @@
-/**
- * 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

@@ -1,208 +0,0 @@
-/**
- * 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+$/, '');
-}