bruce-cesium 7.4.0 → 7.4.2

package/dist/bruce-cesium.umd.js

@@ -5383,7 +5383,14 @@
     (function (EntityLabel) {
         const ICON_BACKGROUND_BLEND = 0.8;
         const ICON_BACKGROUND_ALPHA = 0.45;
+        // Under this much difference between the glyph's width and height the chip is squared off,
+        // so a row of labels reads as one size rather than a set of differently shaped pills.
+        const ICON_BACKGROUND_UNIFORM_TOLERANCE = 0.3;
         const TEXT_MAX_WIDTH = 200;
+        // How far an angled leader runs sideways before the label starts.
+        const ANGLED_LEADER_RUN = 28;
+        // One per tinted icon, since an SVG mask is addressed by id across the whole document.
+        let tintCounter = 0;
         // Key where the label instance is stored within the cesium entity.
         // Eg: rego[ATTACH_KEY] = new EntityLabel(...);
         EntityLabel.ATTACH_KEY = "nextspace-navigator-entity-label";
@@ -5482,7 +5489,7 @@
                 this.nextOrder = 0;
             }
             Resolve(frames) {
-                var _a, _b;
+                var _a, _b, _c;
                 const live = new Set(frames.map(frame => frame.id));
                 const moved = (frame) => {
                     var _a;
@@ -5509,10 +5516,17 @@
                 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);
+                    var _a, _b;
+                    if (!frame.canFlip) {
+                        return frame;
+                    }
+                    if (frame.leaderRun != null) {
+                        const x = side === "left" ? frame.anchorX - frame.leaderRun - frame.width : frame.anchorX + frame.leaderRun;
+                        return { ...frame, x: Math.max(0, Math.min(x, ((_a = frame.viewportWidth) !== null && _a !== void 0 ? _a : Infinity) - frame.width)) };
+                    }
+                    return (side === "left" ?
+                        { ...frame, x: Math.max(0, Math.min(frame.anchorX - frame.width, ((_b = frame.viewportWidth) !== null && _b !== void 0 ? _b : Infinity) - frame.width)) }
+                        : frame);
                 };
                 const score = (frame, padding = 0) => {
                     const box = {
@@ -5528,7 +5542,7 @@
                 };
                 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 side = frame.canFlip ? (_b = (_a = old === null || old === void 0 ? void 0 : old.side) !== null && _a !== void 0 ? _a : frame.leaderSide) !== null && _b !== void 0 ? _b : "right" : "right";
                     let chosen = candidate(frame, side);
                     if (!fixed(frame) && frame.canFlip) {
                         const otherSide = side === "left" ? "right" : "left";
@@ -5540,7 +5554,7 @@
                         }
                     }
                     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++ });
+                    next.set(frame.id, { frame: fixed(frame) ? old.frame : { ...frame }, side, order: (_c = old === null || old === void 0 ? void 0 : old.order) !== null && _c !== void 0 ? _c : this.nextOrder++ });
                     text.Add(chosen);
                     const stem = leaderBounds(chosen);
                     if (stem) {
@@ -5560,7 +5574,7 @@
          * 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;
+            var _a, _b, _c, _d, _e, _f, _g;
             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();
@@ -5626,17 +5640,13 @@
                             }
                         }
                         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");
-                            }
+                            // A value long enough to wrap fills the box on its own, so only one is listed.
+                            const wrapped = stableMembers.some(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()); });
+                            const limit = wrapped ? 1 : 2;
+                            const rows = Array.from(values).slice(0, limit);
+                            if (values.size > limit)
+                                rows.push(`+${values.size - limit} more…`);
+                            representative.text = rows.join("\n");
                         }
                     }
                     for (const frame of cluster.members) {
@@ -5660,7 +5670,7 @@
                 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.opacity *= Math.max(0, Math.min(1, (_g = (_f = frame.options) === null || _f === void 0 ? void 0 : _f.overlapOpacity) !== null && _g !== void 0 ? _g : 0.25));
                 }
                 placement.zIndex = zIndex--;
                 foreground.Add(frame);
