@bendyline/squisq 2.1.0 → 2.2.0

package/src/doc/templates/diagramLayout.ts

@@ -1,159 +0,0 @@
-/**
- * Diagram layout — shared between the read-only SVG render path
- * (`diagramBlock` template) and the interactive editor (React Flow in
- * `@bendyline/squisq-editor-react`). Same children + same options always
- * produce the same node positions and edge list, so previews and the
- * editor stay visually consistent.
- *
- * Layout rules:
- * 1. Children with both `x` and `y` set keep their authored coordinates.
- * 2. Children missing either coordinate are auto-placed in a square-ish
- *    grid in declaration order, offset below the bounding box of the
- *    explicitly-positioned children.
- * 3. Edges come from each child's `connectsTo`. Targets that don't match
- *    any sibling id are dropped (and counted in `warnings`).
- */
-
-import type { Block, BlockConnection } from '../../schemas/Doc.js';
-
-export interface DiagramNodePosition {
-  /** Block id (matches `Block.id`). */
-  id: string;
-  /** Display label (block title or fallback to id). */
-  label: string;
-  /** Pixel x coordinate (canvas-relative). */
-  x: number;
-  /** Pixel y coordinate (canvas-relative). */
-  y: number;
-  /** True when the position came from `x=`/`y=` attributes; false when auto-laid out. */
-  pinned: boolean;
-  /** Optional `.class` tokens carried over from the heading. */
-  classes?: string[];
-}
-
-export interface DiagramEdge {
-  /** Synthetic stable edge id. */
-  id: string;
-  /** Source node id. */
-  source: string;
-  /** Target node id. */
-  target: string;
-  /** Connection type from `connectsTo=target:type` (used as edge label). */
-  type?: string;
-}
-
-export interface DiagramLayout {
-  nodes: DiagramNodePosition[];
-  edges: DiagramEdge[];
-  warnings: string[];
-}
-
-export interface DiagramLayoutOptions {
-  /** Horizontal grid pitch between auto-laid-out nodes. Default: 260 (node width 180 + 80 air). */
-  gapX?: number;
-  /** Vertical grid pitch between auto-laid-out nodes. Default: 140. */
-  gapY?: number;
-  /** Padding around the explicit-positions bounding box before the grid starts. Default: 80. */
-  gridPad?: number;
-  /** Origin x for the grid when no explicit nodes anchor it. Default: 80. */
-  gridOriginX?: number;
-  /** Origin y for the grid when no explicit nodes anchor it. Default: 80. */
-  gridOriginY?: number;
-}
-
-const DEFAULT_OPTS: Required<DiagramLayoutOptions> = {
-  gapX: 260,
-  gapY: 140,
-  gridPad: 80,
-  gridOriginX: 80,
-  gridOriginY: 80,
-};
-
-/**
- * Compute node positions and edges for a diagram from a parent block's
- * children. Pure function — same inputs always produce the same output.
- */
-export function computeDiagramLayout(
-  children: readonly Block[],
-  options: DiagramLayoutOptions = {},
-): DiagramLayout {
-  const opts = { ...DEFAULT_OPTS, ...options };
-  const warnings: string[] = [];
-
-  // First pass: extract explicit positions, record which children still need a grid slot.
-  type Entry = { child: Block; pinned: boolean; x: number; y: number };
-  const entries: Entry[] = [];
-  const unpositionedIdx: number[] = [];
-
-  for (let i = 0; i < children.length; i++) {
-    const c = children[i];
-    const hasX = typeof c.x === 'number';
-    const hasY = typeof c.y === 'number';
-    if (hasX && hasY) {
-      entries.push({ child: c, pinned: true, x: c.x as number, y: c.y as number });
-    } else {
-      entries.push({ child: c, pinned: false, x: 0, y: 0 });
-      unpositionedIdx.push(i);
-    }
-  }
-
-  // Second pass: lay out unpositioned children in a square-ish grid.
-  if (unpositionedIdx.length > 0) {
-    const cols = Math.max(1, Math.ceil(Math.sqrt(unpositionedIdx.length)));
-    // Find the bottom-right of the pinned bounding box so the grid sits below it.
-    let baseX = opts.gridOriginX;
-    let baseY = opts.gridOriginY;
-    const pinned = entries.filter((e) => e.pinned);
-    if (pinned.length > 0) {
-      const minX = Math.min(...pinned.map((e) => e.x));
-      const maxY = Math.max(...pinned.map((e) => e.y));
-      baseX = minX;
-      baseY = maxY + opts.gridPad + opts.gapY;
-    }
-    unpositionedIdx.forEach((entryIdx, k) => {
-      const col = k % cols;
-      const row = Math.floor(k / cols);
-      entries[entryIdx].x = baseX + col * opts.gapX;
-      entries[entryIdx].y = baseY + row * opts.gapY;
-    });
-  }
-
-  // Third pass: emit nodes + the id-set used to validate edge targets.
-  const nodes: DiagramNodePosition[] = entries.map((e) => ({
-    id: e.child.id,
-    label: e.child.title ?? e.child.id,
-    x: e.x,
-    y: e.y,
-    pinned: e.pinned,
-    ...(e.child.classes && e.child.classes.length > 0 ? { classes: e.child.classes } : {}),
-  }));
-  const nodeIds = new Set(nodes.map((n) => n.id));
-
-  // Fourth pass: emit edges from each child's connectsTo, dropping ghosts.
-  const edges: DiagramEdge[] = [];
-  const seenEdgeIds = new Set<string>();
-  for (const child of children) {
-    if (!child.connectsTo) continue;
-    for (const conn of child.connectsTo) {
-      if (!nodeIds.has(conn.target)) {
-        warnings.push(`Edge from "${child.id}" to "${conn.target}" dropped: no such sibling node`);
-        continue;
-      }
-      const edgeId = makeEdgeId(child.id, conn);
-      if (seenEdgeIds.has(edgeId)) continue;
-      seenEdgeIds.add(edgeId);
-      edges.push({
-        id: edgeId,
-        source: child.id,
-        target: conn.target,
-        ...(conn.type ? { type: conn.type } : {}),
-      });
-    }
-  }
-
-  return { nodes, edges, warnings };
-}
-
-function makeEdgeId(source: string, conn: BlockConnection): string {
-  return conn.type ? `${source}->${conn.target}:${conn.type}` : `${source}->${conn.target}`;
-}

