Transfer scope

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

Move items between controllers. createTransferScope hit-tests registered canvases against resting rects, previews the drop in the target, and commits it on release.

import { createTransferScope, measurePreviewShift } from 'gridla/interaction'
import type { TransferRegistration, TransferScope } from 'gridla/interaction'
ExportKindSummary
createTransferScopefunctionCreate a TransferScope.
measurePreviewShiftfunctionHow far a canvas' drop preview has moved the item that hosts element, right now, in client pixels.
TransferRegistrationtypeOne canvas registered in a TransferScope.
TransferScopetypeCoordinates item moves between canvases.

Functions

createTransferScope

function · interaction/transfer.ts:127

Create a TransferScope. Pass it to every createGridController whose items may move between each other (option scope); the controllers register themselves and unregister on destroy().

export function createTransferScope(): TransferScope

measurePreviewShift

function · interaction/transfer.ts:70

How far a canvas' drop preview has moved the item that hosts element, right now, in client pixels. A preview pushes neighbors aside, and one of them may be another canvas that a drag is being hit-tested against (the source it came from, or a candidate target). Testing the moving rect lets that canvas win as it slides under the pointer, which clears the preview, slides it back, and repeats. Subtract this displacement from the element's rect to test against its resting position instead. Returns zero when element is not inside targetElement or no preview is active.

export function measurePreviewShift(
  targetElement: HTMLElement,
  state: Pick<GridState, 'layout' | 'preview'>,
  element: HTMLElement,
): GridPoint

Types

TransferRegistration

type · interaction/transfer.ts:6

One canvas registered in a TransferScope. createGridController builds this from its options.

export type TransferRegistration = {
  /** Controller id; unique within the scope. */
  id: string
  /** The canvas element, when mounted. Used for hit-testing. */
  getElement: () => HTMLElement | null
  /** Whether `item`, dragged from the canvas `sourceId`, may be dropped here. */
  accepts: (item: GridItem, sourceId: string) => boolean
  gesture: GridGestureApi
  store: GridStore<GridState>
  /** Called on the source after a successful drop. */
  notifyTransferOut: (itemId: string, targetId: string) => void
  /** Called on the target after a successful drop. */
  notifyTransferIn: (item: GridItem, sourceId: string) => void
}
MemberTypeDescription
idstringController id; unique within the scope.
getElement`() => HTMLElement \null`
accepts(item: GridItem, sourceId: string) =\> booleanWhether item, dragged from the canvas sourceId, may be dropped here.
gestureGridGestureApi
storeGridStore\<GridState\>
notifyTransferOut(itemId: string, targetId: string) =\> voidCalled on the source after a successful drop.
notifyTransferIn(item: GridItem, sourceId: string) =\> voidCalled on the target after a successful drop.

TransferScope

type · interaction/transfer.ts:26

Coordinates item moves between canvases. The pointer decides the target: the deepest registered canvas under the pointer that accepts the item previews the drop; releasing there commits it.

export type TransferScope = {
  /** Add a canvas. Returns a function that removes it again. */
  register: (registration: TransferRegistration) => () => void
  /** Called by the source canvas on every pointer move during a drag (client coordinates). */
  track: (sourceId: string, itemId: string, client: GridPoint) => void
  /** Called by the source canvas on release. Returns `true` when a transfer happened. */
  drop: (sourceId: string) => boolean
  /** Abandon the current transfer session and clear any target preview. */
  cancel: () => void
}
MemberTypeDescription
register(registration: TransferRegistration) =\> () =\> voidAdd a canvas. Returns a function that removes it again.
track(sourceId: string, itemId: string, client: GridPoint) =\> voidCalled by the source canvas on every pointer move during a drag (client coordinates).
drop(sourceId: string) =\> booleanCalled by the source canvas on release. Returns true when a transfer happened.
cancel() =\> voidAbandon the current transfer session and clear any target preview.