@vertexvis/viewer 0.18.2-testing.0 → 0.18.2-testing.1

package/dist/components/results.js

@@ -1,24 +0,0 @@
-/*!
- * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
- */
-import { v as vector3 } from './bundle.esm.js';
-
-/**
- * Constructs a new measurement result from the given points.
- *
- * @param point1 A starting point.
- * @param point2 An ending point.
- * @returns A new measurement result.
- */
-function makeMinimumDistanceResult(point1, point2) {
-  return {
-    type: 'minimum-distance',
-    point1,
-    point2,
-    distance: vector3.distance(point1, point2),
-  };
-}
-
-export { makeMinimumDistanceResult as m };
-
-//# sourceMappingURL=results.js.map

package/dist/components/results.js.map

@@ -1 +0,0 @@
-{"file":"results.js","mappings":";;;;;AAsGA;;;;;;;SAOgB,yBAAyB,CACvC,MAAuB,EACvB,MAAuB;EAEvB,OAAO;IACL,IAAI,EAAE,kBAAkB;IACxB,MAAM;IACN,MAAM;IACN,QAAQ,EAAEA,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;GAC3C,CAAC;AACJ;;;;","names":["Vector3"],"sources":["./src/lib/measurement/results.ts"],"sourcesContent":["import { Plane, Vector3 } from '@vertexvis/geometry';\n\n/**\n * A measurement result that represents the closets point between two entities.\n */\nexport interface MinimumDistanceMeasurementResult {\n  /**\n   * The type.\n   */\n  type: 'minimum-distance';\n\n  /**\n   * The distance between two points.\n   */\n  distance: number;\n\n  /**\n   * The closest point of the first entity, in world coordinates.\n   */\n  point1: Vector3.Vector3;\n\n  /**\n   * The closest point of the second entity, in world coordinates.\n   */\n  point2: Vector3.Vector3;\n}\n\n/**\n * A measurement result that represents the angle between two planar surfaces.\n */\nexport interface PlanarAngleMeasurementResult {\n  /**\n   * The type.\n   */\n  type: 'planar-angle';\n\n  /**\n   * The angle between two planes, in radians.\n   */\n  angle: number;\n\n  /**\n   * The plane of the first entity.\n   */\n  plane1: Plane.Plane;\n\n  /**\n   * The plane of the second entity.\n   */\n  plane2: Plane.Plane;\n}\n\n/**\n * A measurement result that represents the distance between two planar\n * surfaces.\n */\nexport interface PlanarDistanceMeasurementResult {\n  /**\n   * The type.\n   */\n  type: 'planar-distance';\n\n  /**\n   * The distance between the two planes.\n   */\n  distance: number;\n\n  /**\n   * The plane of the first entity.\n   */\n  plane1: Plane.Plane;\n\n  /**\n   * The plane of the second entity.\n   */\n  plane2: Plane.Plane;\n}\n\n/**\n * A measurement result that represents the surface area of one or more faces.\n */\nexport interface SurfaceAreaMeasurementResult {\n  /**\n   * The type.\n   */\n  type: 'surface-area';\n\n  /**\n   * The total area of selected face or faces.\n   */\n  area: number;\n}\n\n/**\n * A type representing the possible measurement results.\n */\nexport type MeasurementResult =\n  | MinimumDistanceMeasurementResult\n  | PlanarAngleMeasurementResult\n  | PlanarDistanceMeasurementResult\n  | SurfaceAreaMeasurementResult;\n\n/**\n * Constructs a new measurement result from the given points.\n *\n * @param point1 A starting point.\n * @param point2 An ending point.\n * @returns A new measurement result.\n */\nexport function makeMinimumDistanceResult(\n  point1: Vector3.Vector3,\n  point2: Vector3.Vector3\n): MinimumDistanceMeasurementResult {\n  return {\n    type: 'minimum-distance',\n    point1,\n    point2,\n    distance: Vector3.distance(point1, point2),\n  };\n}\n"],"version":3}

package/dist/components/row.js