@@ -5982,6 +5992,8 @@
                 this.loadTimeout = null;
                 this.loadedName = false;
                 this.line = null;
+                // The sideways half of an angled leader; the rise is drawn by line.
+                this.leaderRun = null;
                 this.anchor = null;
                 // Null = not attempted to load.
                 this.additionalTexts = null;
@@ -6378,6 +6390,7 @@
                     }
                 };
                 const normalLeader = (_k = this.options.leader) !== null && _k !== void 0 ? _k : presentation === "text";
+                const angled = this.options.leaderStyle === "angled";
                 let leader = normalLeader;
                 const content = document.createElement("span");
                 const originalText = (_l = this.options.text) !== null && _l !== void 0 ? _l : [text, ...additionalTexts].join("\n");
@@ -6386,6 +6399,7 @@
                 let sourceNaturalText;
                 let iconElement;
                 let iconContainer;
+                let fitIconBackground;
                 content.className = "entity-label-content";
                 content.style.cssText = "display:flex;align-items:center;gap:6px;";
                 if (presentation === "icon-text-above") {
@@ -6408,34 +6422,49 @@
                         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 svgNs = "http://www.w3.org/2000/svg";
+                        const tint = iconColor ? document.createElementNS(svgNs, "svg") : null;
+                        const painted = tint ? document.createElementNS(svgNs, "image") : null;
+                        const inked = tint ? document.createElementNS(svgNs, "rect") : null;
+                        if (tint) {
+                            const maskId = `entity-label-tint-${++tintCounter}`;
+                            const mask = document.createElementNS(svgNs, "mask");
+                            mask.setAttribute("id", maskId);
+                            mask.setAttribute("maskUnits", "userSpaceOnUse");
+                            painted.setAttribute("href", this.options.iconUrl);
+                            painted.setAttribute("preserveAspectRatio", "xMidYMid meet");
+                            mask.appendChild(painted);
+                            inked.setAttribute("fill", iconColor);
+                            inked.setAttribute("mask", `url(#${maskId})`);
+                            tint.append(mask, inked);
+                            tint.style.display = "block";
+                            icon.style.display = "inline-flex";
+                            icon.appendChild(tint);
                         }
                         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`;
+                            const width = (intrinsic ? image.naturalWidth || 24 : size || 24) * scale;
+                            const height = (intrinsic ? image.naturalHeight || 24 : size || 24) * scale;
+                            if (tint) {
+                                tint.setAttribute("viewBox", `0 0 ${width} ${height}`);
+                                for (const node of [tint, painted, inked]) {
+                                    node.setAttribute("width", String(width));
+                                    node.setAttribute("height", String(height));
+                                }
+                            }
+                            else {
+                                image.style.width = `${width}px`;
+                                image.style.height = `${height}px`;
+                            }
                             this.viewer.scene.requestRender();
                         };
                         image.onload = resize;
                         resize();
                         image.src = this.options.iconUrl;
-                        if (!iconColor) {
+                        if (!tint) {
                             icon.appendChild(image);
                         }
                     }
@@ -6460,6 +6489,27 @@
                         icon.style.minWidth = `${size}px`;
                         icon.style.minHeight = `${size}px`;
                         icon.style.boxSizing = "content-box";
+                        let fitted = false;
+                        fitIconBackground = () => {
+                            if (fitted) {
+                                return;
+                            }
+                            const padding = size / 3;
+                            const width = icon.offsetWidth - padding * 2;
+                            const height = icon.offsetHeight - padding * 2;
+                            if (width <= 0 || height <= 0) {
+                                return;
+                            }
+                            fitted = true;
+                            const longest = Math.max(width, height);
+                            const difference = (longest - Math.min(width, height)) / longest;
+                            if (difference > ICON_BACKGROUND_UNIFORM_TOLERANCE) {
+                                return;
+                            }
+                            icon.style.minWidth = `${longest}px`;
+                            icon.style.minHeight = `${longest}px`;
+                            this.viewer.scene.requestRender();
+                        };
                     }
                     if (this.options.iconScale === 0) {
                         icon.style.display = "none";
@@ -6498,8 +6548,10 @@
                 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;";
+                // Text above the icon would have the badge land in it, so the free corner is the lower one.
+                const badgeBelow = presentation === "icon-text-above";
                 if (iconContainer) {
-                    countElement.style.cssText += "position:absolute;left:100%;top:0;transform:translate(-50%,-50%);";
+                    countElement.style.cssText += `position:absolute;left:100%;top:${badgeBelow ? "100%" : "0"};transform:translate(-50%,-50%);`;
                     iconContainer.appendChild(countElement);
                 }
                 if (!layers.has(this.viewer)) {
@@ -6508,6 +6560,7 @@
                 const layer = layers.get(this.viewer);
                 let ele = null;
                 let lineEle = null;
+                let runEle = null;
                 if (this.label) {
                     ele = this.label;
                 }
@@ -6544,6 +6597,7 @@
                 }
                 if (this.line) {
                     lineEle = this.line;
+                    runEle = this.leaderRun;
                 }
                 else {
                     lineEle = document.createElement("div");
@@ -6587,6 +6641,14 @@
                     layer.element.appendChild(lineEleNode);
                     layer.element.appendChild(lineEle);
                 }
+                // Built here rather than beside the stem, since the style can change on a label that is reused.
+                if (angled && !runEle) {
+                    runEle = lineEle.cloneNode(false);
+                    runEle.className = "entity-label-leader-run";
+                    runEle.style.display = "none";
+                    this.leaderRun = runEle;
+                    layer.element.appendChild(runEle);
+                }
                 let MAX_DISTANCE = Math.max(15000, sizeInM * 35);
                 if (visual && visual instanceof Cesium.Entity) {
                     // Consistent sized things.
@@ -6606,6 +6668,25 @@
                         y: upwards ? endY - height : endY, endY
                     };
                 };
+                /*
+                 * An angled leader parks the label beside the anchor instead of over it,
+                 * so the stem rises to the label's middle and then runs out to whichever side has the room.
+                 */
+                const fitAngledLeader = (anchorX, anchorY, desired, width, height, radius = 0) => {
+                    const canvas = this.viewer.canvas;
+                    const above = Math.max(0, anchorY - height / 2);
+                    const below = Math.max(0, canvas.clientHeight - anchorY - height / 2);
+                    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);
+                    const run = Math.max(ANGLED_LEADER_RUN, radius + 4);
+                    const rightwards = anchorX + run + width <= canvas.clientWidth || anchorX - run - width < 0;
+                    return {
+                        x: Math.max(0, Math.min(rightwards ? anchorX + run : anchorX - run - width, canvas.clientWidth - width)),
+                        y: Math.max(0, Math.min(endY - height / 2, canvas.clientHeight - height)), endY,
+                        run, side: (rightwards ? "right" : "left")
+                    };
+                };
                 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;
@@ -6743,7 +6824,14 @@
                         y -= height / 2;
                     }
                     // Membership uses the unclamped source footprint, never the summary's changing dimensions.
-                    if (leader)
+                    let leaderRun;
+                    let leaderSide;
+                    if (leader && angled) {
+                        const fit = fitAngledLeader(anchorX, anchorY, leaderLength, width, height);
+                        ({ x, y } = fit);
+                        ({ run: leaderRun, side: leaderSide } = fit);
+                    }
+                    else 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)) {
@@ -6758,20 +6846,21 @@
                         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,
+                        entityId: (_t = this.rego) === null || _t === void 0 ? void 0 : _t.entityId, group: this.groupId, x, y, width, height, anchorX, anchorY, depth, leaderLength, leaderRun, leaderSide, 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;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
                     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";
+                    if (runEle)
+                        runEle.style.display = show && leader ? "block" : "none";
                     this.anchor.style.display = show && leader ? "block" : "none";
                     if (!show) {
                         displacement = { x: 0, y: 0 };
@@ -6782,17 +6871,8 @@
                         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)) {
+                    if (textElement && textElement.textContent !== displayText) {
                         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);
-                        }
-                        displayedSummaryMore = summaryMore;
                         // Measure the summary's footprint next frame without replacing each member's source text.
                         this.viewer.scene.requestRender();
                     }
@@ -6810,6 +6890,7 @@
                         // The badge participates in layout, so its new width needs another measurement.
                         this.viewer.scene.requestRender();
                     }
+                    fitIconBackground === null || fitIconBackground === void 0 ? void 0 : fitIconBackground();
                     if (iconContainer) {
                         const badgeWidth = countElement.offsetWidth;
                         const iconWidth = iconElement.offsetWidth;
@@ -6817,7 +6898,9 @@
                         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`;
+                        const overhang = countElement.offsetHeight / 2;
+                        iconContainer.style.marginTop = badgeBelow ? "0px" : `${overhang}px`;
+                        iconContainer.style.marginBottom = badgeBelow ? `${overhang}px` : "0px";
                         iconContainer.style.marginRight = `${badgeWidth / 2 + clearance}px`;
                     }
                     // Summary and badge changes must fit on their first visible frame, including after resize.
