@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/scene/tools/DrawingConnectTool.ts

@@ -1,231 +0,0 @@
-/**
- * DrawingConnectTool — create and re-target connectors between shapes.
- *
- * Mirrors `ConnectTool` but works on drawing shape layers (`dshape-<id>`)
- * and supports two gestures:
- *  - Press empty-on a shape, drag to another shape, release → `addEdge`.
- *  - Press on a selected connector's endpoint handle, drag to a shape,
- *    release → re-target that endpoint (via the `onRetarget` callback,
- *    since the generic SceneCommand vocabulary has no retarget command).
- *
- * Current edges / selection / shape boxes change every render, so the
- * host passes `endpointAt` (reads the live selected-edge handles) rather
- * than baking them into the memoized tool.
- */
-
-import { createElement, type JSX } from 'react';
-import type { SceneTool, SceneToolContext } from './SceneTool';
-import { shapeIdFromLayerId, isPrimaryShapeLayer } from '../layers/shapeLayers';
-import {
-  edgeEndpoints,
-  snapPointToward,
-  straightPath,
-  type EdgeNodeBox,
-} from '../layers/edgeGeometry';
-
-/** A grab on the selected connector's endpoint handle. */
-export interface EndpointHit {
-  connectorId: string;
-  /** Which end the handle controls. */
-  end: 'from' | 'to';
-  /** The shape id of the *other* (fixed) endpoint — anchors the drag. */
-  fixedShapeId: string;
-}
-
-export interface DrawingConnectOptions {
-  /** Endpoint handle (of the selected connector) near `point`, if any. */
-  endpointAt?: (point: { x: number; y: number }) => EndpointHit | null;
-  /** Commit an endpoint re-target. */
-  onRetarget?: (connectorId: string, end: 'from' | 'to', newTargetId: string) => void;
-}
-
-type DragState =
-  | {
-      mode: 'new';
-      sourceId: string;
-      sourceBox: EdgeNodeBox;
-      start: { x: number; y: number };
-      end: { x: number; y: number };
-      hovered: string | null;
-    }
-  | {
-      mode: 'retarget';
-      connectorId: string;
-      end: 'from' | 'to';
-      fixedShapeId: string;
-      fixedBox: EdgeNodeBox;
-      start: { x: number; y: number };
-      endPoint: { x: number; y: number };
-      hovered: string | null;
-    };
-
-export function createDrawingConnectTool(options: DrawingConnectOptions = {}): SceneTool {
-  let drag: DragState | null = null;
-
-  function pointer(e: React.PointerEvent): { sx: number; sy: number } {
-    const rect = (e.currentTarget as Element).getBoundingClientRect();
-    return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
-  }
-
-  function shapeBox(ctx: SceneToolContext, shapeId: string): EdgeNodeBox | null {
-    const it = ctx.hitItems.find((h) => h.id === `dshape-${shapeId}`);
-    if (!it) return null;
-    return {
-      id: shapeId,
-      x: it.bounds.x,
-      y: it.bounds.y,
-      width: it.bounds.width,
-      height: it.bounds.height,
-    };
-  }
-
-  function shapeAt(ctx: SceneToolContext, v: { x: number; y: number }): string | null {
-    const hitId = ctx.hit(v);
-    if (!hitId || !isPrimaryShapeLayer(hitId)) return null;
-    return shapeIdFromLayerId(hitId);
-  }
-
-  function previewNew(
-    sourceBox: EdgeNodeBox,
-    current: { x: number; y: number },
-    targetBox: EdgeNodeBox | null,
-  ): { start: { x: number; y: number }; end: { x: number; y: number } } {
-    if (targetBox) {
-      return (
-        edgeEndpoints([sourceBox, targetBox], sourceBox.id, targetBox.id) ?? {
-          start: current,
-          end: current,
-        }
-      );
-    }
-    return {
-      start: snapPointToward([sourceBox], sourceBox.id, current) ?? current,
-      end: current,
-    };
-  }
-
-  function previewRetarget(
-    fixedBox: EdgeNodeBox,
-    movedEnd: 'from' | 'to',
-    current: { x: number; y: number },
-    targetBox: EdgeNodeBox | null,
-  ): { start: { x: number; y: number }; end: { x: number; y: number } } {
-    if (targetBox) {
-      const source = movedEnd === 'from' ? targetBox : fixedBox;
-      const target = movedEnd === 'from' ? fixedBox : targetBox;
-      return (
-        edgeEndpoints([source, target], source.id, target.id) ?? {
-          start: current,
-          end: current,
-        }
-      );
-    }
-    const fixed = snapPointToward([fixedBox], fixedBox.id, current) ?? current;
-    return movedEnd === 'from' ? { start: current, end: fixed } : { start: fixed, end: current };
-  }
-
-  return {
-    id: 'connect',
-    label: 'Connect',
-    cursor: 'crosshair',
-    shortcut: 'c',
-
-    onPointerDown(e, ctx) {
-      if (e.button !== 0) return;
-      const { sx, sy } = pointer(e);
-      const v = ctx.screenToViewport(sx, sy);
-
-      // Endpoint handle of the selected connector → re-target gesture.
-      const ep = options.endpointAt?.(v);
-      if (ep) {
-        const fixedBox = shapeBox(ctx, ep.fixedShapeId);
-        if (!fixedBox) return;
-        const preview = previewRetarget(fixedBox, ep.end, v, null);
-        drag = {
-          mode: 'retarget',
-          connectorId: ep.connectorId,
-          end: ep.end,
-          fixedShapeId: ep.fixedShapeId,
-          fixedBox,
-          start: preview.start,
-          endPoint: preview.end,
-          hovered: null,
-        };
-        (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-        e.stopPropagation();
-        return;
-      }
-
-      // Otherwise start a new connection from the shape under the pointer.
-      const src = shapeAt(ctx, v);
-      if (!src) return;
-      const sourceBox = shapeBox(ctx, src);
-      if (!sourceBox) return;
-      const preview = previewNew(sourceBox, v, null);
-      drag = {
-        mode: 'new',
-        sourceId: src,
-        sourceBox,
-        start: preview.start,
-        end: preview.end,
-        hovered: null,
-      };
-      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-      e.stopPropagation();
-    },
-
-    onPointerMove(e, ctx) {
-      if (!drag) return;
-      const { sx, sy } = pointer(e);
-      const v = ctx.screenToViewport(sx, sy);
-      const tgt = shapeAt(ctx, v);
-      const exclude = drag.mode === 'new' ? drag.sourceId : drag.fixedShapeId;
-      const targetId = tgt && tgt !== exclude ? tgt : null;
-      const targetBox = targetId ? shapeBox(ctx, targetId) : null;
-      if (drag.mode === 'new') {
-        const preview = previewNew(drag.sourceBox, v, targetBox);
-        drag.start = preview.start;
-        drag.end = preview.end;
-      } else {
-        const preview = previewRetarget(drag.fixedBox, drag.end, v, targetBox);
-        drag.start = preview.start;
-        drag.endPoint = preview.end;
-      }
-      drag.hovered = targetBox?.id ?? null;
-    },
-
-    onPointerUp(e, ctx) {
-      if (!drag) return;
-      const finished = drag;
-      drag = null;
-      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-      if (!finished.hovered) return;
-      if (finished.mode === 'new') {
-        ctx.dispatch({ kind: 'addEdge', source: finished.sourceId, target: finished.hovered });
-      } else {
-        options.onRetarget?.(finished.connectorId, finished.end, finished.hovered);
-      }
-    },
-
-    renderOverlay(): JSX.Element | null {
-      if (!drag) return null;
-      const a = drag.start;
-      const b = drag.mode === 'new' ? drag.end : drag.endPoint;
-      return createElement(
-        'g',
-        { key: 'drawing-connect-preview' },
-        createElement('path', {
-          d: straightPath(a, b),
-          className: 'squisq-scene-connect-preview',
-          fill: 'none',
-        }),
-        createElement('circle', {
-          cx: b.x,
-          cy: b.y,
-          r: 4,
-          className: 'squisq-scene-connect-preview',
-        }),
-      );
-    },
-  };
-}

package/src/scene/tools/PathTool.ts

@@ -1,158 +0,0 @@
-/**
- * PathTool — drag to draw a freehand path.
- *
- * Captures pointer samples on move; on release, simplifies the polyline
- * into a smooth cubic bezier sequence (a one-pass Catmull–Rom-style
- * pass) and dispatches an `addLayer` for a new PathLayer.
- *
- * v1 emits an open path (no Z). Closed paths can be added by a later
- * tool variant or via the SelectTool's properties panel.
- */
-
-import { createElement, type JSX } from 'react';
-import type { PathLayer } from '@bendyline/squisq/schemas';
-import type { SceneTool } from './SceneTool';
-import { serializePath, type ParsedPath, type PathPoint } from '../paths/bezierEdit';
-
-interface PathToolOptions {
-  /** Stroke color. Default '#1e293b'. */
-  stroke?: string;
-  /** Stroke width. Default 2. */
-  strokeWidth?: number;
-  /** Minimum distance (viewport units) between captured samples. */
-  sampleDistance?: number;
-  /** Override id / label / shortcut. */
-  id?: string;
-  label?: string;
-  shortcut?: string;
-}
-
-export function createPathTool(options: PathToolOptions = {}): SceneTool {
-  const stroke = options.stroke ?? '#1e293b';
-  const strokeWidth = options.strokeWidth ?? 2;
-  const sampleDistance = options.sampleDistance ?? 4;
-
-  let samples: { x: number; y: number }[] | null = null;
-
-  function pointer(e: React.PointerEvent): { sx: number; sy: number } {
-    const rect = (e.currentTarget as Element).getBoundingClientRect();
-    return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
-  }
-
-  return {
-    id: options.id ?? 'path',
-    label: options.label ?? 'Pen',
-    cursor: 'crosshair',
-    shortcut: options.shortcut ?? 'p',
-
-    onPointerDown(e, ctx) {
-      if (e.button !== 0) return;
-      const { sx, sy } = pointer(e);
-      const v = ctx.screenToViewport(sx, sy);
-      samples = [v];
-      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-    },
-
-    onPointerMove(e, ctx) {
-      if (!samples) return;
-      const { sx, sy } = pointer(e);
-      const v = ctx.screenToViewport(sx, sy);
-      const last = samples[samples.length - 1];
-      if (Math.hypot(v.x - last.x, v.y - last.y) >= sampleDistance) samples.push(v);
-    },
-
-    onPointerUp(e, ctx) {
-      if (!samples) return;
-      const captured = samples;
-      samples = null;
-      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-      if (captured.length < 2) return;
-      const parsed = smoothPolyline(captured);
-      const d = serializePath(parsed);
-      const bounds = polylineBounds(captured);
-      const layer: PathLayer = {
-        id: `path-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e6).toString(36)}`,
-        type: 'path',
-        position: {
-          x: bounds.x,
-          y: bounds.y,
-          width: bounds.width,
-          height: bounds.height,
-        },
-        content: {
-          d,
-          stroke,
-          strokeWidth,
-          fill: 'none',
-        },
-      };
-      ctx.dispatch({ kind: 'addLayer', layer });
-      ctx.setActiveTool?.('select');
-    },
-
-    renderOverlay(): JSX.Element | null {
-      if (!samples || samples.length < 2) return null;
-      // Live polyline — cheaper than re-smoothing on every move.
-      const d = polylineToD(samples);
-      return createElement('path', {
-        key: 'path-preview',
-        d,
-        className: 'squisq-scene-connect-preview',
-        fill: 'none',
-      });
-    },
-  };
-}
-
-function polylineToD(pts: { x: number; y: number }[]): string {
-  if (pts.length === 0) return '';
-  const parts = [`M ${pts[0].x} ${pts[0].y}`];
-  for (let i = 1; i < pts.length; i++) parts.push(`L ${pts[i].x} ${pts[i].y}`);
-  return parts.join(' ');
-}
-
-/**
- * Catmull–Rom → cubic bezier conversion. Each interior segment becomes a
- * C with control points derived from the surrounding samples, producing
- * a smooth curve that passes through every input point. Endpoints reuse
- * the adjacent sample as a virtual control.
- */
-function smoothPolyline(pts: { x: number; y: number }[]): ParsedPath {
-  if (pts.length === 0) return { points: [], closed: false };
-  if (pts.length === 1)
-    return { points: [{ kind: 'move', x: pts[0].x, y: pts[0].y }], closed: false };
-  const points: PathPoint[] = [{ kind: 'move', x: pts[0].x, y: pts[0].y }];
-  for (let i = 0; i < pts.length - 1; i++) {
-    const p0 = pts[i - 1] ?? pts[i];
-    const p1 = pts[i];
-    const p2 = pts[i + 1];
-    const p3 = pts[i + 2] ?? p2;
-    const tension = 6;
-    const cp1 = { x: p1.x + (p2.x - p0.x) / tension, y: p1.y + (p2.y - p0.y) / tension };
-    const cp2 = { x: p2.x - (p3.x - p1.x) / tension, y: p2.y - (p3.y - p1.y) / tension };
-    // Attach cpOut to the previous point and cpIn to the new point.
-    const prev = points[points.length - 1];
-    if (prev) prev.cpOut = cp1;
-    points.push({ kind: 'curve', x: p2.x, y: p2.y, cpIn: cp2 });
-  }
-  return { points, closed: false };
-}
-
-function polylineBounds(pts: { x: number; y: number }[]): {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-} {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const p of pts) {
-    if (p.x < minX) minX = p.x;
-    if (p.y < minY) minY = p.y;
-    if (p.x > maxX) maxX = p.x;
-    if (p.y > maxY) maxY = p.y;
-  }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}

