Sprites.Media.Sprite.Info

The sprite editor's Info window: the mode and size controls, and the mode model helpers behind them. A row builder lays out one labelled control; the size builders follow the current mode, offering a whole size dropdown, per side dropdowns or number inputs as the mode allows; and the mode helpers read a mode's aspect, colour count and index.

Sprites.Media.Sprite.Info

Sprites.Media.Sprite.InfoRow Void

Sprites.Media.Sprite.InfoRow(label, build)

One labelled row of the Info window: a name on the left, a control on the right. The row is a flex line that spaces the two apart, with the label in a span and the control built by the callback.

InputTypeDescription
labelString or Sprites.Reactive.ValueThe caption shown on the left.
buildFunctionA callback that builds the control on the right.

Returns nothing.

const width = Sprites.Reactive.Value(16);
Sprites.Media.Sprite.InfoRow('Width', () => {
  Sprites.Ui.Input.Number(width);
});
A caption on the left, its control on the right.

Sprites.Media.Sprite.ModeIndexKeys Sprites.Reactive.Value

Sprites.Media.Sprite.ModeIndexKeys(modeIndex)

The mode's rebuild keys: its index, boxed as a one item array, so the size controls rebuild when the mode changes. A composite over Sprites.Array.Fill.

InputTypeDescription
modeIndexNumber or Sprites.Reactive.ValueThe current mode's index.

Returns a read-only Sprites.Reactive.Value holding a one item array of the mode index.

const modeIndex = Sprites.Reactive.Value(0);
const keys = Sprites.Media.Sprite.ModeIndexKeys(modeIndex);
const first = Sprites.Array.At(keys, 0);
Sprites.Ui.Input.Number(modeIndex);
Sprites.Ui.Dom.Text(' key = ', first);
The mode index boxed as a one item key array.

Sprites.Media.Sprite.SizeIndex Sprites.Reactive.Value

Sprites.Media.Sprite.SizeIndex(width, height, sizes)

The index of the [width, height] pair among sizes that matches the current width and height, or zero when none do. A composite over Sprites.Array.FindIndex: the predicate reads the reactive width and height, legal inside the FindIndex primitive's Calculate.

InputTypeDescription
widthNumber or Sprites.Reactive.ValueThe current width.
heightNumber or Sprites.Reactive.ValueThe current height.
sizesArray or Sprites.Reactive.ValueThe list of allowed [width, height] pairs.

Returns a read-only Sprites.Reactive.Value holding the matching pair's index, or zero.

const width = Sprites.Reactive.Value(16);
const height = Sprites.Reactive.Value(16);
const sizes = Sprites.Reactive.Value([[8, 8], [16, 16], [32, 32]]);
const index = Sprites.Media.Sprite.SizeIndex(width, height, sizes);
Sprites.Ui.Input.Number(width);
Sprites.Ui.Input.Number(height);
Sprites.Ui.Dom.Text(' index = ', index);
Set width and height to 8, 16 or 32 to land on a pair.

Sprites.Media.Sprite.InfoDimension Void

Sprites.Media.Sprite.InfoDimension(label, mode, allowedKey, minKey, maxKey, side)

One side control of the Info window, for a mode that has no allowedSizes: a dropdown of the mode's allowed values for that side when it lists them, else a number input bounded by the mode's min and max, or the editor's limits. It reads the mode fields with Field, chooses the control with If and Else over a reactive flag, and defaults the bounds with Optional.Default.

InputTypeDescription
labelString or Sprites.Reactive.ValueThe row caption.
modeObject or Sprites.Reactive.ValueThe current mode.
allowedKeyStringThe mode field naming the allowed values for this side.
minKeyStringThe mode field naming this side's minimum.
maxKeyStringThe mode field naming this side's maximum.
sideSprites.Reactive.ValueThe two-way width or height.

Returns nothing.

const mode = Sprites.Reactive.Value({ minWidth: 4, maxWidth: 64 });
const width = Sprites.Reactive.Value(16);
Sprites.Media.Sprite.InfoDimension('Width', mode, 'allowedWidths', 'minWidth', 'maxWidth', width);
Sprites.Ui.Dom.Text(' width = ', width);
A mode without allowed widths shows a bounded number input.

Sprites.Media.Sprite.InfoSizes Void

Sprites.Media.Sprite.InfoSizes(modes, modeIndex, state, width, height)

