@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/scene/tools/ConnectTool.ts

@@ -13,32 +13,105 @@
 
 import { createElement, type JSX } from 'react';
 import type { SceneTool, SceneToolContext } from './SceneTool';
-import { nodeIdFromCardLayerId, NODE_WIDTH, NODE_HEIGHT } from '../layers/nodeCard';
+import { nodeIdFromCardLayerId } from '../layers/nodeCard';
+import {
+  curvedPath,
+  edgeEndpoints,
+  snapPointToward,
+  type EdgeNodeBox,
+} from '../layers/edgeGeometry';
 
 interface ConnectState {
   sourceNodeId: string;
-  /** Source node center in viewport units (cached at drag start). */
-  sourceCenter: { x: number; y: number };
-  /** Current pointer position in viewport units. */
-  current: { x: number; y: number };
+  /** Source node/card box in viewport units (cached at drag start). */
+  sourceBox: EdgeNodeBox;
+  /** Preview start/end in viewport units. */
+  start: { x: number; y: number };
+  end: { x: number; y: number };
   /** Currently-hovered target node id, if any (for highlight + drop). */
   hoveredTargetId: string | null;
 }
 
-let state: ConnectState | null = null;
+function getState(ctx: SceneToolContext): ConnectState | null {
+  return (ctx.interaction.connect as ConnectState | undefined) ?? null;
+}
+
+function setState(ctx: SceneToolContext, state: ConnectState | null): void {
+  ctx.interaction.connect = state ?? undefined;
+}
 
 function pointerFromEvent(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 nodeCenterFromCard(
-  ctx: SceneToolContext,
-  nodeId: string,
-): { x: number; y: number } | null {
+function nodeBoxFromCard(ctx: SceneToolContext, nodeId: string): EdgeNodeBox | null {
   const card = ctx.hitItems.find((it) => it.id === `node-card-${nodeId}`);
   if (!card) return null;
-  return { x: card.bounds.x + NODE_WIDTH / 2, y: card.bounds.y + NODE_HEIGHT / 2 };
+  return {
+    id: nodeId,
+    x: card.bounds.x,
+    y: card.bounds.y,
+    width: card.bounds.width,
+    height: card.bounds.height,
+  };
+}
+
+function nodeBoxes(ctx: SceneToolContext): EdgeNodeBox[] {
+  const boxes: EdgeNodeBox[] = [];
+  for (const it of ctx.hitItems) {
+    if (!it.id.startsWith('node-card-')) continue;
+    const nodeId = nodeIdFromCardLayerId(it.id);
+    if (!nodeId) continue;
+    boxes.push({
+      id: nodeId,
+      x: it.bounds.x,
+      y: it.bounds.y,
+      width: it.bounds.width,
+      height: it.bounds.height,
+    });
+  }
+  return boxes;
+}
+
+function connectionPoints(box: EdgeNodeBox): Array<{ x: number; y: number }> {
+  const width = box.width ?? 0;
+  const height = box.height ?? 0;
+  const left = box.x;
+  const right = box.x + width;
+  const top = box.y;
+  const bottom = box.y + height;
+  const centerX = box.x + width / 2;
+  const centerY = box.y + height / 2;
+  return [
+    { x: centerX, y: top },
+    { x: right, y: centerY },
+    { x: centerX, y: bottom },
+    { x: left, y: centerY },
+    { x: left, y: top },
+    { x: right, y: top },
+    { x: right, y: bottom },
+    { x: left, y: bottom },
+  ];
+}
+
+function updatePreview(
+  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,
+  };
 }
 
 export const ConnectTool: SceneTool = {
@@ -46,6 +119,7 @@ export const ConnectTool: SceneTool = {
   label: 'Connect',
   cursor: 'crosshair',
   shortcut: 'c',
+  hideSelectionHandles: true,
 
   onPointerDown(e, ctx) {
     if (e.button !== 0) return;
@@ -55,49 +129,73 @@ export const ConnectTool: SceneTool = {
     if (!hitId) return;
     const nodeId = nodeIdFromCardLayerId(hitId);
     if (!nodeId) return;
-    const center = nodeCenterFromCard(ctx, nodeId);
-    if (!center) return;
-    state = {
+    const sourceBox = nodeBoxFromCard(ctx, nodeId);
+    if (!sourceBox) return;
+    const preview = updatePreview(sourceBox, v, null);
+    setState(ctx, {
       sourceNodeId: nodeId,
-      sourceCenter: center,
-      current: v,
+      sourceBox,
+      start: preview.start,
+      end: preview.end,
       hoveredTargetId: null,
-    };
+    });
     (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
     e.stopPropagation();
   },
 
   onPointerMove(e, ctx) {
+    const state = getState(ctx);
     if (!state) return;
     const { sx, sy } = pointerFromEvent(e);
     const v = ctx.screenToViewport(sx, sy);
-    state.current = v;
     const hitId = ctx.hit(v);
     const nodeId = hitId ? nodeIdFromCardLayerId(hitId) : null;
-    state.hoveredTargetId = nodeId && nodeId !== state.sourceNodeId ? nodeId : null;
+    const targetId = nodeId && nodeId !== state.sourceNodeId ? nodeId : null;
+    const targetBox = targetId ? nodeBoxFromCard(ctx, targetId) : null;
+    const preview = updatePreview(state.sourceBox, v, targetBox);
+    state.start = preview.start;
+    state.end = preview.end;
+    state.hoveredTargetId = targetBox?.id ?? null;
   },
 
   onPointerUp(e, ctx) {
+    const state = getState(ctx);
     if (!state) return;
     const target = state.hoveredTargetId;
     if (target) {
       ctx.dispatch({ kind: 'addEdge', source: state.sourceNodeId, target });
     }
     (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-    state = null;
+    setState(ctx, null);
   },
 
-  renderOverlay(): JSX.Element | null {
-    if (!state) return null;
-    const { sourceCenter: a, current: b } = state;
-    const dx = b.x - a.x;
-    const cp = Math.max(40, Math.abs(dx) / 2);
-    // Cubic bezier matching diagramBlock.ts's `curved` edge style so the
-    // preview previews exactly what will render after commit.
-    const d = `M ${a.x} ${a.y} C ${a.x + cp} ${a.y}, ${b.x - cp} ${b.y}, ${b.x} ${b.y}`;
+  renderOverlay(ctx): JSX.Element | null {
+    const state = getState(ctx);
+    const points = nodeBoxes(ctx).flatMap((box) =>
+      connectionPoints(box).map((point, index) =>
+        createElement('circle', {
+          key: `${box.id}-${index}`,
+          cx: point.x,
+          cy: point.y,
+          r: 4,
+          className:
+            state?.hoveredTargetId === box.id
+              ? 'squisq-scene-connection-point squisq-scene-connection-point--active'
+              : 'squisq-scene-connection-point',
+        }),
+      ),
+    );
+
+    if (!state) {
+      return points.length ? createElement('g', { key: 'connection-points' }, ...points) : null;
+    }
+
+    const { start: a, end: b } = state;
+    const d = curvedPath(a, b);
     return createElement(
       'g',
       { key: 'connect-preview' },
+      ...points,
       createElement('path', { d, className: 'squisq-scene-connect-preview' }),
       // Optional: a dot at the endpoint so the user sees the snap target.
       createElement('circle', {

package/src/scene/tools/DrawingConnectTool.ts

@@ -16,6 +16,12 @@
 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 {
@@ -37,8 +43,9 @@ type DragState =
   | {
       mode: 'new';
       sourceId: string;
-      anchor: { x: number; y: number };
-      current: { x: number; y: number };
+      sourceBox: EdgeNodeBox;
+      start: { x: number; y: number };
+      end: { x: number; y: number };
       hovered: string | null;
     }
   | {
@@ -46,8 +53,9 @@ type DragState =
       connectorId: string;
       end: 'from' | 'to';
       fixedShapeId: string;
-      anchor: { x: number; y: number };
-      current: { x: number; y: number };
+      fixedBox: EdgeNodeBox;
+      start: { x: number; y: number };
+      endPoint: { x: number; y: number };
       hovered: string | null;
     };
 
@@ -59,10 +67,16 @@ export function createDrawingConnectTool(options: DrawingConnectOptions = {}): S
     return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
   }
 
-  function shapeCenter(ctx: SceneToolContext, shapeId: string): { x: number; y: number } | null {
+  function shapeBox(ctx: SceneToolContext, shapeId: string): EdgeNodeBox | null {
     const it = ctx.hitItems.find((h) => h.id === `dshape-${shapeId}`);
     if (!it) return null;
-    return { x: it.bounds.x + it.bounds.width / 2, y: it.bounds.y + it.bounds.height / 2 };
+    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 {
@@ -71,6 +85,45 @@ export function createDrawingConnectTool(options: DrawingConnectOptions = {}): S
     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',
@@ -85,14 +138,17 @@ export function createDrawingConnectTool(options: DrawingConnectOptions = {}): S
       // Endpoint handle of the selected connector → re-target gesture.
       const ep = options.endpointAt?.(v);
       if (ep) {
-        const anchor = shapeCenter(ctx, ep.fixedShapeId) ?? v;
+        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,
-          anchor,
-          current: v,
+          fixedBox,
+          start: preview.start,
+          endPoint: preview.end,
           hovered: null,
         };
         (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
@@ -103,11 +159,15 @@ export function createDrawingConnectTool(options: DrawingConnectOptions = {}): S
       // 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,
-        anchor: shapeCenter(ctx, src) ?? v,
-        current: v,
+        sourceBox,
+        start: preview.start,
+        end: preview.end,
         hovered: null,
       };
       (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
@@ -118,10 +178,20 @@ export function createDrawingConnectTool(options: DrawingConnectOptions = {}): S
       if (!drag) return;
       const { sx, sy } = pointer(e);
       const v = ctx.screenToViewport(sx, sy);
-      drag.current = v;
       const tgt = shapeAt(ctx, v);
       const exclude = drag.mode === 'new' ? drag.sourceId : drag.fixedShapeId;
-      drag.hovered = tgt && tgt !== exclude ? tgt : null;
+      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) {
@@ -139,13 +209,13 @@ export function createDrawingConnectTool(options: DrawingConnectOptions = {}): S
 
     renderOverlay(): JSX.Element | null {
       if (!drag) return null;
-      const a = drag.anchor;
-      const b = drag.current;
+      const a = drag.start;
+      const b = drag.mode === 'new' ? drag.end : drag.endPoint;
       return createElement(
         'g',
         { key: 'drawing-connect-preview' },
         createElement('path', {
-          d: `M ${a.x} ${a.y} L ${b.x} ${b.y}`,
+          d: straightPath(a, b),
           className: 'squisq-scene-connect-preview',
           fill: 'none',
         }),

package/src/scene/tools/SceneTool.ts

@@ -14,7 +14,15 @@ 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. */
@@ -55,6 +63,8 @@ export interface SceneTool {
   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

package/src/scene/tools/SelectTool.ts

@@ -18,7 +18,7 @@
  */
 
 import { createElement, type JSX } from 'react';
-import type { SceneTool, SceneToolContext } from './SceneTool';
+import type { SceneInteractionState, SceneTool, SceneToolContext } from './SceneTool';
 import type { SceneCommand } from '../commands/SceneCommand';
 import type { ResizeCorner } from '../SceneSelection';
 
@@ -53,7 +53,13 @@ type DragState = MoveDragState | MarqueeDragState | ResizeDragState;
 const DRAG_THRESHOLD_PX = 3;
 const MIN_LAYER_SIZE = 8;
 
-let dragState: DragState | null = null;
+function getDragState(interaction: SceneInteractionState): DragState | null {
+  return (interaction.selectDrag as DragState | undefined) ?? null;
+}
+
+function setDragState(interaction: SceneInteractionState, state: DragState | null): void {
+  interaction.selectDrag = state ?? undefined;
+}
 
 function pointerCoords(e: React.PointerEvent): { sx: number; sy: number } {
   const rect = (e.currentTarget as Element).getBoundingClientRect();
@@ -90,20 +96,23 @@ function applyResize(
 }
 
 /** 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 = {
+export function beginHandleDrag(
+  args: {
+    layerId: string;
+    corner: ResizeCorner;
+    startV: { x: number; y: number };
+    startBounds: { x: number; y: number; width: number; height: number };
+  },
+  interaction: SceneInteractionState,
+): void {
+  setDragState(interaction, {
     kind: 'resize',
     layerId: args.layerId,
     corner: args.corner,
     startV: args.startV,
     startBounds: args.startBounds,
     currentBounds: args.startBounds,
-  };
+  });
 }
 
 export const SelectTool: SceneTool = {
@@ -135,29 +144,30 @@ export const SelectTool: SceneTool = {
         const origin = getLayerOrigin(ctx, id);
         if (origin) layerStarts.set(id, origin);
       }
-      dragState = {
+      setDragState(ctx.interaction, {
         kind: 'move',
         startV: v,
         startS: { x: sx, y: sy },
         layerStarts,
         currentV: v,
         movedPastThreshold: false,
-      };
+      });
     } else {
       if (!e.shiftKey) ctx.setSelection([]);
-      dragState = {
+      setDragState(ctx.interaction, {
         kind: 'marquee',
         startV: v,
         startS: { x: sx, y: sy },
         currentV: v,
         movedPastThreshold: false,
-      };
+      });
     }
 
     (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
   },
 
   onPointerMove(e, ctx) {
+    const dragState = getDragState(ctx.interaction);
     if (!dragState) return;
     const { sx, sy } = pointerCoords(e);
     const v = ctx.screenToViewport(sx, sy);
@@ -182,6 +192,7 @@ export const SelectTool: SceneTool = {
   },
 
   onPointerUp(e, ctx) {
+    const dragState = getDragState(ctx.interaction);
     if (!dragState) return;
     if (
       dragState.kind === 'move' &&
@@ -208,7 +219,7 @@ export const SelectTool: SceneTool = {
       ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, width, height });
     }
     (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-    dragState = null;
+    setDragState(ctx.interaction, null);
   },
 
   onDoubleClick(e, ctx) {
@@ -232,7 +243,8 @@ export const SelectTool: SceneTool = {
     }
   },
 
-  renderOverlay(): JSX.Element | null {
+  renderOverlay(ctx): JSX.Element | null {
+    const dragState = getDragState(ctx.interaction);
     if (!dragState || dragState.kind !== 'marquee' || !dragState.movedPastThreshold) return null;
     const box = boxFromCorners(dragState.startV, dragState.currentV);
     return createElement('rect', {
@@ -247,7 +259,10 @@ export const SelectTool: SceneTool = {
 };
 
 /** 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 {
+export function getActiveMoveOffset(
+  interaction: SceneInteractionState,
+): { dx: number; dy: number } | null {
+  const dragState = getDragState(interaction);
   if (!dragState || dragState.kind !== 'move' || !dragState.movedPastThreshold) return null;
   return {
     dx: dragState.currentV.x - dragState.startV.x,
@@ -256,10 +271,11 @@ export function getActiveMoveOffset(): { dx: number; dy: number } | null {
 }
 
 /** Return the live bounds for the layer currently being resized. */
-export function getActiveResize(): {
+export function getActiveResize(interaction: SceneInteractionState): {
   layerId: string;
   bounds: { x: number; y: number; width: number; height: number };
 } | null {
+  const dragState = getDragState(interaction);
   if (!dragState || dragState.kind !== 'resize') return null;
   return { layerId: dragState.layerId, bounds: dragState.currentBounds };
 }

package/src/scene/tools/ShapeTool.ts

@@ -2,9 +2,8 @@
  * ShapeTool — drag to draw a rectangle or circle as a new ShapeLayer.
  *
  * Exposed as a factory so a host can pre-bind the shape kind and
- * stroke/fill defaults. Returns a fresh SceneTool instance — the
- * factory pattern lets multiple Scene instances coexist without
- * sharing module-level drag state.
+ * stroke/fill defaults. Returns a fresh SceneTool instance so hosts can bind
+ * independent tool identities and defaults; gesture state belongs to Scene.
  */
 
 import { createElement, type JSX } from 'react';

package/src/styles/ascii-diagram.css

@@ -0,0 +1,79 @@
+/* ASCII diagram fences in the WYSIWYG editor.
+ *
+ * A qualifying code fence is hidden behind its interactive canvas
+ * (AsciiDiagramWidget); toggling "Source" on the widget swaps the hide
+ * class for a monospace, non-wrapping view of the raw art. */
+
+.squisq-wysiwyg-editor pre.squisq-ascii-fence-hidden {
+  display: none;
+}
+
+.squisq-wysiwyg-editor pre.squisq-ascii-fence-source {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  /* prosemirror.css sets `.ProseMirror pre { white-space: pre-wrap }`,
+     which soft-wraps and visually scrambles column-aligned art. */
+  white-space: pre;
+  overflow-x: auto;
+  line-height: 1.2;
+  tab-size: 4;
+}
+
+.squisq-ascii-diagram-widget-host {
+  margin: 0.75rem 0 1.25rem;
+}
+
+.squisq-ascii-diagram-warnings {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--squisq-theme-text-muted, #6b7280);
+}
+
+.squisq-ascii-diagram-warnings summary {
+  cursor: pointer;
+  user-select: none;
+}
+
+.squisq-ascii-diagram-warnings ul {
+  margin: 4px 0 0;
+  padding-left: 18px;
+}
+
+/* "Repair as diagram" affordance on broken box-art fences. The fence stays
+ * visible above this banner; clicking rewrites it to clean diagram art. */
+.squisq-repair-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: 4px 0 1rem;
+  padding: 8px 12px;
+  border: 1px dashed var(--squisq-border, #d1d5db);
+  border-radius: 8px;
+  background: var(--squisq-input-bg, #f9fafb);
+  font-size: 13px;
+}
+
+.squisq-repair-banner-text {
+  color: var(--squisq-text-muted, #6b7280);
+}
+
+.squisq-repair-banner-btn {
+  cursor: pointer;
+  border: 1px solid var(--squisq-accent, #6366f1);
+  border-radius: 6px;
+  background: var(--squisq-accent, #6366f1);
+  color: #fff;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.squisq-repair-banner-btn:hover {
+  filter: brightness(1.05);
+}
+
+.squisq-repair-banner-btn:active {
+  filter: brightness(0.95);
+}