Sprites.Media.Sprite.Tool

The sprite editor's tool infrastructure: the tool selector, the Windows buttons, and the Tools window that holds them both. The Tools window picks the one canvas tool, move, draw or select, and opens the panel windows, file, history, layers and frames. Each tool and panel is its own module directly under Sprites.Media.Sprite, holding its own floating window: Draw, Move, Select, File, Layers, History and Frames.

Sprites.Media.Sprite.Tool

Sprites.Media.Sprite.Tool.Labelled Void

Sprites.Media.Sprite.Tool.Labelled(label, build)

One labelled block of a tool's controls: a small caption over its build. A tool's Controls may stack several of these, so each block names itself here rather than the window naming the whole section.

InputTypeDescription
labelStringThe caption over the block.
buildFunctionThe block content.

Returns nothing.

Sprites.Media.Sprite.Tool.Labelled('Brush', () => {
  Sprites.Ui.Button.Group.Column(() => {
    Sprites.Media.Sprite.Tool.Todo('1×1');
    Sprites.Media.Sprite.Tool.Todo('3×3');
  });
});
A captioned block wrapping a button group.

Sprites.Media.Sprite.Tool.Selector Void

Sprites.Media.Sprite.Tool.Selector(selectedToolName)

The canvas tool selector: one button group, one option per canvas tool, move, draw and select. Exactly one is selected at a time, and picking an option sets selectedToolName, which the editor reads to choose which tool acts on the canvas and which tool window shows. The panel windows open from the Windows buttons, so they are not here.

InputTypeDescription
selectedToolNameSprites.Reactive.ValueThe chosen tool, set by the group.

Returns nothing.

const selectedToolName = Sprites.Reactive.Value('move');
Sprites.Media.Sprite.Tool.Selector(selectedToolName);
Sprites.Ui.Dom.Text('tool = ', selectedToolName);
The button group sets the current tool.

Sprites.Media.Sprite.Tool.Todo Void

Sprites.Media.Sprite.Tool.Todo(label)

A stand-in button for an action not built yet: a secondary button bound to a value nothing reads, so a click is harmless until the real action lands. The label names what it will do.

InputTypeDescription
labelStringNames what it will do.

Returns nothing.

Sprites.Media.Sprite.Tool.Todo('Import');
A harmless stand-in button.

Sprites.Media.Sprite.Tool.Window Void

Sprites.Media.Sprite.Tool.Window(selectedToolName, fileVisible, historyVisible, layersVisible, framesVisible)

The Tools window: a slim floating window docked to the stage's top left. It holds two labelled groups: Tools picks the one canvas tool, move, draw or select, and Windows opens the panel windows, file, history, layers and frames. It shows no tool controls of its own; each tool and panel has its own window. The window has no close button and does not resize.

InputTypeDescription
selectedToolNameSprites.Reactive.ValueThe chosen canvas tool.
fileVisibleSprites.Reactive.ValueSet true when the File button is clicked.
historyVisibleSprites.Reactive.ValueSet true when the History button is clicked.
layersVisibleSprites.Reactive.ValueSet true when the Layers button is clicked.
framesVisibleSprites.Reactive.ValueSet true when the Frames button is clicked.

Returns nothing.

const selectedToolName = Sprites.Reactive.Value('move');
const fileVisible = Sprites.Reactive.Value(false);
const historyVisible = Sprites.Reactive.Value(false);
const layersVisible = Sprites.Reactive.Value(false);
const framesVisible = Sprites.Reactive.Value(false);
const on = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(on, true, 'Show tools window');
Sprites.Reactive.If(on, () => {
  Sprites.Media.Sprite.Tool.Window(selectedToolName, fileVisible, historyVisible, layersVisible, framesVisible);
});
Sprites.Ui.Dom.Text('tool = ', selectedToolName, ', file = ', fileVisible);
Open the Tools window; Tools picks the canvas tool, Windows opens a panel.

Sprites.Media.Sprite.Tool.Windows Void

Sprites.Media.Sprite.Tool.Windows(fileVisible, historyVisible, layersVisible, framesVisible)

The Windows buttons: one secondary button per panel window, File, History, Layers and Frames, each opening its window on a click by setting its visible flag true. They turn nothing off: a panel window carries its own close button, and any number may be open at once.

InputTypeDescription
fileVisibleSprites.Reactive.ValueThe File panel's show flag, set true on a click.
historyVisibleSprites.Reactive.ValueThe History panel's show flag, set true on a click.
layersVisibleSprites.Reactive.ValueThe Layers panel's show flag, set true on a click.
framesVisibleSprites.Reactive.ValueThe Frames panel's show flag, set true on a click.

Returns nothing.

const fileVisible = Sprites.Reactive.Value(false);
const historyVisible = Sprites.Reactive.Value(false);
const layersVisible = Sprites.Reactive.Value(false);
const framesVisible = Sprites.Reactive.Value(false);
Sprites.Media.Sprite.Tool.Windows(fileVisible, historyVisible, layersVisible, framesVisible);
Sprites.Ui.Dom.Text(' file = ', fileVisible);
Each button sets its panel's show flag true.