bruce-cesium 4.3.1 → 4.3.3

package/dist/bruce-cesium.es5.js

@@ -8337,6 +8337,7 @@ var EntityLabel;
             // 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;
             this.rego = params.rego;
             this.viewer = params.viewer;
             this.api = params.api;
@@ -8435,7 +8436,7 @@ var EntityLabel;
         Label.prototype.createLabel = function (starterPos3d) {
             var _a, _b, _c, _d, _e, _f, _g;
             return __awaiter(this, void 0, void 0, function () {
-                var pos3d, counter, sizeInM, heightRef, pixelOffset, visual, hierarchy, posses, centerIndex, pos1, pos2, pos3, posses, isClamped, centerIndex, model, size, height, scale, posses, centerIndex, text, type, e_2, ele, _lastDistance, _lastCameraPos, getDistance, MAX_DISTANCE, updateLabel, terrTimeout;
+                var pos3d, counter, sizeInM, heightRef, pixelOffset, visual, hierarchy, posses, centerIndex, pos1, pos2, pos3, posses, isClamped, centerIndex, model, size, height, scale, posses, centerIndex, text, type, e_2, ele, lineEle, lineEleNode, _lastDistance, _lastCameraPos, getDistance, MAX_DISTANCE, updateLabel, terrTimeout;
                 var _this = this;
                 return __generator(this, function (_h) {
                     switch (_h.label) {
@@ -8666,16 +8667,29 @@ var EntityLabel;
                                 return [2 /*return*/];
                             }
                             ele = null;
+                            lineEle = null;
                             if (this.label) {
                                 ele = this.label;
                             }
                             else {
                                 ele = document.createElement("div");
                                 ele.innerHTML = text;
-                                ele.setAttribute("style", "\n                    position: absolute;\n                    z-index: 0;\n                    display: none;\n                    pointer-events: none;\n                    padding: 6px 8px;\n                    border-radius: 6px;\n                    font-family: Arial;\n                    font-size: 12px;\n                    -webkit-backdrop-filter: blur(20px);\n                    backdrop-filter: blur(20px);\n                    background: rgba(33,39,42,.8);\n                    border-radius: 9px;\n                    box-shadow: 0 0 1px rgba(18,22,25,.36),0 18px 36px -4px rgba(18,22,25,.36);\n                    color: #ffffff;\n                }");
+                                ele.setAttribute("style", "\n                    position: absolute;\n                    z-index: 0;\n                    display: none;\n                    pointer-events: none;\n                    padding: 6px 8px;\n                    border-radius: 6px;\n                    font-family: Arial;\n                    font-size: 13px;\n                    border-radius: 9px;\n                    color: #ffffff;\n                    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);\n                }");
                                 this.label = ele;
                                 this.viewer.container.appendChild(ele);
                             }
+                            if (this.line) {
+                                lineEle = this.line;
+                            }
+                            else {
+                                lineEle = document.createElement("div");
+                                lineEle.setAttribute("style", "\n                    position: absolute;\n                    z-index: 0;\n                    display: none;\n                    pointer-events: none;\n                    width: 2px;\n                    background: rgba(255, 255, 255, 0.8);\n                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n                ");
+                                this.line = lineEle;
+                                lineEleNode = document.createElement("div");
+                                lineEleNode.setAttribute("style", "\n                    position: absolute;\n                    pointer-events: none;\n                    width: 5px;\n                    height: 5px;\n                    background: rgba(255, 255, 255, 0.8);\n                    border-radius: 50%;\n                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n                    top: -2px;\n                    left: -2px;\n                ");
+                                lineEle.appendChild(lineEleNode);
+                                this.viewer.container.appendChild(lineEle);
+                            }
                             _lastDistance = null;
                             _lastCameraPos = null;
                             getDistance = function () {
@@ -8702,7 +8716,7 @@ var EntityLabel;
                                 _lastCameraPos = cameraPos.clone();
                                 return distance;
                             };
-                            MAX_DISTANCE = Math.max(5000, sizeInM * 10);
+                            MAX_DISTANCE = Math.max(15000, sizeInM * 35);
                             if (visual && visual instanceof Entity) {
                                 // Consistent sized things.
                                 if (visual.polyline || visual.billboard || visual.point) {
@@ -8721,34 +8735,78 @@ var EntityLabel;
                                 var distance = getDistance();
                                 if (isNaN(distance) || (!_this.prePositioned && distance >= MAX_DISTANCE)) {
                                     ele.style.display = "none";
+                                    lineEle.style.display = "none";
                                     return;
                                 }
-                                var pos2d = SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene, _this._pos3d);
-                                if (isNaN(pos2d === null || pos2d === void 0 ? void 0 : pos2d.x)) {
-                                    ele.style.display = "none";
-                                    return;
-                                }
-                                // If out of the screen then we can hide it.
-                                if (pos2d.x < 0 || pos2d.x > _this.viewer.canvas.clientWidth ||
-                                    pos2d.y < 0 || pos2d.y > _this.viewer.canvas.clientHeight) {
-                                    ele.style.display = "none";
+                                var lineStartPos2d = SceneTransforms.wgs84ToWindowCoordinates(_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;
                                 }
                                 ele.style.display = "block";
-                                // Check scale to apply based on distance between camera and pos3d.
-                                // We'll make the label smaller and less transparent when further away.
-                                var scale = _this.prePositioned || MAX_DISTANCE == Infinity ? 1 : 1 - (distance / MAX_DISTANCE);
-                                if (scale && scale > 0.15) {
-                                    ele.style.transform = "scale(".concat(scale, ")");
-                                    ele.style.opacity = "".concat(scale);
-                                    var left = pos2d.x - (ele.clientWidth / 2) + pixelOffset.x;
-                                    ele.style.left = "".concat(left, "px");
-                                    var top_1 = pos2d.y - ele.clientHeight + (pixelOffset.y * scale);
-                                    ele.style.top = "".concat(top_1, "px");
+                                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.
+                                var opacity = _this.prePositioned || MAX_DISTANCE == Infinity ? 1 : 1 - (distance / MAX_DISTANCE);
+                                if (opacity && opacity > 0.15) {
+                                    _this.label.style.opacity = "".concat(opacity);
+                                    // Calc where the line should end.
+                                    // We get the pos3d and add 'n' to it, then turn it back into 2d.
+                                    var lineEndPos3d = _this._pos3d.clone();
+                                    var lineEndPoint = Cartographic.fromCartesian(lineEndPos3d);
+                                    // If known then calculate based on size.
+                                    // If we're close then we'll favour the distance over the size.
+                                    var addHeight = sizeInM > 0 ? Math.max(5, Math.min(distance / 5, sizeInM * 1.2)) : null;
+                                    // 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.
+                                    if (addHeight == null) {
+                                        addHeight = Math.max(5, Math.min(distance, _this.viewer.camera.positionCartographic.height) / 5);
+                                    }
+                                    lineEndPoint.height += addHeight;
+                                    lineEndPos3d = Cartographic.toCartesian(lineEndPoint);
+                                    var lineEndPos2d = SceneTransforms.wgs84ToWindowCoordinates(_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;
+                                    }
+                                    // If out of the screen then we can hide it.
+                                    var startOutOfScreen = (lineStartPos2d.x < 0 || lineStartPos2d.x > _this.viewer.canvas.clientWidth ||
+                                        lineStartPos2d.y < 0 || lineStartPos2d.y > _this.viewer.canvas.clientHeight);
+                                    var 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.
+                                    var labelLeft = lineEndPos2d.x + pixelOffset.x;
+                                    var labelTop = lineEndPos2d.y + pixelOffset.y;
+                                    _this.label.style.left = "".concat(labelLeft, "px");
+                                    _this.label.style.top = "".concat(labelTop, "px");
+                                    // Update line position and size.
+                                    var dx = lineEndPos2d.x - lineStartPos2d.x;
+                                    var dy = lineEndPos2d.y - lineStartPos2d.y;
+                                    var length_1 = Math.sqrt(dx * dx + dy * dy);
+                                    var angle = Math.atan2(dy, dx) - Math.PI / 2;
+                                    _this.line.style.left = "".concat(lineStartPos2d.x, "px");
+                                    _this.line.style.top = "".concat(lineStartPos2d.y, "px");
+                                    _this.line.style.height = "".concat(length_1, "px");
+                                    _this.line.style.transform = "rotate(".concat(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);
@@ -8780,6 +8838,10 @@ var EntityLabel;
                 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;
@@ -26441,7 +26503,7 @@ var ViewerUtils;
     ViewerUtils.AssertIonToken = AssertIonToken;
 })(ViewerUtils || (ViewerUtils = {}));
 
-var VERSION = "4.3.1";
+var VERSION = "4.3.3";
 
 export { VERSION, CesiumViewMonitor, ViewerUtils, MenuItemManager, EntityRenderEngine, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, GoogleSearchRenderManager, RelationsRenderManager, SharedGetters, CesiumParabola, EntityLabel, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, CESIUM_TIMELINE_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils, CesiumEntityStyler, CesiumAnimatedProperty, CesiumAnimatedInOut, Draw3dPolygon, Draw3dPolyline, MeasureCreator, Widget, VIEWER_BOOKMARKS_WIDGET_KEY, WidgetBookmarks, WidgetBranding, WidgetCursorBar, WidgetEmbeddedInfoView, WidgetInfoView, WidgetNavCompass$$1 as WidgetNavCompass, WidgetSearchBar, VIEWER_LEFT_PANEL_WIDGET_KEY, VIEWER_LEFT_PANEL_CSS_VAR_LEFT, WidgetLeftPanel, WidgetLeftPanelTab, WidgetLeftPanelTabBookmarks };
 //# sourceMappingURL=bruce-cesium.es5.js.map