DOM Component

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

Properties

Methods

Back to top

._element

The DOM element used to represent the entity.

Back to top

.avoidCss3dTransforms

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

Back to top

.css()

Events

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

CSS property to modify

value

Value to give the CSS property

public css(Object map)
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.

Example

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

.DOM()

Events

Draw [Data = { style:String, type:"DOM", co}]
when the entity is ready to be drawn to the stage
public this .DOM(HTMLElement elem)
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

.draw()

public this .draw(void)

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

Back to top

.getDomId()

public this .getDomId()

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