Tooling

The shape of an editor

An editor for a media lives under Sprites.Media.<MediaName>, so the sprite editor is Sprites.Media.Sprite and the font editor is Sprites.Media.Font. Two rules place everything inside it. Each tool is its own namespace under Tool, and every window sits together under Window.

Sprites.Media.<MediaName>
  .Canvas              the editing surface
  .Tool
    .Selector          picks the selected tool
    .<ToolName>         one namespace per tool
      .Window          that tool's window, shown while it is selected
  .Window
    .Tools             the master Tool window
    .Palette .Info .Frames .Layers .History   general purpose windows

The sections below take each part in turn. Every table lists the members of one namespace, with the arguments, the return value, and what each one does.

Tools

A tool decides what the pointer does. One tool is selected at a time, and while it is selected a press, a drag, or a move inside the canvas runs that tool. The Draw tool lays colour, the Move tool pans and zooms, the Select tool marks a region. Picking another tool changes what the same gestures do.

Each tool is a namespace of its own, Sprites.Media.<MediaName>.Tool.<ToolName>. The selector and the selected tool sit one level up, in Sprites.Media.<MediaName>.Tool. The selector is one button group, one option per tool, and it sets the selected tool the canvas reads.

The canvas

The canvas is the area where the editing happens. It shows a preview of the thing being edited, often zoomed in, sometimes wrapped or repeated so an edge reads clearly. What a press, a drag, or a move does inside it comes from the selected tool. The canvas holds the view and the grid, reads the selected tool, and hands each pointer gesture to that tool.

The canvas and its parts sit directly under the media namespace, Sprites.Media.<MediaName>.

Tool windows and sub-tools

A tool may have a window of its own. It holds the tool's controls, and it shows only while that tool is selected, since it is useful only then. Picking another tool hides it and shows that tool's window in its place.

A tool has sub-tools when it does more than one thing. One sub-tool is in force at a time. The Draw tool has a Pencil that lays colour and an Eraser that clears cells, and one of them acts on each stroke. A tool may also offer a set to choose from, such as the brush sizes the Draw tool paints with.

A tool's window is Sprites.Media.<MediaName>.Tool.<ToolName>.Window. Every other function for that tool, its pointer handler, its sub-tool selector, its brushes, lives in the same <ToolName> namespace, so a tool is one self-contained space.

// Sprites.Media.Sprite.Tool.Draw.js
Sprites = window.Sprites || {};
Sprites.Media = Sprites.Media || {};
Sprites.Media.Sprite = Sprites.Media.Sprite || {};
Sprites.Media.Sprite.Tool = Sprites.Media.Sprite.Tool || {};
Sprites.Media.Sprite.Tool.Draw = Sprites.Media.Sprite.Tool.Draw || {};

Sprites.Media.Sprite.Tool.Draw.Window = (subTool, radius, brushCss, paletteVisible) => {
  // the Pencil and Eraser selector, the brush sizes, and the colour swatch
};

General purpose windows

A general purpose window is available all the time. It sits apart from the tools, so the selected tool leaves it be. The animation frames, the layers, and the undo and redo history are general windows: they stay useful whatever tool is in force, and each opens and closes on its own. The palette and the info panel are general windows too.

Every general window, and the master Tool window, lives in Sprites.Media.<MediaName>.Window. So the whole set of always-available windows reads from one place.

The Tool window

The Tool window is the master window, and it is a general window itself. It holds two sections. The tools section, at the top, is the selector: a set of buttons where one is the selected tool. The windows section, below it, has one button for each general window, and each button opens or closes that window on its own. So the Tool window is where a tool is chosen and where the general windows are turned on and off.

It is Sprites.Media.<MediaName>.Window.Tools. Its two sections are small builders in the same Window namespace, so the window composes them. The windows argument is an object of visibility values, one per general window, that the windows section toggles and each window reads.