@bendyline/squisq-editor-react 1.6.1 → 1.6.2

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', {

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

@@ -55,6 +55,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