Sprites.Media.Sprite.Draw

Sprites.Media.Sprite.Draw constants Number, String

The brush cursor's line width and colour, in world units. One unit is one pixel of the sprite. Cursor draws its outline with this pair.

Sprites.Ui.Dom.Text('cursor ', Sprites.Media.Sprite.Draw.CursorWidth, ' ', Sprites.Media.Sprite.Draw.CursorColour);

Sprites.Media.Sprite.Draw.CursorColour String

The colour of the brush cursor outline. Cursor draws its live box over the sprite with this colour. It is a plain CSS colour string, a bright red.

Value #ff3b30.

Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Sprite.Draw.CursorColour);
  Sprites.Ui.Dom.Style('width', '48px');
  Sprites.Ui.Dom.Style('height', '48px');
  Sprites.Ui.Dom.Style('border-radius', '6px');
});
Sprites.Ui.Dom.Text(' CursorColour = ', Sprites.Media.Sprite.Draw.CursorColour);

Sprites.Media.Sprite.Draw.CursorWidth Number

The line width of the brush cursor outline, in world units. One unit is one pixel of the sprite. Cursor draws its box with this width, so the outline scales with the zoom.

Value 0.12.

Sprites.Ui.Dom.Text('CursorWidth = ', Sprites.Media.Sprite.Draw.CursorWidth, ' world units');

Sprites.Media.Sprite.Draw.Window Void

Sprites.Media.Sprite.Draw.Window(visible, selectedDrawMode, radius, brushCss, paletteVisible)

The Draw tool's window: a floating panel with a Pencil and Eraser selector, the brush sizes and the current colour. It shows while visible is true, which the editor binds to the Draw tool being selected, and has no close button. Pencil lays the brush colour; Eraser clears cells to transparent. The colour square opens the Palette on a click.

Returns nothing.

const visible = Sprites.Reactive.Value(false);
const selectedDrawMode = Sprites.Reactive.Value('pencil');
const radius = Sprites.Reactive.Value(0);
const brushCss = Sprites.Reactive.Value('#ff8000');
const paletteVisible = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(visible, true, 'Show Draw window');
Sprites.Media.Sprite.Draw.Window(visible, selectedDrawMode, radius, brushCss, paletteVisible);
Sprites.Ui.Dom.Text(' mode = ', selectedDrawMode, ', size = ', radius);

Sprites.Media.Sprite.Draw.BrushBox Object

Sprites.Media.Sprite.Draw.BrushBox(col, row, radius)

The square a brush covers, centred on a pixel. radius 0 is one pixel, 1 is three by three, 2 is five by five. Returns the top left and the side.

Returns the { x, y, w, h } box, live going forward and a plain box inside a lens.

const box = Sprites.Media.Sprite.Draw.BrushBox(5, 5, 2);
const x = Sprites.Object.Field(box, 'x');
const y = Sprites.Object.Field(box, 'y');
const w = Sprites.Object.Field(box, 'w');
const h = Sprites.Object.Field(box, 'h');
Sprites.Ui.Dom.Text('x=', x, ' y=', y, ' w=', w, ' h=', h);

The brush swatch colour Sprites.Reactive.Value

The Draw window shows the current brush colour in its swatch. The editor derives that swatch colour from the brush's packed colour with Sprites.Colour.Css, then passes it to Window as its brushCss input. The brush starts as Sprites.Media.Sprite.White, a packed colour.

Returns a read-only Sprites.Reactive.Value, the CSS colour.

const brush = Sprites.Reactive.Value(Sprites.Media.Sprite.White);
const css = Sprites.Colour.Css(brush);
Sprites.Ui.Dom.Text('brush css = ', css);

Sprites.Media.Sprite.Draw.Cursor Void

Sprites.Media.Sprite.Draw.Cursor(active, over, at, radius, aspect)

The brush preview: a square outline around the pixels the brush would paint, drawn in sprite space inside a Vector. Shown while active and the pointer is over the sprite.

Returns nothing.

const at = Sprites.Reactive.Value({ x: 3.5, y: 3.5 });
const radius = Sprites.Reactive.Value(1);
const pan = Sprites.Reactive.Value({ x: 4, y: 4 });
const show = Sprites.Reactive.Value(10);
Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Style('height', '160px');
  Sprites.Ui.Image.Vector(pan, show, () => {
    Sprites.Media.Sprite.Draw.Cursor(true, true, at, radius, 1);
  });
});

Sprites.Media.Sprite.Draw.CursorBox Object

Sprites.Media.Sprite.Draw.CursorBox(at, aspect, radius)

The box of cells the brush covers, from the pointer. A composite: it reads the pointer's x and y, turns them into the centre column and row through Sprites.Maths, and hands those to BrushBox.

Returns the { x, y, w, h } box the brush covers.

const at = Sprites.Reactive.Value({ x: 6, y: 3 });
const box = Sprites.Media.Sprite.Draw.CursorBox(at, 2, 1);
const x = Sprites.Object.Field(box, 'x');
const y = Sprites.Object.Field(box, 'y');
const w = Sprites.Object.Field(box, 'w');
const h = Sprites.Object.Field(box, 'h');
Sprites.Ui.Dom.Text('x=', x, ' y=', y, ' w=', w, ' h=', h);

Sprites.Media.Sprite.Draw.CursorH Sprites.Reactive.Value

Sprites.Media.Sprite.Draw.CursorH(box)

The height of the cursor box, in cells.

Returns a read-only Sprites.Reactive.Value, the box height.

const box = Sprites.Media.Sprite.Draw.BrushBox(3, 3, 1);
const h = Sprites.Media.Sprite.Draw.CursorH(box);
Sprites.Ui.Dom.Text('CursorH = ', h);

Sprites.Media.Sprite.Draw.CursorW Sprites.Reactive.Value

Sprites.Media.Sprite.Draw.CursorW(box, aspect)

The drawn width of the cursor box: its cell width stretched by the aspect. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the drawn width.

const box = Sprites.Media.Sprite.Draw.BrushBox(3, 3, 1);
const w = Sprites.Media.Sprite.Draw.CursorW(box, 2);
Sprites.Ui.Dom.Text('CursorW = ', w);

Sprites.Media.Sprite.Draw.CursorX Sprites.Reactive.Value

Sprites.Media.Sprite.Draw.CursorX(box, aspect)

The drawn left edge of the cursor box: its column stretched by the aspect. A composite over Sprites.Maths.

Returns a read-only Sprites.Reactive.Value, the drawn left edge.

const box = Sprites.Media.Sprite.Draw.BrushBox(3, 3, 1);
const x = Sprites.Media.Sprite.Draw.CursorX(box, 2);
Sprites.Ui.Dom.Text('CursorX = ', x);

Sprites.Media.Sprite.Draw.CursorY Sprites.Reactive.Value

Sprites.Media.Sprite.Draw.CursorY(box)

The top edge of the cursor box, in cells.

Returns a read-only Sprites.Reactive.Value, the box top edge.

const box = Sprites.Media.Sprite.Draw.BrushBox(3, 3, 1);
const y = Sprites.Media.Sprite.Draw.CursorY(box);
Sprites.Ui.Dom.Text('CursorY = ', y);