Selection and resizing

Select starts a rubber-band gesture on unclaimed background space. Selection is reflected in getSelectedNodes(engine) and on each node through data-selected.

SnapLine does not assign meanings to Shift, Control, or any other key. Use callbacks.resolveSelectionMode on nodes and selectors to translate the application’s input policy into "replace", "add", or "toggle":

const callbacks = {
  resolveSelectionMode: ({ originalEvent }) =>
    originalEvent.shiftKey ? "toggle" : "replace",
};

For a rubber band, "add" preserves the baseline selection while adding the nodes touched by the rectangle. "toggle" inverts touched nodes relative to that baseline. Membership in a group never selects a node.

Set resizable to enable all eight handles, or pass an exact list:

<Node
  x={node.x}
  y={node.y}
  width={node.width}
  height={node.height}
  resizeHandles={["e", "se", "s"]}
  onGeometryChanged={(event) => saveGeometry(event)}
/>

<Node
  x={node.x}
  y={node.y}
  width={node.width}
  height={node.height}
  resizeHandles={["e", "se", "s"]}
  onGeometryChanged={saveGeometry}
/>

SnapLine owns live and settled geometry — position and size are visual cues that never wait for an application render; changed props still resynchronize the object deliberately. Persist final values from the batched onGeometryChanged event: a group or multi-select drag reports every moved node in one event ({ nodes: [{ node, x, y, width, height }] }), a resize reports a single entry.

Register a specific header or handle with registerDragHandle() (Vanilla), useNodeHandle() (React), or the component’s exposed node object (Svelte) when the entire node should not begin a move.