ElementView

ElementView

ElementViews manage the view side for Elements. An ElementView is created when a virtual DOM Element is created. An ElementView in turn creates the corresponding native DOM element and inserts it into the actual DOM display scene.

When a subclass of Element is created, such as IFrameElement, the corresponding view class is instantiated, and in turn the appropriate native DOM element.

Members

# model :Element

The corresponding model (Element).

Type:

# dom :HTMLElement

The actual DOM element created for Element. Attaching a native event listener (e.g., calling this.dom.addEventListener("click", (evt) => this.method(evt))) is reasonable if the listener needs the actual event object, or setAttributes of the element.

Type:
  • HTMLElement

Methods

# addEventListener(eventType, methodName, useCaptureopt)

Add an event listener to the ElementView. A typical case is to call addEventListener() from an expander for the ElementView. In that case, the method is looked up from the calling expander.

Parameters:
Name Type Attributes Description
eventType string

the DOM event type
methodName string

the name of the handler in the calling expander
useCapture boolean <optional>

indicating if the event will be dispatched to elements below
Example 
this.addEventListener("click", "onClick"); // onClick is the name of a method

# removeEventListener(eventType, methodName)

Remove an event listener from the ElementView.

Parameters:
Name Type Description
eventType string

the DOM event type
methodName string

the name of the handler in the calling expander
Example 
this.removeEventListener("click", "onClick");

# querySelector(query) → {ElementView|null}

Look up an ElementView that matches the specified query. This is similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector but, as of writing, it only works with the #id form.

Parameters:
Name Type Description
query string

# followed by a domId
Returns:

the ElementView found, or null.

Type
ElementView | null
Example 
let elem = this.querySelector("#myElement");

# cookEvent(evt) → {Object}

Create an object that contains most of the properties of the supplied raw DOM event. The returned object is serializable and can be sent to the model.

Parameters:
Name Type Description
evt DOMEvent

a DOM event that may be delivered to the element via a listener added to the native DOM element
Returns:

an object that contains important values of the event.

Type
Object
Example 
let cookedEvent = this.cookEvent(aDOMEvent);

# call(expanderName, methodName) → {any}

Invoke a method in the receiver's specified expander, with arguments. An error is thrown if the receiver has no expander of that name, or the expander does not include that method. There is no need to use this form if the method is invoked from the same expander. In some cases, however, it is desirable to be able to invoke a method from a different expander, or a method of a different receiver.

Parameters:
Name Type Description
expanderName string

name of the expander
methodName string

name of the method
...arguments any

arguments for the method
Returns:

the return value from the method

Type
any
Example 
other.call("OtherExpander", "myMethod", 1, 2, 3);

# setPointerCapture(pointerId)

setPointerCapture() and releasePointerCapture() call the pointer event capture features of the native DOM (see Pointer Events). Another method, releaseAllPointerCapture(), is a convenience method to make sure that all captured pointers are released. As Croquet is a multi-user environment, remote users' actions may break some assumptions about the capturing DOM element. This method tries to mitigate issues around capturing.

Parameters:
Name Type Description
pointerId number

the ID of the pointer

# releasePointerCapture(pointerId)

Parameters:
Name Type Description
pointerId number

the ID of the pointer

# releaseAllPointerCapture()

releaseAllPointerCapture() is a convenience method to make sure that all captured pointers are released. As Croquet is a multi-user environment, remote users' actions may break some assumptions about the capturing DOM element. This method tries to mitigate issues around capturing.