Skip to content

DOM

Overview

Displays a DOM element directly in a node, so that it can be positioned/transformed properly, and bounds are handled properly in Scenery.

@author Jonathan Olson <jonathan.olson@colorado.edu> /* global JQuery */

Class DOM

import { DOM } from 'scenerystack/scenery';

Constructor

new DOM( element : Element | JQuery, options? : DOMOptions )

Instance Methods

calculateDOMBounds() : Bounds2

(protected)

Computes the bounds of our current DOM element (using jQuery, as replacing this with other things seems a bit bug-prone and has caused issues in the past).

The dom element needs to be attached to the DOM tree in order for this to work.

Alternative getBoundingClientRect explored, but did not seem sufficient (possibly due to CSS transforms)?

invalidateDOM()

Triggers recomputation of our DOM element's bounds.

This should be called after the DOM element's bounds may have changed, to properly update the bounding box in Scenery.

isPainted() : boolean

Whether this Node itself is painted (displays something itself).

setElement( element : HTMLElement ) : this

Changes the DOM element of this DOM node to another element.

getElement() : HTMLElement

Returns the DOM element being displayed by this DOM node.

setPreventTransform( preventTransform : boolean )

Sets the value of the preventTransform flag.

When the preventTransform flag is set to true, Scenery will not reposition (CSS transform) the DOM element, but instead it will be at the upper-left (0,0) of the Scenery Display. The client will be responsible for sizing or positioning this element instead.

isTransformPrevented() : boolean

Returns the value of the preventTransform flag.

See the setPreventTransform documentation for more information on the flag.

setAllowInput( allowInput : boolean )

Sets whether input is allowed for the DOM element. If false, we will disable input events with pointerEvents and the usual preventDefault(). If true, we'll set a flag internally so that we don't preventDefault() on input events.

isInputAllowed() : boolean

mutate( options? : DOMOptions ) : this

Type DOMOptions

import type { DOMOptions } from 'scenerystack/scenery';
  • element?: Element
    Sets the element, see setElement() for more documentation
  • preventTransform?: boolean
    Sets whether Scenery is allowed to transform the element. see setPreventTransform() for docs
  • allowInput?: boolean
    Whether we allow input to be received by the DOM element
  • & NodeOptions

Source Code

See the source for DOM.ts in the scenery repository.