Selection and resizing

Select starts a rubber-band gesture on unclaimed background space. Selection is reflected in query(engine).selection() 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.

Resizing exists only where you render a DOM ResizeRegion. Its element is the actual hit area, so CSS determines its placement, thickness, cursor, and appearance:

<Node
  x={node.x}
  y={node.y}
  width={node.width}
  height={node.height}
  onGeometryCommit={(event) => saveGeometry(event)}
>
  <ResizeRegion handle="e" class="resize-e" />
  <ResizeRegion handle="se" class="resize-se" />
  <ResizeRegion handle="s" class="resize-s" />
</Node>

<Node
  x={node.x}
  y={node.y}
  width={node.width}
  height={node.height}
  onGeometryCommit={saveGeometry}
>
  <ResizeRegion handle="e" className="resize-e" />
  <ResizeRegion handle="se" className="resize-se" />
  <ResizeRegion handle="s" className="resize-s" />
</Node>

The component only enforces pointer-events: auto and touch-action: none. It stamps data-snapline-part="resize-region" and data-handle, but supplies no layout or cursor defaults. A region may contain its own visible control, and multiple regions may use the same handle direction.

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 onGeometryCommit 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.