@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/src/scene/SceneSideToolbar.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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/layers/DiagramEdges.tsx

@@ -16,7 +16,7 @@
 import type { MarkerStyle } from '@bendyline/squisq/schemas';
 import { connectorPath, markerPath } from '@bendyline/squisq/doc';
 import type { SceneEdge } from '../commands/SceneCommand';
-import { boxesOf, edgePoint } from './edgeGeometry';
+import { boxesOf, edgeEndpoints } from './edgeGeometry';
 import type { EdgeNodeBox } from './edgeGeometry';
 
 interface DiagramEdgesProps {
@@ -81,8 +81,9 @@ export function DiagramEdges({
         const a = boxById.get(edge.source);
         const b = boxById.get(edge.target);
         if (!a || !b) return null;
-        const start = edgePoint(a, b);
-        const end = edgePoint(b, a);
+        const snapped = edgeEndpoints(nodes, edge.source, edge.target);
+        if (!snapped) return null;
+        const { start, end } = snapped;
         const d = connectorPath(edge.routing ?? defaultRouting, start, end);
         const startMarker = edge.startMarker ?? 'none';
         const endMarker = edge.endMarker ?? 'arrow';

package/src/scene/layers/edgeGeometry.ts

@@ -8,6 +8,11 @@
  */
 
 import { NODE_WIDTH, NODE_HEIGHT } from './nodeCard';
+import {
+  nearestSnapPoint as nearestCoreSnapPoint,
+  snapEndpoints as coreSnapEndpoints,
+  type ConnectorSnapPoint,
+} from '@bendyline/squisq/doc';
 
 /** Minimal box an edge needs from a node/shape (id + bounds). */
 export interface EdgeNodeBox {
@@ -49,21 +54,35 @@ export function edgePoint(from: NodeBox, to: NodeBox): { x: number; y: number }
   return { x: from.cx + dx * s, y: from.cy + dy * s };
 }
 
+function boxFor(nodes: readonly EdgeNodeBox[], id: string): NodeBox | null {
+  return boxesOf(nodes).get(id) ?? null;
+}
+
+/** Nearest stable connector port on the named node/shape to `point`. */
+export function snapPointToward(
+  nodes: readonly EdgeNodeBox[],
+  id: string,
+  point: { x: number; y: number },
+): ConnectorSnapPoint | null {
+  const box = boxFor(nodes, id);
+  return box ? nearestCoreSnapPoint(box, point) : null;
+}
+
 /**
- * Clipped start/end points of the edge `source`→`target`, or null when an
- * endpoint shape is missing. Used by the renderer and by a tool hit-testing
+ * Snapped start/end points of the edge `source`→`target`, or null when an
+ * endpoint shape is missing. Used by the renderer and by tool hit-testing
  * endpoint handles against the same geometry the renderer draws.
  */
 export function edgeEndpoints(
   nodes: readonly EdgeNodeBox[],
   source: string,
   target: string,
-): { start: { x: number; y: number }; end: { x: number; y: number } } | null {
+): { start: ConnectorSnapPoint; end: ConnectorSnapPoint } | null {
   const boxes = boxesOf(nodes);
   const a = boxes.get(source);
   const b = boxes.get(target);
   if (!a || !b) return null;
-  return { start: edgePoint(a, b), end: edgePoint(b, a) };
+  return coreSnapEndpoints(a, b);
 }
 
 export function straightPath(a: { x: number; y: number }, b: { x: number; y: number }): string {

package/src/scene/scene.css

@@ -20,6 +20,28 @@
   overflow: hidden;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-shell {
+  --squisq-surface: #0f172a;
+  --squisq-surface-hover: #1e293b;
+  --squisq-border: #475569;
+  --squisq-text: #f8fafc;
+  --squisq-text-muted: #94a3b8;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-root,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-inline,
+.squisq-editor-shell[data-theme='dark'] .squisq-diagram-inline {
+  background: #0f172a;
+  border-color: #475569;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--shape,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--path,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--text,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-extras {
+  filter: invert(1) hue-rotate(180deg) saturate(0.9);
+}
+
 .squisq-scene-viewport {
   display: block;
   width: 100%;
@@ -111,6 +133,18 @@
   pointer-events: none;
 }
 
+.squisq-scene-connection-point {
+  fill: #ffffff;
+  stroke: #6366f1;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+.squisq-scene-connection-point--active {
+  fill: #6366f1;
+}
+
 /* ── Toolbar ──────────────────────────────────────────────── */
 
 .squisq-scene-toolbar {
@@ -261,6 +295,46 @@
   color: #b91c1c;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-toolbar,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-tools,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-actions,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-props {
+  background: #111827;
+  border-color: #475569;
+  color: #e5e7eb;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action {
+  background: #111827;
+  color: #e5e7eb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool:hover,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action:hover:not(:disabled) {
+  background: #1f2937;
+  border-color: #64748b;
+  color: #f8fafc;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool--active,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool--active:hover {
+  background: #312e81;
+  border-color: #818cf8;
+  color: #f8fafc;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--danger {
+  color: #fca5a5;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--danger:hover:not(:disabled) {
+  background: #450a0a;
+  border-color: #f87171;
+  color: #fecaca;
+}
+
 /* Maximized overlay: a flex-filling canvas with the toolbar as a right-hand
    column (full screen has room to reserve it). */
 .squisq-scene-block-max {
@@ -303,8 +377,8 @@
   overflow-y: auto;
 }
 
-/* Re-flow the (normally horizontal, right-aligned) toolbar into a top-aligned
-   vertical column whose button groups wrap within the 180px width. */
+/* Re-flow the (normally horizontal, right-aligned) gutter toolbar into a
+   top-aligned vertical column whose button groups wrap within the 180px. */
 .squisq-scene-side-toolbar .squisq-scene-block-toolbar {
   flex-direction: column;
   align-items: stretch;
@@ -326,6 +400,23 @@
   right: calc(100% + 6px);
 }
 
+/* ── Narrow-width fallback bar ─────────────────────────────────
+   When SceneSideToolbar measures that the right gutter can't hold the 180px
+   column, it renders the same toolbar as an in-flow horizontal bar above the
+   canvas instead. Normal flow (not an overlay) so it always paints and is
+   never clipped; it just keeps the toolbar's natural horizontal layout and
+   wraps on very narrow widths. */
+.squisq-scene-inline-toolbar {
+  display: flex;
+  margin-bottom: 8px;
+}
+.squisq-scene-inline-toolbar .squisq-scene-block-toolbar {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 0;
+}
+
 /* ── Maximize button ──────────────────────────────────────── */
 
 .squisq-scene-maximize-btn {
@@ -354,6 +445,19 @@
   color: #0f172a;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-maximize-btn {
+  background: #111827;
+  border-color: #475569;
+  color: #e5e7eb;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-maximize-btn:hover {
+  background: #1f2937;
+  border-color: #64748b;
+  color: #f8fafc;
+}
+
 /* ── Diagram node card (used by nodeCard.tsx) ─────────────── */
 
 .squisq-scene-node-card {
@@ -502,6 +606,35 @@
   font-weight: 700;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette {
+  background: #111827;
+  color: #e5e7eb;
+  border-color: #475569;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette-search,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-select {
+  background: #0f172a;
+  color: #e5e7eb;
+  border-color: #475569;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette-item:hover,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-clear:hover {
+  background: #1f2937;
+  border-color: #64748b;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb,
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb-line {
+  stroke: #e5e7eb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb-text {
+  fill: #e5e7eb;
+}
+
 /* Per-selection style controls, inline in the contextual toolbar (Fill /
    Stroke / Color swatches + connector dropdowns) — styled as a pill that
    matches the tools/actions groups. */
@@ -566,6 +699,13 @@
   background: #f1f5f9;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-color,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-clear {
+  background: #0f172a;
+  color: #e5e7eb;
+  border-color: #475569;
+}
+
 /* ── Inline widget host (mirrors squisq-diagram-inline) ──── */
 
 .squisq-scene-widget-host {

package/src/scene/tools/ConnectTool.ts

@@ -13,14 +13,21 @@
 
 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;
 }
@@ -32,13 +39,73 @@ function pointerFromEvent(e: React.PointerEvent): { sx: number; sy: number } {
   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 +113,7 @@ export const ConnectTool: SceneTool = {
   label: 'Connect',
   cursor: 'crosshair',
   shortcut: 'c',
+  hideSelectionHandles: true,
 
   onPointerDown(e, ctx) {
     if (e.button !== 0) return;
@@ -55,12 +123,14 @@ export const ConnectTool: SceneTool = {
     if (!hitId) return;
     const nodeId = nodeIdFromCardLayerId(hitId);
     if (!nodeId) return;
-    const center = nodeCenterFromCard(ctx, nodeId);
-    if (!center) return;
+    const sourceBox = nodeBoxFromCard(ctx, nodeId);
+    if (!sourceBox) return;
+    const preview = updatePreview(sourceBox, v, null);
     state = {
       sourceNodeId: nodeId,
-      sourceCenter: center,
-      current: v,
+      sourceBox,
+      start: preview.start,
+      end: preview.end,
       hoveredTargetId: null,
     };
     (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
@@ -71,10 +141,14 @@ export const ConnectTool: SceneTool = {
     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) {
@@ -87,17 +161,32 @@ export const ConnectTool: SceneTool = {
     state = 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 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', {