Sprites.Media.Image.Tool
The image editor's Tools window and its Windows buttons. It reuses the sprite editor's shared tool parts, the labelled block and the canvas tool selector from Sprites.Media.Sprite.Tool: Tools picks the one canvas tool, move, draw or select, and Windows opens the panel windows, file, history, layers and insert. It shows no tool controls of its own; each canvas tool has its own window while selected, and each panel has its own window while its flag is true. A composite over the shared tool parts and the button and window primitives.
Sprites.Media.Image.Tool.Window Void
Sprites.Media.Image.Tool.Window(selectedToolName, fileVisible, historyVisible, layersVisible, insertVisible)
The Tools window: an always-present slim floating window docked to the stage's top left, with no close button and no resize. It holds the Tools group, the canvas tool selector, and the Windows group, the panel openers. selectedToolName is the chosen canvas tool; fileVisible, historyVisible, layersVisible and insertVisible are the four panel flags. It opens a floating window, so the example below is gated behind a button.
| Input | Type | Description |
|---|---|---|
selectedToolName | Sprites.Reactive.Value | The chosen canvas tool, one of move, draw, select. |
fileVisible | Sprites.Reactive.Value | Set true when the File button is clicked. |
historyVisible | Sprites.Reactive.Value | Set true when the History button is clicked. |
layersVisible | Sprites.Reactive.Value | Set true when the Layers button is clicked. |
insertVisible | Sprites.Reactive.Value | Set true when the Insert 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 insertVisible = 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.Image.Tool.Window(selectedToolName, fileVisible, historyVisible, layersVisible, insertVisible);
});
Sprites.Ui.Dom.Text('tool = ', selectedToolName, ', insert = ', insertVisible);Sprites.Media.Image.Tool.Windows Void
Sprites.Media.Image.Tool.Windows(fileVisible, historyVisible, layersVisible, insertVisible)
The Windows buttons: one secondary button per panel window, File, History, Layers and Insert, 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. This is the Windows group the Tools window holds; it builds only buttons, so it needs no gate.
| Input | Type | Description |
|---|---|---|
fileVisible | Sprites.Reactive.Value | The File panel's show flag, set true on a click. |
historyVisible | Sprites.Reactive.Value | The History panel's show flag, set true on a click. |
layersVisible | Sprites.Reactive.Value | The Layers panel's show flag, set true on a click. |
insertVisible | Sprites.Reactive.Value | The Insert 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 insertVisible = Sprites.Reactive.Value(false);
Sprites.Media.Image.Tool.Windows(fileVisible, historyVisible, layersVisible, insertVisible);
Sprites.Ui.Dom.Text(' insert = ', insertVisible);