@kolosal-ai/rivet 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -201,6 +201,25 @@ declare const DEFAULT_ALIGNMENT_HYSTERESIS = 1.2;
  * absorbs).
  */
 declare function resolveFacingSide(node: Rect, peer: Rect, previous?: HandlePosition, hysteresis?: number): HandlePosition;
+/**
+ * {@link resolveFacingSide} restricted to the sides an end can actually reach.
+ *
+ * A node only offers connection points where its handles are. Letting an auto
+ * or live-aligned end resolve freely puts the edge on a bare side — a
+ * left/right node gets its edge stuck to the top midpoint, where the consumer
+ * put nothing. Passing the sides that carry a compatible handle keeps the edge
+ * on a real connection point.
+ *
+ * An empty `allowed` means "unconstrained" — a node with no registered handles
+ * attaches at side midpoints, so every side is equally valid, and anchors place
+ * themselves along whichever side faces the peer.
+ *
+ * When the freely-resolved side isn't reachable, a still-reachable `previous`
+ * wins over re-picking: with the peer straight above a left/right node the raw
+ * choice hangs on the sign of a near-zero `dx`, which would flicker frame to
+ * frame.
+ */
+declare function resolveFacingSideAmong(node: Rect, peer: Rect, allowed: readonly HandlePosition[], previous?: HandlePosition, hysteresis?: number): HandlePosition;
 
 /** Resolved graph context for a pane right-click, passed to `onPaneContextMenu`. */
 type PaneContextMenuContext = {
@@ -1009,4 +1028,4 @@ declare function rectsIntersect(a: Rect, b: Rect): boolean;
 
 declare const VERSION = "0.0.0";
 
-export { AlignmentGuide, BUILTIN_EDGE_TYPES, BUILTIN_NODE_TYPES, Canvas2DEdgeRenderer, type CloneOptions, type ClonedElements, Connection, Controls, type ControlsProps, DEFAULT_ALIGNMENT_HYSTERESIS, DefaultEdgeOptions, DefaultNode, type EdgeAlignment, EdgeChange, EdgeDrawExtras, EdgeEnd, type EdgeEndpoint, EdgeId, EdgePathFn, EdgeRenderer, EdgeRendererFactory, EdgeRendererOptions, EdgeTypes, GroupNode, Handle, HandlePosition, type HandleProps, HandleRecord, HandleType, MiniMap, type MiniMapProps, NodeChange, NodeId, NodeProps, NodeResizer, type NodeResizerProps, NodeTypes, type PaneContextMenuContext, PendingConnection, ReconnectDelegate, Rect, Rivet, RivetControls, RivetEdge, type RivetInstance, RivetNode, type RivetProps, RivetSelection, RivetSnapshot, type RivetStore, Size, VERSION, Vec2, Viewport, alignRect, applyEdgeChanges, applyNodeChanges, boundingRect, canvas2DEdgeRenderer, clampChildToParent, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, screenToWorld, serializeGraph, snapToGrid, useRivet, useRivetContext, useRivetControls, useRivetFocusedNode, useRivetHistory, useRivetViewport, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };
+export { AlignmentGuide, BUILTIN_EDGE_TYPES, BUILTIN_NODE_TYPES, Canvas2DEdgeRenderer, type CloneOptions, type ClonedElements, Connection, Controls, type ControlsProps, DEFAULT_ALIGNMENT_HYSTERESIS, DefaultEdgeOptions, DefaultNode, type EdgeAlignment, EdgeChange, EdgeDrawExtras, EdgeEnd, type EdgeEndpoint, EdgeId, EdgePathFn, EdgeRenderer, EdgeRendererFactory, EdgeRendererOptions, EdgeTypes, GroupNode, Handle, HandlePosition, type HandleProps, HandleRecord, HandleType, MiniMap, type MiniMapProps, NodeChange, NodeId, NodeProps, NodeResizer, type NodeResizerProps, NodeTypes, type PaneContextMenuContext, PendingConnection, ReconnectDelegate, Rect, Rivet, RivetControls, RivetEdge, type RivetInstance, RivetNode, type RivetProps, RivetSelection, RivetSnapshot, type RivetStore, Size, VERSION, Vec2, Viewport, alignRect, applyEdgeChanges, applyNodeChanges, boundingRect, canvas2DEdgeRenderer, clampChildToParent, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, resolveFacingSideAmong, screenToWorld, serializeGraph, snapToGrid, useRivet, useRivetContext, useRivetControls, useRivetFocusedNode, useRivetHistory, useRivetViewport, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };

package/dist/index.js

@@ -313,6 +313,22 @@ function resolveFacingSide(node, peer, previous, hysteresis = DEFAULT_ALIGNMENT_
   if (Math.abs(dx) > Math.abs(dy) * hysteresis) return dx > 0 ? "right" : "left";
   return dy > 0 ? "bottom" : "top";
 }
+function bestAllowedSide(node, peer, allowed) {
+  const dx = peer.x + peer.width / 2 - (node.x + node.width / 2);
+  const dy = peer.y + peer.height / 2 - (node.y + node.height / 2);
+  const score = { left: -dx, right: dx, top: -dy, bottom: dy };
+  let best = null;
+  for (const side of allowed) {
+    if (best === null || score[side] > score[best]) best = side;
+  }
+  return best;
+}
+function resolveFacingSideAmong(node, peer, allowed, previous, hysteresis = DEFAULT_ALIGNMENT_HYSTERESIS) {
+  const resolved = resolveFacingSide(node, peer, previous, hysteresis);
+  if (allowed.length === 0 || allowed.includes(resolved)) return resolved;
+  if (previous && allowed.includes(previous)) return previous;
+  return bestAllowedSide(node, peer, allowed) ?? resolved;
+}
 
 // src/edge-ends.ts
 function displayedSideKey(edgeId, end) {
@@ -2187,7 +2203,7 @@ var ARROW_DIRS = {
   ArrowLeft: { x: -1, y: 0 },
   ArrowRight: { x: 1, y: 0 }
 };
-function createKeyboardHandler(store) {
+function createKeyboardHandler(store, getSnapGrid) {
   return (event) => {
     if (event.defaultPrevented) return;
     const active = document.activeElement;
@@ -2208,15 +2224,16 @@ function createKeyboardHandler(store) {
     const movers = store.getMovers(store.getSelectedNodes());
     if (movers.length === 0) return;
     event.preventDefault();
-    const step = event.shiftKey ? ARROW_STEP * ARROW_STEP_SHIFT : ARROW_STEP;
+    const snapGrid = getSnapGrid?.() ?? null;
+    const factor = event.shiftKey ? ARROW_STEP_SHIFT : 1;
+    const stepX = (snapGrid?.[0] || ARROW_STEP) * factor;
+    const stepY = (snapGrid?.[1] || ARROW_STEP) * factor;
     for (const id of movers) {
       const node = store.nodes.get(id);
       if (!node) continue;
-      store.moveNode(
-        id,
-        { x: node.position.x + dir.x * step, y: node.position.y + dir.y * step },
-        true
-      );
+      let next = { x: node.position.x + dir.x * stepX, y: node.position.y + dir.y * stepY };
+      if (snapGrid) next = snapToGrid(next, snapGrid);
+      store.moveNode(id, next, true);
     }
   };
 }
@@ -2722,6 +2739,16 @@ function handleOnSide(nodeId, side, role, handles) {
   }
   return null;
 }
+function reachableSides(nodeId, role, handles) {
+  if (!handles) return [];
+  const sides = [];
+  for (const record of handles.values()) {
+    if (record.nodeId !== nodeId) continue;
+    if (!WANTED_TYPES[role].includes(record.type)) continue;
+    if (!sides.includes(record.position)) sides.push(record.position);
+  }
+  return sides;
+}
 function resolveEnd(edge, role, node, peer, frame) {
   const { handles, viewport, worldPositions, extras } = frame;
   const handleId = role === "source" ? edge.sourceHandle : edge.targetHandle;
@@ -2759,9 +2786,10 @@ function resolveEnd(edge, role, node, peer, frame) {
     return endAt(pinnedSide);
   }
   const key = displayedSideKey(edge.id, role);
-  const side = resolveFacingSide(
+  const side = resolveFacingSideAmong(
     rect,
     nodeRect(peer, worldPositions),
+    anchorId ? [] : reachableSides(node.id, role, handles),
     extras?.displayedSides?.get(key)
   );
   extras?.displayedSides?.set(key, side);
@@ -3164,7 +3192,7 @@ function useRivetRuntime(params) {
       }
       pan.end(event);
     };
-    const onKeyDown = createKeyboardHandler(store);
+    const onKeyDown = createKeyboardHandler(store, () => reconnectRef.current.snapGrid);
     let focusRetryFrame = 0;
     const unsubscribeFocus = store.subscribeFocus((id) => {
       if (focusRetryFrame) {
@@ -4641,7 +4669,8 @@ function Rivet({
     zoomSpeed,
     minZoom,
     maxZoom,
-    gridGap
+    gridGap,
+    snapGrid: cfg.snapGrid
   });
   const contextValue = useMemo(
     () => ({
@@ -4844,6 +4873,6 @@ function useRivet() {
 // src/index.ts
 var VERSION = "0.0.0";
 
-export { BUILTIN_EDGE_TYPES, BUILTIN_NODE_TYPES, Canvas2DEdgeRenderer, Controls, DEFAULT_ALIGNMENT_HYSTERESIS, DefaultNode, GroupNode, Handle, MiniMap, NodeResizer, Rivet, VERSION, alignRect, applyEdgeChanges, applyNodeChanges, boundingRect, canvas2DEdgeRenderer, clampChildToParent, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, screenToWorld, serializeGraph, snapToGrid, useRivet, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };
+export { BUILTIN_EDGE_TYPES, BUILTIN_NODE_TYPES, Canvas2DEdgeRenderer, Controls, DEFAULT_ALIGNMENT_HYSTERESIS, DefaultNode, GroupNode, Handle, MiniMap, NodeResizer, Rivet, VERSION, alignRect, applyEdgeChanges, applyNodeChanges, boundingRect, canvas2DEdgeRenderer, clampChildToParent, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, resolveFacingSideAmong, screenToWorld, serializeGraph, snapToGrid, useRivet, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map