package/src/doc/templates/drawingBlock.ts

@@ -1,325 +0,0 @@
-/**
- * Drawing block template.
- *
- * Renders the parent block's children as free-form shapes on a canvas:
- * - Each child becomes a shape (`rect`/`circle` → ShapeLayer, `line`/
- *   `arrow`/`path` → PathLayer, `text` → TextLayer) with its title as a
- *   centered label and its body text as an optional sublabel.
- * - `line`/`arrow` children with `from`/`to` (and any child's
- *   `connectsTo`) become connectors clipped to the shapes they join.
- *
- * Coordinates from `x`/`y`/`width`/`height` are author-defined units; the
- * template fits the bounding box of all shapes to the viewport with
- * padding (same approach as `diagramBlock`), so authors don't think in
- * absolute pixels.
- */
-
-import type { Layer, ShapeLayer, TextLayer, PathLayer } from '../../schemas/Doc.js';
-import type { DrawingBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme, getThemeFont, themedFontSize } from '../utils/themeUtils.js';
-import { computeDrawingLayout, type DrawingShape, type DrawingConnector } from './drawingLayout.js';
-import { shapePath, connectorPath, snapEndpoints } from '../utils/shapeGeometry.js';
-
-const PADDING = 80;
-
-export function drawingBlock(input: DrawingBlockInput, context: TemplateContext): Layer[] {
-  const { theme, viewport, children = [] } = context;
-  const colors = resolveColorScheme(context, input.colorScheme);
-  const defaultStroke = input.stroke ?? colors.text ?? theme.colors.text;
-  const defaultFill = input.fill ?? 'none';
-
-  const layout = computeDrawingLayout(children);
-
-  // No shapes authored as children → empty drawing hint.
-  if (layout.shapes.length === 0 && layout.connectors.length === 0) {
-    return [emptyHint(input, context)];
-  }
-
-  // Bounding box of all shapes in author coordinates.
-  const minX = Math.min(...layout.shapes.map((s) => s.x));
-  const maxX = Math.max(...layout.shapes.map((s) => s.x + s.width));
-  const minY = Math.min(...layout.shapes.map((s) => s.y));
-  const maxY = Math.max(...layout.shapes.map((s) => s.y + s.height));
-
-  const titleHeight = input.title ? 120 : 0;
-  const availW = Math.max(1, viewport.width - PADDING * 2);
-  const availH = Math.max(1, viewport.height - PADDING * 2 - titleHeight);
-  const contentW = Math.max(1, maxX - minX);
-  const contentH = Math.max(1, maxY - minY);
-
-  // Uniform scale that fits both dimensions. Small drawings may grow
-  // (shapes are vector) up to 1.8× so a three-shape sketch doesn't render
-  // as a tiny off-center cluster; the title and the scaled drawing are
-  // centered together as one group.
-  const scale = Math.min(availW / contentW, availH / contentH, 1.8);
-  const scaledW = contentW * scale;
-  const scaledH = contentH * scale;
-  const groupTop = Math.max(PADDING / 2, (viewport.height - titleHeight - scaledH) / 2);
-  const offsetX = PADDING + (availW - scaledW) / 2;
-  const offsetY = groupTop + titleHeight;
-
-  const tx = (x: number) => offsetX + (x - minX) * scale;
-  const ty = (y: number) => offsetY + (y - minY) * scale;
-  const fontAdj = Math.min(Math.max(scale, 1), 1.5);
-
-  const layers: Layer[] = [];
-
-  if (input.title) {
-    layers.push({
-      type: 'text',
-      id: 'drawing-title',
-      content: {
-        text: input.title,
-        style: {
-          fontSize: themedFontSize(40, context, true),
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: theme.colors.text,
-          textAlign: 'center',
-        },
-      },
-      position: { x: '50%', y: groupTop + titleHeight / 2 - 16, anchor: 'center' },
-    });
-  }
-
-  // Center lookup so connectors can clip to the shapes they join.
-  const boxes = new Map<string, { cx: number; cy: number; rx: number; ry: number }>();
-  for (const s of layout.shapes) {
-    const x = tx(s.x);
-    const y = ty(s.y);
-    const w = s.width * scale;
-    const h = s.height * scale;
-    boxes.set(s.id, {
-      cx: x + w / 2,
-      cy: y + h / 2,
-      rx: Math.max(1, w / 2),
-      ry: Math.max(1, h / 2),
-    });
-  }
-
-  // Connectors first so they sit behind shapes.
-  for (const conn of layout.connectors) {
-    const a = boxes.get(conn.from);
-    const b = boxes.get(conn.to);
-    if (!a || !b) continue;
-    const { start, end } = snapEndpoints(a, b);
-    const path: PathLayer = {
-      type: 'path',
-      id: `connector-${conn.id}`,
-      content: {
-        d: connectorPath(conn.routing, start, end),
-        stroke: conn.stroke ?? defaultStroke,
-        strokeWidth: conn.strokeWidth ?? Math.round(2 * fontAdj),
-        fill: 'none',
-        ...(conn.dasharray ? { dasharray: conn.dasharray } : {}),
-        ...(conn.startMarker !== 'none' ? { startMarker: conn.startMarker } : {}),
-        ...(conn.endMarker !== 'none' ? { endMarker: conn.endMarker } : {}),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    };
-    layers.push(path);
-    if (conn.label) layers.push(connectorLabel(conn, a, b, context, fontAdj));
-  }
-
-  // Shapes (and their labels) on top.
-  for (const s of layout.shapes) {
-    const x = tx(s.x);
-    const y = ty(s.y);
-    const w = s.width * scale;
-    const h = s.height * scale;
-    layers.push(...shapeLayers(s, x, y, w, h, context, defaultStroke, defaultFill, fontAdj));
-  }
-
-  return layers;
-}
-
-// ============================================
-// Per-shape layer emission
-// ============================================
-
-function shapeLayers(
-  s: DrawingShape,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  context: TemplateContext,
-  defaultStroke: string,
-  defaultFill: string,
-  fontAdj: number,
-): Layer[] {
-  const out: Layer[] = [];
-  const stroke = s.stroke ?? defaultStroke;
-  const fill = s.fill ?? defaultFill;
-
-  if (s.kind === 'text') {
-    out.push(
-      textLayer(
-        `shape-${s.id}`,
-        s.text ?? s.label ?? '',
-        x + w / 2,
-        y + h / 2,
-        w,
-        context,
-        s.stroke ?? context.theme.colors.text,
-        true,
-        fontAdj,
-      ),
-    );
-    return out;
-  }
-
-  if (s.kind === 'rect' || s.kind === 'circle') {
-    const shape: ShapeLayer = {
-      type: 'shape',
-      id: `shape-${s.id}`,
-      content: {
-        shape: s.kind,
-        fill,
-        stroke,
-        strokeWidth: s.strokeWidth ?? Math.round(2 * fontAdj),
-        ...(s.kind === 'rect' && s.borderRadius != null ? { borderRadius: s.borderRadius } : {}),
-      },
-      position: { x, y, width: w, height: h },
-    };
-    out.push(shape);
-  } else {
-    // line / arrow / path / polygon shapes → PathLayer.
-    const diagonal = `M ${round(x)} ${round(y)} L ${round(x + w)} ${round(y + h)}`;
-    let d = diagonal;
-    let pathFill = 'none';
-    let endMarker: 'none' | 'arrow' = 'none';
-    if (s.kind === 'path') {
-      d = s.d ?? diagonal;
-      pathFill = fill;
-    } else if (s.kind === 'arrow') {
-      endMarker = 'arrow';
-    } else if (s.kind !== 'line') {
-      // Named polygon / curved shape → computed filled path.
-      d = shapePath(s.kind, x, y, w, h) ?? diagonal;
-      pathFill = fill;
-    }
-    const path: PathLayer = {
-      type: 'path',
-      id: `shape-${s.id}`,
-      content: {
-        d,
-        stroke,
-        strokeWidth: s.strokeWidth ?? Math.round(2 * fontAdj),
-        fill: pathFill,
-        ...(s.dasharray ? { dasharray: s.dasharray } : {}),
-        ...(endMarker !== 'none' ? { endMarker } : {}),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    };
-    out.push(path);
-  }
-
-  // Label (heading text) centered on the shape; sublabel (body) below it.
-  if (s.label) {
-    out.push(
-      textLayer(
-        `shape-label-${s.id}`,
-        s.label,
-        x + w / 2,
-        y + h / 2,
-        w,
-        context,
-        s.stroke ?? context.theme.colors.text,
-        true,
-        fontAdj,
-      ),
-    );
-  }
-  if (s.sublabel) {
-    out.push(
-      textLayer(
-        `shape-sublabel-${s.id}`,
-        s.sublabel,
-        x + w / 2,
-        y + h + 14 * fontAdj,
-        w,
-        context,
-        context.theme.colors.textMuted,
-        false,
-        fontAdj,
-      ),
-    );
-  }
-  return out;
-}
-
-function textLayer(
-  id: string,
-  text: string,
-  cx: number,
-  cy: number,
-  width: number,
-  context: TemplateContext,
-  color: string,
-  bold: boolean,
-  fontAdj: number,
-): TextLayer {
-  return {
-    type: 'text',
-    id,
-    content: {
-      text,
-      style: {
-        fontSize: themedFontSize(Math.round((bold ? 22 : 18) * fontAdj), context, false),
-        fontFamily: getThemeFont(context, 'body'),
-        ...(bold ? { fontWeight: 'bold' as const } : {}),
-        color,
-        textAlign: 'center',
-      },
-    },
-    position: { x: cx, y: cy, anchor: 'center', width },
-  };
-}
-
-function connectorLabel(
-  conn: DrawingConnector,
-  a: { cx: number; cy: number },
-  b: { cx: number; cy: number },
-  context: TemplateContext,
-  fontAdj: number,
-): TextLayer {
-  const fontSize = themedFontSize(Math.round(18 * fontAdj), context, false);
-  return {
-    type: 'text',
-    id: `connector-label-${conn.id}`,
-    content: {
-      text: conn.label ?? '',
-      style: {
-        fontSize,
-        fontFamily: getThemeFont(context, 'body'),
-        color: context.theme.colors.textMuted,
-        textAlign: 'center',
-      },
-    },
-    // Floated just above the connector midpoint so the line never
-    // strikes through the label text.
-    position: { x: (a.cx + b.cx) / 2, y: (a.cy + b.cy) / 2 - fontSize * 0.9, anchor: 'center' },
-  };
-}
-
-function emptyHint(input: DrawingBlockInput, context: TemplateContext): TextLayer {
-  return {
-    type: 'text',
-    id: 'drawing-empty',
-    content: {
-      text: input.title ?? 'Empty drawing',
-      style: {
-        fontSize: themedFontSize(36, context, true),
-        fontFamily: getThemeFont(context, 'title'),
-        color: context.theme.colors.textMuted,
-        textAlign: 'center',
-      },
-    },
-    position: { x: '50%', y: '50%', anchor: 'center' },
-  };
-}
-
-function round(n: number): number {
-  return Math.round(n * 100) / 100;
-}