@avs/go 0.14.71999 → 0.14.72008

package/dist/avs-go-dataviz.js

@@ -0,0 +1,2090 @@
+/**
+ * @license
+ * Copyright 2018 Advanced Visual Systems Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This product includes software developed at
+ * Advanced Visual Systems Inc. (http://www.avs.com)
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { AvsElementMixin } from './avs-element-mixin.js';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { AvsRenderer } from './avs-renderer.js';
+import { Viewer, TransformInteractor, PanInteractor, ZoomRectangleInteractor, PickDepthEnum, Animator } from '../lib/avs-three.module.min.js';
+import { AVS, PLAY, CAMERA, TIMELAPSE, HOME, DELETE, COPY, LINK } from './icons.js';
+import { Euler, Vector3, Quaternion } from 'three';
+import { Renderer } from './types.js';
+const ro = new ResizeObserver((entries, observer) => {
+    entries.forEach((entry) => {
+        const target = entry.target;
+        target._onResize(entry.contentRect);
+    });
+});
+/**
+ * `avs-go-dataviz` is a Lit element which requests a data visualization
+ * from either the `sceneName` class on the AVS/Go server application running at `url`,
+ * or from a JSON file at `url` when `urlLoadJsonFile` is set.
+ *
+ * The request occurs upon:
+ * * An explicit call to `updateViewer()`
+ * * A change in `renderer`
+ * * Additionally if `manualUpdate` is false:
+ * * * Initialization of this element has completed
+ * * * This element is resized outside of the `resizeThresold` percentage
+ *
+ * @customElement
+ * @lit
+ * @applysMixin AvsElementMixin
+ */
+let AvsGoDataViz = class AvsGoDataViz extends AvsElementMixin(LitElement) {
+    render() {
+        return html `
+      <style>
+        :host {
+          display:block;
+          width:100%;
+          height:100%;
+          overflow:hidden;
+          position:relative;
+          letter-spacing:normal;
+          word-spacing:normal;
+          line-height:normal;
+          text-indent:0;
+          text-transform:none;
+          direction:ltr;
+        }
+        #dataVizDiv {
+          position:relative;
+          width:100%;
+          height:100%;
+        }
+        #motionCapture {
+          display: none;
+          position:absolute;
+          top: 8px;
+          left: 8px;
+          padding: 8px;
+          background-color: rgba(128, 128, 128, 0.8);
+          font-size: 10pt;
+          border-radius: 8px;
+          background:var(--avs-motion-capture-background, rgba(80,80,80,0.75));
+          color:var(--avs-motion-capture-color, #ffffff);
+          font-family:var(--avs-motion-capture-font-family);
+          box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+          user-select: none;
+        }
+        #motionCaptureTitle {
+          margin-bottom: 4px;
+          font-weight: 700;
+        }
+        .btn {
+          padding: 4px;
+          border-radius: 4px;
+          margin: 2px;
+          background:var(--avs-motion-capture-control-background, white);
+          color:var(--avs-motion-capture-control-color, black);
+          display: inline-flex;
+          align-items: center;
+          box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003;
+        }
+        a.btn {
+          cursor: pointer;
+        }
+        .btn.disabled {
+          cursor: default;
+          pointer-events: none;
+          box-shadow: none;
+          background-color: darkgrey;
+          color: grey;
+        }
+        #motionCaptureSnapshotIcon, #motionCaptureDelayIcon {
+          height: 24px;
+        }
+        #motionCaptureSnapshotLabel, #motionCaptureDelayLabel {
+          margin-left: 4px;
+          height: 14px;
+        }
+        #motionCaptureDelayWheel {
+          display: flex;
+          flex-direction: column;
+          margin: 0 4px;
+          height: 24px;
+          gap: 2px;
+        }
+        #motionCaptureDelayIncrease, #motionCaptureDelayDecrease {
+          height: 8px;
+          text-align: center;
+          font-weight: 700;
+          cursor: pointer;
+        }
+        #motionCaptureReset, #motionCaptureCopyData {
+          margin-left: 12px;
+        }
+        #sceneImage {
+          width:100%;
+          height:100%;
+          position:absolute;
+          outline:none;
+        }   
+        #rectCanvas {
+          position:absolute;
+          top:0px;
+          left:0px;
+        }
+        #zoomOverlay {
+          position:absolute;
+          opacity:0;
+          transition:opacity ease 0.3s;
+          pointer-events:none;
+          background:var(--avs-zoom-overlay-background, rgba(80,80,80,0.75));
+          color:var(--avs-zoom-overlay-color, #ffffff);
+          border-radius:5px;
+          padding:5px;
+          transform:translate(-50%, -100%);
+          font-size:var(--avs-zoom-overlay-font-size, 10pt);
+          font-family:var(--avs-zoom-overlay-font-family);
+          font-weight:var(--avs-zoom-overlay-font-weight, bold);
+          font-style:var(--avs-zoom-overlay-font-style);
+        }
+        #tooltip, #motionCaptureTooltip, #motionCaptureAlert {
+          position:absolute;
+          opacity:0;
+          transition:opacity ease 0.3s;
+          pointer-events:none;
+          padding:5px;
+          border-radius:5px;
+          background:var(--avs-tooltip-background, rgb(80,80,80));
+          color:var(--avs-tooltip-color, #ffffff);
+          box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+          font-size:var(--avs-tooltip-font-size, 10pt);
+          font-family:var(--avs-tooltip-font-family);
+          font-weight:var(--avs-tooltip-font-weight);
+          font-style:var(--avs-tooltip-font-style);
+        }
+        #motionCaptureAlert {
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+        #spinnerDiv {
+          position:absolute;
+          left:var(--avs-spinner-left, 50%);
+          top:var(--avs-spinner-top, 50%);
+          transform:var(--avs-spinner-transform, translate(-50%,-50%));
+        }
+        #spinner {
+          display:none;
+        }
+        .spin {
+          -webkit-animation:spin 2s ease-in-out infinite;
+           -moz-animation:spin 2s ease-in-out infinite;
+           animation:spin 2s ease-in-out infinite;
+        }
+        .spinnerBackground {
+          fill:var(--avs-spinner-background-color, rgb(0,0,0,0));
+          stroke-width:0.0160303
+        }
+        @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+        @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+        @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+      </style>
+        <div id="dataVizDiv"></div>
+        <div id="motionCapture">
+          <div style="display: flex; justify-content: center" id="motionCaptureTitle">Motion Capture</div>
+          <div>
+            <a class="btn disabled" id="motionCapturePlay" data-tooltip="Play motion capture" @click="${this.runAnimation}" @pointermove="${this._handlePointerEnterMotionCaptureControl}" @pointerout="${this._handlePointerLeaveMotionCaptureControl}">${unsafeSVG(PLAY)}</a>
+            <a class="btn" id="motionCaptureSnapshot" data-tooltip="Take snapshot" @click="${this._handleMotionCaptureSnapshot}" @pointermove="${this._handlePointerEnterMotionCaptureControl}" @pointerout="${this._handlePointerLeaveMotionCaptureControl}">
+              <div id="motionCaptureSnapshotIcon">${unsafeSVG(CAMERA)}</div>
+              <div id="motionCaptureSnapshotLabel">0</div>
+            </a>
+            <div class="btn disabled" id="motionCaptureDelay" data-tooltip="Frame delay (seconds)" @pointermove="${this._handlePointerEnterMotionCaptureControl}" @pointerout="${this._handlePointerLeaveMotionCaptureControl}">
+              <div id="motionCaptureDelayIcon">${unsafeSVG(TIMELAPSE)}</div>
+              <div id="motionCaptureDelayLabel">0</div>
+              <div id="motionCaptureDelayWheel">
+                <a id="motionCaptureDelayIncrease" @click="${this._handleMotionCaptureDelayIncrease}">+</a>
+                <a id="motionCaptureDelayDecrease" @click="${this._handleMotionCaptureDelayDecrease}">-</a>
+              </div>
+            </div>
+            <a class="btn" id="motionCaptureReset" data-tooltip="Reset transform" @click="${this.resetTransform}" @pointermove="${this._handlePointerEnterMotionCaptureControl}" @pointerout="${this._handlePointerLeaveMotionCaptureControl}">${unsafeSVG(HOME)}</a>
+            <a class="btn disabled" id="motionCaptureClear" data-tooltip="Clear motion capture frames" @click="${this._handleMotionCaptureClear}" @pointermove="${this._handlePointerEnterMotionCaptureControl}" @pointerout="${this._handlePointerLeaveMotionCaptureControl}">${unsafeSVG(DELETE)}</a>
+            <a class="btn disabled" id="motionCaptureCopyData" data-tooltip="Copy motion capture data to clipboard" @click="${this._handleMotionCaptureCopyData}" @pointermove="${this._handlePointerEnterMotionCaptureControl}" @pointerout="${this._handlePointerLeaveMotionCaptureControl}">${unsafeSVG(COPY)}</a>
+            <a class="btn disabled" id="motionCaptureCopyUrl" data-tooltip="Copy motion capture URL to clipboard" @click="${this._handleMotionCaptureCopyUrl}" @pointermove="${this._handlePointerEnterMotionCaptureControl}" @pointerout="${this._handlePointerLeaveMotionCaptureControl}">${unsafeSVG(LINK)}</a>
+          </div>
+        </div>
+        <div id="motionCaptureTooltip"></div>
+        <div id="motionCaptureAlert"></div>
+        <div id="zoomOverlay"></div>
+        <div id="spinnerDiv">
+          <div id="spinner"></div>
+        </div>
+        <div id="tooltip"></div>
+    `;
+    }
+    /**
+     * Default line style and color
+     */
+    _rectangleStyle() {
+        this.rectCtx.setLineDash([3]);
+        this.rectCtx.strokeStyle = "#ff0000";
+    }
+    /**
+     * Assemble the model from our properties to send to the server.
+     */
+    _assembleModel(fullReset) {
+        if (!this.sceneName) {
+            this._dispatchErrorEvent("'scene-name' property must be set to the name of the scene registered in the library map on the AVS/Go server.");
+            return undefined;
+        }
+        if (!this.width || !this.height) {
+            return undefined;
+        }
+        // Scene Properties
+        const model = {
+            sceneProperties: {
+                name: this.sceneName
+            }
+        };
+        if (this.sceneUserProperties) {
+            let sceneUserProperties;
+            try {
+                sceneUserProperties = JSON.parse(this.sceneUserProperties);
+            }
+            catch (error) {
+                this._dispatchErrorEvent("Can't parse 'scene-user-properties'. " + error.message);
+                return undefined;
+            }
+            model.sceneProperties.userProperties = sceneUserProperties;
+        }
+        // Renderer Properties
+        const rendererProperties = {
+            width: this.width,
+            height: this.height,
+            name: this.rendererName,
+            type: this.renderer
+        };
+        if (this.rendererUserProperties) {
+            let rendererUserProperties;
+            try {
+                rendererUserProperties = JSON.parse(this.rendererUserProperties);
+            }
+            catch (error) {
+                this._dispatchErrorEvent("Can't parse 'renderer-user-properties'. " + error.message);
+                return undefined;
+            }
+            rendererProperties.userProperties = rendererUserProperties;
+        }
+        model.rendererProperties = rendererProperties;
+        // Transform Properties
+        if (this.transformInteractor) {
+            // Update the local transform matrix from the transform interactor, we may have transformed since the last request
+            this.transformMatrix = this.transformInteractor.object.matrix.elements.slice();
+            //      this.transformClientOnly = this.transformInteractor.clientOnly;
+        }
+        if (this.transformMatrix && !this.transformClientOnly) {
+            rendererProperties.transformMatrix = this.transformMatrix;
+        }
+        if (fullReset) {
+            if (this.transformClientOnly && this.transformInteractor) {
+                this.transformInteractor.fullReset = fullReset;
+            }
+            else {
+                rendererProperties.fullReset = true;
+            }
+        }
+        // PanInteractor
+        if (this.panEnable) {
+            rendererProperties.panProperties = {
+                widthZoomLevel: Math.min(this.panWidthZoomLevel, this.panMaximumZoomLevel),
+                heightZoomLevel: Math.min(this.panHeightZoomLevel, this.panMaximumZoomLevel)
+            };
+        }
+        // Base theme to use from themeName property
+        rendererProperties.themeName = this.themeName;
+        var style = window.getComputedStyle(this, null);
+        // Theme Properties from page CSS
+        var cssBackgroundColor = style.getPropertyValue("background-color").trim();
+        var cssColor = style.getPropertyValue("color").trim();
+        var cssFontFamily = style.getPropertyValue("font-family").trim().replace(/['"]+/g, '');
+        rendererProperties.cssProperties = {
+            sceneBackgroundType: "Solid",
+            sceneBackgroundColor: cssBackgroundColor,
+            sceneLineColor: cssColor,
+            sceneTextColor: cssColor,
+            sceneFontFamily: cssFontFamily,
+            sceneSurfaceColor: cssColor
+        };
+        // Theme Properties from custom CSS
+        this._applyCustomCssProperties(rendererProperties.cssProperties, style, {
+            // Scene
+            "sceneBackgroundType": "--avs-scene-background-type",
+            "sceneBackgroundColor": "--avs-scene-background-color",
+            "sceneBackgroundStartColor": "--avs-scene-background-start-color",
+            "sceneBackgroundEndColor": "--avs-scene-background-end-color",
+            "sceneBackgroundGradientStyle": "--avs-scene-background-gradient-style",
+            "sceneBackgroundGradientInterpolation": "--avs-scene-background-gradient-interpolation",
+            "sceneBackgroundGradientColorRepeat": "--avs-scene-background-gradient-color-repeat",
+            "sceneHighlightColor": "--avs-scene-highlight-color",
+            "sceneSurfaceColor": "--avs-scene-surface-color",
+            "scenePointColor": "--avs-scene-point-color",
+            "sceneLineColor": "--avs-scene-line-color",
+            "sceneLineWidth": "--avs-scene-line-width",
+            "sceneTextColor": "--avs-scene-text-color",
+            "sceneTextRotation": "--avs-scene-text-rotation",
+            "sceneFontFamily": "--avs-scene-font-family",
+            "sceneFontStyle": "--avs-scene-font-style",
+            "sceneFontWeight": "--avs-scene-font-weight",
+            "sceneFontSize": "--avs-scene-font-size",
+            // Scene title
+            "sceneTitleTextColor": "--avs-scene-title-text-color",
+            "sceneTitleTextRotation": "--avs-scene-title-text-rotation",
+            "sceneTitleFontFamily": "--avs-scene-title-font-family",
+            "sceneTitleFontStyle": "--avs-scene-title-font-style",
+            "sceneTitleFontWeight": "--avs-scene-title-font-weight",
+            "sceneTitleFontSize": "--avs-scene-title-font-size",
+            // Chart
+            "chartBackgroundType": "--avs-chart-background-type",
+            "chartBackgroundColor": "--avs-chart-background-color",
+            "chartBackgroundStartColor": "--avs-chart-background-start-color",
+            "chartBackgroundEndColor": "--avs-chart-background-end-color",
+            "chartBackgroundGradientStyle": "--avs-chart-background-gradient-style",
+            "chartBackgroundGradientInterpolation": "--avs-chart-background-gradient-interpolation",
+            "chartBackgroundGradientColorRepeat": "--avs-chart-background-gradient-color-repeat",
+            "chartHighlightColor": "--avs-chart-highlight-color",
+            "chartSurfaceColor": "--avs-chart-surface-color",
+            "chartPointColor": "--avs-chart-point-color",
+            "chartLineColor": "--avs-chart-line-color",
+            "chartLineWidth": "--avs-chart-line-width",
+            "chartLinePattern": "--avs-chart-line-pattern",
+            "chartTextColor": "--avs-chart-text-color",
+            "chartTextRotation": "--avs-chart-text-rotation",
+            "chartFontFamily": "--avs-chart-font-family",
+            "chartFontStyle": "--avs-chart-font-style",
+            "chartFontWeight": "--avs-chart-font-weight",
+            "chartFontSize": "--avs-chart-font-size",
+            // Chart title
+            "chartTitleTextColor": "--avs-chart-title-text-color",
+            "chartTitleTextRotation": "--avs-chart-title-text-rotation",
+            "chartTitleFontFamily": "--avs-chart-title-font-family",
+            "chartTitleFontStyle": "--avs-chart-title-font-style",
+            "chartTitleFontWeight": "--avs-chart-title-font-weight",
+            "chartTitleFontSize": "--avs-chart-title-font-size",
+            // Axis
+            "axisLineColor": "--avs-axis-line-color",
+            "axisLineWidth": "--avs-axis-line-width",
+            "axisTextColor": "--avs-axis-text-color",
+            "axisTextRotation": "--avs-axis-text-rotation",
+            "axisFontFamily": "--avs-axis-font-family",
+            "axisFontStyle": "--avs-axis-font-style",
+            "axisFontWeight": "--avs-axis-font-weight",
+            "axisFontSize": "--avs-axis-font-size",
+            // Axis axle
+            "axisAxleColor": "--avs-axis-axle-color",
+            "axisAxleWidth": "--avs-axis-axle-width",
+            // Axis major tick marks
+            "axisMajorTickMarkColor": "--avs-axis-major-tick-mark-color",
+            "axisMajorTickMarkWidth": "--avs-axis-major-tick-mark-width",
+            // Axis major tick lines
+            "axisMajorTickLineColor": "--avs-axis-major-tick-line-color",
+            "axisMajorTickLineWidth": "--avs-axis-major-tick-line-width",
+            "axisMajorTickLineStyle": "--avs-axis-major-tick-line-style",
+            // Axis major unlabeled tick marks
+            "axisMajorUnlabeledTickMarkColor": "--avs-axis-major-unlabeled-tick-mark-color",
+            "axisMajorUnlabeledTickMarkWidth": "--avs-axis-major-unlabeled-tick-mark-width",
+            // Axis major unlabeled tick lines
+            "axisMajorUnlabeledTickLineColor": "--avs-axis-major-unlabeled-tick-line-color",
+            "axisMajorUnlabeledTickLineWidth": "--avs-axis-major-unlabeled-tick-line-width",
+            "axisMajorUnlabeledTickLineStyle": "--avs-axis-major-unlabeled-tick-line-style",
+            // Axis minor tick marks
+            "axisMinorTickMarkColor": "--avs-axis-minor-tick-mark-color",
+            "axisMinorTickMarkWidth": "--avs-axis-minor-tick-mark-width",
+            // Axis minor tick lines
+            "axisMinorTickLineColor": "--avs-axis-minor-tick-line-color",
+            "axisMinorTickLineWidth": "--avs-axis-minor-tick-line-width",
+            "axisMinorTickLineStyle": "--avs-axis-minor-tick-line-style",
+            // Axis title
+            "axisTitleTextColor": "--avs-axis-title-text-color",
+            "axisTitleTextRotation": "--avs-axis-title-text-rotation",
+            "axisTitleFontFamily": "--avs-axis-title-font-family",
+            "axisTitleFontStyle": "--avs-axis-title-font-style",
+            "axisTitleFontWeight": "--avs-axis-title-font-weight",
+            "axisTitleFontSize": "--avs-axis-title-font-size",
+            // Axis unit
+            "axisUnitTextColor": "--avs-axis-unit-text-color",
+            "axisUnitTextRotation": "--avs-axis-unit-text-rotation",
+            "axisUnitFontFamily": "--avs-axis-unit-font-family",
+            "axisUnitFontStyle": "--avs-axis-unit-font-style",
+            "axisUnitFontWeight": "--avs-axis-unit-font-weight",
+            "axisUnitFontSize": "--avs-axis-unit-font-size",
+            // Axis labels
+            "axisLabelTextColor": "--avs-axis-label-text-color",
+            "axisLabelTextRotation": "--avs-axis-label-text-rotation",
+            "axisLabelFontFamily": "--avs-axis-label-font-family",
+            "axisLabelFontStyle": "--avs-axis-label-font-style",
+            "axisLabelFontWeight": "--avs-axis-label-font-weight",
+            "axisLabelFontSize": "--avs-axis-label-font-size",
+            // Legend
+            "legendBackgroundColor": "--avs-legend-background-color",
+            "legendTextColor": "--avs-legend-text-color",
+            "legendTextRotation": "--avs-legend-text-rotation",
+            "legendFontFamily": "--avs-legend-font-family",
+            "legendFontStyle": "--avs-legend-font-style",
+            "legendFontWeight": "--avs-legend-font-weight",
+            "legendFontSize": "--avs-legend-font-size",
+            "legendPointColor": "--avs-legend-point-color",
+            // Legend title
+            "legendTitleTextColor": "--avs-legend-title-text-color",
+            "legendTitleTextRotation": "--avs-legend-title-text-rotation",
+            "legendTitleFontFamily": "--avs-legend-title-font-family",
+            "legendTitleFontStyle": "--avs-legend-title-font-style",
+            "legendTitleFontWeight": "--avs-legend-title-font-weight",
+            "legendTitleFontSize": "--avs-legend-title-font-size"
+        });
+        // Data source properties
+        if (this.dataSourceName) {
+            model.dataSourceProperties = {
+                name: this.dataSourceName
+            };
+            if (this.dataSourceUserProperties) {
+                let dataSourceUserProperties;
+                try {
+                    dataSourceUserProperties = JSON.parse(this.dataSourceUserProperties);
+                }
+                catch (error) {
+                    this._dispatchErrorEvent("Can't parse 'data-source-user-properties'. " + error.message);
+                    return undefined;
+                }
+                model.dataSourceProperties.userProperties = dataSourceUserProperties;
+            }
+        }
+        // Stream properties
+        if (this.threeViewer) {
+            if (this.streamEnable) {
+                rendererProperties.streamProperties = {
+                    chunkSizeFirst: this.streamChunkSizeFirst,
+                    chunkSize: this.streamChunkSize
+                };
+            }
+        }
+        return model;
+    }
+    /**
+     *
+     */
+    _applyCustomCssProperties(cssProperties, style, values) {
+        for (var key in values) {
+            if (values.hasOwnProperty(key)) {
+                var css = style.getPropertyValue(values[key]).trim();
+                if (css.length > 0) {
+                    cssProperties[key] = css;
+                }
+            }
+        }
+    }
+    /**
+     *
+     */
+    _onResize(contentRect) {
+        // Get the width & height provided by our container
+        this.width = Math.round(contentRect.width);
+        this.height = Math.round(contentRect.height);
+        if (this.rectCanvas) {
+            this.rectCanvas.width = this.width;
+            this.rectCanvas.height = this.height;
+        }
+        // Check if we need to acquire a new scene due to
+        // the size change and other properties
+        if (!this.urlLoadJsonFile &&
+            !this.manualUpdate &&
+            this.resizeThreshold > 0 &&
+            (!this.lowResizeWidth ||
+                this.width < this.lowResizeWidth ||
+                this.width > this.highResizeWidth ||
+                this.height < this.lowResizeHeight ||
+                this.height > this.highResizeHeight)) {
+            this._updateResizeLimits();
+            this.updateViewer();
+        }
+        else {
+            if (this.threeViewer) {
+                this.threeViewer.render(true);
+            }
+        }
+    }
+    _updateResizeLimits() {
+        this.lowResizeWidth = (100 - this.resizeThreshold) / 100 * this.width;
+        this.highResizeWidth = (100 + this.resizeThreshold) / 100 * this.width;
+        this.lowResizeHeight = (100 - this.resizeThreshold) / 100 * this.height;
+        this.highResizeHeight = (100 + this.resizeThreshold) / 100 * this.height;
+    }
+    showSpinner() {
+        var spinner = window.getComputedStyle(this, null).getPropertyValue("--avs-spinner").trim().replace(/['"]+/g, '');
+        if (spinner.length > 0) {
+            fetch(spinner)
+                .then((response) => {
+                if (response.ok) {
+                    return response.text();
+                }
+            })
+                .then((html) => {
+                this.renderRoot.querySelector('#spinner').innerHTML = html;
+            })
+                .catch((error) => {
+                this.renderRoot.querySelector('#spinner').innerHTML = AVS;
+            });
+        }
+        else {
+            this.renderRoot.querySelector('#spinner').innerHTML = AVS;
+        }
+        const spinnerEl = this.renderRoot.querySelector('#spinner');
+        spinnerEl.style.display = 'block';
+    }
+    hideSpinner() {
+        const spinnerEl = this.renderRoot.querySelector('#spinner');
+        spinnerEl.style.display = 'none';
+    }
+    startSpinner() {
+        this.renderRoot.querySelector('#spinner').className = 'spin';
+    }
+    stopSpinner() {
+        this.renderRoot.querySelector('#spinner').className = '';
+    }
+    /**
+     * At least one of the properties was changed.
+     */
+    updated(changedProperties) {
+        if (!Object.values(Renderer)?.includes(this.renderer)) {
+            this._dispatchErrorEvent("'renderer' property must be 'IMAGE', 'SVG' or 'THREEJS'.");
+            return;
+        }
+        if (changedProperties.has('renderer')) {
+            this._rendererChanged(this.renderer, changedProperties['renderer']);
+        }
+        if (changedProperties.has('transformEnable')) {
+            this._transformEnableChanged(this.transformEnable, changedProperties['transformEnable']);
+        }
+        if (changedProperties.has('transformClientOnly')) {
+            this._transformClientOnlyChanged(this.transformClientOnly, changedProperties['transformClientOnly']);
+        }
+        if (changedProperties.has('transformRotateDisable')) {
+            this._transformRotateDisableChanged(this.transformRotateDisable, changedProperties['transformRotateDisable']);
+        }
+        if (changedProperties.has('transformZoomDisable')) {
+            this._transformZoomDisableChanged(this.transformZoomDisable, changedProperties['transformZoomDisable']);
+        }
+        if (changedProperties.has('transformPanDisable')) {
+            this._transformPanDisableChanged(this.transformPanDisable, changedProperties['transformPanDisable']);
+        }
+        if (changedProperties.has('animatedGlyphsVisible')) {
+            this._animatedGlyphsVisibleChanged(this.animatedGlyphsVisible, changedProperties['animatedGlyphsVisible']);
+        }
+        if (changedProperties.has('animatedGlyphsEnable')) {
+            this._animatedGlyphsEnableChanged(this.animatedGlyphsEnable, changedProperties['animatedGlyphsEnable']);
+        }
+        if (changedProperties.has('transformTwistAngle') || changedProperties.has('transformTiltAngle') || changedProperties.has('transformScale')) {
+            this._transformValueChanged();
+        }
+        if (changedProperties.has('animatedGlyphsEnable')) {
+            this._animatedGlyphsEnableChanged(this.animatedGlyphsEnable, changedProperties['animatedGlyphsEnable']);
+        }
+        if (changedProperties.has('zoomRectangleEnable')) {
+            this._zoomRectangleEnableChanged(this.zoomRectangleEnable, changedProperties['zoomRectangleEnable']);
+        }
+        if (changedProperties.has('panEnable')) {
+            this._panEnableChanged(this.panEnable, changedProperties['panEnable']);
+        }
+        if (changedProperties.has('panZoomEnable')) {
+            this._panZoomEnableChanged(this.panZoomEnable, changedProperties['panZoomEnable']);
+        }
+        if (changedProperties.has('panWidthZoomLevel')) {
+            this._panWidthZoomLevelChanged(this.panWidthZoomLevel, changedProperties['panWidthZoomLevel']);
+        }
+        if (changedProperties.has('panHeightZoomLevel')) {
+            this._panHeightZoomLevelChanged(this.panHeightZoomLevel, changedProperties['panHeightZoomLevel']);
+        }
+        if (changedProperties.has('panMaximumZoomLevel')) {
+            this._panMaximumZoomLevelChanged(this.panMaximumZoomLevel, changedProperties['panMaximumZoomLevel']);
+        }
+        if (changedProperties.has('trackEnable')) {
+            this._trackEnableChanged(this.trackEnable, changedProperties['trackEnable']);
+        }
+        if (changedProperties.has('displayCanvas')) {
+            this._displayCanvasChanged(this.displayCanvas, changedProperties['displayCanvas']);
+        }
+        if (changedProperties.has('motionCaptureControlsEnable')) {
+            this._motionCaptureControlsEnableChanged(this.motionCaptureControlsEnable, changedProperties['motionCaptureControlsEnable']);
+        }
+        if (changedProperties.has('motionCapture')) {
+            this._motionCaptureValueChanged(this.motionCapture, changedProperties['motionCapture']);
+        }
+        if (!this.url) {
+            //this._dispatchErrorEvent(''url' property must point to an instance of AVS/Go server.');
+            return;
+        }
+        let doUpdate = false;
+        if (this.manualUpdate) {
+            if (this.forceUpdate) {
+                doUpdate = true;
+            }
+        }
+        else {
+            if (this.forceUpdate ||
+                changedProperties.has('url') ||
+                changedProperties.has('renderer') ||
+                changedProperties.has('urlLoadJsonFile') ||
+                changedProperties.has('sceneName') ||
+                changedProperties.has('sceneUserProperties') ||
+                changedProperties.has('dataSourceName') ||
+                changedProperties.has('dataSourceUserProperties') ||
+                changedProperties.has('rendererName') ||
+                changedProperties.has('rendererUserProperties') ||
+                changedProperties.has('streamEnable') ||
+                (this.panEnable && changedProperties.has('panWidthZoomLevel')) ||
+                (this.panEnable && changedProperties.has('panHeightZoomLevel'))) {
+                doUpdate = true;
+            }
+        }
+        if (doUpdate) {
+            this.forceUpdate = false;
+            // Send the model to the server
+            if (this.urlLoadJsonFile) {
+                this.chunkFile = 0;
+                this.showSpinner();
+                this.startSpinner();
+                this._httpRequest(this.url, this._handleHttpResponse.bind(this), this._handleHttpError.bind(this));
+            }
+            else {
+                this.model = this._assembleModel( /*fullReset*/);
+                if (this.model) {
+                    this.showSpinner();
+                    this.startSpinner();
+                    this._httpRequest(this.url, this._handleHttpResponse.bind(this), this._handleHttpError.bind(this), this.model);
+                }
+            }
+        }
+    }
+    /**
+     * HTTP error handler.
+     */
+    _handleHttpError() {
+        this.hideSpinner();
+    }
+    /**
+     *
+     */
+    updateViewer() {
+        this.forceUpdate = true;
+        this.requestUpdate();
+    }
+    /**
+     *
+     */
+    clear() {
+        if (this.threeViewer) {
+            this.threeViewer.clearGeometry();
+            this.threeViewer.render();
+        }
+        else if (this.renderer === 'SVG') {
+            var el = this.svgDiv;
+            while (el.firstChild)
+                el.removeChild(el.firstChild);
+        }
+        else {
+            this.sceneImage.src = 'data:,';
+        }
+        this.showSpinner();
+    }
+    /**
+     * HTTP response handler.
+     * @param response Response parsed from HTTP or file.
+     */
+    _handleHttpResponse(response) {
+        if (response) {
+            if (response.selectionInfo) {
+                this._dispatchPickEvents(response.selectionInfo);
+            }
+            if (response.sceneInfo) {
+                /**
+                 * Scene info from the server.
+                 * @event avs-scene-info
+                 */
+                this.dispatchEvent(new CustomEvent('avs-scene-info', { detail: response.sceneInfo }));
+                const motionCapture = this.renderRoot.querySelector('#motionCapture');
+                const zoomOverlay = this.renderRoot.querySelector('#zoomOverlay');
+                const tooltip = this.renderRoot.querySelector('#tooltip');
+                const motionCaptureTooltip = this.renderRoot.querySelector('#motionCaptureTooltip');
+                // Set animation controls, tooltip and zoom overlay style to reversed theme
+                if (response.sceneInfo.backgroundColor) {
+                    var col = response.sceneInfo.backgroundColor.match(/[0-9.]+/gi);
+                    var bgCol = this.getInheritedBackgroundCol(this).trim().match(/[0-9.]+/gi);
+                    var blendedR = (Number(col[0]) * Number(col[3]));
+                    var blendedG = (Number(col[1]) * Number(col[3]));
+                    var blendedB = (Number(col[2]) * Number(col[3]));
+                    if (Number(col[3]) == 0) {
+                        // In case sceneInfo.backgroundColor is transparent, blend with inherited background color
+                        blendedR += (bgCol[0] * (1 - Number(col[3])));
+                        blendedG += (bgCol[1] * (1 - Number(col[3])));
+                        blendedB += (bgCol[2] * (1 - Number(col[3])));
+                    }
+                    motionCapture.style.color = "var(--avs-motion-capture-color, rgb(" + blendedR + ", " + blendedG + ", " + blendedB + "))";
+                    zoomOverlay.style.color = "var(--avs-zoom-overlay-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
+                    tooltip.style.color = "var(--avs-tooltip-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
+                    motionCaptureTooltip.style.color = "var(--avs-tooltip-color, rgb(" + blendedR + "," + blendedG + "," + blendedB + "))";
+                }
+                if (response.sceneInfo.color) {
+                    var col = response.sceneInfo.color.match(/[0-9.]+/gi);
+                    motionCapture.style.background = "var(--avs-motion-capture-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.75))";
+                    zoomOverlay.style.background = "var(--avs-zoom-overlay-background, rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.75))";
+                    tooltip.style.background = "var(--avs-tooltip-background, rgb(" + col[0] + "," + col[1] + "," + col[2] + "))";
+                    motionCaptureTooltip.style.background = "var(--avs-tooltip-background, rgb(" + col[0] + "," + col[1] + "," + col[2] + "))";
+                }
+                if (response.sceneInfo.fontFamily) {
+                    motionCapture.style.fontFamily = "var(--avs-motion-capture-font-family, " + response.sceneInfo.fontFamily + ")";
+                    zoomOverlay.style.fontFamily = "var(--avs-zoom-overlay-font-family, " + response.sceneInfo.fontFamily + ")";
+                    tooltip.style.fontFamily = "var(--avs-tooltip-font-family, " + response.sceneInfo.fontFamily + ")";
+                    motionCaptureTooltip.style.fontFamily = "var(--avs-tooltip-font-family, " + response.sceneInfo.fontFamily + ")";
+                }
+            }
+            if (response.image) {
+                this.sceneImage.src = response.image;
+                if (response.imagemap) {
+                    this.sceneImageMap.innerHTML = decodeURIComponent(response.imagemap.replace(/\+/g, '%20'));
+                    this.imageMapData = Array.from(this.sceneImageMap.querySelectorAll('area')).map(area => {
+                        return {
+                            shape: area.getAttribute('shape'),
+                            coords: area.getAttribute('coords').split(',').map(Number),
+                            seriesIndex: area.getAttribute('series-index'),
+                            itemIndex: area.getAttribute('item-index'),
+                            componentInfo: area.getAttribute('component-info')
+                        };
+                    });
+                }
+                else {
+                    this.sceneImageMap.innerHTML = "";
+                    this.imageMapData = undefined;
+                }
+                if (!this.urlLoadJsonFile) {
+                    this._dispatchSceneData(response);
+                }
+                this._handleLoadComplete();
+            }
+            else if (response.svg) {
+                this.svgDiv.innerHTML = decodeURIComponent(response.svg.replace(/\+/g, '%20'));
+                if (!this.urlLoadJsonFile) {
+                    this._dispatchSceneData(response);
+                }
+                this._handleLoadComplete();
+            }
+            else if (response.threejs) {
+                if (!this.urlLoadJsonFile) {
+                    this._dispatchSceneData(response);
+                }
+                if (response.threejs.chunkId) {
+                    this.threeViewer.loadGeometryAsEvents(response.threejs, this._handleLoadComplete.bind(this));
+                    if (response.threejs.moreChunks) {
+                        if (this.urlLoadJsonFile) {
+                            // Load the next chunk file
+                            this.chunkFile++;
+                            const urlBase = this.url.substring(0, this.url.lastIndexOf('.')) || this.url;
+                            const ext = this.url.split('.').pop();
+                            this._httpRequest(urlBase + '-' + this.chunkFile + '.' + ext, this._handleHttpResponse.bind(this), this._handleHttpError.bind(this));
+                        }
+                        else {
+                            // Get the next chunk from the server
+                            this.model.rendererProperties.streamProperties.chunkId = response.threejs.chunkId;
+                            this._httpRequest(this.url, this._handleHttpResponse.bind(this), this._handleHttpError.bind(this), this.model);
+                        }
+                    }
+                }
+                else {
+                    this.threeViewer.loadGeometryAsJson(response.threejs, this._handleLoadComplete.bind(this));
+                }
+            }
+            else {
+                this._dispatchErrorEvent("No image, SVG, or ThreeJS found in response.");
+                this._handleLoadComplete();
+            }
+        }
+    }
+    getInheritedBackgroundCol(el) {
+        var defaultStyle = this.getDefaultBackground();
+        var bgCol = window.getComputedStyle(el).backgroundColor;
+        if (bgCol != defaultStyle) {
+            return bgCol;
+        }
+        if (!el.parentElement) {
+            return defaultStyle;
+        }
+        return this.getInheritedBackgroundCol(el.parentElement);
+    }
+    getDefaultBackground() {
+        // have to add to the document in order to use getComputedStyle
+        var div = document.createElement("div");
+        document.head.appendChild(div);
+        var bg = window.getComputedStyle(div).backgroundColor;
+        document.head.removeChild(div);
+        return bg;
+    }
+    /**
+     *
+     */
+    _handleLoadComplete() {
+        // Stop and hide the spinner
+        this.hideSpinner();
+        this.stopSpinner();
+        /**
+         * Scene load has completed.
+         * @event avs-load-complete
+         */
+        this.dispatchEvent(new CustomEvent('avs-load-complete'));
+    }
+    /**
+     *
+     */
+    _dispatchSceneData(data) {
+        /**
+         * Scene data from server.
+         * @event avs-scene-data
+         */
+        this.dispatchEvent(new CustomEvent('avs-scene-data', { detail: data }));
+    }
+    /**
+     * @param e
+     */
+    _handleTap(x, y, currentTarget) {
+        const adjustedCoords = this._getAdjustedCoords(x, y);
+        const pickProperties = {
+            type: "TAP",
+            x: adjustedCoords.x,
+            y: adjustedCoords.y,
+            level: this.tapLevel,
+            depth: this.tapDepth,
+            highlight: this.tapHighlightEnable,
+            highlightColor: this.tapHighlightColor,
+            highlightLayer: this.tapHighlightLayerEnable
+        };
+        this._processPick(pickProperties, this.tapProcessEventOnClient, currentTarget);
+    }
+    /**
+     * @param e
+     */
+    _handleTrack(state, x, y, dx, dy) {
+        var adjustedCoords = this._getAdjustedRectangleCoords(x, y, dx, dy);
+        switch (state) {
+            case 'start':
+                break;
+            case 'track':
+                this.rectCtx.clearRect(0, 0, this.width, this.height);
+                this._rectangleStyle();
+                this.rectCtx.strokeRect(adjustedCoords.left, adjustedCoords.top, adjustedCoords.right - adjustedCoords.left, adjustedCoords.bottom - adjustedCoords.top);
+                break;
+            case 'end':
+                this.rectCtx.clearRect(0, 0, this.width, this.height);
+                const pickProperties = {
+                    type: "TRACK",
+                    left: adjustedCoords.left,
+                    right: adjustedCoords.right,
+                    top: adjustedCoords.top,
+                    bottom: adjustedCoords.bottom,
+                    level: this.trackLevel,
+                    depth: this.trackDepth,
+                    highlight: this.trackHighlightEnable,
+                    highlightColor: this.trackHighlightColor,
+                    highlightLayer: this.trackHighlightLayerEnable
+                };
+                this._processPick(pickProperties, this.trackProcessEventOnClient);
+                break;
+        }
+    }
+    /**
+     * @param e
+     */
+    _handlePointerDown(e) {
+        this.pointerDownX = e.clientX;
+        this.pointerDownY = e.clientY;
+        this.pointerDown = true;
+        if (this.tapEnable && e.buttons & 1) {
+            this.tapping = true;
+        }
+        if (this.trackEnable && e.buttons & 2) {
+            this.tracking = 1;
+        }
+    }
+    /**
+     * @param e
+     */
+    _handlePointerMove(e) {
+        if (this.tracking >= 1) {
+            if (this.tracking === 1) {
+                var dx = Math.abs(e.clientX - this.pointerDownX);
+                var dy = Math.abs(e.clientY - this.pointerDownY);
+                if (dx * dx + dy * dy >= 5) {
+                    this.tracking = 2;
+                    this._handleTrack("start", e.clientX, e.clientY, e.clientX - this.pointerDownX, e.clientY - this.pointerDownY);
+                }
+            }
+            if (this.tracking === 2) {
+                this._handleTrack("track", e.clientX, e.clientY, e.clientX - this.pointerDownX, e.clientY - this.pointerDownY);
+            }
+        }
+        if (this.hoverEnable) {
+            var adjustedCoords = this._getAdjustedCoords(e.clientX, e.clientY);
+            const pickProperties = {
+                type: "HOVER",
+                x: adjustedCoords.x,
+                y: adjustedCoords.y
+            };
+            if (this.pointerDown) {
+                pickProperties.selected = [];
+                this._dispatchPickEvents(pickProperties);
+            }
+            else {
+                if (this.hoverLevel !== undefined)
+                    pickProperties.level = this.hoverLevel;
+                if (this.hoverDepth !== undefined)
+                    pickProperties.depth = this.hoverDepth;
+                if (this.hoverHighlightEnable)
+                    pickProperties.highlight = true;
+                if (this.hoverHighlightColor !== undefined)
+                    pickProperties.highlightColor = this.hoverHighlightColor;
+                if (this.hoverHighlightLayerEnable)
+                    pickProperties.highlightLayer = true;
+                this._processPick(pickProperties, true, e.target);
+            }
+        }
+        this._resetTimer();
+    }
+    /**
+     * @param e
+     */
+    _handlePointerUp(e) {
+        this.pointerDown = false;
+        if (this.tapping) {
+            this.tapping = false;
+            var dx = Math.abs(e.clientX - this.pointerDownX);
+            var dy = Math.abs(e.clientY - this.pointerDownY);
+            if (dx * dx + dy * dy < 25) {
+                this._handleTap(e.clientX, e.clientY, e.currentTarget);
+            }
+        }
+        if (this.tracking > 1) {
+            this.tracking = 0;
+            this._handleTrack("end", e.clientX, e.clientY, e.clientX - this.pointerDownX, e.clientY - this.pointerDownY);
+        }
+    }
+    _getAdjustedCoords(x, y) {
+        var rect = this.renderRoot.querySelector('#dataVizDiv').getBoundingClientRect();
+        var adjustedX = Math.round(x - rect.left);
+        var adjustedY = Math.round(y - rect.top);
+        var clampX = Math.max(0, Math.min(adjustedX, this.width));
+        var clampY = Math.max(0, Math.min(adjustedY, this.height));
+        return { x: clampX, y: clampY };
+    }
+    _getAdjustedRectangleCoords(x, y, dx, dy) {
+        var rect = this.renderRoot.querySelector('#dataVizDiv').getBoundingClientRect();
+        var adjustedX = Math.round(x - rect.left);
+        var adjustedY = Math.round(y - rect.top);
+        var clampX = Math.max(0, Math.min(adjustedX, this.width));
+        var clampY = Math.max(0, Math.min(adjustedY, this.height));
+        var startX = Math.max(0, Math.min(adjustedX - dx, this.width));
+        var startY = Math.max(0, Math.min(adjustedY - dy, this.height));
+        var left = Math.min(startX, clampX);
+        var right = Math.max(startX, clampX);
+        var top = Math.min(startY, clampY);
+        var bottom = Math.max(startY, clampY);
+        return { left: left, right: right, top: top, bottom: bottom };
+    }
+    _processPick(pickProperties, processEventOnClient, originalTarget) {
+        if (processEventOnClient) {
+            if (this.threeViewer) {
+                // ThreeJS client side pick processing
+                this.threeViewer.setPickDepth(pickProperties.depth === "ALL" ? PickDepthEnum.All : PickDepthEnum.Closest);
+                if (pickProperties.type === 'TRACK') {
+                    this.threeViewer.setPickRectangle(pickProperties.left, pickProperties.top, pickProperties.right, pickProperties.bottom);
+                }
+                else {
+                    this.threeViewer.setPickRay(pickProperties.x, pickProperties.y);
+                }
+                this.threeViewer.pick();
+                var selectionList = {};
+                if (pickProperties.level === "CELL") {
+                    selectionList = this.threeViewer.getPickedCells();
+                }
+                else if (pickProperties.level === "CELL_SET") {
+                    selectionList = this.threeViewer.getPickedCellSets();
+                }
+                else {
+                    selectionList = this.threeViewer.getPickedSceneNodes();
+                }
+                pickProperties.selected = this.threeViewer.getSelectionInfo(selectionList);
+                this._dispatchPickEvents(pickProperties);
+                if (pickProperties.highlight) {
+                    this.threeViewer.highlightColor.set(pickProperties.highlightColor);
+                    this.threeViewer.highlightObjects(selectionList, pickProperties.highlightLayer);
+                }
+            }
+            else if (this.renderer === 'SVG') {
+                // Client side SVG pick processing
+                pickProperties.selected = [];
+                if (pickProperties.type !== 'TRACK' && (originalTarget.nodeName === "polygon" || originalTarget.nodeName === "circle")) {
+                    const selectedInfo = {};
+                    var seriesIndex = null;
+                    var element = originalTarget.parentElement;
+                    while (element !== null && (seriesIndex = element.getAttribute("series-index")) === null) {
+                        element = element.parentElement;
+                    }
+                    if (seriesIndex !== null) {
+                        selectedInfo.seriesIndex = parseInt(seriesIndex);
+                    }
+                    var itemIndex = null;
+                    element = originalTarget.parentElement;
+                    while (element !== null && (itemIndex = element.getAttribute("item-index")) === null) {
+                        element = element.parentElement;
+                    }
+                    if (itemIndex !== null) {
+                        selectedInfo.itemIndex = parseInt(itemIndex);
+                    }
+                    var componentInfo = null;
+                    element = originalTarget.parentElement;
+                    while (element !== null && (componentInfo = element.getAttribute("component-info")) === null) {
+                        element = element.parentElement;
+                    }
+                    if (componentInfo !== null) {
+                        selectedInfo.componentInfo = decodeURIComponent(componentInfo);
+                    }
+                    pickProperties.selected.push(selectedInfo);
+                }
+                this._dispatchPickEvents(pickProperties);
+                if (pickProperties.highlight) {
+                    if (this.highlightSvg === undefined) {
+                        this.highlightSvg = [];
+                    }
+                    for (var i = 0; i < this.highlightSvg.length; i++) {
+                        this.highlightSvg[i].setAttribute("fill", this.highlightSvg[i].getAttribute("saveFill"));
+                    }
+                    this.highlightSvg.length = 0;
+                    if (pickProperties.type !== 'TRACK' && (originalTarget.nodeName === "polygon" || originalTarget.nodeName === "circle")) {
+                        this.highlightSvg.push(originalTarget);
+                        originalTarget.setAttribute("saveFill", originalTarget.getAttribute("fill"));
+                        originalTarget.setAttribute("fill", pickProperties.highlightColor);
+                    }
+                }
+            }
+            else {
+                // Client side imagemap pick processing
+                pickProperties.selected = [];
+                if (pickProperties.type !== 'TRACK' && this.imageMapData !== undefined) {
+                    for (var i = 0; i < this.imageMapData.length; i++) {
+                        var area = this.imageMapData[i];
+                        console.log(pickProperties.x + " " + pickProperties.y);
+                        if (area.shape === "poly" && this._pointInPoly(pickProperties.x, pickProperties.y, area.coords)) {
+                            const selectedInfo = {};
+                            if (area.seriesIndex !== null) {
+                                selectedInfo.seriesIndex = parseInt(area.seriesIndex);
+                            }
+                            if (area.itemIndex !== null) {
+                                selectedInfo.itemIndex = parseInt(area.itemIndex);
+                            }
+                            if (area.componentInfo !== null) {
+                                selectedInfo.componentInfo = decodeURIComponent(area.componentInfo);
+                            }
+                            pickProperties.selected.push(selectedInfo);
+                        }
+                    }
+                }
+                this._dispatchPickEvents(pickProperties);
+            }
+        }
+        else if (!this.urlLoadJsonFile) {
+            // Server side pick processing
+            this.showSpinner();
+            if (this.url) {
+                this.startSpinner();
+                // Send the model to the server
+                this.model = this._assembleModel();
+                if (this.model) {
+                    this.model.rendererProperties.pickProperties = pickProperties;
+                    this._httpRequest(this.url, this._handleHttpResponse.bind(this), this._handleHttpError.bind(this), this.model);
+                }
+            }
+        }
+    }
+    _pointInPoly(x, y, coords) {
+        var dx1 = coords[0] - x;
+        var dy1 = coords[1] - y;
+        var dx2, dy2, f;
+        var k = 0;
+        for (var i = 2; i < coords.length; i += 2) {
+            dy2 = coords[i + 1] - y;
+            if ((dy1 < 0 && dy2 < 0) || (dy1 > 0 && dy2 > 0)) {
+                dy1 = dy2;
+                dx1 = coords[i] - x;
+                continue;
+            }
+            dx2 = coords[i] - x;
+            if (dy2 > 0 && dy1 <= 0) {
+                f = (dx1 * dy2) - (dx2 * dy1);
+                if (f > 0)
+                    k++;
+                else if (f === 0)
+                    return false;
+            }
+            else if (dy1 > 0 && dy2 <= 0) {
+                f = (dx1 * dy2) - (dx2 * dy1);
+                if (f < 0)
+                    k++;
+                else if (f === 0)
+                    return false;
+            }
+            else if (dy2 === 0 && dy1 < 0) {
+                f = (dx1 * dy2) - (dx2 * dy1);
+                if (f === 0)
+                    return false;
+            }
+            else if (dy1 === 0 && dy2 < 0) {
+                f = dx1 * dy2 - dx2 * dy1;
+                if (f === 0)
+                    return false;
+            }
+            else if (dy1 === 0 && dy2 === 0) {
+                if (dx2 <= 0 && dx1 >= 0) {
+                    return false;
+                }
+                else if (dx1 <= 0 && dx2 >= 0) {
+                    return false;
+                }
+            }
+            dy1 = dy2;
+            dx1 = dx2;
+        }
+        if (k % 2 === 0)
+            return false;
+        return true;
+    }
+    /**
+     * Dispatch the appropriate tap, track or hover event.
+     */
+    _dispatchPickEvents(pickProperties) {
+        const pickDetail = {
+            selected: pickProperties.selected
+        };
+        if (pickProperties.type === 'TRACK') {
+            pickDetail.left = pickProperties.left;
+            pickDetail.top = pickProperties.top;
+            pickDetail.right = pickProperties.right;
+            pickDetail.bottom = pickProperties.bottom;
+            /**
+             * A track event occurred.
+             * @event avs-track
+             */
+            this.dispatchEvent(new CustomEvent('avs-track', { detail: pickDetail }));
+        }
+        else {
+            pickDetail.x = pickProperties.x;
+            pickDetail.y = pickProperties.y;
+            if (pickProperties.type === 'HOVER') {
+                /**
+                 * A hover event occurred.
+                 * @event avs-hover
+                 */
+                this.dispatchEvent(new CustomEvent('avs-hover', { detail: pickDetail }));
+            }
+            else {
+                /**
+                 * A tap event occurred.
+                 * @event avs-tap
+                 */
+                this.dispatchEvent(new CustomEvent('avs-tap', { detail: pickDetail }));
+            }
+        }
+    }
+    _resetTimer() {
+        window.clearTimeout(this.timer);
+        this.timer = window.setTimeout(() => {
+            /**
+             * A pointer timeout event occurred.
+             * @event avs-pointer-timeout
+             */
+            this.dispatchEvent(new Event('avs-pointer-timeout'));
+        }, this.pointerTimeout * 1000);
+    }
+    constructor() {
+        super();
+        // Set default property values
+        this.renderer = Renderer.THREEJS;
+        this.resizeThreshold = 10;
+        this.pointerTimeout = 600;
+        this.panWidthZoomLevel = 100;
+        this.panHeightZoomLevel = 100;
+        this.panMaximumZoomLevel = 1000;
+        this.lowResizeWidth = this.highResizeWidth = 0;
+        this.highResizeWidth = this.highResizeHeight = 0;
+        this.motionCaptureTime = 0;
+        this.motionCaptureFrames ??= [];
+        this._resetTimer();
+        this._updatePixelRatio();
+    }
+    /**
+     * Element connected to the DOM
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        ro.observe(this);
+        this.addEventListener('pointerdown', this._handlePointerDown);
+        this.addEventListener('pointerup', this._handlePointerUp);
+        this.addEventListener('pointermove', this._handlePointerMove);
+        this.addEventListener('pointerout', this._handlePointerMove);
+        var scope = this;
+        this.addEventListener('contextmenu', function (e) {
+            if (scope.trackEnable) {
+                e.preventDefault();
+            }
+        });
+    }
+    /**
+     * Element disconnected from the DOM
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        ro.unobserve(this);
+    }
+    _handlePointerEnterMotionCaptureControl(e) {
+        if (!this.showMotionCaptureTooltip) {
+            var adjustedCoords = this._getAdjustedCoords(e.clientX, e.clientY);
+            var motionCaptureTooltip = this.renderRoot.querySelector('#motionCaptureTooltip');
+            var pos = this._calcTooltipPosition(motionCaptureTooltip, adjustedCoords.x, adjustedCoords.y);
+            motionCaptureTooltip.style.left = pos.x + "px";
+            motionCaptureTooltip.style.top = pos.y + "px";
+            motionCaptureTooltip.style.opacity = "1";
+            const target = e.currentTarget;
+            motionCaptureTooltip.innerHTML = target.dataset.tooltip ?? target.id;
+            this.showMotionCaptureTooltip = true;
+        }
+    }
+    _handlePointerLeaveMotionCaptureControl() {
+        var motionCaptureTooltip = this.renderRoot.querySelector('#motionCaptureTooltip');
+        motionCaptureTooltip.style.opacity = "0";
+        this.showMotionCaptureTooltip = false;
+    }
+    _round2dp(n) {
+        return Math.round((n + Number.EPSILON) * 100) / 100;
+    }
+    _handleMotionCaptureSnapshot() {
+        const transform = this._getTransformComponents();
+        if (this.motionCaptureFrames.length > 0) {
+            this.motionCaptureTime += this.motionCaptureDelay;
+        }
+        const frame = {
+            time: this.motionCaptureTime * 1000,
+            scale: this._round2dp(transform.scale),
+            position: [this._round2dp(transform.position[0]),
+                this._round2dp(transform.position[1]),
+                this._round2dp(transform.position[2])],
+            rotation: [this._round2dp(transform.rotation[0]),
+                this._round2dp(transform.rotation[1]),
+                this._round2dp(transform.rotation[2]),
+                transform.rotation[3]]
+        };
+        this.motionCaptureFrames.push(frame);
+        if (this.motionCaptureFrames.length == 1) {
+            this.renderRoot.querySelector('#motionCapturePlay').classList.remove("disabled");
+            this.renderRoot.querySelector('#motionCaptureDelay').classList.remove("disabled");
+            this.renderRoot.querySelector('#motionCaptureDelayLabel').innerHTML = "2";
+            this.renderRoot.querySelector('#motionCaptureClear').classList.remove("disabled");
+            this.renderRoot.querySelector('#motionCaptureCopyData').classList.remove("disabled");
+            this.renderRoot.querySelector('#motionCaptureCopyUrl').classList.remove("disabled");
+            this.motionCaptureDelay = 2;
+        }
+        this.renderRoot.querySelector('#motionCaptureSnapshotLabel').innerHTML = String(this.motionCaptureFrames.length);
+    }
+    _handleMotionCaptureDelayIncrease() {
+        this.motionCaptureDelay++;
+        if (this.motionCaptureDelay > 9) {
+            this.motionCaptureDelay = 9;
+        }
+        this.renderRoot.querySelector('#motionCaptureDelayLabel').innerHTML = String(this.motionCaptureDelay);
+    }
+    _handleMotionCaptureDelayDecrease() {
+        this.motionCaptureDelay--;
+        if (this.motionCaptureDelay < 1) {
+            this.motionCaptureDelay = 1;
+        }
+        this.renderRoot.querySelector('#motionCaptureDelayLabel').innerHTML = String(this.motionCaptureDelay);
+    }
+    _handleMotionCaptureCopyData() {
+        // Convert to JSON and copy to clipboard
+        const data = JSON.stringify(this.motionCaptureFrames);
+        navigator.clipboard.writeText(data);
+        // Show alert
+        const motionCaptureAlert = this.renderRoot.querySelector('#motionCaptureAlert');
+        motionCaptureAlert.innerHTML = "Motion capture URL copied to clipboard";
+        motionCaptureAlert.style.opacity = "1";
+        setTimeout(() => {
+            motionCaptureAlert.style.opacity = "0";
+        }, 2000);
+    }
+    async _handleMotionCaptureCopyUrl() {
+        // Convert to JSON, compress and base64url encode
+        const json = JSON.stringify(this.motionCaptureFrames);
+        const compressed = await this._compress(json);
+        const encoded = btoa(String.fromCharCode(...new Uint8Array(compressed))).replaceAll('/', '_').replaceAll('+', '-');
+        // Create URL and copy to clipboard
+        const url = window.location.origin + window.location.pathname + "?motionCapture=" + encoded;
+        navigator.clipboard.writeText(url);
+        // Show alert
+        const motionCaptureAlert = this.renderRoot.querySelector('#motionCaptureAlert');
+        motionCaptureAlert.innerHTML = "Motion capture URL copied to clipboard";
+        motionCaptureAlert.style.opacity = "1";
+        setTimeout(() => {
+            motionCaptureAlert.style.opacity = "0";
+        }, 2000);
+    }
+    /**
+     * Convert a string to its UTF-8 bytes and compress it.
+     *
+     * @param {string} str
+     * @returns {Promise<Uint8Array>}
+     */
+    async _compress(str) {
+        // Convert the string to a byte stream.
+        const stream = new Blob([str]).stream();
+        // Create a compressed stream.
+        const compressedStream = stream.pipeThrough(new CompressionStream("gzip"));
+        // Read all the bytes from this stream.
+        const chunks = [];
+        for await (const chunk of compressedStream) {
+            chunks.push(chunk);
+        }
+        return this._concatUint8Arrays(chunks);
+    }
+    /**
+     * Decompress bytes into a UTF-8 string.
+     *
+     * @param {Uint8Array} compressedBytes
+     * @returns {Promise<string>}
+     */
+    async _decompress(compressedBytes) {
+        // Convert the bytes to a stream.
+        const stream = new Blob([compressedBytes]).stream();
+        // Create a decompressed stream.
+        const decompressedStream = stream.pipeThrough(new DecompressionStream("gzip"));
+        // Read all the bytes from this stream.
+        const chunks = [];
+        for await (const chunk of decompressedStream) {
+            chunks.push(chunk);
+        }
+        const stringBytes = await this._concatUint8Arrays(chunks);
+        // Convert the bytes to a string.
+        return new TextDecoder().decode(stringBytes);
+    }
+    /**
+     * Combine multiple Uint8Arrays into one.
+     *
+     * @param {ReadonlyArray<Uint8Array>} uint8arrays
+     * @returns {Promise<Uint8Array>}
+     */
+    async _concatUint8Arrays(uint8arrays) {
+        const blob = new Blob(uint8arrays);
+        const buffer = await blob.arrayBuffer();
+        return new Uint8Array(buffer);
+    }
+    _handleMotionCaptureClear() {
+        this.motionCaptureFrames.length = 0;
+        this.renderRoot.querySelector('#motionCapturePlay').classList.add("disabled");
+        this.renderRoot.querySelector('#motionCaptureSnapshotLabel').innerHTML = "0";
+        this.renderRoot.querySelector('#motionCaptureDelay').classList.add("disabled");
+        this.renderRoot.querySelector('#motionCaptureDelayLabel').innerHTML = "0";
+        this.renderRoot.querySelector('#motionCaptureClear').classList.add("disabled");
+        this.renderRoot.querySelector('#motionCaptureCopyData').classList.add("disabled");
+        this.renderRoot.querySelector('#motionCaptureCopyUrl').classList.add("disabled");
+        this.motionCaptureDelay = 0;
+        this.motionCaptureTime = 0;
+    }
+    _updatePixelRatio(change) {
+        const pr = window.devicePixelRatio;
+        matchMedia(`(resolution: ${pr}dppx)`).addEventListener('change', this._updatePixelRatio.bind(this, true), { once: true });
+        if (change) {
+            this.updateViewer();
+        }
+    }
+    /**
+     * Change in 'motion-capture-controls-enable' property.
+     */
+    _motionCaptureControlsEnableChanged(newValue, oldValue) {
+        const el = this.renderRoot.querySelector('#motionCapture');
+        el.style.display = newValue ? "block" : "none";
+    }
+    /**
+     * Change in 'transform-enable' property.
+     */
+    _transformEnableChanged(newValue, oldValue) {
+        if (this.threeViewer) {
+            if (newValue) {
+                if (this.transformInteractor === undefined) {
+                    this.transformInteractor = new TransformInteractor(this.renderRoot.querySelector('#dataVizDiv'));
+                }
+                this.threeViewer.addInteractor(this.transformInteractor);
+                if (this.transformRotateDisable) {
+                    this.transformInteractor.enableRotate = false;
+                }
+                if (this.transformZoomDisable) {
+                    this.transformInteractor.enableZoom = false;
+                }
+                if (this.transformPanDisable) {
+                    this.transformInteractor.enablePan = false;
+                }
+                if (this.transformClientOnly) {
+                    this.transformInteractor.clientOnly = true;
+                }
+            }
+            else {
+                this.threeViewer.removeInteractor(this.transformInteractor);
+            }
+        }
+    }
+    /**
+     * Change in the 'transform-client-only' property.
+     */
+    _transformClientOnlyChanged(newValue, oldValue) {
+        if (this.transformInteractor) {
+            this.transformInteractor.clientOnly = newValue;
+        }
+        if (this.zoomRectangleInteractor) {
+            this.zoomRectangleInteractor.clientOnly = newValue;
+        }
+    }
+    /**
+     * Change in 'transform-rotate-disable' property.
+     */
+    _transformRotateDisableChanged(newValue, oldValue) {
+        if (this.transformInteractor) {
+            this.transformInteractor.enableRotate = !newValue;
+        }
+    }
+    /**
+     * Change in 'transform-zoom-disable' property.
+     */
+    _transformZoomDisableChanged(newValue, oldValue) {
+        if (this.transformInteractor) {
+            this.transformInteractor.enableZoom = !newValue;
+        }
+    }
+    /**
+     * Change in 'transform-pan-disable' property.
+     */
+    _transformPanDisableChanged(newValue, oldValue) {
+        if (this.transformInteractor) {
+            this.transformInteractor.enablePan = !newValue;
+        }
+    }
+    /**
+     * Reset the transform interactor.
+     */
+    resetTransform() {
+        if (this.transformInteractor) {
+            this.transformInteractor.reset();
+        }
+    }
+    /**
+     * Perform a zoom in using the transform interactor.
+     */
+    zoomIn() {
+        if (this.transformInteractor) {
+            this.transformInteractor.zoomIn();
+        }
+    }
+    /**
+     * Perform a zoom out using the transform interactor.
+     */
+    zoomOut() {
+        if (this.transformInteractor) {
+            this.transformInteractor.zoomOut();
+        }
+    }
+    /**
+     * Perform a pan to center the specified coordinate of the transformed object in the center of the scene.
+     */
+    panTo(x, y, z) {
+        if (this.transformInteractor) {
+            this.transformInteractor.panTo(x, y, z);
+        }
+    }
+    _getTransformComponents() {
+        var pos = new Vector3();
+        var quat = new Quaternion();
+        var scale = new Vector3();
+        var euler = new Euler();
+        var mat;
+        if (this.transformInteractor) {
+            mat = this.transformInteractor.object.matrix;
+        }
+        mat.decompose(pos, quat, scale);
+        euler.setFromQuaternion(quat);
+        return {
+            position: pos.toArray(),
+            rotation: [euler.x * 180 / Math.PI, euler.y * 180 / Math.PI, euler.z * 180 / Math.PI],
+            rotationOrder: euler.order,
+            scale: 100 * scale.x
+        };
+    }
+    getTransformMatrix() {
+        if (this.transformInteractor) {
+            return this.transformInteractor.object.matrix.elements.slice();
+        }
+    }
+    runAnimation() {
+        if (this.threeViewer) {
+            var style = window.getComputedStyle(this, null);
+            var styleMap = {
+                transform: this.motionCaptureFrames.length > 0 ? JSON.stringify(this.motionCaptureFrames) : null
+            };
+            this._applyCustomCssProperties(styleMap, style, {
+                "scene": "--avs-scene-animations",
+                "sceneTitle": "--avs-scene-title-animations",
+                "chart": "--avs-chart-animations",
+                "chartTitle": "--avs-chart-title-animations",
+                "axis": "--avs-axis-animations",
+                "legend": "--avs-legend-animations",
+                "legendTitle": "--avs-legend-title-animations",
+                "glyph": "--avs-glyph-animations"
+            });
+            this.animator.setStyleMap(styleMap);
+            this.threeViewer.runAnimation();
+        }
+    }
+    /**
+     * Change in 'animated-glyphs-visible' property.
+     */
+    _animatedGlyphsVisibleChanged(newValue, oldValue) {
+        if (this.threeViewer) {
+            this.threeViewer.setVisibleAnimatedGlyphs(newValue);
+        }
+    }
+    /**
+     * Change in 'animated-glyphs-enable' property.
+     */
+    _animatedGlyphsEnableChanged(newValue, oldValue) {
+        if (this.threeViewer) {
+            this.threeViewer.setEnableAnimatedGlyphs(newValue);
+        }
+    }
+    /**
+     * Change in 'transform-twist-angle', 'transform-tilt-angle' or 'transform-scale' properties.
+     */
+    _transformValueChanged() {
+        var twist = this.transformTwistAngle !== undefined ? this.transformTwistAngle * Math.PI / 180 : 0;
+        var tilt = this.transformTiltAngle !== undefined ? this.transformTiltAngle * Math.PI / 180 : 0;
+        var scale = this.transformScale !== undefined ? this.transformScale / 100.0 : 1.0;
+        var sinTW = Math.sin(twist);
+        var cosTW = Math.cos(twist);
+        var sinTI = Math.sin(tilt);
+        var cosTI = Math.cos(tilt);
+        var matrix = [cosTW * scale, 0, cosTI * sinTW * scale, 0,
+            0, cosTI * scale, -sinTI * scale, 0,
+            -sinTW * scale, cosTW * sinTI * scale, cosTW * cosTI * scale, 0,
+            0, 0, 0, 1];
+        this.transformMatrix = matrix;
+        if (this.transformInteractor) {
+            this.transformInteractor.object.matrix.fromArray(matrix);
+        }
+    }
+    /**
+     * Change in 'motion-capture' property.
+     */
+    async _motionCaptureValueChanged(newValue, oldValue) {
+        if (newValue) {
+            // Try parsing JSON first
+            try {
+                this.motionCaptureFrames = JSON.parse(newValue);
+            }
+            catch {
+                // Decode from base64url, decompress and parse JSON
+                const decoded = atob(newValue).replaceAll('_', '/').replaceAll('-', '+');
+                const decompressed = await this._decompress(decoded);
+                this.motionCaptureFrames = JSON.parse(decompressed);
+            }
+            if (!this.motionCaptureFrames) {
+                this.motionCaptureFrames = [];
+            }
+            if (this.motionCaptureFrames.length > 0) {
+                this.renderRoot.querySelector('#motionCapturePlay').classList.remove("disabled");
+                this.renderRoot.querySelector('#motionCaptureSnapshotLabel').innerHTML = String(this.motionCaptureFrames.length);
+                this.renderRoot.querySelector('#motionCaptureDelay').classList.remove("disabled");
+                this.renderRoot.querySelector('#motionCaptureDelayLabel').innerHTML = "2";
+                this.renderRoot.querySelector('#motionCaptureClear').classList.remove("disabled");
+                this.renderRoot.querySelector('#motionCaptureCopyData').classList.remove("disabled");
+                this.renderRoot.querySelector('#motionCaptureCopyUrl').classList.remove("disabled");
+                this.motionCaptureDelay = 2;
+                this.motionCaptureTime = this.motionCaptureFrames[this.motionCaptureFrames.length - 1].time / 1000;
+            }
+            else {
+                this.renderRoot.querySelector('#motionCapturePlay').classList.add("disabled");
+                this.renderRoot.querySelector('#motionCaptureSnapshotLabel').innerHTML = "0";
+                this.renderRoot.querySelector('#motionCaptureDelay').classList.add("disabled");
+                this.renderRoot.querySelector('#motionCaptureDelayLabel').innerHTML = "0";
+                this.renderRoot.querySelector('#motionCaptureClear').classList.add("disabled");
+                this.renderRoot.querySelector('#motionCaptureCopyData').classList.add("disabled");
+                this.renderRoot.querySelector('#motionCaptureCopyUrl').classList.add("disabled");
+                this.motionCaptureDelay = 0;
+                this.motionCaptureTime = 0;
+            }
+        }
+    }
+    /**
+     * Change in 'zoom-rectangle-enable' property.
+     */
+    _zoomRectangleEnableChanged(newValue, oldValue) {
+        if (this.threeViewer) {
+            if (newValue) {
+                if (this.zoomRectangleInteractor === undefined) {
+                    this.zoomRectangleInteractor = new ZoomRectangleInteractor(this);
+                }
+                this.threeViewer.addInteractor(this.zoomRectangleInteractor);
+                if (this.transformClientOnly) {
+                    this.zoomRectangleInteractor.clientOnly = true;
+                }
+            }
+            else {
+                this.threeViewer.removeInteractor(this.zoomRectangleInteractor);
+            }
+        }
+    }
+    /**
+     * Change in 'pan-enable' property.
+     */
+    _panEnableChanged(newValue, oldValue) {
+        if (this.threeViewer) {
+            if (newValue) {
+                if (this.panInteractor === undefined) {
+                    this.panInteractor = new PanInteractor(this);
+                }
+                this.threeViewer.addInteractor(this.panInteractor);
+                if (this.panZoomEnable) {
+                    this.panInteractor.addEventListener('change', this._handlePanChanged.bind(this));
+                    this.panInteractor.addEventListener('zoom', this._handlePanZoom.bind(this));
+                    this.panInteractor.addEventListener('zoomEnd', this._handlePanZoomEnd.bind(this));
+                }
+                this.panInteractor.setWidthZoomLevel(this.panWidthZoomLevel);
+                this.panInteractor.setHeightZoomLevel(this.panHeightZoomLevel);
+                this.panInteractor.setMaximumZoomLevel(this.panMaximumZoomLevel);
+                this.panInteractor.saveState();
+            }
+            else {
+                this.threeViewer.removeInteractor(this.panInteractor);
+                if (this.panZoomEnable) {
+                    this.panInteractor.removeEventListener('change', this._handlePanChanged.bind(this));
+                    this.panInteractor.removeEventListener('zoom', this._handlePanZoom.bind(this));
+                    this.panInteractor.removeEventListener('zoomEnd', this._handlePanZoomEnd.bind(this));
+                }
+            }
+        }
+    }
+    /**
+     * Change in 'pan-zoom-enable' property.
+     */
+    _panZoomEnableChanged(newValue, oldValue) {
+        if (this.threeViewer && this.panInteractor) {
+            if (newValue) {
+                this.panInteractor.addEventListener('change', this._handlePanChanged.bind(this));
+                this.panInteractor.addEventListener('zoom', this._handlePanZoom.bind(this));
+                this.panInteractor.addEventListener('zoomEnd', this._handlePanZoomEnd.bind(this));
+            }
+            else {
+                this.panInteractor.removeEventListener('change', this._handlePanChanged.bind(this));
+                this.panInteractor.removeEventListener('zoom', this._handlePanZoom.bind(this));
+                this.panInteractor.removeEventListener('zoomEnd', this._handlePanZoomEnd.bind(this));
+            }
+        }
+    }
+    _handlePanChanged(e) {
+        /**
+         * A pan info event occurred.
+         * @event avs-pan-info
+         */
+        this.dispatchEvent(new CustomEvent('avs-pan-info', e));
+    }
+    _handlePanZoom(e) {
+        window.clearTimeout(this.zoomOverlayTimeoutId);
+        var width = Math.round(e.detail.widthZoomLevel);
+        var height = Math.round(e.detail.heightZoomLevel);
+        if (width === height) {
+            this.renderRoot.querySelector('#zoomOverlay').innerHTML = width + "%";
+        }
+        else {
+            this.renderRoot.querySelector('#zoomOverlay').innerHTML = width + "%," + height + "%";
+        }
+        var coords = this._getAdjustedCoords(e.detail.clientX, e.detail.clientY);
+        const zoomOverlay = this.renderRoot.querySelector('#zoomOverlay');
+        zoomOverlay.style.left = coords.x + "px";
+        zoomOverlay.style.top = coords.y + "px";
+        zoomOverlay.style.opacity = "1";
+        this.pointerDown = true;
+        this._dispatchPickEvents({ type: "HOVER", x: 0, y: 0, selected: [] });
+        this.zoomOverlayTimeoutId = window.setTimeout(() => {
+            const el = this.renderRoot.querySelector('#zoomOverlay');
+            el.style.opacity = "0";
+            this.pointerDown = false;
+        }, 1000);
+    }
+    _handlePanZoomEnd(e) {
+        this.panWidthZoomLevel = e.detail.widthZoomLevel;
+        this.panHeightZoomLevel = e.detail.heightZoomLevel;
+    }
+    /**
+     * Change in 'pan-width-zoom-level' property.
+     */
+    _panWidthZoomLevelChanged(newValue, oldValue) {
+        if (this.panInteractor) {
+            this.panInteractor.setWidthZoomLevel(newValue);
+        }
+    }
+    /**
+     * Change in 'pan-height-zoom-level' property.
+     */
+    _panHeightZoomLevelChanged(newValue, oldValue) {
+        if (this.panInteractor) {
+            this.panInteractor.setHeightZoomLevel(newValue);
+        }
+    }
+    /**
+     * Change in 'pan-maximum-zoom-level' property.
+     */
+    _panMaximumZoomLevelChanged(newValue, oldValue) {
+        if (this.panInteractor) {
+            this.panInteractor.setMaximumZoomLevel(newValue);
+        }
+    }
+    /**
+     * Reset the pan interactor.
+     */
+    resetPan() {
+        if (this.panInteractor) {
+            this.panInteractor.reset();
+        }
+    }
+    /**
+     * Change in 'renderer' property.
+     */
+    _rendererChanged(newValue, oldValue) {
+        if (oldValue === 'IMAGE') {
+            this.sceneImage.src = 'data:,';
+            this.renderRoot.querySelector('#dataVizDiv').removeChild(this.sceneImage);
+            this.renderRoot.querySelector('#dataVizDiv').removeChild(this.sceneImageMap);
+        }
+        else if (oldValue === 'SVG') {
+            var el = this.svgDiv;
+            while (el.firstChild)
+                el.removeChild(el.firstChild);
+            this.renderRoot.querySelector('#dataVizDiv').removeChild(this.svgDiv);
+        }
+        else if (this.threeViewer) {
+            this.threeViewer.clearGeometry();
+            this.threeViewer.render();
+            this.renderRoot.querySelector('#dataVizDiv').removeChild(this.threeViewer.domElement);
+        }
+        if (newValue === 'IMAGE') {
+            if (this.sceneImage === undefined) {
+                this.sceneImage = document.createElement("img");
+                this.sceneImage.setAttribute("id", "sceneImage");
+                this.sceneImage.setAttribute("usemap", "#sceneImageMap");
+                this.sceneImageMap = document.createElement("map");
+                this.sceneImageMap.setAttribute("id", "sceneImageMap");
+                this.sceneImageMap.setAttribute("name", "sceneImageMap");
+            }
+            this.renderRoot.querySelector('#dataVizDiv').appendChild(this.sceneImage);
+            this.renderRoot.querySelector('#dataVizDiv').appendChild(this.sceneImageMap);
+            this.threeViewer = null;
+        }
+        else if (newValue === 'SVG') {
+            if (this.svgDiv === undefined) {
+                this.svgDiv = document.createElement("div");
+                this.svgDiv.setAttribute("id", "svgDiv");
+            }
+            this.renderRoot.querySelector('#dataVizDiv').appendChild(this.svgDiv);
+            this.threeViewer = null;
+        }
+        else {
+            if (!this.threeViewer) {
+                // Create ThreeJS viewer
+                this.threeViewer = new Viewer();
+                // Check if the user has requested a specific renderer
+                var rendererId = 'avsDefaultWebGLRenderer';
+                //      if (this.rendererProperties.webGLRendererId !== undefined) {
+                //    	  rendererId = this.rendererProperties.webGLRendererId;
+                //      }
+                // Search for renderer, if not found create one and save to the DOM
+                var renderer = document.getElementById(rendererId);
+                if (renderer === undefined || renderer === null) {
+                    renderer = new AvsRenderer();
+                    renderer.setAttribute('id', rendererId);
+                    document.body.appendChild(renderer);
+                    //        console.log("create new webGL renderer = " + rendererId);
+                }
+                else {
+                    //        console.log("reference existing webGL renderer = " + rendererId);
+                }
+                this.threeViewer.setWebGLRenderer(renderer.webGLRenderer);
+                this.animator = new Animator();
+                this.threeViewer.setAnimator(this.animator);
+            }
+            this.renderRoot.querySelector('#dataVizDiv').appendChild(this.threeViewer.domElement);
+        }
+    }
+    /**
+     * Change in 'track-enable' property.
+     */
+    _trackEnableChanged(newValue, oldValue) {
+        if (newValue) {
+            if (this.rectCanvas === undefined) {
+                this.rectCanvas = document.createElement("canvas");
+                this.rectCanvas.setAttribute("id", "rectCanvas");
+                this.rectCtx = this.rectCanvas.getContext('2d');
+            }
+            this.renderRoot.appendChild(this.rectCanvas);
+        }
+        else {
+            this.renderRoot.removeChild(this.rectCanvas);
+        }
+    }
+    /**
+     * Change in 'display-canvas' property.
+     */
+    _displayCanvasChanged(newValue, oldValue) {
+        if (this.threeViewer) {
+            this.threeViewer.displayCanvas = newValue;
+        }
+    }
+    setTooltipHTML(html) {
+        this.renderRoot.querySelector('#tooltip').innerHTML = html;
+    }
+    showTooltip(clientX, clientY) {
+        var tooltip = this.renderRoot.querySelector('#tooltip');
+        var pos = this._calcTooltipPosition(tooltip, clientX, clientY);
+        tooltip.style.left = pos.x + "px";
+        tooltip.style.top = pos.y + "px";
+        tooltip.style.opacity = "1";
+    }
+    hideTooltip() {
+        var tooltip = this.renderRoot.querySelector('#tooltip');
+        tooltip.style.opacity = "0";
+    }
+    _calcTooltipPosition(tooltip, clientX, clientY) {
+        // Calculate the tooltip location based on 4 quadrants of the visible portion
+        // of the visualization window
+        var dataVizDiv = this.renderRoot.querySelector('#dataVizDiv');
+        var offset = this._getOffset(dataVizDiv);
+        var deltaTop = -Math.min(0, offset.top - window.pageYOffset);
+        var deltaLeft = -Math.min(0, offset.left - window.pageXOffset);
+        var deltaBottom = -Math.min(0, window.innerHeight - (dataVizDiv.offsetHeight + offset.top - window.pageYOffset));
+        var deltaRight = -Math.min(0, window.innerWidth - (dataVizDiv.offsetWidth + offset.left - window.pageXOffset));
+        var vizHeight = dataVizDiv.offsetHeight - deltaTop - deltaBottom;
+        var vizWidth = dataVizDiv.offsetWidth - deltaLeft - deltaRight;
+        var vizHalfX = vizWidth / 2 + deltaLeft;
+        var vizHalfY = vizHeight / 2 + deltaTop;
+        var toolPosition = { x: 0, y: 0 };
+        if (clientX < vizHalfX) {
+            var offst = (clientY < vizHalfY) ? 15 : 5;
+            toolPosition.x = clientX + offst + dataVizDiv.offsetLeft;
+        }
+        else {
+            toolPosition.x = clientX - 10 + dataVizDiv.offsetLeft - tooltip.offsetWidth;
+        }
+        if (clientY < vizHalfY) {
+            toolPosition.y = clientY + 5 + dataVizDiv.offsetTop;
+        }
+        else {
+            toolPosition.y = clientY - 10 + dataVizDiv.offsetTop - tooltip.offsetHeight;
+        }
+        return toolPosition;
+    }
+    _getOffset(dataVizDiv) {
+        var rect = dataVizDiv.getBoundingClientRect(), scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
+    }
+};
+__decorate([
+    property({ attribute: 'manual-update', type: Boolean })
+], AvsGoDataViz.prototype, "manualUpdate", void 0);
+__decorate([
+    property({ attribute: 'display-canvas', type: Boolean })
+], AvsGoDataViz.prototype, "displayCanvas", void 0);
+__decorate([
+    property()
+], AvsGoDataViz.prototype, "url", void 0);
+__decorate([
+    property({ attribute: 'url-load-json-file', type: Boolean })
+], AvsGoDataViz.prototype, "urlLoadJsonFile", void 0);
+__decorate([
+    property({ attribute: 'data-source-name' })
+], AvsGoDataViz.prototype, "dataSourceName", void 0);
+__decorate([
+    property({ attribute: 'data-source-user-properties' })
+], AvsGoDataViz.prototype, "dataSourceUserProperties", void 0);
+__decorate([
+    property({ attribute: 'scene-name' })
+], AvsGoDataViz.prototype, "sceneName", void 0);
+__decorate([
+    property({ attribute: 'scene-user-properties' })
+], AvsGoDataViz.prototype, "sceneUserProperties", void 0);
+__decorate([
+    property({ attribute: 'renderer-name' })
+], AvsGoDataViz.prototype, "rendererName", void 0);
+__decorate([
+    property({ attribute: 'renderer-user-properties' })
+], AvsGoDataViz.prototype, "rendererUserProperties", void 0);
+__decorate([
+    property()
+], AvsGoDataViz.prototype, "renderer", void 0);
+__decorate([
+    property({ attribute: 'stream-enable', type: Boolean })
+], AvsGoDataViz.prototype, "streamEnable", void 0);
+__decorate([
+    property({ attribute: 'stream-chunk-size-first' })
+], AvsGoDataViz.prototype, "streamChunkSizeFirst", void 0);
+__decorate([
+    property({ attribute: 'stream-chunk-size' })
+], AvsGoDataViz.prototype, "streamChunkSize", void 0);
+__decorate([
+    property({ attribute: 'theme-name' })
+], AvsGoDataViz.prototype, "themeName", void 0);
+__decorate([
+    property({ attribute: 'resize-threshold' })
+], AvsGoDataViz.prototype, "resizeThreshold", void 0);
+__decorate([
+    property({ attribute: 'pointer-timeout' })
+], AvsGoDataViz.prototype, "pointerTimeout", void 0);
+__decorate([
+    property({ attribute: 'tap-enable', type: Boolean })
+], AvsGoDataViz.prototype, "tapEnable", void 0);
+__decorate([
+    property({ attribute: 'tap-level' })
+], AvsGoDataViz.prototype, "tapLevel", void 0);
+__decorate([
+    property({ attribute: 'tap-depth' })
+], AvsGoDataViz.prototype, "tapDepth", void 0);
+__decorate([
+    property({ attribute: 'tap-highlight-enable', type: Boolean })
+], AvsGoDataViz.prototype, "tapHighlightEnable", void 0);
+__decorate([
+    property({ attribute: 'tap-highlight-color' })
+], AvsGoDataViz.prototype, "tapHighlightColor", void 0);
+__decorate([
+    property({ attribute: 'tap-highlight-layer-enable', type: Boolean })
+], AvsGoDataViz.prototype, "tapHighlightLayerEnable", void 0);
+__decorate([
+    property({ attribute: 'tap-process-event-on-client', type: Boolean })
+], AvsGoDataViz.prototype, "tapProcessEventOnClient", void 0);
+__decorate([
+    property({ attribute: 'track-enable', type: Boolean })
+], AvsGoDataViz.prototype, "trackEnable", void 0);
+__decorate([
+    property({ attribute: 'track-level' })
+], AvsGoDataViz.prototype, "trackLevel", void 0);
+__decorate([
+    property({ attribute: 'track-depth' })
+], AvsGoDataViz.prototype, "trackDepth", void 0);
+__decorate([
+    property({ attribute: 'track-highlight-enable', type: Boolean })
+], AvsGoDataViz.prototype, "trackHighlightEnable", void 0);
+__decorate([
+    property({ attribute: 'track-highlight-color' })
+], AvsGoDataViz.prototype, "trackHighlightColor", void 0);
+__decorate([
+    property({ attribute: 'track-highlight-layer-enable', type: Boolean })
+], AvsGoDataViz.prototype, "trackHighlightLayerEnable", void 0);
+__decorate([
+    property({ attribute: 'track-process-event-on-client', type: Boolean })
+], AvsGoDataViz.prototype, "trackProcessEventOnClient", void 0);
+__decorate([
+    property({ attribute: 'hover-enable', type: Boolean })
+], AvsGoDataViz.prototype, "hoverEnable", void 0);
+__decorate([
+    property({ attribute: 'hover-level' })
+], AvsGoDataViz.prototype, "hoverLevel", void 0);
+__decorate([
+    property({ attribute: 'hover-depth' })
+], AvsGoDataViz.prototype, "hoverDepth", void 0);
+__decorate([
+    property({ attribute: 'hover-highlight-enable', type: Boolean })
+], AvsGoDataViz.prototype, "hoverHighlightEnable", void 0);
+__decorate([
+    property({ attribute: 'hover-highlight-color' })
+], AvsGoDataViz.prototype, "hoverHighlightColor", void 0);
+__decorate([
+    property({ attribute: 'hover-highlight-layer-enable', type: Boolean })
+], AvsGoDataViz.prototype, "hoverHighlightLayerEnable", void 0);
+__decorate([
+    property({ attribute: 'transform-enable', type: Boolean })
+], AvsGoDataViz.prototype, "transformEnable", void 0);
+__decorate([
+    property({ attribute: 'transform-client-only', type: Boolean })
+], AvsGoDataViz.prototype, "transformClientOnly", void 0);
+__decorate([
+    property({ attribute: 'transform-rotate-disable', type: Boolean })
+], AvsGoDataViz.prototype, "transformRotateDisable", void 0);
+__decorate([
+    property({ attribute: 'transform-zoom-disable', type: Boolean })
+], AvsGoDataViz.prototype, "transformZoomDisable", void 0);
+__decorate([
+    property({ attribute: 'transform-pan-disable', type: Boolean })
+], AvsGoDataViz.prototype, "transformPanDisable", void 0);
+__decorate([
+    property({ attribute: 'transform-twist-angle' })
+], AvsGoDataViz.prototype, "transformTwistAngle", void 0);
+__decorate([
+    property({ attribute: 'transform-tilt-angle' })
+], AvsGoDataViz.prototype, "transformTiltAngle", void 0);
+__decorate([
+    property({ attribute: 'transform-scale' })
+], AvsGoDataViz.prototype, "transformScale", void 0);
+__decorate([
+    property({ attribute: 'motion-capture' })
+], AvsGoDataViz.prototype, "motionCapture", void 0);
+__decorate([
+    property({ attribute: 'zoom-rectangle-enable', type: Boolean })
+], AvsGoDataViz.prototype, "zoomRectangleEnable", void 0);
+__decorate([
+    property({ attribute: 'pan-enable', type: Boolean })
+], AvsGoDataViz.prototype, "panEnable", void 0);
+__decorate([
+    property({ attribute: 'pan-zoom-enable', type: Boolean })
+], AvsGoDataViz.prototype, "panZoomEnable", void 0);
+__decorate([
+    property({ attribute: 'pan-width-zoom-level' })
+], AvsGoDataViz.prototype, "panWidthZoomLevel", void 0);
+__decorate([
+    property({ attribute: 'pan-height-zoom-level' })
+], AvsGoDataViz.prototype, "panHeightZoomLevel", void 0);
+__decorate([
+    property({ attribute: 'pan-maximum-zoom-level' })
+], AvsGoDataViz.prototype, "panMaximumZoomLevel", void 0);
+__decorate([
+    property({ attribute: 'animated-glyphs-visible', type: Boolean })
+], AvsGoDataViz.prototype, "animatedGlyphsVisible", void 0);
+__decorate([
+    property({ attribute: 'animated-glyphs-enable', type: Boolean })
+], AvsGoDataViz.prototype, "animatedGlyphsEnable", void 0);
+__decorate([
+    property({ attribute: 'motion-capture-controls-enable', type: Boolean })
+], AvsGoDataViz.prototype, "motionCaptureControlsEnable", void 0);
+AvsGoDataViz = __decorate([
+    customElement('avs-go-dataviz')
+], AvsGoDataViz);
+export { AvsGoDataViz };