@vertexvis/viewer 0.13.2-canary.9 → 0.14.0

package/dist/esm/vertex-scene-tree.entry.js

@@ -1,14 +1,15 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { h, F as Fragment, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-10c1495a.js';
-import { o as __rest } from './bundle.esm-8ceccb91.js';
-import { c as createCommonjsModule } from './_commonjsHelpers-9943807e.js';
-import { a as googleProtobuf, w as wrappers_pb, g as grpcWebClient_umd } from './grpc-web-client.umd-5982b7b0.js';
-import { p as parseConfig } from './config-fb7cd8ff.js';
-import { E as EventDispatcher } from './browser.esm-e72d80ad.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-a9fb8318.js';
+import { o as __rest } from './bundle.esm-ce2c7ad3.js';
+import { c as createCommonjsModule } from './_commonjsHelpers-11ca3be1.js';
+import { a as googleProtobuf, w as wrappers_pb, g as grpcWebClient_umd } from './grpc-web-client.umd-5409853c.js';
+import { p as parseConfig } from './config-7075833a.js';
+import { E as EventDispatcher } from './browser.esm-1ddb69c9.js';
 import { g as getSceneTreeContainsElement } from './dom-2111ed19.js';
-import './streamAttributes-d0b384b3.js';
+import './streamAttributes-72a92676.js';
+import './entities-ce81dd7f.js';
 
 window.requestIdleCallback =
     window.requestIdleCallback ||
@@ -4348,7 +4349,8 @@ proto.vertexvis.protobuf.scenetree.v1alpha1.FilterRequest.toObject = function(in
   var obj = {
     filter: googleProtobuf.Message.getFieldWithDefault(msg, 1, ""),
     fullTree: googleProtobuf.Message.getFieldWithDefault(msg, 2, false),
-    columnsKeysList: googleProtobuf.Message.getRepeatedField(msg, 3)
+    columnsKeysList: googleProtobuf.Message.getRepeatedField(msg, 3),
+    exactMatch: googleProtobuf.Message.getFieldWithDefault(msg, 4, false)
   };
 
   if (includeInstance) {
@@ -4397,6 +4399,10 @@ proto.vertexvis.protobuf.scenetree.v1alpha1.FilterRequest.deserializeBinaryFromR
       var value = /** @type {string} */ (reader.readString());
       msg.addColumnsKeys(value);
       break;
+    case 4:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setExactMatch(value);
+      break;
     default:
       reader.skipField();
       break;
@@ -4447,6 +4453,13 @@ proto.vertexvis.protobuf.scenetree.v1alpha1.FilterRequest.serializeBinaryToWrite
       f
     );
   }
+  f = message.getExactMatch();
+  if (f) {
+    writer.writeBool(
+      4,
+      f
+    );
+  }
 };
 
 
@@ -4511,6 +4524,23 @@ proto.vertexvis.protobuf.scenetree.v1alpha1.FilterRequest.prototype.clearColumns
 };
 
 
