NarraLeaf

List, Slider, Image

List items and selection, slider value and range, image asset, fit mode and crop — all on a wired element.

Three widgets that carry state of their own — a List's items, a Slider's value, an Image's asset — reached here through a wired reference instead of from inside the widget. The rules common to every Element node are in Element.

List

List nodes take a list pin typed element:nl.list. They act on the List instance's runtime items, and those items live only in that instance: a full unmount clears them and nothing restores them, so write them back from a variable or another data source yourself. itemsBinding is consulted only as a read fallback when there are no runtime items.

Item-context readers — index, count, key, props — are not Element nodes at all; they read the template scope of the item they are rendered inside, and they live in List with the Self forms.

Get List Content

blueprint.element.list.getItems · Pure

Reads the runtime items. With none set, it falls back to itemsBinding or the preview data.

PinDirectionTypeNotes
listin · dataelement:nl.list
itemsout · dataarray

Set List Content

blueprint.element.list.setItems · Latent

Replaces the runtime items. A non-array is treated as an empty array.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
itemsin · dataarray

Clear List

blueprint.element.list.clear · Latent

Sets the runtime items to an empty array.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list

Append List Item

blueprint.element.list.appendItem · Latent

Appends one item to the end.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
itemin · dataany

Insert List Item

blueprint.element.list.insertItem · Latent

Inserts one item at an index. The index is clamped to the valid range rather than rejected.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
indexin · dataintegerAccepts an on-card literal.
itemin · dataany

Remove List Item

blueprint.element.list.removeItem · Latent

Removes the first item that is JSON-equal to item.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
itemin · dataany

Remove List Item At

blueprint.element.list.removeItemAt · Latent

Removes the item at an index.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
indexin · dataintegerAccepts an on-card literal.

Refresh List Items

blueprint.element.list.refreshItems · Latent

Writes the current items back unchanged, which forces the item template to re-render.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list

Get Selected Item

blueprint.element.list.getSelectedItem · Pure

Outputs null when there is no valid selection.

PinDirectionTypeNotes
listin · dataelement:nl.list
itemout · datajson

Set Selected Item

blueprint.element.list.setSelectedItem · Latent

Finds the item by JSON equality and selects it.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
itemin · dataany

Get Selected Index

blueprint.element.list.getSelectedIndex · Pure

Reads the selected index.

PinDirectionTypeNotes
listin · dataelement:nl.list
indexout · datainteger

Set Selected Index

blueprint.element.list.setSelectedIndex · Latent

Sets the selected index.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
indexin · dataintegerAccepts an on-card literal.

Scroll To Index

blueprint.element.list.scrollToIndex · Latent

Scrolls to one item.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
indexin · dataintegerAccepts an on-card literal.

Scroll To Top

blueprint.element.list.scrollToTop · Latent

Scrolls to the top.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list

Scroll To Bottom

blueprint.element.list.scrollToBottom · Latent

Scrolls to the bottom.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list

Get List Length

blueprint.element.list.getLength · Pure

PinDirectionTypeNotes
listin · dataelement:nl.list
lengthout · datainteger

Get Item At

blueprint.element.list.getItemAt · Pure

One row by index, without pulling the whole array through Get List Content.

PinDirectionTypeNotes
listin · dataelement:nl.list
indexin · dataintegerAccepts an on-card literal.
itemout · datajsonnull outside the current items.

Find Item By Field

blueprint.element.list.findItemByField · Pure

Looks a row up by one of the List's declared item fields. The card stores the field's stable id, so renaming the property costs the graph nothing.

PinDirectionTypeNotes
listin · dataelement:nl.list
valuein · dataanyWhat the field should equal.
indexout · datainteger-1 when nothing matches.
itemout · datajsonnull when nothing matches.
foundout · databoolean

On-card fields

FieldWhat
FieldWhich item field to match on.

Set Item Field At

blueprint.element.list.setItemFieldAt · Latent

Writes one field of one row, leaving the rest of that row alone. A row that is not there is a quiet no-op.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list
indexin · dataintegerAccepts an on-card literal.
valuein · dataany

On-card fields

FieldWhat
FieldWhich item field to write. Required — the node refuses to run without one.

Sort List By Field

blueprint.element.list.sortByField · Latent

Reorders the runtime items by one of their fields and writes the result back. Ordering rules are the same as Array Sort By Key in Data.

PinDirectionTypeNotes
inin · exec
nextout · exec
listin · dataelement:nl.list

On-card fields

FieldWhat
FieldWhich item field to order by. Required.
DirectionAscending or Descending.

Get Scroll Progress

blueprint.element.list.getScrollProgress · Pure

Where the List is scrolled to, as 01. The Scroll head says the List moved; these four say where it ended up — which is what a control outside the List has to ask, because nothing tells it.

PinDirectionTypeNotes
listin · dataelement:nl.list
progressout · datafloat

Get Scroll Offset

blueprint.element.list.getScrollOffset · Pure

PinDirectionTypeNotes
listin · dataelement:nl.list
offsetout · datafloatPixels.
maxOffsetout · datafloat0 when the content fits.

