Class: Canvas

Canvas(id, active)

Represents a HTML object with methods to manipulate what's drawn on screen Instance variables: - canvas: The \ object to draw to - draw_stack: The order in which to draw objects - focus: The currently selected object - active: Whether the Canvas is currently active - toolbar: The toolbar to pull from - attr: The attribute menu to pull from and write to

Constructor

new Canvas(id, active)

Initializes the Canvas object.
Parameters:
Name Type Description
id string The HTML identifier for what \ element this Canvas object is attached to
active boolean Whether this \ is active at startup
Source:

Classes

Canvas

Methods

attachAttributeMenu(attr)

Attaches the selected attribute menu to this Canvas object
Parameters:
Name Type Description
attr AttributeMenu Attribute menu to attach
Source:

attachToolbar(toolbar)

Attaches the selected toolbar to this Canvas object
Parameters:
Name Type Description
toolbar Toolbar Toolbar to attach
Source:

exportJSON() → {Map.<string, Object>}

Exports this Canvas object into JSON format, giving a description thorough enough to reconstruct it at a later time
Source:
Returns:
JSON formatted dictionary
Type
Map.<string, Object>

importJSON(description)

Reconstructs this Canvas object from a previous JSON export
Parameters:
Name Type Description
description Map.<string, Object> JSON formatted dictionary
Source:

onAnyChange()

Triggers on any change to the card. Updates the name in the top bar to reflect changes to the card.
Source:

onClickElsewhere(e)

Handles clicks that aren't on the \ element. If this Canvas isn't active or we clicked on the \, return and let onMouseDown handle the evetn. If the click was on over the attribute selector menu, only disable keyboard shortcuts (we don't want to click off the currently selected element but want the user to interact with the menu smoothly) Otherwise, deselect the currently selected element
Parameters:
Name Type Description
e MouseEvent The click event
Source:

onDrag(e)

Handle moving the cursor after a mousedown event, either to drag elements around or to resize them
Parameters:
Name Type Description
e MouseEvent The drag event
Source:

onKeyDown(e)

Handles keyboard presses by the user, delegating the task handling to their respective functions.
Parameters:
Name Type Description
e KeyboardEvent The keypress event
Source:

onKeyUp(e)

Handles a user letting go of a key. Only used for tracking whether shift is held for now.
Parameters:
Name Type Description
e KeyboardEvent The keypress event
Source:

onMouseDown(e)

Handles clicks on the \ element. If the current tool is 'selector', call selector() and let it handle it. Otherwise, create a new element and be ready to modify it (in the case of squares or circles) or to simply select it and go to the selector tool
Parameters:
Name Type Description
e MouseEvent The mousedown event
Source:

onMouseUp(e)

Handle letting go of a mouse press
Parameters:
Name Type Description
e MouseEvent The mouseup event
Source:

renderCanvas()

Renders the canvas, going from the bottom to the top of the draw stack. Each object has its own drawing functionality, so hand it off to them. Finally draw the focus box of the currently selected item.
Source:

selector(e)

Handles a mousedown event when the currently selected tool is 'select'
Parameters:
Name Type Description
e MouseEvent The mousedown event
Source:

setActive(active)

Makes this Canvas object either active or inactive, resetting all relevant listeners
Parameters:
Name Type Description
active boolean Whether to be active or not
Source:

triggerDeleteKey()

Handle a delete key trigger by the user. Deletes the currently selected object.
Source:

triggerDownKey(meta, shift)

Handles a down key trigger by the user. Moves objects down when the meta button is not held. Moves objects down in the render stack when the meta button is held, either by one or to the bottom depending on whether the shift button is held.
Parameters:
Name Type Description
meta boolean Whether the meta button is held
shift boolean Whether the shift button is held
Source:

triggerLeftKey(meta, shift)

Handles a left key trigger by the user. Currently, only moves objects left when keyboard shortcuts are enabled.
Parameters:
Name Type Description
meta boolean Whether the meta button is held
shift boolean Whether the shift button is held
Source:

triggerRightKey(meta, shift)

Handles a right key trigger by the user. Currently, only moves objects right when keyboard shortcuts are enabled.
Parameters:
Name Type Description
meta boolean Whether the meta button is held
shift boolean Whether the shift button is held
Source:

triggerUpKey(meta, shift)

Handles a up key trigger by the user. Moves objects up when the meta button is not held. Moves objects up in the render stack when the meta button is held, either by one or to the top depending on whether the shift button is held.
Parameters:
Name Type Description
meta boolean Whether the meta button is held
shift boolean Whether the shift button is held
Source: