Primitives / foldkit-primitives/interaction

PointerDrag

namespace · packages/primitives/src/interaction/pointer-drag.ts:7

export * as PointerDrag from './pointer-drag.js'

PointerDrag as a Behavior: attaches the foldkit-primitives/dom Mount to a container slot and maps what it reports into the view's Messages. No Bundle: what is dragged and where the pointer is are facts, and what a drop means, and whether it is allowed, is the parent's update.

Members

PointerDrag.behavior

function · packages/primitives/src/interaction/pointer-drag.ts:41

function behavior<Slots>(
  slots: Slots,
): <Input, ParentMessage>(
  options: BehaviorOptions<Slots, ParentMessage>,
) => Behavior.NamedBehavior<Slots, Input, ParentMessage>

PointerDrag.BehaviorOptions

interface · packages/primitives/src/interaction/pointer-drag.ts:25

interface BehaviorOptions<Slots, ParentMessage> {
  readonly container: keyof Slots & string
  readonly attribute: string
  readonly targets?: {
    readonly attribute: string
    readonly within: string
  }
  readonly part?: string
  readonly toMessage: (fact: DragFact) => ParentMessage
}

PointerDrag.boxOf

function · packages/primitives/src/dom/pointer-drag.ts:70

function boxOf(element: Element): Box

An element's box. An element drawn as display: contents has none, so its first child's stands for it, as an editor's node wrapper's does.

PointerDrag.DRAG_THRESHOLD

const · packages/primitives/src/dom/pointer-drag.ts:52

const DRAG_THRESHOLD: 4

How far, in CSS pixels, a press moves before it is a drag rather than a click.

PointerDrag.DragCancelled

const · packages/primitives/src/dom/pointer-drag.ts:46

const DragCancelled: Schema.TaggedStruct<
  'DragCancelled',
  { readonly id: Schema.String }
>

PointerDrag.DragDropped

const · packages/primitives/src/dom/pointer-drag.ts:38

const DragDropped: Schema.TaggedStruct<
  'DragDropped',
  {
    readonly id: Schema.String
    readonly over: Schema.NullOr<
      Schema.Struct<{
        readonly id: Schema.String
        readonly zone: Schema.Literals<readonly ['before', 'inside', 'after']>
        readonly part: Schema.optionalKey<Schema.String>
      }>
    >
    readonly region: Schema.optionalKey<Schema.Boolean>
  }
>

PointerDrag.DragFact

type · packages/primitives/src/dom/pointer-drag.ts:49

type DragFact = DragStarted | DraggedOver | DragDropped | DragCancelled

PointerDrag.DraggedOver

const · packages/primitives/src/dom/pointer-drag.ts:26

const DraggedOver: Schema.TaggedStruct<
  'DraggedOver',
  {
    readonly over: Schema.NullOr<
      Schema.Struct<{
        readonly id: Schema.String
        readonly zone: Schema.Literals<readonly ['before', 'inside', 'after']>
        readonly part: Schema.optionalKey<Schema.String>
      }>
    >
    readonly region: Schema.optionalKey<Schema.Boolean>
  }
>

PointerDrag.DragPlace

const · packages/primitives/src/dom/pointer-drag.ts:13

const DragPlace: Schema.Struct<{
  readonly id: Schema.String
  readonly zone: Schema.Literals<readonly ['before', 'inside', 'after']>
  readonly part: Schema.optionalKey<Schema.String>
}>

A marked descendant under the pointer, and the zone of it the pointer is in. part is the value of the part attribute on the element found, such as the empty Region of a node a drop goes into; a place with one is inside.

PointerDrag.DragStarted

const · packages/primitives/src/dom/pointer-drag.ts:20

const DragStarted: Schema.TaggedStruct<
  'DragStarted',
  { readonly id: Schema.String }
>

PointerDrag.DragZone

const · packages/primitives/src/dom/pointer-drag.ts:5

const DragZone: Schema.Literals<readonly ['before', 'inside', 'after']>

PointerDrag.mount

const · packages/primitives/src/dom/pointer-drag.ts:100

const mount: Mount.MountDefinitionWithArgs<
  'PointerDrag',
  {
    attribute: Schema.String
    targets: Schema.optionalKey<
      Schema.Struct<{
        readonly attribute: Schema.String
        readonly within: Schema.String
      }>
    >
    part: Schema.optionalKey<Schema.String>
  },
  | { readonly _tag: 'DragStarted'; readonly id: string }
  | {
      readonly _tag: 'DraggedOver'
      readonly over: {
        readonly id: string
        readonly zone: 'before' | 'inside' | 'after'
        readonly part?: string
      } | null
      readonly region?: boolean
    }
  | {
      readonly _tag: 'DragDropped'
      readonly id: string
      readonly over: {
        readonly id: string
        readonly zone: 'before' | 'inside' | 'after'
        readonly part?: string
      } | null
      readonly region?: boolean
    }
  | { readonly _tag: 'DragCancelled'; readonly id: string }
>

Dragging one marked descendant of an element onto another, as a Mount. A descendant is marked by an attribute whose value is its id, as Targets marks them; a press on one that then moves past a threshold starts a drag, and the pointer's place over another marked descendant is reported with the zone of it the pointer is in: its first third (before), its middle (inside), or its last third (after). Releasing drops, and Escape or a cancelled pointer ends the drag with nothing dropped.

It writes no roles, no tabindex and no key handling, so the marked elements can be anything: a tree's rows, a canvas's nodes. The keyboard's way to do what a drag does is the parent's to give. Geometry is measured when the pointer moves and never kept; what a drop means is the parent's update.

PointerDrag.zoneOf

function · packages/primitives/src/dom/pointer-drag.ts:60

function zoneOf(box: Box, y: number): DragZone

The zone of a box a vertical position falls in, by thirds.