Scrawl-canvas v8 - Modules test 005

Accessible GUI-based simple canvas editor

Instructions for using the editor appear below the canvas

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 this alert form

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