@bendyline/squisq-editor-react 1.5.3 → 1.6.0

package/src/scene/tools/PathTool.ts

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

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

@@ -0,0 +1,75 @@
+/**
+ * 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';
+
+export interface SceneToolContext {
+  /** 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;
+  /**
+   * 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;
+}

package/src/scene/tools/SelectTool.ts

@@ -0,0 +1,284 @@
+/**
+ * SelectTool — the default tool.
+ *
+ * Pointer interactions:
+ *   - Press on a layer  → select (shift to add) and start a move-drag
+ *   - Press on a handle → start a resize-drag (corner identifies the
+ *                          fixed-anchor side; the opposite side moves
+ *                          with the pointer)
+ *   - Press on the pane → clear selection (unless shift) and start a
+ *                          marquee box; release commits the box
+ *                          intersection as the new selection
+ *   - Delete / Backspace → remove every selected layer
+ *
+ * Drag state lives at module scope (one Scene mounted at a time in
+ * practice). The Scene polls `getActiveMoveOffset()` /
+ * `getActiveResize()` each render to draw a live preview of the
+ * in-flight gesture against the selected layers' real positions.
+ */
+
+import { createElement, type JSX } from 'react';
+import type { SceneTool, SceneToolContext } from './SceneTool';
+import type { SceneCommand } from '../commands/SceneCommand';
+import type { ResizeCorner } from '../SceneSelection';
+
+interface MoveDragState {
+  kind: 'move';
+  startV: { x: number; y: number };
+  startS: { x: number; y: number };
+  layerStarts: Map<string, { x: number; y: number }>;
+  currentV: { x: number; y: number };
+  movedPastThreshold: boolean;
+}
+
+interface MarqueeDragState {
+  kind: 'marquee';
+  startV: { x: number; y: number };
+  startS: { x: number; y: number };
+  currentV: { x: number; y: number };
+  movedPastThreshold: boolean;
+}
+
+interface ResizeDragState {
+  kind: 'resize';
+  layerId: string;
+  corner: ResizeCorner;
+  startV: { x: number; y: number };
+  startBounds: { x: number; y: number; width: number; height: number };
+  currentBounds: { x: number; y: number; width: number; height: number };
+}
+
+type DragState = MoveDragState | MarqueeDragState | ResizeDragState;
+
+const DRAG_THRESHOLD_PX = 3;
+const MIN_LAYER_SIZE = 8;
+
+let dragState: DragState | null = null;
+
+function pointerCoords(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 getLayerOrigin(ctx: SceneToolContext, id: string): { x: number; y: number } | null {
+  const hit = ctx.hitItems.find((it) => it.id === id);
+  return hit ? { x: hit.bounds.x, y: hit.bounds.y } : null;
+}
+
+/**
+ * Resize a bounds by anchoring the opposite corner/edge to its original
+ * spot and moving the corner under the pointer to `(currentV)`. Min
+ * width/height is `MIN_LAYER_SIZE` so layers can't shrink to invisible.
+ */
+function applyResize(
+  start: { x: number; y: number; width: number; height: number },
+  corner: ResizeCorner,
+  currentV: { x: number; y: number },
+): { x: number; y: number; width: number; height: number } {
+  let x = start.x;
+  let y = start.y;
+  let right = start.x + start.width;
+  let bottom = start.y + start.height;
+
+  // Each corner identifier moves the listed edges. Anchor stays put.
+  if (corner.includes('w')) x = Math.min(currentV.x, right - MIN_LAYER_SIZE);
+  if (corner.includes('e')) right = Math.max(currentV.x, x + MIN_LAYER_SIZE);
+  if (corner.includes('n')) y = Math.min(currentV.y, bottom - MIN_LAYER_SIZE);
+  if (corner.includes('s')) bottom = Math.max(currentV.y, y + MIN_LAYER_SIZE);
+
+  return { x, y, width: right - x, height: bottom - y };
+}
+
+/** Begin a handle-initiated resize drag. Called by the Scene when a corner is pressed. */
+export function beginHandleDrag(args: {
+  layerId: string;
+  corner: ResizeCorner;
+  startV: { x: number; y: number };
+  startBounds: { x: number; y: number; width: number; height: number };
+}): void {
+  dragState = {
+    kind: 'resize',
+    layerId: args.layerId,
+    corner: args.corner,
+    startV: args.startV,
+    startBounds: args.startBounds,
+    currentBounds: args.startBounds,
+  };
+}
+
+export const SelectTool: SceneTool = {
+  id: 'select',
+  label: 'Select',
+  cursor: 'default',
+  shortcut: 'v',
+
+  onPointerDown(e, ctx) {
+    if (e.button !== 0) return;
+    // Resize drags are initiated by the SceneSelection handle, which
+    // calls `beginHandleDrag` before this fires; the handle stops
+    // propagation, so we won't see this branch when starting a resize.
+    const { sx, sy } = pointerCoords(e);
+    const v = ctx.screenToViewport(sx, sy);
+    const hitId = ctx.hit(v);
+
+    if (hitId) {
+      const additive = e.shiftKey;
+      const nextSelection = additive
+        ? new Set([...ctx.selection, hitId])
+        : ctx.selection.has(hitId)
+          ? ctx.selection
+          : new Set([hitId]);
+      if (nextSelection !== ctx.selection) ctx.setSelection(nextSelection);
+
+      const layerStarts = new Map<string, { x: number; y: number }>();
+      for (const id of nextSelection) {
+        const origin = getLayerOrigin(ctx, id);
+        if (origin) layerStarts.set(id, origin);
+      }
+      dragState = {
+        kind: 'move',
+        startV: v,
+        startS: { x: sx, y: sy },
+        layerStarts,
+        currentV: v,
+        movedPastThreshold: false,
+      };
+    } else {
+      if (!e.shiftKey) ctx.setSelection([]);
+      dragState = {
+        kind: 'marquee',
+        startV: v,
+        startS: { x: sx, y: sy },
+        currentV: v,
+        movedPastThreshold: false,
+      };
+    }
+
+    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+  },
+
+  onPointerMove(e, ctx) {
+    if (!dragState) return;
+    const { sx, sy } = pointerCoords(e);
+    const v = ctx.screenToViewport(sx, sy);
+
+    if (dragState.kind === 'resize') {
+      dragState.currentBounds = applyResize(dragState.startBounds, dragState.corner, v);
+      return;
+    }
+
+    dragState.currentV = v;
+    if (!dragState.movedPastThreshold) {
+      const dx = sx - dragState.startS.x;
+      const dy = sy - dragState.startS.y;
+      if (Math.hypot(dx, dy) >= DRAG_THRESHOLD_PX) dragState.movedPastThreshold = true;
+    }
+
+    if (dragState.kind === 'marquee') {
+      const box = boxFromCorners(dragState.startV, v);
+      const inside = ctx.hitItems.filter((it) => rectIntersects(it.bounds, box)).map((it) => it.id);
+      ctx.setSelection(inside);
+    }
+  },
+
+  onPointerUp(e, ctx) {
+    if (!dragState) return;
+    if (
+      dragState.kind === 'move' &&
+      dragState.movedPastThreshold &&
+      dragState.layerStarts.size > 0
+    ) {
+      const dx = dragState.currentV.x - dragState.startV.x;
+      const dy = dragState.currentV.y - dragState.startV.y;
+      for (const [id, origin] of dragState.layerStarts) {
+        const cmd: SceneCommand = {
+          kind: 'moveLayer',
+          id,
+          x: origin.x + dx,
+          y: origin.y + dy,
+        };
+        ctx.dispatch(cmd);
+      }
+    } else if (dragState.kind === 'resize') {
+      const { x, y, width, height } = dragState.currentBounds;
+      // Resize translates into a move (if origin shifted) + a size change.
+      // We dispatch both so a single grab on a corner can change all four
+      // fields atomically from the host's point of view.
+      ctx.dispatch({ kind: 'moveLayer', id: dragState.layerId, x, y });
+      ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, width, height });
+    }
+    (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+    dragState = null;
+  },
+
+  onDoubleClick(e, ctx) {
+    // Double-click a layer to edit its text inline (when the host wired a
+    // text-editing config). Resolve the hit, then hand off to the Scene.
+    const rect = (e.currentTarget as Element).getBoundingClientRect();
+    const v = ctx.screenToViewport(e.clientX - rect.left, e.clientY - rect.top);
+    const hitId = ctx.hit(v);
+    if (hitId) ctx.beginTextEdit?.(hitId);
+  },
+
+  onKeyDown(e, ctx) {
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      for (const id of ctx.selection) {
+        ctx.dispatch({ kind: 'removeLayer', id });
+      }
+      ctx.setSelection([]);
+      e.preventDefault();
+    } else if (e.key === 'Escape') {
+      ctx.setSelection([]);
+    }
+  },
+
+  renderOverlay(): JSX.Element | null {
+    if (!dragState || dragState.kind !== 'marquee' || !dragState.movedPastThreshold) return null;
+    const box = boxFromCorners(dragState.startV, dragState.currentV);
+    return createElement('rect', {
+      key: 'select-marquee',
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      className: 'squisq-scene-marquee',
+    });
+  },
+};
+
+/** Return the active move-drag offset (viewport units). Null if no drag, or if the drag is a marquee/resize. */
+export function getActiveMoveOffset(): { dx: number; dy: number } | null {
+  if (!dragState || dragState.kind !== 'move' || !dragState.movedPastThreshold) return null;
+  return {
+    dx: dragState.currentV.x - dragState.startV.x,
+    dy: dragState.currentV.y - dragState.startV.y,
+  };
+}
+
+/** Return the live bounds for the layer currently being resized. */
+export function getActiveResize(): {
+  layerId: string;
+  bounds: { x: number; y: number; width: number; height: number };
+} | null {
+  if (!dragState || dragState.kind !== 'resize') return null;
+  return { layerId: dragState.layerId, bounds: dragState.currentBounds };
+}
+
+function boxFromCorners(
+  a: { x: number; y: number },
+  b: { x: number; y: number },
+): { x: number; y: number; width: number; height: number } {
+  return {
+    x: Math.min(a.x, b.x),
+    y: Math.min(a.y, b.y),
+    width: Math.abs(b.x - a.x),
+    height: Math.abs(b.y - a.y),
+  };
+}
+
+function rectIntersects(
+  a: { x: number; y: number; width: number; height: number },
+  b: { x: number; y: number; width: number; height: number },
+): boolean {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}