The size controls for the current mode. A mode with allowedSizes offers one dropdown of whole [width, height] pairs; else width and height stand apart, each a dropdown when the mode lists its allowed values and a number input otherwise. It reads the current mode with Array.At, chooses the shape with If and Else over a reactive flag, and builds the option list with Each, so it follows the mode with no raw if.

InputTypeDescription
modesArray or Sprites.Reactive.ValueThe list of modes.
modeIndexSprites.Reactive.ValueThe current mode's index.
stateObject or Sprites.Reactive.ValueThe editor state.
widthSprites.Reactive.ValueThe two-way width.
heightSprites.Reactive.ValueThe two-way height.

Returns nothing.

const modes = Sprites.Reactive.Value([{ name: 'Fixed', allowedSizes: [[8, 8], [16, 16]] }]);
const modeIndex = Sprites.Reactive.Value(0);
const state = Sprites.Reactive.Value({});
const width = Sprites.Reactive.Value(16);
const height = Sprites.Reactive.Value(16);
Sprites.Media.Sprite.InfoSizes(modes, modeIndex, state, width, height);
Sprites.Ui.Dom.Text(' size = ', width, ' x ', height);
A mode with allowed sizes offers a whole size dropdown.

Sprites.Media.Sprite.ModeAspect Sprites.Reactive.Value

Sprites.Media.Sprite.ModeAspect(modes, modeIndex)

The pixel aspect for the current mode, one when the mode names none. A composite over Array.At, Field and Optional.Default.

InputTypeDescription
modesArray or Sprites.Reactive.ValueThe list of modes.
modeIndexNumber or Sprites.Reactive.ValueThe current mode's index.

Returns a read-only Sprites.Reactive.Value holding the mode's pixel aspect, or one.

const modes = Sprites.Reactive.Value([{ name: 'Square' }, { name: 'Wide', pixelAspect: 2 }]);
const modeIndex = Sprites.Reactive.Value(1);
const aspect = Sprites.Media.Sprite.ModeAspect(modes, modeIndex);
Sprites.Ui.Input.Number(modeIndex);
Sprites.Ui.Dom.Text(' aspect = ', aspect);
Mode one names a wide aspect; mode zero defaults to one.

Sprites.Media.Sprite.ModeIndexOf Sprites.Reactive.Value

Sprites.Media.Sprite.ModeIndexOf(modes, optionalName)

The index of the mode whose name matches optionalName, or zero when none do. A composite over Sprites.Array.FindIndex: the predicate reads the reactive name, legal inside the FindIndex primitive's Calculate.

InputTypeDescription
modesArray or Sprites.Reactive.ValueThe list of modes.
optionalNameString or Sprites.Reactive.ValueThe mode name to find.

Returns a read-only Sprites.Reactive.Value holding the matching mode's index, or zero.

const modes = Sprites.Reactive.Value([{ name: 'Mono' }, { name: 'Colour' }]);
const name = Sprites.Reactive.Value('Colour');
const index = Sprites.Media.Sprite.ModeIndexOf(modes, name);
Sprites.Ui.Dom.Text('index = ', index);
The index of the mode named Colour.

Sprites.Media.Sprite.ModeColourCount Sprites.Reactive.Value

Sprites.Media.Sprite.ModeColourCount(modes, modeIndex, slotCount)

The colours the current mode allows: the count it names, or the slots on hand, capped at the slots. A composite over Array.At, Field, Optional.Default and Maths.Min.

InputTypeDescription
modesArray or Sprites.Reactive.ValueThe list of modes.
modeIndexNumber or Sprites.Reactive.ValueThe current mode's index.
slotCountNumber or Sprites.Reactive.ValueThe palette slots on hand.

Returns a read-only Sprites.Reactive.Value holding the colour count, capped at the slots.

const modes = Sprites.Reactive.Value([{ name: 'Full' }, { name: 'Four', colours: 4 }]);
const modeIndex = Sprites.Reactive.Value(1);
const slots = Sprites.Reactive.Value(16);
const colours = Sprites.Media.Sprite.ModeColourCount(modes, modeIndex, slots);
Sprites.Ui.Input.Number(modeIndex);
Sprites.Ui.Input.Number(slots);
Sprites.Ui.Dom.Text(' colours = ', colours);
Mode Four names four colours, still capped at the slots on hand.