[Experimental] HTMLSpace is a subclass of DOMSpace that works with HTML elements. Note that this is currently experimental and may change in future. See a demo here.
Create a DOMSpace for HTML 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 element 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.element.addEventListener("ready")
new DOMSpace( "#myElementID" )
DOMSpace.__constructor in src/Dom.tsSet whether the canvas element should resize when its container is resized.
DOMSpace.autoResize in src/Dom.tsa boolean value indicating if auto size is set
Set a background color on the container element.
DOMSpace.background in src/Dom.tsbackground color as hex or rgba string
The center of this space's bounding box.
Space.center in src/Space.tsSet a custom rendering function fn(graphics_context, canvas_space) if needed.
Space.customRendering in src/Space.tsThe height of this space's bounding box.
Space.height in src/Space.tsThe inner bounding box of the space, excluding its positions.
Space.innerBound in src/Space.tsIndicate whether the animation is playing.
Space.isPlaying in src/Space.tsThe outer bounding box which includes its positions.
Space.outerBound in src/Space.tsGet the parent DOM element that contains this DOM element.
DOMSpace.parent in src/Dom.tsGet the mouse or touch pointer that stores the last action.
MultiTouchSpace.pointer in src/Space.tsA property to indicate if the Space is ready.
DOMSpace.ready in src/Dom.tsThe width of this space's bounding box.
Space.width in src/Space.tsGet a new HTMLForm which provides visualization functions in html elements.
HTMLForm
DOMSpace.getForm in src/Dom.tsA static function to add a DOM element inside a node. Usually you don't need to use this directly. See methods in HTMLForm instead.
the parent element, or null to use current <svg> as parent.
a string of element name, such as rect or circle
id attribute of the new element
add a class based on the id (from char 0 to index of "-"). Default is true.
Remove an item from this space.
Space.remove in src/Dom.tsAdd an IPlayer object or a AnimateCallbackFn callback function to handle events in this Space. An IPlayer is an object with the following callback functions:
animate: fn( time, ftime, space )start: fn(bound, space)resize: fn( size, event )action: fn( type, x, y, event )
Subclasses of Space may define other callback functions.Space.add in src/Space.tsBind event listener in canvas element. You can also use MultiTouchSpace.bindMouse or MultiTouchSpace.bindTouch to bind mouse or touch events conveniently.
an event string such as "mousedown"
callback function for this event
options for addEventListener.
If needed, this is an optional parameter to set another event target that's not the canvas element itself. See Technical Notes guide for use cases.
MultiTouchSpace.bindCanvas in src/Space.tsMultiTouchSpace.bindDoc in src/Space.tsMultiTouchSpace.bindKeyboard in src/Space.tsA convenient method to bind (or unbind) all mouse events in canvas element.
All IPlayer objects added to this space that implement 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".
a boolean value to bind mouse events if set to true. If false, all mouse events will be unbound. Default is true.
If needed, this is an optional parameter to set another event target that's not the canvas element itself. See Technical Notes guide for use cases.
MultiTouchSpace.bindMouse in src/Space.tsA convenient method to bind (or unbind) all touch events in canvas element.
All IPlayer objects added to this space that implement an action callback property will receive touch event callbacks.
The types of mouse actions are defined by UIPointerActions constants: "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.
a boolean value to set passive mode, ie, it won't block scrolling. Default is false.
If needed, this is an optional parameter to set another event target that's not the canvas element itself. See Technical Notes guide for use cases.
MultiTouchSpace.bindTouch in src/Space.tsClear the element's contents, and optionally set a new background color. This 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.
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
DOMSpace.createElement in src/Dom.tsDispose of browser resources held by this space and remove all players. Call this before unmounting the DOM.
DOMSpace.dispose in src/Dom.tsA static helper function to compose an inline style string from a object of styles.
an object with key-value pairs
DOMSpace.getInlineStyles( {width: "100px", "font-size": "10px"} )
DOMSpace.getInlineStyles in src/Dom.tsSet a minimum frame time
at least this amount of miniseconds must have elapsed before frame advances
Space.minFrameTime in src/Space.tsPause the animation.
a boolean value to set if this function call should be a toggle (between pause and resume)
Space.pause in src/Space.tsMain play loop. This implements window.requestAnimationFrame and calls it recursively.
You may override this play() function to implement your own animation loop.
current time
Space.play in src/Space.tsMain animate function. This calls all the items to perform.
current time
Space.playItems in src/Space.tsPlay animation loop once. Optionally set a duration time to play for that specific duration.
a value in millisecond to specify a time period to play before stopping, or -1 to play forever
Space.playOnce in src/Space.tsSet whether the rendering should be repainted on each frame.
a boolean value to set whether to repaint each frame
Space.refresh in src/Space.tsCustom rendering.
rendering context
Space.render in src/Space.tsReplay the animation after Space.stop. This resets the end-time counter.
You may also use Space.pause and resume for temporary pause.
Space.replay in src/Space.tsThis 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.add function).
a Bound object to resize to
Optionally pass a resize event
A static helper function to add or update Element attributes.
Element to update
an object with key-value pairs
this DOM element
DOMSpace.setAttr in src/Dom.tsSet up various options for DOMSpace. This is usually set during instantiation, eg new DOMSpace(...).setup( {opt} ).
an object with these optional properties: bgcolor is a hex or rgba string to set initial background color of the canvas, or use false or "transparent" to set a transparent background; resize a boolean to set whether <canvas> size should auto resize to match its container's size, which can also be set using autoSize().
space.setup({ bgcolor: "#f00", resize: true })
DOMSpace.setup in src/Dom.tsSpecify 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.
Space.stop in src/Space.tsAdd 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.
DOMSpace.style in src/Dom.tsAdd 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
DOMSpace.styles in src/Dom.tsA convenient method to convert the touch points in a touch event to an array of Pts.
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
MultiTouchSpace.touchesToPoints in src/Space.tsUnbind a callback from the event listener.
an event string such as "mousedown"
callback function to unbind
options for removeEventListener. This should match the options set in bindCanvas.
If customTarget is set in bindCanvas, you'll need to pass the same instance here to unbind
MultiTouchSpace.unbindCanvas in src/Space.tsMultiTouchSpace.unbindDoc in src/Space.ts