package/src/scene/tools/PlaceTool.ts

@@ -1,47 +0,0 @@
-/**
- * PlaceTool — a generic "click the canvas to drop one pre-built layer"
- * tool. The palette arms a place tool; the next canvas click drops the
- * layer its `build` function returns at the click point, then hands
- * control back to Select so the user can immediately reposition it.
- *
- * This is the shared mechanism behind both the placeholder-token tools
- * (see `createTokenTool`) and the shape tools in the template designer's
- * "Add" bin — anything that places a single layer at a point.
- */
-
-import type { Layer } from '@bendyline/squisq/schemas';
-import type { SceneTool } from './SceneTool';
-
-export interface PlaceToolOptions {
-  /** Stable tool id (e.g. `'token-title'`, `'shape-diamond'`). */
-  id: string;
-  /** Label shown in the toolbar / palette button. */
-  label: string;
-  /** Optional keyboard shortcut. */
-  shortcut?: string;
-  /** Cursor while the tool is armed. Default `'crosshair'`. */
-  cursor?: string;
-  /** Build the layer to drop, given the click point in viewport units. */
-  build: (point: { x: number; y: number }) => Layer;
-}
-
-export function createPlaceTool(options: PlaceToolOptions): SceneTool {
-  return {
-    id: options.id,
-    label: options.label,
-    cursor: options.cursor ?? 'crosshair',
-    shortcut: options.shortcut,
-
-    onPointerDown(e, ctx) {
-      if (e.button !== 0) return;
-      const rect = (e.currentTarget as Element).getBoundingClientRect();
-      const sx = e.clientX - rect.left;
-      const sy = e.clientY - rect.top;
-      const v = ctx.screenToViewport(sx, sy);
-      ctx.dispatch({ kind: 'addLayer', layer: options.build(v) });
-      // Hand control back to Select so the user can immediately
-      // reposition the newly-added layer.
-      ctx.setActiveTool?.('select');
-    },
-  };
-}