@@ -1,32 +0,0 @@
-/*!
- * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
- */
-function fromNodeProto(index, nodes, columns) {
-  if (Array.isArray(nodes)) {
-    return nodes.map((node, i) => fromNodeProto(index + i, node, columns));
-  }
-  else {
-    const node = nodes.toObject();
-    return {
-      index,
-      node,
-      metadata: makeMetadataMap(columns, node.columnsList),
-      data: {},
-    };
-  }
-}
-/* eslint-enable padding-line-between-statements */
-function makeMetadataMap(keys, values) {
-  return keys.reduce((map, key, i) => {
-    map[key] = values[i];
-    return map;
-  }, {});
-}
-function isLoadedRow(obj) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return obj != null && obj.hasOwnProperty('node');
-}
-
-export { fromNodeProto as f, isLoadedRow as i };
-
-//# sourceMappingURL=row.js.map

package/dist/components/row.js.map

@@ -1 +0,0 @@
-{"file":"row.js","mappings":";;;SA0BgB,aAAa,CAC3B,KAAa,EACb,KAAoB,EACpB,OAAsB;EAEtB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;IACxB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,aAAa,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;GACxE;OAAM;IACL,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC9B,OAAO;MACL,KAAK;MACL,IAAI;MACJ,QAAQ,EAAE,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC;MACpD,IAAI,EAAE,EAAE;KACT,CAAC;GACH;AACH,CAAC;AACD;AAEA,SAAS,eAAe,CAAC,IAAmB,EAAE,MAAgB;EAC5D,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;IAC7B,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACrB,OAAO,GAAG,CAAC;GACZ,EAAE,EAAiB,CAAC,CAAC;AACxB,CAAC;SAEe,WAAW,CAAC,GAAY;;EAEtC,OAAO,GAAG,IAAI,IAAI,IAAK,GAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5D;;;;","names":[],"sources":["./src/components/scene-tree/lib/row.ts"],"sourcesContent":["import { Node } from '@vertexvis/scene-tree-protos/scenetree/protos/domain_pb';\n\nimport { MetadataKey } from '../types';\n\nexport type MetadataMap = Record<MetadataKey, string | undefined>;\n\nexport interface LoadedRow {\n  index: number;\n  node: Node.AsObject;\n  metadata: MetadataMap;\n  data: Record<string, unknown>;\n}\n\nexport type Row = LoadedRow | undefined;\n\n/* eslint-disable padding-line-between-statements */\nexport function fromNodeProto(\n  index: number,\n  node: Node,\n  columns: MetadataKey[]\n): Row;\nexport function fromNodeProto(\n  index: number,\n  nodes: Node[],\n  columns: MetadataKey[]\n): Row[];\nexport function fromNodeProto(\n  index: number,\n  nodes: Node | Node[],\n  columns: MetadataKey[]\n): Row | Row[] {\n  if (Array.isArray(nodes)) {\n    return nodes.map((node, i) => fromNodeProto(index + i, node, columns));\n  } else {\n    const node = nodes.toObject();\n    return {\n      index,\n      node,\n      metadata: makeMetadataMap(columns, node.columnsList),\n      data: {},\n    };\n  }\n}\n/* eslint-enable padding-line-between-statements */\n\nfunction makeMetadataMap(keys: MetadataKey[], values: string[]): MetadataMap {\n  return keys.reduce((map, key, i) => {\n    map[key] = values[i];\n    return map;\n  }, {} as MetadataMap);\n}\n\nexport function isLoadedRow(obj: unknown): obj is LoadedRow {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return obj != null && (obj as any).hasOwnProperty('node');\n}\n"],"version":3}

package/dist/components/scene-tree-search.js

