bruce-cesium 7.3.9 → 7.4.1

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

@@ -8,6 +8,7 @@ const js_utils_2 = 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");
+const point_clustering_core_1 = require("./point-clustering-core");
 /**
  * Returns cesium property's value.
  * This will check if it's one that changes over time, or just a fixed value.
@@ -30,10 +31,565 @@ function getValue(viewer, obj) {
 */
 var EntityLabel;
 (function (EntityLabel) {
+    const ICON_BACKGROUND_BLEND = 0.8;
+    const ICON_BACKGROUND_ALPHA = 0.45;
+    const TEXT_MAX_WIDTH = 200;
     // Key where the label instance is stored within the cesium entity.
     // Eg: rego[ATTACH_KEY] = new EntityLabel(...);
     EntityLabel.ATTACH_KEY = "nextspace-navigator-entity-label";
+    /*
+     * Indexes screen rectangles so sparse scenes do not compare every label with every other label.
+     */
+    class ScreenIndex {
+        constructor() {
+            this.cells = new Map();
+            this.large = [];
+            this.all = [];
+        }
+        keys(frame, padding = 0) {
+            const x0 = Math.floor((frame.x - padding) / 64);
+            const y0 = Math.floor((frame.y - padding) / 64);
+            const x1 = Math.floor((frame.x + frame.width + padding) / 64);
+            const y1 = Math.floor((frame.y + frame.height + padding) / 64);
+            if ((x1 - x0 + 1) * (y1 - y0 + 1) > 4096) {
+                return null;
+            }
+            const keys = [];
+            for (let x = x0; x <= x1; x++) {
+                for (let y = y0; y <= y1; y++) {
+                    keys.push(`${x},${y}`);
+                }
+            }
+            return keys;
+        }
+        Add(frame) {
+            this.all.push(frame);
+            const keys = this.keys(frame);
+            if (!keys) {
+                this.large.push(frame);
+                return;
+            }
+            for (const key of keys) {
+                if (!this.cells.has(key)) {
+                    this.cells.set(key, []);
+                }
+                this.cells.get(key).push(frame);
+            }
+        }
+        Query(frame, padding = 0) {
+            const keys = this.keys(frame, padding);
+            const found = new Set(keys ? this.large : this.all);
+            for (const key of keys || []) {
+                for (const item of this.cells.get(key) || []) {
+                    found.add(item);
+                }
+            }
+            return (Array.from(found).filter(other => frame.x <= other.x + other.width + padding && frame.x + frame.width + padding >= other.x &&
+                frame.y <= other.y + other.height + padding && frame.y + frame.height + padding >= other.y));
+        }
+        HasOverlap(frame) {
+            var _a;
+            const intersects = (other) => (frame.x <= other.x + other.width && frame.x + frame.width >= other.x &&
+                frame.y <= other.y + other.height && frame.y + frame.height >= other.y);
+            const keys = this.keys(frame);
+            if ((keys ? this.large : this.all).some(intersects)) {
+                return true;
+            }
+            for (const key of keys || []) {
+                if ((_a = this.cells.get(key)) === null || _a === void 0 ? void 0 : _a.some(intersects)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+    }
+    /*
+     * Includes the stem in collision checks without treating two crossing stems as text occlusion.
+     */
+    function leaderBounds(frame) {
+        if (!frame.hasLeader || !Number.isFinite(frame.anchorX) || !Number.isFinite(frame.anchorY)) {
+            return undefined;
+        }
+        const endX = Math.max(frame.x, Math.min(frame.anchorX, frame.x + frame.width));
+        const endY = Math.max(frame.y, Math.min(frame.anchorY, frame.y + frame.height));
+        if (Math.hypot(frame.anchorX - endX, frame.anchorY - endY) < .01) {
+            return undefined;
+        }
+        return {
+            ...frame,
+            x: Math.min(frame.anchorX, endX) - 1,
+            y: Math.min(frame.anchorY, endY) + .01,
+            width: Math.abs(frame.anchorX - endX) + 2,
+            height: Math.max(0, Math.abs(frame.anchorY - endY) - .02)
+        };
+    }
+    /*
+     * Remembers sides, never rendered positions: its own output cannot trigger another layout pass.
+     */
+    class PlacementMemory {
+        constructor() {
+            this.previous = new Map();
+            this.nextOrder = 0;
+        }
+        Resolve(frames) {
+            var _a, _b;
+            const live = new Set(frames.map(frame => frame.id));
+            const moved = (frame) => {
+                var _a;
+                const old = (_a = this.previous.get(frame.id)) === null || _a === void 0 ? void 0 : _a.frame;
+                return (!old ||
+                    old.transient !== frame.transient || old.canFlip !== frame.canFlip ||
+                    Math.hypot(frame.x - old.x, frame.y - old.y) >= 24 ||
+                    Math.abs(frame.width - old.width) >= 8 || Math.abs(frame.height - old.height) >= 8);
+            };
+            const persistent = frames.filter(frame => !frame.transient);
+            const changes = (persistent.filter(moved).length +
+                Array.from(this.previous.values()).filter(old => !old.frame.transient && !live.has(old.frame.id)).length);
+            // A hover or one arrival cannot rearrange incumbents; a substantial batch/camera change can.
+            const restructure = this.previous.size > 0 && changes >= Math.max(2, Math.ceil(persistent.length * 0.3));
+            const fixed = (frame) => !restructure && !frame.transient && this.previous.has(frame.id) && !moved(frame);
+            const ordered = ([...frames].sort((a, b) => {
+                var _a, _b, _c, _d;
+                return Number(fixed(b)) - Number(fixed(a)) ||
+                    Number(Boolean(a.transient)) - Number(Boolean(b.transient)) ||
+                    ((_b = (_a = this.previous.get(a.id)) === null || _a === void 0 ? void 0 : _a.order) !== null && _b !== void 0 ? _b : Infinity) - ((_d = (_c = this.previous.get(b.id)) === null || _c === void 0 ? void 0 : _c.order) !== null && _d !== void 0 ? _d : Infinity) ||
+                    a.depth - b.depth || a.id.localeCompare(b.id);
+            }));
+            const text = new ScreenIndex(), leaders = new ScreenIndex();
+            const placed = new Map();
+            const next = new Map();
+            const candidate = (frame, side) => {
+                var _a;
+                return (side === "left" && frame.canFlip ?
+                    { ...frame, x: Math.max(0, Math.min(frame.anchorX - frame.width, ((_a = frame.viewportWidth) !== null && _a !== void 0 ? _a : Infinity) - frame.width)) } :
+                    frame);
+            };
+            const score = (frame, padding = 0) => {
+                const box = {
+                    ...frame,
+                    x: frame.x - padding + .01,
+                    y: frame.y - padding + .01,
+                    width: Math.max(0, frame.width + padding * 2 - .02),
+                    height: Math.max(0, frame.height + padding * 2 - .02)
+                };
+                const stem = leaderBounds(frame);
+                return (Number(text.HasOverlap(box)) * 4 + Number(leaders.HasOverlap(box)) +
+                    Number(Boolean(stem && text.HasOverlap(stem))));
+            };
+            for (const frame of ordered) {
+                const old = this.previous.get(frame.id);
+                let side = frame.canFlip ? (_a = old === null || old === void 0 ? void 0 : old.side) !== null && _a !== void 0 ? _a : "right" : "right";
+                let chosen = candidate(frame, side);
+                if (!fixed(frame) && frame.canFlip) {
+                    const otherSide = side === "left" ? "right" : "left";
+                    const other = candidate(frame, otherSide);
+                    // An established side only changes when the alternative has a little breathing room.
+                    if (score(other, old ? 4 : 0) < score(chosen)) {
+                        side = otherSide;
+                        chosen = other;
+                    }
+                }
+                placed.set(frame.id, { frame: chosen, side });
+                next.set(frame.id, { frame: fixed(frame) ? old.frame : { ...frame }, side, order: (_b = old === null || old === void 0 ? void 0 : old.order) !== null && _b !== void 0 ? _b : this.nextOrder++ });
+                text.Add(chosen);
+                const stem = leaderBounds(chosen);
+                if (stem) {
+                    leaders.Add(stem);
+                }
+            }
+            this.previous = next;
+            return placed;
+        }
+    }
+    EntityLabel.PlacementMemory = PlacementMemory;
+    /*
+     * Prefer declared semantics; only infers from recognisable glyphs and filename tokens, never image pixels.
+     */
+    EntityLabel.IconPriority = point_clustering_core_1.GetClusterIconPriority;
+    /*
+     * Resolves clustering and stable text placement before depth fading; highlighted labels receive priority.
+     */
+    function Layout(input, memory = new PlacementMemory()) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const frames = input.filter(frame => [frame.x, frame.y, frame.width, frame.height, frame.depth].every(Number.isFinite))
+            .sort((a, b) => (b.priority || 0) - (a.priority || 0) || a.depth - b.depth || a.id.localeCompare(b.id));
+        const result = new Map();
+        const entityKeys = new Set();
+        const groups = new Map();
+        for (const frame of frames) {
+            const duplicate = frame.entityKey && entityKeys.has(frame.entityKey);
+            result.set(frame.id, { frame, visible: !duplicate, opacity: frame.opacity, zIndex: 0, members: [], entityIds: frame.entityId ? [frame.entityId] : [] });
+            if (duplicate) {
+                continue;
+            }
+            if (frame.entityKey)
+                entityKeys.add(frame.entityKey);
+            if (!((_b = (_a = frame.options) === null || _a === void 0 ? void 0 : _a.cluster) === null || _b === void 0 ? void 0 : _b.enabled) || frame.priority > 0) {
+                continue;
+            }
+            const key = JSON.stringify([frame.group || "", frame.options.presentation || "text"]);
+            if (!groups.has(key)) {
+                groups.set(key, []);
+            }
+            groups.get(key).push(frame);
+        }
+        for (const group of groups.values()) {
+            // Summary and badge dimensions are output, never the next frame's membership input.
+            const candidates = group.map(frame => frame.extendedGeometry && frame.canFlip &&
+                frame.options.cluster.pixelRange == null ? { ...frame, x: frame.anchorX, y: frame.anchorY, width: 1, height: 1 } :
+                frame.clusterBounds ? { ...frame, ...frame.clusterBounds } : frame);
+            const index = new ScreenIndex();
+            for (const frame of candidates) {
+                index.Add(frame);
+            }
+            const clusters = (0, point_clustering_core_1.ClusterItems)({
+                items: candidates,
+                id: frame => frame.id,
+                minSize: group[0].options.cluster.minSize,
+                neighbours: frame => {
+                    var _a;
+                    return (index.Query(frame, (_a = frame.options.cluster.pixelRange) !== null && _a !== void 0 ? _a : (frame.options.presentation === "icon" ? 24 : 8)));
+                }
+            });
+            for (const cluster of clusters) {
+                let chosen = cluster.representative;
+                if ((chosen.options.presentation || "text") !== "text" && chosen.options.cluster.representative !== "nearest") {
+                    let priority = EntityLabel.IconPriority(chosen.options);
+                    for (const member of cluster.members) {
+                        const candidate = EntityLabel.IconPriority(member.options);
+                        if (candidate > priority) {
+                            chosen = member;
+                            priority = candidate;
+                        }
+                    }
+                }
+                const representative = result.get(chosen.id);
+                representative.members = cluster.members.map(frame => frame.id);
+                representative.entityIds = Array.from(new Set(cluster.members.map(frame => frame.entityId).filter(Boolean)));
+                if (chosen.options.presentation !== "icon") {
+                    const values = new Set();
+                    const stableMembers = [...cluster.members].sort((a, b) => (a.entityKey || a.entityId || a.id).localeCompare(b.entityKey || b.entityId || b.id));
+                    for (const member of stableMembers) {
+                        const value = ((_e = (_c = member.text) !== null && _c !== void 0 ? _c : (_d = member.options) === null || _d === void 0 ? void 0 : _d.text) !== null && _e !== void 0 ? _e : "").replace(/\s+/g, " ").trim();
+                        if (value) {
+                            values.add(value);
+                        }
+                    }
+                    if (values.size > 1) {
+                        const description = stableMembers.find(member => { var _a, _b; return member.textWrapped && ((_b = (member.text || ((_a = member.options) === null || _a === void 0 ? void 0 : _a.text))) === null || _b === void 0 ? void 0 : _b.trim()); });
+                        if (description) {
+                            representative.text = ((_f = description.text) !== null && _f !== void 0 ? _f : description.options.text).trim();
+                            representative.summaryMore = true;
+                        }
+                        else {
+                            const rows = Array.from(values).slice(0, 2);
+                            if (values.size > 2)
+                                rows.push(`+${values.size - 2} more…`);
+                            representative.text = rows.join("\n");
+                        }
+                    }
+                }
+                for (const frame of cluster.members) {
+                    if (frame !== chosen)
+                        result.get(frame.id).visible = false;
+                }
+            }
+        }
+        const placed = memory.Resolve(frames.filter(frame => result.get(frame.id).visible));
+        const foreground = new ScreenIndex(), foregroundLeaders = new ScreenIndex();
+        let zIndex = frames.length + 1;
+        for (const original of frames) {
+            const placement = result.get(original.id);
+            if (!placement.visible) {
+                continue;
+            }
+            const chosen = placed.get(original.id);
+            const frame = placement.frame = chosen.frame;
+            placement.textSide = chosen.side;
+            const stem = leaderBounds(frame);
+            const box = { ...frame, x: frame.x + .01, y: frame.y + .01, width: Math.max(0, frame.width - .02), height: Math.max(0, frame.height - .02) };
+            const overlap = foreground.HasOverlap(box) || foregroundLeaders.HasOverlap(box) || Boolean(stem && foreground.HasOverlap(stem));
+            if (overlap) {
+                placement.opacity *= Math.max(0, Math.min(1, (_h = (_g = frame.options) === null || _g === void 0 ? void 0 : _g.overlapOpacity) !== null && _h !== void 0 ? _h : 0.25));
+            }
+            ;
+            placement.zIndex = zIndex--;
+            foreground.Add(frame);
+            if (stem) {
+                foregroundLeaders.Add(stem);
+            }
+        }
+        return Array.from(result.values());
+    }
+    EntityLabel.Layout = Layout;
+    const layers = new WeakMap();
+    const containers = new WeakMap();
+    /*
+     * Moves the shared overlay without recreating labels or resolving their sources.
+     */
+    function SetContainer(viewer, container) {
+        const layer = layers.get(viewer);
+        if (container && (container === (layer === null || layer === void 0 ? void 0 : layer.element) || (layer === null || layer === void 0 ? void 0 : layer.element.contains(container)))) {
+            throw new Error("Label container cannot be inside the label overlay");
+        }
+        if (container) {
+            containers.set(viewer, container);
+        }
+        else
+            containers.delete(viewer);
+        layer === null || layer === void 0 ? void 0 : layer.Move();
+    }
+    EntityLabel.SetContainer = SetContainer;
+    /*
+     * Owns one scene callback per viewer and separates projection/measurement from DOM writes.
+     */
+    class Layer {
+        constructor(viewer) {
+            this.viewer = viewer;
+            this.element = document.createElement("div");
+            this.coordinates = { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+            this.participants = new Set();
+            this.placementMemory = new PlacementMemory();
+            this.forwardingWheel = false;
+            this.pendingDrag = null;
+            this.TrackPointer = (event) => {
+                var _a, _b;
+                if (event.pointerType && event.pointerType !== "mouse" && event.pointerType !== "pen")
+                    return;
+                const rect = (_b = (_a = this.viewer.canvas).getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (!rect || event.clientX < rect.left || event.clientX >= rect.right || event.clientY < rect.top || event.clientY >= rect.bottom) {
+                    if (this.pointerClient)
+                        this.ClearPointer();
+                    return;
+                }
+                this.pointerClient = { x: event.clientX, y: event.clientY };
+                this.viewer.scene.requestRender();
+            };
+            this.PointerOut = (event) => { if (!event.relatedTarget)
+                this.ClearPointer(); };
+            this.ClearPointer = () => {
+                this.pointerClient = undefined;
+                this.pointer = undefined;
+                if (!this.viewer.isDestroyed()) {
+                    this.viewer.scene.requestRender();
+                }
+            };
+            this.PreventNativeDrag = (event) => {
+                event.preventDefault();
+            };
+            this.BeginDrag = (event) => {
+                var _a, _b, _c;
+                this.EndPendingDrag();
+                const detection = Cesium.FeatureDetection;
+                const target = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.entity-label [role="button"]');
+                const canvas = this.viewer.canvas;
+                if (event.defaultPrevented || event.button !== 0 || event.pointerType !== "mouse" ||
+                    ((_c = detection.supportsPointerEvents) === null || _c === void 0 ? void 0 : _c.call(detection)) === false || !canvas.setPointerCapture || this.viewer.isDestroyed() ||
+                    !target || !this.element.contains(target) ||
+                    this.element.ownerDocument.defaultView.getComputedStyle(target).visibility !== "visible") {
+                    return;
+                }
+                const bounds = canvas.getBoundingClientRect();
+                if (event.clientX < bounds.left || event.clientX >= bounds.right || event.clientY < bounds.top || event.clientY >= bounds.bottom) {
+                    return;
+                }
+                this.pendingDrag = event;
+                const doc = this.element.ownerDocument;
+                doc.addEventListener("pointermove", this.ContinueDrag, true);
+                doc.addEventListener("pointerup", this.FinishPendingDrag, true);
+                doc.addEventListener("pointercancel", this.FinishPendingDrag, true);
+                doc.defaultView.addEventListener("blur", this.EndPendingDrag);
+            };
+            this.FinishPendingDrag = (event) => {
+                var _a;
+                if (event.pointerId === ((_a = this.pendingDrag) === null || _a === void 0 ? void 0 : _a.pointerId)) {
+                    this.EndPendingDrag();
+                }
+            };
+            this.EndPendingDrag = () => {
+                this.pendingDrag = null;
+                const doc = this.element.ownerDocument;
+                doc.removeEventListener("pointermove", this.ContinueDrag, true);
+                doc.removeEventListener("pointerup", this.FinishPendingDrag, true);
+                doc.removeEventListener("pointercancel", this.FinishPendingDrag, true);
+                doc.defaultView.removeEventListener("blur", this.EndPendingDrag);
+            };
+            this.ContinueDrag = (event) => {
+                const start = this.pendingDrag;
+                if (!start || event.pointerId !== start.pointerId) {
+                    return;
+                }
+                if (!(event.buttons & 1) || this.viewer.isDestroyed() || !this.element.contains(start.target)) {
+                    this.EndPendingDrag();
+                    return;
+                }
+                // Keep ordinary clicks local; only a deliberate drag starts Cesium's camera gesture.
+                if (Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) < 6) {
+                    return;
+                }
+                this.EndPendingDrag();
+                const canvas = this.viewer.canvas;
+                try {
+                    canvas.setPointerCapture(start.pointerId);
+                }
+                catch {
+                    // A cancelled pointer or unsupported capture still cannot start native image dragging.
+                    return;
+                }
+                const win = this.element.ownerDocument.defaultView;
+                const copy = (source) => ({
+                    bubbles: true, cancelable: true, pointerId: source.pointerId, pointerType: source.pointerType,
+                    isPrimary: source.isPrimary, button: source.button, buttons: source.buttons,
+                    clientX: source.clientX, clientY: source.clientY, screenX: source.screenX, screenY: source.screenY,
+                    ctrlKey: source.ctrlKey, shiftKey: source.shiftKey, altKey: source.altKey, metaKey: source.metaKey
+                });
+                // Capture routes subsequent real move/up events to Cesium, including releases outside the label.
+                canvas.dispatchEvent(new win.PointerEvent("pointerdown", copy(start)));
+                canvas.dispatchEvent(new win.PointerEvent("pointermove", copy(event)));
+                event.preventDefault();
+                event.stopPropagation();
+                this.viewer.scene.requestRender();
+            };
+            this.ForwardWheel = (event) => {
+                var _a, _b, _c;
+                if (this.forwardingWheel || event.defaultPrevented || this.viewer.isDestroyed()) {
+                    return;
+                }
+                const target = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.entity-label [role="button"]');
+                const canvas = this.viewer.canvas;
+                const win = this.element.ownerDocument.defaultView;
+                if (!target || !this.element.contains(target) || win.getComputedStyle(target).visibility !== "visible") {
+                    return;
+                }
+                const bounds = canvas.getBoundingClientRect();
+                if (event.clientX < bounds.left || event.clientX >= bounds.right || event.clientY < bounds.top || event.clientY >= bounds.bottom) {
+                    return;
+                }
+                const position = {
+                    bubbles: true, cancelable: true, clientX: event.clientX, clientY: event.clientY,
+                    screenX: event.screenX, screenY: event.screenY, buttons: event.buttons,
+                    ctrlKey: event.ctrlKey, shiftKey: event.shiftKey, altKey: event.altKey, metaKey: event.metaKey,
+                    pointerId: 1, pointerType: "mouse", isPrimary: true
+                };
+                this.forwardingWheel = true;
+                try {
+                    // Cesium's wheel zoom uses its last mouse position, not the wheel event's coordinates.
+                    const detection = Cesium.FeatureDetection;
+                    // Older Cesium versions opt Firefox out even when the browser exposes PointerEvent.
+                    canvas.dispatchEvent(((_c = detection.supportsPointerEvents) === null || _c === void 0 ? void 0 : _c.call(detection)) !== false && typeof win.PointerEvent === "function" ?
+                        new win.PointerEvent("pointermove", position) : new win.MouseEvent("mousemove", position));
+                    canvas.dispatchEvent(new win.WheelEvent("wheel", {
+                        ...position, deltaX: event.deltaX, deltaY: event.deltaY, deltaZ: event.deltaZ, deltaMode: event.deltaMode
+                    }));
+                    this.viewer.scene.requestRender();
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                finally {
+                    this.forwardingWheel = false;
+                }
+            };
+            this.element.className = "entity-label-layer";
+            // Depth ordering belongs inside the map overlay, never in the application's UI stack.
+            this.element.style.cssText = "position:absolute;inset:0;z-index:0;isolation:isolate;pointer-events:none;";
+            this.Move();
+            this.element.addEventListener("wheel", this.ForwardWheel, { passive: false });
+            this.element.addEventListener("pointerdown", this.BeginDrag, true);
+            this.element.addEventListener("dragstart", this.PreventNativeDrag);
+            this.element.ownerDocument.addEventListener("pointermove", this.TrackPointer, true);
+            this.element.ownerDocument.addEventListener("pointerout", this.PointerOut, true);
+            this.element.ownerDocument.defaultView.addEventListener("blur", this.ClearPointer);
+            this.remove = viewer.scene.postUpdate.addEventListener(() => this.Update());
+        }
+        Move() {
+            (containers.get(this.viewer) || this.viewer.container).appendChild(this.element);
+            this.Update();
+            this.viewer.scene.requestRender();
+        }
+        MeasureCoordinates() {
+            var _a;
+            const canvas = this.viewer.canvas;
+            const canvasRect = (_a = canvas.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(canvas);
+            const rect = this.element.getBoundingClientRect();
+            const scaleX = rect.width / this.element.offsetWidth || 1;
+            const scaleY = rect.height / this.element.offsetHeight || 1;
+            return {
+                x: (((canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) || 0) - rect.left) / scaleX,
+                y: (((canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) || 0) - rect.top) / scaleY,
+                scaleX: ((canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.width) / canvas.clientWidth || 1) / scaleX,
+                scaleY: ((canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.height) / canvas.clientHeight || 1) / scaleY
+            };
+        }
+        Add(participant) {
+            this.participants.add(participant);
+            this.viewer.scene.requestRender();
+            return () => {
+                this.participants.delete(participant);
+                if (!this.participants.size) {
+                    this.remove();
+                    this.element.removeEventListener("wheel", this.ForwardWheel);
+                    this.element.removeEventListener("pointerdown", this.BeginDrag, true);
+                    this.element.removeEventListener("dragstart", this.PreventNativeDrag);
+                    this.element.ownerDocument.removeEventListener("pointermove", this.TrackPointer, true);
+                    this.element.ownerDocument.removeEventListener("pointerout", this.PointerOut, true);
+                    this.element.ownerDocument.defaultView.removeEventListener("blur", this.ClearPointer);
+                    this.EndPendingDrag();
+                    this.element.remove();
+                    layers.delete(this.viewer);
+                }
+            };
+        }
+        Update() {
+            var _a, _b;
+            this.coordinates = this.MeasureCoordinates();
+            const rect = (_b = (_a = this.viewer.canvas).getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
+            const pointer = this.pointerClient;
+            this.pointer = pointer && (rect === null || rect === void 0 ? void 0 : rect.width) && (rect === null || rect === void 0 ? void 0 : rect.height) && pointer.x >= rect.left && pointer.x < rect.right && pointer.y >= rect.top && pointer.y < rect.bottom ?
+                {
+                    x: (pointer.x - rect.left) * this.viewer.canvas.clientWidth / rect.width,
+                    y: (pointer.y - rect.top) * this.viewer.canvas.clientHeight / rect.height
+                } : undefined;
+            const projected = new Map();
+            for (const participant of this.participants) {
+                projected.set(participant, participant.project());
+            }
+            const placements = new Map(Layout(Array.from(projected.values()).filter(Boolean), this.placementMemory).map(item => [item.frame.id, item]));
+            for (const [participant, frame] of projected) {
+                participant.apply(frame ? placements.get(frame.id) : undefined);
+            }
+        }
+    }
+    let nextLabelId = 0;
     class Label {
+        get HasText() { return this.options.presentation !== "icon"; }
+        SetHoverVisible(visible) {
+            var _a, _b, _c;
+            if (!this.Transient || this.Persistent) {
+                return;
+            }
+            if (!visible) {
+                this.retainedHoverPosition = (_a = this.visualRegister) === null || _a === void 0 ? void 0 : _a.GetLabelHoverPosition((_b = this.rego) === null || _b === void 0 ? void 0 : _b.entityId, (_c = this.rego) === null || _c === void 0 ? void 0 : _c.menuItemId);
+                // Retiring labels must not change the ring now owned by the next hover target.
+                if (this.ringAnimation) {
+                    this.ringAnimation = { ...this.ringAnimation };
+                }
+            }
+            if (this.hoverFade.to === Number(visible)) {
+                return;
+            }
+            this.hoverFade = { from: this.HoverOpacity(), to: Number(visible), start: Date.now() };
+            this.viewer.scene.requestRender();
+        }
+        HoverOpacity() {
+            if (!this.Transient || this.Persistent) {
+                return 1;
+            }
+            const progress = Math.min(1, Math.max(0, (Date.now() - this.hoverFade.start) / 120));
+            if (progress < 1) {
+                this.viewer.scene.requestRender();
+            }
+            return this.hoverFade.from + (this.hoverFade.to - this.hoverFade.from) * progress * progress * (3 - 2 * progress);
+        }
         get Rego() {
             return this.rego;
         }
@@ -46,10 +602,18 @@ var EntityLabel;
         set pos3d(val) {
             this._pos3d = val;
             this.prePositioned = !isNaN(val === null || val === void 0 ? void 0 : val.x);
-            this.createLabel(val);
+            if (this.label && this.prePositioned)
+                this.viewer.scene.requestRender();
+            else
+                this.createLabel(val);
         }
         constructor(params) {
-            var _a;
+            var _a, _b, _c, _d;
+            this.id = `label-${++nextLabelId}`;
+            this.Persistent = false;
+            this.Transient = false;
+            this.hoverFade = { from: 0, to: 1, start: Date.now() };
+            this.cursorMotion = { amount: 0, from: 0, target: 0, start: 0, position: undefined };
             // Counter to help differentiate between createLabel calls.
             this.counter = 0;
             // The label element itself.
@@ -69,15 +633,24 @@ var EntityLabel;
             this.loadTimeout = null;
             this.loadedName = false;
             this.line = null;
+            this.anchor = 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.options = params.options || {};
+            this.groupId = params.groupId;
+            this.Persistent = (_a = params.persistent) !== null && _a !== void 0 ? _a : Boolean(params.groupId);
+            this.Transient = (_b = params.transient) !== null && _b !== void 0 ? _b : false;
+            this.hoverRingState = params.hoverRingState;
+            this.visible = params.visible;
+            if (((_c = params.options) === null || _c === void 0 ? void 0 : _c.text) != null)
+                this.additionalTexts = [];
+            this.prePositioned = !isNaN((_d = params.pos3d) === null || _d === void 0 ? void 0 : _d.x);
             this.createLabel(params.pos3d);
-            if (!params.api && !bruce_models_1.ENVIRONMENT.IS_SELF_MANAGED) {
+            if (!params.api && !bruce_models_1.ENVIRONMENT.IS_SELF_MANAGED && this.options.text == null) {
                 this.api = bruce_models_1.ENVIRONMENT.Api().GetBruceApi();
             }
         }
@@ -127,12 +700,24 @@ var EntityLabel;
             clearTimeout(this.loadTimeout);
             this.loadTimeout = null;
         }
+        /*
+         * Rebuilds only when configuration changes; state refreshes must not recreate DOM every frame.
+         */
+        Configure(options, groupId) {
+            if (this.groupId === groupId && JSON.stringify(this.options) === JSON.stringify(options || {})) {
+                return;
+            }
+            this.options = options || {};
+            this.groupId = groupId;
+            this.additionalTexts = this.options.text != null ? [] : null;
+            this.createLabel();
+        }
         /**
          * 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, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
             this.removeLabel();
             let pos3d = starterPos3d ? starterPos3d.clone() : null;
             const counter = ++this.counter;
@@ -341,7 +926,7 @@ var EntityLabel;
                     }
                     clearTimeout(this.loadTimeout);
                     this.loadTimeout = setTimeout(async () => {
-                        var _a, _b, _c, _d;
+                        var _a, _b, _c, _d, _e;
                         if (this.disposed || this.counter != counter) {
                             return;
                         }
@@ -349,10 +934,10 @@ var EntityLabel;
                         if (this.additionalTexts == null) {
                             const additionalTexts = [];
                             // Rego might not have a known or default Entity Type. Eg: OSM building.
-                            if (this.rego.entityTypeId) {
+                            if (this.rego.entityTypeId || this.options.attributes) {
                                 let entityType = null;
                                 try {
-                                    const data = await bruce_models_1.EntityType.Get({
+                                    const data = this.options.attributes ? null : await bruce_models_1.EntityType.Get({
                                         api: this.api,
                                         entityTypeId: this.rego.entityTypeId
                                     });
@@ -367,14 +952,14 @@ var EntityLabel;
                                 }
                                 // 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 (entityType || this.options.attributes) {
+                                    const attributes = (_a = this.options.attributes) !== null && _a !== void 0 ? _a : (_c = (_b = entityType.VisualSettings) === null || _b === void 0 ? void 0 : _b.label) === null || _c === void 0 ? void 0 : _c.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,
+                                                scenario: ((_d = this.rego.outline) === null || _d === void 0 ? void 0 : _d.length) ? (_e = this.rego.outline.find(x => !!x.Scenario)) === null || _e === void 0 ? void 0 : _e.Scenario : null,
                                                 schemaId: this.rego.schema,
                                                 migrated: true
                                             });
@@ -383,7 +968,7 @@ var EntityLabel;
                                                     entity: entity,
                                                     path: attributes[i]
                                                 });
-                                                if (value) {
+                                                if (value != null) {
                                                     additionalTexts.push(value);
                                                 }
                                             }
@@ -412,12 +997,166 @@ var EntityLabel;
             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>
-            `;
+            const presentation = this.options.presentation || "text";
+            let clickEntityIds = [];
+            const selectOnClick = (_j = this.options.selectOnClick) !== null && _j !== void 0 ? _j : Boolean(this.groupId);
+            const select = (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                if (!selectOnClick || this.disposed || this.counter !== counter || !clickEntityIds.length || !this.visualRegister) {
+                    return;
+                }
+                this.visualRegister.ClearSelected({ requestRender: false });
+                this.visualRegister.SetSelected({ entityIds: clickEntityIds, selected: true });
+            };
+            const makeClickable = (target) => {
+                if (!selectOnClick || !this.visualRegister) {
+                    return;
+                }
+                target.style.pointerEvents = "auto";
+                target.style.cursor = "pointer";
+                target.style.userSelect = "none";
+                target.setAttribute("role", "button");
+                target.tabIndex = 0;
+                target.addEventListener("click", select);
+                target.addEventListener("keydown", event => {
+                    if (event.key === "Enter" || event.key === " ")
+                        select(event);
+                });
+                // Prevent viewer picking and camera gestures from interpreting label interactions.
+                for (const type of ["pointerdown", "pointerup", "mousedown", "mouseup", "dblclick"]) {
+                    target.addEventListener(type, event => event.stopPropagation());
+                }
+            };
+            const normalLeader = (_k = this.options.leader) !== null && _k !== void 0 ? _k : presentation === "text";
+            let leader = normalLeader;
+            const content = document.createElement("span");
+            const originalText = (_l = this.options.text) !== null && _l !== void 0 ? _l : [text, ...additionalTexts].join("\n");
+            let textElement;
+            let sourceText;
+            let sourceNaturalText;
+            let iconElement;
+            let iconContainer;
+            content.className = "entity-label-content";
+            content.style.cssText = "display:flex;align-items:center;gap:6px;";
+            if (presentation === "icon-text-above") {
+                content.style.flexDirection = "column-reverse";
+            }
+            if (presentation !== "text") {
+                const icon = document.createElement("span");
+                iconElement = icon;
+                icon.className = "entity-label-icon";
+                icon.style.cssText = `font-size:${(this.options.iconSize || 24) * ((_m = this.options.iconScale) !== null && _m !== void 0 ? _m : 1)}px;line-height:1;`;
+                icon.style.textShadow = "0 1px 2px rgba(0, 0, 0, 0.25)";
+                const iconColor = typeof this.options.iconColor === "string" ? this.options.iconColor : undefined;
+                const iconBackground = this.options.iconBackground && this.options.iconScale !== 0;
+                if (iconColor) {
+                    icon.style.color = iconColor;
+                }
+                if (this.options.iconUrl) {
+                    const image = document.createElement("img");
+                    image.draggable = false;
+                    image.alt = this.options.icon || "";
+                    const scale = (_o = this.options.iconScale) !== null && _o !== void 0 ? _o : 1;
+                    const size = this.options.iconSize;
+                    const mask = iconColor && iconBackground ? document.createElement("span") : icon;
+                    if (mask !== icon) {
+                        icon.appendChild(mask);
+                    }
+                    const target = iconColor ? mask : image;
+                    if (iconColor) {
+                        mask.style.display = "inline-block";
+                        mask.style.backgroundColor = iconColor;
+                        for (const prefix of ["", "-webkit-"]) {
+                            mask.style.setProperty(`${prefix}mask-image`, `url(${JSON.stringify(this.options.iconUrl)})`);
+                            mask.style.setProperty(`${prefix}mask-size`, "contain");
+                            mask.style.setProperty(`${prefix}mask-repeat`, "no-repeat");
+                            mask.style.setProperty(`${prefix}mask-position`, "center");
+                        }
+                    }
+                    const resize = () => {
+                        if (this.disposed || this.counter !== counter) {
+                            return;
+                        }
+                        const intrinsic = this.options.iconScale != null && size == null;
+                        target.style.width = `${(intrinsic ? image.naturalWidth || 24 : size || 24) * scale}px`;
+                        target.style.height = `${(intrinsic ? image.naturalHeight || 24 : size || 24) * scale}px`;
+                        this.viewer.scene.requestRender();
+                    };
+                    image.onload = resize;
+                    resize();
+                    image.src = this.options.iconUrl;
+                    if (!iconColor) {
+                        icon.appendChild(image);
+                    }
+                }
+                else if (typeof this.options.iconClass === "string" && this.options.iconClass) {
+                    icon.className = `entity-label-icon ${this.options.iconClass}`;
+                }
+                else {
+                    icon.textContent = this.options.icon || "●";
+                }
+                if (iconBackground) {
+                    const color = Cesium.Color.fromCssColorString(iconColor || "white") || Cesium.Color.WHITE;
+                    const luminance = 0.2126 * color.red + 0.7152 * color.green + 0.0722 * color.blue;
+                    const background = (luminance > 0.5 ? color.darken(ICON_BACKGROUND_BLEND, new Cesium.Color()) :
+                        color.brighten(ICON_BACKGROUND_BLEND, new Cesium.Color()));
+                    const size = (this.options.iconSize || 24) * ((_p = this.options.iconScale) !== null && _p !== void 0 ? _p : 1);
+                    icon.style.backgroundColor = background.withAlpha(ICON_BACKGROUND_ALPHA).toCssColorString();
+                    icon.style.borderRadius = "50%";
+                    icon.style.padding = `${size / 3}px`;
+                    icon.style.display = "inline-flex";
+                    icon.style.alignItems = "center";
+                    icon.style.justifyContent = "center";
+                    icon.style.minWidth = `${size}px`;
+                    icon.style.minHeight = `${size}px`;
+                    icon.style.boxSizing = "content-box";
+                }
+                if (this.options.iconScale === 0) {
+                    icon.style.display = "none";
+                }
+                makeClickable(icon);
+                // Keep badges outside the glyph so font classes and image masks cannot affect them.
+                iconContainer = document.createElement("span");
+                iconContainer.style.cssText = "position:relative;display:inline-flex;flex:none;";
+                iconContainer.appendChild(icon);
+                content.appendChild(iconContainer);
+            }
+            if (presentation !== "icon") {
+                textElement = document.createElement("span");
+                textElement.className = "entity-label-text";
+                const textStyle = `white-space:pre-wrap;overflow-wrap:anywhere;max-width:${TEXT_MAX_WIDTH}px;width:max-content;flex-shrink:0;`;
+                textElement.style.cssText = textStyle;
+                textElement.textContent = originalText;
+                if (presentation === "text")
+                    makeClickable(textElement);
+                content.appendChild(textElement);
+                if ((_q = this.options.cluster) === null || _q === void 0 ? void 0 : _q.enabled) {
+                    sourceText = document.createElement("span");
+                    sourceText.className = "entity-label-source-text";
+                    sourceText.setAttribute("aria-hidden", "true");
+                    sourceText.style.cssText = textStyle + "position:absolute;visibility:hidden;pointer-events:none;";
+                    sourceText.textContent = originalText;
+                    content.appendChild(sourceText);
+                    // Measure the original unwrapped text, never a rendered cluster summary.
+                    sourceNaturalText = document.createElement("span");
+                    sourceNaturalText.setAttribute("aria-hidden", "true");
+                    sourceNaturalText.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;white-space:pre;width:max-content;";
+                    sourceNaturalText.textContent = originalText;
+                    content.appendChild(sourceNaturalText);
+                }
+            }
+            const countElement = document.createElement("span");
+            countElement.className = "entity-label-count";
+            countElement.style.cssText = "flex:none;align-self:center;white-space:nowrap;background:#fff;color:#000;text-shadow:none;border-radius:8px;padding:0 3px;display:none;";
+            if (iconContainer) {
+                countElement.style.cssText += "position:absolute;left:100%;top:0;transform:translate(-50%,-50%);";
+                iconContainer.appendChild(countElement);
+            }
+            if (!layers.has(this.viewer)) {
+                layers.set(this.viewer, new Layer(this.viewer));
+            }
+            const layer = layers.get(this.viewer);
             let ele = null;
             let lineEle = null;
             if (this.label) {
@@ -425,11 +1164,22 @@ var EntityLabel;
             }
             else {
                 ele = document.createElement("div");
-                ele.innerHTML = labelContent;
+                ele.appendChild(content);
+                if (!iconContainer) {
+                    ele.appendChild(countElement);
+                }
+                ele.className = "entity-label";
+                ele.dataset.entityId = ((_r = this.rego) === null || _r === void 0 ? void 0 : _r.entityId) || "";
+                ele.dataset.presentation = presentation;
+                if (this.groupId) {
+                    ele.dataset.groupId = this.groupId;
+                }
                 ele.setAttribute("style", `
                     position: absolute;
                     z-index: 0;
                     display: none;
+                    align-items: center;
+                    gap: 6px;
                     pointer-events: none;
                     padding: 6px 8px;
                     border-radius: 6px;
@@ -438,9 +1188,10 @@ var EntityLabel;
                     border-radius: 9px;
                     color: #ffffff;
                     text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
-                }`);
+                `);
                 this.label = ele;
-                this.viewer.container.appendChild(ele);
+                ele.style.width = "max-content";
+                layer.element.appendChild(ele);
             }
             if (this.line) {
                 lineEle = this.line;
@@ -457,7 +1208,10 @@ var EntityLabel;
                     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.
+                lineEle.className = "entity-label-leader";
+                if (this.options.leaderColor)
+                    lineEle.style.background = this.options.leaderColor;
+                // A separate anchor keeps the stem out of the hollow centre when proximity opens the ring.
                 const lineEleNode = document.createElement("div");
                 lineEleNode.setAttribute("style", `
                     position: absolute;
@@ -470,35 +1224,20 @@ var EntityLabel;
                     top: -2px;
                     left: -2px;
                 `);
-                lineEle.appendChild(lineEleNode);
-                this.viewer.container.appendChild(lineEle);
+                lineEleNode.className = "entity-label-anchor";
+                // SVG preserves fractional strokes in scaled containers where CSS borders round to pixels.
+                const ringSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                ringSvg.style.cssText = "position:absolute;inset:0;width:100%;height:100%;overflow:visible;";
+                ringSvg.setAttribute("aria-hidden", "true");
+                ringSvg.setAttribute("preserveAspectRatio", "none");
+                const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                circle.setAttribute("fill", "none");
+                ringSvg.appendChild(circle);
+                lineEleNode.appendChild(ringSvg);
+                this.anchor = lineEleNode;
+                layer.element.appendChild(lineEleNode);
+                layer.element.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.
@@ -506,123 +1245,404 @@ var EntityLabel;
                     MAX_DISTANCE = Infinity;
                 }
             }
-            const updateLabel = () => {
-                var _a;
-                if (this.disposed || isNaN((_a = this._pos3d) === null || _a === void 0 ? void 0 : _a.x)) {
-                    return;
+            const fitLeader = (anchorX, anchorY, desired, width, height, radius = 0) => {
+                const above = Math.max(0, anchorY - height);
+                const below = Math.max(0, this.viewer.canvas.clientHeight - anchorY - height);
+                // Keep a short visible stem before switching sides; never aim it at the cursor or a box corner.
+                const upwards = above >= Math.max(radius ? radius + 4 : 0, Math.min(8, desired)) || above >= below;
+                const length = Math.min(desired, upwards ? above : below);
+                const endY = anchorY + (upwards ? -length : length);
+                return {
+                    x: Math.max(0, Math.min(anchorX, this.viewer.canvas.clientWidth - width)),
+                    y: upwards ? endY - height : endY, endY
+                };
+            };
+            let cursorMotion = this.cursorMotion;
+            const project = () => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+                if (this.disposed || !this.viewer || this.viewer.isDestroyed() || ((_a = this.visible) === null || _a === void 0 ? void 0 : _a.call(this)) === false ||
+                    (presentation === "icon" && this.options.iconScale === 0)) {
+                    return null;
                 }
-                if (!this.viewer || this.viewer.isDestroyed()) {
-                    this.Dispose();
-                    return;
+                if (this.Transient && !this.Persistent && this.hoverFade.to === 0 &&
+                    (this.hoverFade.from === 0 || Date.now() - this.hoverFade.start >= 120)) {
+                    return null;
                 }
-                const distance = getDistance();
-                if (isNaN(distance) || (!this.prePositioned && distance >= MAX_DISTANCE)) {
-                    ele.style.display = "none";
-                    lineEle.style.display = "none";
-                    return;
+                // Moving point/model positions must be sampled at the current clock time.
+                if (!this.prePositioned && visual instanceof Cesium.Entity && visual.position) {
+                    const position = getValue(this.viewer, visual.position);
+                    if (position)
+                        this._pos3d = drawing_utils_1.DrawingUtils.EnsurePosHeight({
+                            desiredHeightRef: Cesium.HeightReference.NONE, heightRef, pos3d: position, viewer: this.viewer
+                        });
                 }
-                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;
+                if (!Number.isFinite((_b = this._pos3d) === null || _b === void 0 ? void 0 : _b.x)) {
+                    return null;
+                }
+                const camera = this.viewer.camera;
+                const cameraPosition = camera.positionWC || camera.position;
+                const relative = Cesium.Cartesian3.subtract(this._pos3d, cameraPosition, new Cesium.Cartesian3());
+                const depth = Cesium.Cartesian3.dot(relative, camera.directionWC || camera.direction);
+                const distance = Cesium.Cartesian3.magnitude(relative);
+                if (!Number.isFinite(distance) || depth <= 0 || distance < ((_c = this.options.near) !== null && _c !== void 0 ? _c : 0) ||
+                    distance > ((_d = this.options.far) !== null && _d !== void 0 ? _d : Infinity) || (!this.prePositioned && distance >= MAX_DISTANCE)) {
+                    return null;
+                }
+                const transforms = Cesium.SceneTransforms;
+                const projectPosition = transforms.wgs84ToWindowCoordinates || transforms.worldToWindowCoordinates;
+                const anchor = projectPosition(this.viewer.scene, this._pos3d);
+                if (!Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.x) || !Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.y)) {
+                    return null;
+                }
+                if (leader && (anchor.x < 0 || anchor.y < 0 || anchor.x >= this.viewer.canvas.clientWidth || anchor.y >= this.viewer.canvas.clientHeight))
+                    return null;
+                const transientPivot = (this.Transient && !this.Persistent ?
+                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_e = this.visualRegister) === null || _e === void 0 ? void 0 : _e.GetLabelHoverPosition((_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId, (_g = this.rego) === null || _g === void 0 ? void 0 : _g.menuItemId)) : undefined);
+                const hover = (presentation !== "icon" ?
+                    (this.Transient && !this.Persistent && this.hoverFade.to === 0 ? this.retainedHoverPosition :
+                        (_h = this.visualRegister) === null || _h === void 0 ? void 0 : _h.GetLabelHoverPosition((_j = this.rego) === null || _j === void 0 ? void 0 : _j.entityId, (_k = this.rego) === null || _k === void 0 ? void 0 : _k.menuItemId)) : undefined);
+                const reused = !this.Transient || this.Persistent;
+                const now = Date.now();
+                const animateCursor = () => {
+                    const progress = Math.min(1, Math.max(0, (now - cursorMotion.start) / 200));
+                    const eased = progress * progress * (3 - 2 * progress);
+                    cursorMotion.amount = cursorMotion.from + (cursorMotion.target - cursorMotion.from) * eased;
+                    return progress;
+                };
+                animateCursor();
+                const cursorTarget = reused && hover ? 1 : 0;
+                if (cursorMotion.target !== cursorTarget) {
+                    cursorMotion = { ...cursorMotion, from: cursorMotion.amount, target: cursorTarget, start: now };
+                }
+                ;
+                if (hover) {
+                    cursorMotion.position = { x: hover.x, y: hover.y };
                 }
-                // 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;
+                ;
+                if (animateCursor() < 1 && cursorMotion.from !== cursorMotion.target) {
+                    this.viewer.scene.requestRender();
+                }
+                ;
+                this.cursorMotion = cursorMotion;
+                const cursorAmount = cursorMotion.amount;
+                leader = normalLeader || cursorAmount > 0;
+                let x = ((_l = transientPivot === null || transientPivot === void 0 ? void 0 : transientPivot.x) !== null && _l !== void 0 ? _l : anchor.x) + pixelOffset.x;
+                let y = ((_m = transientPivot === null || transientPivot === void 0 ? void 0 : transientPivot.y) !== null && _m !== void 0 ? _m : anchor.y) + pixelOffset.y;
+                if (cursorAmount > 0) {
+                    // A leader-less label starts centred on its anchor; preserve that box as it lifts away.
+                    if (!normalLeader) {
+                        x -= ele.offsetWidth / layer.coordinates.scaleX / 2;
+                        y += ele.offsetHeight / layer.coordinates.scaleY / 2;
+                    }
+                    x += (cursorMotion.position.x + pixelOffset.x - x) * cursorAmount;
+                    y += (cursorMotion.position.y + pixelOffset.y - y) * cursorAmount;
+                }
+                const anchorX = x;
+                const anchorY = y;
+                let leaderLength;
+                if (leader) {
+                    if (!normalLeader) {
+                        leaderLength = 0;
+                    }
+                    else if (this.options.leaderLength != null) {
+                        leaderLength = Math.max(0, this.options.leaderLength);
+                    }
+                    else if (transientPivot) {
+                        // Cursor callouts must not jump when the next hover target has a different extent.
+                        leaderLength = 96;
                     }
                     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;
-                        }
+                        const point = Cesium.Cartographic.fromCartesian(this._pos3d);
+                        const height = (this.prePositioned ? distance / 24 : sizeInM > 0 ?
+                            Math.min(distance / 5, sizeInM * 1.2) : Math.min(distance, camera.positionCartographic.height) / 7);
+                        point.height += Math.max(0.001, height);
+                        const end = projectPosition(this.viewer.scene, Cesium.Cartographic.toCartesian(point));
+                        // A tall world-space leader can cross the camera plane while its anchor remains visible.
+                        leaderLength = Number.isFinite(end === null || end === void 0 ? void 0 : end.x) && Number.isFinite(end === null || end === void 0 ? void 0 : end.y) ? Math.hypot(end.x - anchor.x, end.y - anchor.y) : 24;
+                        // Scale after projection so large areas and routes get shorter leaders at every zoom.
+                        if (visual instanceof Cesium.Entity && (visual.polygon || visual.polyline))
+                            leaderLength /= 3;
                     }
-                    // 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);
+                    if (cursorAmount > 0) {
+                        leaderLength += (96 - leaderLength) * cursorAmount;
                     }
-                    // Safety check.
-                    if (!addHeight || addHeight <= 0) {
-                        addHeight = 0.001;
+                    ;
+                    y = anchorY - leaderLength;
+                }
+                else if (hover && !reused) {
+                    x = hover.x + pixelOffset.x;
+                    y = hover.y + pixelOffset.y - 24;
+                }
+                // Hidden participants remain measurable; visibility never removes their layout boxes.
+                const coordinates = layer.coordinates;
+                const width = ele.offsetWidth / coordinates.scaleX;
+                const height = ele.offsetHeight / coordinates.scaleY;
+                let clusterBounds;
+                if ((_o = this.options.cluster) === null || _o === void 0 ? void 0 : _o.enabled) {
+                    const textWidth = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetWidth) || 0;
+                    const textHeight = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetHeight) || 0;
+                    const iconWidth = (iconElement === null || iconElement === void 0 ? void 0 : iconElement.offsetWidth) || 0;
+                    const iconHeight = (iconElement === null || iconElement === void 0 ? void 0 : iconElement.offsetHeight) || 0;
+                    const gap = sourceText && iconWidth ? 6 : 0;
+                    const above = presentation === "icon-text-above";
+                    // Match the fixed content gap and label padding, excluding the count badge.
+                    const baseWidth = ((above ? Math.max(textWidth, iconWidth) : textWidth + iconWidth + gap) + 16) / coordinates.scaleX;
+                    const baseHeight = ((above ? textHeight + iconHeight + gap : Math.max(textHeight, iconHeight)) + 12) / coordinates.scaleY;
+                    clusterBounds = {
+                        x: leader ? x : x - baseWidth / 2,
+                        y: leader ? y - baseHeight : y - baseHeight / 2, width: baseWidth, height: baseHeight
+                    };
+                }
+                if (!leader) {
+                    x -= width / 2;
+                    y -= height / 2;
+                }
+                // Membership uses the unclamped source footprint, never the summary's changing dimensions.
+                if (leader)
+                    ({ x, y } = fitLeader(anchorX, anchorY, leaderLength, width, height));
+                const bounds = clusterBounds || { x, y, width, height };
+                if (!leader && (bounds.x + bounds.width < 0 || bounds.y + bounds.height < 0 || bounds.x > this.viewer.canvas.clientWidth || bounds.y > this.viewer.canvas.clientHeight)) {
+                    return null;
+                }
+                const state = (_p = this.visualRegister) === null || _p === void 0 ? void 0 : _p.GetState({ entityId: (_q = this.rego) === null || _q === void 0 ? void 0 : _q.entityId, menuItemId: (_r = this.rego) === null || _r === void 0 ? void 0 : _r.menuItemId });
+                const opacity = this.prePositioned || MAX_DISTANCE === Infinity ? 1 : 1 - distance / MAX_DISTANCE;
+                return {
+                    canFlip: leader && presentation !== "icon", hasLeader: leader,
+                    textWrapped: ((sourceNaturalText === null || sourceNaturalText === void 0 ? void 0 : sourceNaturalText.offsetWidth) || 0) > TEXT_MAX_WIDTH,
+                    transient: this.Transient || Boolean(hover) || cursorAmount > 0,
+                    extendedGeometry: visual instanceof Cesium.Entity && Boolean(visual.polygon || visual.polyline || visual.corridor),
+                    viewportWidth: this.viewer.canvas.clientWidth,
+                    id: this.id, entityKey: ((_s = this.rego) === null || _s === void 0 ? void 0 : _s.entityId) ? JSON.stringify([this.rego.entityId, this.rego.menuItemId || "", this.Transient && !this.Persistent ? "hover" : ""]) : undefined,
+                    entityId: (_t = this.rego) === null || _t === void 0 ? void 0 : _t.entityId, group: this.groupId, x, y, width, height, anchorX, anchorY, depth, leaderLength, distance,
+                    // Priority shows the hovered member individually without dragging its cluster along.
+                    opacity, priority: hover || cursorAmount > 0 || (state === null || state === void 0 ? void 0 : state.highlighted) ? 1 : 0, options: this.options, text: originalText, clusterBounds
+                };
+            };
+            let displacement = { x: 0, y: 0 };
+            let displayedSummaryMore = false;
+            let nudge = { x: 0, y: 0, fromX: 0, fromY: 0, targetX: 0, targetY: 0, start: 0 };
+            const apply = (placement) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+                const show = (placement === null || placement === void 0 ? void 0 : placement.visible) && placement.opacity > 0;
+                clickEntityIds = show ? placement.entityIds : [];
+                ele.style.visibility = show ? "visible" : "hidden";
+                lineEle.style.display = show && leader ? "block" : "none";
+                this.anchor.style.display = show && leader ? "block" : "none";
+                if (!show) {
+                    displacement = { x: 0, y: 0 };
+                    nudge = { x: 0, y: 0, fromX: 0, fromY: 0, targetX: 0, targetY: 0, start: 0 };
+                    if (!this.Transient) {
+                        this.ringAnimation = undefined;
                     }
-                    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;
+                    return;
+                }
+                const displayText = (_a = placement.text) !== null && _a !== void 0 ? _a : originalText;
+                const summaryMore = Boolean(placement.summaryMore);
+                if (textElement && (textElement.textContent !== displayText + (summaryMore ? "\n…" : "") || displayedSummaryMore !== summaryMore)) {
+                    textElement.textContent = displayText;
+                    if (summaryMore) {
+                        const more = document.createElement("span");
+                        more.className = "entity-label-more";
+                        more.style.opacity = "0.65";
+                        more.textContent = "\n…";
+                        textElement.appendChild(more);
                     }
-                    // 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;
+                    displayedSummaryMore = summaryMore;
+                    // Measure the summary's footprint next frame without replacing each member's source text.
+                    this.viewer.scene.requestRender();
+                }
+                const frame = placement.frame;
+                const coordinates = layer.coordinates;
+                const opacity = placement.opacity * this.HoverOpacity();
+                ele.style.opacity = String(opacity);
+                ele.style.zIndex = String(placement.zIndex);
+                ele.dataset.clusterCount = String(placement.members.length || 1);
+                countElement.style.display = placement.members.length ? "block" : "none";
+                countElement.style.order = placement.textSide === "left" ? "-1" : "0";
+                const count = placement.members.length ? String(placement.members.length) : "";
+                if (countElement.textContent !== count) {
+                    countElement.textContent = count;
+                    // The badge participates in layout, so its new width needs another measurement.
+                    this.viewer.scene.requestRender();
+                }
+                if (iconContainer) {
+                    const badgeWidth = countElement.offsetWidth;
+                    const iconWidth = iconElement.offsetWidth;
+                    const narrow = iconWidth < iconElement.offsetHeight * 0.6;
+                    const clearance = badgeWidth ? (narrow ? badgeWidth / 2 + 2 : Math.max(0, badgeWidth / 2 - iconWidth / 4)) : 0;
+                    countElement.style.left = `calc(100% + ${clearance}px)`;
+                    // Reserve the badge overhang so adjacent text and viewport edges remain clear.
+                    iconContainer.style.marginTop = `${countElement.offsetHeight / 2}px`;
+                    iconContainer.style.marginRight = `${badgeWidth / 2 + clearance}px`;
+                }
+                // Summary and badge changes must fit on their first visible frame, including after resize.
+                const ring = this.options.anchorRing;
+                const pointer = (layer.pointer || (cursorMotion.target ? cursorMotion.position : undefined) || (this.Transient && !this.Persistent ?
+                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_b = this.visualRegister) === null || _b === void 0 ? void 0 : _b.GetLabelHoverPosition((_c = this.rego) === null || _c === void 0 ? void 0 : _c.entityId, (_d = this.rego) === null || _d === void 0 ? void 0 : _d.menuItemId)) : undefined));
+                const hovered = pointer && Math.hypot(pointer.x - frame.anchorX, pointer.y - frame.anchorY) <= ((_e = ring === null || ring === void 0 ? void 0 : ring.hoverDistance) !== null && _e !== void 0 ? _e : 24);
+                const normalRadius = (!leader || (ring === null || ring === void 0 ? void 0 : ring.enabled) === false ? 0 : Math.max(frame.distance <= ((_f = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _f !== void 0 ? _f : 100) ? ((_g = ring === null || ring === void 0 ? void 0 : ring.nearRadius) !== null && _g !== void 0 ? _g : 10) : 0, hovered ? ((_h = ring === null || ring === void 0 ? void 0 : ring.hoverRadius) !== null && _h !== void 0 ? _h : (this.Transient && !this.Persistent ? 15.4 : 22)) : 0));
+                const targetRadius = normalRadius + (15.4 - normalRadius) * cursorMotion.amount;
+                const now = Date.now();
+                const duration = (_j = ring === null || ring === void 0 ? void 0 : ring.transitionDuration) !== null && _j !== void 0 ? _j : 200;
+                const sharedRing = this.Transient && !this.Persistent && this.hoverFade.to === 1 ? this.hoverRingState : undefined;
+                let ringAnimation = sharedRing ? sharedRing.animation : this.ringAnimation;
+                if (!ringAnimation) {
+                    ringAnimation = { target: 0, start: now, outer: 2.5, inner: 0, fromOuter: 2.5, fromInner: 0 };
+                }
+                ;
+                const animateRing = () => {
+                    const progress = duration > 0 ? Math.min(1, Math.max(0, (now - ringAnimation.start) / duration)) : 1;
+                    const eased = progress * progress * (3 - 2 * progress);
+                    ringAnimation.outer = ringAnimation.fromOuter + ((ringAnimation.target || 2.5) - ringAnimation.fromOuter) * eased;
+                    ringAnimation.inner = ringAnimation.fromInner + (Math.max(0, ringAnimation.target - 2) - ringAnimation.fromInner) * eased;
+                    return progress;
+                };
+                animateRing();
+                if (ringAnimation.target !== targetRadius) {
+                    ringAnimation = {
+                        ...ringAnimation,
+                        target: targetRadius,
+                        start: now,
+                        fromOuter: ringAnimation.outer,
+                        fromInner: ringAnimation.inner
+                    };
+                }
+                // Animate the hole and stem together; no CSS transition may lag behind a moving world anchor.
+                if (animateRing() < 1 && (ringAnimation.fromOuter !== (targetRadius || 2.5) || ringAnimation.fromInner !== Math.max(0, targetRadius - 2))) {
+                    this.viewer.scene.requestRender();
+                }
+                this.ringAnimation = ringAnimation;
+                if (sharedRing) {
+                    sharedRing.animation = ringAnimation;
+                }
+                const radius = ringAnimation.inner > 0 ? ringAnimation.outer : 0;
+                const stem = (leader ? fitLeader(frame.anchorX, frame.anchorY, Math.max(frame.leaderLength, radius ? radius + 4 : 0), ele.offsetWidth / coordinates.scaleX, ele.offsetHeight / coordinates.scaleY, radius) : undefined);
+                const position = { x: (stem || frame).x, y: (stem || frame).y };
+                const width = ele.offsetWidth / coordinates.scaleX;
+                const height = ele.offsetHeight / coordinates.scaleY;
+                if (leader && placement.textSide === "left") {
+                    position.x = Math.max(0, Math.min(frame.anchorX - width, this.viewer.canvas.clientWidth - width));
+                }
+                const gap = (_l = (_k = this.options.pointerAvoidance) === null || _k === void 0 ? void 0 : _k.gap) !== null && _l !== void 0 ? _l : 12;
+                const containsPointer = (x, y, margin) => {
+                    return pointer && pointer.x >= x - margin && pointer.x <= x + width + margin && pointer.y >= y - margin && pointer.y <= y + height + margin;
+                };
+                const passive = !selectOnClick || !this.visualRegister;
+                if (passive && ((_m = this.options.pointerAvoidance) === null || _m === void 0 ? void 0 : _m.enabled) !== false && pointer &&
+                    (containsPointer(position.x, position.y, gap) || containsPointer(position.x + displacement.x, position.y + displacement.y, gap))) {
+                    if (containsPointer(position.x + displacement.x, position.y + displacement.y, 0)) {
+                        // Choose against the original box and retain the offset until the pointer leaves both boxes.
+                        const candidates = [
+                            { x: 0, y: pointer.y - gap - height - position.y },
+                            { x: 0, y: pointer.y + gap - position.y },
+                            { x: pointer.x - gap - width - position.x, y: 0 },
+                            { x: pointer.x + gap - position.x, y: 0 }
+                        ].filter(offset => position.x + offset.x >= 0 && position.y + offset.y >= 0 &&
+                            position.x + offset.x + width <= this.viewer.canvas.clientWidth && position.y + offset.y + height <= this.viewer.canvas.clientHeight)
+                            .sort((a, b) => Math.hypot(a.x, a.y) - Math.hypot(b.x, b.y));
+                        displacement = candidates[0] || { x: 0, y: 0 };
                     }
-                    // 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";
+                    displacement = { x: 0, y: 0 };
+                }
+                const nudgeDuration = (_p = (_o = this.options.pointerAvoidance) === null || _o === void 0 ? void 0 : _o.transitionDuration) !== null && _p !== void 0 ? _p : 200;
+                const animateNudge = () => {
+                    const progress = now < nudge.start ? 0 : nudgeDuration > 0 ? Math.min(1, (now - nudge.start) / nudgeDuration) : 1;
+                    const eased = progress * progress * (3 - 2 * progress);
+                    nudge.x = nudge.fromX + (nudge.targetX - nudge.fromX) * eased;
+                    nudge.y = nudge.fromY + (nudge.targetY - nudge.fromY) * eased;
+                    return progress;
+                };
+                animateNudge();
+                if (nudge.targetX !== displacement.x || nudge.targetY !== displacement.y) {
+                    nudge = {
+                        ...nudge,
+                        fromX: nudge.x,
+                        fromY: nudge.y,
+                        targetX: displacement.x,
+                        targetY: displacement.y,
+                        start: now + ((_r = (_q = this.options.pointerAvoidance) === null || _q === void 0 ? void 0 : _q.delay) !== null && _r !== void 0 ? _r : 180)
+                    };
+                }
+                if (animateNudge() < 1 && (nudge.fromX !== nudge.targetX || nudge.fromY !== nudge.targetY)) {
+                    this.viewer.scene.requestRender();
+                }
+                position.x += nudge.x;
+                position.y += nudge.y;
+                ele.style.left = `${coordinates.x + position.x * coordinates.scaleX}px`;
+                ele.style.top = `${coordinates.y + position.y * coordinates.scaleY}px`;
+                const clickTarget = content.querySelector('[role="button"]');
+                if (clickTarget) {
+                    clickTarget.setAttribute("aria-label", placement.members.length ? `Select ${placement.entityIds.length} entities` : `Select ${(_t = (_s = this.options.text) !== null && _s !== void 0 ? _s : text) !== null && _t !== void 0 ? _t : (_u = this.rego) === null || _u === void 0 ? void 0 : _u.entityId}`);
+                }
+                if (leader) {
+                    const nodeRadius = ringAnimation.outer;
+                    const anchor = this.anchor;
+                    anchor.style.left = `${coordinates.x + (frame.anchorX - nodeRadius) * coordinates.scaleX}px`;
+                    anchor.style.top = `${coordinates.y + (frame.anchorY - nodeRadius) * coordinates.scaleY}px`;
+                    anchor.style.width = `${nodeRadius * 2 * coordinates.scaleX}px`;
+                    anchor.style.height = `${nodeRadius * 2 * coordinates.scaleY}px`;
+                    anchor.style.boxSizing = "border-box";
+                    anchor.style.background = "transparent";
+                    const svg = anchor.firstElementChild;
+                    svg.setAttribute("viewBox", `0 0 ${nodeRadius * 2} ${nodeRadius * 2}`);
+                    const circle = svg.firstElementChild;
+                    circle.setAttribute("cx", String(nodeRadius));
+                    circle.setAttribute("cy", String(nodeRadius));
+                    circle.setAttribute("r", String((nodeRadius + ringAnimation.inner) / 2));
+                    circle.setAttribute("stroke", this.options.leaderColor || "rgba(255, 255, 255, 0.8)");
+                    circle.setAttribute("stroke-width", String(nodeRadius - ringAnimation.inner));
+                    anchor.style.boxShadow = radius ? "none" : "0 0 5px rgba(0, 0, 0, 0.3)";
+                    anchor.style.opacity = String(opacity * (normalLeader ? 1 : cursorMotion.amount));
+                    anchor.style.zIndex = String(placement.zIndex);
+                    // The stem starts at the rim, never across the transparent centre, even after passive displacement.
+                    const endX = Math.max(position.x, Math.min(frame.anchorX, position.x + width));
+                    const endY = frame.anchorY < position.y ? position.y : frame.anchorY > position.y + height ? position.y + height : frame.anchorY;
+                    const dx = endX - frame.anchorX, dy = endY - frame.anchorY;
+                    const length = Math.hypot(dx, dy);
+                    const leaderAngle = Math.atan2(dy, dx);
+                    const pointerDx = pointer ? pointer.x - frame.anchorX : 0;
+                    const pointerDy = pointer ? pointer.y - frame.anchorY : 0;
+                    const desiredAngle = Math.hypot(pointerDx, pointerDy) > 0.5 ? Math.atan2(pointerDy, pointerDx) + Math.PI - leaderAngle : 0;
+                    const wrappedAngle = Math.atan2(Math.sin(desiredAngle), Math.cos(desiredAngle));
+                    // Keep the stem inside the 126-degree arc, away from antialiased endpoints.
+                    const arcFraction = 0.35;
+                    const rotationLimit = Math.PI * arcFraction - Math.PI / 30;
+                    const targetOffset = hovered ? Math.max(-rotationLimit, Math.min(rotationLimit, wrappedAngle)) : ((_v = ringAnimation.arcOffset) !== null && _v !== void 0 ? _v : 0);
+                    const targetOpen = cursorMotion.target || (hovered && (ring === null || ring === void 0 ? void 0 : ring.enabled) !== false && targetRadius > 0) ? 1 : 0;
+                    const elapsed = Math.min(32, Math.max(0, now - ((_w = ringAnimation.arcTime) !== null && _w !== void 0 ? _w : now)));
+                    const blend = duration > 0 ? 1 - Math.exp(-elapsed / (duration / 3)) : 1;
+                    const approach = (value, target) => Math.abs(value - target) < 0.001 ? target : value + (target - value) * blend;
+                    ringAnimation.arcOffset = approach((_x = ringAnimation.arcOffset) !== null && _x !== void 0 ? _x : 0, targetOffset);
+                    ringAnimation.arcOpen = approach((_y = ringAnimation.arcOpen) !== null && _y !== void 0 ? _y : 0, targetOpen);
+                    ringAnimation.arcTime = now;
+                    if (ringAnimation.arcOffset !== targetOffset || ringAnimation.arcOpen !== targetOpen) {
+                        this.viewer.scene.requestRender();
+                    }
+                    const circumference = Math.PI * (nodeRadius + ringAnimation.inner);
+                    const filledFraction = 1 - ringAnimation.arcOpen * (1 - arcFraction);
+                    circle.setAttribute("stroke-dasharray", `${circumference * filledFraction} ${circumference * (1 - filledFraction)}`);
+                    circle.setAttribute("transform", `rotate(${(leaderAngle + ringAnimation.arcOffset - Math.PI * filledFraction) * 180 / Math.PI} ${nodeRadius} ${nodeRadius})`);
+                    const cut = Math.min(radius, length);
+                    const startX = frame.anchorX + (length ? dx / length * cut : 0);
+                    const startY = frame.anchorY + (length ? dy / length * cut : 0);
+                    const screenDx = (endX - startX) * coordinates.scaleX;
+                    const screenDy = (endY - startY) * coordinates.scaleY;
+                    lineEle.style.width = `${2 * coordinates.scaleX}px`;
+                    lineEle.style.left = `${coordinates.x + (startX - 1) * coordinates.scaleX}px`;
+                    lineEle.style.top = `${coordinates.y + startY * coordinates.scaleY}px`;
+                    lineEle.style.height = `${Math.hypot(screenDx, screenDy)}px`;
+                    lineEle.style.transform = `rotate(${Math.atan2(screenDy, screenDx) - Math.PI / 2}rad)`;
+                    lineEle.style.boxShadow = radius ? "none" : "0 0 5px rgba(0, 0, 0, 0.3)";
+                    lineEle.style.transformOrigin = "top center";
+                    lineEle.style.opacity = String(opacity * (normalLeader ? 1 : cursorMotion.amount));
+                    lineEle.style.zIndex = String(placement.zIndex);
                 }
             };
-            this.renderRemoval = this.viewer.scene.postUpdate.addEventListener(updateLabel);
-            updateLabel();
+            ele.style.display = "flex";
+            ele.style.visibility = "hidden";
+            this.renderRemoval = layer.Add({ project, apply });
             // 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(() => {
@@ -642,6 +1662,9 @@ var EntityLabel;
          * Removes label from the viewer and unsubscribes from events.
          */
         removeLabel() {
+            var _a;
+            (_a = this.anchor) === null || _a === void 0 ? void 0 : _a.remove();
+            this.anchor = null;
             if (this.label &&
                 this.label.parentElement) {
                 this.label.parentElement.removeChild(this.label);
@@ -667,16 +1690,44 @@ var EntityLabel;
      * 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]) {
+        var _a, _b, _c;
+        const { rego, viewer, pos3d, visualRegister, api, options, groupId } = params;
+        if (!rego || !viewer) {
             return;
         }
+        if (params.persistent == null && visualRegister) {
+            const group = visualRegister.GetLabelGroupFor(rego.entityId, rego.menuItemId);
+            if (group || visualRegister.GetIsLabelled({ entityId: rego.entityId, menuItemId: rego.menuItemId })) {
+                return Attach({
+                    ...params,
+                    pos3d: undefined,
+                    options: (_a = group === null || group === void 0 ? void 0 : group.options) !== null && _a !== void 0 ? _a : options,
+                    groupId: (_b = group === null || group === void 0 ? void 0 : group.groupId) !== null && _b !== void 0 ? _b : groupId,
+                    persistent: true
+                });
+            }
+        }
+        if (rego[EntityLabel.ATTACH_KEY]) {
+            // Legacy hover callers omit ownership/options and must not reconfigure a register-owned label.
+            if (rego[EntityLabel.ATTACH_KEY].Persistent && params.persistent !== true && !groupId) {
+                return rego[EntityLabel.ATTACH_KEY];
+            }
+            rego[EntityLabel.ATTACH_KEY].Persistent = (_c = params.persistent) !== null && _c !== void 0 ? _c : Boolean(groupId);
+            rego[EntityLabel.ATTACH_KEY].Configure(options, groupId);
+            return rego[EntityLabel.ATTACH_KEY];
+        }
         rego[EntityLabel.ATTACH_KEY] = new Label({
             rego,
             viewer,
             pos3d,
             visualRegister,
-            api
+            api,
+            options,
+            groupId,
+            persistent: params.persistent,
+            transient: params.transient,
+            hoverRingState: params.hoverRingState,
+            visible: params.visible
         });
         return rego[EntityLabel.ATTACH_KEY];
     }
@@ -691,12 +1742,19 @@ var EntityLabel;
         if (!rego && label) {
             rego = label.Rego;
         }
+        if (label && label !== (rego === null || rego === void 0 ? void 0 : rego[EntityLabel.ATTACH_KEY])) {
+            if (!label.Persistent || params.force)
+                label.Dispose();
+            return;
+        }
         if (!rego || !rego[EntityLabel.ATTACH_KEY]) {
             if (label) {
                 (_a = label.Dispose) === null || _a === void 0 ? void 0 : _a.call(label);
             }
             return;
         }
+        if (rego[EntityLabel.ATTACH_KEY].Persistent && !params.force)
+            return;
         (_c = (_b = rego[EntityLabel.ATTACH_KEY]).Dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
         rego[EntityLabel.ATTACH_KEY] = null;
     }