bruce-cesium 7.4.1 → 7.4.3

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;
@@ -16647,9 +16754,6 @@
             // Last date-time range taken from the clock.
             this.lastDateTimeMin = null;
             this.lastDateTimeMax = null;
-            // Entity ID -> last resolved date time.
-            // Helps determine if a slow resolved request can still be applied while we wait for the next one.
-            this.lastFoundDateTimes = new Map();
             // ID of Entity IDs that need to be requested.
             this.eIdQueue = [];
             // Membership mirror of eIdQueue for quick checks.
@@ -16681,8 +16785,12 @@
             // Unsubscribes the view monitor listener that queues what the camera has moved onto.
             this.monitorRemoval = null;
             // Indicates a tick is active.
-            // When true, we won't bother calling onTick again.
+            // When true, a new tick is not started; it is noted in pendingTick and run once this one ends.
             this.runningTick = false;
+            // A tick was asked for while one was running, so another is owed once it finishes.
+            this.pendingTick = false;
+            // The debounce every clock change goes through, kept so a tick owed after a running one does too.
+            this.tickDelay = null;
             // Entity ID -> Entity blob.
             // This is a tool that lets developers set their own JSON blobs instead of requesting data from API.
             this.entityDataOverrides = new Map();
@@ -16746,11 +16854,13 @@
                 let tickDelay = new BModels.DelayQueue(() => {
                     this.onTick(false);
                 }, 250, true);
+                this.tickDelay = tickDelay;
                 this.hDisposals.push(() => {
                     if (tickDelay) {
                         tickDelay.Dispose();
                     }
                     tickDelay = null;
+                    this.tickDelay = null;
                 });
                 // React to clock changes and request new Entities.
                 let prevTime = null;
@@ -16790,7 +16900,6 @@
             this.priorityCount = 0;
             this.lastOrderFocus = null;
             this.allEIds.clear();
-            this.lastFoundDateTimes.clear();
             this.everFound.clear();
             this.clearIndex();
             this.lastDateTime = null;
@@ -17152,7 +17261,6 @@
             this.eIdQueued.clear();
             this.priorityCount = 0;
             this.allEIds.clear();
-            this.lastFoundDateTimes.clear();
             this.everFound.clear();
             this.clearIndex();
             this.entityDataOverrides.clear();
@@ -17168,7 +17276,13 @@
             }
         }
         onTick(force) {
-            if (this.runningTick || this.disposed) {
+            if (this.disposed) {
+                return;
+            }
+            if (this.runningTick) {
+                if (this.historic) {
+                    this.pendingTick = true;
+                }
                 return;
             }
             const rTime = this.viewer.clock.currentTime.toString();
@@ -17176,10 +17290,16 @@
                 return;
             }
             this.lastDateTime = rTime;
+            // Whether the clock has left the moment this tick is reading.
+            const movedOn = () => this.historic && this.viewer.clock.currentTime.toString() !== rTime;
             (async () => {
                 this.runningTick = true;
+                this.pendingTick = false;
                 this.placeStragglers();
                 let rerun = false;
+                let interrupted = false;
+                // Batch's answer is applied while the next batch is being read.
+                const applying = [];
                 try {
                     const handleResponse = async (requestedBatch, entities) => {
                         var _a, _b, _c, _d;
@@ -17243,45 +17363,7 @@
                                 api: this.api
                             })).tags;
                         }
-                        // 0 = rTime is still the current time.
-                        // 1 = rTime is in the future.
-                        // -1 = rTime is in the past.
-                        let changeDir = 0;
-                        if (this.lastDateTime !== this.viewer.clock.currentTime.toString()) {
-                            changeDir = this.lastDateTime < this.viewer.clock.currentTime.toString() ? 1 : -1;
-                        }
-                        let toEmit;
-                        if (this.historic) {
-                            // We can emit Entities if the last resolved time (per Entity) isn't newer than rTime.
-                            // We compare using the changeDir to determine if we should emit or not.
-                            toEmit = resolvedEntities.filter((e) => {
-                                var _a;
-                                const entityId = ((_a = e === null || e === void 0 ? void 0 : e.Bruce) === null || _a === void 0 ? void 0 : _a.ID) || (e === null || e === void 0 ? void 0 : e.id);
-                                const lastFoundDateTime = this.lastFoundDateTimes.get(entityId);
-                                if (lastFoundDateTime) {
-                                    if (changeDir === 1) {
-                                        return lastFoundDateTime <= rTime;
-                                    }
-                                    else if (changeDir === -1) {
-                                        return lastFoundDateTime >= rTime;
-                                    }
-                                }
-                                return true;
-                            });
-                            // Update the last found date times for the filtered Entities.
-                            toEmit.forEach((e) => {
-                                var _a;
-                                const entityId = ((_a = e === null || e === void 0 ? void 0 : e.Bruce) === null || _a === void 0 ? void 0 : _a.ID) || (e === null || e === void 0 ? void 0 : e.id);
-                                if (entityId) {
-                                    this.lastFoundDateTimes.set(entityId, rTime);
-                                }
-                            });
-                        }
-                        else {
-                            // If we're not historic, we can just emit everything.
-                            toEmit = resolvedEntities;
-                        }
-                        this.emitEntities(toEmit, tags);
+                        this.emitEntities(resolvedEntities, tags);
                     };
                     const QUEUE_BATCH_SIZE = 500;
                     const requestedIds = new Set();
