bruce-cesium 5.7.9 → 5.8.0

package/dist/lib/rendering/render-managers/common/entity-label.js

@@ -0,0 +1,703 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityLabel = void 0;
+const Cesium = require("cesium");
+const entity_utils_1 = require("../../../utils/entity-utils");
+const js_utils_1 = require("../../../internal/js-utils");
+const drawing_utils_1 = require("../../../utils/drawing-utils");
+const measure_utils_1 = require("../../../utils/measure-utils");
+const bruce_models_1 = require("bruce-models");
+/**
+ * Returns cesium property's value.
+ * This will check if it's one that changes over time, or just a fixed value.
+ * Eg: const pos3d = getValue<Cesium.Cartesian3>(cViewer, cEntity.point.position);
+ * @param viewer
+ * @param obj
+*/
+function getValue(viewer, obj) {
+    if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
+        let date = viewer.scene.lastRenderTime;
+        if (!date) {
+            date = viewer.clock.currentTime;
+        }
+        return obj.getValue(date);
+    }
+    return obj;
+}
+/**
+ * Util for generating labels within cesium space on entities.
+*/
+var EntityLabel;
+(function (EntityLabel) {
+    // Key where the label instance is stored within the cesium entity.
+    // Eg: rego[ATTACH_KEY] = new EntityLabel(...);
+    EntityLabel.ATTACH_KEY = "nextspace-navigator-entity-label";
+    class Label {
+        get Rego() {
+            return this.rego;
+        }
+        get Disposed() {
+            return this.disposed;
+        }
+        get pos3d() {
+            return this._pos3d;
+        }
+        set pos3d(val) {
+            this._pos3d = val;
+            this.prePositioned = !isNaN(val === null || val === void 0 ? void 0 : val.x);
+            this.createLabel(val);
+        }
+        constructor(params) {
+            var _a;
+            // Counter to help differentiate between createLabel calls.
+            this.counter = 0;
+            // The label element itself.
+            this.label = null;
+            // Callback to kill render listener.
+            this.renderRemoval = null;
+            // Callback to kill terrain listener.
+            this.terrChangedRemoval = null;
+            // Indicates the label was disposed and any actions will be ignored.
+            this.disposed = false;
+            // Calculated pos3d for the label.
+            // Override to make it draw at a different position.
+            this._pos3d = null;
+            this.prePositioned = false;
+            // If the entity name is not loaded-in, we'll wait a moment then request the information.
+            // We wait a moment to avoid the user quickly dragging their mouse over entities and spamming requests.
+            this.loadTimeout = null;
+            this.loadedName = false;
+            this.line = null;
+            // Null = not attempted to load.
+            this.additionalTexts = null;
+            this.rego = params.rego;
+            this.viewer = params.viewer;
+            this.api = params.api;
+            this.visualRegister = params.visualRegister;
+            this.prePositioned = !isNaN((_a = params.pos3d) === null || _a === void 0 ? void 0 : _a.x);
+            this.createLabel(params.pos3d);
+            if (!params.api && !bruce_models_1.ENVIRONMENT.IS_SELF_MANAGED) {
+                params.api = bruce_models_1.ENVIRONMENT.Api().GetBruceApi();
+            }
+        }
+        /**
+         * Loads the Entity's name and updates the corresponding visual rego.
+         */
+        async loadName() {
+            if (this.loadedName) {
+                return;
+            }
+            try {
+                if (this.api) {
+                    const rego = this.rego;
+                    this.rego.name = await bruce_models_1.Entity.CalculateNameAsync({
+                        api: this.api,
+                        entity: null,
+                        entityId: rego.entityId,
+                        defaultToId: false
+                    });
+                    if (!this.rego.name) {
+                        this.rego.name = "Unnamed Entity";
+                    }
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+            this.loadedName = true;
+        }
+        /**
+         * Disposes label and marks instance as disposed.
+         * Recalling will be ignored.
+         */
+        Dispose() {
+            if (this.disposed) {
+                return;
+            }
+            this.disposed = true;
+            this.removeLabel();
+            clearTimeout(this.loadTimeout);
+            this.loadTimeout = null;
+        }
+        /**
+         * Creates cesium entity for the label if one does not exist.
+         * @param starterPos3d optional position to create label at. Ignored for billboard labels.
+         */
+        async createLabel(starterPos3d) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            this.removeLabel();
+            let pos3d = starterPos3d ? starterPos3d.clone() : null;
+            const counter = ++this.counter;
+            if (this.disposed) {
+                return;
+            }
+            let sizeInM = 0;
+            let heightRef = null;
+            let pixelOffset = new Cesium.Cartesian2(0, -5);
+            if (!isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                heightRef = Cesium.HeightReference.NONE;
+                pixelOffset.y = -15;
+            }
+            const visual = (_a = this.rego) === null || _a === void 0 ? void 0 : _a.visual;
+            // If pos3d is already set we'll run through the visuals to figure out the entity's size.
+            // If unset then we'll use the entity's position to draw the label.
+            if (visual && visual instanceof Cesium.Entity) {
+                if (!this.prePositioned && visual.polygon) {
+                    const hierarchy = getValue(this.viewer, visual.polygon.hierarchy);
+                    if ((_b = hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.positions) === null || _b === void 0 ? void 0 : _b.length) {
+                        const posses = [].concat(hierarchy.positions);
+                        try {
+                            sizeInM = (_c = measure_utils_1.MeasureUtils.MeasurePolygon({
+                                posses: posses
+                            })) === null || _c === void 0 ? void 0 : _c.area;
+                            if (isNaN(sizeInM)) {
+                                sizeInM = 0;
+                            }
+                        }
+                        catch (e) {
+                            console.error("Failed to measure polygon", e);
+                        }
+                        if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                            heightRef = getValue(this.viewer, visual.polygon.heightReference);
+                            if (bruce_models_1.Cartes.IsRing3Closed(posses)) {
+                                posses.pop();
+                            }
+                            // We'll get 3 points from the polygon and use the center of them.
+                            const centerIndex = Math.floor(posses.length / 2);
+                            if (posses.length >= 3) {
+                                const pos1 = posses[centerIndex];
+                                const pos2 = posses[0];
+                                const pos3 = posses[posses.length - 1];
+                                if (pos1 && pos2 && pos3) {
+                                    pos3d = Cesium.Cartesian3.midpoint(pos1, pos2, new Cesium.Cartesian3());
+                                    pos3d = Cesium.Cartesian3.midpoint(pos3d, pos3, new Cesium.Cartesian3());
+                                }
+                            }
+                            if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                                pos3d = posses[centerIndex];
+                            }
+                        }
+                    }
+                }
+                else if (!this.prePositioned && visual.polyline) {
+                    const posses = getValue(this.viewer, visual.polyline.positions);
+                    if (posses === null || posses === void 0 ? void 0 : posses.length) {
+                        if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                            const isClamped = getValue(this.viewer, visual.polyline.clampToGround);
+                            heightRef = isClamped == false ? Cesium.HeightReference.NONE : Cesium.HeightReference.CLAMP_TO_GROUND;
+                            // Center of the line.
+                            const centerIndex = Math.floor(posses.length / 2);
+                            pos3d = posses[centerIndex];
+                        }
+                        try {
+                            sizeInM = (_d = measure_utils_1.MeasureUtils.MeasurePolyline({
+                                posses: posses
+                            })) === null || _d === void 0 ? void 0 : _d.totalLength;
+                            if (isNaN(sizeInM)) {
+                                sizeInM = 0;
+                            }
+                        }
+                        catch (e) {
+                            console.error("Failed to measure polyline", e);
+                        }
+                    }
+                }
+                else if (visual.model) {
+                    if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                        heightRef = getValue(this.viewer, visual.model.heightReference);
+                    }
+                    const model = visual.model;
+                    if (model._radiusLoaded && model._radius > 0) {
+                        sizeInM = model._radius;
+                    }
+                }
+                else if (visual.point) {
+                    heightRef = getValue(this.viewer, visual.point.heightReference);
+                    const size = getValue(this.viewer, visual.point.pixelSize);
+                    if (size) {
+                        pixelOffset.y = -(size / 2);
+                        pixelOffset.y -= 5;
+                    }
+                }
+                else if (visual.billboard) {
+                    heightRef = getValue(this.viewer, visual.billboard.heightReference);
+                    // Height of billboard is used to offset label.
+                    const height = visual.billboard._billboardSize;
+                    if (height) {
+                        const scale = (0, js_utils_1.EnsureNumber)(getValue(this.viewer, visual.billboard.scale), 1);
+                        pixelOffset.y = -((height * scale) / 2);
+                        pixelOffset.y -= 5;
+                    }
+                }
+                else if (!this.prePositioned && visual.corridor) {
+                    const posses = getValue(this.viewer, visual.corridor.positions);
+                    if (posses === null || posses === void 0 ? void 0 : posses.length) {
+                        if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                            heightRef = getValue(this.viewer, visual.corridor.heightReference);
+                            // Center of the line.
+                            const centerIndex = Math.floor(posses.length / 2);
+                            pos3d = posses[centerIndex];
+                        }
+                        try {
+                            sizeInM = (_e = measure_utils_1.MeasureUtils.MeasurePolyline({
+                                posses: posses
+                            })) === null || _e === void 0 ? void 0 : _e.totalLength;
+                            if (isNaN(sizeInM)) {
+                                sizeInM = 0;
+                            }
+                        }
+                        catch (e) {
+                            console.error("Failed to measure polyline", e);
+                        }
+                    }
+                }
+                else if (visual.ellipse) {
+                    if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                        heightRef = getValue(this.viewer, visual.ellipse.heightReference);
+                    }
+                }
+                if (visual.billboard || visual.point || isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                    pos3d = getValue(this.viewer, visual.position);
+                }
+            }
+            if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                pos3d = await entity_utils_1.EntityUtils.GetPosAsync({
+                    viewer: this.viewer,
+                    api: this.api,
+                    entityId: (_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId,
+                    returnHeightRef: Cesium.HeightReference.NONE,
+                    recordHeightRef: heightRef == null || isNaN(heightRef) ? Cesium.HeightReference.NONE : heightRef,
+                    tilesetId: (_g = this.rego) === null || _g === void 0 ? void 0 : _g.tilesetId,
+                    visualRegister: this.visualRegister
+                });
+                heightRef = Cesium.HeightReference.NONE;
+                if (this.counter != counter || this.disposed) {
+                    return;
+                }
+            }
+            if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                return;
+            }
+            pos3d = drawing_utils_1.DrawingUtils.EnsurePosHeight({
+                desiredHeightRef: Cesium.HeightReference.NONE,
+                heightRef: heightRef,
+                pos3d: pos3d,
+                viewer: this.viewer
+            });
+            if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                return;
+            }
+            this._pos3d = pos3d;
+            let text = "Unknown Entity";
+            const additionalTexts = this.additionalTexts ? this.additionalTexts : [];
+            if (this.rego) {
+                if (this.rego.relation) {
+                    let type = this.rego.relation.RelationType;
+                    if (!type && this.rego.relation["Relation.Type.ID"]) {
+                        try {
+                            type = (await bruce_models_1.EntityRelationType.Get({
+                                api: this.api,
+                                relationTypeId: this.rego.relation["Relation.Type.ID"]
+                            })).relationType;
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
+                    }
+                    if (type) {
+                        text = type.Name ? type.Name : (type.ForwardName + "/" + type.ReverseName);
+                    }
+                    else {
+                        text = "Unknown Relationship";
+                    }
+                }
+                else if (this.rego.name) {
+                    text = this.rego.name;
+                }
+                else {
+                    text = "Unnamed Entity";
+                }
+                // Load any missing information and re-render the label afterwards.
+                if (this.additionalTexts == null || (text == "Unnamed Entity" && !this.loadedName)) {
+                    let loadName = false;
+                    if ((text == "Unnamed Entity" && !this.loadedName)) {
+                        text = "Loading...";
+                        loadName = true;
+                    }
+                    clearTimeout(this.loadTimeout);
+                    this.loadTimeout = setTimeout(async () => {
+                        var _a, _b, _c, _d;
+                        if (this.disposed || this.counter != counter) {
+                            return;
+                        }
+                        // Load additional texts to display alongside the name.
+                        if (this.additionalTexts == null) {
+                            const additionalTexts = [];
+                            // Rego might not have a known or default Entity Type. Eg: OSM building.
+                            if (this.rego.entityTypeId) {
+                                let entityType = null;
+                                try {
+                                    const data = await bruce_models_1.EntityType.Get({
+                                        api: this.api,
+                                        entityTypeId: this.rego.entityTypeId
+                                    });
+                                    if (data === null || data === void 0 ? void 0 : data.entityType) {
+                                        entityType = data.entityType;
+                                    }
+                                }
+                                // Type could be deleted, however we'll just catch that to show a label instead of nothing.
+                                // This is not unusual for Tilesets where the Type that is baked might be outdated.
+                                catch (e) {
+                                    console.error(e);
+                                }
+                                // Type could be deleted, however we'll just catch that to show a label instead of nothing.
+                                // This is not unusual for Tilesets where the Type that is baked might be outdated.
+                                if (entityType) {
+                                    const attributes = (_b = (_a = entityType.VisualSettings) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.attributes;
+                                    if (attributes) {
+                                        try {
+                                            const { entity } = await bruce_models_1.Entity.Get({
+                                                api: this.api,
+                                                entityId: this.rego.entityId,
+                                                scenario: ((_c = this.rego.outline) === null || _c === void 0 ? void 0 : _c.length) ? (_d = this.rego.outline.find(x => !!x.Scenario)) === null || _d === void 0 ? void 0 : _d.Scenario : null,
+                                                schemaId: this.rego.schema,
+                                                migrated: true
+                                            });
+                                            for (let i = 0; i < attributes.length; i++) {
+                                                const value = bruce_models_1.Entity.GetValue({
+                                                    entity: entity,
+                                                    path: attributes[i]
+                                                });
+                                                if (value) {
+                                                    additionalTexts.push(value);
+                                                }
+                                            }
+                                        }
+                                        // Entity doesn't exist.
+                                        // Likely a graphic with an ID that points to no record.
+                                        catch (e) {
+                                            console.error(e);
+                                        }
+                                    }
+                                }
+                            }
+                            this.additionalTexts = additionalTexts;
+                        }
+                        // Load name and apply to rego.
+                        if (loadName) {
+                            await this.loadName();
+                        }
+                        if (this.disposed || this.counter != counter) {
+                            return;
+                        }
+                        this.createLabel(starterPos3d);
+                    }, 120);
+                }
+            }
+            if (this.disposed || this.counter != counter) {
+                return;
+            }
+            const labelContent = `
+                <div>
+                    <div style="margin-bottom:4px">${text}</div>
+                    ${additionalTexts.map(attr => `<div>${attr}</div>`).join('')}
+                </div>
+            `;
+            let ele = null;
+            let lineEle = null;
+            if (this.label) {
+                ele = this.label;
+            }
+            else {
+                ele = document.createElement("div");
+                ele.innerHTML = labelContent;
+                ele.setAttribute("style", `
+                    position: absolute;
+                    z-index: 0;
+                    display: none;
+                    pointer-events: none;
+                    padding: 6px 8px;
+                    border-radius: 6px;
+                    font-family: Arial;
+                    font-size: 13px;
+                    border-radius: 9px;
+                    color: #ffffff;
+                    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+                }`);
+                this.label = ele;
+                this.viewer.container.appendChild(ele);
+            }
+            if (this.line) {
+                lineEle = this.line;
+            }
+            else {
+                lineEle = document.createElement("div");
+                lineEle.setAttribute("style", `
+                    position: absolute;
+                    z-index: 0;
+                    display: none;
+                    pointer-events: none;
+                    width: 2px;
+                    background: rgba(255, 255, 255, 0.8);
+                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+                `);
+                this.line = lineEle;
+                // We'll draw a ball at the bottom of the line to make it look like it's connecting to the entity.
+                const lineEleNode = document.createElement("div");
+                lineEleNode.setAttribute("style", `
+                    position: absolute;
+                    pointer-events: none;
+                    width: 5px;
+                    height: 5px;
+                    background: rgba(255, 255, 255, 0.8);
+                    border-radius: 50%;
+                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+                    top: -2px;
+                    left: -2px;
+                `);
+                lineEle.appendChild(lineEleNode);
+                this.viewer.container.appendChild(lineEle);
+            }
+            let _lastDistance = null;
+            let _lastCameraPos = null;
+            const getDistance = () => {
+                var _a;
+                if (this.disposed) {
+                    return null;
+                }
+                const cameraPos = (_a = this.viewer.camera) === null || _a === void 0 ? void 0 : _a.position;
+                if (isNaN(cameraPos === null || cameraPos === void 0 ? void 0 : cameraPos.x)) {
+                    return null;
+                }
+                // If camera hasn't moved much then we can use the last distance.
+                const TOLERANCE = 0.1;
+                if (_lastCameraPos) {
+                    const totalMovement = Math.abs(_lastCameraPos.x - cameraPos.x) +
+                        Math.abs(_lastCameraPos.y - cameraPos.y) +
+                        Math.abs(_lastCameraPos.z - cameraPos.z);
+                    if (totalMovement < TOLERANCE) {
+                        return _lastDistance;
+                    }
+                }
+                const distance = Cesium.Cartesian3.distance(cameraPos, this._pos3d);
+                _lastDistance = distance;
+                _lastCameraPos = cameraPos.clone();
+                return distance;
+            };
+            let MAX_DISTANCE = Math.max(15000, sizeInM * 35);
+            if (visual && visual instanceof Cesium.Entity) {
+                // Consistent sized things.
+                if (visual.polyline || visual.billboard || visual.point) {
+                    MAX_DISTANCE = Infinity;
+                }
+            }
+            const updateLabel = () => {
+                var _a;
+                if (this.disposed || isNaN((_a = this._pos3d) === null || _a === void 0 ? void 0 : _a.x)) {
+                    return;
+                }
+                if (!this.viewer || this.viewer.isDestroyed()) {
+                    this.Dispose();
+                    return;
+                }
+                const distance = getDistance();
+                if (isNaN(distance) || (!this.prePositioned && distance >= MAX_DISTANCE)) {
+                    ele.style.display = "none";
+                    lineEle.style.display = "none";
+                    return;
+                }
+                const CESIUM = Cesium;
+                const _3dTo2D = Cesium.SceneTransforms.hasOwnProperty("wgs84ToWindowCoordinates") ? CESIUM.SceneTransforms.wgs84ToWindowCoordinates : CESIUM.SceneTransforms.worldToWindowCoordinates;
+                const lineStartPos2d = _3dTo2D(this.viewer.scene, this._pos3d);
+                // Invalid point.
+                if (isNaN(lineStartPos2d === null || lineStartPos2d === void 0 ? void 0 : lineStartPos2d.x)) {
+                    ele.style.transform = "";
+                    ele.style.opacity = "0";
+                    lineEle.style.display = "none";
+                    return;
+                }
+                // Offset start by the pixel offset.
+                lineStartPos2d.x += pixelOffset.x;
+                lineStartPos2d.y += pixelOffset.y;
+                ele.style.display = "block";
+                lineEle.style.display = "block";
+                // Calculate opacity to apply based on distance between camera and pos3d.
+                // We'll make the label less transparent when further away.
+                const opacity = this.prePositioned || MAX_DISTANCE == Infinity ? 1 : 1 - (distance / MAX_DISTANCE);
+                if (opacity && opacity > 0.15) {
+                    this.label.style.opacity = `${opacity}`;
+                    // Calc where the line should end.
+                    // We get the pos3d and add 'n' to it, then turn it back into 2d.
+                    let lineEndPos3d = this._pos3d.clone();
+                    const lineEndPoint = Cesium.Cartographic.fromCartesian(lineEndPos3d);
+                    let addHeight = null;
+                    // If we're pre-positioned that means the user is hovering over the entity.
+                    // We will keep the height low to avoid looking goofy.
+                    if (this.prePositioned) {
+                        addHeight = distance / 24;
+                    }
+                    else {
+                        // If known then calculate based on size.
+                        // If we're close then we'll favour the distance over the size.
+                        if (sizeInM && sizeInM > 0) {
+                            addHeight = Math.min(distance / 5, sizeInM * 1.2);
+                        }
+                        // If unknown then calculate based on camera height or distance.
+                        // Radius is unknown for Tileset things. We could bake the radius in possibly as a feature property.
+                        // We have to make it work for both labels against tall skyscrapers, and up-close assembly models.
+                        else {
+                            addHeight = Math.min(distance, this.viewer.camera.positionCartographic.height) / 7;
+                        }
+                    }
+                    // The ratio is roughly 1m = 11px on the screen.
+                    // So if we want to add additional labels then we'll need to adjust the height.
+                    if (additionalTexts === null || additionalTexts === void 0 ? void 0 : additionalTexts.length) {
+                        // Each additional text is about 16px tall.
+                        // So we get the total px height and divide by 11 to get the meters.
+                        addHeight += ((additionalTexts.length * 16) / 11);
+                    }
+                    // Safety check.
+                    if (!addHeight || addHeight <= 0) {
+                        addHeight = 0.001;
+                    }
+                    lineEndPoint.height += addHeight;
+                    lineEndPos3d = Cesium.Cartographic.toCartesian(lineEndPoint);
+                    const CESIUM = Cesium;
+                    const _3dTo2D = Cesium.SceneTransforms.hasOwnProperty("wgs84ToWindowCoordinates") ? CESIUM.SceneTransforms.wgs84ToWindowCoordinates : CESIUM.SceneTransforms.worldToWindowCoordinates;
+                    let lineEndPos2d = _3dTo2D(this.viewer.scene, lineEndPos3d);
+                    // Invalid point.
+                    if (isNaN(lineEndPos2d === null || lineEndPos2d === void 0 ? void 0 : lineEndPos2d.x)) {
+                        ele.style.transform = "";
+                        ele.style.opacity = "0";
+                        lineEle.style.display = "none";
+                        return;
+                    }
+                    // Offset end by the pixel offset.
+                    lineEndPos2d.x += pixelOffset.x;
+                    lineEndPos2d.y += pixelOffset.y;
+                    // If out of the screen then we can hide it.
+                    const startOutOfScreen = (lineStartPos2d.x < 0 || lineStartPos2d.x > this.viewer.canvas.clientWidth ||
+                        lineStartPos2d.y < 0 || lineStartPos2d.y > this.viewer.canvas.clientHeight);
+                    const endOutOfScreen = (lineEndPos2d.x < 0 || lineEndPos2d.x > this.viewer.canvas.clientWidth ||
+                        lineEndPos2d.y < 0 || lineEndPos2d.y > this.viewer.canvas.clientHeight);
+                    if (startOutOfScreen && endOutOfScreen) {
+                        ele.style.transform = "";
+                        ele.style.opacity = "0";
+                        lineEle.style.display = "none";
+                        return;
+                    }
+                    // Position the label above the line end point.
+                    this.label.style.left = `${lineEndPos2d.x}px`;
+                    this.label.style.top = `${lineEndPos2d.y}px`;
+                    // Update line position and size.
+                    const dx = lineEndPos2d.x - lineStartPos2d.x;
+                    const dy = lineEndPos2d.y - lineStartPos2d.y;
+                    const length = Math.sqrt(dx * dx + dy * dy);
+                    const angle = Math.atan2(dy, dx) - Math.PI / 2;
+                    this.line.style.left = `${lineStartPos2d.x}px`;
+                    this.line.style.top = `${lineStartPos2d.y}px`;
+                    this.line.style.height = `${length}px`;
+                    this.line.style.transform = `rotate(${angle}rad)`;
+                    this.line.style.transformOrigin = 'top center';
+                }
+                else {
+                    ele.style.transform = "";
+                    ele.style.opacity = "0";
+                    lineEle.style.display = "none";
+                }
+            };
+            this.renderRemoval = this.viewer.scene.postUpdate.addEventListener(updateLabel);
+            updateLabel();
+            // If terrain changes then we'll re-call createLabel as the position may have changed.
+            let terrTimeout = null;
+            this.terrChangedRemoval = this.viewer.scene.terrainProviderChanged.addEventListener(() => {
+                clearTimeout(terrTimeout);
+                if (this.disposed || this.counter != counter) {
+                    return;
+                }
+                terrTimeout = setTimeout(() => {
+                    if (this.disposed || counter != this.counter) {
+                        return;
+                    }
+                    this.createLabel(starterPos3d);
+                }, 2500);
+            });
+        }
+        /**
+         * Removes label from the viewer and unsubscribes from events.
+         */
+        removeLabel() {
+            if (this.label &&
+                this.label.parentElement) {
+                this.label.parentElement.removeChild(this.label);
+                this.label = null;
+            }
+            if (this.line && this.line.parentElement) {
+                this.line.parentElement.removeChild(this.line);
+                this.line = null;
+            }
+            if (this.renderRemoval) {
+                this.renderRemoval();
+                this.renderRemoval = null;
+            }
+            if (this.terrChangedRemoval) {
+                this.terrChangedRemoval();
+                this.terrChangedRemoval = null;
+            }
+        }
+    }
+    EntityLabel.Label = Label;
+    /**
+     * Creates an entity label for a given rego.
+     * If one exists then the action is ignored.
+     */
+    function Attach(params) {
+        const { rego, viewer, pos3d, visualRegister, api } = params;
+        if (!rego || !viewer || rego[EntityLabel.ATTACH_KEY]) {
+            return;
+        }
+        rego[EntityLabel.ATTACH_KEY] = new Label({
+            rego,
+            viewer,
+            pos3d,
+            visualRegister,
+            api
+        });
+        return rego[EntityLabel.ATTACH_KEY];
+    }
+    EntityLabel.Attach = Attach;
+    /**
+     * Removes an entity label from a given rego.
+     * If one doesn't exist then the action is ignored.
+     */
+    function Detatch(params) {
+        var _a, _b, _c;
+        let { rego, label } = params;
+        if (!rego && label) {
+            rego = label.Rego;
+        }
+        if (!rego || !rego[EntityLabel.ATTACH_KEY]) {
+            if (label) {
+                (_a = label.Dispose) === null || _a === void 0 ? void 0 : _a.call(label);
+            }
+            return;
+        }
+        (_c = (_b = rego[EntityLabel.ATTACH_KEY]).Dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        rego[EntityLabel.ATTACH_KEY] = null;
+    }
+    EntityLabel.Detatch = Detatch;
+    /**
+     * Returns label instance from given rego if one exists.
+     * @param params
+     * @returns
+     */
+    function GetLabel(params) {
+        const { rego } = params;
+        if (!rego) {
+            return null;
+        }
+        return rego[EntityLabel.ATTACH_KEY];
+    }
+    EntityLabel.GetLabel = GetLabel;
+})(EntityLabel = exports.EntityLabel || (exports.EntityLabel = {}));
+//# sourceMappingURL=entity-label.js.map