package/src/scene/tools/SceneTool.ts

@@ -1,85 +0,0 @@
-/**
- * SceneTool — the contract every editing mode (select, connect, draw,
- * shape, text) implements. A tool is plain data + handlers, not a React
- * component, so adapters can compose toolsets without reaching into JSX.
- *
- * The Scene component owns event binding, pan/zoom, and selection state;
- * tools receive a `SceneToolContext` with helpers for hit-testing,
- * coordinate conversion, and command dispatch.
- */
-
-import type { JSX } from 'react';
-import type { Layer } from '@bendyline/squisq/schemas';
-import type { SceneCommand, SceneEdge } from '../commands/SceneCommand';
-import type { HitTestable } from '../hooks/useSceneHitTest';
-import type { SceneTransform } from '../hooks/useScenePanZoom';
-
-/** Mutable gesture storage owned by one Scene instance. */
-export interface SceneInteractionState {
-  selectDrag?: unknown;
-  connect?: unknown;
-}
-
-export interface SceneToolContext {
-  /** Gesture state private to the owning Scene instance. */
-  interaction: SceneInteractionState;
-  /** Current viewport size in viewport units. */
-  viewport: { width: number; height: number };
-  /** Current pan/zoom transform. */
-  transform: SceneTransform;
-  /** All currently rendered layers, in back-to-front order. */
-  layers: readonly Layer[];
-  /** Optional diagram edges (diagram mode only). */
-  edges: readonly SceneEdge[];
-  /** Currently selected layer ids. */
-  selection: ReadonlySet<string>;
-  /** Hit-testable bounding boxes for every layer (precomputed by Scene). */
-  hitItems: readonly HitTestable[];
-  /** Convert a screen-pixel point (relative to the Scene root) → viewport units. */
-  screenToViewport: (sx: number, sy: number) => { x: number; y: number };
-  /** Convert a viewport-unit point → screen-pixel point. */
-  viewportToScreen: (vx: number, vy: number) => { x: number; y: number };
-  /** Topmost layer id at the given viewport-unit point, or null. */
-  hit: (point: { x: number; y: number }) => string | null;
-  /** Replace selection. */
-  setSelection: (ids: Iterable<string>) => void;
-  /** Dispatch a SceneCommand to the host adapter. */
-  dispatch: (cmd: SceneCommand) => void;
-  /** Optional setter for the active tool id (e.g. ConnectTool fall-through to SelectTool). */
-  setActiveTool?: (id: string) => void;
-  /**
-   * Open the shared inline text editor for the given hit layer id (the host
-   * must supply a `textEditing` config). Used by SelectTool's double-click.
-   */
-  beginTextEdit?: (hitLayerId: string) => void;
-}
-
-export interface SceneTool {
-  /** Stable id, e.g. `'select'`, `'connect'`. */
-  id: string;
-  /** Human-readable label for the toolbar. */
-  label: string;
-  /** CSS cursor while the tool is active. */
-  cursor: string;
-  /** Optional keyboard accelerator (single-character, lowercase). */
-  shortcut?: string;
-  /** Hide resize handles on selected layers while this tool is active. */
-  hideSelectionHandles?: boolean;
-  /**
-   * Optional icon — JSX rendered inside a fixed-size toolbar button. Keep
-   * it light (a single SVG path is ideal); the toolbar wrapper handles
-   * sizing and active-state styling.
-   */
-  icon?: JSX.Element;
-  onPointerDown?(e: React.PointerEvent, ctx: SceneToolContext): void;
-  onPointerMove?(e: React.PointerEvent, ctx: SceneToolContext): void;
-  onPointerUp?(e: React.PointerEvent, ctx: SceneToolContext): void;
-  onDoubleClick?(e: React.MouseEvent, ctx: SceneToolContext): void;
-  onKeyDown?(e: KeyboardEvent, ctx: SceneToolContext): void;
-  /**
-   * Optional overlay rendered above the scene (e.g. marquee box, in-flight
-   * connection preview, drag ghost). Returned JSX is appended into the
-   * Scene's overlay SVG layer.
-   */
-  renderOverlay?(ctx: SceneToolContext): JSX.Element | null;
-}