@@ -17290,7 +17372,8 @@
                         const total = this.eIdQueue.length;
                         let done = 0;
                         while (this.eIdQueue.length && !this.disposed) {
-                            if (this.historic && this.lastDateTime !== rTime) {
+                            if (movedOn()) {
+                                interrupted = true;
                                 break;
                             }
                             this.orderQueueByCamera();
@@ -17306,7 +17389,7 @@
                                 api: this.api,
                                 maxSearchTimeSec: 60 * 2
                             });
-                            handleResponse(batch, entities);
+                            applying.push(handleResponse(batch, entities));
                             for (let i = 0; i < batch.length; i++) {
                                 requestedIds.add(batch[i]);
                             }
@@ -17338,7 +17421,8 @@
                         // The near ones are resolved first out of whatever the view still reaches.
                         allEIds = this.bandIds(allEIds);
                         while (allEIds.length && !this.disposed && !this.eIdQueue.length) {
-                            if (this.historic && this.lastDateTime !== rTime) {
+                            if (movedOn()) {
+                                interrupted = true;
                                 break;
                             }
                             const batch = allEIds.splice(0, QUEUE_BATCH_SIZE);
@@ -17349,7 +17433,7 @@
                                 api: this.api,
                                 maxSearchTimeSec: 60 * 2
                             });
-                            handleResponse(batch, entities);
+                            applying.push(handleResponse(batch, entities));
                             for (let i = 0; i < batch.length; i++) {
                                 requestedIds.add(batch[i]);
                             }
@@ -17364,10 +17448,32 @@
                     console.error(e);
                 }
                 finally {
+                    // Only a historic answer can be overtaken by a newer moment, so nothing else waits.
+                    if (this.historic && applying.length) {
+                        await Promise.all(applying.map((pending) => pending.catch((e) => console.error(e))));
+                    }
                     this.runningTick = false;
                 }
-                if (rerun) {
+                // A moment read only in part is forgotten, so coming back to it reads it again in full.
+                if (interrupted && this.lastDateTime === rTime) {
+                    this.lastDateTime = null;
+                }
+                if (this.disposed) {
+                    return;
+                }
+                // Leftovers at the same moment carry straight on, as they always have.
+                if (rerun && !interrupted) {
                     this.onTick(true);
+                    return;
+                }
+                if (interrupted || this.pendingTick || movedOn()) {
+                    this.pendingTick = false;
+                    if (this.tickDelay) {
+                        this.tickDelay.Call();
+                    }
+                    else {
+                        this.onTick(false);
+                    }
                 }
             })();
         }
