@bendyline/squisq-editor-react 1.6.0 → 1.6.2

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

package/src/styles/code-context.css

@@ -0,0 +1,155 @@
+/**
+ * Code-context sections — host-supplied markdown blurbs rendered inside
+ * Monaco view zones above anchor lines (see src/codeContext/).
+ *
+ * The zone dom node lives in Monaco's `.view-zones` layer, which sits below
+ * `.view-lines` in hit-test order. Raising the zone's z-index inside that
+ * shared stacking context is what makes section content clickable; Monaco's
+ * own `suppressMouseDown` keeps the cursor from jumping.
+ */
+
+.squisq-ccx-zone {
+  z-index: 10;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.squisq-ccx-section {
+  --ccx-fg: #57606a;
+  --ccx-fg-strong: #24292f;
+  --ccx-bg: rgba(175, 184, 193, 0.12);
+  --ccx-bg-hover: rgba(175, 184, 193, 0.22);
+  --ccx-border: rgba(140, 149, 159, 0.35);
+  --ccx-accent: #0969da;
+  font-family: var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ccx-fg);
+  border-left: 2px solid var(--ccx-border);
+  background: var(--ccx-bg);
+  margin: 2px 8px 2px 4px;
+  border-radius: 4px;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-ccx-section {
+  --ccx-fg: #9198a1;
+  --ccx-fg-strong: #e6edf3;
+  --ccx-bg: rgba(110, 118, 129, 0.14);
+  --ccx-bg-hover: rgba(110, 118, 129, 0.26);
+  --ccx-border: rgba(110, 118, 129, 0.45);
+  --ccx-accent: #4493f8;
+}
+
+/* ── Collapsed strip ─────────────────────────────────────────────── */
+
+.squisq-ccx-strip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 3px 10px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.squisq-ccx-strip:hover {
+  background: var(--ccx-bg-hover);
+}
+
+.squisq-ccx-chevron {
+  flex: 0 0 auto;
+  font-size: 9px;
+  opacity: 0.7;
+}
+
+.squisq-ccx-strip-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Flatten the strip's markdown to a single inline line. */
+.squisq-ccx-strip-text .squisq-md,
+.squisq-ccx-strip-text .squisq-md-p {
+  display: inline;
+  margin: 0;
+}
+
+.squisq-ccx-strip-text .squisq-md-strong {
+  color: var(--ccx-fg-strong);
+}
+
+/* ── Expanded body ───────────────────────────────────────────────── */
+
+.squisq-ccx-body {
+  padding: 2px 12px 8px 24px;
+  font-size: 12px;
+  user-select: text;
+}
+
+.squisq-ccx-body--loading {
+  opacity: 0.6;
+  font-style: italic;
+}
+
+.squisq-ccx-body .squisq-md-p {
+  margin: 4px 0;
+}
+
+.squisq-ccx-body .squisq-md-strong {
+  color: var(--ccx-fg-strong);
+  font-size: 11px;
+  text-transform: none;
+}
+
+.squisq-ccx-body .squisq-md-list {
+  margin: 2px 0 6px;
+  padding-left: 18px;
+}
+
+.squisq-ccx-body .squisq-md-li {
+  margin: 1px 0;
+}
+
+.squisq-ccx-body .squisq-md-link {
+  color: var(--ccx-accent);
+  text-decoration: none;
+}
+
+.squisq-ccx-body .squisq-md-link:hover {
+  text-decoration: underline;
+}
+
+.squisq-ccx-body .squisq-md-inline-code,
+.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  padding: 0 3px;
+  border-radius: 3px;
+  background: rgba(140, 149, 159, 0.18);
+}
+
+.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
+  color: var(--ccx-accent);
+}
+
+.squisq-ccx-body .squisq-md-code-block {
+  margin: 4px 0;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgba(140, 149, 159, 0.14);
+  overflow-x: auto;
+}
+
+.squisq-ccx-body .squisq-md-code-block code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  white-space: pre;
+}