@@ -6860,19 +6943,26 @@
                         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 stem = (leader ? (angled ? fitAngledLeader : 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") {
+                    if (leader && angled) {
+                        // The declutter owns the side; the fit only says which one had the room to begin with.
+                        const run = Math.max(ANGLED_LEADER_RUN, radius + 4);
+                        const side = (_l = (_k = placement.textSide) !== null && _k !== void 0 ? _k : frame.leaderSide) !== null && _l !== void 0 ? _l : "right";
+                        const beside = side === "left" ? frame.anchorX - run - width : frame.anchorX + run;
+                        position.x = Math.max(0, Math.min(beside, this.viewer.canvas.clientWidth - width));
+                    }
+                    else 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 gap = (_o = (_m = this.options.pointerAvoidance) === null || _m === void 0 ? void 0 : _m.gap) !== null && _o !== void 0 ? _o : 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 &&
+                    if (passive && ((_p = this.options.pointerAvoidance) === null || _p === void 0 ? void 0 : _p.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.
@@ -6890,7 +6980,7 @@
                     else {
                         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 nudgeDuration = (_r = (_q = this.options.pointerAvoidance) === null || _q === void 0 ? void 0 : _q.transitionDuration) !== null && _r !== void 0 ? _r : 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);
@@ -6906,7 +6996,7 @@
                             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)
+                            start: now + ((_t = (_s = this.options.pointerAvoidance) === null || _s === void 0 ? void 0 : _s.delay) !== null && _t !== void 0 ? _t : 180)
                         };
                     }
                     if (animateNudge() < 1 && (nudge.fromX !== nudge.targetX || nudge.fromY !== nudge.targetY)) {
@@ -6918,7 +7008,7 @@
                     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}`);
+                        clickTarget.setAttribute("aria-label", placement.members.length ? `Select ${placement.entityIds.length} entities` : `Select ${(_v = (_u = this.options.text) !== null && _u !== void 0 ? _u : text) !== null && _v !== void 0 ? _v : (_w = this.rego) === null || _w === void 0 ? void 0 : _w.entityId}`);
                     }
                     if (leader) {
                         const nodeRadius = ringAnimation.outer;
@@ -6941,8 +7031,13 @@
                         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 straightX = Math.max(position.x, Math.min(frame.anchorX, position.x + width));
+                        const straightY = frame.anchorY < position.y ? position.y : frame.anchorY > position.y + height ? position.y + height : frame.anchorY;
+                        const beside = angled && (frame.anchorX < position.x || frame.anchorX > position.x + width);
+                        const elbowY = position.y + height / 2;
+                        const endX = beside ? frame.anchorX : straightX;
+                        const endY = beside ? elbowY : straightY;
+                        const runToX = frame.anchorX < position.x ? position.x : position.x + width;
                         const dx = endX - frame.anchorX, dy = endY - frame.anchorY;
                         const length = Math.hypot(dx, dy);
                         const leaderAngle = Math.atan2(dy, dx);
@@ -6953,13 +7048,13 @@
                         // 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 targetOffset = hovered ? Math.max(-rotationLimit, Math.min(rotationLimit, wrappedAngle)) : ((_x = ringAnimation.arcOffset) !== null && _x !== void 0 ? _x : 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 elapsed = Math.min(32, Math.max(0, now - ((_y = ringAnimation.arcTime) !== null && _y !== void 0 ? _y : 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.arcOffset = approach((_z = ringAnimation.arcOffset) !== null && _z !== void 0 ? _z : 0, targetOffset);
+                        ringAnimation.arcOpen = approach((_0 = ringAnimation.arcOpen) !== null && _0 !== void 0 ? _0 : 0, targetOpen);
                         ringAnimation.arcTime = now;
                         if (ringAnimation.arcOffset !== targetOffset || ringAnimation.arcOpen !== targetOpen) {
                             this.viewer.scene.requestRender();
@@ -6971,17 +7066,27 @@
                         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);
+                        const draw = (element, fromX, fromY, toX, toY) => {
+                            const screenDx = (toX - fromX) * coordinates.scaleX;
+                            const screenDy = (toY - fromY) * coordinates.scaleY;
+                            element.style.width = `${2 * coordinates.scaleX}px`;
+                            element.style.left = `${coordinates.x + (fromX - 1) * coordinates.scaleX}px`;
+                            element.style.top = `${coordinates.y + fromY * coordinates.scaleY}px`;
+                            element.style.height = `${Math.hypot(screenDx, screenDy)}px`;
+                            element.style.transform = `rotate(${Math.atan2(screenDy, screenDx) - Math.PI / 2}rad)`;
+                            element.style.boxShadow = radius ? "none" : "0 0 5px rgba(0, 0, 0, 0.3)";
+                            element.style.transformOrigin = "top center";
+                            element.style.opacity = String(opacity * (normalLeader ? 1 : cursorMotion.amount));
+                            element.style.zIndex = String(placement.zIndex);
+                        };
+                        draw(lineEle, startX, startY, endX, endY);
+                        if (runEle) {
+                            // Overlap the corner by the stem's own width so the elbow has no notch in it.
+                            const overlap = frame.anchorX < runToX ? -1 : 1;
+                            runEle.style.display = beside ? "block" : "none";
+                            if (beside)
+                                draw(runEle, endX + overlap, endY, runToX, endY);
+                        }
                     }
                 };
                 ele.style.display = "flex";
@@ -7006,7 +7111,7 @@
              * Removes label from the viewer and unsubscribes from events.
              */
             removeLabel() {
-                var _a;
+                var _a, _b;
                 (_a = this.anchor) === null || _a === void 0 ? void 0 : _a.remove();
                 this.anchor = null;
                 if (this.label &&
@@ -7018,6 +7123,8 @@
                     this.line.parentElement.removeChild(this.line);
                     this.line = null;
                 }
+                (_b = this.leaderRun) === null || _b === void 0 ? void 0 : _b.remove();
+                this.leaderRun = null;
                 if (this.renderRemoval) {
                     this.renderRemoval();
                     this.renderRemoval = null;
@@ -7140,10 +7247,59 @@
             };
         }
         EntityLabelGroup.FromEntity = FromEntity;
+        /**
+         * Returns if we need to resolve Entity data to create the label data.
+         */
+        function NeedsEntityData(options) {
+            var _a;
+            if (!options) {
+                return false;
+            }
+            if ((_a = options.attributes) === null || _a === void 0 ? void 0 : _a.length) {
+                return true;
+            }
+            return [
+                options.text, options.icon, options.iconUrl, options.iconClass,
+                options.iconColor, options.iconStatus, options.iconPriority, options.iconScale
+            ].some(Array.isArray);
+        }
+        EntityLabelGroup.NeedsEntityData = NeedsEntityData;
+        // How many entities to read at once, so a long hand-picked list does not arrive as a burst.
+        const HYDRATE_AT_ONCE = 8;
+        /*
+         * Reads the entities behind items that name one without carrying it.
+         */
+        async function Hydrate(items, api, signal) {
+            if (!api) {
+                return items;
+            }
+            const hydrated = items.slice();
+            for (let start = 0; start < hydrated.length; start += HYDRATE_AT_ONCE) {
+                if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+                    return hydrated;
+                }
+                await Promise.all(hydrated.slice(start, start + HYDRATE_AT_ONCE).map(async (item, at) => {
+                    if (!(item === null || item === void 0 ? void 0 : item.entityId) || item.entity) {
+                        return;
+                    }
+                    try {
+                        const { entity } = await BModels.Entity.Get({ api, entityId: item.entityId, migrated: true });
+                        if (entity) {
+                            hydrated[start + at] = { ...item, entity };
+                        }
+                    }
+                    catch {
+                        // Rip.
+                    }
+                }));
+            }
+            return hydrated;
+        }
+        EntityLabelGroup.Hydrate = Hydrate;
         /*
          * Uses the existing DataLab grammar, discarding actions and projections that cannot return Entities.
          */
-        async function Loader(source, api, signal) {
+        async function Loader(source, api, signal, hydrate) {
             var _a;
             var _b;
             if (source.type === "provider") {
@@ -7155,7 +7311,13 @@
                 if (!Array.isArray(items)) {
                     throw new Error("Label JSON must be an array of label items");
                 }
-                return async (offset, limit) => ({ items: items.slice(offset, offset + limit), hasMore: offset + limit < items.length });
+                return async (offset, limit, signal) => {
+                    const page = items.slice(offset, offset + limit);
+                    return {
+                        items: hydrate ? await Hydrate(page, api, signal) : page,
+                        hasMore: offset + limit < items.length
+                    };
+                };
             }
             if (!api) {
                 throw new Error("DataLab label sources require API getters on the visual register");
@@ -7284,7 +7446,7 @@
                 const items = new Map();
                 let truncated = false;
                 try {
-                    const load = await Loader(definition.source, (_g = this.register.ApiGetters) === null || _g === void 0 ? void 0 : _g.GetBruceApi(), controller.signal);
+                    const load = await Loader(definition.source, (_g = this.register.ApiGetters) === null || _g === void 0 ? void 0 : _g.GetBruceApi(), controller.signal, NeedsEntityData(definition.options));
                     let offset = 0;
                     for (let pageNumber = 0;; pageNumber++) {
                         if (controller.signal.aborted || this.register.Disposed) {
@@ -7490,10 +7652,11 @@
                 this.pending.delete(id);
                 const group = this.active.get(id);
                 if (!group) {
+                    // Nothing to unindex. Say so only if there was a definition to forget.
                     if (known) {
                         this.notify();
-                        return;
                     }
+                    return;
                 }
                 this.unindex(id);
                 this.active.delete(id);
@@ -50068,7 +50231,7 @@ void main() {
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "7.4.0";
+    const VERSION = "7.4.2";
     /**
      * Updates the environment instance used by bruce-cesium to one specified.
      * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.