@@ -48962,7 +49068,7 @@ void main() {
         }
         EntityRenderEngine.GetGraphicShapeId = GetGraphicShapeId;
         async function Render(params) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             const groupRenderParams = {
                 apiGetter: params.apiGetter,
                 viewer: params.viewer,
@@ -49139,10 +49245,20 @@ void main() {
                         polygons.push(entity);
                         continue;
                     }
+                    // Present when the gate above chose to reuse this entity's graphic.
+                    const existingRoot = cEntities.get(entity.Bruce.ID);
+                    const existingParts = new Map();
+                    (_d = existingRoot === null || existingRoot === void 0 ? void 0 : existingRoot._siblingGraphics) === null || _d === void 0 ? void 0 : _d.forEach((part) => {
+                        if (part._multiPartIndex != null) {
+                            existingParts.set(part._multiPartIndex, part);
+                        }
+                    });
+                    const partRendered = new Map();
+                    const partIndexes = new Map();
                     const pParams = {
                         ...groupRenderParams,
                         entities: [],
-                        rendered: cEntities
+                        rendered: partRendered
                     };
                     pParams.entitiesHistoric = params.entitiesHistoric;
                     const zoomItem = pParams.zoomItems[entity.Bruce.ID];
@@ -49158,39 +49274,59 @@ void main() {
                         };
                         pParams.zoomItems[subEntity.Bruce.ID] = zoomItem;
                         pParams.entities.push(subEntity);
-                    }
-                    const cPoly = await Polygon.RenderGroup(pParams);
-                    Array.from(cPoly.keys()).forEach((key) => {
-                        if (cPoly.get(key)) {
-                            pParams.entities = pParams.entities.filter((e) => e.Bruce.ID != key);
-                        }
-                    });
-                    let rendered = Array.from(cPoly.values());
-                    const cLines = await Polyline.RenderGroup(pParams);
-                    Array.from(cLines.keys()).forEach((key) => {
-                        if (cLines.get(key)) {
+                        partIndexes.set(subEntity.Bruce.ID, j);
+                        const existingPart = existingParts.get(j);
+                        if (existingPart) {
+                            // An engine preparing a reused graphic gathers everything connected to it, so a part still
+                            // attached to its root would have every other part evicted from the scene.
+                            existingPart._parentEntity = null;
+                            partRendered.set(subEntity.Bruce.ID, existingPart);
+                        }
+                    }
+                    const rendered = [];
+                    const collect = (results) => {
+                        results.forEach((cEntity, key) => {
+                            if (!cEntity) {
+                                return;
+                            }
+                            cEntity._multiPartIndex = partIndexes.get(key);
+                            rendered.push(cEntity);
                             pParams.entities = pParams.entities.filter((e) => e.Bruce.ID != key);
-                        }
-                    });
-                    rendered = rendered.concat(Array.from(cLines.values()));
+                        });
+                    };
+                    collect(await Polygon.RenderGroup(pParams));
+                    collect(await Polyline.RenderGroup(pParams));
                     // We'll only render points when there's no other geometry.
                     // Generally speaking when polygons/polylines are drawn, points are only drawn because of invalid data.
                     if (!rendered.length) {
-                        const cPoints = await Point.RenderGroup(pParams);
-                        rendered = rendered.concat(Array.from(cPoints.values()));
+                        collect(await Point.RenderGroup(pParams));
                     }
-                    rendered = rendered.filter(x => x != null);
                     if (rendered.length) {
-                        const rootEntity = new Cesium.Entity({
-                            id: BModels.ObjectUtils.UId(15)
-                        });
-                        rootEntity._siblingGraphics = [];
+                        const sameParts = ((_e = existingRoot === null || existingRoot === void 0 ? void 0 : existingRoot._siblingGraphics) === null || _e === void 0 ? void 0 : _e.length) == rendered.length &&
+                            rendered.every((part) => existingRoot._siblingGraphics.includes(part));
+                        let rootEntity;
+                        if (sameParts) {
+                            rootEntity = existingRoot;
+                        }
+                        else {
+                            if (existingRoot === null || existingRoot === void 0 ? void 0 : existingRoot._siblingGraphics) {
+                                // Retiring the old root removes its parts, and the ones carried over belong to the new root now.
+                                existingRoot._siblingGraphics = existingRoot._siblingGraphics.filter((part) => !rendered.includes(part));
+                            }
+                            rootEntity = new Cesium.Entity({
+                                id: BModels.ObjectUtils.UId(15)
+                            });
+                        }
+                        rootEntity._siblingGraphics = rendered;
                         rootEntity._renderGroup = GetRenderGroupId(zoomItem);
-                        rootEntity._siblingGraphics = rootEntity._siblingGraphics.concat(rendered);
+                        // The skip gate compares the rego's style against the zoom item's, and the rego takes it from here.
+                        rootEntity.styleId = (zoomItem === null || zoomItem === void 0 ? void 0 : zoomItem.StyleID) == -1 ? -1 : (+(zoomItem === null || zoomItem === void 0 ? void 0 : zoomItem.StyleID) || null);
+                        rootEntity.styleEffective = rendered[0].styleEffective;
                         cEntities.set(entity.Bruce.ID, rootEntity);
-                        const firstEntity = rendered[0];
-                        if (firstEntity) {
-                            rootEntity.position = GetCValue(params.viewer, firstEntity.position);
+                        const newPosition = GetCValue(params.viewer, rendered[0].position);
+                        const oldPosition = GetCValue(params.viewer, rootEntity.position);
+                        if (newPosition && (!oldPosition || !BModels.Cartes.IsEqualCartes3(oldPosition, newPosition))) {
+                            rootEntity.position = new Cesium.ConstantPositionProperty(newPosition);
                         }
                         rendered.forEach((child) => {
                             child._parentEntity = rootEntity;
@@ -50124,7 +50260,7 @@ void main() {
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "7.4.1";
+    const VERSION = "7.4.3";
     /**
      * 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.