@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/scene/hooks/useSceneHitTest.ts

@@ -1,105 +0,0 @@
-/**
- * useSceneHitTest — point→layer lookup.
- *
- * Each layer's bounding rectangle is derived from its `position` field;
- * the topmost layer (last in the array) under the point wins. Path
- * layers also get a thicker stroke-aware hit area so users can grab a
- * 2-pixel edge without pixel-perfect aim.
- *
- * Pure function for now (no state) — wrapped in a hook so consumers can
- * cache the lookup table later without changing the call site.
- */
-
-import { useCallback } from 'react';
-import type { Layer } from '@bendyline/squisq/schemas';
-
-export interface HitTestable {
-  id: string;
-  layer: Layer;
-  /** Bounding rect in viewport units. */
-  bounds: { x: number; y: number; width: number; height: number };
-}
-
-export interface UseSceneHitTestResult {
-  /** Topmost layer id at the given viewport-unit point, or null. */
-  hit: (point: { x: number; y: number }, items: HitTestable[]) => string | null;
-}
-
-export function useSceneHitTest(): UseSceneHitTestResult {
-  const hit = useCallback(
-    (point: { x: number; y: number }, items: HitTestable[]): string | null => {
-      // Walk from last (topmost) to first so the visually-on-top layer wins.
-      for (let i = items.length - 1; i >= 0; i--) {
-        const it = items[i];
-        if (pointInRect(point, it.bounds)) return it.id;
-      }
-      return null;
-    },
-    [],
-  );
-  return { hit };
-}
-
-/**
- * Compute a layer's bounding rect in viewport units. Resolves `%` strings
- * against the supplied viewport size and handles the `anchor` field on
- * the layer's position. Returns null when the layer's geometry can't be
- * resolved (e.g. a TextLayer with no explicit width — for those callers
- * should measure DOM and fall back to a click-tolerance box).
- */
-export function layerBounds(
-  layer: Layer,
-  viewport: { width: number; height: number },
-  defaults: { width?: number; height?: number } = {},
-): { x: number; y: number; width: number; height: number } | null {
-  const pos = layer.position;
-  if (!pos) return null;
-  const w = resolveLen(pos.width, viewport.width, defaults.width);
-  const h = resolveLen(pos.height, viewport.height, defaults.height);
-  if (w == null || h == null) return null;
-  const cx = resolveLen(pos.x, viewport.width, 0) ?? 0;
-  const cy = resolveLen(pos.y, viewport.height, 0) ?? 0;
-  const anchor = pos.anchor ?? 'top-left';
-  const { ax, ay } = anchorOffsets(anchor, w, h);
-  return { x: cx - ax, y: cy - ay, width: w, height: h };
-}
-
-function pointInRect(
-  p: { x: number; y: number },
-  r: { x: number; y: number; width: number; height: number },
-): boolean {
-  return p.x >= r.x && p.x <= r.x + r.width && p.y >= r.y && p.y <= r.y + r.height;
-}
-
-function resolveLen(
-  v: number | string | undefined,
-  base: number,
-  fallback?: number,
-): number | undefined {
-  if (typeof v === 'number') return v;
-  if (typeof v === 'string') {
-    if (v.endsWith('%')) {
-      const pct = parseFloat(v);
-      if (Number.isFinite(pct)) return (pct / 100) * base;
-    }
-    const n = parseFloat(v);
-    if (Number.isFinite(n)) return n;
-  }
-  return fallback;
-}
-
-function anchorOffsets(anchor: string, w: number, h: number): { ax: number; ay: number } {
-  switch (anchor) {
-    case 'center':
-      return { ax: w / 2, ay: h / 2 };
-    case 'top-right':
-      return { ax: w, ay: 0 };
-    case 'bottom-left':
-      return { ax: 0, ay: h };
-    case 'bottom-right':
-      return { ax: w, ay: h };
-    case 'top-left':
-    default:
-      return { ax: 0, ay: 0 };
-  }
-}

package/src/scene/hooks/useScenePanZoom.ts

