@vertexvis/viewer 0.15.2-testing.2 → 0.15.2-testing.4

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

@@ -9,10 +9,10 @@ const index = require('./index-70db349e.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const _commonjsHelpers = require('./_commonjsHelpers-dcc4cf71.js');
 const grpcWebClient_umd = require('./grpc-web-client.umd-2af20c1b.js');
-const config = require('./config-6e330a82.js');
+const config = require('./config-4a86ae0b.js');
 const browser_esm = require('./browser.esm-5d246754.js');
 const dom = require('./dom-92728e58.js');
-require('./streamAttributes-c64aee75.js');
+require('./streamAttributes-7725f5c4.js');
 require('./entities-9eb7e608.js');
 
 window.requestIdleCallback =

package/dist/cjs/vertex-viewer-box-query-tool.cjs.entry.js

@@ -0,0 +1,245 @@
+/**!
+ * Copyright (c) 2022 Vertex Software LLC. All rights reserved.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-70db349e.js');
+const bundle_esm = require('./bundle.esm-22b6f2d6.js');
+const browser_esm = require('./browser.esm-5d246754.js');
+
+const DEFAULT_CONCURRENT_VOLUME_QUERY_LIMIT = 5;
+class VolumeIntersectionQueryController {
+  constructor(model, viewer) {
+    this.model = model;
+    this.viewer = viewer;
+    this.inFlightOperations = 0;
+    this.operationTransform = (builder) => builder.select();
+  }
+  setStartPoint(point) {
+    this.previousViewerCameraControls = this.viewer.cameraControls;
+    this.viewer.cameraControls = false;
+    this.model.setStartPoint(point);
+  }
+  setEndPoint(point) {
+    this.model.setEndPoint(point);
+  }
+  setOperationTransform(operationTransform) {
+    this.operationTransform = operationTransform;
+  }
+  async execute() {
+    var _a;
+    const screenBounds = this.model.getScreenBounds();
+    const type = this.model.getType();
+    this.viewer.cameraControls = (_a = this.previousViewerCameraControls) !== null && _a !== void 0 ? _a : true;
+    this.model.complete();
+    if (screenBounds != null &&
+      this.inFlightOperations < DEFAULT_CONCURRENT_VOLUME_QUERY_LIMIT) {
+      this.inFlightOperations = this.inFlightOperations + 1;
+      try {
+        const scene = await this.viewer.scene();
+        await scene
+          .items((op) => this.operationTransform(op.where((q) => q.withVolumeIntersection(screenBounds, type === 'exclusive'))))
+          .execute();
+      }
+      catch (e) {
+        console.error('Failed to perform volume intersection query', e);
+        throw e;
+      }
+      finally {
+        this.inFlightOperations = this.inFlightOperations - 1;
+      }
+    }
+    else if (this.inFlightOperations >= DEFAULT_CONCURRENT_VOLUME_QUERY_LIMIT) {
+      throw new Error(`Unable to perform volume intersection query due to the limit of ${DEFAULT_CONCURRENT_VOLUME_QUERY_LIMIT}.`);
+    }
+  }
+}
+
+class VolumeIntersectionQueryInteractionHandler {
+  constructor(controller) {
+    this.controller = controller;
+    this.handleDragBegin = this.handleDragBegin.bind(this);
+    this.handleDrag = this.handleDrag.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+  }
+  initialize(element) {
+    this.element = element;
+    this.element.addEventListener('pointerdown', this.handleDragBegin);
+  }
+  dispose() {
+    var _a;
+    (_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', this.handleDragBegin);
+    window.removeEventListener('pointermove', this.handleDrag);
+    window.removeEventListener('pointerup', this.handleDragEnd);
+  }
+  handleDragBegin(event) {
+    if (event.buttons === 1 && !this.isInteracting) {
+      this.isInteracting = true;
+      this.controller.setStartPoint(bundle_esm.point.create(event.offsetX, event.offsetY));
+      window.addEventListener('pointermove', this.handleDrag);
+      window.addEventListener('pointerup', this.handleDragEnd);
+    }
+  }
+  handleDrag(event) {
+    this.controller.setEndPoint(bundle_esm.point.create(event.offsetX, event.offsetY));
+  }
+  handleDragEnd() {
+    this.controller.execute();
+    this.isInteracting = false;
+    window.removeEventListener('pointermove', this.handleDrag);
+    window.removeEventListener('pointerup', this.handleDragEnd);
+  }
+}
+
+class VolumeIntersectionQueryModel {
+  constructor() {
+    this.dragStarted = new browser_esm.EventDispatcher();
+    this.dragComplete = new browser_esm.EventDispatcher();
+    this.screenBoundsChanged = new browser_esm.EventDispatcher();
+  }
+  setStartPoint(point) {
+    this.startPoint = point;
+    this.dragStarted.emit();
+  }
+  setEndPoint(point) {
+    this.endPoint = point;
+    this.updateQueryType();
+    this.screenBoundsChanged.emit(this.getQueryDetails());
+  }
+  complete() {
+    if (this.startPoint != null && this.endPoint != null) {
+      this.screenBoundsChanged.emit(undefined);
+      this.dragComplete.emit(this.getQueryDetails());
+      this.reset();
+    }
+  }
+  reset() {
+    this.startPoint = undefined;
+    this.endPoint = undefined;
+    this.type = undefined;
+  }
+  getScreenBounds() {
+    return this.startPoint != null && this.endPoint != null
+      ? bundle_esm.rectangle.fromPoints(this.startPoint, this.endPoint)
+      : undefined;
+  }
+  getType() {
+    return this.type;
+  }
+  onScreenBoundsChanged(listener) {
+    return this.screenBoundsChanged.on(listener);
+  }
+  onDragStarted(listener) {
+    return this.dragStarted.on(listener);
+  }
+  onDragComplete(listener) {
+    return this.dragComplete.on(listener);
+  }
+  getQueryDetails() {
+    if (this.startPoint != null && this.endPoint != null && this.type != null) {
+      return {
+        screenBounds: bundle_esm.rectangle.fromPoints(this.startPoint, this.endPoint),
+        type: this.type,
+      };
+    }
+    else {
+      throw new Error('Failed to create query details, the start and end points must be set.');
+    }
+  }
+  updateQueryType() {
+    if (this.startPoint != null && this.endPoint) {
+      this.type =
+        bundle_esm.point.subtract(this.endPoint, this.startPoint).x > 0
+          ? 'exclusive'
+          : 'inclusive';
+    }
+  }
+}
+
+const viewerBoxQueryToolCss = ":host{--viewer-box-query-outline-exclusive-color:#0099cc;--viewer-box-query-outline-exclusive-border-style:solid;--viewer-box-query-outline-inclusive-color:#00cc00;--viewer-box-query-outline-inclusive-border-style:dashed;--viewer-box-query-outline-border-radius:0.25rem;--viewer-box-query-outline-fill-opacity:0.25}.bounds{position:absolute}.outline{position:relative;width:100%;height:100%;box-sizing:border-box;border-radius:var(--viewer-box-query-outline-border-radius)}:host([exclusive=\"true\"]) .outline{border:3px var(--viewer-box-query-outline-exclusive-border-style) var(--viewer-box-query-outline-exclusive-color)}:host([inclusive=\"true\"]) .outline{border:3px var(--viewer-box-query-outline-inclusive-border-style) var(--viewer-box-query-outline-inclusive-color)}.fill{position:relative;width:100%;height:100%;opacity:var(--viewer-box-query-outline-fill-opacity)}:host([exclusive=\"true\"]) .fill{background-color:var(--viewer-box-query-outline-exclusive-color)}:host([inclusive=\"true\"]) .fill{background-color:var(--viewer-box-query-outline-inclusive-color)}";
+
+const ViewerBoxQueryTool = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The default operation to perform when a drag has completed and the intersection
+     * query will be run. Defaults to `select`, and can be changed to `deselect`.
+     *
+     * The operation behavior for this intersection query tool can also be changed by
+     * providing a custom implementation of the `VolumeIntersectionQueryController`, or
+     * by using the `setOperationTransform` method of the default controller.
+     */
+    this.operationType = 'select';
+    this.handleScreenBoundsChanged = this.handleScreenBoundsChanged.bind(this);
+  }
+  componentWillLoad() {
+    var _a;
+    this.model = (_a = this.model) !== null && _a !== void 0 ? _a : new VolumeIntersectionQueryModel();
+    this.screenBoundsChangedDisposable = this.model.onScreenBoundsChanged(this.handleScreenBoundsChanged);
+    this.handleViewerChanged(this.viewer);
+  }
+  disconnectedCallback() {
+    var _a, _b, _c;
+    (_a = this.model) === null || _a === void 0 ? void 0 : _a.reset();
+    (_b = this.screenBoundsChangedDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+    (_c = this.interactionHandler) === null || _c === void 0 ? void 0 : _c.dispose();
+  }
+  /**
+   * @ignore
+   */
+  handleViewerChanged(newViewer) {
+    this.deregisterInteractionHandler();
+    if (this.model != null && newViewer != null) {
+      this.controller = new VolumeIntersectionQueryController(this.model, newViewer);
+      this.handleDefaultOperationChange(this.operationType);
+      this.registerInteractionHandler(this.controller, newViewer);
+    }
+  }
+  /**
+   * @ignore
+   */
+  handleDefaultOperationChange(updatedOperationType) {
+    var _a;
+    (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setOperationTransform(updatedOperationType === 'select'
+      ? (builder) => builder.select()
+      : (builder) => builder.deselect());
+  }
+  /**
+   * @ignore
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("vertex-viewer-layer", null, this.details != null && (index.h("div", { class: "bounds", style: {
+        left: `${this.details.screenBounds.x}px`,
+        top: `${this.details.screenBounds.y}px`,
+        width: `${this.details.screenBounds.width}px`,
+        height: `${this.details.screenBounds.height}px`,
+      } }, index.h("slot", { name: "bounds" }, index.h("div", { class: "outline" }, index.h("div", { class: "fill" }))))))));
+  }
+  handleScreenBoundsChanged(details) {
+    this.details = details;
+    this.updateTypeAttribute(details === null || details === void 0 ? void 0 : details.type);
+  }
+  registerInteractionHandler(controller, viewer) {
+    this.interactionHandler = new VolumeIntersectionQueryInteractionHandler(controller);
+    viewer.registerInteractionHandler(this.interactionHandler);
+  }
+  deregisterInteractionHandler() {
+    var _a;
+    (_a = this.interactionHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+    this.interactionHandler = undefined;
+  }
+  updateTypeAttribute(type) {
+    this.hostEl.setAttribute('inclusive', `${type === 'inclusive'}`);
+    this.hostEl.setAttribute('exclusive', `${type === 'exclusive'}`);
+  }
+  get hostEl() { return index.getElement(this); }
+  static get watchers() { return {
+    "viewer": ["handleViewerChanged"],
+    "operationType": ["handleDefaultOperationChange"]
+  }; }
+};
+ViewerBoxQueryTool.style = viewerBoxQueryToolCss;
+
+exports.vertex_viewer_box_query_tool = ViewerBoxQueryTool;

package/dist/cjs/vertex-viewer-dom-element_2.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70db349e.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const browser_esm = require('./browser.esm-5d246754.js');
-require('./streamAttributes-c64aee75.js');
+require('./streamAttributes-7725f5c4.js');
 require('./entities-9eb7e608.js');
 const viewport = require('./viewport-5ca619f7.js');
 require('./_commonjsHelpers-dcc4cf71.js');

package/dist/cjs/vertex-viewer-measurement-details.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70db349e.js');
-const streamAttributes = require('./streamAttributes-c64aee75.js');
+const streamAttributes = require('./streamAttributes-7725f5c4.js');
 require('./entities-9eb7e608.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const index$1 = require('./index-b9d13137.js');

package/dist/cjs/vertex-viewer-measurement-distance.cjs.entry.js

@@ -9,9 +9,9 @@ const index = require('./index-70db349e.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const cursors = require('./cursors-85d403e9.js');
 const dom = require('./dom-8d90bfaf.js');
-require('./mapper-0f2294a6.js');
+require('./mapper-216603b0.js');
 require('./grpc-web-client.umd-2af20c1b.js');
-const streamAttributes = require('./streamAttributes-c64aee75.js');
+const streamAttributes = require('./streamAttributes-7725f5c4.js');
 const model = require('./model-20a70d27.js');
 const overlays = require('./overlays-b03ec80b.js');
 const results = require('./results-178e89a3.js');

package/dist/cjs/vertex-viewer-measurement-line_2.cjs.entry.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70db349e.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
-require('./mapper-0f2294a6.js');
+require('./mapper-216603b0.js');
 require('./grpc-web-client.umd-2af20c1b.js');
-require('./streamAttributes-c64aee75.js');
+require('./streamAttributes-7725f5c4.js');
 const overlays = require('./overlays-b03ec80b.js');
 const utils = require('./utils-2c8e2aa3.js');
 require('./_commonjsHelpers-dcc4cf71.js');

package/dist/cjs/vertex-viewer-measurement-precise.cjs.entry.js

@@ -6,11 +6,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70db349e.js');
-const mapper = require('./mapper-0f2294a6.js');
+const mapper = require('./mapper-216603b0.js');
 const grpcWebClient_umd = require('./grpc-web-client.umd-2af20c1b.js');
-const config = require('./config-6e330a82.js');
-const entities = require('./entities-7b2e8c03.js');
-require('./streamAttributes-c64aee75.js');
+const config = require('./config-4a86ae0b.js');
+const entities = require('./entities-496b61cd.js');
+require('./streamAttributes-7725f5c4.js');
 const model = require('./model-20a70d27.js');
 const overlays = require('./overlays-b03ec80b.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');

package/dist/cjs/vertex-viewer-pin-group.cjs.entry.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70db349e.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 require('./cursors-85d403e9.js');
-require('./mapper-0f2294a6.js');
+require('./mapper-216603b0.js');
 require('./grpc-web-client.umd-2af20c1b.js');
-require('./streamAttributes-c64aee75.js');
+require('./streamAttributes-7725f5c4.js');
 require('./entities-9eb7e608.js');
 const viewport = require('./viewport-5ca619f7.js');
 const model = require('./model-b61f4d20.js');

package/dist/cjs/vertex-viewer-transform-widget.cjs.entry.js

@@ -11,7 +11,7 @@ const index$1 = require('./index-b9d13137.js');
 const stencil = require('./stencil-fc92b387.js');
 const browser_esm = require('./browser.esm-5d246754.js');
 const _commonjsHelpers = require('./_commonjsHelpers-dcc4cf71.js');
-require('./streamAttributes-c64aee75.js');
+require('./streamAttributes-7725f5c4.js');
 require('./entities-9eb7e608.js');
 const viewport = require('./viewport-5ca619f7.js');
 

package/dist/cjs/vertex-viewer-view-cube.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70db349e.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
 const stencil = require('./stencil-fc92b387.js');
-const streamAttributes = require('./streamAttributes-c64aee75.js');
+const streamAttributes = require('./streamAttributes-7725f5c4.js');
 require('./entities-9eb7e608.js');
 const index$1 = require('./index-b9d13137.js');
 require('./browser.esm-5d246754.js');

package/dist/cjs/vertex-viewer.cjs.entry.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70db349e.js');
 const bundle_esm = require('./bundle.esm-22b6f2d6.js');
-const streamAttributes = require('./streamAttributes-c64aee75.js');
+const streamAttributes = require('./streamAttributes-7725f5c4.js');
 const browser_esm = require('./browser.esm-5d246754.js');
 const index$1 = require('./index-b9d13137.js');
-const config = require('./config-6e330a82.js');
+const config = require('./config-4a86ae0b.js');
 const cursors = require('./cursors-85d403e9.js');
 const dom = require('./dom-8d90bfaf.js');
-const scene = require('./scene-56438693.js');
+const scene = require('./scene-0ce59b26.js');
 const entities = require('./entities-9eb7e608.js');
 const viewport = require('./viewport-5ca619f7.js');
 require('./_commonjsHelpers-dcc4cf71.js');

package/dist/cjs/viewer.cjs.js

@@ -74,5 +74,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["vertex-viewer-pin-tool.cjs",[[1,"vertex-viewer-pin-tool",{"pinController":[1040],"pinModel":[16],"viewer":[16],"tool":[1025],"mode":[1025],"primaryColor":[1025,"primary-color"],"accentColor":[1025,"accent-color"],"pins":[32],"selectedPinId":[32],"elementBounds":[32],"projectionViewMatrix":[32]}]]],["vertex-scene-tree.cjs",[[1,"vertex-scene-tree",{"overScanCount":[2,"over-scan-count"],"viewerSelector":[1,"viewer-selector"],"viewer":[1040],"rowData":[16],"config":[1],"configEnv":[1,"config-env"],"controller":[1040],"metadataSearchExactMatch":[1028,"metadata-search-exact-match"],"metadataSearchKeys":[1040],"metadataKeys":[16],"rows":[32],"totalRows":[32],"showLoader":[32],"stateMap":[32],"errorDetails":[32],"attemptingRetry":[32],"invalidateRows":[64],"scrollToIndex":[64],"scrollToItem":[64],"expandAll":[64],"collapseAll":[64],"expandItem":[64],"collapseItem":[64],"toggleExpandItem":[64],"toggleItemVisibility":[64],"hideItem":[64],"showItem":[64],"selectItem":[64],"deselectItem":[64],"getRowAtIndex":[64],"getRowForEvent":[64],"getRowAtClientY":[64],"filterItems":[64],"selectFilteredItems":[64],"fetchMetadataKeys":[64]},[[0,"search","handleSearch"]]]]],["vertex-viewer-default-toolbar.cjs",[[1,"vertex-viewer-default-toolbar",{"viewer":[16],"placement":[1],"direction":[1],"animationsDisabled":[4,"animations-disabled"],"animationMs":[2,"animation-ms"]}]]],["vertex-viewer-markup.cjs",[[1,"vertex-viewer-markup",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"selectedMarkupId":[1025,"selected-markup-id"],"selectNew":[4,"select-new"],"toSelectMarkupId":[32],"pointerDownPosition":[32],"addMarkup":[64],"removeMarkup":[64],"getMarkupElements":[64],"getMarkupElement":[64]},[[0,"markupEnd","handleMarkupEnd"],[1,"pointerdown","handleMarkupPointerDown"]]]]],["vertex-viewer-markup-tool.cjs",[[1,"vertex-viewer-markup-tool",{"arrowTemplateId":[1,"arrow-template-id"],"circleTemplateId":[1,"circle-template-id"],"freeformTemplateId":[1,"freeform-template-id"],"tool":[1],"disabled":[4],"viewer":[16],"stateMap":[32],"reset":[64]}]]],["vertex-viewer-view-cube.cjs",[[1,"vertex-viewer-view-cube",{"xPositiveLabel":[1,"x-positive-label"],"xNegativeLabel":[1,"x-negative-label"],"yPositiveLabel":[1,"y-positive-label"],"yNegativeLabel":[1,"y-negative-label"],"zPositiveLabel":[1,"z-positive-label"],"zNegativeLabel":[1,"z-negative-label"],"standardViewsOff":[4,"standard-views-off"],"animationDuration":[2,"animation-duration"],"triadOff":[4,"triad-off"],"worldOrientation":[1040],"camera":[1040],"viewer":[16],"boxLength":[32],"triadPosition":[32]}]]],["vertex-viewer-measurement-distance.cjs",[[1,"vertex-viewer-measurement-distance",{"start":[1040],"startJson":[1,"start-json"],"end":[1040],"endJson":[1,"end-json"],"distance":[1026],"showAxisReferenceLines":[4,"show-axis-reference-lines"],"snapDistance":[2,"snap-distance"],"units":[1],"fractionalDigits":[2,"fractional-digits"],"labelFormatter":[16],"anchorLabelOffset":[2,"anchor-label-offset"],"lineCapLength":[2,"line-cap-length"],"mode":[513],"interactingAnchor":[1537,"interacting-anchor"],"invalid":[1540],"camera":[16],"hitProvider":[16],"indicatorPt":[1040],"viewer":[16],"measurementModel":[16],"viewport":[32],"elementBounds":[32],"interactionCount":[32],"internalCamera":[32],"invalidateStateCounter":[32],"stateMap":[32],"measurementUnits":[32],"computeElementMetrics":[64]}]]],["vertex-viewer-measurement-precise.cjs",[[1,"vertex-viewer-measurement-precise",{"measurementModel":[16],"measurementOverlays":[16],"measurementController":[1040],"measurableEntityTypes":[16],"viewer":[16],"configEnv":[1,"config-env"],"config":[1]}]]],["vertex-scene-tree-table-cell.cjs",[[1,"vertex-scene-tree-table-cell",{"node":[16],"tree":[16],"value":[1],"placeholder":[1],"hovered":[1028],"isScrolling":[4,"is-scrolling"],"expandToggle":[4,"expand-toggle"],"visibilityToggle":[4,"visibility-toggle"],"selectionHandler":[16],"visibilityHandler":[16],"expansionHandler":[16],"hoverController":[16]}]]],["vertex-scene-tree-table-column.cjs",[[1,"vertex-scene-tree-table-column",{"initialWidth":[2,"initial-width"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"]}]]],["vertex-scene-tree-table-header.cjs",[[1,"vertex-scene-tree-table-header"]]],["vertex-scene-tree-table-resize-divider.cjs",[[1,"vertex-scene-tree-table-resize-divider",{"dragging":[32]}]]],["vertex-scene-tree-toolbar-group.cjs",[[1,"vertex-scene-tree-toolbar-group"]]],["vertex-viewer.cjs",[[1,"vertex-viewer",{"src":[1],"clientId":[1,"client-id"],"deviceId":[1025,"device-id"],"config":[1],"configEnv":[1,"config-env"],"resolvedConfig":[1040],"cameraControls":[4,"camera-controls"],"cameraType":[1537,"camera-type"],"keyboardControls":[4,"keyboard-controls"],"rotateAroundTapPoint":[4,"rotate-around-tap-point"],"token":[1025],"depthBuffers":[1,"depth-buffers"],"experimentalGhostingOpacity":[2,"experimental-ghosting-opacity"],"noDefaultLights":[4,"no-default-lights"],"experimentalRenderingOptions":[1,"experimental-rendering-options"],"featureLines":[16],"featureHighlighting":[16],"featureMaps":[1,"feature-maps"],"selectionMaterial":[1,"selection-material"],"resizeDebounce":[2,"resize-debounce"],"frame":[1040],"stream":[1040],"stencilBuffer":[1040],"viewport":[1040],"dimensions":[32],"hostDimensions":[32],"errorMessage":[32],"cursor":[32],"stateMap":[32],"dispatchFrameDrawn":[64],"registerInteractionHandler":[64],"registerTapKeyInteraction":[64],"getInteractionTarget_DEPRECATED":[64],"addCursor":[64],"getInteractionHandlers":[64],"getKeyInteractions":[64],"getBaseInteractionHandler":[64],"getJwt":[64],"load":[64],"unload":[64],"scene":[64],"isSceneReady":[64]},[[0,"tap","handleTapEvent"]]]]],["vertex-viewer-measurement-details.cjs",[[1,"vertex-viewer-measurement-details",{"measurementModel":[16],"measurementOverlays":[16],"measurementOutcome":[1040],"distanceUnits":[1,"distance-units"],"angleUnits":[1,"angle-units"],"fractionalDigits":[2,"fractional-digits"],"distanceFormatter":[16],"angleFormatter":[16],"areaFormatter":[16],"resultTypes":[16],"overlay":[32],"distanceMeasurementUnits":[32],"angleMeasurementUnits":[32],"areaMeasurementUnits":[32]}]]],["vertex-viewer-transform-widget.cjs",[[1,"vertex-viewer-transform-widget",{"viewer":[16],"position":[1040],"controller":[1040],"hovered":[1040]}]]],["vertex-viewer-pin-group.cjs",[[0,"vertex-viewer-pin-group",{"pin":[16],"matrix":[1040],"projectionViewMatrix":[16],"elementBounds":[1040],"pinModel":[16],"pinController":[16],"selected":[4],"invalidateStateCounter":[32]}]]],["vertex-viewer-dom-group.cjs",[[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]}]]],["vertex-viewer-layer.cjs",[[1,"vertex-viewer-layer",{"stretchOff":[516,"stretch-off"]}]]],["vertex-viewer-spinner.cjs",[[1,"vertex-viewer-spinner",{"size":[1]}]]],["vertex-viewer-icon.cjs",[[1,"vertex-viewer-icon",{"name":[1],"size":[1]}]]],["vertex-scene-tree-search_3.cjs",[[1,"vertex-scene-tree-search",{"debounce":[2],"disabled":[4],"placeholder":[1],"controller":[16],"value":[1025],"focused":[32],"isSearching":[32],"setFocus":[64]}],[1,"vertex-scene-tree-table-layout",{"tree":[16],"controller":[16],"rows":[16],"totalRows":[2,"total-rows"],"rowHeight":[1026,"row-height"],"overScanCount":[2,"over-scan-count"],"rowData":[16],"layoutOffset":[1026,"layout-offset"],"scrollOffset":[1026,"scroll-offset"],"layoutHeight":[1026,"layout-height"],"layoutWidth":[1026,"layout-width"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"columnGridLayout":[32],"columnGridFixedLayout":[32],"isComputingCellHeight":[32],"lastDividerPointerPosition":[32],"resizingColumnIndex":[32],"isScrolling":[32],"scrollTimer":[32],"stateMap":[32],"scrollToPosition":[64]}],[1,"vertex-scene-tree-toolbar"]]],["vertex-viewer-button_3.cjs",[[1,"vertex-viewer-toolbar",{"placement":[1],"direction":[1]}],[1,"vertex-viewer-button"],[1,"vertex-viewer-toolbar-group",{"direction":[1]}]]],["vertex-viewer-pin-label_2.cjs",[[0,"vertex-viewer-pin-label",{"pin":[16],"elementBounds":[16],"value":[1025],"pinController":[16],"focused":[32],"computedScreenPosition":[32],"textareaRows":[32],"contentElBounds":[32],"setFocus":[64]}],[0,"vertex-viewer-pin-label-line",{"pinPoint":[16],"labelPoint":[16],"pin":[16]}]]],["vertex-viewer-measurement-line_2.cjs",[[1,"vertex-viewer-measurement-overlays",{"measurementOverlays":[16],"camera":[1040],"viewer":[16],"overlays":[32]}],[1,"vertex-viewer-measurement-line",{"start":[16],"end":[16],"capLength":[2,"cap-length"],"pointerEvents":[1,"pointer-events"]}]]],["vertex-viewer-dom-element_2.cjs",[[1,"vertex-viewer-dom-renderer",{"drawMode":[1,"draw-mode"],"viewer":[16],"camera":[1040],"depthBuffer":[1040],"viewport":[32],"invalidateFrameCounter":[32]},[[0,"propertyChange","handlePropertyChange"]]],[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"]}]]],["vertex-viewer-markup-arrow_3.cjs",[[1,"vertex-viewer-markup-arrow",{"start":[1040],"startJson":[1,"start"],"end":[1040],"endJson":[1,"end"],"mode":[513],"viewer":[16],"elementBounds":[32],"dispose":[64]}],[1,"vertex-viewer-markup-circle",{"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"dispose":[64]}],[1,"vertex-viewer-markup-freeform",{"points":[1040],"pointsJson":[1,"points"],"bounds":[1040],"boundsJson":[1,"bounds"],"mode":[513],"viewer":[16],"elementBounds":[32],"screenPoints":[32],"dispose":[64]}]]]], options);
+  return index.bootstrapLazy(JSON.parse("[[\"vertex-viewer-pin-tool.cjs\",[[1,\"vertex-viewer-pin-tool\",{\"pinController\":[1040],\"pinModel\":[16],\"viewer\":[16],\"tool\":[1025],\"mode\":[1025],\"primaryColor\":[1025,\"primary-color\"],\"accentColor\":[1025,\"accent-color\"],\"pins\":[32],\"selectedPinId\":[32],\"elementBounds\":[32],\"projectionViewMatrix\":[32]}]]],[\"vertex-scene-tree.cjs\",[[1,\"vertex-scene-tree\",{\"overScanCount\":[2,\"over-scan-count\"],\"viewerSelector\":[1,\"viewer-selector\"],\"viewer\":[1040],\"rowData\":[16],\"config\":[1],\"configEnv\":[1,\"config-env\"],\"controller\":[1040],\"metadataSearchExactMatch\":[1028,\"metadata-search-exact-match\"],\"metadataSearchKeys\":[1040],\"metadataKeys\":[16],\"rows\":[32],\"totalRows\":[32],\"showLoader\":[32],\"stateMap\":[32],\"errorDetails\":[32],\"attemptingRetry\":[32],\"invalidateRows\":[64],\"scrollToIndex\":[64],\"scrollToItem\":[64],\"expandAll\":[64],\"collapseAll\":[64],\"expandItem\":[64],\"collapseItem\":[64],\"toggleExpandItem\":[64],\"toggleItemVisibility\":[64],\"hideItem\":[64],\"showItem\":[64],\"selectItem\":[64],\"deselectItem\":[64],\"getRowAtIndex\":[64],\"getRowForEvent\":[64],\"getRowAtClientY\":[64],\"filterItems\":[64],\"selectFilteredItems\":[64],\"fetchMetadataKeys\":[64]},[[0,\"search\",\"handleSearch\"]]]]],[\"vertex-viewer-default-toolbar.cjs\",[[1,\"vertex-viewer-default-toolbar\",{\"viewer\":[16],\"placement\":[1],\"direction\":[1],\"animationsDisabled\":[4,\"animations-disabled\"],\"animationMs\":[2,\"animation-ms\"]}]]],[\"vertex-viewer-markup.cjs\",[[1,\"vertex-viewer-markup\",{\"arrowTemplateId\":[1,\"arrow-template-id\"],\"circleTemplateId\":[1,\"circle-template-id\"],\"freeformTemplateId\":[1,\"freeform-template-id\"],\"tool\":[1],\"disabled\":[4],\"viewer\":[16],\"selectedMarkupId\":[1025,\"selected-markup-id\"],\"selectNew\":[4,\"select-new\"],\"toSelectMarkupId\":[32],\"pointerDownPosition\":[32],\"addMarkup\":[64],\"removeMarkup\":[64],\"getMarkupElements\":[64],\"getMarkupElement\":[64]},[[0,\"markupEnd\",\"handleMarkupEnd\"],[1,\"pointerdown\",\"handleMarkupPointerDown\"]]]]],[\"vertex-viewer-markup-tool.cjs\",[[1,\"vertex-viewer-markup-tool\",{\"arrowTemplateId\":[1,\"arrow-template-id\"],\"circleTemplateId\":[1,\"circle-template-id\"],\"freeformTemplateId\":[1,\"freeform-template-id\"],\"tool\":[1],\"disabled\":[4],\"viewer\":[16],\"stateMap\":[32],\"reset\":[64]}]]],[\"vertex-viewer-view-cube.cjs\",[[1,\"vertex-viewer-view-cube\",{\"xPositiveLabel\":[1,\"x-positive-label\"],\"xNegativeLabel\":[1,\"x-negative-label\"],\"yPositiveLabel\":[1,\"y-positive-label\"],\"yNegativeLabel\":[1,\"y-negative-label\"],\"zPositiveLabel\":[1,\"z-positive-label\"],\"zNegativeLabel\":[1,\"z-negative-label\"],\"standardViewsOff\":[4,\"standard-views-off\"],\"animationDuration\":[2,\"animation-duration\"],\"triadOff\":[4,\"triad-off\"],\"worldOrientation\":[1040],\"camera\":[1040],\"viewer\":[16],\"boxLength\":[32],\"triadPosition\":[32]}]]],[\"vertex-viewer-measurement-distance.cjs\",[[1,\"vertex-viewer-measurement-distance\",{\"start\":[1040],\"startJson\":[1,\"start-json\"],\"end\":[1040],\"endJson\":[1,\"end-json\"],\"distance\":[1026],\"showAxisReferenceLines\":[4,\"show-axis-reference-lines\"],\"snapDistance\":[2,\"snap-distance\"],\"units\":[1],\"fractionalDigits\":[2,\"fractional-digits\"],\"labelFormatter\":[16],\"anchorLabelOffset\":[2,\"anchor-label-offset\"],\"lineCapLength\":[2,\"line-cap-length\"],\"mode\":[513],\"interactingAnchor\":[1537,\"interacting-anchor\"],\"invalid\":[1540],\"camera\":[16],\"hitProvider\":[16],\"indicatorPt\":[1040],\"viewer\":[16],\"measurementModel\":[16],\"viewport\":[32],\"elementBounds\":[32],\"interactionCount\":[32],\"internalCamera\":[32],\"invalidateStateCounter\":[32],\"stateMap\":[32],\"measurementUnits\":[32],\"computeElementMetrics\":[64]}]]],[\"vertex-viewer-measurement-precise.cjs\",[[1,\"vertex-viewer-measurement-precise\",{\"measurementModel\":[16],\"measurementOverlays\":[16],\"measurementController\":[1040],\"measurableEntityTypes\":[16],\"viewer\":[16],\"configEnv\":[1,\"config-env\"],\"config\":[1]}]]],[\"vertex-viewer-box-query-tool.cjs\",[[1,\"vertex-viewer-box-query-tool\",{\"viewer\":[16],\"controller\":[1040],\"model\":[1040],\"operationType\":[1,\"operation-type\"],\"details\":[32]}]]],[\"vertex-scene-tree-table-cell.cjs\",[[1,\"vertex-scene-tree-table-cell\",{\"node\":[16],\"tree\":[16],\"value\":[1],\"placeholder\":[1],\"hovered\":[1028],\"isScrolling\":[4,\"is-scrolling\"],\"expandToggle\":[4,\"expand-toggle\"],\"visibilityToggle\":[4,\"visibility-toggle\"],\"selectionHandler\":[16],\"visibilityHandler\":[16],\"expansionHandler\":[16],\"hoverController\":[16]}]]],[\"vertex-scene-tree-table-column.cjs\",[[1,\"vertex-scene-tree-table-column\",{\"initialWidth\":[2,\"initial-width\"],\"minWidth\":[2,\"min-width\"],\"maxWidth\":[2,\"max-width\"]}]]],[\"vertex-scene-tree-table-header.cjs\",[[1,\"vertex-scene-tree-table-header\"]]],[\"vertex-scene-tree-table-resize-divider.cjs\",[[1,\"vertex-scene-tree-table-resize-divider\",{\"dragging\":[32]}]]],[\"vertex-scene-tree-toolbar-group.cjs\",[[1,\"vertex-scene-tree-toolbar-group\"]]],[\"vertex-viewer.cjs\",[[1,\"vertex-viewer\",{\"src\":[1],\"clientId\":[1,\"client-id\"],\"deviceId\":[1025,\"device-id\"],\"config\":[1],\"configEnv\":[1,\"config-env\"],\"resolvedConfig\":[1040],\"cameraControls\":[4,\"camera-controls\"],\"cameraType\":[1537,\"camera-type\"],\"keyboardControls\":[4,\"keyboard-controls\"],\"rotateAroundTapPoint\":[4,\"rotate-around-tap-point\"],\"token\":[1025],\"depthBuffers\":[1,\"depth-buffers\"],\"experimentalGhostingOpacity\":[2,\"experimental-ghosting-opacity\"],\"noDefaultLights\":[4,\"no-default-lights\"],\"experimentalRenderingOptions\":[1,\"experimental-rendering-options\"],\"featureLines\":[16],\"featureHighlighting\":[16],\"featureMaps\":[1,\"feature-maps\"],\"selectionMaterial\":[1,\"selection-material\"],\"resizeDebounce\":[2,\"resize-debounce\"],\"frame\":[1040],\"stream\":[1040],\"stencilBuffer\":[1040],\"viewport\":[1040],\"dimensions\":[32],\"hostDimensions\":[32],\"errorMessage\":[32],\"cursor\":[32],\"stateMap\":[32],\"dispatchFrameDrawn\":[64],\"registerInteractionHandler\":[64],\"registerTapKeyInteraction\":[64],\"getInteractionTarget_DEPRECATED\":[64],\"addCursor\":[64],\"getInteractionHandlers\":[64],\"getKeyInteractions\":[64],\"getBaseInteractionHandler\":[64],\"getJwt\":[64],\"load\":[64],\"unload\":[64],\"scene\":[64],\"isSceneReady\":[64]},[[0,\"tap\",\"handleTapEvent\"]]]]],[\"vertex-viewer-measurement-details.cjs\",[[1,\"vertex-viewer-measurement-details\",{\"measurementModel\":[16],\"measurementOverlays\":[16],\"measurementOutcome\":[1040],\"distanceUnits\":[1,\"distance-units\"],\"angleUnits\":[1,\"angle-units\"],\"fractionalDigits\":[2,\"fractional-digits\"],\"distanceFormatter\":[16],\"angleFormatter\":[16],\"areaFormatter\":[16],\"resultTypes\":[16],\"overlay\":[32],\"distanceMeasurementUnits\":[32],\"angleMeasurementUnits\":[32],\"areaMeasurementUnits\":[32]}]]],[\"vertex-viewer-transform-widget.cjs\",[[1,\"vertex-viewer-transform-widget\",{\"viewer\":[16],\"position\":[1040],\"controller\":[1040],\"hovered\":[1040]}]]],[\"vertex-viewer-icon.cjs\",[[1,\"vertex-viewer-icon\",{\"name\":[1],\"size\":[1]}]]],[\"vertex-viewer-pin-group.cjs\",[[0,\"vertex-viewer-pin-group\",{\"pin\":[16],\"matrix\":[1040],\"projectionViewMatrix\":[16],\"elementBounds\":[1040],\"pinModel\":[16],\"pinController\":[16],\"selected\":[4],\"invalidateStateCounter\":[32]}]]],[\"vertex-viewer-dom-group.cjs\",[[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]}]]],[\"vertex-viewer-spinner.cjs\",[[1,\"vertex-viewer-spinner\",{\"size\":[1]}]]],[\"vertex-scene-tree-search_3.cjs\",[[1,\"vertex-scene-tree-search\",{\"debounce\":[2],\"disabled\":[4],\"placeholder\":[1],\"controller\":[16],\"value\":[1025],\"focused\":[32],\"isSearching\":[32],\"setFocus\":[64]}],[1,\"vertex-scene-tree-table-layout\",{\"tree\":[16],\"controller\":[16],\"rows\":[16],\"totalRows\":[2,\"total-rows\"],\"rowHeight\":[1026,\"row-height\"],\"overScanCount\":[2,\"over-scan-count\"],\"rowData\":[16],\"layoutOffset\":[1026,\"layout-offset\"],\"scrollOffset\":[1026,\"scroll-offset\"],\"layoutHeight\":[1026,\"layout-height\"],\"layoutWidth\":[1026,\"layout-width\"],\"viewportStartIndex\":[1026,\"viewport-start-index\"],\"viewportEndIndex\":[1026,\"viewport-end-index\"],\"columnGridLayout\":[32],\"columnGridFixedLayout\":[32],\"isComputingCellHeight\":[32],\"lastDividerPointerPosition\":[32],\"resizingColumnIndex\":[32],\"isScrolling\":[32],\"scrollTimer\":[32],\"stateMap\":[32],\"scrollToPosition\":[64]}],[1,\"vertex-scene-tree-toolbar\"]]],[\"vertex-viewer-layer.cjs\",[[1,\"vertex-viewer-layer\",{\"stretchOff\":[516,\"stretch-off\"]}]]],[\"vertex-viewer-button_3.cjs\",[[1,\"vertex-viewer-toolbar\",{\"placement\":[1],\"direction\":[1]}],[1,\"vertex-viewer-button\"],[1,\"vertex-viewer-toolbar-group\",{\"direction\":[1]}]]],[\"vertex-viewer-pin-label_2.cjs\",[[0,\"vertex-viewer-pin-label\",{\"pin\":[16],\"elementBounds\":[16],\"value\":[1025],\"pinController\":[16],\"focused\":[32],\"computedScreenPosition\":[32],\"textareaRows\":[32],\"contentElBounds\":[32],\"setFocus\":[64]}],[0,\"vertex-viewer-pin-label-line\",{\"pinPoint\":[16],\"labelPoint\":[16],\"pin\":[16]}]]],[\"vertex-viewer-measurement-line_2.cjs\",[[1,\"vertex-viewer-measurement-overlays\",{\"measurementOverlays\":[16],\"camera\":[1040],\"viewer\":[16],\"overlays\":[32]}],[1,\"vertex-viewer-measurement-line\",{\"start\":[16],\"end\":[16],\"capLength\":[2,\"cap-length\"],\"pointerEvents\":[1,\"pointer-events\"]}]]],[\"vertex-viewer-dom-element_2.cjs\",[[1,\"vertex-viewer-dom-renderer\",{\"drawMode\":[1,\"draw-mode\"],\"viewer\":[16],\"camera\":[1040],\"depthBuffer\":[1040],\"viewport\":[32],\"invalidateFrameCounter\":[32]},[[0,\"propertyChange\",\"handlePropertyChange\"]]],[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\"]}]]],[\"vertex-viewer-markup-arrow_3.cjs\",[[1,\"vertex-viewer-markup-arrow\",{\"start\":[1040],\"startJson\":[1,\"start\"],\"end\":[1040],\"endJson\":[1,\"end\"],\"mode\":[513],\"viewer\":[16],\"elementBounds\":[32],\"dispose\":[64]}],[1,\"vertex-viewer-markup-circle\",{\"bounds\":[1040],\"boundsJson\":[1,\"bounds\"],\"mode\":[513],\"viewer\":[16],\"elementBounds\":[32],\"dispose\":[64]}],[1,\"vertex-viewer-markup-freeform\",{\"points\":[1040],\"pointsJson\":[1,\"points\"],\"bounds\":[1040],\"boundsJson\":[1,\"bounds\"],\"mode\":[513],\"viewer\":[16],\"elementBounds\":[32],\"screenPoints\":[32],\"dispose\":[64]}]]]]"), options);
 });

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "./components/scene-tree/scene-tree.js",
     "./components/scene-tree-table-cell/scene-tree-table-cell.js",
     "./components/viewer/viewer.js",
+    "./components/viewer-box-query-tool/viewer-box-query-tool.js",
     "./components/viewer-toolbar/viewer-toolbar.js",
     "./components/viewer-toolbar-group/viewer-toolbar-group.js",
     "./components/viewer-dom-renderer/viewer-dom-renderer.js",

package/dist/collection/components/viewer-box-query-tool/viewer-box-query-tool.css

@@ -0,0 +1,74 @@
+:host {
+  /**
+   * @prop --viewer-box-query-outline-exclusive-color: A CSS color that
+   * specifies the color of box for an exclusive query. This will
+   * be used in combination with `--viewer-box-query-outline-fill-opacity`
+   * for the background color of the box. Defaults to `#0099cc`.
+   */
+  --viewer-box-query-outline-exclusive-color: #0099cc;
+  /**
+   * @prop --viewer-box-query-outline-exclusive-border-style: A border
+   * style that specifies the type of border to display around the box for an
+   * exclusive query. Defaults to `solid`.
+   */
+  --viewer-box-query-outline-exclusive-border-style: solid;
+  /**
+   * @prop --viewer-box-query-outline-inclusive-color: A CSS color that
+   * specifies the color of box for an inclusive query. This will
+   * be used in combination with `--viewer-box-query-outline-fill-opacity`
+   * for the background color of the box. Defaults to `#00cc00`.
+   */
+  --viewer-box-query-outline-inclusive-color: #00cc00;
+  /**
+   * @prop --viewer-box-query-outline-inclusive-border-style: A border
+   * style that specifies the type of border to display around the box for an
+   * inclusive query. Defaults to `dashed`.
+   */
+  --viewer-box-query-outline-inclusive-border-style: dashed;
+  /**
+   * @prop --viewer-box-query-outline-border-radius: A CSS length that
+   * specifies the border radius of the drawn box. Defaults to `0.25rem`.
+   */
+  --viewer-box-query-outline-border-radius: 0.25rem;
+  /**
+   * @prop--viewer-box-query-outline-fill-opacity: A number between 
+   * 0 and 1 that specifies the opacity of the background of the drawn box.
+   * Defaults to `0.25`.
+   */
+  --viewer-box-query-outline-fill-opacity: 0.25;
+}
+
+.bounds {
+  position: absolute;
+}
+
+.outline {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--viewer-box-query-outline-border-radius);
+}
+
+:host([exclusive="true"]) .outline {
+  border: 3px var(--viewer-box-query-outline-exclusive-border-style) var(--viewer-box-query-outline-exclusive-color);
+}
+
+:host([inclusive="true"]) .outline {
+  border: 3px var(--viewer-box-query-outline-inclusive-border-style) var(--viewer-box-query-outline-inclusive-color);
+}
+
+.fill {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: var(--viewer-box-query-outline-fill-opacity);
+}
+
+:host([exclusive="true"]) .fill {
+  background-color: var(--viewer-box-query-outline-exclusive-color);
+}
+
+:host([inclusive="true"]) .fill {
+  background-color: var(--viewer-box-query-outline-inclusive-color);
+}