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.