Skip to content

Documentation / @ripl/vue / RiplTree

Class: RiplTree ​

Defined in: adapters/vue/src/core/tree.ts:47

Coordinates one context's declarative tree: which group each element belongs to, which paint tier is in effect, and when to repaint.

Elements attach themselves during setup(), which Vue runs top-down and in template order, so the initial paint order is correct without any bookkeeping. This class exists for what setup() cannot see: a keyed v-for reorder moves components rather than remounting them, so the group's Set goes stale. A hidden DOM mirror of the declarative tree is observed for child-list changes and the affected group is re-ordered from it.

Constructors ​

Constructor ​

new RiplTree(): RiplTree

Returns ​

RiplTree

Properties ​

PropertyModifierTypeDescriptionDefined in
contextreadonlyShallowRef<Context<Element, Record<string, unknown>> | undefined>The rendering context this tree draws to, once the host element has been created.adapters/vue/src/core/tree.ts:61
rendererreadonlyShallowRef<Renderer | undefined>The renderer driving this tree, when a renderer component was declared.adapters/vue/src/core/tree.ts:67
rootGroupreadonlyGroupThe group that owns elements declared directly under the context, with no scene between.adapters/vue/src/core/tree.ts:70
scenereadonlyShallowRef<Scene<Context<Element, Record<string, unknown>>> | undefined>The scene this tree draws through, when a scene component was declared.adapters/vue/src/core/tree.ts:64

Accessors ​

disposing ​

Get Signature ​

get disposing(): boolean

Defined in: adapters/vue/src/core/tree.ts:88

Whether the whole tree is being torn down, in which case a leaving element should be destroyed outright. Vue runs beforeUnmount parent-first, so the context sets this before any descendant's unmounted hook could start a transition that the renderer, destroyed moments later, would never finish.

Returns ​

boolean


mounted ​

Get Signature ​

get mounted(): boolean

Defined in: adapters/vue/src/core/tree.ts:73

Whether the context component has mounted, which gates the appear transition phase.

Returns ​

boolean


parent ​

Get Signature ​

get parent(): Group

Defined in: adapters/vue/src/core/tree.ts:78

The group new top-level elements attach to: the scene when there is one, else the root group.

Returns ​

Group

Methods ​

attach() ​

attach(graph): void

Defined in: adapters/vue/src/core/tree.ts:215

Marks the tree mounted, runs the deferred attach handlers, and starts observing the hidden mirror for the reorders that setup() ordering cannot see.

Parameters ​

ParameterType
graphHTMLElement

Returns ​

void


destroy() ​

destroy(): void

Defined in: adapters/vue/src/core/tree.ts:261

Tears down the observer, pending frames and the root group.

Returns ​

void


dispose() ​

dispose(): void

Defined in: adapters/vue/src/core/tree.ts:256

Marks the tree as tearing down, so leaving elements skip their transition.

Returns ​

void


onAttached() ​

onAttached(handler): void

Defined in: adapters/vue/src/core/tree.ts:207

Registers work that can only run once the host element is in the document, such as reading a computed style off it. Descendants mount before the context does, so they cannot do this themselves.

Parameters ​

ParameterType
handler() => void

Returns ​

void


registerContainer() ​

registerContainer(container, resolve): void

Defined in: adapters/vue/src/core/tree.ts:159

Maps a DOM container in the hidden mirror onto the group it represents.

Parameters ​

ParameterTypeDescription
containerHTMLElementThe marker element whose children mirror the group's children.
resolveRiplContainerResolverResolves the group, re-evaluated on each sync.

Returns ​

void


registerMarker() ​

registerMarker(marker, element): void

Defined in: adapters/vue/src/core/tree.ts:170

Associates an element's marker node with the element, keying the reorder sync.

Parameters ​

ParameterType
markerHTMLElement
elementElement

Returns ​

void


releaseContainer() ​

releaseContainer(container): void

Defined in: adapters/vue/src/core/tree.ts:164

Drops a container registration, so a removed group stops being synced.

Parameters ​

ParameterType
containerHTMLElement

Returns ​

void


releaseLeaving() ​

releaseLeaving(group, element): void

Defined in: adapters/vue/src/core/tree.ts:188

Releases an element held for a leave transition.

Parameters ​

ParameterType
groupGroup
elementElement

Returns ​

void


releaseMarker() ​

releaseMarker(marker): void

Defined in: adapters/vue/src/core/tree.ts:175

Drops a marker registration.

Parameters ​

ParameterType
markerHTMLElement

Returns ​

void


requestPaint() ​

requestPaint(): void

Defined in: adapters/vue/src/core/tree.ts:241

Schedules a repaint through the highest tier available: a renderer paints on its own loop and only needs waking, a scene repaints on the next frame, and a bare context repaints its root group. A state-only change never wakes a stopped renderer on its own — only graph events, pointer movement and transitions do — so the renderer tier restarts the loop explicitly.

Returns ​

void


retainLeaving() ​

retainLeaving(group, element): void

Defined in: adapters/vue/src/core/tree.ts:180

Holds an unmounted element in its group until its leave transition finishes.

Parameters ​

ParameterType
groupGroup
elementElement

Returns ​

void