@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/scene/SceneSideToolbar.tsx

@@ -1,89 +0,0 @@
-/**
- * SceneSideToolbar — placement wrapper for a `SceneBlockToolbar` beside an
- * *inline* diagram / drawing / layout canvas.
- *
- * The toolbar normally floats as an always-open vertical column in the page's
- * right gutter (`.squisq-scene-side-toolbar`, positioned at `left: 100%`). That
- * only works when the gutter is wide enough to hold the 180px column; on a
- * narrow editor — or in a host whose page fills most of the width — the column
- * overhangs the editor's clipping edge and gets cut off.
- *
- * So we measure the real gutter (the gap between the canvas's right edge and
- * the nearest horizontally-clipping ancestor) rather than guessing from a
- * viewport breakpoint, since page width / centering / host chrome all move it:
- *   • Fits  — render the column as-is (the common, wider case).
- *   • Clips — render the toolbar as a compact horizontal bar in normal flow
- *     above the canvas (`.squisq-scene-inline-toolbar`). It stays visible and
- *     is never clipped; it just costs a small strip of vertical space.
- *
- * A normal-flow bar is used rather than an on-demand overlay popover because
- * absolutely-positioned content overlapping the React Flow canvas fails to
- * paint in some hosts (the diagram's own maximize overlay hits the same wall),
- * whereas in-flow content always renders.
- *
- * Only the inline placement adapts. Maximized mode has a full screen to reserve
- * a static right column, so the widgets render the bare
- * `.squisq-scene-side-toolbar` there and never mount this wrapper.
- */
-
-import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
-
-/**
- * Horizontal room the gutter must have to host the open column, kept in sync
- * with `.squisq-scene-side-toolbar` in scene.css (12px `margin-left` + 180px
- * `width`) plus a few px of breathing room so we fall back to the bar just
- * before the column would touch the clip edge.
- */
-const SIDE_TOOLBAR_FIT_PX = 12 + 180 + 4;
-
-interface SceneSideToolbarProps {
-  /** The `SceneBlockToolbar` element built by the host widget. */
-  children: ReactNode;
-}
-
-export function SceneSideToolbar({ children }: SceneSideToolbarProps) {
-  const wrapRef = useRef<HTMLDivElement>(null);
-  const [collapsed, setCollapsed] = useState(false);
-
-  // Measure whether the right gutter can host the column. The column is
-  // absolutely positioned at the shell's right edge, so its clipping depends on
-  // `shellRight` vs. the nearest ancestor that clips horizontally — recomputed
-  // whenever the editor body resizes (window resize, outline toggle, etc.).
-  // Switching to the in-flow bar changes shell *height*, not `shellRight`, so
-  // there's no measure↔collapse loop.
-  useLayoutEffect(() => {
-    const wrap = wrapRef.current;
-    if (!wrap) return;
-    const shell = wrap.closest('.squisq-scene-shell') as HTMLElement | null;
-    const clip = wrap.closest('.squisq-editor-content') as HTMLElement | null;
-    const measure = () => {
-      if (!shell) return;
-      const shellRight = shell.getBoundingClientRect().right;
-      const clipRight = clip
-        ? clip.getBoundingClientRect().right
-        : document.documentElement.clientWidth;
-      setCollapsed(clipRight - shellRight < SIDE_TOOLBAR_FIT_PX);
-    };
-    measure();
-    const ro = new ResizeObserver(measure);
-    const target = clip ?? shell;
-    if (target) ro.observe(target);
-    if (shell && shell !== target) ro.observe(shell);
-    window.addEventListener('resize', measure);
-    return () => {
-      ro.disconnect();
-      window.removeEventListener('resize', measure);
-    };
-  }, []);
-
-  return (
-    <div
-      ref={wrapRef}
-      className={collapsed ? 'squisq-scene-inline-toolbar' : 'squisq-scene-side-toolbar'}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default SceneSideToolbar;

package/src/scene/SceneViewControls.tsx

@@ -1,43 +0,0 @@
-import { Icon } from '../Icon';
-
-interface SceneViewControlsProps {
-  scale: number;
-  fit: boolean;
-  onZoomOut: () => void;
-  onZoomIn: () => void;
-  onFit: () => void;
-}
-
-/** Shared zoom/fit chrome for source-backed simple and complex diagrams. */
-export function SceneViewControls({
-  scale,
-  fit,
-  onZoomOut,
-  onZoomIn,
-  onFit,
-}: SceneViewControlsProps) {
-  return (
-    <div className="squisq-scene-view-controls" role="toolbar" aria-label="Diagram view">
-      <button type="button" onClick={onZoomOut} title="Zoom out" aria-label="Zoom out">
-        <Icon icon="fa-solid fa-minus" />
-      </button>
-      <output className="squisq-scene-view-scale" aria-label="Diagram zoom">
-        {Math.round(scale * 100)}%
-      </output>
-      <button type="button" onClick={onZoomIn} title="Zoom in" aria-label="Zoom in">
-        <Icon icon="fa-solid fa-plus" />
-      </button>
-      <button
-        type="button"
-        className="squisq-scene-view-fit"
-        data-active={fit || undefined}
-        aria-pressed={fit}
-        onClick={onFit}
-        title="Fit all shapes in the canvas"
-        aria-label="Fit diagram"
-      >
-        Fit
-      </button>
-    </div>
-  );
-}

package/src/scene/SceneViewport.tsx

@@ -1,106 +0,0 @@
-/**
- * SceneViewport — the scrollable, zoomable SVG canvas.
- *
- * Owns the wheel/middle-button pan/zoom event handlers and applies the
- * current `SceneTransform` to a single root `<g>` element. Children
- * render at their natural viewport coordinates; the group transform
- * carries the pan/zoom.
- *
- * Dot-grid background lives behind the layer group as an SVG `<pattern>`
- * so it scales/translates with the canvas exactly the way a "real"
- * canvas grid would.
- */
-
-import { forwardRef, useId, type ReactNode, type WheelEvent } from 'react';
-import type { SceneTransform } from './hooks/useScenePanZoom';
-
-interface SceneViewportProps {
-  width: number;
-  height: number;
-  transform: SceneTransform;
-  /** Called with a wheel event for the viewport. */
-  onWheel?: (e: WheelEvent<SVGSVGElement>) => void;
-  /** Called for any pointer event over the viewport. */
-  onPointerDown?: (e: React.PointerEvent<SVGSVGElement>) => void;
-  onPointerMove?: (e: React.PointerEvent<SVGSVGElement>) => void;
-  onPointerUp?: (e: React.PointerEvent<SVGSVGElement>) => void;
-  onPointerCancel?: (e: React.PointerEvent<SVGSVGElement>) => void;
-  onDoubleClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
-  /** HTML5 drag-and-drop handlers — used for palette drag-to-place. */
-  onDragOver?: (e: React.DragEvent<SVGSVGElement>) => void;
-  onDrop?: (e: React.DragEvent<SVGSVGElement>) => void;
-  /** Optional CSS cursor (set by the active tool). */
-  cursor?: string;
-  /** Layers + overlay are children of the transformed group. */
-  children: ReactNode;
-}
-
-export const SceneViewport = forwardRef<SVGSVGElement, SceneViewportProps>(function SceneViewport(
-  {
-    width,
-    height,
-    transform,
-    onWheel,
-    onPointerDown,
-    onPointerMove,
-    onPointerUp,
-    onPointerCancel,
-    onDoubleClick,
-    onDragOver,
-    onDrop,
-    cursor,
-    children,
-  },
-  ref,
-) {
-  const t = transform;
-  const gridId = `squisq-scene-dot-grid-${useId().replace(/:/g, '')}`;
-  const groupTransform = `translate(${t.tx} ${t.ty}) scale(${t.scale})`;
-
-  return (
-    <svg
-      ref={ref}
-      className="squisq-scene-viewport"
-      width={width}
-      height={height}
-      // `data-cursor` drives a CSS rule that picks a custom URL-based
-      // cursor (see scene.css). The OS-stock `default` / `crosshair`
-      // keywords render as thin or invisible shapes on Windows when
-      // users have configured large/white cursor schemes; the URL
-      // cursors stay high-contrast on any background.
-      data-cursor={cursor ?? 'default'}
-      onWheel={onWheel}
-      onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={onPointerUp}
-      onPointerCancel={onPointerCancel}
-      onDoubleClick={onDoubleClick}
-      onDragOver={onDragOver}
-      onDrop={onDrop}
-      role="application"
-      // Focusable so the SVG can receive keyboard events directly. The
-      // Scene focuses it on pointer-down so Delete/Escape/tool-shortcut
-      // keys reach our handlers even when mounted inside a contentEditable
-      // ProseMirror surface.
-      tabIndex={-1}
-      // Disable native browser gestures we don't want (pinch-zoom on the
-      // SVG, pan momentum) — pointer events handle these explicitly.
-      // CSS sets `touch-action: none` on the viewport class.
-    >
-      <defs>
-        <pattern
-          id={gridId}
-          x={t.tx}
-          y={t.ty}
-          width={24 * t.scale}
-          height={24 * t.scale}
-          patternUnits="userSpaceOnUse"
-        >
-          <circle cx={1} cy={1} r={1} className="squisq-scene-dot" />
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" fill={`url(#${gridId})`} />
-      <g transform={groupTransform}>{children}</g>
-    </svg>
-  );
-});

package/src/scene/ShapePalette.tsx

@@ -1,196 +0,0 @@
-/**
- * ShapePalette — a categorized, searchable gallery of drawing shapes.
- *
- * Mirrors `EmojiPicker`'s structure (search + category sections + grid of
- * thumbnails). Picking a shape calls `onPick(kind)`; the host then sets the
- * draw tool's pending kind and activates it. Thumbnails render via the same
- * `shapePath` geometry the canvas uses, so the gallery previews exactly what
- * gets drawn.
- */
-
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import { shapePath } from '@bendyline/squisq/doc';
-
-interface ShapePaletteProps {
-  onPick: (kind: string) => void;
-  onClose: () => void;
-  /**
-   * CSS selector for an ancestor that should NOT count as an "outside"
-   * click — typically the toolbar button that owns opening/closing the
-   * palette. Defaults to the scene block toolbar.
-   */
-  ignoreOutsideSelector?: string;
-}
-
-interface ShapeItem {
-  kind: string;
-  label: string;
-}
-
-const CATALOG: { category: string; items: ShapeItem[] }[] = [
-  {
-    category: 'Lines',
-    items: [
-      { kind: 'line', label: 'Line' },
-      { kind: 'arrow', label: 'Line Arrow' },
-      { kind: 'text', label: 'Text' },
-    ],
-  },
-  {
-    category: 'Basic Shapes',
-    items: [
-      { kind: 'rectangle', label: 'Rectangle' },
-      { kind: 'circle', label: 'Ellipse' },
-      { kind: 'triangle', label: 'Triangle' },
-      { kind: 'right-triangle', label: 'Right Triangle' },
-      { kind: 'diamond', label: 'Diamond' },
-      { kind: 'pentagon', label: 'Pentagon' },
-      { kind: 'hexagon', label: 'Hexagon' },
-      { kind: 'octagon', label: 'Octagon' },
-      { kind: 'parallelogram', label: 'Parallelogram' },
-      { kind: 'trapezoid', label: 'Trapezoid' },
-      { kind: 'plus', label: 'Cross' },
-      { kind: 'chevron', label: 'Chevron' },
-      { kind: 'cylinder', label: 'Cylinder' },
-      { kind: 'callout', label: 'Speech Bubble' },
-      { kind: 'cloud', label: 'Cloud' },
-      { kind: 'heart', label: 'Heart' },
-      { kind: 'lightning', label: 'Lightning' },
-    ],
-  },
-  {
-    category: 'Stars',
-    items: [
-      { kind: 'star', label: '5-Point Star' },
-      { kind: 'star4', label: '4-Point Star' },
-      { kind: 'star6', label: '6-Point Star' },
-    ],
-  },
-  {
-    category: 'Block Arrows',
-    items: [
-      { kind: 'arrow-right', label: 'Arrow Right' },
-      { kind: 'arrow-left', label: 'Arrow Left' },
-      { kind: 'arrow-up', label: 'Arrow Up' },
-      { kind: 'arrow-down', label: 'Arrow Down' },
-      { kind: 'double-arrow', label: 'Double Arrow' },
-    ],
-  },
-];
-
-export function ShapePalette({
-  onPick,
-  onClose,
-  ignoreOutsideSelector = '.squisq-scene-block-toolbar',
-}: ShapePaletteProps) {
-  const [query, setQuery] = useState('');
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const onDocPointer = (e: PointerEvent) => {
-      // Don't treat a click on the toolbar (where the Shape trigger lives)
-      // as "outside" — that button owns opening/closing the palette.
-      const target = e.target as Element | null;
-      if (ignoreOutsideSelector && target?.closest?.(ignoreOutsideSelector)) return;
-      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('pointerdown', onDocPointer);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('pointerdown', onDocPointer);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [onClose, ignoreOutsideSelector]);
-
-  const sections = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return CATALOG;
-    return CATALOG.map((s) => ({
-      category: s.category,
-      items: s.items.filter((i) => i.label.toLowerCase().includes(q) || i.kind.includes(q)),
-    })).filter((s) => s.items.length > 0);
-  }, [query]);
-
-  return (
-    <div className="squisq-shape-palette" ref={ref} role="dialog" aria-label="Shapes">
-      <input
-        className="squisq-shape-palette-search"
-        type="text"
-        placeholder="Search shapes…"
-        value={query}
-        autoFocus
-        onChange={(e) => setQuery(e.target.value)}
-      />
-      <div className="squisq-shape-palette-scroll">
-        {sections.map((section) => (
-          <div key={section.category} className="squisq-shape-palette-section">
-            <div className="squisq-shape-palette-heading">{section.category}</div>
-            <div className="squisq-shape-palette-grid">
-              {section.items.map((item) => (
-                <button
-                  key={item.kind}
-                  type="button"
-                  className="squisq-shape-palette-item"
-                  title={item.label}
-                  aria-label={item.label}
-                  onClick={() => onPick(item.kind)}
-                >
-                  <ShapeThumb kind={item.kind} />
-                </button>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/** A 40×30 SVG thumbnail of a shape, inside a 48×38 button viewport. */
-function ShapeThumb({ kind }: { kind: string }) {
-  const d = shapePath(kind, 4, 4, 40, 30);
-  const arrowId = `squisq-shape-thumb-arrow-${useId().replace(/:/g, '')}`;
-  return (
-    <svg viewBox="0 0 48 38" width={36} height={28} aria-hidden="true">
-      {kind === 'arrow' ? (
-        <defs>
-          <marker
-            id={arrowId}
-            viewBox="0 0 10 10"
-            refX={9}
-            refY={5}
-            markerWidth={4}
-            markerHeight={4}
-          >
-            <path d="M 0 0 L 10 5 L 0 10 z" className="squisq-shape-thumb-line" />
-          </marker>
-        </defs>
-      ) : null}
-      {d ? (
-        <path d={d} className="squisq-shape-thumb" />
-      ) : kind === 'circle' ? (
-        <ellipse cx={24} cy={19} rx={20} ry={15} className="squisq-shape-thumb" />
-      ) : kind === 'line' ? (
-        <line x1={4} y1={34} x2={44} y2={4} className="squisq-shape-thumb-line" />
-      ) : kind === 'arrow' ? (
-        <line
-          x1={4}
-          y1={34}
-          x2={44}
-          y2={4}
-          className="squisq-shape-thumb-line"
-          markerEnd={`url(#${arrowId})`}
-        />
-      ) : kind === 'text' ? (
-        <text x={24} y={26} textAnchor="middle" className="squisq-shape-thumb-text">
-          T
-        </text>
-      ) : (
-        <rect x={4} y={6} width={40} height={26} rx={3} className="squisq-shape-thumb" />
-      )}
-    </svg>
-  );
-}

package/src/scene/__tests__/DiagramAdapter.test.ts

@@ -1,142 +0,0 @@
-/**
- * DiagramAdapter — pure read-side transform. Verifies that given a
- * (nodes, edges) shape from the existing data hook, the adapter
- * produces card+label Layer pairs and matching SceneEdges.
- */
-
-import { describe, it, expect } from 'vitest';
-import { buildDiagramScene } from '../adapters/DiagramAdapter';
-import { NODE_WIDTH, NODE_HEIGHT } from '../layers/nodeCard';
-
-describe('buildDiagramScene', () => {
-  it('emits a card + label pair per node and preserves edges', () => {
-    const out = buildDiagramScene(
-      [
-        { id: 'a', position: { x: 100, y: 100 }, data: { label: 'Bar' } },
-        { id: 'b', position: { x: 400, y: 100 }, data: { label: 'Baz' } },
-      ],
-      [{ id: 'a->b', source: 'a', target: 'b', label: 'uses' }],
-    );
-
-    // Two cards + two labels, in that order.
-    expect(out.layers.map((l) => l.id)).toEqual([
-      'node-card-a',
-      'node-card-b',
-      'node-label-a',
-      'node-label-b',
-    ]);
-
-    const card = out.layers[0];
-    expect(card.type).toBe('shape');
-    expect(card.position.x).toBe(100);
-    expect(card.position.width).toBe(NODE_WIDTH);
-    expect(card.position.height).toBe(NODE_HEIGHT);
-
-    const label = out.layers[2];
-    expect(label.type).toBe('text');
-    // Label is centered over its card.
-    expect(label.position.x).toBe(100 + NODE_WIDTH / 2);
-    expect(label.position.y).toBe(100 + NODE_HEIGHT / 2);
-    if (label.type === 'text') expect(label.content.text).toBe('Bar');
-
-    expect(out.edges).toEqual([{ id: 'a->b', source: 'a', target: 'b', label: 'uses' }]);
-    expect(out.nodes).toEqual([
-      { id: 'a', label: 'Bar', x: 100, y: 100 },
-      { id: 'b', label: 'Baz', x: 400, y: 100 },
-    ]);
-  });
-
-  it('omits edge label when none provided', () => {
-    const out = buildDiagramScene(
-      [{ id: 'a', position: { x: 0, y: 0 }, data: { label: 'A' } }],
-      [{ id: 'a->b', source: 'a', target: 'b' }],
-    );
-    expect(out.edges[0]).toEqual({ id: 'a->b', source: 'a', target: 'b' });
-  });
-
-  it('passes container kind through and styles the label top-anchored', () => {
-    const out = buildDiagramScene(
-      [
-        {
-          id: 'group',
-          position: { x: 0, y: 0 },
-          data: { label: 'Cluster\nextra' },
-          width: 600,
-          height: 400,
-          kind: 'container',
-        },
-        { id: 'a', position: { x: 40, y: 60 }, data: { label: 'A' } },
-      ],
-      [],
-    );
-    expect(out.nodes[0].kind).toBe('container');
-    const label = out.layers.find((l) => l.id === 'node-label-group');
-    expect(label?.position.y).toBeLessThan(0 + 400 / 2); // top-anchored, not centered
-    if (label?.type === 'text') expect(label.content.text).toBe('Cluster'); // first line only
-  });
-
-  it('fits and vertically centers dense multi-line labels inside ASCII-sized cards', () => {
-    const out = buildDiagramScene(
-      [
-        {
-          id: 'kernel',
-          position: { x: 100, y: 200 },
-          data: {
-            label: '@bendyline/molen-kernel\nheadless sim — no DOM, no thread\nWorker + Node',
-          },
-          width: 252,
-          height: 112,
-        },
-      ],
-      [],
-    );
-    const label = out.layers.find((layer) => layer.id === 'node-label-kernel');
-    expect(label?.type).toBe('text');
-    if (label?.type !== 'text') return;
-
-    expect(label.content.style.fontSize).toBeLessThan(38);
-    expect(label.content.style.lineHeight).toBe(1.25);
-    expect(label.position.width).toBe(228);
-    expect(label.position.y).toBeLessThan(200 + 112 / 2);
-  });
-
-  it('maps directed:false to endMarker none, leaves default edges alone', () => {
-    const out = buildDiagramScene(
-      [
-        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'A' } },
-        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'B' } },
-      ],
-      [
-        { id: 'a->b', source: 'a', target: 'b', directed: false },
-        { id: 'b->a', source: 'b', target: 'a' },
-      ],
-    );
-    expect(out.edges[0]).toEqual({ id: 'a->b', source: 'a', target: 'b', endMarker: 'none' });
-    expect(out.edges[1]).toEqual({ id: 'b->a', source: 'b', target: 'a' });
-  });
-
-  it('preserves authored anchors and routing for ASCII-derived edges', () => {
-    const out = buildDiagramScene(
-      [
-        { id: 'source', position: { x: 0, y: 0 }, data: { label: 'Source' } },
-        { id: 'target', position: { x: 0, y: 200 }, data: { label: 'Target' } },
-      ],
-      [
-        {
-          id: 'source->target',
-          source: 'source',
-          target: 'target',
-          sourceAnchor: { side: 'bottom', offset: 0.25 },
-          targetAnchor: { side: 'top', offset: 0.5 },
-          routing: 'orthogonal',
-        },
-      ],
-    );
-
-    expect(out.edges[0]).toMatchObject({
-      sourceAnchor: { side: 'bottom', offset: 0.25 },
-      targetAnchor: { side: 'top', offset: 0.5 },
-      routing: 'orthogonal',
-    });
-  });
-});

package/src/scene/__tests__/SceneBlockExtension.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { Schema } from '@tiptap/pm/model';
-import type { Editor } from '@tiptap/react';
-import { findSceneHeadingPos, getHeadingKey } from '../SceneBlockExtension';
-
-const schema = new Schema({
-  nodes: {
-    doc: { content: 'heading+' },
-    text: {},
-    heading: {
-      content: 'text*',
-      attrs: {
-        level: { default: 1 },
-        dataTemplate: { default: 'layout' },
-        dataBlockAttrs: { default: null },
-      },
-    },
-  },
-});
-
-describe('SceneBlockExtension heading identity', () => {
-  it('targets the correct canvas when headings have duplicate text or ids', () => {
-    const first = schema.node('heading', { dataBlockAttrs: '#same' }, schema.text('Layout'));
-    const second = schema.node('heading', { dataBlockAttrs: '#same' }, schema.text('Layout'));
-    const secondPos = first.nodeSize;
-    const doc = schema.node('doc', null, [first, second]);
-    const editor = { state: { doc } } as unknown as Editor;
-    const firstKey = getHeadingKey(first, 0);
-    const secondKey = getHeadingKey(second, secondPos);
-    expect(firstKey).not.toBe(secondKey);
-    expect(findSceneHeadingPos(editor, secondKey, 'layout')).toBe(secondPos);
-  });
-});