+/**
+ * optional bool exact_match = 4;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.vertexvis.protobuf.scenetree.v1alpha1.FilterRequest.prototype.getExactMatch = function() {
+  return /** @type {boolean} */ (googleProtobuf.Message.getFieldWithDefault(this, 4, false));
+};
+
+
+/** @param {boolean} value */
+proto.vertexvis.protobuf.scenetree.v1alpha1.FilterRequest.prototype.setExactMatch = function(value) {
+  googleProtobuf.Message.setProto3BooleanField(this, 4, value);
+};
+
+
 
 /**
  * Generated by JsPbCodeGenerator.
@@ -4558,7 +4588,7 @@ proto.vertexvis.protobuf.scenetree.v1alpha1.FilterResponse.prototype.toObject =
  */
 proto.vertexvis.protobuf.scenetree.v1alpha1.FilterResponse.toObject = function(includeInstance, msg) {
   var obj = {
-
+    numberOfResults: googleProtobuf.Message.getFieldWithDefault(msg, 1, 0)
   };
 
   if (includeInstance) {
@@ -4595,6 +4625,10 @@ proto.vertexvis.protobuf.scenetree.v1alpha1.FilterResponse.deserializeBinaryFrom
     }
     var field = reader.getFieldNumber();
     switch (field) {
+    case 1:
+      var value = /** @type {number} */ (reader.readUint32());
+      msg.setNumberOfResults(value);
+      break;
     default:
       reader.skipField();
       break;
@@ -4623,6 +4657,29 @@ proto.vertexvis.protobuf.scenetree.v1alpha1.FilterResponse.prototype.serializeBi
  * @suppress {unusedLocalVariables} f is only used for nested messages
  */
 proto.vertexvis.protobuf.scenetree.v1alpha1.FilterResponse.serializeBinaryToWriter = function(message, writer) {
+  var f = undefined;
+  f = message.getNumberOfResults();
+  if (f !== 0) {
+    writer.writeUint32(
+      1,
+      f
+    );
+  }
+};
+
+
+/**
+ * optional uint32 number_of_results = 1;
+ * @return {number}
+ */
+proto.vertexvis.protobuf.scenetree.v1alpha1.FilterResponse.prototype.getNumberOfResults = function() {
+  return /** @type {number} */ (googleProtobuf.Message.getFieldWithDefault(this, 1, 0));
+};
+
+
+/** @param {number} value */
+proto.vertexvis.protobuf.scenetree.v1alpha1.FilterResponse.prototype.setNumberOfResults = function(value) {
+  googleProtobuf.Message.setProto3IntField(this, 1, value);
 };
 
 
@@ -6495,6 +6552,8 @@ var SceneTreeErrorCode;
 (function (SceneTreeErrorCode) {
   SceneTreeErrorCode[SceneTreeErrorCode["UNKNOWN"] = 0] = "UNKNOWN";
   SceneTreeErrorCode[SceneTreeErrorCode["SCENE_TREE_DISABLED"] = 1] = "SCENE_TREE_DISABLED";
+  SceneTreeErrorCode[SceneTreeErrorCode["MISSING_VIEWER"] = 2] = "MISSING_VIEWER";
+  SceneTreeErrorCode[SceneTreeErrorCode["DISCONNECTED"] = 3] = "DISCONNECTED";
 })(SceneTreeErrorCode || (SceneTreeErrorCode = {}));
 class SceneTreeErrorDetails {
   constructor(code, link) {
@@ -6509,6 +6568,10 @@ function getSceneTreeErrorMessage(code) {
       return 'An unknown error occurred.';
     case SceneTreeErrorCode.SCENE_TREE_DISABLED:
       return 'The tree for this scene is not enabled. Enable the tree for this scene to interact with the tree.';
+    case SceneTreeErrorCode.MISSING_VIEWER:
+      return 'Could not find reference to the viewer';
+    case SceneTreeErrorCode.DISCONNECTED:
+      return 'Disconnected from server.';
   }
 }
 
@@ -6585,6 +6648,15 @@ class SceneTreeController {
   get isConnected() {
     return this.state.connection.type === 'connected';
   }
+  /**
+   * Registers an event listener that will be invoked when the state changes
+   *
+   * @param listener The listener to add.
+   * @returns A disposable that can be used to remove the listener.
+   */
+  stateChanged(listener) {
+    return this.onStateChange.on(listener);
+  }
   async connect(jwtProvider) {
     const { connection } = this.state;
     const jwt = jwtProvider();
@@ -6842,16 +6914,19 @@ class SceneTreeController {
    * @param options The options to apply to the filter.
    */
   async filter(term, options = {}) {
-    await this.ifConnectionHasJwt((jwt) => {
-      return this.requestUnary(jwt, (metadata, handler) => {
+    return this.ifConnectionHasJwt(async (jwt) => {
+      const res = await this.requestUnary(jwt, (metadata, handler) => {
         var _a;
         const req = new scene_tree_api_pb.FilterRequest();
         req.setFilter(term);
-        req.setFullTree(((_a = options.includeCollapsed) !== null && _a !== void 0 ? _a : true) === true);
+        req.setFullTree((_a = options.includeCollapsed) !== null && _a !== void 0 ? _a : true);
+        req.setExactMatch(!!options.exactMatch);
         if (options.columns)
           req.setColumnsKeysList(options.columns);
         this.client.filter(req, metadata, handler);
       });
+      const { numberOfResults } = res.toObject();
+      this.updateState(Object.assign(Object.assign({}, this.state), { totalFilteredRows: numberOfResults }));
     });
   }
   /**
@@ -7018,7 +7093,7 @@ class SceneTreeController {
         const end = this.state.rows.slice(start.length + fetchedRows.length, totalRows);
         const fill = new Array(Math.max(0, totalRows - start.length - fetchedRows.length - end.length));
         const rows = [...start, ...fetchedRows, ...end, ...fill];
-        this.updateState(Object.assign(Object.assign({}, this.state), { totalRows, rows }));
+        this.updateState(Object.assign(Object.assign({}, this.state), { totalRows: totalRows, rows: rows }));
       }
     }
     catch (e) {
@@ -7166,6 +7241,17 @@ async function selectRangeInSceneTree(viewer, start, end, { material, append = t
   ])
     .execute();
 }
+async function selectFilterResults(viewer, filter, keys, exactMatch, { material = undefined, append = false }) {
+  const scene = await viewer.scene();
+  return scene
+    .items((op) => [
+    ...(append ? [] : [op.where((q) => q.all()).deselect()]),
+    op
+      .where((q) => q.withMetadata(filter, keys, exactMatch))
+      .select(material),
+  ])
+    .execute();
+}
 async function deselectItem(viewer, id) {
   const scene = await viewer.scene();
   return scene
@@ -7199,10 +7285,13 @@ let SceneTree = class {
      */
     this.configEnv = 'platprod';
     /**
-     * Temporary flag to indicate whether metadata should be used when filtering
-     * as opposed to just the name of the item.
+     * Indicates whether the metadata search should use an exact match.
      */
-    this.filterOnMetadata = false;
+    this.metadataSearchExactMatch = false;
+    /**
+     * A list of the metadata keys that a scene tree search should be performed on.
+     */
+    this.metadataSearchKeys = [];
     /**
      * A list of part metadata keys that will be made available to each row. This
      * metadata can be used for data binding inside the scene tree's template.
@@ -7453,7 +7542,7 @@ let SceneTree = class {
   async getRowForEvent(event) {
     const { clientY, target } = event;
     if (target != null &&
-      this.connectionErrorDetails == null &&
+      this.errorDetails == null &&
       getSceneTreeContainsElement(this.el, target) &&
       isSceneTreeTableCellElement(target)) {
       return this.getRowAtClientY(clientY);
@@ -7488,6 +7577,23 @@ let SceneTree = class {
     var _a;
     return (_a = this.controller) === null || _a === void 0 ? void 0 : _a.filter(term, options);
   }
+  /**
+   * Performs an async request that will select the filtered items in the tree
+   * that match the given term.
+   *
+   * @param term The filter term.
+   * @returns A promise that completes when the request has completed.
+   */
+  async selectFilteredItems(term) {
+    if (this.viewer != null) {
+      const columnsToSearch = this.metadataSearchKeys.length > 0
+        ? this.metadataSearchKeys
+        : this.metadataKeys;
+      await selectFilterResults(this.viewer, term, columnsToSearch, this.metadataSearchExactMatch, {
+        append: false,
+      });
+    }
+  }
   /**
    * Fetches the metadata keys that are available to the scene tree. Metadata
    * keys can be assigned to the scene tree using the `metadataKeys` property.
@@ -7511,9 +7617,6 @@ let SceneTree = class {
    * @ignore
    */
   componentWillLoad() {
-    if (this.viewerSelector != null) {
-      this.viewer = document.querySelector(this.viewerSelector);
-    }
     if (this.controller == null) {
       const { sceneTreeHost } = this.getConfig().network;
       const client = new SceneTreeAPIClient_1(sceneTreeHost);
@@ -7528,6 +7631,7 @@ let SceneTree = class {
   async componentDidLoad() {
     var _a;
     this.ensureLayoutDefined();
+    this.updateLayoutElement();
     const layoutEl = this.getLayoutElement();
     const resizeObserver = new ResizeObserver(() => {
       this.invalidateRows();
@@ -7536,16 +7640,23 @@ let SceneTree = class {
     this.stateMap.resizeObserver = resizeObserver;
     this.stateMap.componentLoaded = true;
     (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setMetadataKeys(this.metadataKeys);
+    if (this.viewer == null) {
+      this.errorDetails = new SceneTreeErrorDetails(SceneTreeErrorCode.MISSING_VIEWER);
+    }
+  }
+  componentWillRender() {
+    // The controller can load data prior to the first render
+    // ensure that this renders any time the state changes.
+    this.updateLayoutElement();
   }
   /**
    * @ignore
    */
   render() {
-    return (h(Host, null, h("div", { class: "header" }, h("slot", { name: "header" }, h("vertex-scene-tree-toolbar", { class: "search-toolbar" }, h("vertex-scene-tree-search", null)))), this.connectionErrorDetails != null &&
-      this.renderError(this.connectionErrorDetails), this.connectionErrorDetails == null && (h("div", { class: "rows-scroll" }, h("slot", null))), h("div", { class: "footer" }, h("slot", { name: "footer" }))));
+    return (h(Host, null, h("div", { class: "header" }, h("slot", { name: "header" }, h("vertex-scene-tree-toolbar", { class: "search-toolbar" }, h("vertex-scene-tree-search", null)))), this.errorDetails != null && this.renderError(this.errorDetails), this.errorDetails == null && (h("div", { class: "rows-scroll" }, h("slot", null))), h("div", { class: "footer" }, h("slot", { name: "footer" }))));
   }
   renderError(details) {
-    if (details.code === SceneTreeErrorCode.UNKNOWN) {
+    if (details.code !== SceneTreeErrorCode.SCENE_TREE_DISABLED) {
       return (h(SceneTreeError, { details: details }, h("button", { class: "button button-secondary", onClick: () => this.retryConnectToViewer(), disabled: this.attemptingRetry }, "Retry")));
     }
     else {
@@ -7590,14 +7701,21 @@ let SceneTree = class {
   }
   retryConnectToViewer() {
     this.attemptingRetry = true;
+    this.errorDetails = undefined;
     this.connectToViewer();
   }
   connectToViewer() {
     var _a, _b;
     (_a = this.stateMap.viewerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+    if (this.viewer == null && this.viewerSelector != null) {
+      this.viewer = document.querySelector(this.viewerSelector);
+    }
     if (this.viewer != null) {
       this.stateMap.viewerDisposable = (_b = this.controller) === null || _b === void 0 ? void 0 : _b.connectToViewer(this.viewer);
     }
+    else {
+      this.attemptingRetry = false;
+    }
   }
   scheduleClearUnusedData() {
     if (this.stateMap.idleCallbackId != null) {
@@ -7623,13 +7741,15 @@ let SceneTree = class {
   handleControllerStateChange(state) {
     this.rows = state.rows;
     this.totalRows = state.totalRows;
-    this.updateLayoutElement();
     if (state.connection.type === 'failure') {
-      this.connectionErrorDetails = state.connection.details;
+      this.errorDetails = state.connection.details;
       this.connectionError.emit(state.connection.details);
     }
+    else if (state.connection.type === 'disconnected') {
+      this.errorDetails = new SceneTreeErrorDetails(SceneTreeErrorCode.DISCONNECTED);
+    }
     else {
-      this.connectionErrorDetails = undefined;
+      this.errorDetails = undefined;
     }
     if (state.connection.type === 'connected' ||
       state.connection.type === 'failure') {
@@ -7651,8 +7771,12 @@ let SceneTree = class {
     await op({ viewer: this.viewer, id: node.id.hex, node });
   }
   handleSearch(event) {
+    const columnsToSearch = this.metadataSearchKeys.length > 0
+      ? this.metadataSearchKeys
+      : this.metadataKeys;
     this.filterItems(event.detail, {
-      columns: this.filterOnMetadata ? this.metadataKeys : undefined,
+      columns: columnsToSearch,
+      exactMatch: this.metadataSearchExactMatch,
     });
   }
   getScrollToPosition(index, position) {
@@ -7700,6 +7824,9 @@ let SceneTree = class {
       layout.controller = this.controller;
       layout.rowData = this.rowData;
     }
+    else if (!this.stateMap.componentLoaded && this.totalRows > 0) {
+      console.debug('Scene tree has rows, but the component has not yet rendered');
+    }
   }
   getLayoutElement() {
     if (this.stateMap.layoutEl != null) {

package/dist/esm/vertex-viewer-button_3.entry.js

@@ -1,9 +1,9 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { r as registerInstance, h, H as Host } from './index-10c1495a.js';
-import { c as classnames } from './index-455380d0.js';
-import './_commonjsHelpers-9943807e.js';
+import { r as registerInstance, h, H as Host } from './index-a9fb8318.js';
+import { c as classnames } from './index-e841d91b.js';
+import './_commonjsHelpers-11ca3be1.js';
 
 const viewerButtonCss = ":host{cursor:pointer}.viewer-button{align-items:center;background:none;border:none;color:inherit;cursor:inherit;display:flex;padding:0}";
 

package/dist/esm/vertex-viewer-default-toolbar.entry.js

@@ -1,7 +1,7 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { r as registerInstance, h } from './index-10c1495a.js';
+import { r as registerInstance, h } from './index-a9fb8318.js';
 
 const viewerDefaultToolbarCss = ":host{--viewer-toolbar-group-gap:0.5rem;--viewer-toolbar-group-background:rgba(245, 245, 245, 0.95);--viewer-toolbar-group-border-radius:0.25rem;--viewer-toolbar-group-box-shadow:-1px 0 2px rgba(0, 0, 0, 0.12),\n    1px 0 2px rgba(0, 0, 0, 0.13);--viewer-toolbar-group-padding:0.25rem;--viewer-toolbar-group-item-gap:0.25rem}.group{background:var(--viewer-toolbar-group-background);border-radius:var(--viewer-toolbar-group-border-radius);box-shadow:var(--viewer-toolbar-group-box-shadow);padding:var(--viewer-toolbar-group-padding)}.group[data-direction='horizontal']:not(:first-child){margin-left:var(--viewer-toolbar-group-gap)}.group[data-direction='horizontal'] .group-item:not(:first-child){margin-left:var(--viewer-toolbar-group-item-gap)}.group[data-direction='vertical']:not(:first-child){margin-top:var(--viewer-toolbar-group-gap)}.group[data-direction='vertical'] .group-item:not(:first-child){margin-top:var(--viewer-toolbar-group-item-gap)}.btn{color:var(--neutral-800);padding:0.125rem;border-radius:0.125rem}.btn:hover{background:var(--neutral-300)}";
 

package/dist/esm/{vertex-viewer-dom-element_3.entry.js → vertex-viewer-dom-element_2.entry.js}

@@ -1,18 +1,20 @@
 /**!
  * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-10c1495a.js';
-import { v as vector3, t as quaternion, m as matrix4, u as euler } from './bundle.esm-8ceccb91.js';
-import './streamAttributes-d0b384b3.js';
-import { V as Viewport } from './viewport-5cc7b128.js';
-import './browser.esm-e72d80ad.js';
-import './_commonjsHelpers-9943807e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a9fb8318.js';
+import { v as vector3, q as quaternion, m as matrix4, u as euler } from './bundle.esm-ce2c7ad3.js';
+import { o as objects } from './browser.esm-1ddb69c9.js';
+import './streamAttributes-72a92676.js';
+import './entities-ce81dd7f.js';
+import { V as Viewport } from './viewport-e39e2eba.js';
+import './_commonjsHelpers-11ca3be1.js';
 
 const viewerDomElementCss = ":host{position:absolute;pointer-events:none}:host(:not([interactions-off]))>*{pointer-events:auto}";
 
 let ViewerDomElement = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.propertyChange = createEvent(this, "propertyChange", 7);
     /**
      * The local 3D position of where this element is located.
      */
@@ -28,7 +30,7 @@ let ViewerDomElement = class {
      */
     this.quaternion = quaternion.create();
     /**
-     * The local rotation of this element, as a JSON string. JSON
+     * The local quaternion rotation of this element, as a JSON string. JSON
      * representation can either be `[x, y, z, w]` or `{"x": 0, "y": 0, "z":
      * 0, "w": 1}`.
      */
@@ -131,183 +133,22 @@ let ViewerDomElement = class {
   /**
    * @ignore
    */
-  connectedCallback() {
-    this.syncProperties();
-  }
-  /**
-   * @ignore
-   */
-  componentShouldUpdate(newValue, oldValue, prop) {
-    return prop === 'occluded';
-  }
-  syncProperties() {
-    this.syncPosition();
-    this.syncRotation();
-    this.syncQuaternion();
-    this.syncScale();
-    this.syncMatrix();
-  }
-  syncPosition() {
-    this.position =
-      this.positionJson.length > 0
-        ? this.parseJson('positionJson', this.positionJson, vector3.fromJson)
-        : this.position;
-  }
-  syncRotation() {
-    this.rotation =
-      this.rotationJson != null && this.rotationJson.length > 0
-        ? this.parseJson('rotationJson', this.rotationJson, euler.fromJson)
-        : this.rotation;
-    this.syncQuaternionWithRotation();
-  }
-  syncQuaternionWithRotation() {
-    this.quaternion =
-      this.rotation != null
-        ? quaternion.fromEuler(this.rotation)
-        : this.quaternion;
-  }
-  syncQuaternion() {
-    this.quaternion =
-      this.quaternionJson.length > 0
-        ? this.parseJson('quaternionJson', this.quaternionJson, quaternion.fromJson)
-        : this.quaternion;
-  }
-  syncScale() {
-    this.scale =
-      this.scaleJson.length > 0
-        ? this.parseJson('scaleJson', this.scaleJson, vector3.fromJson)
-        : this.scale;
-  }
-  syncMatrix() {
-    this.matrix = matrix4.makeTRS(this.position, this.quaternion, this.scale);
-  }
-  parseJson(propName, value, parse) {
-    try {
-      return parse(value);
-    }
-    catch (e) {
-      console.warn(`Could not parse \`${propName}\`. Invalid JSON.`);
-      throw e;
+  handleMatrixChanged(newMatrix, oldMatrix) {
+    if (!objects.isEqual(newMatrix, oldMatrix)) {
+      this.propertyChange.emit();
     }
   }
   /**
    * @ignore
    */
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get watchers() { return {
-    "position": ["handlePositionChange"],
-    "positionJson": ["handlePositionJsonChanged"],
-    "rotation": ["handleRotationChanged"],
-    "rotationJson": ["handleRotationJsonChanged"],
-    "quaternion": ["handleQuaternionChange"],
-    "quaternionJson": ["handleQuaternionJsonChanged"],
-    "scale": ["handleScaleChange"],
-    "scaleJson": ["handleScaleJsonChanged"]
-  }; }
-};
-ViewerDomElement.style = viewerDomElementCss;
-
-const viewerDomGroupCss = ":host{display:block;transform-style:preserve-3d}";
-
-let ViewerDomGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * The local 3D position of where this element is located.
-     */
-    this.position = vector3.origin();
-    /**
-     * The local 3D position of where this element is located, as a JSON string.
-     * JSON representation can either be in the format of `[x, y, z]` or `{"x": 0,
-     * "y": 0, "z": 0}`.
-     */
-    this.positionJson = '';
-    /**
-     * The local rotation of this element.
-     */
-    this.quaternion = quaternion.create();
-    /**
-     * The local rotation of this element, as a JSON string. JSON
-     * representation can either be `[x, y, z, w]` or `{"x": 0, "y": 0, "z":
-     * 0, "w": 1}`.
-     */
-    this.quaternionJson = '';
-    /**
-     * The local scale of this element.
-     */
-    this.scale = vector3.create(1, 1, 1);
-    /**
-     * The local scale of this element, as a JSON string. JSON string
-     * representation can either be in the format of `[x, y, z]` or `{"x": 0, "y":
-     * 0, "z": 0}`.
-     */
-    this.scaleJson = '';
-    /**
-     * The local matrix of this element.
-     */
-    this.matrix = matrix4.makeIdentity();
-  }
-  /**
-   * @ignore
-   */
-  handlePositionChange() {
-    this.syncMatrix();
-  }
-  /**
-   * @ignore
-   */
-  handlePositionJsonChanged() {
-    this.syncPosition();
-  }
-  /**
-   * @ignore
-   */
-  handleRotationChanged() {
-    this.syncQuaternionWithRotation();
-  }
-  /**
-   * @ignore
-   */
-  handleRotationJsonChanged() {
-    this.syncRotation();
-  }
-  /**
-   * @ignore
-   */
-  handleQuaternionChange() {
-    this.syncMatrix();
-  }
-  /**
-   * @ignore
-   */
-  handleQuaternionJsonChanged() {
-    this.syncQuaternion();
-  }
-  /**
-   * @ignore
-   */
-  handleScaleChange() {
-    this.syncMatrix();
-  }
-  /**
-   * @ignore
-   */
-  handleScaleJsonChanged() {
-    this.syncScale();
-  }
-  /**
-   * @ignore
-   */
-  componentWillLoad() {
+  connectedCallback() {
     this.syncProperties();
   }
   /**
    * @ignore
    */
-  componentShouldUpdate() {
-    return false;
+  componentShouldUpdate(newValue, oldValue, prop) {
+    return prop === 'occluded';
   }
   syncProperties() {
     this.syncPosition();
@@ -373,17 +214,19 @@ let ViewerDomGroup = class {
     "quaternion": ["handleQuaternionChange"],
     "quaternionJson": ["handleQuaternionJsonChanged"],
     "scale": ["handleScaleChange"],
-    "scaleJson": ["handleScaleJsonChanged"]
+    "scaleJson": ["handleScaleJsonChanged"],
+    "matrix": ["handleMatrixChanged"]
   }; }
 };
-ViewerDomGroup.style = viewerDomGroupCss;
+ViewerDomElement.style = viewerDomElementCss;
 
 function isVertexViewerDomElement(el) {
   return (el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-DOM-ELEMENT');
 }
 
 function isVertexViewerDomGroup(el) {
-  return el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-DOM-GROUP';
+  return ((el instanceof HTMLElement && el.nodeName === 'VERTEX-VIEWER-DOM-GROUP') ||
+    (el instanceof HTMLElement && el.dataset.isDomGroupElement != null));
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -633,4 +476,4 @@ let ViewerDomRenderer = class {
 };
 ViewerDomRenderer.style = viewerDomRendererCss;
 
-export { ViewerDomElement as vertex_viewer_dom_element, ViewerDomGroup as vertex_viewer_dom_group, ViewerDomRenderer as vertex_viewer_dom_renderer };
+export { ViewerDomElement as vertex_viewer_dom_element, ViewerDomRenderer as vertex_viewer_dom_renderer };