Types

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

Output payloads, application options, and the state, action, and change types shared with the other adapters.

import {  } from 'gridla/angular'
import type { GridActions, GridChangeDetail, GridChangeReason, GridControllerConfig, GridInteraction, GridInteractionMode, GridlaOptions, GridLayoutChangeEvent, GridPreview, GridState, GridTransferInEvent, GridTransferOutEvent } from 'gridla/angular'
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.
GridInteractiontypeThe gesture currently in progress.
GridInteractionModetypeKind of gesture: dragging an item or resizing it.
GridlaOptionstypeApplication-wide defaults registered with provideGridla.
GridLayoutChangeEventtypePayload of the provider's layoutChangeDetail output: the next layout plus the GridChangeDetail that produced it (reason, item id, solver strategy).
GridPreviewtypeThe solver's latest answer for the gesture in progress.
GridStatetypeController state held in the store.
GridTransferInEventtypePayload of the provider's transferIn output: an item arrived from another canvas.
GridTransferOutEventtypePayload of the provider's transferOut output: an item left for another canvas.

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.

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'

GridlaOptions

type · angular/types.ts:47

Application-wide defaults registered with provideGridla. Every field is optional; a provider's own inputs take precedence.

export type GridlaOptions = SolveOptions & {
  /** Project layouts onto the measured canvas size. 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`. */
  keyboardStep?: number
}
MemberTypeDescription
responsive?booleanProject layouts onto the measured canvas size. Default true.
dragThreshold?numberMinimum pointer travel before a press becomes a drag. Default 4.
keyboardStep?numberPixels moved per arrow key press. Default 8.

GridLayoutChangeEvent

type · angular/types.ts:20

Payload of the provider's layoutChangeDetail output: the next layout plus the GridChangeDetail that produced it (reason, item id, solver strategy). The layoutChange output carries the layout alone so [(layout)] works.

export type GridLayoutChangeEvent<TData = unknown> = {
  /** The next layout, expressed in the canvas size it was rendered at. */
  layout: GridLayout<TData>
  /** Why the layout changed. */
  change: GridChangeDetail
}
MemberTypeDescription
layoutGridLayout\<TData\>The next layout, expressed in the canvas size it was rendered at.
changeGridChangeDetailWhy the layout changed.

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.

GridTransferInEvent

type · angular/types.ts:28

Payload of the provider's transferIn output: an item arrived from another canvas.

export type GridTransferInEvent<TData = unknown> = {
  /** The item as placed in this canvas. */
  item: GridItem<TData>
  /** Id of the canvas the item came from. */
  sourceId: string
}
MemberTypeDescription
itemGridItem\<TData\>The item as placed in this canvas.
sourceIdstringId of the canvas the item came from.

GridTransferOutEvent

type · angular/types.ts:36

Payload of the provider's transferOut output: an item left for another canvas.

export type GridTransferOutEvent = {
  /** Id of the item that left. */
  itemId: string
  /** Id of the canvas that received it. */
  targetId: string
}
MemberTypeDescription
itemIdstringId of the item that left.
targetIdstringId of the canvas that received it.