Types

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

State, action, gesture, and change types shared by the controller and every adapter.

import {  } from 'gridla/interaction'
import type { GridActions, GridChangeDetail, GridChangeReason, GridControllerConfig, GridGestureApi, GridInteraction, GridInteractionMode, GridPreview, GridState } from 'gridla/interaction'
ExportKindSummary
GridActionstypeImperative layout and selection API exposed by the controller.
GridChangeDetailtypeDescribes an accepted change: the reason, the affected item when there is one, and the solver strategy for solved operations.
GridChangeReasontypeWhy the layout changed, as reported in GridChangeDetail.
GridControllerConfigtypeResolved controller configuration: every SolveOptions field plus the responsive, drag-threshold, and keyboard-step settings with defaults applied.
GridGestureApitypeLow-level gesture control over one canvas.
GridInteractiontypeThe gesture currently in progress.
GridInteractionModetypeKind of gesture: dragging an item or resizing it.
GridPreviewtypeThe solver's latest answer for the gesture in progress.
GridStatetypeController state held in the store.

Types

GridActions

type · interaction/types.ts:99

Imperative layout and selection API exposed by the controller. The object is stable for the controller's lifetime.

export type GridActions<TData = unknown> = {
  /** Replace the whole layout. */
  setLayout: (layout: GridLayout<TData>) => void
  /** Move an item programmatically. Returns whether the solver accepted it. */
  move: (itemId: string, position: GridPoint, options?: SolveOptions) => boolean
  /** Resize an item programmatically. */
  resize: (
    itemId: string,
    change: { edge: GridResizeEdge; delta: GridPoint } | { rect: Partial<GridRect> },
    options?: SolveOptions,
  ) => boolean
  /** Insert an item at a position or centered on a pointer. */
  place: (
    item: NewGridItem<TData>,
    at: { position: GridPoint } | { pointer: GridPoint },
    options?: SolveOptions,
  ) => boolean
  remove: (itemId: string) => void
  /** Patch an item's fields (constraints, policy, data). Geometry is re-clamped. */
  update: (itemId: string, patch: Partial<GridItem<TData>>) => void
  select: (itemId: string | null) => void
  /** Cancel the gesture in progress without committing. */
  cancel: () => void
  /**
   * Preview a new item (for example one dragged from a palette) centered on a
   * pointer position in canvas pixels. Returns the preview, or `null` when it
   * cannot be placed. Follow up with `commitIncoming` or `clearIncoming`.
   */
  previewIncoming: (item: GridItem<TData>, pointer: GridPoint) => GridPreview<TData> | null
  /** Commit the incoming preview into the layout. Returns whether one was committed. */
  commitIncoming: () => boolean
  /** Drop the incoming preview without committing. */
  clearIncoming: () => void
}
MemberTypeDescription
setLayout(layout: GridLayout\<TData\>) =\> voidReplace the whole layout.
move(itemId: string, position: GridPoint, options?: SolveOptions) =\> booleanMove an item programmatically. Returns whether the solver accepted it.
resize`(itemId: string, change: { edge: GridResizeEdge; delta: GridPoint; } \{ rect: Partial<GridRect>; }, options?: SolveOptions) => boolean`
place`(item: NewGridItem<TData>, at: { position: GridPoint; } \{ pointer: GridPoint; }, options?: SolveOptions) => boolean`
remove(itemId: string) =\> void
update(itemId: string, patch: Partial\<GridItem\<TData\>\>) =\> voidPatch an item's fields (constraints, policy, data). Geometry is re-clamped.
select`(itemId: string \null) => void`
cancel() =\> voidCancel the gesture in progress without committing.
previewIncoming`(item: GridItem<TData>, pointer: GridPoint) => GridPreview<TData> \null`
commitIncoming() =\> booleanCommit the incoming preview into the layout. Returns whether one was committed.
clearIncoming() =\> voidDrop the incoming preview without committing.

GridChangeDetail

type · interaction/types.ts:73

Describes an accepted change: the reason, the affected item when there is one, and the solver strategy for solved operations.

export type GridChangeDetail = {
  reason: GridChangeReason
  itemId?: string
  strategy?: SolveStrategy
}
MemberTypeDescription
reasonGridChangeReason
itemId?string
strategy?SolveStrategy

GridChangeReason

type · interaction/types.ts:60

Why the layout changed, as reported in GridChangeDetail.

export type GridChangeReason =
  | 'move'
  | 'resize'
  | 'place'
  | 'remove'
  | 'update'
  | 'transfer'
  | 'set'

GridControllerConfig

type · interaction/types.ts:83

Resolved controller configuration: every SolveOptions field plus the responsive, drag-threshold, and keyboard-step settings with defaults applied.

export type GridControllerConfig = SolveOptions & {
  /**
   * Project the layout onto the measured canvas size. When `false`, the
   * canvas element is sized to the layout instead. Default `true`.
   */
  responsive: boolean
  /** Minimum pointer travel before a press becomes a drag. Default `4`. */
  dragThreshold: number
  /** Pixels moved per arrow key press. Default `8`; Shift multiplies by 4. */
  keyboardStep: number
}
MemberTypeDescription
responsivebooleanProject the layout onto the measured canvas size. When false, the canvas element is sized to the layout instead. Default true.
dragThresholdnumberMinimum pointer travel before a press becomes a drag. Default 4.
keyboardStepnumberPixels moved per arrow key press. Default 8; Shift multiplies by 4.

GridGestureApi

type · interaction/types.ts:140

