@bendyline/squisq-editor-react 2.0.1 → 2.2.0

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

@@ -1,57 +0,0 @@
-/**
- * blockLayers — base64-JSON encode/decode round-trip for Layer arrays.
- */
-
-import { describe, it, expect } from 'vitest';
-import { encodeLayers, decodeLayers } from '../adapters/blockLayers';
-import type { Layer, ShapeLayer, TextLayer } from '@bendyline/squisq/schemas';
-
-describe('encodeLayers / decodeLayers', () => {
-  it('round-trips a single ShapeLayer', () => {
-    const layer: ShapeLayer = {
-      id: 'rect-1',
-      type: 'shape',
-      position: { x: 100, y: 200, width: 50, height: 30 },
-      content: { shape: 'rect', fill: '#abc', stroke: '#000', strokeWidth: 2 },
-    };
-    expect(decodeLayers(encodeLayers([layer]))).toEqual([layer]);
-  });
-
-  it('round-trips a mixed-type array preserving order', () => {
-    const layers: Layer[] = [
-      {
-        id: 'a',
-        type: 'shape',
-        position: { x: 0, y: 0, width: 10, height: 10 },
-        content: { shape: 'circle', fill: 'red' },
-      },
-      {
-        id: 'b',
-        type: 'text',
-        position: { x: 20, y: 20, width: 80, height: 24 },
-        content: { text: 'Hi there', style: { fontSize: 18, color: '#111' } },
-      } as TextLayer,
-    ];
-    expect(decodeLayers(encodeLayers(layers))).toEqual(layers);
-  });
-
-  it('returns [] for invalid base64 / JSON', () => {
-    expect(decodeLayers('not-valid-base64!!')).toEqual([]);
-    expect(decodeLayers(Buffer.from('not json', 'utf-8').toString('base64'))).toEqual([]);
-  });
-
-  it('returns [] when the decoded value is not an array', () => {
-    const encoded = Buffer.from(JSON.stringify({ not: 'an array' }), 'utf-8').toString('base64');
-    expect(decodeLayers(encoded)).toEqual([]);
-  });
-
-  it('encodes deterministically (same input → same output)', () => {
-    const layer: ShapeLayer = {
-      id: 'x',
-      type: 'shape',
-      position: { x: 0, y: 0, width: 5, height: 5 },
-      content: { shape: 'rect' },
-    };
-    expect(encodeLayers([layer])).toBe(encodeLayers([layer]));
-  });
-});

package/src/scene/__tests__/sceneIsolation.test.tsx