@@ -1,146 +0,0 @@
-/*!
- * Copyright (c) 2023 Vertex Software LLC. All rights reserved.
- */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as debounceEvent } from './stencil.js';
-import { d as defineCustomElement$2 } from './viewer-icon.js';
-import { d as defineCustomElement$1 } from './viewer-spinner.js';
-
-const sceneTreeSearchCss = "button{border:none;background:transparent;cursor:pointer;margin:0;padding:0}:host{--scene-tree-search-search-icon-offset:8px;--scene-tree-search-clear-button-offset:8px;--scene-tree-search-input-padding:0.5rem 32px;--scene-tree-search-input-border:none;--scene-tree-search-input-border-radius:0.25rem;--scene-tree-search-input-background:none;--scene-tree-search-focused-input-background:var(--neutral-200);--scene-tree-search-focused-input-outline:none;display:block;width:100%;font-size:0.875rem}.root{width:100%;position:relative}.input{background:var(--scene-tree-search-input-background);border:var(--scene-tree-search-input-border);border-radius:var(--scene-tree-search-input-border-radius);box-sizing:border-box;font-size:inherit;padding:var(--scene-tree-search-input-padding);outline:none;width:100%}.input.background{background:var(--scene-tree-search-focused-input-background);outline:var(--scene-tree-search-focused-input-outline)}.overlay{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.overlay-clear{display:none;right:var(--scene-tree-search-clear-button-offset)}.overlay-clear.show{display:flex}.icon{color:var(--neutral-700)}.icon-search{position:absolute;left:var(--scene-tree-search-search-icon-offset);pointer-events:none}.clear-btn{display:flex;align-items:center;justify-content:center;pointer-events:initial;cursor:pointer}.clear-btn:hover{color:var(--neutral-800)}.clear-btn:disabled{pointer-events:none;opacity:0.5}";
-
-const SceneTreeSearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.search = createEvent(this, "search", 7);
-    /**
-     * Specifies the delay, in milliseconds, to emit `search` events after user
-     * input.
-     */
-    this.debounce = 350;
-    /**
-     * If `true`, disables user interaction of the component.
-     */
-    this.disabled = false;
-    /**
-     * Placeholder text if `value` is empty.
-     */
-    this.placeholder = undefined;
-    /**
-     * The current text value of the component. Value is updated on user
-     * interaction.
-     */
-    this.value = '';
-    this.focused = false;
-    this.isSearching = false;
-    this.handleTextInput = (event) => {
-      const input = event.target;
-      this.value = input.value;
-      this.search.emit(this.value);
-    };
-    this.handleTextFocus = () => {
-      this.focused = true;
-    };
-    this.handleTextBlur = () => {
-      this.focused = false;
-    };
-    this.handleClear = (event) => {
-      event.preventDefault();
-      this.value = '';
-      this.search.emit(this.value);
-      this.setFocus();
-    };
-  }
-  /**
-   * Gives focus to the the component's internal text input.
-   */
-  async setFocus() {
-    var _a, _b;
-    // HTMLInputElement.focus() doesn't exist in tests.
-    if (typeof ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus) === 'function') {
-      (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.focus();
-    }
-  }
-  /**
-   * @ignore
-   */
-  controllerChanged(controller) {
-    this.setupController();
-  }
-  /**
-   * @ignore
-   */
-  componentDidLoad() {
-    this.handleDebounceChanged();
-    this.setupController();
-  }
-  /**
-   * @ignore
-   */
-  disconnectedCallback() {
-    var _a;
-    (_a = this.onStateChangeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-  }
-  /**
-   * @ignore
-   */
-  render() {
-    return (h(Host, null, h("div", { class: "root" }, h("div", { class: "overlay icon icon-search" }, h("slot", { name: "search-icon" }, this.isSearching ? (h("vertex-viewer-spinner", { slot: "search-icon", size: "xs" })) : (h("vertex-viewer-icon", { name: "search", size: "sm" })))), h("input", { class: classnames('input', {
-        background: this.focused || this.value.length > 0,
-      }), type: "text", ref: (ref) => (this.inputEl = ref), placeholder: this.placeholder, disabled: this.disabled, value: this.value, onInput: this.handleTextInput, onFocus: this.handleTextFocus, onBlur: this.handleTextBlur }), h("div", { class: classnames('overlay overlay-clear', {
-        show: this.value.length > 0,
-      }) }, h("button", { class: "clear-btn icon", tabIndex: -1, onMouseDown: this.handleClear, disabled: this.disabled }, h("slot", { name: "clear-icon" }, h("vertex-viewer-icon", { name: "close-circle", size: "sm" })))))));
-  }
-  handleDebounceChanged() {
-    this.search = debounceEvent(this.search, this.debounce);
-  }
-  setupController() {
-    var _a, _b;
-    (_a = this.onStateChangeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-    this.onStateChangeDisposable = (_b = this.controller) === null || _b === void 0 ? void 0 : _b.onStateChange.on((state) => {
-      this.isSearching = state.isSearching;
-    });
-  }
-  static get watchers() { return {
-    "controller": ["controllerChanged"]
-  }; }
-  static get style() { return sceneTreeSearchCss; }
-}, [1, "vertex-scene-tree-search", {
-    "debounce": [2],
-    "disabled": [4],
-    "placeholder": [1],
-    "controller": [16],
-    "value": [1025],
-    "focused": [32],
-    "isSearching": [32],
-    "setFocus": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-scene-tree-search", "vertex-viewer-icon", "vertex-viewer-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-scene-tree-search":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SceneTreeSearch);
-      }
-      break;
-    case "vertex-viewer-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "vertex-viewer-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { SceneTreeSearch as S, defineCustomElement as d };
-
-//# sourceMappingURL=scene-tree-search.js.map

package/dist/components/scene-tree-search.js.map

@@ -1 +0,0 @@
-{"file":"scene-tree-search.js","mappings":"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","names":["classNames"],"sources":["./src/components/scene-tree-search/scene-tree-search.css?tag=vertex-scene-tree-search&encapsulation=shadow","./src/components/scene-tree-search/scene-tree-search.tsx"],"sourcesContent":["@import url('../../css/button-reset.css');\n\n:host {\n  /**\n   * @prop --scene-tree-search-search-icon-offset: A CSS length that specifies\n   * the horizontal offset of the search icon\n   */\n  --scene-tree-search-search-icon-offset: 8px;\n\n  /**\n   * @prop --scene-tree-search-clear-button-offset: A CSS length that specifies\n   * the horizontal offset of the clear button.\n   */\n  --scene-tree-search-clear-button-offset: 8px;\n\n  /**\n   * @prop --scene-tree-search-input-padding: A CSS padding value that specifies\n   * horizontal and vertical lengths of the internal text input.\n   */\n  --scene-tree-search-input-padding: 0.5rem 32px;\n\n  /**\n   * @prop --scene-tree-search-input-border: A CSS border value that specifies\n   * the border of the internal text input.\n   */\n  --scene-tree-search-input-border: none;\n\n  /**\n   * @prop --scene-tree-search-input-border-radius: A CSS length that specifies\n   * the radius of the internal text input.\n   */\n  --scene-tree-search-input-border-radius: 0.25rem;\n\n  /**\n   * @prop --scene-tree-search-input-background: A CSS background that specifies\n   * the background color or image of the internal text input.\n   */\n  --scene-tree-search-input-background: none;\n\n  /**\n   * @prop --scene-tree-search-focused-input-background: A CSS background value\n   * that specifies the background of the internal text input when focused.\n   */\n  --scene-tree-search-focused-input-background: var(--neutral-200);\n\n  /**\n   * @prop --scene-tree-search-focused-input-outline: A CSS outline value that\n   * specifies the outline of the internal text input when focused.\n   */\n  --scene-tree-search-focused-input-outline: none;\n\n  display: block;\n  width: 100%;\n  font-size: 0.875rem;\n}\n\n.root {\n  width: 100%;\n  position: relative;\n}\n\n.input {\n  background: var(--scene-tree-search-input-background);\n  border: var(--scene-tree-search-input-border);\n  border-radius: var(--scene-tree-search-input-border-radius);\n  box-sizing: border-box;\n  font-size: inherit;\n  padding: var(--scene-tree-search-input-padding);\n  outline: none;\n  width: 100%;\n}\n\n.input.background {\n  background: var(--scene-tree-search-focused-input-background);\n  outline: var(--scene-tree-search-focused-input-outline);\n}\n\n.overlay {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.overlay-clear {\n  display: none;\n  right: var(--scene-tree-search-clear-button-offset);\n}\n\n.overlay-clear.show {\n  display: flex;\n}\n\n.icon {\n  color: var(--neutral-700);\n}\n\n.icon-search {\n  position: absolute;\n  left: var(--scene-tree-search-search-icon-offset);\n  pointer-events: none;\n}\n\n.clear-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: initial;\n  cursor: pointer;\n}\n.clear-btn:hover {\n  color: var(--neutral-800);\n}\n.clear-btn:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Disposable } from '@vertexvis/utils';\nimport classNames from 'classnames';\n\nimport { debounceEvent } from '../../lib/stencil';\nimport { SceneTreeController } from '../scene-tree/lib/controller';\n\n/**\n * @slot search-icon - A slot that replaces the component's default search icon.\n * @slot clear-icon - A slot that replaces the component's default clear icon.\n */\n@Component({\n  tag: 'vertex-scene-tree-search',\n  styleUrl: 'scene-tree-search.css',\n  shadow: true,\n})\nexport class SceneTreeSearch {\n  /**\n   * Specifies the delay, in milliseconds, to emit `search` events after user\n   * input.\n   */\n  @Prop()\n  public debounce = 350;\n\n  /**\n   * If `true`, disables user interaction of the component.\n   */\n  @Prop()\n  public disabled = false;\n\n  /**\n   * Placeholder text if `value` is empty.\n   */\n  @Prop()\n  public placeholder?: string = undefined;\n\n  /**\n   * The scene tree controller\n   */\n  @Prop()\n  public controller?: SceneTreeController;\n\n  /**\n   * The current text value of the component. Value is updated on user\n   * interaction.\n   */\n  @Prop({ mutable: true })\n  public value = '';\n\n  /**\n   * An event that is emitted when a user has inputted or cleared the search\n   * term. The event may be delayed according to the current `debounce` value.\n   */\n  @Event({ bubbles: true })\n  public search!: EventEmitter<string>;\n\n  @State()\n  private focused = false;\n\n  @State()\n  private isSearching = false;\n\n  private inputEl?: HTMLInputElement;\n  private onStateChangeDisposable?: Disposable;\n\n  /**\n   * Gives focus to the the component's internal text input.\n   */\n  @Method()\n  public async setFocus(): Promise<void> {\n    // HTMLInputElement.focus() doesn't exist in tests.\n    if (typeof this.inputEl?.focus === 'function') {\n      this.inputEl?.focus();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  @Watch('controller')\n  public controllerChanged(controller: SceneTreeController): void {\n    this.setupController();\n  }\n\n  /**\n   * @ignore\n   */\n  protected componentDidLoad(): void {\n    this.handleDebounceChanged();\n\n    this.setupController();\n  }\n\n  /**\n   * @ignore\n   */\n  protected disconnectedCallback(): void {\n    this.onStateChangeDisposable?.dispose();\n  }\n\n  /**\n   * @ignore\n   */\n  protected render(): h.JSX.IntrinsicElements {\n    return (\n      <Host>\n        <div class=\"root\">\n          <div class=\"overlay icon icon-search\">\n            <slot name=\"search-icon\">\n              {this.isSearching ? (\n                <vertex-viewer-spinner slot=\"search-icon\" size=\"xs\" />\n              ) : (\n                <vertex-viewer-icon name=\"search\" size=\"sm\" />\n              )}\n            </slot>\n          </div>\n\n          <input\n            class={classNames('input', {\n              background: this.focused || this.value.length > 0,\n            })}\n            type=\"text\"\n            ref={(ref) => (this.inputEl = ref)}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            value={this.value}\n            onInput={this.handleTextInput}\n            onFocus={this.handleTextFocus}\n            onBlur={this.handleTextBlur}\n          />\n\n          <div\n            class={classNames('overlay overlay-clear', {\n              show: this.value.length > 0,\n            })}\n          >\n            <button\n              class=\"clear-btn icon\"\n              tabIndex={-1}\n              onMouseDown={this.handleClear}\n              disabled={this.disabled}\n            >\n              <slot name=\"clear-icon\">\n                <vertex-viewer-icon name=\"close-circle\" size=\"sm\" />\n              </slot>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private handleTextInput = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.search.emit(this.value);\n  };\n\n  private handleTextFocus = (): void => {\n    this.focused = true;\n  };\n\n  private handleTextBlur = (): void => {\n    this.focused = false;\n  };\n\n  private handleClear = (event: MouseEvent): void => {\n    event.preventDefault();\n\n    this.value = '';\n    this.search.emit(this.value);\n    this.setFocus();\n  };\n\n  private handleDebounceChanged(): void {\n    this.search = debounceEvent(this.search, this.debounce);\n  }\n\n  private setupController(): void {\n    this.onStateChangeDisposable?.dispose();\n\n    this.onStateChangeDisposable = this.controller?.onStateChange.on(\n      (state) => {\n        this.isSearching = state.isSearching;\n      }\n    );\n  }\n}\n"],"version":3}