#Composables

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

Subscribe to slices of provider state as shallow refs, read the rendered or visible layout, and reach the imperative actions.

import { selectItemView, useGridActions, useGridInteractionState, useGridItem, useGridItemView, useGridLayout, useGridPreview, useGridSelection, useGridSourceLayout, useGridStore, useGridVisibleLayout } from 'gridla/vue'
import type { GridSliceRef } from 'gridla/vue'

#Functions

#selectItemView

Select the GridItemView of itemId from a state snapshot.

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

#Hooks

#useGridActions

Imperative layout and selection actions. Stable for the provider's lifetime.

export function useGridActions<TData = unknown>(): GridActions<TData>

#useGridInteractionState

The gesture in progress, or null when idle.

export function useGridInteractionState(): GridSliceRef<GridInteraction | null>

#useGridItem

One item as it should be painted right now. null when absent. Accepts a ref or getter for the id.

export function useGridItem<TData = unknown>(
  itemId: MaybeRefOrGetter<string>,
): GridSliceRef<GridItem<TData> | null>

#useGridItemView

Everything a rendered item needs, with minimal updates: the ref changes only when a rect or flag differs. Accepts a ref or getter for the id.

export function useGridItemView<TData = unknown>(
  itemId: MaybeRefOrGetter<string>,
): GridSliceRef<GridItemView>

#useGridLayout

The rendered layout (projected onto the measured canvas size).

export function useGridLayout<TData = unknown>(): GridSliceRef<GridLayout<TData>>

#useGridPreview

The solver's latest preview for the gesture in progress, or null when idle.

export function useGridPreview<TData = unknown>(): GridSliceRef<GridPreview<TData> | null>

#useGridSelection

Id of the selected item, or null when nothing is selected.

export function useGridSelection(): GridSliceRef<string | null>

#useGridSourceLayout

The layout the provider was given, in its own coordinates.

export function useGridSourceLayout<TData = unknown>(): GridSliceRef<GridLayout<TData>>

#useGridStore

Subscribe to a slice of provider state. The returned ref updates only when the selected value changes (by Object.is, or isEqual when given). The subscription ends with the calling component or effect scope.

export function useGridStore<TData = unknown, TSlice = GridState<TData>>(
  selector: (state: GridState<TData>) => TSlice = (state) => state as unknown as TSlice,
  isEqual: (a: TSlice, b: TSlice) => boolean = Object.is,
): GridSliceRef<TSlice>

#useGridVisibleLayout

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

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

#Types

#GridSliceRef

A read-only shallow ref: the value is replaced as a whole, its contents are never made reactive. Returned by every store composable.

export type GridSliceRef<T> = Readonly<ShallowRef<T>>