DOM Component

A component which renders entities as DOM nodes, specifically <div>s.



Back to top


The DOM element used to represent the entity.

Back to top


Avoids using of CSS 3D Transform for positioning when true. Default value is false.

Back to top



SetStyle [propertyName = {string}]
for each style that is set
public css(String property, String value)

CSS property to modify


Value to give the CSS property

public css(Object map)

Object where the key is the CSS property and the value is CSS value

Apply CSS styles to the element.

Can pass an object where the key is the style property and the value is style value.

For setting one style, simply pass the style as the first argument and the value as the second.

The notation can be CSS or JS (e.g. border-radius or borderRadius).

To return a value, pass the property.

Note: For entities with "Text" component, some css properties are controlled by separate functions .textFont(), .textAlign() and .textColor(). When possible, prefer text-specific methods, since they will work for non-DOM text. See the Text component for details.


this.css({'border': '1px solid black', 'text-decoration': 'line-through'});
this.css("textDecoration", "line-through");
this.css("text-Decoration"); //returns line-through
Back to top



Draw [Data = { style:String, type:"DOM", co}]
when the entity is ready to be drawn to the stage
public this .DOM(HTMLElement elem)

HTML element that will replace the dynamically created one

Pass a DOM element to use rather than one created. Will set ._element to this value. Removes the old element.

Will reattach the entity to the current draw layer

Back to top


public this .draw(void)

Updates the CSS properties of the node to draw on the stage.

Back to top


public this .getDomId()

Get the Id of the DOM element used to represent the entity.