#Interaction

Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.

Pointer and keyboard orchestration for a canvas element you render yourself. GridCanvas uses this hook internally.

import { GRID_DATA, useGridInteraction } from 'gridla/react'
import type { GridPointerHandlers, UseGridInteractionOptions } from 'gridla/react'

#Hooks

#useGridInteraction

Pointer and keyboard orchestration for one canvas element. Attach the returned handlers to the element that contains the items; mark items with data-gridla-item, drag surfaces with data-gridla-drag-handle, and resize handles with data-gridla-resize-handle + data-gridla-edge.

Behavior:

• press on a drag handle selects the item; moving past the threshold starts a move;
• press on a resize handle starts a resize immediately;
• Shift locks a move to the dominant axis; Ctrl/Cmd bypasses alignment snapping;
• Escape cancels; arrow keys nudge the selected item (Alt resizes, Shift x4).

A binding over createPointerGesture from gridla/interaction.

export function useGridInteraction<TData = unknown>(
  ref: RefObject<HTMLElement | null>,
  options: UseGridInteractionOptions = {},
): GridPointerHandlers

#Constants

#GRID_DATA

Data attributes the pointer gesture looks for on pointer down. Adapters emit them on their elements: item carries the item id, dragHandle marks a surface that starts a move, resizeHandle plus edge mark a resize handle.

export const GRID_DATA: { readonly item: "data-gridla-item"; readonly dragHandle: "data-gridla-drag-handle"; readonly resizeHandle: "data-gridla-resize-handle"; readonly edge: "data-gridla-edge"; }

#Types

#GridPointerHandlers

Pointer and keyboard handlers returned by useGridInteraction. Spread them onto the canvas element.

export type GridPointerHandlers = {
  onPointerDown: (event: PointerEvent<HTMLElement>) => void
  onPointerMove: (event: PointerEvent<HTMLElement>) => void
  onPointerUp: (event: PointerEvent<HTMLElement>) => void
  onPointerCancel: (event: PointerEvent<HTMLElement>) => void
  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void
}

#UseGridInteractionOptions

Options for useGridInteraction. GridCanvas accepts the same fields as props.

export type UseGridInteractionOptions = GridPointerGestureOptions