bruce-cesium 7.4.1 → 7.4.3

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

@@ -33,7 +33,14 @@ var EntityLabel;
 (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";
@@ -132,7 +139,7 @@ var EntityLabel;
             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;
@@ -159,10 +166,17 @@ var EntityLabel;
             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 = {
@@ -178,7 +192,7 @@ var EntityLabel;
             };
             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";
@@ -190,7 +204,7 @@ var EntityLabel;
                     }
                 }
                 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) {
@@ -210,7 +224,7 @@ var EntityLabel;
      * 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();
@@ -276,17 +290,13 @@ var EntityLabel;
                         }
                     }
                     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) {
@@ -310,7 +320,7 @@ var EntityLabel;
             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--;
@@ -633,6 +643,8 @@ var EntityLabel;
             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;
@@ -1029,6 +1041,7 @@ var EntityLabel;
                 }
             };
             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");
@@ -1037,6 +1050,7 @@ var EntityLabel;
             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") {
@@ -1059,34 +1073,49 @@ var EntityLabel;
                     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);
                     }
                 }
@@ -1111,6 +1140,27 @@ var EntityLabel;
                     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";
@@ -1149,8 +1199,10 @@ var EntityLabel;
             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)) {
@@ -1159,6 +1211,7 @@ var EntityLabel;
             const layer = layers.get(this.viewer);
             let ele = null;
             let lineEle = null;
+            let runEle = null;
             if (this.label) {
                 ele = this.label;
             }
@@ -1195,6 +1248,7 @@ var EntityLabel;
             }
             if (this.line) {
                 lineEle = this.line;
+                runEle = this.leaderRun;
             }
             else {
                 lineEle = document.createElement("div");
@@ -1238,6 +1292,14 @@ var EntityLabel;
                 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.
@@ -1257,6 +1319,25 @@ var EntityLabel;
                     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;
@@ -1398,7 +1479,14 @@ var EntityLabel;
                     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)) {
@@ -1413,20 +1501,21 @@ var EntityLabel;
                     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 };
@@ -1437,17 +1526,8 @@ var EntityLabel;
                     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();
                 }
@@ -1465,6 +1545,7 @@ var EntityLabel;
                     // 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;
@@ -1472,7 +1553,9 @@ var EntityLabel;
                     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.
@@ -1516,19 +1599,26 @@ var EntityLabel;
                     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.
@@ -1546,7 +1636,7 @@ var EntityLabel;
                 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);
@@ -1562,7 +1652,7 @@ var EntityLabel;
                         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)) {
@@ -1574,7 +1664,7 @@ var EntityLabel;
                 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;
@@ -1597,8 +1687,13 @@ var EntityLabel;
                     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);
@@ -1609,13 +1704,13 @@ var EntityLabel;
                     // 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();
@@ -1627,17 +1722,27 @@ var EntityLabel;
                     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";
@@ -1662,7 +1767,7 @@ var EntityLabel;
          * 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 &&
@@ -1674,6 +1779,8 @@ var EntityLabel;
                 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;