Primitives / foldkit-primitives/interaction

Targets

namespace · packages/primitives/src/interaction/targets.ts:7

export * as Targets from './targets.js'

Targets 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: which descendant is under the pointer, or was pressed, is already a fact, and what it means is the parent's update.

In the guides

Members

Targets.behavior

function · packages/primitives/src/interaction/targets.ts:30

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

Targets.BehaviorOptions

interface · packages/primitives/src/interaction/targets.ts:19

interface BehaviorOptions<Slots, ParentMessage> {
  readonly container: keyof Slots & string
  readonly attribute: string
  readonly preventDefault?: boolean
  readonly toMessage: (fact: TargetFact) => ParentMessage
}

Targets.mount

const · packages/primitives/src/dom/targets.ts:45

const mount: Mount.MountDefinitionWithArgs<
  'Targets',
  { attribute: Schema.String; preventDefault: Schema.Boolean },
  | { readonly _tag: 'TargetHovered'; readonly id: string | null }
  | {
      readonly _tag: 'TargetPressed'
      readonly id: string
      readonly shiftKey: boolean
      readonly altKey: boolean
      readonly ctrlKey: boolean
      readonly metaKey: boolean
    }
>

Which marked descendant of an element the pointer is over, and which one was pressed, as a Mount: one set of listeners on the container, not one per item. A descendant is marked by an attribute whose value is its id, such as a canvas's data-composition-node or a table's data-row. The nearest marked ancestor of the event's target, inside the container, is the one reported.

What hovering or pressing means (a selection, an outline, a menu) is the parent's update.

Targets.TargetFact

type · packages/primitives/src/dom/targets.ts:19

type TargetFact = TargetHovered | TargetPressed

Targets.TargetHovered

const · packages/primitives/src/dom/targets.ts:4

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

Targets.targetOf

function · packages/primitives/src/dom/targets.ts:29

function targetOf(
  container: Element,
  from: EventTarget | null,
  attribute: string,
): string | null

The id of the nearest marked element at or above from, inside container.

Targets.TargetPressed

const · packages/primitives/src/dom/targets.ts:10

const TargetPressed: Schema.TaggedStruct<
  'TargetPressed',
  {
    readonly id: Schema.String
    readonly shiftKey: Schema.Boolean
    readonly altKey: Schema.Boolean
    readonly ctrlKey: Schema.Boolean
    readonly metaKey: Schema.Boolean
  }
>