Sprites.Media.Shader.Layers

The Layers window is the stack of shader layers and the controls to add, clone, reorder and delete them. It is a resizable floating panel holding a scrolling list of layer cards over a row of buttons. A card is a selectable name with a visible checkbox; picking one selects the layer the Sprites.Media.Shader.Layer window then edits, and the checkbox hides the layer from the render. The rendered per-layer preview arrives with the WebGL driver, so a card names its layer for now.

Sprites.Media.Shader.Layers

Sprites.Media.Shader.Layers.Window Void

Sprites.Media.Shader.Layers.Window(visible, layers, selectedLayer, layerIndex)

The Layers window: a resizable floating panel, shown while visible is true, with a close button. It fills as a column, a scrolling list of layer cards over a fixed row of buttons. layers is the two-way layers list; selectedLayer the two-way pick and layerIndex its clamped value. The window owns its live rect, so it keeps its dragged corner and size across a close and reopen.

InputTypeDescription
visibleSprites.Reactive.ValueThe two-way flag that shows the window while true.
layersSprites.Reactive.ValueThe two-way layers list the window shows and reorders.
selectedLayerSprites.Reactive.ValueThe two-way pick of the selected layer.
layerIndexvalueThe clamped selected index the buttons act on.

Returns nothing.

const data = Sprites.Media.Shader.NewDocument(256, 256);
const layers = Sprites.Object.Field(data, 'layers');
const selectedLayer = Sprites.Reactive.Value(0);
const count = Sprites.Array.Length(layers);
const last = Sprites.Maths.Subtract(count, 1);
const layerIndex = Sprites.Maths.Clamp(selectedLayer, 0, last);
const visible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Show Layers window');
Sprites.Media.Shader.Layers.Window(visible, layers, selectedLayer, layerIndex);
The Layers window over a document's layers; add, clone, reorder and delete, and the list and selection follow.

Sprites.Media.Shader.Layers.List Void

Sprites.Media.Shader.Layers.List(layers, selectedLayer)

The scrolling list of layer cards: a Select over the selected layer so exactly one card darkens, an Each over the layers, and column-reverse so the top layer, rendered last, sits at the top of the list.

InputTypeDescription
layersSprites.Reactive.ValueThe two-way layers list the cards are drawn from.
selectedLayerSprites.Reactive.ValueThe two-way pick so exactly one card darkens.

Returns nothing.

Sprites.Media.Shader.Layers.List(layers, selectedLayer);

Sprites.Media.Shader.Layers.Card Void

Sprites.Media.Shader.Layers.Card(layer, index, layers)

One layer card: a row of a selectable name and a visible checkbox. The name is an Option, so a click selects the layer and the selected card darkens; the checkbox is a two-way flag written back into the layer through the layers list, so hiding a layer drops it from the render. layer is the layer value, index its position in layers.

InputTypeDescription
layervalueThe layer this card shows, read from the list.
indexnumberThe layer's position in the list.
layersSprites.Reactive.ValueThe two-way layers list the visible flag writes back through.

Returns nothing.

Sprites.Media.Shader.Layers.Card(layer, 0, layers);

Sprites.Media.Shader.Layers.Buttons Void

Sprites.Media.Shader.Layers.Buttons(layers, selectedLayer, layerIndex)

The layer buttons: Add and Clone a layer just above the selected one and select it, Up and Down swap the selected layer with its neighbour and follow it, and Delete removes it unless it is the last layer. Each composes a new layers list and Sets it. Up disables at the top, Down at the bottom, and Delete while one layer is left.

InputTypeDescription
layersSprites.Reactive.ValueThe two-way layers list the buttons compose and Set.
selectedLayerSprites.Reactive.ValueThe two-way pick the buttons follow after an edit.
layerIndexvalueThe clamped selected index the buttons act on.

Returns nothing.

Sprites.Media.Shader.Layers.Buttons(layers, selectedLayer, layerIndex);