Is Scrolled To Start

blueprint.element.list.isScrolledToStart · Pure

PinDirectionTypeNotes
listin · dataelement:nl.list
atStartout · databooleanWithin one pixel of the near edge. true when the content fits.

Is Scrolled To End

blueprint.element.list.isScrolledToEnd · Pure

PinDirectionTypeNotes
listin · dataelement:nl.list
atEndout · databooleanWithin one pixel of the far edge. true when the content fits.

Slider

Slider nodes take a slider pin typed element:nl.slider. Everywhere a slider reports a value — props.value, its Blueprint Value, its event payloads, Get Slider Value — that value is the mapped one, already clamped and snapped to min, max and step. The 0..1 ratio is reachable only through Get Slider Normalized Value. The Self forms are in Slider.

Get Slider Value

blueprint.element.slider.getValue · Pure

Reads the mapped runtime value — already clamped and snapped.

PinDirectionTypeNotes
sliderin · dataelement:nl.slider
valueout · datafloat

Set Slider Value

blueprint.element.slider.setValue · Latent

Writes the mapped value and normalizes it against the current range and step. It updates runtime state only: no valueChanged, dragStart or dragEnd event is dispatched, and nothing is written back to the UI document.

PinDirectionTypeNotes
inin · exec
nextout · exec
sliderin · dataelement:nl.slider
valuein · datafloatAccepts an on-card literal.

Get Slider Normalized Value

blueprint.element.slider.getNormalizedValue · Pure

Reads the 0..1 ratio. This is the only node that gives it to you.

PinDirectionTypeNotes
sliderin · dataelement:nl.slider
normalizedValueout · datafloat

Get Slider Range

blueprint.element.slider.getRange · Pure

Reads min, max and step in one go.

PinDirectionTypeNotes
sliderin · dataelement:nl.slider
minout · datafloat
maxout · datafloat
stepout · datafloat

Set Slider Range

blueprint.element.slider.setRange · Latent

Writes min, max and step, then re-normalizes the current runtime value against them. Just as silent about events as Set Slider Value.

PinDirectionTypeNotes
inin · exec
nextout · exec
sliderin · dataelement:nl.slider
minin · datafloatAccepts an on-card literal.
maxin · datafloatAccepts an on-card literal.
stepin · datafloatAccepts an on-card literal.

Image

Image nodes take an element:nl.image pin. They are about the interface image widget only — not stage images, not character sprites, not anything the story performs. The literal card that produces an ImageAsset is not derived and stays in Image with the Self forms.

Get Image Asset

blueprint.element.image.getImageAsset · Pure

null when the widget has no image.

PinDirectionTypeNotes
elementin · dataelement:nl.image
assetout · dataImageAsset|null

Set Image Asset

blueprint.element.image.setImageAsset · Latent

Leave asset unwired and the card expands into an image picker; wire it and the wired value wins. null clears the image. Graphs that pass a plain assetId string still run, but new work should carry an ImageAsset.

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.image
assetin · dataImageAsset|nullAccepts an on-card literal.

Clear Image Asset

blueprint.element.image.clearImageAsset · Latent

Equivalent to Set Image Asset with null.

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

Get Image Fit Mode

blueprint.element.image.getFitMode · Pure

Reads imageFill.mode: cover, contain, stretch, crop or tile.

PinDirectionTypeNotes
elementin · dataelement:nl.image
fitModeout · datastring

Set Image Fit Mode

blueprint.element.image.setFitMode · Latent

Sets imageFill.mode, keeping the current asset and crop rect. An unknown or empty string falls back to the current mode instead of failing.

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.image
fitModein · datastringAccepts an on-card literal.

Get Image Crop Rect

blueprint.element.image.getCropRect · Pure

Reads imageFill.cropPlacement. With no explicit crop it reports the full image.

PinDirectionTypeNotes
elementin · dataelement:nl.image
leftPctout · datafloat
topPctout · datafloat
widthPctout · datafloat
heightPctout · datafloat

Set Image Crop Rect

blueprint.element.image.setCropRect · Latent

Writes the crop rect and switches fitMode to crop as a side effect.

PinDirectionTypeNotes
inin · exec
nextout · exec
elementin · dataelement:nl.image
leftPctin · datafloatAccepts an on-card literal.
topPctin · datafloatAccepts an on-card literal.
widthPctin · datafloatAccepts an on-card literal.
heightPctin · datafloatAccepts an on-card literal.

Get Image Flip X

blueprint.element.image.getFlipX · Pure

Reads the horizontal flip of the image content layer.

PinDirectionTypeNotes
elementin · dataelement:nl.image
flipXout · databoolean

Set Image Flip X

blueprint.element.image.setFlipX · Latent

Sets the horizontal flip.

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

Get Image Flip Y

blueprint.element.image.getFlipY · Pure

Reads the vertical flip of the image content layer.

PinDirectionTypeNotes
elementin · dataelement:nl.image
flipYout · databoolean

Set Image Flip Y

blueprint.element.image.setFlipY · Latent

Sets the vertical flip.

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

On this page