Sprites.Media.Image.Insert

Sprites.Media.Image.Insert.PageSize Number

How many sprites the picker lists, the count the store query asks for.

24

Sprites.Media.Image.Insert.Option Void

Sprites.Media.Image.Insert.Option(item)

One sprite option in the picker: a selectable card of the sprite's thumbnail and name, so a click chooses it and the card darkens. item is the sprite's meta record; it sits inside a Sprites.Ui.Button.Select over the chosen id, so a click sets that to this sprite's id. Wrap it in a Select over the selected id.

Returns nothing.

const item = { id: 'demo', name: 'Ship', thumb: '' };
const selectedId = Sprites.Reactive.Value(undefined);
Sprites.Ui.Button.Select(selectedId, () => {
  Sprites.Media.Image.Insert.Option(item);
});
Sprites.Ui.Dom.Text(' chosen = ', selectedId);

Sprites.Media.Image.Insert.StampCommand Sprites.Reactive.Value

Sprites.Media.Image.Insert.StampCommand(data, layerIndex, spriteGrid)

The stamp command for the chosen sprite: a lens that, on Place, flattens the sprite to a pixel grid and stamps it into the selected layer at the image centre, then writes the layer back. It composes the centre offset and the stamp from reactive values, so a sprite still loading stamps when it lands, in one settle. data is the document; layerIndex the selected layer; spriteGrid the chosen sprite's { w, h, cells } pixels.

Returns a lens value; bind it to a button that stamps on a click.

const doc = Sprites.Media.Image.NewDocument(32, 32, undefined);
const data = Sprites.Reactive.Value(doc);
const layerIndex = Sprites.Reactive.Value(0);
const spriteData = { w: 2, h: 2, frames: [ { layers: [ { pixels: [ 0xff0000ff, 0xff0000ff, 0xff0000ff, 0xff0000ff ], visible: true } ] } ] };
const spriteGrid = Sprites.Media.Image.SpriteToGrid(spriteData);
const stamp = Sprites.Media.Image.Insert.StampCommand(data, layerIndex, spriteGrid);
Sprites.Ui.Button.Act(stamp, 'Place in image');

Sprites.Media.Image.Insert.Chosen Void

Sprites.Media.Image.Insert.Chosen(selectedId, data, layerIndex)

The chosen sprite's controls: shown while a sprite is selected. It opens the sprite's stored record, flattens it to pixels, and offers Place, which stamps it into the current layer. selectedId is the chosen id; data and layerIndex are the stamp target. With no id chosen it shows nothing, so the example leaves the id unset and Chosen stays empty until a real pick.

Returns nothing.

const doc = Sprites.Media.Image.NewDocument(32, 32, undefined);
const data = Sprites.Reactive.Value(doc);
const layerIndex = Sprites.Reactive.Value(0);
const selectedId = Sprites.Reactive.Value(undefined);
Sprites.Ui.Dom.Text('Pick a sprite to show Place:');
Sprites.Media.Image.Insert.Chosen(selectedId, data, layerIndex);

Sprites.Media.Image.Insert.Window Void

Sprites.Media.Image.Insert.Window(visible, data, layerIndex)

The Insert panel window: a floating panel, shown while visible is true, with a close button. It lists the library's sprites over a Place control for the chosen one. It owns its live rect, so it keeps its dragged corner and size across a close and reopen. It opens a floating window and reads the store, so the example below is gated behind a button.

Returns nothing.

const doc = Sprites.Media.Image.NewDocument(32, 32, undefined);
const data = Sprites.Reactive.Value(doc);
const layerIndex = Sprites.Reactive.Value(0);
const visible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Open Insert window');
Sprites.Media.Image.Insert.Window(visible, data, layerIndex);