@@ -1,119 +0,0 @@
-/** @vitest-environment jsdom */
-import { render } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import type { SceneToolContext } from '../tools/SceneTool';
-import { SelectTool, beginHandleDrag, getActiveMoveOffset } from '../tools/SelectTool';
-import { ConnectTool } from '../tools/ConnectTool';
-import { createSceneTextChannel } from '../text/sceneTextChannel';
-import { SceneViewport } from '../SceneViewport';
-import { DiagramEdges } from '../layers/DiagramEdges';
-
-function context(id = 'layer'): SceneToolContext {
-  const layer = {
-    id,
-    type: 'shape' as const,
-    position: { x: 0, y: 0, width: 20, height: 20 },
-    content: { shape: 'rect' as const },
-  };
-  return {
-    interaction: {},
-    viewport: { width: 100, height: 100 },
-    transform: { tx: 0, ty: 0, scale: 1 },
-    layers: [layer],
-    edges: [],
-    selection: new Set(),
-    hitItems: [{ id, layer, bounds: { x: 0, y: 0, width: 20, height: 20 } }],
-    screenToViewport: (x, y) => ({ x, y }),
-    viewportToScreen: (x, y) => ({ x, y }),
-    hit: () => id,
-    setSelection: vi.fn(),
-    dispatch: vi.fn(),
-  };
-}
-
-function pointer(clientX: number, clientY: number) {
-  return {
-    button: 0,
-    clientX,
-    clientY,
-    pointerId: 1,
-    shiftKey: false,
-    currentTarget: {
-      getBoundingClientRect: () => ({ left: 0, top: 0 }),
-      setPointerCapture: vi.fn(),
-      releasePointerCapture: vi.fn(),
-    },
-    stopPropagation: vi.fn(),
-  } as unknown as React.PointerEvent;
-}
-
-describe('Scene instance isolation', () => {
-  it('keeps select and connect gestures in the owning Scene context', () => {
-    const first = context('node-card-a');
-    const second = context('node-card-a');
-    SelectTool.onPointerDown!(pointer(0, 0), first);
-    SelectTool.onPointerMove!(pointer(10, 0), first);
-    expect(getActiveMoveOffset(first.interaction)).toEqual({ dx: 10, dy: 0 });
-    expect(getActiveMoveOffset(second.interaction)).toBeNull();
-
-    ConnectTool.onPointerDown!(pointer(5, 5), first);
-    expect(first.interaction.connect).toBeTruthy();
-    expect(second.interaction.connect).toBeUndefined();
-  });
-
-  it('commits a resize as one command containing origin and size', () => {
-    const ctx = context('node-card-a');
-    beginHandleDrag(
-      {
-        layerId: 'node-card-a',
-        corner: 'nw',
-        startV: { x: 10, y: 20 },
-        startBounds: { x: 10, y: 20, width: 100, height: 50 },
-      },
-      ctx.interaction,
-    );
-
-    SelectTool.onPointerMove!(pointer(0, 0), ctx);
-    SelectTool.onPointerUp!(pointer(0, 0), ctx);
-
-    expect(ctx.dispatch).toHaveBeenCalledTimes(1);
-    expect(ctx.dispatch).toHaveBeenCalledWith({
-      kind: 'resizeLayer',
-      id: 'node-card-a',
-      x: 0,
-      y: 0,
-      width: 110,
-      height: 70,
-    });
-  });
-
-  it('creates independent text-toolbar channels', () => {
-    const first = createSceneTextChannel();
-    const second = createSceneTextChannel();
-    const listener = vi.fn();
-    second.subscribe(listener);
-    first.set({ editor: {} as never, level: 'inline' });
-    expect(listener).not.toHaveBeenCalled();
-    expect(second.get()).toBeNull();
-  });
-
-  it('namespaces grid and edge marker definitions per canvas', () => {
-    const edge = { id: 'e', source: 'a', target: 'b', endMarker: 'arrow' as const };
-    const nodes = [
-      { id: 'a', x: 0, y: 0, width: 10, height: 10, cx: 5, cy: 5 },
-      { id: 'b', x: 30, y: 0, width: 10, height: 10, cx: 35, cy: 5 },
-    ];
-    const { container } = render(
-      <>
-        <SceneViewport width={100} height={100} transform={{ tx: 0, ty: 0, scale: 1 }}>
-          <DiagramEdges nodes={nodes} edges={[edge]} />
-        </SceneViewport>
-        <SceneViewport width={100} height={100} transform={{ tx: 0, ty: 0, scale: 1 }}>
-          <DiagramEdges nodes={nodes} edges={[edge]} />
-        </SceneViewport>
-      </>,
-    );
-    const ids = Array.from(container.querySelectorAll('[id]')).map((node) => node.id);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-});

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

@@ -1,106 +0,0 @@
-/**
- * shapeLayers — pure read transform. Given the shapes `computeDrawingLayout`
- * derives from a drawing's children, verifies the Scene Layer(s), boxes, and
- * id helpers the DrawingAdapter relies on.
- */
-
-import { describe, it, expect } from 'vitest';
-import { computeDrawingLayout } from '@bendyline/squisq/doc';
-import type { Block } from '@bendyline/squisq/schemas';
-import {
-  shapesToSceneLayers,
-  shapeBoxes,
-  drawingLayerFollows,
-  shapeIdFromLayerId,
-  isPrimaryShapeLayer,
-  primaryLayerId,
-} from '../layers/shapeLayers';
-
-function shapeBlock(
-  id: string,
-  template: string,
-  overrides: Record<string, string>,
-  title?: string,
-): Block {
-  return {
-    id,
-    startTime: 0,
-    duration: 0,
-    audioSegment: 0,
-    template,
-    templateOverrides: overrides,
-    ...(title ? { title } : {}),
-  } as Block;
-}
-
-describe('shapeLayers read transform', () => {
-  it('emits a shape + follower label per rect, with dshape-/dlabel- ids', () => {
-    const layout = computeDrawingLayout([
-      shapeBlock('ceo', 'rectangle', { x: '20', y: '20', width: '120', height: '80' }, 'CEO'),
-    ]);
-    const layers = shapesToSceneLayers(layout.shapes);
-    expect(layers.map((l) => l.id)).toEqual(['dshape-ceo', 'dlabel-ceo']);
-    const [shape, label] = layers;
-    expect(shape.type).toBe('shape');
-    expect(shape.position).toMatchObject({ x: 20, y: 20, width: 120, height: 80 });
-    expect(label.type).toBe('text');
-    if (label.type === 'text') expect(label.content.text).toBe('CEO');
-  });
-
-  it('maps each shape kind to the right Layer type', () => {
-    const layout = computeDrawingLayout([
-      shapeBlock('r', 'rectangle', { x: '0', y: '0', width: '10', height: '10' }),
-      shapeBlock('c', 'circle', { x: '0', y: '0', width: '10', height: '10' }),
-      shapeBlock('l', 'line', { x: '0', y: '0', width: '10', height: '10' }),
-      shapeBlock('p', 'path', { x: '0', y: '0', d: 'M 0 0 L 5 5' }),
-      shapeBlock('t', 'text', { x: '0', y: '0', text: 'hi' }),
-    ]);
-    const byId = new Map(shapesToSceneLayers(layout.shapes).map((l) => [l.id, l]));
-    expect(byId.get('dshape-r')?.type).toBe('shape');
-    expect(byId.get('dshape-c')?.type).toBe('shape');
-    expect(byId.get('dshape-l')?.type).toBe('shape'); // plain line → bbox shape
-    expect(byId.get('dshape-p')?.type).toBe('path');
-    expect(byId.get('dshape-t')?.type).toBe('text');
-  });
-
-  it('does not emit a label layer for a text shape', () => {
-    const layout = computeDrawingLayout([
-      shapeBlock('t', 'text', { x: '0', y: '0', text: 'Note' }),
-    ]);
-    expect(shapesToSceneLayers(layout.shapes).map((l) => l.id)).toEqual(['dshape-t']);
-  });
-
-  it('exposes {id,x,y,width,height} boxes for the connector renderer', () => {
-    const layout = computeDrawingLayout([
-      shapeBlock('a', 'rect', { x: '5', y: '6', width: '7', height: '8' }),
-    ]);
-    expect(shapeBoxes(layout.shapes)).toEqual([{ id: 'a', x: 5, y: 6, width: 7, height: 8 }]);
-  });
-
-  it('links a label to its shape and recovers shape ids from layer ids', () => {
-    expect(drawingLayerFollows('dlabel-ceo')).toBe('dshape-ceo');
-    expect(drawingLayerFollows('dshape-ceo')).toBeNull();
-    expect(shapeIdFromLayerId('dshape-ceo')).toBe('ceo');
-    expect(shapeIdFromLayerId('dlabel-ceo')).toBe('ceo');
-    expect(shapeIdFromLayerId('whatever')).toBeNull();
-    expect(isPrimaryShapeLayer('dshape-ceo')).toBe(true);
-    expect(isPrimaryShapeLayer('dlabel-ceo')).toBe(false);
-    expect(primaryLayerId('ceo')).toBe('dshape-ceo');
-  });
-
-  it('connectors (line/arrow with from/to) are edges, not shapes', () => {
-    const layout = computeDrawingLayout([
-      shapeBlock('a', 'rect', { x: '0', y: '0', width: '50', height: '50' }),
-      shapeBlock('b', 'rect', { x: '0', y: '200', width: '50', height: '50' }),
-      shapeBlock('e', 'arrow', { from: 'a', to: 'b' }, 'reports to'),
-    ]);
-    expect(shapesToSceneLayers(layout.shapes).map((l) => l.id)).toEqual(['dshape-a', 'dshape-b']);
-    expect(layout.connectors).toHaveLength(1);
-    expect(layout.connectors[0]).toMatchObject({
-      id: 'e',
-      from: 'a',
-      to: 'b',
-      label: 'reports to',
-    });
-  });
-});

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

@@ -1,90 +0,0 @@
-/**
- * useSceneHitTest + layerBounds — coordinate resolution and topmost-wins
- * hit testing. Pure logic; no DOM needed.
- */
-
-import { describe, it, expect } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useSceneHitTest, layerBounds, type HitTestable } from '../hooks/useSceneHitTest';
-import type { ShapeLayer } from '@bendyline/squisq/schemas';
-
-const viewport = { width: 1000, height: 800 };
-
-function rectLayer(id: string, x: number, y: number, w: number, h: number): ShapeLayer {
-  return {
-    id,
-    type: 'shape',
-    position: { x, y, width: w, height: h },
-    content: { shape: 'rect' },
-  };
-}
-
-describe('layerBounds', () => {
-  it('resolves numeric pixel positions', () => {
-    const b = layerBounds(rectLayer('a', 10, 20, 100, 50), viewport);
-    expect(b).toEqual({ x: 10, y: 20, width: 100, height: 50 });
-  });
-
-  it('resolves percentage strings against the viewport', () => {
-    const l: ShapeLayer = {
-      id: 'p',
-      type: 'shape',
-      position: { x: '10%', y: '25%', width: '50%', height: '20%' },
-      content: { shape: 'rect' },
-    };
-    const b = layerBounds(l, viewport);
-    expect(b).toEqual({ x: 100, y: 200, width: 500, height: 160 });
-  });
-
-  it('applies center anchor by shifting the origin to the bounding-box top-left', () => {
-    const l: ShapeLayer = {
-      id: 'c',
-      type: 'shape',
-      position: { x: 500, y: 400, width: 200, height: 100, anchor: 'center' },
-      content: { shape: 'rect' },
-    };
-    const b = layerBounds(l, viewport);
-    expect(b).toEqual({ x: 400, y: 350, width: 200, height: 100 });
-  });
-
-  it('returns null when width or height cannot be resolved', () => {
-    const l: ShapeLayer = {
-      id: 'n',
-      type: 'shape',
-      position: { x: 0, y: 0 },
-      content: { shape: 'rect' },
-    };
-    expect(layerBounds(l, viewport)).toBeNull();
-  });
-});
-
-describe('useSceneHitTest', () => {
-  function items(...layers: ShapeLayer[]): HitTestable[] {
-    return layers.map((l) => ({
-      id: l.id,
-      layer: l,
-      bounds: layerBounds(l, viewport)!,
-    }));
-  }
-
-  it('returns the topmost layer at a point (last-wins)', () => {
-    const { result } = renderHook(() => useSceneHitTest());
-    const list = items(rectLayer('a', 0, 0, 100, 100), rectLayer('b', 50, 50, 100, 100));
-    // Point (60, 60) is inside both — `b` is later in the array, so wins.
-    expect(result.current.hit({ x: 60, y: 60 }, list)).toBe('b');
-  });
-
-  it('returns null when the point is outside every layer', () => {
-    const { result } = renderHook(() => useSceneHitTest());
-    const list = items(rectLayer('a', 0, 0, 50, 50));
-    expect(result.current.hit({ x: 500, y: 500 }, list)).toBeNull();
-  });
-
-  it('treats the bounding-box edge as inside (>= and <=)', () => {
-    const { result } = renderHook(() => useSceneHitTest());
-    const list = items(rectLayer('a', 10, 10, 100, 100));
-    expect(result.current.hit({ x: 10, y: 10 }, list)).toBe('a');
-    expect(result.current.hit({ x: 110, y: 110 }, list)).toBe('a');
-    expect(result.current.hit({ x: 9.9, y: 10 }, list)).toBeNull();
-  });
-});

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

@@ -1,103 +0,0 @@
-/**
- * useScenePanZoom — verify pan, zoom-at, fit, and screen↔viewport
- * coordinate conversions. The hook is pure state + math, so tests use
- * @testing-library/react's `renderHook` and don't need DOM events.
- */
-
-import { describe, it, expect } from 'vitest';
-import { act, renderHook } from '@testing-library/react';
-import { useScenePanZoom, IDENTITY_TRANSFORM } from '../hooks/useScenePanZoom';
-
-describe('useScenePanZoom', () => {
-  it('starts at identity by default', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    expect(result.current.transform).toEqual(IDENTITY_TRANSFORM);
-  });
-
-  it('panBy adds to translation', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    act(() => result.current.panBy(50, 30));
-    expect(result.current.transform.tx).toBe(50);
-    expect(result.current.transform.ty).toBe(30);
-    act(() => result.current.panBy(-20, 0));
-    expect(result.current.transform.tx).toBe(30);
-    expect(result.current.transform.ty).toBe(30);
-  });
-
-  it('zoomAt keeps the focus point stationary in viewport space', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    // Pre-zoom: identity. The screen point (200, 100) maps to viewport (200, 100).
-    const before = result.current.screenToViewport(200, 100);
-    expect(before).toEqual({ x: 200, y: 100 });
-
-    act(() => result.current.zoomAt(2, 200, 100));
-    expect(result.current.transform.scale).toBe(2);
-    // After zooming to scale=2 around screen-point (200, 100), the viewport
-    // point under that screen pixel must still be (200, 100).
-    const after = result.current.screenToViewport(200, 100);
-    expect(after.x).toBeCloseTo(200, 5);
-    expect(after.y).toBeCloseTo(100, 5);
-  });
-
-  it('clamps scale to the allowed range', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    act(() => result.current.zoomAt(100, 0, 0));
-    expect(result.current.transform.scale).toBeLessThanOrEqual(8);
-    act(() => result.current.zoomAt(0.0001, 0, 0));
-    expect(result.current.transform.scale).toBeGreaterThanOrEqual(0.1);
-  });
-
-  it('reset returns to identity', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    act(() => {
-      result.current.panBy(100, 100);
-      result.current.zoomAt(1.5, 50, 50);
-    });
-    expect(result.current.transform).not.toEqual(IDENTITY_TRANSFORM);
-    act(() => result.current.reset());
-    expect(result.current.transform).toEqual(IDENTITY_TRANSFORM);
-  });
-
-  it('fitBox centers and scales the box inside the container with padding', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    // 100x100 box, 200x200 container, 0 padding → scale=2, centered at (0,0).
-    act(() =>
-      result.current.fitBox(
-        { x: 0, y: 0, width: 100, height: 100 },
-        { width: 200, height: 200 },
-        0,
-      ),
-    );
-    expect(result.current.transform.scale).toBe(2);
-    // Box origin (0,0) viewport → (0,0) screen (since the box is sized 200,
-    // matching the container after scaling); centered → tx=ty=0.
-    expect(result.current.transform.tx).toBe(0);
-    expect(result.current.transform.ty).toBe(0);
-  });
-
-  it('fitBox honors padding by leaving room around the content', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    act(() =>
-      result.current.fitBox(
-        { x: 0, y: 0, width: 100, height: 100 },
-        { width: 200, height: 200 },
-        20,
-      ),
-    );
-    // Available area after padding: 160x160 → scale 1.6.
-    expect(result.current.transform.scale).toBeCloseTo(1.6, 5);
-  });
-
-  it('screenToViewport and viewportToScreen are inverses', () => {
-    const { result } = renderHook(() => useScenePanZoom());
-    act(() => {
-      result.current.panBy(30, -45);
-      result.current.zoomAt(1.7, 100, 100);
-    });
-    const screenPoint = { x: 250, y: 75 };
-    const v = result.current.screenToViewport(screenPoint.x, screenPoint.y);
-    const back = result.current.viewportToScreen(v.x, v.y);
-    expect(back.x).toBeCloseTo(screenPoint.x, 5);
-    expect(back.y).toBeCloseTo(screenPoint.y, 5);
-  });
-});