@@ -1,147 +0,0 @@
-/**
- * useScenePanZoom — transient viewport pan/zoom state for the Scene.
- *
- * State is a simple affine transform `{ tx, ty, scale }` that maps
- * viewport units → screen pixels. The Scene's root `<svg>` applies the
- * transform via a single `<g transform="translate(tx ty) scale(scale)">`
- * so every layer renders at its natural viewport coordinates and the
- * group transform handles all pan/zoom.
- *
- * The hook only owns state and a small command surface — DOM event
- * binding is done by the Scene component so tests can drive the hook
- * with synthetic transforms without a DOM.
- */
-
-import { useCallback, useRef, useState } from 'react';
-
-export interface SceneTransform {
-  /** Translation in screen pixels. */
-  tx: number;
-  ty: number;
-  /** Uniform scale factor. 1 = viewport units render 1:1 with screen pixels. */
-  scale: number;
-}
-
-export const IDENTITY_TRANSFORM: SceneTransform = Object.freeze({ tx: 0, ty: 0, scale: 1 });
-
-/** Clamp scale to a sensible range so a single accidental wheel doesn't escape. */
-const MIN_SCALE = 0.1;
-const MAX_SCALE = 8;
-
-export interface UseScenePanZoomResult {
-  transform: SceneTransform;
-  /** Replace the transform wholesale. */
-  setTransform: (t: SceneTransform) => void;
-  /** Pan by a screen-pixel delta. */
-  panBy: (dx: number, dy: number) => void;
-  /**
-   * Zoom toward a point in screen-pixel coordinates (relative to the
-   * scene's container origin). Scale multiplies by `factor`; positive
-   * factor > 1 zooms in, < 1 zooms out. The viewport point under
-   * `(focusX, focusY)` stays put after the zoom.
-   */
-  zoomAt: (factor: number, focusX: number, focusY: number) => void;
-  /** Reset to identity. */
-  reset: () => void;
-  /**
-   * Fit a viewport-unit bounding box into a container of `containerSize`
-   * screen pixels, with optional padding (also in screen pixels). When
-   * the box is empty, no-ops.
-   */
-  fitBox: (
-    box: { x: number; y: number; width: number; height: number },
-    containerSize: { width: number; height: number },
-    padding?: number,
-  ) => void;
-  /** Convert a screen-pixel point (container-relative) → viewport units. */
-  screenToViewport: (sx: number, sy: number) => { x: number; y: number };
-  /** Convert a viewport-unit point → screen pixels (container-relative). */
-  viewportToScreen: (vx: number, vy: number) => { x: number; y: number };
-}
-
-export function useScenePanZoom(
-  initial: SceneTransform = IDENTITY_TRANSFORM,
-): UseScenePanZoomResult {
-  const [transform, setTransformState] = useState<SceneTransform>(initial);
-  // Keep a ref so commands batching multiple updates in the same tick see
-  // the latest state without waiting for a render cycle.
-  const ref = useRef(transform);
-  ref.current = transform;
-
-  const setTransform = useCallback((t: SceneTransform) => {
-    ref.current = t;
-    setTransformState(t);
-  }, []);
-
-  const panBy = useCallback(
-    (dx: number, dy: number) => {
-      const t = ref.current;
-      setTransform({ tx: t.tx + dx, ty: t.ty + dy, scale: t.scale });
-    },
-    [setTransform],
-  );
-
-  const zoomAt = useCallback(
-    (factor: number, focusX: number, focusY: number) => {
-      const t = ref.current;
-      const nextScale = clamp(t.scale * factor, MIN_SCALE, MAX_SCALE);
-      const effectiveFactor = nextScale / t.scale;
-      // Keep the viewport point under (focusX, focusY) stationary:
-      //   focus_v = (focus_s - tx) / scale
-      //   tx' = focus_s - focus_v * scale'
-      //       = focus_s - (focus_s - tx) * (scale' / scale)
-      const tx = focusX - (focusX - t.tx) * effectiveFactor;
-      const ty = focusY - (focusY - t.ty) * effectiveFactor;
-      setTransform({ tx, ty, scale: nextScale });
-    },
-    [setTransform],
-  );
-
-  const reset = useCallback(() => setTransform(IDENTITY_TRANSFORM), [setTransform]);
-
-  const fitBox = useCallback(
-    (
-      box: { x: number; y: number; width: number; height: number },
-      containerSize: { width: number; height: number },
-      padding = 24,
-    ) => {
-      if (box.width <= 0 || box.height <= 0) return;
-      if (containerSize.width <= 0 || containerSize.height <= 0) return;
-      const availW = Math.max(1, containerSize.width - padding * 2);
-      const availH = Math.max(1, containerSize.height - padding * 2);
-      const scale = clamp(Math.min(availW / box.width, availH / box.height), MIN_SCALE, MAX_SCALE);
-      // Center the box in the container.
-      const scaledW = box.width * scale;
-      const scaledH = box.height * scale;
-      const tx = (containerSize.width - scaledW) / 2 - box.x * scale;
-      const ty = (containerSize.height - scaledH) / 2 - box.y * scale;
-      setTransform({ tx, ty, scale });
-    },
-    [setTransform],
-  );
-
-  const screenToViewport = useCallback((sx: number, sy: number) => {
-    const t = ref.current;
-    return { x: (sx - t.tx) / t.scale, y: (sy - t.ty) / t.scale };
-  }, []);
-
-  const viewportToScreen = useCallback((vx: number, vy: number) => {
-    const t = ref.current;
-    return { x: vx * t.scale + t.tx, y: vy * t.scale + t.ty };
-  }, []);
-
-  return {
-    transform,
-    setTransform,
-    panBy,
-    zoomAt,
-    reset,
-    fitBox,
-    screenToViewport,
-    viewportToScreen,
-  };
-}
-
-function clamp(n: number, lo: number, hi: number): number {
-  return Math.min(hi, Math.max(lo, n));
-}

