Scrawl-canvas v8 - Modules test 005

Proof of concept: accessible GUI-based simple canvas editor

Instructions for using the editor appear below the canvas

To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.

This is where the dashboard controls will go

Canvas

The canvas element is resizable, by dragging its bottom-right corner
The entitys on the canvas are draggable
To move an (unselected) entity around the canvas using the keyboard:

TAB or ALT + TAB to focus on the canvas
ARROWS to navigate between entitys - only one entity can be highlighted at any time
SHIFT + ARROWS to move the highlighted entity

Minimap

Use ALT + BACKSPACE to show/hide the minimap
The minimap is draggable
ALT + SHIFT + ARROWS also moves the minimap (when the canvas element is focussed)
Move around the canvas by dragging the red rectangle around the minimap
ALT + ARROWS will also move the red rectangle around the minimap
The red rectangle should adapt its dimensions when resizing the canvas element

Entity selection

Use SHIFT + CLICK to select an entity
SHIFT + CLICK on a selected entity will unselect it
On the keyboard, RETURN will select/unselect the currently highlighted entity
BACKSPACE will clear all the currently selected entitys
Multiple entitys can be selected, for batch editing

Editing selected entitys

When one or more entitys are selected, the batch edit GUI will display
The GUI allows the user to move, scale and rotate the selected entitys in various ways.
It consists of three circles: a central MOVE pin and two orbiting pins labelled ROLL and SCALE

Moving

The selected group of entitys can be moved by drag-dropping the MOVE pin or, using the keyboard, by pressing the W (up), A (left), S (down) and D (right) keys
To change its position of the MOVE pin without moving the selected entitys alongside it, hold down the SHIFT key while performing the drag-drop action; this can also be done on the keyboard by holding down the shift key while pressing the WASD keys
By default the move keys will shift the pin/group by 1px in the desired direction; this delta value can be changed at any time using the Q key to bring up an alert form

Scaling

To scale the selected group, drag-drop the SCALE pin; scaling is done using the MOVE pin as the reference point for the action
The same operation can be performed using the keyboard - N to scale down, M to scale up
To scale the entitys without scaling the selected group, hold down the SHIFT key while performing the drag-drop action or pressing the scale keys
By default the scale keys will scale the group/entitys by a factor of 0.01 in either direction; this delta value can be changed at any time using the B key to bring up an alert form

Rotating

To rotate the selected group, drag-drop the ROLL pin; rotation is done using the MOVE pin as the reference point for the action
The same operation can be performed using the keyboard - K to rotate clockwise, J to rotate anti-clockwise
To rotate the entitys in-place, hold down the SHIFT key while performing the drag-drop action or pressing the rotate keys
By default the rotate keys will rotate the group/entitys by 0.2 degrees in either direction; this delta value can be changed at any time using the H key to bring up an alert form

Editing other entity attributes

Various other entity properties can be edited using the dashboard panel, which appears when entitys are selected
For a single selected entity, the dashboard panel will include a comprehensive list of attributes; these attributes vary by the type of entity selected
If more than one entity has been selected, the dashboard panel will display a much more limited set of common attributes for editing

Non-QWERTY keyboards

The keyboard shortcuts can be updated for non-western and non-QWERTY keyboards using

Entity copy, paste and delete

The currently selected entitys can be copied using the normal CTRL + C keyboard combination
They can also be deleted using the CTRL + X keyboard combination
To paste a copied selection onto the canvas, or restore the deleted selection, use the CTRL + V keyboard combination

Test purpose

This is more of a proof-of-concept than a demo test. It does give the Keyboard object a good work-out. But the demo is buggy and would need some serious work before being put into a production-ready product.

Note the animation is slow, due to some expensive filters being applied to a big canvas. Work needs to be done to make the system performant.

Touch test: the entitys should be draggable, preventing scroll movement; when the canvas itself is dragged the screen should scroll as expected.

Annotated code