Low-level gesture control over one canvas. Pointer coordinates are in rendered canvas pixels (relative to the canvas element). createPointerGesture drives this API from DOM events; adapters with their own input handling can call it directly.

export type GridGestureApi<TData = unknown> = {
  /** Start dragging `itemId`. Returns `false` when the item is not in the layout. */
  beginMove: (itemId: string, pointer: GridPoint, pointerId: number | null) => boolean
  /** Start resizing `itemId` from `edge`. Returns `false` when the item is not in the layout. */
  beginResize: (
    itemId: string,
    edge: GridResizeEdge,
    pointer: GridPoint,
    pointerId: number | null,
  ) => boolean
  /** Track the pointer during a move; `snap: false` bypasses alignment snapping. */
  updateMove: (pointer: GridPoint, modifiers: { snap: boolean }) => void
  /** Track the pointer during a resize. */
  updateResize: (pointer: GridPoint, modifiers: { snap: boolean }) => void
  /** Show the active item leaving this canvas (during a transfer). */
  setTransferring: (transferring: boolean) => void
  /** Commit the preview of the gesture in progress and end it. */
  commit: () => void
  /** End the gesture in progress without committing. */
  cancel: () => void
  /** Preview a foreign item dropped at `pointer` (rendered coordinates). */
  previewIncoming: (item: GridItem<TData>, pointer: GridPoint) => GridPreview<TData> | null
  /** Drop the incoming preview without committing. */
  clearIncoming: () => void
  /** Commit the current incoming preview. Returns the accepted layout or `null`. */
  commitIncoming: () => GridLayout<TData> | null
  /** Remove an item because it was transferred to another canvas. */
  completeOutgoing: (itemId: string) => void
  /** The canvas element, when mounted. */
  getElement: () => HTMLElement | null
  /** Register the canvas element (used for pointer capture and transfer hit-testing). */
  setElement: (element: HTMLElement | null) => void
}
MemberTypeDescription
beginMove`(itemId: string, pointer: GridPoint, pointerId: number \null) => boolean`
beginResize`(itemId: string, edge: GridResizeEdge, pointer: GridPoint, pointerId: number \null) => boolean`
updateMove(pointer: GridPoint, modifiers: \{ snap: boolean; \}) =\> voidTrack the pointer during a move; snap: false bypasses alignment snapping.
updateResize(pointer: GridPoint, modifiers: \{ snap: boolean; \}) =\> voidTrack the pointer during a resize.
setTransferring(transferring: boolean) =\> voidShow the active item leaving this canvas (during a transfer).
commit() =\> voidCommit the preview of the gesture in progress and end it.
cancel() =\> voidEnd the gesture in progress without committing.
previewIncoming`(item: GridItem<TData>, pointer: GridPoint) => GridPreview<TData> \null`
clearIncoming() =\> voidDrop the incoming preview without committing.
commitIncoming`() => GridLayout<TData> \null`
completeOutgoing(itemId: string) =\> voidRemove an item because it was transferred to another canvas.
getElement`() => HTMLElement \null`
setElement`(element: HTMLElement \null) => void`

GridInteraction

type · interaction/types.ts:17

The gesture currently in progress.

export type GridInteraction = {
  itemId: string
  mode: GridInteractionMode
  edge?: GridResizeEdge
  pointerId: number | null
  /** Where the pointer grabbed the item, relative to its top-left. */
  grabOffset: GridPoint
  /** Item rect at gesture start, in rendered canvas pixels. */
  origin: GridRect
  /** Pointer position at gesture start, in rendered canvas pixels. */
  start: GridPoint
}
MemberTypeDescription
itemIdstring
modeGridInteractionMode
edge?GridResizeEdge
pointerId`number \null`
grabOffsetGridPointWhere the pointer grabbed the item, relative to its top-left.
originGridRectItem rect at gesture start, in rendered canvas pixels.
startGridPointPointer position at gesture start, in rendered canvas pixels.

GridInteractionMode

type · interaction/types.ts:14

Kind of gesture: dragging an item or resizing it.

export type GridInteractionMode = 'move' | 'resize'

GridPreview

type · interaction/types.ts:31

The solver's latest answer for the gesture in progress.

export type GridPreview<TData = unknown> = {
  layout: GridLayout<TData>
  item: GridItem<TData>
  strategy: SolveStrategy
  shiftedSiblings: boolean
  accepted: boolean
}
MemberTypeDescription
layoutGridLayout\<TData\>
itemGridItem\<TData\>
strategySolveStrategy
shiftedSiblingsboolean
acceptedboolean

GridState

type · interaction/types.ts:43

Controller state held in the store. layout is what interactions operate on; source is what the caller owns.

export type GridState<TData = unknown> = {
  /** The layout the controller was given (or owns). */
  source: GridLayout<TData>
  /** Measured canvas element size, or `null` until measured. */
  size: GridSize | null
  /** `source` projected onto `size`. Interactions operate on this layout. */
  layout: GridLayout<TData>
  interaction: GridInteraction | null
  /** Rect that tracks the pointer during a gesture, in rendered pixels. */
  activeRect: GridRect | null
  preview: GridPreview<TData> | null
  selectedId: string | null
  /** True while the active item is being previewed in another canvas. */
  transferring: boolean
}
MemberTypeDescription
sourceGridLayout\<TData\>The layout the controller was given (or owns).
size`GridSize \null`
layoutGridLayout\<TData\>source projected onto size. Interactions operate on this layout.
interaction`GridInteraction \null`
activeRect`GridRect \null`
preview`GridPreview<TData> \null`
selectedId`string \null`
transferringbooleanTrue while the active item is being previewed in another canvas.