#Hooks

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

Read provider state as signals, derive one item's view, and reach the client-only runtime that holds the controller.

import { selectItemView, useGridItemView, useGridRuntime, useGridState, useGridVisibleLayout } from 'gridla/qwik'
import type { GridItemView, GridPositioning } from 'gridla/qwik'

#Functions

#selectItemView

Derive the GridItemView of itemId from a state snapshot. Pure.

export function selectItemView<TData>(state: GridState<TData>, itemId: string): GridItemView

#Hooks

#useGridItemView

Everything a rendered item needs, recomputed when the provider state changes.

export function useGridItemView(itemId: string): ReadonlySignal<GridItemView>

#useGridRuntime

The client-only runtime of the nearest provider: a Qwik store whose controller is set once the provider has mounted (and undefined on the server). Capture the store in event handlers and read runtime.controller?.actions there for imperative layout and selection changes.

export function useGridRuntime<TData = unknown>(): GridRuntime<TData>

#useGridState

The provider's GridState as a read-only signal. Reading .value in a component subscribes it to every store change.

export function useGridState<TData = unknown>(): ReadonlySignal<GridState<TData>>

#useGridVisibleLayout

The layout that should be painted right now: the preview during a gesture, else the rendered layout.

export function useGridVisibleLayout<TData = unknown>(): ReadonlySignal<GridLayout<TData>>

#Types

#GridItemView

Everything needed to paint one item: its current and pre-gesture rectangles plus its active, selected, shifted, and transferring flags. Returned by useGridItemView and derived from the provider state by selectItemView.

export type GridItemView = {
  /** Where the item is painted right now (preview-aware). */
  rect: GridRect
  /** Where the item was before the current gesture. */
  baseRect: GridRect
  /** Cursor-tracked rect while this item is active; `null` otherwise. */
  activeRect: GridRect | null
  isActive: boolean
  isSelected: boolean
  /** True when this item moved in the preview because another item pushed it. */
  isShifted: boolean
  /** True while the active item is being previewed in another canvas. */
  isTransferring: boolean
  interaction: GridInteraction | null
}

#GridPositioning

How an item or preview box is positioned: with transform (default) or with left/top.

export type GridPositioning = 'transform' | 'absolute'