createProjectionNode

Effect-typed: what this page covers uses Effect's own types, so it moves to a new Effect major only in a Wardic major (the roadmap).

Solid 1 only. Registers an element with its provider's projection system as one layout node, as a w.* element with layout or a layoutId is. It's for building an element of your own on Wardic's layout animations, such as a binding for another kind of component. An app gives layout to a w.* element or a ward instead, which does this itself.

import { createProjectionNode } from "@wardic/solid"

const node = createProjectionNode({
  id,
  element,
  layoutDependency: () => props.items,
  transition: () => props.transition,
})

Call it within a Solid owner, once the element exists. It brings the layout Feature. The node is taken out as the owner is cleaned up.

Options

The four it needs:

Option
idThe element's id in the provider's gate, the entry its values are written under.
elementThe element to measure and animate.
layoutDependencyAn accessor whose change has it measured again.
transitionAn accessor of its transition: the layout entry, else the whole transition, runs its layout animations.

The rest are what a w.* element's motion props give it: layoutId, layoutScroll, layoutRoot, layoutAnchor, its layout value as layoutMode, layoutCrossfade as crossfade, its dragTransition, its own scale, x, y, rotate and opacity for handovers, and its layout callbacks. Each function is read when the projection needs it, outside Solid's tracking.

Returns

The node's handle:

Member
notify()Asks for a measure at the end of the task.
layoutBox()Its box as of its last measure, an Option.
dispose()Takes the node out, as the owner's cleanup does.

It also has the drag methods a draggable element's drag drives it through.

Types

  • CreateProjectionNodeOptions: its options.