@canvas-harness/react 0.1.5 → 0.1.6

package/dist/index.js

@@ -325,13 +325,17 @@ var useInteractionGesture = (ref, store, tool) => {
     };
     const beginResize = (id, handle) => {
       dragOriginals = snapshotOriginals([id]);
+      const o = dragOriginals[0];
       store.setInteractionState({
         mode: "resizing",
         draggedIds: [id],
         dragOriginals,
         resizeHandle: handle,
         resizeLockAspect: false,
-        resizeFromCenter: false
+        resizeFromCenter: false,
+        // Seed the draft with original geometry so the first frame
+        // before any pointermove already paints from the draft.
+        resizeDraft: o ? { x: o.x, y: o.y, w: o.w, h: o.h, angle: o.angle } : null
       });
     };
     const pointerAngleFromCenter = (node, world) => {
@@ -372,10 +376,10 @@ var useInteractionGesture = (ref, store, tool) => {
       const orig = dragOriginals[0];
       if (!orig || !resizeHandle) return;
       const next = computeResizeGeometry(orig, resizeHandle, worldPoint, modifiers);
-      store.updateNode(orig.id, next);
       store.setInteractionState({
         resizeLockAspect: modifiers.shift,
-        resizeFromCenter: modifiers.alt
+        resizeFromCenter: modifiers.alt,
+        resizeDraft: { x: next.x, y: next.y, w: next.w, h: next.h, angle: orig.angle }
       });
     };
     const commitDrag = () => {
@@ -391,13 +395,27 @@ var useInteractionGesture = (ref, store, tool) => {
       store.resetInteractionState();
     };
     const commitResize = () => {
-      const selected = store.getSelection();
-      for (const id of selected) {
-        const node = store.getNode(id);
-        if (!node) continue;
-        if (!shouldAutoFit(node)) continue;
-        const fitted = computeAutoFitHeight(node);
-        if (fitted > node.h) store.updateNode(node.id, { h: fitted });
+      const interaction = store.getInteractionState();
+      const draft = interaction.resizeDraft;
+      const orig = dragOriginals[0];
+      if (draft && orig) {
+        store.batch(() => {
+          store.updateNode(orig.id, {
+            x: draft.x,
+            y: draft.y,
+            w: draft.w,
+            h: draft.h,
+            angle: draft.angle
+          });
+          const selected = store.getSelection();
+          for (const id of selected) {
+            const node = store.getNode(id);
+            if (!node) continue;
+            if (!shouldAutoFit(node)) continue;
+            const fitted = computeAutoFitHeight(node);
+            if (fitted > node.h) store.updateNode(node.id, { h: fitted });
+          }
+        });
       }
       store.resetInteractionState();
     };
@@ -580,7 +598,14 @@ var useInteractionGesture = (ref, store, tool) => {
       const geom = store.getEdgeGeometry(midpointEdgeId);
       if (!geom) return;
       const { c1, c2 } = midpointToCubicControls(geom.source, world, geom.target);
-      store.updateEdge(midpointEdgeId, { control: [c1, c2] });
+      store.setInteractionState({
+        midpointDraft: { edgeId: midpointEdgeId, control: [c1, c2] }
+      });
+    };
+    const commitEdgeMidpoint = () => {
+      const draft = store.getInteractionState().midpointDraft;
+      if (draft) store.updateEdge(draft.edgeId, { control: draft.control });
+      store.resetInteractionState();
     };
     const updateReconnect = (world) => {
       if (!reconnectEdgeId || !reconnectEnd) return;
@@ -658,6 +683,9 @@ var useInteractionGesture = (ref, store, tool) => {
         case "reconnect-edge":
           commitReconnect(e);
           break;
+        case "edge-midpoint":
+          commitEdgeMidpoint();
+          break;
       }
       pointerDownAt = null;
       activeGesture = "idle";