#Types
Generated by
website/scripts/generate-api.tsfrompackages/gridla/src. Do not edit by hand; runbun run generateinwebsite/.
Component props, the item view passed to snippets, and the state, action, and change types shared with the other adapters.
import { GRID_DATA } from 'gridla/svelte'
import type { GridActions, GridCanvasProps, GridChangeDetail, GridChangeReason, GridControllerConfig, GridInteraction, GridInteractionMode, GridItemProps, GridItemRenderProps, GridItemView, GridPreview, GridPreviewOutlineProps, GridProviderProps, GridState, GridTransferScopeProps } from 'gridla/svelte'| Export | Kind | Summary |
|---|---|---|
GRID_DATA | const | Data attributes the pointer gesture looks for on pointer down. |
GridActions | type | Imperative layout and selection API exposed by the controller. |
GridCanvasProps | type | Props for GridCanvas: div attributes plus the pointer gesture options (onItemClick, onDeleteKey, enabled). |
GridChangeDetail | type | Describes an accepted change: the reason, the affected item when there is one, and the solver strategy for solved operations. |
GridChangeReason | type | Why the layout changed, as reported in GridChangeDetail. |
GridControllerConfig | type | Resolved controller configuration: every SolveOptions field plus the responsive, drag-threshold, and keyboard-step settings with defaults applied. |
GridInteraction | type | The gesture currently in progress. |
GridInteractionMode | type | Kind of gesture: dragging an item or resizing it. |
GridItemProps | type | Props for GridItem. |
GridItemRenderProps | type | Passed to the GridItem children snippet: the item's GridItemView plus attribute objects for drag and resize handles. |
GridItemView | type | Everything needed to paint one item: its current and pre-gesture rectangles plus its active, selected, shifted, and transferring flags. |
GridPreview | type | The solver's latest answer for the gesture in progress. |
GridPreviewOutlineProps | type | Props for GridPreviewOutline: div attributes plus the positioning mode (transform by default). |
GridProviderProps | type | Props for GridProvider: every SolveOptions field, a controlled or uncontrolled layout, change and transfer callbacks, and the controller settings. |
GridState | type | Controller state held in the store. |
GridTransferScopeProps | type | Props for GridTransferScope: the providers it spans. |
#Constants
#GRID_DATA
const · interaction/attributes.ts:6Data 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
#GridActions
type · interaction/types.ts:99Imperative 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
}| Member | Type | Description |
|---|---|---|
setLayout | (layout: GridLayout\<TData\>) =\> void | Replace the whole layout. |
move | (itemId: string, position: GridPoint, options?: SolveOptions) =\> boolean | Move 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\>\>) =\> void | Patch an item's fields (constraints, policy, data). Geometry is re-clamped. |
select | `(itemId: string \ | null) => void` |
cancel | () =\> void | Cancel the gesture in progress without committing. |
previewIncoming | `(item: GridItem<TData>, pointer: GridPoint) => GridPreview<TData> \ | null` |
commitIncoming | () =\> boolean | Commit the incoming preview into the layout. Returns whether one was committed. |
clearIncoming | () =\> void | Drop the incoming preview without committing. |
#GridCanvasProps
type · svelte/types.tsProps for GridCanvas: div attributes plus the pointer gesture options
(onItemClick, onDeleteKey, enabled).
export type GridCanvasProps = HTMLAttributes<HTMLDivElement> & GridPointerGestureOptions & {
children?: Snippet;
};| Member | Type | Description |
|---|---|---|
children? | Snippet\<[]\> |
#GridChangeDetail
type · interaction/types.ts:73Describes 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
}| Member | Type | Description |
|---|---|---|
reason | GridChangeReason | |
itemId? | string | |
strategy? | SolveStrategy |
#GridChangeReason
type · interaction/types.ts:60Why the layout changed, as reported in GridChangeDetail.
export type GridChangeReason =
| 'move'
| 'resize'
| 'place'
| 'remove'
| 'update'
| 'transfer'
| 'set'#GridControllerConfig
type · interaction/types.ts:83Resolved 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
}| Member | Type | Description |
|---|---|---|
responsive | boolean | Project the layout onto the measured canvas size. When false, the canvas element is sized to the layout instead. Default true. |
dragThreshold | number | Minimum pointer travel before a press becomes a drag. Default 4. |
keyboardStep | number | Pixels moved per arrow key press. Default 8; Shift multiplies by 4. |
#GridInteraction
type · interaction/types.ts:17The 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
}| Member | Type | Description |
|---|---|---|
itemId | string | |
mode | GridInteractionMode | |
edge? | GridResizeEdge | |
pointerId | `number \ | null` |
grabOffset | GridPoint | Where the pointer grabbed the item, relative to its top-left. |
origin | GridRect | Item rect at gesture start, in rendered canvas pixels. |
start | GridPoint | Pointer position at gesture start, in rendered canvas pixels. |
#GridInteractionMode
type · interaction/types.ts:14Kind of gesture: dragging an item or resizing it.
export type GridInteractionMode = 'move' | 'resize'#GridItemProps
type · svelte/types.tsProps for GridItem. id selects the item; the rest control drag surfaces,
built-in resize handles, and how the element is positioned.
export type GridItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'> & {
/** Id of the item in the layout. */
id: string;
/**
* `true` (default): the whole element is a drag surface. `false`: only
* elements with `dragHandleProps` start a move.
*/
draggable?: boolean;
/** Edges to render built-in resize handles for. Default: none. */
resizeEdges?: readonly GridResizeEdge[];
/** Class for built-in resize handles. */
resizeHandleClass?: string;
/**
* Position the element with `transform` (default) or with `left`/`top`.
* Transform keeps layout work off the main thread during gestures.
*/
positioning?: 'transform' | 'absolute';
/** Render the cursor-tracked rect while dragging instead of the solved preview. Default `true`. */
followPointer?: boolean;
/** Item content. Receives the item view plus handle attribute objects. */
children?: Snippet<[GridItemRenderProps]>;
};| Member | Type | Description |
|---|---|---|
draggable? | boolean | true (default): the whole element is a drag surface. false: only elements with dragHandleProps start a move. |
id | string | Id of the item in the layout. |
resizeEdges? | ReadonlyArray\<GridResizeEdge\> | Edges to render built-in resize handles for. Default: none. |
resizeHandleClass? | string | Class for built-in resize handles. |
positioning? | `"absolute" \ | "transform"` |
followPointer? | boolean | Render the cursor-tracked rect while dragging instead of the solved preview. Default true. |
children? | Snippet\<[GridItemRenderProps]\> | Item content. Receives the item view plus handle attribute objects. |
#GridItemRenderProps
type · svelte/types.tsPassed to the GridItem children snippet: the item's GridItemView plus
attribute objects for drag and resize handles.
export type GridItemRenderProps = GridItemView & {
/** Spread on the element that starts a move. */
dragHandleProps: {
'data-gridla-drag-handle': string;
};
/** Attributes for a resize handle on the given edge. */
getResizeHandleProps: (edge: GridResizeEdge) => {
'data-gridla-resize-handle': string;
'data-gridla-edge': GridResizeEdge;
};
};| Member | Type | Description |
|---|---|---|
rect | GridRect | Where the item is painted right now (preview-aware). |
baseRect | GridRect | Where the item was before the current gesture. |
activeRect | `GridRect \ | null` |
isActive | boolean | |
isSelected | boolean | |
isShifted | boolean | True when this item moved in the preview because another item pushed it. |
isTransferring | boolean | True while the active item is being previewed in another canvas. |
interaction | `GridInteraction \ | null` |
dragHandleProps | \{ 'data-gridla-drag-handle': string; \} | Spread on the element that starts a move. |
getResizeHandleProps | (edge: GridResizeEdge) =\> \{ "data-gridla-resize-handle": string; "data-gridla-edge": GridResizeEdge; \} | Attributes for a resize handle on the given edge. |
#GridItemView
type · svelte/types.tsEverything needed to paint one item: its current and pre-gesture rectangles
plus its active, selected, shifted, and transferring flags. Returned by
gridItemView and passed to the GridItem children snippet.
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;
};| Member | Type | Description |
|---|---|---|
rect | GridRect | Where the item is painted right now (preview-aware). |
baseRect | GridRect | Where the item was before the current gesture. |
activeRect | `GridRect \ | null` |
isActive | boolean | |
isSelected | boolean | |
isShifted | boolean | True when this item moved in the preview because another item pushed it. |
isTransferring | boolean | True while the active item is being previewed in another canvas. |
interaction | `GridInteraction \ | null` |
#GridPreview
type · interaction/types.ts:31The 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
}| Member | Type | Description |
|---|---|---|
layout | GridLayout\<TData\> | |
item | GridItem\<TData\> | |
strategy | SolveStrategy | |
shiftedSiblings | boolean | |
accepted | boolean |
#GridPreviewOutlineProps
type · svelte/types.tsProps for GridPreviewOutline: div attributes plus the positioning mode
(transform by default).
export type GridPreviewOutlineProps = HTMLAttributes<HTMLDivElement> & {
positioning?: 'transform' | 'absolute';
};| Member | Type | Description |
|---|---|---|
positioning? | `"absolute" \ | "transform"` |
#GridProviderProps
type · svelte/types.tsProps for GridProvider: every SolveOptions field, a controlled or
uncontrolled layout, change and transfer callbacks, and the controller
settings. layout is bindable (bind:layout).
export type GridProviderProps<TData = unknown> = SolveOptions & {
/**
* Stable id of this provider, unique within a `GridTransferScope`. Generated
* when omitted.
*/
id?: string;
/**
* Controlled layout. Bind it (`bind:layout`) to receive every accepted
* change, or pair it with `onLayoutChange` and pass the next layout back.
*/
layout?: GridLayout<TData>;
/** Initial layout for uncontrolled use. */
defaultLayout?: GridLayout<TData>;
/**
* Called with the next layout after every accepted change. The layout is
* expressed in the canvas size it was rendered at.
*/
onLayoutChange?: (layout: GridLayout<TData>, detail: GridChangeDetail) => void;
/** Fires with the solver strategy on every accepted interactive commit. */
onCommit?: (detail: GridChangeDetail) => void;
/** Called when an item moves to another canvas inside a `GridTransferScope`. */
onTransferOut?: (itemId: string, targetId: string) => void;
/** Called when an item arrives from another canvas. */
onTransferIn?: (item: GridItem<TData>, sourceId: string) => void;
/** Whether items from other canvases may be dropped here. Default `true`. */
acceptTransfers?: boolean | ((item: GridItem<TData>, sourceId: string) => boolean);
/** Project the layout 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`; Shift multiplies by 4. */
keyboardStep?: number;
/** Controlled selection. */
selectedId?: string | null;
onSelectedIdChange?: (itemId: string | null) => void;
children?: Snippet;
};| Member | Type | Description |
|---|---|---|
id? | string | Stable id of this provider, unique within a GridTransferScope. Generated when omitted. |
layout? | GridLayout\<TData\> | Controlled layout. Bind it (bind:layout) to receive every accepted change, or pair it with onLayoutChange and pass the next layout back. |
defaultLayout? | GridLayout\<TData\> | Initial layout for uncontrolled use. |
onLayoutChange? | ((layout: GridLayout\<TData\>, detail: GridChangeDetail) =\> void) | Called with the next layout after every accepted change. The layout is expressed in the canvas size it was rendered at. |
onCommit? | ((detail: GridChangeDetail) =\> void) | Fires with the solver strategy on every accepted interactive commit. |
onTransferOut? | ((itemId: string, targetId: string) =\> void) | Called when an item moves to another canvas inside a GridTransferScope. |
onTransferIn? | ((item: GridItem\<TData\>, sourceId: string) =\> void) | Called when an item arrives from another canvas. |
acceptTransfers? | `boolean \ | ((item: GridItem<TData>, sourceId: string) => boolean)` |
responsive? | boolean | Project the layout onto the measured canvas size. Default true. |
dragThreshold? | number | Minimum pointer travel before a press becomes a drag. Default 4. |
keyboardStep? | number | Pixels moved per arrow key press. Default 8; Shift multiplies by 4. |
selectedId? | `string \ | null` |
onSelectedIdChange? | `((itemId: string \ | null) => void)` |
children? | Snippet\<[]\> |
#GridState
type · interaction/types.ts:43Controller 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
}| Member | Type | Description |
|---|---|---|
source | GridLayout\<TData\> | The layout the controller was given (or owns). |
size | `GridSize \ | null` |
layout | GridLayout\<TData\> | source projected onto size. Interactions operate on this layout. |
interaction | `GridInteraction \ | null` |
activeRect | `GridRect \ | null` |
preview | `GridPreview<TData> \ | null` |
selectedId | `string \ | null` |
transferring | boolean | True while the active item is being previewed in another canvas. |
#GridTransferScopeProps
type · svelte/types.tsProps for GridTransferScope: the providers it spans.
export type GridTransferScopeProps = {
children?: Snippet;
};| Member | Type | Description |
|---|---|---|
children? | Snippet\<[]\> |