@vertexvis/viewer 0.18.1 → 0.18.2-testing.0

package/dist/components/viewer-button.js

@@ -0,0 +1,35 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const viewerButtonCss = ":host{cursor:pointer}.viewer-button{align-items:center;background:none;border:none;color:inherit;cursor:inherit;display:flex;padding:0}";
+
+const ViewerButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "viewer-button" }, h("slot", null))));
+  }
+  static get style() { return viewerButtonCss; }
+}, [1, "vertex-viewer-button"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerButton);
+      }
+      break;
+  } });
+}
+
+export { ViewerButton as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-button.js.map

package/dist/components/viewer-button.js.map

@@ -0,0 +1 @@
+{"file":"viewer-button.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,yIAAyI;;MCOpJ,YAAY;;;;;;EAChB,MAAM;IACX,QACE,EAAC,IAAI,QACH,cAAQ,KAAK,EAAC,eAAe,IAC3B,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/viewer-button/viewer-button.css?tag=vertex-viewer-button&encapsulation=shadow","./src/components/viewer-button/viewer-button.tsx"],"sourcesContent":[":host {\n  cursor: pointer;\n}\n\n.viewer-button {\n  align-items: center;\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  padding: 0;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'vertex-viewer-button',\n  styleUrl: 'viewer-button.css',\n  shadow: true,\n})\nexport class ViewerButton {\n  public render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        <button class=\"viewer-button\">\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/viewer-dom-element.js

@@ -0,0 +1,250 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as vector3, q as quaternion, m as matrix4, i as euler } from './bundle.esm.js';
+import { o as objects } from './browser.esm.js';
+
+const viewerDomElementCss = ":host{position:absolute;pointer-events:none;visibility:hidden}:host(.hydrated){visibility:hidden}:host(.ready){visibility:inherit}:host(:not([interactions-off]))>*{pointer-events:auto}";
+
+const ViewerDomElement = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.propertyChange = createEvent(this, "propertyChange", 7);
+    /**
+     * 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 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}`.
+     */
+    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();
+    /**
+     * Disables occlusion testing for this element. Defaults to enabled. When
+     * enabled, the elements position will be tested against the current depth
+     * buffer. If the position is occluded, then the `occluded` attribute will be
+     * set.
+     */
+    this.occlusionOff = false;
+    /**
+     * Indicates if the element is hidden by geometry. This property can be used
+     * with a CSS selector to modify the appearance of the element when its
+     * occluded.
+     *
+     * @example
+     *
+     * ```html
+     * <style>
+     *   vertex-viewer-dom-element[occluded] {
+     *     opacity: 0;
+     *   }
+     * </style>
+     * ```
+     */
+    this.occluded = false;
+    /**
+     * Disables the billboarding behavior of the element. When billboarding is
+     * enabled, the element will always be oriented towards the screen.
+     */
+    this.billboardOff = false;
+    /**
+     * Disables interaction events from children.
+     */
+    this.interactionsOff = false;
+  }
+  /**
+   * @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
+   */
+  handleMatrixChanged(newMatrix, oldMatrix) {
+    if (!objects.isEqual(newMatrix, oldMatrix)) {
+      this.propertyChange.emit();
+    }
+  }
+  /**
+   * @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;
+    }
+  }
+  /**
+   * @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"],
+    "matrix": ["handleMatrixChanged"]
+  }; }
+  static get style() { return viewerDomElementCss; }
+}, [1, "vertex-viewer-dom-element", {
+    "position": [1040],
+    "positionJson": [1, "position"],
+    "rotation": [1040],
+    "rotationJson": [1, "rotation"],
+    "quaternion": [1040],
+    "quaternionJson": [1, "quaternion"],
+    "scale": [1040],
+    "scaleJson": [1, "scale"],
+    "matrix": [1040],
+    "occlusionOff": [4, "occlusion-off"],
+    "occluded": [516],
+    "billboardOff": [4, "billboard-off"],
+    "interactionsOff": [516, "interactions-off"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-dom-element"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-dom-element":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerDomElement);
+      }
+      break;
+  } });
+}
+
+export { ViewerDomElement as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-dom-element.js.map

package/dist/components/viewer-dom-element.js.map

@@ -0,0 +1 @@
+{"file":"viewer-dom-element.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,0LAA0L;;MC2BzM,gBAAgB;EAL7B;;;;;;;;IAUS,aAAQ,GAAoBA,OAAO,CAAC,MAAM,EAAE,CAAC;;;;;;IAgB7C,iBAAY,GAAG,EAAE,CAAC;;;;IA4ClB,eAAU,GAA0BC,UAAU,CAAC,MAAM,EAAE,CAAC;;;;;;IAgBxD,mBAAc,GAAG,EAAE,CAAC;;;;IAcpB,UAAK,GAAoBD,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;;;;;;IAgBjD,cAAS,GAAG,EAAE,CAAC;;;;IA2Bf,WAAM,GAAoBE,OAAO,CAAC,YAAY,EAAE,CAAC;;;;;;;IASjD,iBAAY,GAAG,KAAK,CAAC;;;;;;;;;;;;;;;;IAkBrB,aAAQ,GAAG,KAAK,CAAC;;;;;IAOjB,iBAAY,GAAG,KAAK,CAAC;;;;IAMrB,oBAAe,GAAG,KAAK,CAAC;GAqGhC;;;;EA5QW,oBAAoB;IAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;;;;EAcS,yBAAyB;IACjC,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;;;;EAYS,qBAAqB;IAC7B,IAAI,CAAC,0BAA0B,EAAE,CAAC;GACnC;;;;EAcS,yBAAyB;IACjC,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;;;;EAYS,sBAAsB;IAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;;;;EAcS,2BAA2B;IACnC,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;;;;EAYS,iBAAiB;IACzB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;;;;EAcS,sBAAsB;IAC9B,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;;;;EAMS,mBAAmB,CAC3B,SAA0B,EAC1B,SAA0B;IAE1B,IAAI,CAACC,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE;MAC1C,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B;GACF;;;;EAyDS,iBAAiB;IACzB,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;;;;EAKS,qBAAqB,CAC7B,QAAiB,EACjB,QAAiB,EACjB,IAAY;IAEZ,OAAO,IAAI,KAAK,UAAU,CAAC;GAC5B;EAEO,cAAc;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAEO,YAAY;IAClB,IAAI,CAAC,QAAQ;MACX,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;UACxB,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAEH,OAAO,CAAC,QAAQ,CAAC;UACnE,IAAI,CAAC,QAAQ,CAAC;GACrB;EAEO,YAAY;IAClB,IAAI,CAAC,QAAQ;MACX,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;UACrD,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAEI,KAAK,CAAC,QAAQ,CAAC;UACjE,IAAI,CAAC,QAAQ,CAAC;IACpB,IAAI,CAAC,0BAA0B,EAAE,CAAC;GACnC;EAEO,0BAA0B;IAChC,IAAI,CAAC,UAAU;MACb,IAAI,CAAC,QAAQ,IAAI,IAAI;UACjBH,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;UACnC,IAAI,CAAC,UAAU,CAAC;GACvB;EAEO,cAAc;IACpB,IAAI,CAAC,UAAU;MACb,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;UAC1B,IAAI,CAAC,SAAS,CACZ,gBAAgB,EAChB,IAAI,CAAC,cAAc,EACnBA,UAAU,CAAC,QAAQ,CACpB;UACD,IAAI,CAAC,UAAU,CAAC;GACvB;EAEO,SAAS;IACf,IAAI,CAAC,KAAK;MACR,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;UACrB,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,EAAED,OAAO,CAAC,QAAQ,CAAC;UAC7D,IAAI,CAAC,KAAK,CAAC;GAClB;EAEO,UAAU;IAChB,IAAI,CAAC,MAAM,GAAGE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3E;EAEO,SAAS,CACf,QAAgB,EAChB,KAAa,EACb,KAAyB;IAEzB,IAAI;MACF,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC;KACrB;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,IAAI,CAAC,qBAAqB,QAAQ,mBAAmB,CAAC,CAAC;MAC/D,MAAM,CAAC,CAAC;KACT;GACF;;;;EAKS,MAAM;IACd,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Vector3","Quaternion","Matrix4","Objects","Euler"],"sources":["./src/components/viewer-dom-element/viewer-dom-element.css?tag=vertex-viewer-dom-element&encapsulation=shadow","./src/components/viewer-dom-element/viewer-dom-element.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n/* Ignore Stencil's hydrated prop in favor of a custom `ready` selector. This\n * prevents flashing of elements before Stencil has a time to position the\n * element in 3D space.\n */\n:host(.hydrated) {\n  visibility: hidden;\n}\n\n:host(.ready) {\n  visibility: inherit;\n}\n\n:host(:not([interactions-off])) > * {\n  pointer-events: auto;\n}\n","/* eslint-disable @typescript-eslint/member-ordering */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { Euler, Matrix4, Quaternion, Vector3 } from '@vertexvis/geometry';\nimport { Objects } from '@vertexvis/utils';\n\nimport { HTMLDomRendererPositionableElement } from '../../interfaces';\n\n/**\n * The `ViewerDomElement` is responsible for managing a\n * `<vertex-viewer-dom-element>` element. These elements are intended to be\n * added as children to a `<vertex-viewer-dom-renderer>` and represent an\n * individual DOM element within a local 3D scene.\n */\n@Component({\n  tag: 'vertex-viewer-dom-element',\n  styleUrl: 'viewer-dom-element.css',\n  shadow: true,\n})\nexport class ViewerDomElement implements HTMLDomRendererPositionableElement {\n  /**\n   * The local 3D position of where this element is located.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public position: Vector3.Vector3 = Vector3.origin();\n\n  /**\n   * @ignore\n   */\n  @Watch('position')\n  protected handlePositionChange(): void {\n    this.syncMatrix();\n  }\n\n  /**\n   * The local 3D position of where this element is located, as a JSON string.\n   * JSON representation can either be in the format of `[x, y, z]` or `{\"x\": 0,\n   * \"y\": 0, \"z\": 0}`.\n   */\n  @Prop({ attribute: 'position' })\n  public positionJson = '';\n\n  /**\n   * @ignore\n   */\n  @Watch('positionJson')\n  protected handlePositionJsonChanged(): void {\n    this.syncPosition();\n  }\n\n  /**\n   * The local rotation of this element in Euler angles.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public rotation?: Euler.Euler;\n\n  /**\n   * @ignore\n   */\n  @Watch('rotation')\n  protected handleRotationChanged(): void {\n    this.syncQuaternionWithRotation();\n  }\n\n  /**\n   * The local rotation of this element in Euler angles, as a JSON string. JSON\n   * representation can either be `[x, y, z, order]` or `{\"x\": 0, \"y\": 0, \"z\":\n   * 0, \"order\": \"xyz\"}`.\n   */\n  @Prop({ attribute: 'rotation' })\n  public rotationJson?: string;\n\n  /**\n   * @ignore\n   */\n  @Watch('rotationJson')\n  protected handleRotationJsonChanged(): void {\n    this.syncRotation();\n  }\n\n  /**\n   * The local rotation of this element.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public quaternion: Quaternion.Quaternion = Quaternion.create();\n\n  /**\n   * @ignore\n   */\n  @Watch('quaternion')\n  protected handleQuaternionChange(): void {\n    this.syncMatrix();\n  }\n\n  /**\n   * The local quaternion rotation of this element, as a JSON string. JSON\n   * representation can either be `[x, y, z, w]` or `{\"x\": 0, \"y\": 0, \"z\":\n   * 0, \"w\": 1}`.\n   */\n  @Prop({ attribute: 'quaternion' })\n  public quaternionJson = '';\n\n  /**\n   * @ignore\n   */\n  @Watch('quaternionJson')\n  protected handleQuaternionJsonChanged(): void {\n    this.syncQuaternion();\n  }\n\n  /**\n   * The local scale of this element.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public scale: Vector3.Vector3 = Vector3.create(1, 1, 1);\n\n  /**\n   * @ignore\n   */\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    this.syncMatrix();\n  }\n\n  /**\n   * The local scale of this element, as a JSON string. JSON string\n   * representation can either be in the format of `[x, y, z]` or `{\"x\": 0, \"y\":\n   * 0, \"z\": 0}`.\n   */\n  @Prop({ attribute: 'scale' })\n  public scaleJson = '';\n\n  /**\n   * @ignore\n   */\n  @Watch('scaleJson')\n  protected handleScaleJsonChanged(): void {\n    this.syncScale();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('matrix')\n  protected handleMatrixChanged(\n    newMatrix: Matrix4.Matrix4,\n    oldMatrix: Matrix4.Matrix4\n  ): void {\n    if (!Objects.isEqual(newMatrix, oldMatrix)) {\n      this.propertyChange.emit();\n    }\n  }\n\n  /**\n   * The local matrix of this element.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public matrix: Matrix4.Matrix4 = Matrix4.makeIdentity();\n\n  /**\n   * Disables occlusion testing for this element. Defaults to enabled. When\n   * enabled, the elements position will be tested against the current depth\n   * buffer. If the position is occluded, then the `occluded` attribute will be\n   * set.\n   */\n  @Prop()\n  public occlusionOff = false;\n\n  /**\n   * Indicates if the element is hidden by geometry. This property can be used\n   * with a CSS selector to modify the appearance of the element when its\n   * occluded.\n   *\n   * @example\n   *\n   * ```html\n   * <style>\n   *   vertex-viewer-dom-element[occluded] {\n   *     opacity: 0;\n   *   }\n   * </style>\n   * ```\n   */\n  @Prop({ reflect: true })\n  public occluded = false;\n\n  /**\n   * Disables the billboarding behavior of the element. When billboarding is\n   * enabled, the element will always be oriented towards the screen.\n   */\n  @Prop()\n  public billboardOff = false;\n\n  /**\n   * Disables interaction events from children.\n   */\n  @Prop({ reflect: true })\n  public interactionsOff = false;\n\n  /**\n   * An event that is emitted when any property on the dom group changes\n   */\n  @Event({ bubbles: true })\n  public propertyChange!: EventEmitter<void>;\n\n  /**\n   * @ignore\n   */\n  protected connectedCallback(): void {\n    this.syncProperties();\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentShouldUpdate(\n    newValue: unknown,\n    oldValue: unknown,\n    prop: string\n  ): boolean {\n    return prop === 'occluded';\n  }\n\n  private syncProperties(): void {\n    this.syncPosition();\n    this.syncRotation();\n    this.syncQuaternion();\n    this.syncScale();\n    this.syncMatrix();\n  }\n\n  private syncPosition(): void {\n    this.position =\n      this.positionJson.length > 0\n        ? this.parseJson('positionJson', this.positionJson, Vector3.fromJson)\n        : this.position;\n  }\n\n  private syncRotation(): void {\n    this.rotation =\n      this.rotationJson != null && this.rotationJson.length > 0\n        ? this.parseJson('rotationJson', this.rotationJson, Euler.fromJson)\n        : this.rotation;\n    this.syncQuaternionWithRotation();\n  }\n\n  private syncQuaternionWithRotation(): void {\n    this.quaternion =\n      this.rotation != null\n        ? Quaternion.fromEuler(this.rotation)\n        : this.quaternion;\n  }\n\n  private syncQuaternion(): void {\n    this.quaternion =\n      this.quaternionJson.length > 0\n        ? this.parseJson(\n            'quaternionJson',\n            this.quaternionJson,\n            Quaternion.fromJson\n          )\n        : this.quaternion;\n  }\n\n  private syncScale(): void {\n    this.scale =\n      this.scaleJson.length > 0\n        ? this.parseJson('scaleJson', this.scaleJson, Vector3.fromJson)\n        : this.scale;\n  }\n\n  private syncMatrix(): void {\n    this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\n  }\n\n  private parseJson<T>(\n    propName: string,\n    value: string,\n    parse: (str: string) => T\n  ): T {\n    try {\n      return parse(value);\n    } catch (e) {\n      console.warn(`Could not parse \\`${propName}\\`. Invalid JSON.`);\n      throw e;\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/viewer-dom-group.js

@@ -0,0 +1,214 @@
+/*!
+ * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as vector3, q as quaternion, m as matrix4, i as euler } from './bundle.esm.js';
+import { o as objects } from './browser.esm.js';
+
+const viewerDomGroupCss = ":host{display:block;transform-style:preserve-3d}";
+
+const ViewerDomGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.propertyChange = createEvent(this, "propertyChange", 7);
+    /**
+     * 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
+   */
+  handleMatrixChanged(newMatrix, oldMatrix) {
+    if (!objects.isEqual(newMatrix, oldMatrix)) {
+      this.propertyChange.emit();
+    }
+  }
+  /**
+   * @ignore
+   */
+  componentWillLoad() {
+    this.syncProperties();
+  }
+  /**
+   * @ignore
+   */
+  componentShouldUpdate() {
+    return false;
+  }
+  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;
+    }
+  }
+  /**
+   * @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"],
+    "matrix": ["handleMatrixChanged"]
+  }; }
+  static get style() { return viewerDomGroupCss; }
+}, [1, "vertex-viewer-dom-group", {
+    "position": [1040],
+    "positionJson": [1, "position"],
+    "rotation": [1040],
+    "rotationJson": [1, "rotation"],
+    "quaternion": [1040],
+    "quaternionJson": [1, "quaternion"],
+    "scale": [1040],
+    "scaleJson": [1, "scale"],
+    "matrix": [1040]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-viewer-dom-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-viewer-dom-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ViewerDomGroup);
+      }
+      break;
+  } });
+}
+
+export { ViewerDomGroup as V, defineCustomElement as d };
+
+//# sourceMappingURL=viewer-dom-group.js.map

package/dist/components/viewer-dom-group.js.map

@@ -0,0 +1 @@
+{"file":"viewer-dom-group.js","mappings":"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","names":["Vector3","Quaternion","Matrix4","Objects","Euler"],"sources":["./src/components/viewer-dom-group/viewer-dom-group.css?tag=vertex-viewer-dom-group&encapsulation=shadow","./src/components/viewer-dom-group/viewer-dom-group.tsx"],"sourcesContent":[":host {\n  display: block;\n  transform-style: preserve-3d;\n}\n","/* eslint-disable @typescript-eslint/member-ordering */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { Euler, Matrix4, Quaternion, Vector3 } from '@vertexvis/geometry';\nimport { Objects } from '@vertexvis/utils';\n\nimport { HTMLDomRendererPositionableElement } from '../../interfaces';\n\n@Component({\n  tag: 'vertex-viewer-dom-group',\n  styleUrl: 'viewer-dom-group.css',\n  shadow: true,\n})\nexport class ViewerDomGroup implements HTMLDomRendererPositionableElement {\n  /**\n   * The local 3D position of where this element is located.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public position: Vector3.Vector3 = Vector3.origin();\n\n  /**\n   * @ignore\n   */\n  @Watch('position')\n  protected handlePositionChange(): void {\n    this.syncMatrix();\n  }\n\n  /**\n   * The local 3D position of where this element is located, as a JSON string.\n   * JSON representation can either be in the format of `[x, y, z]` or `{\"x\": 0,\n   * \"y\": 0, \"z\": 0}`.\n   */\n  @Prop({ attribute: 'position' })\n  public positionJson = '';\n\n  /**\n   * @ignore\n   */\n  @Watch('positionJson')\n  protected handlePositionJsonChanged(): void {\n    this.syncPosition();\n  }\n\n  /**\n   * An event that is emitted when any property on the dom group changes\n   */\n  @Event({ bubbles: true })\n  public propertyChange!: EventEmitter<void>;\n\n  /**\n   * The local rotation of this element in Euler angles.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public rotation?: Euler.Euler;\n\n  /**\n   * @ignore\n   */\n  @Watch('rotation')\n  protected handleRotationChanged(): void {\n    this.syncQuaternionWithRotation();\n  }\n\n  /**\n   * The local rotation of this element in Euler angles, as a JSON string. JSON\n   * representation can either be `[x, y, z, order]` or `{\"x\": 0, \"y\": 0, \"z\":\n   * 0, \"order\": \"xyz\"}`.\n   */\n  @Prop({ attribute: 'rotation' })\n  public rotationJson?: string;\n\n  /**\n   * @ignore\n   */\n  @Watch('rotationJson')\n  protected handleRotationJsonChanged(): void {\n    this.syncRotation();\n  }\n\n  /**\n   * The local rotation of this element.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public quaternion: Quaternion.Quaternion = Quaternion.create();\n\n  /**\n   * @ignore\n   */\n  @Watch('quaternion')\n  protected handleQuaternionChange(): void {\n    this.syncMatrix();\n  }\n\n  /**\n   * The local rotation of this element, as a JSON string. JSON\n   * representation can either be `[x, y, z, w]` or `{\"x\": 0, \"y\": 0, \"z\":\n   * 0, \"w\": 1}`.\n   */\n  @Prop({ attribute: 'quaternion' })\n  public quaternionJson = '';\n\n  /**\n   * @ignore\n   */\n  @Watch('quaternionJson')\n  protected handleQuaternionJsonChanged(): void {\n    this.syncQuaternion();\n  }\n\n  /**\n   * The local scale of this element.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public scale: Vector3.Vector3 = Vector3.create(1, 1, 1);\n\n  /**\n   * @ignore\n   */\n  @Watch('scale')\n  protected handleScaleChange(): void {\n    this.syncMatrix();\n  }\n\n  /**\n   * The local scale of this element, as a JSON string. JSON string\n   * representation can either be in the format of `[x, y, z]` or `{\"x\": 0, \"y\":\n   * 0, \"z\": 0}`.\n   */\n  @Prop({ attribute: 'scale' })\n  public scaleJson = '';\n\n  /**\n   * @ignore\n   */\n  @Watch('scaleJson')\n  protected handleScaleJsonChanged(): void {\n    this.syncScale();\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('matrix')\n  protected handleMatrixChanged(\n    newMatrix: Matrix4.Matrix4,\n    oldMatrix: Matrix4.Matrix4\n  ): void {\n    if (!Objects.isEqual(newMatrix, oldMatrix)) {\n      this.propertyChange.emit();\n    }\n  }\n\n  /**\n   * The local matrix of this element.\n   */\n  @Prop({ mutable: true, attribute: null })\n  public matrix: Matrix4.Matrix4 = Matrix4.makeIdentity();\n\n  /**\n   * @ignore\n   */\n  protected componentWillLoad(): void {\n    this.syncProperties();\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentShouldUpdate(): boolean {\n    return false;\n  }\n\n  private syncProperties(): void {\n    this.syncPosition();\n    this.syncRotation();\n    this.syncQuaternion();\n    this.syncScale();\n    this.syncMatrix();\n  }\n\n  private syncPosition(): void {\n    this.position =\n      this.positionJson.length > 0\n        ? this.parseJson('positionJson', this.positionJson, Vector3.fromJson)\n        : this.position;\n  }\n\n  private syncRotation(): void {\n    this.rotation =\n      this.rotationJson != null && this.rotationJson.length > 0\n        ? this.parseJson('rotationJson', this.rotationJson, Euler.fromJson)\n        : this.rotation;\n    this.syncQuaternionWithRotation();\n  }\n\n  private syncQuaternionWithRotation(): void {\n    this.quaternion =\n      this.rotation != null\n        ? Quaternion.fromEuler(this.rotation)\n        : this.quaternion;\n  }\n\n  private syncQuaternion(): void {\n    this.quaternion =\n      this.quaternionJson.length > 0\n        ? this.parseJson(\n            'quaternionJson',\n            this.quaternionJson,\n            Quaternion.fromJson\n          )\n        : this.quaternion;\n  }\n\n  private syncScale(): void {\n    this.scale =\n      this.scaleJson.length > 0\n        ? this.parseJson('scaleJson', this.scaleJson, Vector3.fromJson)\n        : this.scale;\n  }\n\n  private syncMatrix(): void {\n    this.matrix = Matrix4.makeTRS(this.position, this.quaternion, this.scale);\n  }\n\n  private parseJson<T>(\n    propName: string,\n    value: string,\n    parse: (str: string) => T\n  ): T {\n    try {\n      return parse(value);\n    } catch (e) {\n      console.warn(`Could not parse \\`${propName}\\`. Invalid JSON.`);\n      throw e;\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}