package/src/scene/hooks/useSceneSelection.ts

@@ -1,62 +0,0 @@
-/**
- * useSceneSelection — selected layer ids + selection-modification API.
- *
- * v1 supports single and shift-additive selection. Marquee/box selection
- * is driven by SelectTool — it calls `setSelection` with the ids that
- * intersect the marquee rect.
- */
-
-import { useCallback, useState } from 'react';
-
-export interface UseSceneSelectionResult {
-  /** Stable set of selected ids — referentially stable between renders unless changed. */
-  selection: ReadonlySet<string>;
-  /** Replace the selection. */
-  setSelection: (ids: Iterable<string>) => void;
-  /** Add `id` to the selection (or replace it when `additive=false`). */
-  select: (id: string, additive?: boolean) => void;
-  /** Toggle `id` in/out of the selection. */
-  toggle: (id: string) => void;
-  /** Clear all selection. */
-  clear: () => void;
-  /** Convenience: is this id currently selected? */
-  isSelected: (id: string) => boolean;
-}
-
-export function useSceneSelection(initial: Iterable<string> = []): UseSceneSelectionResult {
-  const [selection, setSelectionState] = useState<ReadonlySet<string>>(() => new Set(initial));
-
-  const setSelection = useCallback((ids: Iterable<string>) => {
-    setSelectionState(new Set(ids));
-  }, []);
-
-  const select = useCallback((id: string, additive = false) => {
-    setSelectionState((prev) => {
-      if (additive) {
-        if (prev.has(id)) return prev;
-        const next = new Set(prev);
-        next.add(id);
-        return next;
-      }
-      if (prev.size === 1 && prev.has(id)) return prev;
-      return new Set([id]);
-    });
-  }, []);
-
-  const toggle = useCallback((id: string) => {
-    setSelectionState((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }, []);
-
-  const clear = useCallback(() => {
-    setSelectionState((prev) => (prev.size === 0 ? prev : new Set()));
-  }, []);
-
-  const isSelected = useCallback((id: string) => selection.has(id), [selection]);
-
-  return { selection, setSelection, select, toggle, clear, isSelected };
-}

package/src/scene/index.ts

@@ -1,90 +0,0 @@
-/**
- * Squisq Scene — public exports for the 2D editing engine.
- *
- * The Scene is a small, owned SVG-based framework for viewing and
- * editing the same `Layer` schema Squisq already renders. Three
- * consumers exist today:
- *
- *   - DiagramAdapter (node + edge editing on top of markdown headings)
- *   - LayoutAdapter  (positioning a block's layers)
- *   - DrawingAdapter (free-form shapes, paths, text)
- *
- * Most callers only need `<Scene>` plus the tool(s) and adapter for
- * their use case. The hooks and selection components are exported for
- * advanced consumers that want to build their own surface.
- */
-
-export { Scene } from './Scene';
-export type { SceneProps } from './Scene';
-export { SceneViewport } from './SceneViewport';
-export { SceneSelection } from './SceneSelection';
-export { SceneBlockExtension, type SceneBlockExtensionOptions } from './SceneBlockExtension';
-export { SceneBlockWidget, type SceneBlockMode } from './SceneBlockWidget';
-
-export type { SceneCommand, SceneEdge } from './commands/SceneCommand';
-export type { SceneTool, SceneToolContext } from './tools/SceneTool';
-
-export { SelectTool, getActiveMoveOffset } from './tools/SelectTool';
-export { ConnectTool } from './tools/ConnectTool';
-export { createShapeTool } from './tools/ShapeTool';
-export { createPlaceTool, type PlaceToolOptions } from './tools/PlaceTool';
-export { createPathTool } from './tools/PathTool';
-export { createTextTool } from './tools/TextTool';
-export {
-  createTokenTool,
-  buildTokenLayer,
-  type TokenKind,
-  type TokenToolOptions,
-} from './tools/TokenTool';
-export {
-  parsePath,
-  serializePath,
-  moveAnchor,
-  moveHandle,
-  type ParsedPath,
-  type PathPoint,
-} from './paths/bezierEdit';
-
-export { RenderLayer } from './layers/renderLayer';
-export {
-  nodesToCardLayers,
-  nodeCardLayers,
-  nodeIdFromCardLayerId,
-  cardLayerIdForLabel,
-  labelLayerIdForCard,
-  diagramLayerFollows,
-  NODE_WIDTH,
-  NODE_HEIGHT,
-  type DiagramNodeDescriptor,
-} from './layers/nodeCard';
-export { DiagramEdges } from './layers/DiagramEdges';
-
-export { buildDiagramScene, nodeCenter, type DiagramSceneData } from './adapters/DiagramAdapter';
-
-export {
-  useLayoutAdapter,
-  type LayoutAdapterResult,
-  type LayoutAdapterOptions,
-} from './adapters/LayoutAdapter';
-export { useDrawingAdapter, type DrawingAdapterOptions } from './adapters/DrawingAdapter';
-export {
-  encodeLayers,
-  decodeLayers,
-  updateLayer,
-  readLayersFromHeading,
-  writeLayersToHeading,
-} from './adapters/blockLayers';
-
-export {
-  useScenePanZoom,
-  IDENTITY_TRANSFORM,
-  type SceneTransform,
-  type UseScenePanZoomResult,
-} from './hooks/useScenePanZoom';
-export { useSceneSelection, type UseSceneSelectionResult } from './hooks/useSceneSelection';
-export {
-  useSceneHitTest,
-  layerBounds,
-  type HitTestable,
-  type UseSceneHitTestResult,
-} from './hooks/useSceneHitTest';

package/src/scene/layers/DiagramEdges.tsx

@@ -1,142 +0,0 @@
-/**
- * DiagramEdges — render the edge layer for a diagram or drawing scene.
- *
- * Edges are derived from `connectsTo` / `from`–`to` attributes and are not
- * stored as Layer objects (the SSR templates synthesize them at render time
- * too). Drawn behind the shape cards so the cards clip the edge endpoints.
- *
- * Routing (`variant` default, per-edge `routing` override), end markers
- * (`startMarker`/`endMarker`), and dash come from the shared core geometry
- * (`connectorPath` / `markerPath`) so the editor and the SSR `PathLayer`
- * renderer draw identical connectors. When `selectedId` is set, that edge is
- * highlighted and given endpoint-handle markers (the active tool drives the
- * drag).
- */
-
-import { useId } from 'react';
-import type { MarkerStyle } from '@bendyline/squisq/schemas';
-import { connectorPath, markerPath } from '@bendyline/squisq/doc';
-import type { SceneEdge } from '../commands/SceneCommand';
-import { boxesOf, edgeEndpoints } from './edgeGeometry';
-import type { EdgeNodeBox } from './edgeGeometry';
-
-interface DiagramEdgesProps {
-  nodes: readonly EdgeNodeBox[];
-  edges: readonly SceneEdge[];
-  /** Default routing when an edge sets none. Default 'curved' (diagrams). */
-  variant?: 'curved' | 'straight';
-  /** Id of the currently-selected edge (drawn highlighted, with handles). */
-  selectedId?: string | null;
-  /** Click handler for select-to-edit / delete on an edge. */
-  onEdgeClick?: (edge: SceneEdge) => void;
-}
-
-/** Marker styles that carry a glyph (everything except 'none'). */
-const MARKER_STYLES: MarkerStyle[] = ['arrow', 'open', 'diamond', 'circle', 'square'];
-
-function markerId(prefix: string, style: MarkerStyle, dir: 'start' | 'end'): string {
-  return `${prefix}-squisq-edge-${style}-${dir}`;
-}
-
-export function DiagramEdges({
-  nodes,
-  edges,
-  variant = 'curved',
-  selectedId,
-  onEdgeClick,
-}: DiagramEdgesProps) {
-  const boxById = boxesOf(nodes);
-  const markerPrefix = useId().replace(/:/g, '');
-  const defaultRouting = variant === 'straight' ? 'straight' : 'curved';
-
-  return (
-    <g className="squisq-scene-edges">
-      <defs>
-        {(['start', 'end'] as const).flatMap((dir) =>
-          MARKER_STYLES.map((style) => {
-            const mp = markerPath(style, dir);
-            if (!mp) return null;
-            return (
-              <marker
-                key={markerId(markerPrefix, style, dir)}
-                id={markerId(markerPrefix, style, dir)}
-                viewBox="0 0 10 10"
-                refX={dir === 'end' ? 9 : 1}
-                refY={5}
-                markerWidth={8}
-                markerHeight={8}
-                orient="auto-start-reverse"
-                markerUnits="userSpaceOnUse"
-              >
-                <path
-                  d={mp.d}
-                  className={
-                    mp.filled ? 'squisq-scene-edge-arrow' : 'squisq-scene-edge-marker-open'
-                  }
-                />
-              </marker>
-            );
-          }),
-        )}
-      </defs>
-      {edges.map((edge) => {
-        const a = boxById.get(edge.source);
-        const b = boxById.get(edge.target);
-        if (!a || !b) return null;
-        const snapped = edgeEndpoints(
-          nodes,
-          edge.source,
-          edge.target,
-          edge.sourceAnchor,
-          edge.targetAnchor,
-        );
-        if (!snapped) return null;
-        const { start, end } = snapped;
-        const d = connectorPath(edge.routing ?? defaultRouting, start, end);
-        const startMarker = edge.startMarker ?? 'none';
-        const endMarker = edge.endMarker ?? 'arrow';
-        const selected = selectedId === edge.id;
-        return (
-          <g
-            key={edge.id}
-            className={selected ? 'squisq-scene-edge selected' : 'squisq-scene-edge'}
-            onClick={onEdgeClick ? () => onEdgeClick(edge) : undefined}
-          >
-            <path
-              d={d}
-              className="squisq-scene-edge-path"
-              strokeDasharray={edge.dasharray}
-              markerStart={
-                startMarker !== 'none'
-                  ? `url(#${markerId(markerPrefix, startMarker, 'start')})`
-                  : undefined
-              }
-              markerEnd={
-                endMarker !== 'none'
-                  ? `url(#${markerId(markerPrefix, endMarker, 'end')})`
-                  : undefined
-              }
-            />
-            {edge.label ? (
-              <text
-                x={(a.cx + b.cx) / 2}
-                y={(a.cy + b.cy) / 2}
-                className="squisq-scene-edge-label"
-                textAnchor="middle"
-                dominantBaseline="middle"
-              >
-                {edge.label}
-              </text>
-            ) : null}
-            {selected ? (
-              <>
-                <circle cx={start.x} cy={start.y} r={6} className="squisq-scene-edge-handle" />
-                <circle cx={end.x} cy={end.y} r={6} className="squisq-scene-edge-handle" />
-              </>
-            ) : null}
-          </g>
-        );
-      })}
-    </g>
-  );
-}

package/src/scene/layers/edgeGeometry.ts

@@ -1,104 +0,0 @@
-/**
- * edgeGeometry — pure geometry for scene connector edges (shared by the
- * `DiagramEdges` renderer and the drawing adapter's endpoint hit-testing).
- *
- * Endpoints are clipped to the source/target bounding boxes so an arrowhead
- * sits on a card's edge rather than inside it — matching `diagramBlock.ts` /
- * `drawingBlock.ts` so the editor and the SSR preview agree.
- */
-
-import { NODE_WIDTH, NODE_HEIGHT } from './nodeCard';
-import {
-  anchorPoint,
-  nearestSnapPoint as nearestCoreSnapPoint,
-  snapEndpoints as coreSnapEndpoints,
-  type ConnectorAnchor,
-  type ConnectorSnapPoint,
-} from '@bendyline/squisq/doc';
-
-/** Minimal box an edge needs from a node/shape (id + bounds). */
-export interface EdgeNodeBox {
-  id: string;
-  x: number;
-  y: number;
-  width?: number;
-  height?: number;
-}
-
-/** Center + half-extents of a node/shape box. */
-export interface NodeBox {
-  cx: number;
-  cy: number;
-  rx: number;
-  ry: number;
-}
-
-export function boxesOf(nodes: readonly EdgeNodeBox[]): Map<string, NodeBox> {
-  const map = new Map<string, NodeBox>();
-  for (const n of nodes) {
-    const w = n.width ?? NODE_WIDTH;
-    const h = n.height ?? NODE_HEIGHT;
-    map.set(n.id, { cx: n.x + w / 2, cy: n.y + h / 2, rx: w / 2, ry: h / 2 });
-  }
-  return map;
-}
-
-/** Intersection of the center-to-center line with `from`'s bounding box. */
-export function edgePoint(from: NodeBox, to: NodeBox): { x: number; y: number } {
-  const dx = to.cx - from.cx;
-  const dy = to.cy - from.cy;
-  if (dx === 0 && dy === 0) return { x: from.cx, y: from.cy };
-  const adx = Math.abs(dx);
-  const ady = Math.abs(dy);
-  const sx = adx > 0 ? from.rx / adx : Infinity;
-  const sy = ady > 0 ? from.ry / ady : Infinity;
-  const s = Math.min(sx, sy);
-  return { x: from.cx + dx * s, y: from.cy + dy * s };
-}
-
-function boxFor(nodes: readonly EdgeNodeBox[], id: string): NodeBox | null {
-  return boxesOf(nodes).get(id) ?? null;
-}
-
-/** Nearest stable connector port on the named node/shape to `point`. */
-export function snapPointToward(
-  nodes: readonly EdgeNodeBox[],
-  id: string,
-  point: { x: number; y: number },
-): ConnectorSnapPoint | null {
-  const box = boxFor(nodes, id);
-  return box ? nearestCoreSnapPoint(box, point) : null;
-}
-
-/**
- * Snapped start/end points of the edge `source`→`target`, or null when an
- * endpoint shape is missing. Used by the renderer and by tool hit-testing
- * endpoint handles against the same geometry the renderer draws.
- */
-export function edgeEndpoints(
-  nodes: readonly EdgeNodeBox[],
-  source: string,
-  target: string,
-  sourceAnchor?: ConnectorAnchor,
-  targetAnchor?: ConnectorAnchor,
-): { start: ConnectorSnapPoint; end: ConnectorSnapPoint } | null {
-  const boxes = boxesOf(nodes);
-  const a = boxes.get(source);
-  const b = boxes.get(target);
-  if (!a || !b) return null;
-  const snapped = coreSnapEndpoints(a, b);
-  return {
-    start: sourceAnchor ? anchorPoint(a, sourceAnchor) : snapped.start,
-    end: targetAnchor ? anchorPoint(b, targetAnchor) : snapped.end,
-  };
-}
-
-export function straightPath(a: { x: number; y: number }, b: { x: number; y: number }): string {
-  return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
-}
-
-export function curvedPath(start: { x: number; y: number }, end: { x: number; y: number }): string {
-  const dx = Math.abs(end.x - start.x);
-  const cp = Math.max(40, dx / 2);
-  return `M ${start.x} ${start.y} C ${start.x + cp} ${start.y}, ${end.x - cp} ${end.y}, ${end.x} ${end.y}`;
-}