package/src/scene/adapters/DiagramAdapter.ts

@@ -1,79 +0,0 @@
-/**
- * DiagramAdapter — translate between Scene's generic command vocabulary
- * and the diagram-specific Tiptap commands in `diagramCommands.ts`.
- *
- * Read direction:  heading list + connectsTo → SceneLayer[] + SceneEdge[]
- * Write direction: SceneCommand → moveNode / addConnection / addNode / etc.
- *
- * The diagram surface uses `node-card-<id>` / `node-label-<id>` ids for
- * its synthetic card layers. The adapter maps those back to the
- * underlying heading id when dispatching writes.
- */
-
-import type { Layer } from '@bendyline/squisq/schemas';
-import type { SceneEdge } from '../commands/SceneCommand';
-import {
-  nodesToCardLayers,
-  NODE_WIDTH,
-  NODE_HEIGHT,
-  type DiagramNodeDescriptor,
-} from '../layers/nodeCard';
-import type { DiagramNode, DiagramEdge } from '../../diagram/types';
-
-export interface DiagramSceneData {
-  layers: Layer[];
-  edges: SceneEdge[];
-  /** Diagram node descriptors (id, label, x, y). Useful for the ConnectTool overlay. */
-  nodes: DiagramNodeDescriptor[];
-}
-
-/**
- * Convert the (nodes, edges) shape currently produced by `useDiagramData`
- * into Scene's layer/edge vocabulary. We accept the React-Flow-flavored
- * shape so the existing data hook can stay unchanged during the swap.
- */
-export function buildDiagramScene(
-  nodes: readonly DiagramNode[],
-  edges: readonly DiagramEdge[],
-): DiagramSceneData {
-  const descriptors: DiagramNodeDescriptor[] = nodes.map((n) => ({
-    id: n.id,
-    label: n.data.label,
-    x: n.position.x,
-    y: n.position.y,
-    ...(n.width != null ? { width: n.width } : {}),
-    ...(n.height != null ? { height: n.height } : {}),
-    ...(n.kind === 'container' ? { kind: 'container' as const } : {}),
-  }));
-  const layers = nodesToCardLayers(descriptors);
-  const sceneEdges: SceneEdge[] = edges.map((e) => ({
-    id: e.id,
-    source: e.source,
-    target: e.target,
-    ...(e.label ? { label: e.label } : {}),
-    ...(e.directed === false ? { endMarker: 'none' as const } : {}),
-    ...(e.sourceAnchor ? { sourceAnchor: e.sourceAnchor } : {}),
-    ...(e.targetAnchor ? { targetAnchor: e.targetAnchor } : {}),
-    ...(e.routing ? { routing: e.routing } : {}),
-  }));
-  return { layers, edges: sceneEdges, nodes: descriptors };
-}
-
-/**
- * Re-export of the diagram-specific `layerFollows` helper for hosts
- * that want to pass it straight to `<Scene layerFollows={...} />`.
- */
-export { diagramLayerFollows } from '../layers/nodeCard';
-
-/**
- * Compute a node's center point in viewport units. Used by the
- * ConnectTool to draw the in-flight connection preview and to find a
- * drop target.
- */
-export function nodeCenter(node: DiagramNodeDescriptor): { x: number; y: number } {
-  return { x: node.x + NODE_WIDTH / 2, y: node.y + NODE_HEIGHT / 2 };
-}
-
-// (The heading-based `makeDiagramDispatch` was removed with the ASCII-fence
-// cutover — canvas commands for diagrams now flow through
-// `asciiDiagram/asciiDiagramCommands.ts` instead of heading mutations.)