@canvas-harness/core 0.1.5 → 0.1.6

package/dist/index.d.cts

@@ -1454,9 +1454,33 @@ type InteractionState = {
     resizeLockAspect: boolean;
     /** Whether the user is holding Alt during a resize (resize from center). */
     resizeFromCenter: boolean;
+    /**
+     * Live in-progress geometry of the resized node — written every
+     * pointermove, committed to the store once on pointer-up. While
+     * present, `store.getNode(id)` still returns the original geometry;
+     * the renderer overlays this draft via `mapDragPositions` for the
+     * interactive layer paint. Mirrors how `dragDelta` works for drag.
+     */
+    resizeDraft: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        angle: number;
+    } | null;
     marqueeRect: WorldRect | null;
     /** Whether the marquee should add to (true, shift held) or replace selection. */
     marqueeAdditive: boolean;
+    /**
+     * Live in-progress cubic controls of an edge being mid-point-dragged.
+     * Written every pointermove, committed to the store once on
+     * pointer-up. Same draft+commit model as `resizeDraft` and
+     * `dragDelta` — keeps mid-gesture mutations off the 'change' bus.
+     */
+    midpointDraft: {
+        edgeId: EdgeId;
+        control: [Vec2, Vec2];
+    } | null;
     draftEdge: {
         source: EdgeEnd;
         target: EdgeEnd;

package/dist/index.d.ts

@@ -1454,9 +1454,33 @@ type InteractionState = {
     resizeLockAspect: boolean;
     /** Whether the user is holding Alt during a resize (resize from center). */
     resizeFromCenter: boolean;
+    /**
+     * Live in-progress geometry of the resized node — written every
+     * pointermove, committed to the store once on pointer-up. While
+     * present, `store.getNode(id)` still returns the original geometry;
+     * the renderer overlays this draft via `mapDragPositions` for the
+     * interactive layer paint. Mirrors how `dragDelta` works for drag.
+     */
+    resizeDraft: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        angle: number;
+    } | null;
     marqueeRect: WorldRect | null;
     /** Whether the marquee should add to (true, shift held) or replace selection. */
     marqueeAdditive: boolean;
+    /**
+     * Live in-progress cubic controls of an edge being mid-point-dragged.
+     * Written every pointermove, committed to the store once on
+     * pointer-up. Same draft+commit model as `resizeDraft` and
+     * `dragDelta` — keeps mid-gesture mutations off the 'change' bus.
+     */
+    midpointDraft: {
+        edgeId: EdgeId;
+        control: [Vec2, Vec2];
+    } | null;
     draftEdge: {
         source: EdgeEnd;
         target: EdgeEnd;

package/dist/index.js

@@ -1048,7 +1048,6 @@ var COMPOSITE = /* @__PURE__ */ new Set([
 var isCompositePrimitive = (type) => COMPOSITE.has(type);
 var isDrawablePrimitive = (type) => ATOMIC.has(type) || COMPOSITE.has(type);
 var PLAIN_RECT_CORNER_THRESHOLD_PX = 1.5;
-var STROKE_VISIBILITY_THRESHOLD_PX = 0.5;
 var LAYERED_OFFSET = 12;
 var drawShape = (ctx, node, scale, theme, opts) => {
   if (!isDrawablePrimitive(node.type)) return;
@@ -1067,7 +1066,7 @@ var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
   const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
   const stroke = resolveColor(style, "strokeColor", DEFAULT_STYLE.strokeColor, theme);
   const fillVisible = !isFullyTransparent(fill);
-  const strokeVisible = strokeWidth > 0 && strokeWidth * scale >= STROKE_VISIBILITY_THRESHOLD_PX && !isFullyTransparent(stroke);
+  const strokeVisible = strokeWidth > 0 && !isFullyTransparent(stroke);
   if (!fillVisible && !strokeVisible) return;
   const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
   switch (type) {
@@ -1104,7 +1103,7 @@ var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
   }
   if (strokeVisible && !opts?.skipStroke) {
     ctx.strokeStyle = stroke;
-    ctx.lineWidth = strokeWidth;
+    ctx.lineWidth = Math.max(strokeWidth, 1 / scale);
     ctx.setLineDash(dashPatternFor(style?.strokeStyle, strokeWidth));
     ctx.stroke();
   }
@@ -1480,13 +1479,16 @@ var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
   const isDark = theme?.("mode") === "dark";
   const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
   const strokeColor = deriveRoughStrokeColor(rawStroke, fill, isDark);
-  const strokeWidth = resolveStrokeWidth(style, theme);
-  if (strokeWidth <= 0) return;
+  const rawStrokeWidth = resolveStrokeWidth(style, theme);
+  if (rawStrokeWidth <= 0) return;
   const roughness = style?.roughness ?? 0;
   if (roughness <= 0) return;
+  const isNoBorderIntent = isFullyTransparent(rawStroke);
+  const effectiveStrokeStyle = isNoBorderIntent ? "solid" : style?.strokeStyle ?? "solid";
+  const strokeWidth = isNoBorderIntent ? DEFAULT_STYLE.strokeWidth : rawStrokeWidth;
   const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
   const radius = Math.max(0, Math.min(cornerRadius, w / 2, h / 2));
-  const dash = dashPatternFor(style?.strokeStyle, strokeWidth);
+  const dash = dashPatternFor(effectiveStrokeStyle, strokeWidth);
   const detail = apparentDetail(Math.max(w, h), scale);
   const cacheKey = [
     type,
@@ -1495,7 +1497,7 @@ var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
     radius.toFixed(1),
     strokeColor,
     strokeWidth.toFixed(2),
-    style?.strokeStyle ?? "solid",
+    effectiveStrokeStyle,
     roughness.toFixed(2),
     seed,
     detail.curveStepCount,
@@ -2646,7 +2648,7 @@ var DEFAULT_EDGE_STYLE = {
   sourceArrowhead: "none",
   targetArrowhead: "arrow-filled"
 };
-var STROKE_VISIBILITY_THRESHOLD_PX2 = 0.5;
+var STROKE_VISIBILITY_THRESHOLD_PX = 0.5;
 var ARROWHEAD_VISIBILITY_THRESHOLD_PX = 2;
 var samplePaintStride = (scale) => {
   if (scale < 0.15) return 8;
@@ -2660,7 +2662,7 @@ var drawEdge = (ctx, edge, geom, sourceNode, targetNode, scale, theme, opts) =>
   if (samples.length < 2) return;
   const style = edge.style;
   const strokeWidth = typeof style?.strokeWidth === "number" ? style.strokeWidth : theme?.("strokeWidth") ?? DEFAULT_EDGE_STYLE.strokeWidth;
-  if (strokeWidth * scale < STROKE_VISIBILITY_THRESHOLD_PX2) return;
+  if (strokeWidth * scale < STROKE_VISIBILITY_THRESHOLD_PX) return;
   const strokeColor = typeof style?.strokeColor === "string" ? style.strokeColor : theme?.("edge.strokeColor") ?? DEFAULT_EDGE_STYLE.strokeColor;
   const sourceArrowhead = style?.sourceArrowhead ?? DEFAULT_EDGE_STYLE.sourceArrowhead;
   const targetArrowhead = style?.targetArrowhead ?? DEFAULT_EDGE_STYLE.targetArrowhead;
@@ -3376,6 +3378,8 @@ var idleInteractionState = () => ({
   resizeHandle: null,
   resizeLockAspect: false,
   resizeFromCenter: false,
+  resizeDraft: null,
+  midpointDraft: null,
   marqueeRect: null,
   marqueeAdditive: false,
   draftEdge: null,
@@ -4952,7 +4956,9 @@ var createRenderer = (opts) => {
     const scale = camera.z * surface.dpr;
     const interaction = store.getInteractionState();
     const excludedNodes = interaction.mode === "dragging" || interaction.mode === "resizing" ? new Set(interaction.draggedIds) : null;
-    const excludedEdges = excludedNodes ? incidentEdgeIds(excludedNodes) : null;
+    const baseExcludedEdges = excludedNodes ? incidentEdgeIds(excludedNodes) : null;
+    const midpointEdgeId = interaction.midpointDraft?.edgeId ?? null;
+    const excludedEdges = midpointEdgeId !== null ? /* @__PURE__ */ new Set([...baseExcludedEdges ?? [], midpointEdgeId]) : baseExcludedEdges;
     paintBackground(surface.ctx, { viewport, zoom: camera.z, background });
     const visible = visibleNodes(camera, viewport);
     const isMoving2 = interaction.mode === "panning" || interaction.mode === "zooming" || interaction.mode === "dragging" || interaction.mode === "resizing" || interaction.mode === "rotating";
@@ -5364,6 +5370,23 @@ var createRenderer = (opts) => {
         }
       }
     }
+    if (interaction.midpointDraft) {
+      const { edgeId, control } = interaction.midpointDraft;
+      const edge = store.getEdge(edgeId);
+      if (edge) {
+        const draftEdge = { ...edge, control };
+        const geom = computeEdgeGeometry(draftEdge, (id) => store.getNode(id));
+        if (geom) {
+          const sourceNode = geom.sourceNodeId ? store.getNode(geom.sourceNodeId) ?? null : null;
+          const targetNode = geom.targetNodeId ? store.getNode(geom.targetNodeId) ?? null : null;
+          drawEdge(ctx, draftEdge, geom, sourceNode, targetNode, scale, theme, {
+            zoom: camera.z,
+            dpr: interactiveSurface.dpr,
+            isMoving: true
+          });
+        }
+      }
+    }
     const selection = store.getSelection();
     const selectedNodeIds = [];
     const selectedEdgeIds = [];
@@ -5436,7 +5459,12 @@ var createRenderer = (opts) => {
           y: orig.y + interaction.dragDelta.y
         });
       } else {
-        m.set(orig.id, live);
+        const d = interaction.resizeDraft;
+        if (d) {
+          m.set(orig.id, { ...live, x: d.x, y: d.y, w: d.w, h: d.h, angle: d.angle });
+        } else {
+          m.set(orig.id, live);
+        }
       }
     }
     return m;