Create a DOMSpace which represents a Space for DOM elements
Specify an element by its "id" attribute as string, or by the element object itself. Use css to customize its appearance if needed.
an optional callback function(boundingBox, spaceElement)
to be called when canvas is appended and ready. Alternatively, a "ready" event will also be fired from the element when it's appended, which can be traced with spaceInstance.canvas.addEventListener("ready")
Set whether the canvas element should resize when its container is resized.
Set whether the canvas element should resize when its container is resized.
a boolean value indicating if auto size is set
Set a background color on the container element
Set a background color on the container element
background color as hex or rgba string
Get the size of this bounding box as a Pt
Get this DOM element
Get height of canvas
The bounding box of the canvas
Get a boolean to indicate whether the animation is playing
Get this space's bounding box
Get the parent DOM element that contains this DOM element
Get the mouse or touch pointer that stores the last action
A property to indicate if the Space is ready
Get the size of this bounding box as a Pt
Get width of canvas
Go through all the players
and call its action
callback function
an UIPointerActions constant or string: "up", "down", "move", "drag", "drop", "over", and "out"
mouse or touch event
MouseDown handler
MouseMove handler
MouseOut handler
MouseOver handler
MouseUp handler
Handle callbacks after element is mounted in DOM
Window resize handling
TouchMove handler
Add an IPlayer to this space. An IPlayer can define the following callback functions:
animate( time, ftime, space )
start(bound, space)
resize( size, event )
action( type, x, y, event )
Subclasses of Space may define other callback functions.Bind event listener in canvas element. You can also use bindMouse
or bindTouch
to bind mouse or touch events conveniently.
an event string such as "mousedown"
callback function for this event
A convenient method to bind (or unbind) all mouse events in canvas element. All "players" added to this space that implements an action
callback property will receive mouse event callbacks. The types of mouse actions are defined by UIPointerActions constants: "up", "down", "move", "drag", "drop", "over", and "out". See Space
's add()
function for more details.
a boolean value to bind mouse events if set to true
. If false
, all mouse events will be unbound. Default is true.
A convenient method to bind (or unbind) all touch events in canvas element. All "players" added to this space that implements an action
callback property will receive mouse event callbacks. The types of mouse actions are: "up", "down", "move", "drag", "drop", "over", and "out".
a boolean value to bind touch events if set to true
. If false
, all mouse events will be unbound. Default is true.
Clear the element's contents, and ptionally set a new backgrounc color. Overrides Space's clear
function.
Optionally specify a custom background color in hex or rgba string, or "transparent". If not defined, it will use its bgcolor
property as background color to clear the canvas.
Not implemented. See SVGSpace and HTMLSpace for implementation
Pause the animation
a boolean value to set if this function call should be a toggle (between pause and resume)
Main play loop. This implements window.requestAnimationFrame and calls it recursively.
Override this play()
function to implemenet your own animation loop.
current time
Main animate function. This calls all the items to perform
current time
Play animation loop, and then stop after duration
time has passed.
a value in millisecond to specify a time period to play before stopping, or -1
to play forever
Set whether the rendering should be repainted on each frame
a boolean value to set whether to repaint each frame
Remove a player from this Space
an IPlayer that has an animateID
property
Remove all players from this Space
Custom rendering
rendering context
Replay the animation after stop()
. This resets the end-time counter.
You may also use pause()
and resume()
for temporary pause.
This overrides Space's resize
function. It's used as a callback function for window's resize event and not usually called directly. You can keep track of resize events with resize: (bound ,evt)
callback in your player objects (See Space
's add()
function).
a Bound object to resize to
Optionally pass a resize event
Resume the pause animation
Set up various options for DOMSpace. The opt
parameter is an object with the following fields. This is usually set during instantiation, eg new DOMSpace(...).setup( { opt } )
an object with optional settings, as follows.
a hex or rgba string to set initial background color of the canvas, or use false
or "transparent" to set a transparent background. You may also change it later with clear()
a boolean to set whether <canvas>
size should auto resize to match its container's size. You can also set it manually with autoSize()
Specify when the animation should stop: immediately, after a time period, or never stops.
a value in millisecond to specify a time period to play before stopping, or -1
to play forever, or 0
to end immediately. Default is 0 which will stop the animation immediately.
Add or update a style definition, and optionally update that style in the Element
style name
style value
a boolean to update the element's style immediately if set to true
. Default is false
.
Add of update a list of style definitions, and optionally update those styles in the Element
a key-value objects of style definitions
a boolean to update the element's style immediately if set to true
. Default is false
.
this
A convenient method to convert the touch points in a touch event to an array of Pt
.
a touch event which contains touches, changedTouches, and targetTouches list
a string to select a touches list: "touches", "changedTouches", or "targetTouches". Default is "touches"
an array of Pt, whose origin position (0,0) is offset to the top-left of this space
Unbind a callback from the event listener
an event string such as "mousedown"
callback function to unbind
Helper function to create a DOM element
element tag name
element id attribute
Optional, if specified, the created element will be appended to this element
A static helper function to compose an inline style string from a object of styles
an object with key-value pairs
A static helper function to add or update Element attributes
Element to update
an object with key-value pairs
this DOM element
Generated using TypeDoc
A Space for DOM elements