NarraLeaf

Displayable

Geometry, opacity, Variants and property animation on a wired element, plus the visible and enabled pair every widget carries.

Two families that apply to every widget type: the Displayable geometry and appearance nodes, and the visible / enabled pair each built-in widget repeats. The rules that govern all Element nodes — when the palette offers one, and how a missing target fails — are in Element.

Displayable

These take the generic element pin, so they accept a reference to any displayable element instead of one widget type. Coordinates are the Surface's design coordinates — the same numbers the inspector shows. Opacity is a single effective value: an Appearance Variant's transformOpacity resolves into it, an nl.image Variant's changed fillOpacity resolves into it, and Get Element Property, Set Element Property and Animate Element Property all touch that one number.

Seven readers at the end of this section — position, size, bounds, rotation, opacity, visible and variant — are superseded by Get Element Property and hidden from the palette. They stay registered so blueprints that already contain them keep running. They are documented because you will meet them in old graphs, not because you should add one.

The Self forms of all of these live in Displayable.

Get Element Property

blueprint.element.displayable.getProperty · Pure

The reader to use. Pick the property on the card and the value pin carries it.

PinDirectionTypeNotes
elementin · dataelement
valueout · dataany

On-card fields

FieldWhat
propertyposition gives { x, y }, size gives { width, height }, bounds gives { x, y, width, height }. x, y, offsetX, offsetY, width, height, rotation and opacity give a number; visible gives a boolean. opacity comes back as 0..1.

Set Element Property

blueprint.element.displayable.setProperty · Latent

Writes one runtime property on the target. variant is deliberately absent from the list — Variants go through Set Element Variant.

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement
valuein · dataanyWiring it disables the card's Value control; the wired value wins.

On-card fields

FieldWhat
propertyx, y, offsetX, offsetY, width, height, rotation, opacity, visible.
valueThe card shows the unit: px for the positions and sizes, deg for rotation, % for opacity. visible becomes a Visible / Hidden dropdown. Number fields are draft-edited — the value commits on Enter or on losing focus, and Esc discards it.

Animate Element Property

blueprint.element.displayable.animateProperty · Latent

Starts a property tween. The animation token is written out the moment the animation starts; next fires once the animation finishes on its own or is cut short by Stop Element Animation. It is a property node, not an effect library — build Fade or Shake on top of it as a macro.

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement
animationout · dataAnimationToken

On-card fields

FieldWhat
propertyopacity, offsetX, offsetY, x, y, scale, rotation. offsetX / offsetY are a visual displacement from the authored layout; x / y animate the layout position itself.
fromLeave it empty and the tween starts from the element's current runtime state. If you want x or y to start at coordinate zero you must type 0 — empty is not zero.
toThe target value.
durationSeconds. 0.3 is 300ms.
delaySeconds.
easinglinear, easeIn, easeOut, easeInOut, circIn, circOut, circInOut.
afterhold keeps the final value and writes it back to the runtime patch, so a later refresh cannot undo it. reset returns to the authored layout and appearance.

From and To are percentages for opacity: 100 is opaque and 1 is one percent. Set Element Property reads the same property differently — it treats anything above 1 as a percentage and anything at or below 1 as a 0..1 fraction, so 1 there means fully opaque. Same property, two nodes, opposite meanings for the number 1.

Stop Element Animation

blueprint.element.displayable.stopAnimation · Latent

The one node in this category with no element target: the token already identifies one animation on one element. It stops exactly that animation and lets the Animate Element Property waiting on it reach next early. A missing value, a value that is not an AnimationToken, or a token that is no longer pending is a silent no-op. Because it needs no binding, it is also the only Element node the palette offers unconditionally.

PinDirectionTypeNotes
inin · exec
nextout · exec
animationin · dataAnimationToken

Set Element Variant

blueprint.element.displayable.setVariant · Latent

Sets the runtime Appearance Variant override. There is no variantId pin and no way to type an id: once the wired reference makes the target statically knowable, the card lists that element's own Variants by name and stores the internal UUID as a hidden value. A second card field, Wait For Animation, chooses between continuing immediately and waiting for the longest field transition on the chosen Variant. Running it against an element that does not support Appearance Variants raises an execution error rather than doing nothing.

It also clears any earlier runtime opacity override, letting the Variant decide the opacity — which is why switching to a transparent Variant and then animating opacity from 0 to 100 enters from that transparent state instead of sticking at zero.

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelementOnly widget types that support Appearance Variants are accepted here.

Get Element Display

blueprint.element.displayable.getDisplay · Pure

Reads the runtime render switch, which defaults to true.

PinDirectionTypeNotes
elementin · dataelement
displayout · databoolean

Set Element Display

blueprint.element.displayable.setDisplay · Latent

false applies CSS display: none to the element and its subtree while leaving it mounted in the Surface element tree. It is not visible: that remains a layout and visibility property, reached through Get Element Property / Set Element Property.

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement
displayin · databoolean

Get Element Measured Rect

blueprint.element.displayable.getMeasuredRect · Pure

Where the element actually ended up, measured from what was painted rather than read off the document. Get Element Property with the bounds key answers from the authored layout plus its runtime patches, so it answers even for an element nothing has drawn yet; this one measures the real box.

PinDirectionTypeNotes
elementin · dataelement
rectout · dataRectSurface design coordinates. null when the element is not painted.

Get Element Center

blueprint.element.displayable.getCenter · Pure

The centre of that measured rect. The same measurement Move Mouse To Element aims at, for when the graph wants the point rather than the move.

PinDirectionTypeNotes
elementin · dataelement
centerout · dataVector2Dnull when the element is not painted.

Get Element Position

blueprint.element.displayable.getPosition · Pure

Reads the layout position as a Vector2D in design coordinates.

PinDirectionTypeNotes
elementin · dataelement
positionout · dataVector2D

Get Element Size

blueprint.element.displayable.getSize · Pure

Reads width and height as a Vector2D.

PinDirectionTypeNotes
elementin · dataelement
sizeout · dataVector2D

Get Element Bounds

blueprint.element.displayable.getBounds · Pure

Reads { x, y, width, height } in one object.

PinDirectionTypeNotes
elementin · dataelement
boundsout · dataRect

Get Element Rotation

blueprint.element.displayable.getRotation · Pure

Reads the visual rotation in degrees.

PinDirectionTypeNotes
elementin · dataelement
rotationout · datafloat

Get Element Opacity

blueprint.element.displayable.getOpacity · Pure

Reads the effective opacity as 0..1.

PinDirectionTypeNotes
elementin · dataelement
opacityout · datafloat

Get Element Visible

blueprint.element.displayable.getVisible · Pure

Reads the visible property — not display.

PinDirectionTypeNotes
elementin · dataelement
visibleout · databoolean

Get Element Variant

blueprint.element.displayable.getVariant · Pure

Reads the active Variant's internal UUID. Nothing in the current editor asks an author to handle that id, which is why the whole id-based Variant path is retired.

PinDirectionTypeNotes
elementin · dataelement
variantIdout · datastring

Visible and Enabled

Eight widget types carry the same four nodes: read and write visible, read and write enabled. They are Button, Container, Frame, Image, List, Slider, Switch and Text — nl.textInput is the one built-in with no Element pair, and is reached through Get Element Property / Set Element Property instead. Each takes a target pin typed to its own widget, so which four the palette offers depends on which widget types the graph binds. Set … Enabled mapped to false goes through the renderer's interaction-disable path; the node surface deliberately never exposes interactionDisabled.

To hide an element without unmounting it, reach for Set Element Display instead — visible and display are different switches, and only display collapses the subtree.

Get Button Visible

blueprint.element.button.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.button
visibleout · databoolean

Set Button Visible

blueprint.element.button.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.button
visiblein · databoolean

Get Button Enabled

blueprint.element.button.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.button
enabledout · databoolean

Set Button Enabled

blueprint.element.button.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.button
enabledin · databoolean

Get Container Visible

blueprint.element.container.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.container
visibleout · databoolean

Set Container Visible

blueprint.element.container.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.container
visiblein · databoolean

Get Container Enabled

blueprint.element.container.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.container
enabledout · databoolean

Set Container Enabled

blueprint.element.container.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.container
enabledin · databoolean

Get Frame Visible

blueprint.element.frame.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.frame
visibleout · databoolean

Set Frame Visible

blueprint.element.frame.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.frame
visiblein · databoolean

Get Frame Enabled

blueprint.element.frame.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.frame
enabledout · databoolean

Set Frame Enabled

blueprint.element.frame.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.frame
enabledin · databoolean

Get Image Visible

blueprint.element.image.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.image
visibleout · databoolean

Set Image Visible

blueprint.element.image.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.image
visiblein · databoolean

Get Image Enabled

blueprint.element.image.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.image
enabledout · databoolean

Set Image Enabled

blueprint.element.image.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.image
enabledin · databoolean

Get List Visible

blueprint.element.list.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.list
visibleout · databoolean

Set List Visible

blueprint.element.list.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.list
visiblein · databoolean

Get List Enabled

blueprint.element.list.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.list
enabledout · databoolean

Set List Enabled

blueprint.element.list.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.list
enabledin · databoolean

Get Slider Visible

blueprint.element.slider.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.slider
visibleout · databoolean

Set Slider Visible

blueprint.element.slider.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.slider
visiblein · databoolean

Get Slider Enabled

blueprint.element.slider.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.slider
enabledout · databoolean

Set Slider Enabled

blueprint.element.slider.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.slider
enabledin · databoolean

Get Switch Visible

blueprint.element.switch.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.switch
visibleout · databoolean

Set Switch Visible

blueprint.element.switch.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.switch
visiblein · databoolean

Get Switch Enabled

blueprint.element.switch.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.switch
enabledout · databoolean

Set Switch Enabled

blueprint.element.switch.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.switch
enabledin · databoolean

Get Text Visible

blueprint.element.text.getVisible · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.text
visibleout · databoolean

Set Text Visible

blueprint.element.text.setVisible · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.text
visiblein · databoolean

Get Text Enabled

blueprint.element.text.getEnabled · Pure

PinDirectionTypeNotes
elementin · dataelement:nl.text
enabledout · databoolean

Set Text Enabled

blueprint.element.text.setEnabled · Latent

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.text
enabledin · databoolean

On this page