bruce-cesium 7.5.7 → 7.5.8

package/dist/bruce-cesium.umd.js

@@ -5530,6 +5530,24 @@
         const PHOTO_CACHE_LIMIT = 500;
         // Key where the viewer keeps its downsized photos.
         const PHOTO_CACHE_KEY = "_nextspaceLabelPhotos";
+        // Clearance around a model's box, as a share of its half-extent on each axis.
+        const MODEL_BOX_PADDING = 0.02;
+        // Share of each edge drawn out from its corners while the box is idle. Hovering draws the edges whole.
+        const MODEL_BOX_BRACKET = 0.2;
+        // Under this many pixels across, a box reads as a smudge and the ring takes over.
+        const MODEL_BOX_MIN_SIZE = 24;
+        // Stem length above the box outline when the options do not set one.
+        const MODEL_BOX_STEM = 32;
+        // Gap in pixels a waiting box needs from a drawn one before it shows, so neighbours never trade places.
+        const MODEL_BOX_CLEARANCE = 12;
+        // Longest a model's label stays hidden waiting to learn whether it has a box, before showing its ring anyway.
+        const MODEL_BOX_WAIT = 1500;
+        // Half the length of edge drawn either side of where a stem lands, when brackets would leave it bare.
+        const MODEL_BOX_LANDING = 10;
+        // Past this many touching boxes one box around them all stands in for tracing their union.
+        const MODEL_BOX_UNION_LIMIT = 24;
+        // Corner pairs of each box edge. Corner i sits on the +X side when bit 0 is set, +Y for bit 1, +Z for bit 2.
+        const MODEL_BOX_EDGES = [[0, 1], [2, 3], [4, 5], [6, 7], [0, 2], [1, 3], [4, 6], [5, 7], [0, 4], [1, 5], [2, 6], [3, 7]];
         // 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.
@@ -5537,8 +5555,6 @@
         EntityLabel.ATTACH_KEY = "nextspace-navigator-entity-label";
         // Image types a label draws, read from the file extension. Anything else stays text.
         const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "bmp", "svg", "webp"];
-        // Shortest side a thumbnail needs before it is preferred over the full file.
-        const IMAGE_THUMBNAIL_MIN = 64;
         // Size a found image is drawn at when the group names none, so a photo never lands at its natural size.
         const IMAGE_SIZE = 24;
         function isImageFile(name) {
@@ -5567,12 +5583,24 @@
             return (url.protocol === "http:" || url.protocol === "https:") && isImageFile(url.pathname);
         }
         EntityLabel.IsImageUrl = IsImageUrl;
+        /*
+         * Device pixels across a photo needs to stay sharp at a chip size, at rest or grown on hover.
+         */
+        function photoPixels(size, hover) {
+            // The glyph plus the chip's padding of a third either side, enlarged for a photo.
+            const diameter = (size + 2 * (size / 3)) * PHOTO_SIZE_SCALE;
+            // Picking an image can run with no window, where a screen pixel is a CSS pixel.
+            const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+            return Math.ceil(diameter * (hover ? PHOTO_HOVER_SCALE : 1) * ratio);
+        }
         /*
          * The entity's default image as InfoView picks it: its first photo attachment by display order that is an image file.
-         * Reads attachments expanded onto the entity, and prefers the smallest thumbnail that still covers an icon.
+         *
+         * Reads attachments expanded onto the entity. Prefers the smallest thumbnail sharp at the hover size, then the
+         * largest still sharp at rest, so a low resolution thumbnail is never stretched while the full file is unread.
          */
         function GetDefaultImageUrl(entity, api) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const attachments = (_b = (_a = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _a === void 0 ? void 0 : _a.Attachment) !== null && _b !== void 0 ? _b : [];
             const photo = attachments
                 .filter(x => (x === null || x === void 0 ? void 0 : x["EntityAttachmentType.ID"]) == BModels.EntityAttachmentType.EType.Photo && x.ClientFile)
@@ -5581,9 +5609,12 @@
             if (!photo) {
                 return null;
             }
-            const thumbnail = ((_c = photo.ClientFile.Thumbnails) !== null && _c !== void 0 ? _c : [])
-                .filter(x => Math.min(x.Width, x.Height) >= IMAGE_THUMBNAIL_MIN && (x.URL || x["ClientFile.ID"]))
-                .sort((a, b) => a.Width * a.Height - b.Width * b.Height)[0];
+            // How far across a thumbnail is shown: a circle crops to its shortest side, a rectangle keeps its longest.
+            const across = (x) => PhotoShape(x.Width, x.Height) === "circle" ? Math.min(x.Width, x.Height) : Math.max(x.Width, x.Height);
+            const thumbnails = ((_c = photo.ClientFile.Thumbnails) !== null && _c !== void 0 ? _c : [])
+                .filter(x => x.Width > 0 && x.Height > 0 && (x.URL || x["ClientFile.ID"]))
+                .sort((a, b) => a.Width * a.Height - b.Width * b.Height);
+            const thumbnail = (_d = thumbnails.find(x => across(x) >= photoPixels(IMAGE_SIZE, true))) !== null && _d !== void 0 ? _d : thumbnails.reverse().find(x => across(x) >= photoPixels(IMAGE_SIZE, false));
             if (thumbnail) {
                 return thumbnail.URL || BModels.ClientFile.GetUrl({ fileId: thumbnail["ClientFile.ID"], api, viaCdn: true });
             }
@@ -6095,6 +6126,7 @@
                 // Participants whose failure has been logged, so a label that throws every frame logs once.
                 this.failed = new WeakSet();
                 this.placementMemory = new PlacementMemory();
+                this.modelBoxes = new ModelBoxes();
                 this.forwardingWheel = false;
                 this.pendingDrag = null;
                 // Null outside a 3D view.
@@ -6333,6 +6365,12 @@
                         x: (pointer.x - rect.left) * this.viewer.canvas.clientWidth / rect.width,
                         y: (pointer.y - rect.top) * this.viewer.canvas.clientHeight / rect.height
                     } : undefined;
+                try {
+                    this.modelBoxes.Resolve(this.viewer, this.pointer);
+                }
+                catch (e) {
+                    console.error("EntityLabel: model boxes failed to resolve.", e);
+                }
                 // This runs inside Cesium's frame, where one throwing label would stop rendering for the whole scene.
                 const projected = new Map();
                 for (const participant of this.participants) {
@@ -6354,6 +6392,12 @@
                         this.logFailure(participant, e);
                     }
                 }
+                try {
+                    this.modelBoxes.Draw(this.viewer, this.element, this.coordinates);
+                }
+                catch (e) {
+                    console.error("EntityLabel: model boxes failed to draw.", e);
+                }
             }
             logFailure(participant, error) {
                 if (this.failed.has(participant)) {
@@ -6364,6 +6408,728 @@
             }
         }
         let nextLabelId = 0;
+        /*
+         * The record's oriented box in the same Z-up local space as GeometryPivot, or null when it has none.
+         */
+        function ReadOrientedBox(entity) {
+            var _a, _b;
+            const box = (_a = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _a === void 0 ? void 0 : _a.GeometryOrientedBox;
+            const vector = (value) => (value === null || value === void 0 ? void 0 : value.length) === 3 && value.every((item) => Number.isFinite(+item)) ? value.map(Number) : null;
+            const centre = vector(box === null || box === void 0 ? void 0 : box.Centre), half = vector(box === null || box === void 0 ? void 0 : box.HalfExtents);
+            const axes = ((_b = box === null || box === void 0 ? void 0 : box.Axes) === null || _b === void 0 ? void 0 : _b.length) === 3 ? box.Axes.map(vector) : null;
+            return centre && half && (axes === null || axes === void 0 ? void 0 : axes.every(Boolean)) ? { centre, axes, half } : null;
+        }
+        EntityLabel.ReadOrientedBox = ReadOrientedBox;
+        /*
+         * The eight padded world corners of an assembly Entity's geometry box, or null when the record cannot give one.
+         *
+         * GeometryPivotExtents are Z-up half-extents about GeometryPivot, and the placement is the one the API uses to put
+         * Bruce.Location at the pivot: ENU(root) * UCS translation * UCS rotation * AssemblyWorldPosition.
+         */
+        function GetModelBox(entity, shape) {
+            var _a, _b, _c;
+            const bruce = entity === null || entity === void 0 ? void 0 : entity.Bruce;
+            const half = (_b = (_a = bruce === null || bruce === void 0 ? void 0 : bruce.GeometryPivotExtents) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, Number);
+            const matrix = bruce === null || bruce === void 0 ? void 0 : bruce.AssemblyWorldPosition;
+            const root = bruce === null || bruce === void 0 ? void 0 : bruce.AssemblyRootLocation;
+            if ((half === null || half === void 0 ? void 0 : half.length) !== 3 || !half.every(value => Number.isFinite(value) && value >= 0) || Math.max(...half) < 0.01) {
+                return null;
+            }
+            if ((matrix === null || matrix === void 0 ? void 0 : matrix.length) !== 4 || !matrix.every(row => (row === null || row === void 0 ? void 0 : row.length) === 4) || !Number.isFinite(+(root === null || root === void 0 ? void 0 : root.latitude)) || !Number.isFinite(+(root === null || root === void 0 ? void 0 : root.longitude))) {
+                return null;
+            }
+            const pivot = ((_c = bruce.GeometryPivot) === null || _c === void 0 ? void 0 : _c.length) >= 3 ? bruce.GeometryPivot.slice(0, 3).map(Number) : [0, 0, 0];
+            // Without an oriented box the record's own extents are an axis-aligned box about the pivot.
+            const box = shape || { centre: pivot, axes: [[1, 0, 0], [0, 1, 0], [0, 0, 1]], half: half };
+            const transform = bruce.AssemblyWorldTransform;
+            const placement = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(+root.longitude, +root.latitude, EnsureNumber(root.altitude)));
+            Cesium.Matrix4.multiply(placement, Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.x), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.y), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.z))), placement);
+            Cesium.Matrix4.multiply(placement, Cesium.Matrix4.fromRotation(Cesium.Matrix3.fromHeadingPitchRoll(Cesium.HeadingPitchRoll.fromDegrees(EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.heading), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.pitch), EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.roll)))), placement);
+            Cesium.Matrix4.multiply(placement, new Cesium.Matrix4(...matrix.flat().map(Number)), placement);
+            // Pad thin axes by a share of the longest one, so a flat part still gets a visible gap.
+            const longest = Math.max(...box.half);
+            const reach = box.half.map(value => value + Math.max(value, longest * 0.25) * MODEL_BOX_PADDING);
+            const corners = [];
+            for (let i = 0; i < 8; i++) {
+                const signs = [i & 1 ? 1 : -1, i & 2 ? 1 : -1, i & 4 ? 1 : -1];
+                const local = new Cesium.Cartesian3(...[0, 1, 2].map(k => box.centre[k] +
+                    signs[0] * reach[0] * box.axes[0][k] + signs[1] * reach[1] * box.axes[1][k] + signs[2] * reach[2] * box.axes[2][k]));
+                const corner = Cesium.Matrix4.multiplyByPoint(placement, local, new Cesium.Cartesian3());
+                if (![corner.x, corner.y, corner.z].every(Number.isFinite)) {
+                    return null;
+                }
+                corners.push(corner);
+            }
+            return corners;
+        }
+        EntityLabel.GetModelBox = GetModelBox;
+        const vAdd = (a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+        const vSub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+        const vScale = (a, s) => [a[0] * s, a[1] * s, a[2] * s];
+        const vDot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+        const vCross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+        const vLength = (a) => Math.hypot(a[0], a[1], a[2]);
+        /*
+         * Reads a solid back from the eight corners GetModelBox gives, relative to the origin.
+         */
+        function ModelSolid(corners, origin) {
+            const local = corners.map((corner) => [corner.x - origin.x, corner.y - origin.y, corner.z - origin.z]);
+            const spans = [1, 2, 4].map(bit => vSub(local[bit], local[0]));
+            const half = spans.map(span => vLength(span) / 2);
+            return {
+                centre: vScale(vAdd(local[0], local[7]), 0.5),
+                axes: spans.map((span, k) => vScale(span, 0.5 / (half[k] || 1))),
+                half
+            };
+        }
+        EntityLabel.ModelSolid = ModelSolid;
+        function solidCorners(solid) {
+            const corners = [];
+            for (let i = 0; i < 8; i++) {
+                corners.push([0, 1, 2].reduce((point, k) => vAdd(point, vScale(solid.axes[k], solid.half[k] * (i & (1 << k) ? 1 : -1))), solid.centre));
+            }
+            return corners;
+        }
+        function solidContains(solid, point, inset = 0) {
+            const offset = vSub(point, solid.centre);
+            return solid.axes.every((axis, k) => Math.abs(vDot(offset, axis)) < solid.half[k] - inset);
+        }
+        /*
+         * Whether two solids overlap, by the separating axis test. Padding makes parts that sit against each other overlap.
+         */
+        function ModelSolidsTouch(a, b) {
+            const between = vSub(b.centre, a.centre);
+            const axes = [...a.axes, ...b.axes];
+            for (const first of a.axes) {
+                for (const second of b.axes) {
+                    const axis = vCross(first, second);
+                    const length = vLength(axis);
+                    if (length > 1e-6)
+                        axes.push(vScale(axis, 1 / length));
+                }
+            }
+            const reach = (solid, axis) => solid.axes.reduce((sum, own, k) => sum + solid.half[k] * Math.abs(vDot(own, axis)), 0);
+            return axes.every(axis => Math.abs(vDot(between, axis)) <= reach(a, axis) + reach(b, axis));
+        }
+        EntityLabel.ModelSolidsTouch = ModelSolidsTouch;
+        /*
+         * One box around every solid, turned like the largest of them, for groups too big to trace.
+         */
+        function encloseSolids(solids) {
+            const largest = solids.reduce((best, solid) => solid.half[0] * solid.half[1] * solid.half[2] > best.half[0] * best.half[1] * best.half[2] ? solid : best);
+            const corners = solids.flatMap(solidCorners);
+            const ranges = largest.axes.map(axis => {
+                const values = corners.map(corner => vDot(corner, axis));
+                return [Math.min(...values), Math.max(...values)];
+            });
+            return {
+                centre: largest.axes.reduce((point, axis, k) => vAdd(point, vScale(axis, (ranges[k][0] + ranges[k][1]) / 2)), [0, 0, 0]),
+                axes: largest.axes,
+                half: ranges.map(([low, high]) => (high - low) / 2)
+            };
+        }
+        /*
+         * Narrows [low, high] to where a + b * t stays within -half..half.
+         */
+        function clipSlab(range, a, b, half) {
+            if (Math.abs(b) < 1e-12) {
+                if (Math.abs(a) > half)
+                    range[1] = -Infinity;
+                return;
+            }
+            const first = (-half - a) / b, second = (half - a) / b;
+            range[0] = Math.max(range[0], Math.min(first, second));
+            range[1] = Math.min(range[1], Math.max(first, second));
+        }
+        /*
+         * The edges of the union of the solids: where its surface folds, leaving out seams across flat shared faces.
+         */
+        function ModelBoxOutline(solids) {
+            const span = Math.max(...solids.map(solid => vLength(solid.half)));
+            const thinnest = Math.min(...solids.flatMap(solid => solid.half));
+            const radius = Math.max(1e-6, Math.min(thinnest * 0.05, span * 1e-3));
+            const tolerance = Math.max(1, span) * 1e-6;
+            const candidates = [];
+            for (const solid of solids) {
+                const corners = solidCorners(solid);
+                for (const [a, b] of MODEL_BOX_EDGES)
+                    candidates.push([corners[a], corners[b]]);
+            }
+            const faces = (solid) => [0, 1, 2].flatMap(k => [1, -1].map(sign => ({ solid, k, normal: vScale(solid.axes[k], sign) })));
+            for (let i = 0; i < solids.length; i++) {
+                for (let j = i + 1; j < solids.length; j++) {
+                    if (!ModelSolidsTouch(solids[i], solids[j])) {
+                        continue;
+                    }
+                    for (const first of faces(solids[i])) {
+                        for (const second of faces(solids[j])) {
+                            const direction = vCross(first.normal, second.normal);
+                            const sine = vLength(direction);
+                            // Faces this close to parallel meet along edges the box edges already give.
+                            if (sine < 0.05) {
+                                continue;
+                            }
+                            const d1 = vDot(first.normal, first.solid.centre) + first.solid.half[first.k];
+                            const d2 = vDot(second.normal, second.solid.centre) + second.solid.half[second.k];
+                            const cosine = vDot(first.normal, second.normal);
+                            const base = vScale(vAdd(vScale(first.normal, d1 - d2 * cosine), vScale(second.normal, d2 - d1 * cosine)), 1 / (sine * sine));
+                            const unit = vScale(direction, 1 / sine);
+                            const range = [-Infinity, Infinity];
+                            for (const face of [first, second]) {
+                                const offset = vSub(base, face.solid.centre);
+                                for (let m = 0; m < 3; m++) {
+                                    if (m !== face.k)
+                                        clipSlab(range, vDot(offset, face.solid.axes[m]), vDot(unit, face.solid.axes[m]), face.solid.half[m]);
+                                }
+                            }
+                            if (range[1] - range[0] > tolerance) {
+                                candidates.push([vAdd(base, vScale(unit, range[0])), vAdd(base, vScale(unit, range[1]))]);
+                            }
+                        }
+                    }
+                }
+            }
+            const inside = (point) => solids.some(solid => solidContains(solid, point));
+            /*
+             * Whether the union folds along a direction at a point, from which way round it the inside lies.
+             */
+            const folds = (point, along) => {
+                const first = vCross(along, Math.abs(along[0]) < 0.9 ? [1, 0, 0] : [0, 1, 0]);
+                const e1 = vScale(first, 1 / vLength(first));
+                const e2 = vCross(along, e1);
+                const samples = [];
+                for (let i = 0; i < 16; i++) {
+                    // Offset from the axes so no sample lands exactly on a face through the point.
+                    const angle = (i + 0.37) * Math.PI / 8;
+                    samples.push(inside(vAdd(point, vAdd(vScale(e1, Math.cos(angle) * radius), vScale(e2, Math.sin(angle) * radius)))));
+                }
+                const filled = samples.filter(Boolean).length;
+                const changes = samples.filter((sample, i) => sample !== samples[(i + 1) % 16]).length;
+                return filled > 0 && filled < 16 && !(filled === 8 && changes === 2);
+            };
+            const lines = [];
+            for (const [start, end] of candidates) {
+                const delta = vSub(end, start);
+                const length = vLength(delta);
+                if (length < tolerance) {
+                    continue;
+                }
+                const along = vScale(delta, 1 / length);
+                const cuts = [0, 1];
+                for (const solid of solids) {
+                    const offset = vSub(start, solid.centre);
+                    solid.axes.forEach((axis, k) => {
+                        const rate = vDot(delta, axis);
+                        if (Math.abs(rate) < 1e-12)
+                            return;
+                        for (const bound of [-solid.half[k], solid.half[k]]) {
+                            const t = (bound - vDot(offset, axis)) / rate;
+                            if (t > 0 && t < 1)
+                                cuts.push(t);
+                        }
+                    });
+                }
+                cuts.sort((a, b) => a - b);
+                for (let i = 0; i + 1 < cuts.length; i++) {
+                    if ((cuts[i + 1] - cuts[i]) * length < tolerance || !folds(vAdd(start, vScale(delta, (cuts[i] + cuts[i + 1]) / 2)), along)) {
+                        continue;
+                    }
+                    // Merged by line, so a shared edge draws once and a run cut by other boxes is one stroke.
+                    const from = vAdd(start, vScale(delta, cuts[i])), to = vAdd(start, vScale(delta, cuts[i + 1]));
+                    let line = lines.find(item => vLength(vCross(item.direction, along)) < 1e-6 && vLength(vCross(vSub(from, item.origin), item.direction)) < tolerance);
+                    if (!line) {
+                        line = { origin: from, direction: along, spans: [] };
+                        lines.push(line);
+                    }
+                    const a = vDot(vSub(from, line.origin), line.direction), b = vDot(vSub(to, line.origin), line.direction);
+                    line.spans.push([Math.min(a, b), Math.max(a, b)]);
+                }
+            }
+            const outline = [];
+            for (const line of lines) {
+                line.spans.sort((a, b) => a[0] - b[0]);
+                let current = line.spans[0];
+                for (const next of [...line.spans.slice(1), null]) {
+                    if (next && next[0] <= current[1] + tolerance) {
+                        current = [current[0], Math.max(current[1], next[1])];
+                        continue;
+                    }
+                    outline.push([vAdd(line.origin, vScale(line.direction, current[0])), vAdd(line.origin, vScale(line.direction, current[1]))]);
+                    current = next;
+                }
+            }
+            return outline;
+        }
+        EntityLabel.ModelBoxOutline = ModelBoxOutline;
+        /*
+         * Whether the sight line from the eye to a point passes through any solid before reaching it.
+         */
+        function solidsHide(solids, eye, point, inset) {
+            const ray = vSub(point, eye);
+            const length = vLength(ray);
+            // Stop just short of the point so the face it lies on does not count against it.
+            const reach = Math.max(0, 1 - inset * 100 / (length || 1));
+            return solids.some(solid => {
+                const offset = vSub(eye, solid.centre);
+                const range = [0, reach];
+                solid.axes.forEach((axis, k) => clipSlab(range, vDot(offset, axis), vDot(ray, axis), solid.half[k] - inset));
+                return range[0] < range[1];
+            });
+        }
+        /*
+         * Window positions of a box's corners, or null when one is behind the camera and the box would draw inside out.
+         */
+        function projectCorners(viewer, corners) {
+            const camera = viewer.camera;
+            const cameraPosition = camera.positionWC || camera.position;
+            const direction = camera.directionWC || camera.direction;
+            const transforms = Cesium.SceneTransforms;
+            const projectPosition = transforms.wgs84ToWindowCoordinates || transforms.worldToWindowCoordinates;
+            const points = [];
+            const relative = new Cesium.Cartesian3();
+            for (const corner of corners) {
+                if (Cesium.Cartesian3.dot(Cesium.Cartesian3.subtract(corner, cameraPosition, relative), direction) <= 0) {
+                    return null;
+                }
+                const point = projectPosition(viewer.scene, corner);
+                if (!Number.isFinite(point === null || point === void 0 ? void 0 : point.x) || !Number.isFinite(point === null || point === void 0 ? void 0 : point.y)) {
+                    return null;
+                }
+                points.push({ x: point.x, y: point.y });
+            }
+            return points;
+        }
+        /*
+         * Whether two convex outlines come within a margin of each other, by the separating axis test.
+         */
+        function HullsNear(a, b, margin) {
+            for (const hull of [a, b]) {
+                for (let i = 0; i < hull.length; i++) {
+                    const from = hull[i], to = hull[(i + 1) % hull.length];
+                    const length = Math.hypot(to.x - from.x, to.y - from.y);
+                    if (length < 1e-9) {
+                        continue;
+                    }
+                    const normal = { x: (from.y - to.y) / length, y: (to.x - from.x) / length };
+                    const project = (points) => points.map(point => point.x * normal.x + point.y * normal.y);
+                    const first = project(a), second = project(b);
+                    if (Math.max(Math.min(...second) - Math.max(...first), Math.min(...first) - Math.max(...second)) >= margin) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        EntityLabel.HullsNear = HullsNear;
+        /*
+         * Decides which labels' model boxes are drawn and how, so a multi-selection does not stack box over box.
+         */
+        class ModelBoxes {
+            constructor() {
+                // Whether a box competes for space comes only from inputs (camera distance, hover, the pointer), never from
+                // how its label was laid out, so an animation moving a label cannot feed back into which boxes show.
+                this.entries = new Map();
+                this.groups = null;
+                // The hovered Entity. Its box is drawn on its own and whole, ahead of every other box.
+                this.hovered = null;
+                this.outlines = new Map();
+                this.hulls = new Map();
+                this.frames = new Map();
+                this.drawn = [];
+                // When each label's box started showing; the longer it has shown, the stronger its claim on the space.
+                this.since = new Map();
+                this.requests = new Map();
+                this.looks = new Map();
+                this.memberLooks = new Map();
+            }
+            Set(id, corners, entityId, inputs) {
+                const current = this.entries.get(id);
+                // A label rebuilt over the same box keeps its place and how far it has animated.
+                if (corners && (current === null || current === void 0 ? void 0 : current.corners) === corners && current.entityId === entityId) {
+                    Object.assign(current, inputs);
+                    return;
+                }
+                if (!corners && !current) {
+                    return;
+                }
+                if (corners) {
+                    this.entries.set(id, { ...inputs, corners, entityId, active: false, wanted: false });
+                }
+                else
+                    this.entries.delete(id);
+                this.since.delete(id);
+                this.groups = null;
+                for (const [key, group] of this.outlines) {
+                    if (group.members.includes(id))
+                        this.outlines.delete(key);
+                }
+            }
+            /*
+             * The box drawn for a label this frame, or undefined when it has none or lost its place.
+             */
+            Frame(id) {
+                return this.frames.get(id);
+            }
+            /*
+             * The label's own box on screen whether or not it is drawn, so hovering the model can ask for it.
+             */
+            Hull(id) {
+                return this.hulls.get(id);
+            }
+            Request(id, request) {
+                this.requests.set(id, request);
+            }
+            group() {
+                const ids = Array.from(this.entries.keys()).filter(id => this.entries.get(id).wanted).sort();
+                if (!ids.length) {
+                    return [];
+                }
+                const origin = this.entries.get(ids[0]).corners[0];
+                const solids = new Map(ids.map(id => [id, ModelSolid(this.entries.get(id).corners, origin)]));
+                const parent = new Map(ids.map(id => [id, id]));
+                const root = (id) => parent.get(id) === id ? id : root(parent.get(id));
+                for (let i = 0; i < ids.length; i++) {
+                    const a = solids.get(ids[i]);
+                    for (let j = i + 1; j < ids.length; j++) {
+                        const b = solids.get(ids[j]);
+                        if ((this.entries.get(ids[i]).entityId === this.hovered) !== (this.entries.get(ids[j]).entityId === this.hovered)) {
+                            continue;
+                        }
+                        // Cheap sphere check first; most pairs in a scene are nowhere near each other.
+                        if (vLength(vSub(a.centre, b.centre)) > vLength(a.half) + vLength(b.half) || !ModelSolidsTouch(a, b)) {
+                            continue;
+                        }
+                        parent.set(root(ids[j]), root(ids[i]));
+                    }
+                }
+                const members = new Map();
+                for (const id of ids) {
+                    const key = root(id);
+                    if (!members.has(key))
+                        members.set(key, []);
+                    members.get(key).push(id);
+                }
+                const groups = Array.from(members.values()).map(list => {
+                    const key = list.join("|");
+                    let group = this.outlines.get(key);
+                    if (!group) {
+                        const groupOrigin = this.entries.get(list[0]).corners[0];
+                        const parts = list.map(id => ModelSolid(this.entries.get(id).corners, groupOrigin));
+                        const solidsShown = parts.length > MODEL_BOX_UNION_LIMIT ? [encloseSolids(parts)] : parts;
+                        group = { key, members: list, hovered: false, origin: groupOrigin, solids: solidsShown, outline: ModelBoxOutline(solidsShown) };
+                    }
+                    group.hovered = this.entries.get(list[0]).entityId === this.hovered;
+                    return group;
+                });
+                // Kept across hover changes, so pulling a part out and putting it back does not trace the union again.
+                const kept = Array.from(this.outlines.values()).filter(group => !groups.includes(group)).slice(-8);
+                this.outlines = new Map([...kept, ...groups].map(group => [group.key, group]));
+                return groups;
+            }
+            /*
+             * Projects every box for this frame and settles which outlines are drawn, before labels place their stems.
+             */
+            Resolve(viewer, pointer) {
+                var _a, _b, _c, _d;
+                this.frames.clear();
+                this.hulls.clear();
+                this.drawn = [];
+                const points = new Map();
+                for (const [id, entry] of this.entries) {
+                    const projected = projectCorners(viewer, entry.corners);
+                    if (projected) {
+                        points.set(id, projected);
+                        this.hulls.set(id, convexHull(projected));
+                    }
+                }
+                // The application's hover, which is what its temporary label shows, decides first. Without one the
+                // pointer does: the part it is on holds until it leaves, else the smallest box under it wins.
+                const under = Array.from(this.hulls.entries()).filter(([, hull]) => pointer && hullContains(hull, pointer));
+                let hovered = (_b = (_a = Array.from(this.entries.values()).find(entry => { var _a; return (_a = entry.hovered) === null || _a === void 0 ? void 0 : _a.call(entry); })) === null || _a === void 0 ? void 0 : _a.entityId) !== null && _b !== void 0 ? _b : (under.some(([id]) => this.entries.get(id).entityId === this.hovered) ? this.hovered : null);
+                if (!hovered && under.length) {
+                    hovered = this.entries.get(under.map(([id, hull]) => ({ id, area: hullArea(hull) })).sort((a, b) => a.area - b.area || a.id.localeCompare(b.id))[0].id).entityId;
+                }
+                if (hovered !== this.hovered) {
+                    this.hovered = hovered;
+                    this.groups = null;
+                }
+                for (const [id, entry] of this.entries) {
+                    const hull = this.hulls.get(id);
+                    entry.active = Boolean(((_c = entry.near) === null || _c === void 0 ? void 0 : _c.call(entry)) || entry.entityId === hovered || (pointer && hull && hullContains(hull, pointer)));
+                    // A box keeps its place while it fades out, and leaves the competition once it has.
+                    const wanted = entry.active || ((_d = this.memberLooks.get(id)) === null || _d === void 0 ? void 0 : _d.shown) > 0.01;
+                    if (wanted !== entry.wanted) {
+                        entry.wanted = wanted;
+                        this.groups = null;
+                    }
+                }
+                if (!this.groups) {
+                    this.groups = this.group();
+                }
+                const canvas = viewer.canvas;
+                const candidates = [];
+                for (const group of this.groups) {
+                    if (!group.members.every(id => points.has(id))) {
+                        continue;
+                    }
+                    const all = group.members.flatMap(id => points.get(id));
+                    const xs = all.map(point => point.x), ys = all.map(point => point.y);
+                    const width = Math.max(...xs) - Math.min(...xs), height = Math.max(...ys) - Math.min(...ys);
+                    if (Math.max(width, height) < MODEL_BOX_MIN_SIZE || width > canvas.clientWidth * 2 || height > canvas.clientHeight * 2) {
+                        continue;
+                    }
+                    const since = Math.min(...group.members.map(id => { var _a; return (_a = this.since.get(id)) !== null && _a !== void 0 ? _a : Infinity; }));
+                    const outline = convexHull(all);
+                    candidates.push({ group, outline, selected: group.members.some(id => { var _a, _b; return (_b = (_a = this.entries.get(id)).selected) === null || _b === void 0 ? void 0 : _b.call(_a); }), since, area: hullArea(outline) });
+                }
+                // Between boxes appearing together the larger on screen goes first, as the one the view is about.
+                // What the user points at now outranks what they selected before it.
+                candidates.sort((a, b) => (Number(b.group.hovered) - Number(a.group.hovered) ||
+                    Number(b.selected) - Number(a.selected) ||
+                    a.since - b.since ||
+                    b.area - a.area ||
+                    a.group.key.localeCompare(b.group.key)));
+                const transforms = Cesium.SceneTransforms;
+                const projectPosition = transforms.wgs84ToWindowCoordinates || transforms.worldToWindowCoordinates;
+                const scratch = new Cesium.Cartesian3();
+                const now = Date.now();
+                const shown = new Set();
+                for (const candidate of candidates) {
+                    // A showing box holds its place until truly overlapped; a waiting one needs clear space.
+                    const margin = Number.isFinite(candidate.since) ? 0 : MODEL_BOX_CLEARANCE;
+                    if (this.drawn.some(other => HullsNear(candidate.outline, other.outline, margin))) {
+                        continue;
+                    }
+                    const { origin } = candidate.group;
+                    const toScreen = (point) => {
+                        const projected = projectPosition(viewer.scene, Cesium.Cartesian3.fromElements(origin.x + point[0], origin.y + point[1], origin.z + point[2], scratch));
+                        return { x: projected.x, y: projected.y };
+                    };
+                    const edges = candidate.group.outline.map(([start, end]) => [toScreen(start), toScreen(end)]);
+                    const drawn = { ...candidate, edges, landings: [] };
+                    this.drawn.push(drawn);
+                    for (const id of candidate.group.members) {
+                        shown.add(id);
+                        if (!this.since.has(id))
+                            this.since.set(id, now);
+                        const own = points.get(id);
+                        // The silhouette's top is the highest drawn edge at that x, so the stem always meets a line.
+                        const x = (Math.min(...own.map(point => point.x)) + Math.max(...own.map(point => point.x))) / 2;
+                        let anchor = null, edge = -1;
+                        edges.forEach(([a, b], i) => {
+                            if (x < Math.min(a.x, b.x) || x > Math.max(a.x, b.x) || Math.abs(b.x - a.x) < 1e-6) {
+                                return;
+                            }
+                            const y = a.y + (b.y - a.y) * (x - a.x) / (b.x - a.x);
+                            if (!anchor || y < anchor.y) {
+                                anchor = { x, y };
+                                edge = i;
+                            }
+                        });
+                        anchor = anchor || { x, y: hullTop(candidate.outline, x) };
+                        if (edge >= 0)
+                            drawn.landings.push({ edge, point: anchor });
+                        this.frames.set(id, { points: own, hull: this.hulls.get(id), outline: candidate.outline, anchor, group: candidate.group.key });
+                    }
+                }
+                for (const id of Array.from(this.since.keys())) {
+                    if (!shown.has(id))
+                        this.since.delete(id);
+                }
+                this.requests.clear();
+            }
+            /*
+             * Draws each settled outline as corner brackets that grow into whole edges, back edges dashed.
+             */
+            Draw(viewer, element, coordinates) {
+                var _a, _b, _c;
+                const now = Date.now();
+                const looks = new Map();
+                const memberLooks = new Map();
+                let animating = false;
+                for (const { group } of this.drawn) {
+                    const requests = group.members.map(id => this.requests.get(id)).filter(Boolean);
+                    if (!requests.length) {
+                        // Its labels are hidden this frame, perhaps off screen; it keeps its look so it does not regrow.
+                        const kept = this.looks.get(group.key);
+                        if (kept) {
+                            looks.set(group.key, kept);
+                            group.members.forEach(id => memberLooks.set(id, kept));
+                            if (kept.svg)
+                                kept.svg.style.display = "none";
+                        }
+                        continue;
+                    }
+                    // A group that gained or lost a member carries on from where its members' outline was.
+                    const previous = group.members.map(id => this.memberLooks.get(id)).filter(Boolean);
+                    const look = (_a = this.looks.get(group.key)) !== null && _a !== void 0 ? _a : {
+                        shown: Math.max(0, ...previous.map(item => item.shown)), whole: Math.max(0, ...previous.map(item => item.whole)),
+                        grow: Math.max(0, ...previous.map(item => item.grow)), time: now, svg: (_b = previous.find(item => item.svg)) === null || _b === void 0 ? void 0 : _b.svg
+                    };
+                    const elapsed = Math.min(32, Math.max(0, now - look.time));
+                    const duration = Math.min(...requests.map(request => request.duration));
+                    const blend = duration > 0 ? 1 - Math.exp(-elapsed / (duration / 3)) : 1;
+                    const approach = (value, to) => Math.abs(value - to) < 0.001 ? to : value + (to - value) * blend;
+                    const shownTarget = group.members.some(id => { var _a; return (_a = this.entries.get(id)) === null || _a === void 0 ? void 0 : _a.active; }) ? 1 : 0;
+                    const wholeTarget = group.hovered || requests.some(request => request.whole) ? 1 : 0;
+                    look.shown = approach(look.shown, shownTarget);
+                    look.whole = approach(look.whole, wholeTarget);
+                    look.grow = approach(look.grow, 1);
+                    look.time = now;
+                    animating = animating || look.shown !== shownTarget || look.whole !== wholeTarget || look.grow !== 1;
+                    looks.set(group.key, look);
+                    group.members.forEach(id => memberLooks.set(id, look));
+                    if (look.svg && this.looks.get(group.key) !== look) {
+                        // Inherited from an earlier group; claim it so that group's cleanup leaves it alone.
+                        for (const [key, other] of this.looks) {
+                            if (other.svg === look.svg && key !== group.key)
+                                other.svg = undefined;
+                        }
+                    }
+                    this.drawGroup(viewer, element, coordinates, this.drawn.find(item => item.group === group), look, requests);
+                }
+                for (const [key, look] of this.looks) {
+                    if (!looks.has(key))
+                        (_c = look.svg) === null || _c === void 0 ? void 0 : _c.remove();
+                }
+                this.looks = looks;
+                this.memberLooks = memberLooks;
+                if (animating) {
+                    viewer.scene.requestRender();
+                }
+            }
+            drawGroup(viewer, element, coordinates, drawn, look, requests) {
+                const group = drawn.group;
+                let svg = look.svg;
+                if (!svg) {
+                    const ns = "http://www.w3.org/2000/svg";
+                    svg = document.createElementNS(ns, "svg");
+                    svg.setAttribute("class", "entity-label-model-box");
+                    svg.setAttribute("aria-hidden", "true");
+                    svg.style.cssText = "position:absolute;width:1px;height:1px;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));";
+                    for (const edges of ["back", "front"]) {
+                        const path = document.createElementNS(ns, "path");
+                        path.setAttribute("fill", "none");
+                        path.setAttribute("stroke-linecap", "round");
+                        path.dataset.edges = edges;
+                        svg.appendChild(path);
+                    }
+                    look.svg = svg;
+                }
+                if (svg.parentElement !== element) {
+                    element.appendChild(svg);
+                }
+                svg.style.display = "";
+                const transforms = Cesium.SceneTransforms;
+                const projectPosition = transforms.wgs84ToWindowCoordinates || transforms.worldToWindowCoordinates;
+                const origin = group.origin;
+                const scratch = new Cesium.Cartesian3();
+                // A new box grows out of the ring it replaces.
+                const grown = look.grow * look.grow * (3 - 2 * look.grow);
+                const from = requests[0].from;
+                const at = (point) => `${(from.x + (point.x - from.x) * grown) * coordinates.scaleX} ${(from.y + (point.y - from.y) * grown) * coordinates.scaleY}`;
+                const toScreen = (point) => {
+                    const projected = projectPosition(viewer.scene, Cesium.Cartesian3.fromElements(origin.x + point[0], origin.y + point[1], origin.z + point[2], scratch));
+                    return at(projected);
+                };
+                const camera = viewer.camera.positionWC || viewer.camera.position;
+                const eye = [camera.x - origin.x, camera.y - origin.y, camera.z - origin.z];
+                const span = Math.max(...group.solids.map(solid => vLength(solid.half)));
+                const inset = Math.max(1, span) * 1e-6;
+                const fraction = MODEL_BOX_BRACKET + (0.5 - MODEL_BOX_BRACKET) * look.whole;
+                const parts = fraction >= 0.499 ? [[0, 1]] : [[0, fraction], [1 - fraction, 1]];
+                const paths = { front: "", back: "" };
+                for (const [start, end] of group.outline) {
+                    const delta = vSub(end, start);
+                    // Sample visibility along the edge, since another member can hide part of it.
+                    const steps = group.solids.length > 1 ? Math.min(24, Math.max(2, Math.ceil(vLength(delta) / span * 12))) : 1;
+                    const visible = [];
+                    for (let i = 0; i < steps; i++) {
+                        visible.push(!solidsHide(group.solids, eye, vAdd(start, vScale(delta, (i + 0.5) / steps)), inset));
+                    }
+                    for (const [from, to] of parts) {
+                        let runStart = from;
+                        for (let i = Math.floor(from * steps); i < steps && i / steps < to; i++) {
+                            const runEnd = Math.min(to, (i + 1) / steps);
+                            if (runEnd < to && visible[i + 1] === visible[i]) {
+                                continue;
+                            }
+                            paths[visible[i] ? "front" : "back"] += `M${toScreen(vAdd(start, vScale(delta, runStart)))}L${toScreen(vAdd(start, vScale(delta, runEnd)))}`;
+                            runStart = runEnd;
+                        }
+                    }
+                }
+                // Each stem lands on an edge, which brackets may leave bare, so a short piece of it is drawn there.
+                if (fraction < 0.499) {
+                    for (const { edge, point } of drawn.landings) {
+                        const [a, b] = drawn.edges[edge];
+                        const length = Math.hypot(b.x - a.x, b.y - a.y);
+                        const reach = Math.min(MODEL_BOX_LANDING, length / 2);
+                        const toward = (sign) => {
+                            const along = Math.max(0, Math.min(length, Math.hypot(point.x - a.x, point.y - a.y) + sign * reach));
+                            return { x: a.x + (b.x - a.x) * along / length, y: a.y + (b.y - a.y) * along / length };
+                        };
+                        paths.front += `M${at(toward(-1))}L${at(toward(1))}`;
+                    }
+                }
+                svg.style.left = `${coordinates.x}px`;
+                svg.style.top = `${coordinates.y}px`;
+                svg.style.opacity = String(Math.max(...requests.map(request => request.opacity)) * look.shown * Math.min(1, look.grow * 2));
+                svg.style.zIndex = String(Math.max(...requests.map(request => request.zIndex)));
+                const color = requests[0].color;
+                for (const path of Array.from(svg.children)) {
+                    const front = path.dataset.edges === "front";
+                    path.setAttribute("d", paths[front ? "front" : "back"]);
+                    path.setAttribute("stroke", color);
+                    path.setAttribute("stroke-width", front ? "1.5" : "1");
+                    path.setAttribute("stroke-opacity", front ? "1" : "0.35");
+                    path.setAttribute("stroke-dasharray", front ? "" : "3 3");
+                }
+            }
+        }
+        EntityLabel.ModelBoxes = ModelBoxes;
+        /*
+         * Andrew's monotone chain, counter-clockwise in screen space.
+         */
+        function convexHull(points) {
+            const sorted = [...points].sort((a, b) => a.x - b.x || a.y - b.y);
+            const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+            const build = (list) => {
+                const chain = [];
+                for (const point of list) {
+                    while (chain.length >= 2 && cross(chain[chain.length - 2], chain[chain.length - 1], point) <= 0)
+                        chain.pop();
+                    chain.push(point);
+                }
+                chain.pop();
+                return chain;
+            };
+            return [...build(sorted), ...build(sorted.reverse())];
+        }
+        /*
+         * Where the top of a convex outline crosses a vertical line, so a stem leaves the box without jumping between corners.
+         */
+        function hullTop(hull, x) {
+            let top = Infinity;
+            for (let i = 0; i < hull.length; i++) {
+                const a = hull[i];
+                const b = hull[(i + 1) % hull.length];
+                if (x < Math.min(a.x, b.x) || x > Math.max(a.x, b.x)) {
+                    continue;
+                }
+                top = Math.min(top, a.x === b.x ? Math.min(a.y, b.y) : a.y + (b.y - a.y) * (x - a.x) / (b.x - a.x));
+            }
+            return top;
+        }
+        function hullArea(hull) {
+            return Math.abs(hull.reduce((sum, point, i) => sum + point.x * hull[(i + 1) % hull.length].y - hull[(i + 1) % hull.length].x * point.y, 0)) / 2;
+        }
+        function hullContains(hull, point) {
+            return hull.length >= 3 && hull.every((a, i) => {
+                const b = hull[(i + 1) % hull.length];
+                return (b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x) >= 0;
+            });
+        }
         class Label {
             get HasText() { return this.options.presentation !== "icon"; }
             SetHoverVisible(visible) {
@@ -6418,6 +7184,11 @@
                 this.Transient = false;
                 this.hoverFade = { from: 0, to: 1, start: Date.now() };
                 this.cursorMotion = { amount: 0, from: 0, target: 0, start: 0, position: undefined };
+                // How far the stem is from the ring onto a model box, and the offset it eases out after changing outline.
+                // The record's box for the Entity this label is on: undefined corners while reading, null when it has none.
+                this.modelBox = null;
+                this.boxMorph = { value: 0, from: 0, target: 0, start: 0, anchor: undefined, group: undefined,
+                    shift: { x: 0, y: 0, start: 0 } };
                 // Counter to help differentiate between createLabel calls.
                 this.counter = 0;
                 // Whether this label has asked its group for a default image, which it does once on screen.
@@ -6503,11 +7274,13 @@
              * Recalling will be ignored.
              */
             Dispose() {
+                var _a;
                 if (this.disposed) {
                     return;
                 }
                 this.disposed = true;
                 this.removeLabel();
+                (_a = layers.get(this.viewer)) === null || _a === void 0 ? void 0 : _a.modelBoxes.Set(this.id, null, null, null);
                 clearTimeout(this.loadTimeout);
                 this.loadTimeout = null;
             }
@@ -6529,7 +7302,7 @@
              * @param starterPos3d optional position to create label at. Ignored for billboard labels.
              */
             async createLabel(starterPos3d) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                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;
                 // The old label stays until its replacement is built, so a rebuild never blinks while a location loads.
                 let pos3d = starterPos3d ? starterPos3d.clone() : null;
                 const counter = ++this.counter;
@@ -6815,6 +7588,9 @@
                 if (this.disposed || this.counter != counter) {
                     return;
                 }
+                // Leave the layer only once rejoined, so a rebuild never empties it and closes it along with its boxes.
+                const leaveLayer = this.renderRemoval;
+                this.renderRemoval = null;
                 this.removeLabel();
                 // A found photo draws as if configured, without changing the options clustering compares and measures.
                 const photo = HasIcon(this.options) ? null : (_j = this.options.photo) !== null && _j !== void 0 ? _j : this.photo;
@@ -7111,9 +7887,65 @@
                         radius: Math.max(width, height) / 2
                     };
                 };
+                // Only CAD tilesets and model Entities are assembly parts with a geometry box; anything else stays a point.
+                const boxable = Boolean(normalLeader && ((_r = this.rego) === null || _r === void 0 ? void 0 : _r.entityId) && ((visual instanceof Cesium.Cesium3DTileFeature && this.rego.tilesetType === BModels.Tileset.EType.Cad) ||
+                    (visual instanceof Cesium.Entity && Boolean(visual.model))));
+                if (!boxable || ((_s = this.modelBox) === null || _s === void 0 ? void 0 : _s.entityId) !== ((_t = this.rego) === null || _t === void 0 ? void 0 : _t.entityId)) {
+                    layer.modelBoxes.Set(this.id, null, null, null);
+                    this.modelBox = null;
+                }
+                // Read once per Entity, so a label rebuilt for its loaded text keeps its box instead of waiting again.
+                if (boxable && !this.modelBox) {
+                    const box = { entityId: this.rego.entityId, corners: undefined, load: null };
+                    box.load = this.loadModelBox().catch(() => null).then(corners => box.corners = corners || null);
+                    this.modelBox = box;
+                }
+                // A model's label stays hidden until its box is known, so a ring never shows only to turn into a box.
+                const hydrated = (_y = (_x = (_u = this.visualRegister) === null || _u === void 0 ? void 0 : _u.GetLabelGroupFor((_v = this.rego) === null || _v === void 0 ? void 0 : _v.entityId, (_w = this.rego) === null || _w === void 0 ? void 0 : _w.menuItemId)) === null || _x === void 0 ? void 0 : _x.item) === null || _y === void 0 ? void 0 : _y.entity;
+                let boxPending = boxable && this.modelBox.corners === undefined && Boolean(((_z = hydrated === null || hydrated === void 0 ? void 0 : hydrated.Bruce) === null || _z === void 0 ? void 0 : _z.GeometryPivotExtents) || this.api);
+                const boxPendingUntil = Date.now() + MODEL_BOX_WAIT;
+                // Whether this label has been on screen yet; a box found before then is drawn in place, not eased into.
+                let shownOnce = false;
+                if (boxable) {
+                    const found = this._pos3d;
+                    const settle = () => {
+                        if (boxPending && !this.disposed && this.counter === counter) {
+                            boxPending = false;
+                            this.viewer.scene.requestRender();
+                        }
+                    };
+                    // Past the wait a slow record no longer holds the label back; a box that comes later eases in.
+                    setTimeout(settle, MODEL_BOX_WAIT);
+                    this.modelBox.load.then(corners => {
+                        if (!corners || this.disposed || this.counter !== counter) {
+                            return;
+                        }
+                        // A record that disagrees with where the model was found describes another placement, such as a moved tileset.
+                        const centre = Cesium.Cartesian3.midpoint(corners[0], corners[7], new Cesium.Cartesian3());
+                        if (Cesium.Cartesian3.distance(centre, found) > Cesium.Cartesian3.distance(corners[0], corners[7]) * 0.75 + 2) {
+                            return;
+                        }
+                        const rego = this.rego;
+                        // Let go a little further out than it is taken, so a camera resting at the limit does not flip it.
+                        let near = false;
+                        layer.modelBoxes.Set(this.id, corners, rego.entityId, {
+                            selected: () => { var _a, _b; return Boolean((_b = (_a = this.visualRegister) === null || _a === void 0 ? void 0 : _a.GetState({ entityId: rego.entityId, menuItemId: rego.menuItemId })) === null || _b === void 0 ? void 0 : _b.selected); },
+                            hovered: () => { var _a, _b; return Boolean((_b = (_a = this.visualRegister) === null || _a === void 0 ? void 0 : _a.IsLabelHovered) === null || _b === void 0 ? void 0 : _b.call(_a, rego.entityId, rego.menuItemId)); },
+                            near: () => {
+                                var _a, _b;
+                                const ring = this.options.anchorRing;
+                                const camera = this.viewer.camera.positionWC || this.viewer.camera.position;
+                                const limit = ((_a = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _a !== void 0 ? _a : 100) * (near ? 1.1 : 1);
+                                near = (ring === null || ring === void 0 ? void 0 : ring.enabled) !== false && Number.isFinite((_b = this._pos3d) === null || _b === void 0 ? void 0 : _b.x) && Cesium.Cartesian3.distance(camera, this._pos3d) <= limit;
+                                return near || ((ring === null || ring === void 0 ? void 0 : ring.enabled) !== false && Boolean(this.cursorMotion.target));
+                            }
+                        });
+                        this.viewer.scene.requestRender();
+                    }).finally(settle);
+                }
                 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, _u, _v;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
                     if (this.disposed || !this.viewer || this.viewer.isDestroyed() || ((_a = this.visible) === null || _a === void 0 ? void 0 : _a.call(this)) === false ||
                         (presentation === "icon" && this.options.iconScale === 0)) {
                         return null;
@@ -7151,18 +7983,29 @@
                     if (!Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.x) || !Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.y)) {
                         return null;
                     }
+                    const boxed = layer.modelBoxes.Frame(this.id);
+                    const waiting = boxPending && Date.now() < boxPendingUntil;
+                    const boxBlend = this.morphToBox(boxed, shownOnce ? (_f = (_e = this.options.anchorRing) === null || _e === void 0 ? void 0 : _e.transitionDuration) !== null && _f !== void 0 ? _f : 200 : 0);
+                    // Eased between the ring and where the stem meets the box, so gaining or losing a box never jumps.
+                    const boxTarget = this.boxMorph.anchor;
+                    const ringPoint = { x: anchor.x + pixelOffset.x, y: anchor.y + pixelOffset.y };
+                    const boxAnchor = boxBlend > 0 && boxTarget ? {
+                        x: ringPoint.x + (boxTarget.x - ringPoint.x) * boxBlend,
+                        y: ringPoint.y + (boxTarget.y - ringPoint.y) * boxBlend
+                    } : undefined;
+                    const start = boxAnchor || anchor;
                     const onScreen = anchor.x >= 0 && anchor.y >= 0 && anchor.x < this.viewer.canvas.clientWidth && anchor.y < this.viewer.canvas.clientHeight;
-                    if (leader && !onScreen)
+                    if (leader && (start.x < 0 || start.y < 0 || start.x >= this.viewer.canvas.clientWidth || start.y >= this.viewer.canvas.clientHeight))
                         return null;
                     if (onScreen && !this.imageAsked && this.groupId && !HasIcon(this.options) && !this.options.photo) {
                         this.imageAsked = true;
-                        (_e = this.visualRegister) === null || _e === void 0 ? void 0 : _e.RequestLabelImage((_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId);
+                        (_g = this.visualRegister) === null || _g === void 0 ? void 0 : _g.RequestLabelImage((_h = this.rego) === null || _h === void 0 ? void 0 : _h.entityId);
                     }
                     const transientPivot = (this.Transient && !this.Persistent ?
-                        (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_g = this.visualRegister) === null || _g === void 0 ? void 0 : _g.GetLabelHoverPosition((_h = this.rego) === null || _h === void 0 ? void 0 : _h.entityId, (_j = this.rego) === null || _j === void 0 ? void 0 : _j.menuItemId)) : undefined);
+                        (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_j = this.visualRegister) === null || _j === void 0 ? void 0 : _j.GetLabelHoverPosition((_k = this.rego) === null || _k === void 0 ? void 0 : _k.entityId, (_l = this.rego) === null || _l === void 0 ? void 0 : _l.menuItemId)) : undefined);
                     const hover = (presentation !== "icon" ?
                         (this.Transient && !this.Persistent && this.hoverFade.to === 0 ? this.retainedHoverPosition :
-                            (_k = this.visualRegister) === null || _k === void 0 ? void 0 : _k.GetLabelHoverPosition((_l = this.rego) === null || _l === void 0 ? void 0 : _l.entityId, (_m = this.rego) === null || _m === void 0 ? void 0 : _m.menuItemId)) : undefined);
+                            (_m = this.visualRegister) === null || _m === void 0 ? void 0 : _m.GetLabelHoverPosition((_o = this.rego) === null || _o === void 0 ? void 0 : _o.entityId, (_p = this.rego) === null || _p === void 0 ? void 0 : _p.menuItemId)) : undefined);
                     const reused = !this.Transient || this.Persistent;
                     const now = Date.now();
                     const animateCursor = () => {
@@ -7186,12 +8029,14 @@
                     const cursorAmount = cursorMotion.amount;
                     leader = normalLeader || cursorAmount > 0;
                     // An icon keeps its callout centred on the glyph rather than following the cursor across it.
-                    const icon = measureIcon();
+                    const icon = boxAnchor ? null : measureIcon();
                     const iconRing = icon ? Math.max(ICON_RING_MIN, icon.radius + ICON_RING_PADDING) : 0;
-                    const pivot = icon ? undefined : transientPivot;
-                    let x = ((_o = pivot === null || pivot === void 0 ? void 0 : pivot.x) !== null && _o !== void 0 ? _o : anchor.x) + (icon || pixelOffset).x;
-                    let y = ((_p = pivot === null || pivot === void 0 ? void 0 : pivot.y) !== null && _p !== void 0 ? _p : anchor.y) + (icon || pixelOffset).y;
-                    if (cursorAmount > 0 && !icon) {
+                    // A boxed model is pinned the same way, with its stem leaving the top of the box outline.
+                    const pinned = Boolean(icon || boxAnchor);
+                    const pivot = pinned ? undefined : transientPivot;
+                    let x = boxAnchor ? boxAnchor.x : ((_q = pivot === null || pivot === void 0 ? void 0 : pivot.x) !== null && _q !== void 0 ? _q : anchor.x) + (icon || pixelOffset).x;
+                    let y = boxAnchor ? boxAnchor.y : ((_r = pivot === null || pivot === void 0 ? void 0 : pivot.y) !== null && _r !== void 0 ? _r : anchor.y) + (icon || pixelOffset).y;
+                    if (cursorAmount > 0 && !pinned) {
                         // A leader-less label starts centred on its anchor; preserve that box as it lifts away.
                         if (!normalLeader) {
                             x -= ele.offsetWidth / layer.coordinates.scaleX / 2;
@@ -7226,6 +8071,9 @@
                             if (visual instanceof Cesium.Entity && (visual.polygon || visual.polyline))
                                 leaderLength /= 3;
                         }
+                        if (boxAnchor && this.options.leaderLength == null) {
+                            leaderLength += (MODEL_BOX_STEM - leaderLength) * boxBlend;
+                        }
                         if (cursorAmount > 0) {
                             leaderLength += (96 - leaderLength) * cursorAmount;
                         }
@@ -7233,7 +8081,7 @@
                         leaderLength += iconRing;
                         y = anchorY - leaderLength;
                     }
-                    else if (hover && !reused && !icon) {
+                    else if (hover && !reused && !pinned) {
                         x = hover.x + pixelOffset.x;
                         y = hover.y + pixelOffset.y - 24;
                     }
@@ -7242,7 +8090,7 @@
                     const width = ele.offsetWidth / coordinates.scaleX;
                     const height = ele.offsetHeight / coordinates.scaleY;
                     let clusterBounds;
-                    if ((_q = this.options.cluster) === null || _q === void 0 ? void 0 : _q.enabled) {
+                    if ((_s = this.options.cluster) === null || _s === void 0 ? void 0 : _s.enabled) {
                         const textWidth = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetWidth) || 0;
                         const textHeight = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetHeight) || 0;
                         // A photo is never part of the footprint, so its arrival cannot change which cluster a label joins.
@@ -7276,7 +8124,7 @@
                     if (!leader && (bounds.x + bounds.width < 0 || bounds.y + bounds.height < 0 || bounds.x > this.viewer.canvas.clientWidth || bounds.y > this.viewer.canvas.clientHeight)) {
                         return null;
                     }
-                    const state = (_r = this.visualRegister) === null || _r === void 0 ? void 0 : _r.GetState({ entityId: (_s = this.rego) === null || _s === void 0 ? void 0 : _s.entityId, menuItemId: (_t = this.rego) === null || _t === void 0 ? void 0 : _t.menuItemId });
+                    const state = (_t = this.visualRegister) === null || _t === void 0 ? void 0 : _t.GetState({ entityId: (_u = this.rego) === null || _u === void 0 ? void 0 : _u.entityId, menuItemId: (_v = this.rego) === null || _v === void 0 ? void 0 : _v.menuItemId });
                     const opacity = this.prePositioned || hoverOnly || MAX_DISTANCE === Infinity ? 1 : 1 - distance / MAX_DISTANCE;
                     return {
                         canFlip: leader && presentation !== "icon", hasLeader: leader,
@@ -7284,24 +8132,25 @@
                         transient: this.Transient || Boolean(hover) || cursorAmount > 0,
                         extendedGeometry: visual instanceof Cesium.Entity && Boolean(visual.polygon || visual.polyline || visual.corridor),
                         viewportWidth: this.viewer.canvas.clientWidth,
-                        id: this.id, entityKey: ((_u = this.rego) === null || _u === void 0 ? void 0 : _u.entityId) ? JSON.stringify([this.rego.entityId, this.rego.menuItemId || "", this.Transient && !this.Persistent ? "hover" : ""]) : undefined,
-                        entityId: (_v = this.rego) === null || _v === void 0 ? void 0 : _v.entityId, group: this.groupId, x, y, width, height, anchorX, anchorY, depth, leaderLength, leaderRun, leaderSide, distance,
-                        iconRadius: icon === null || icon === void 0 ? void 0 : icon.radius,
+                        id: this.id, entityKey: ((_w = this.rego) === null || _w === void 0 ? void 0 : _w.entityId) ? JSON.stringify([this.rego.entityId, this.rego.menuItemId || "", this.Transient && !this.Persistent ? "hover" : ""]) : undefined,
+                        entityId: (_x = this.rego) === null || _x === void 0 ? void 0 : _x.entityId, group: this.groupId, x, y, width, height, anchorX, anchorY, depth, leaderLength, leaderRun, leaderSide, distance,
+                        iconRadius: icon === null || icon === void 0 ? void 0 : icon.radius, modelBox: boxed || undefined, boxBlend,
                         // 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
+                        opacity: waiting ? 0 : 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 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, _z, _0, _1, _2, _3, _4;
+                    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, _1, _2, _3, _4, _5;
                     const show = (placement === null || placement === void 0 ? void 0 : placement.visible) && placement.opacity > 0;
+                    shownOnce = shownOnce || Boolean(show);
                     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";
+                    this.anchor.style.display = show && leader && !(((_a = placement.frame) === null || _a === void 0 ? void 0 : _a.boxBlend) >= 1) ? "block" : "none";
                     if (!show) {
                         displacement = { x: 0, y: 0 };
                         nudge = { x: 0, y: 0, fromX: 0, fromY: 0, targetX: 0, targetY: 0, start: 0 };
@@ -7313,7 +8162,7 @@
                         return;
                     }
                     // A label standing for a cluster shows its summary only; its photo is put away and never fetched.
-                    const solo = !((_a = placement.members) === null || _a === void 0 ? void 0 : _a.length);
+                    const solo = !((_b = placement.members) === null || _b === void 0 ? void 0 : _b.length);
                     if (look.iconPhoto && iconElement && iconElement.dataset.failed !== "true") {
                         const display = solo ? "inline-flex" : "none";
                         if (iconElement.style.display !== display) {
@@ -7331,7 +8180,7 @@
                             }
                         }, PHOTO_SHOW_DELAY);
                     }
-                    const displayText = (_b = placement.text) !== null && _b !== void 0 ? _b : originalText;
+                    const displayText = (_c = placement.text) !== null && _c !== void 0 ? _c : originalText;
                     if (textElement && textElement.textContent !== displayText) {
                         textElement.textContent = displayText;
                         // Measure the summary's footprint next frame without replacing each member's source text.
@@ -7355,9 +8204,9 @@
                     const stack = JSON.stringify(placement.icons || []);
                     if (iconStack && stack !== displayedStack) {
                         displayedStack = stack;
-                        const looks = ((_c = placement.icons) === null || _c === void 0 ? void 0 : _c.length) ? [iconLook(this.options), ...placement.icons] : [];
+                        const looks = ((_d = placement.icons) === null || _d === void 0 ? void 0 : _d.length) ? [iconLook(this.options), ...placement.icons] : [];
                         // One small size for all, so no icon in the arrangement reads as more important than another.
-                        const size = (this.options.iconSize || 24) * ((_d = this.options.iconScale) !== null && _d !== void 0 ? _d : 1) * ICON_STACK_SCALE;
+                        const size = (this.options.iconSize || 24) * ((_e = this.options.iconScale) !== null && _e !== void 0 ? _e : 1) * ICON_STACK_SCALE;
                         const built = looks.map(look => this.buildIcon({ ...look, iconSize: size }, counter));
                         // A stack is on show already, so its photos load straight away.
                         built.forEach(({ start }) => start === null || start === void 0 ? void 0 : start());
@@ -7392,9 +8241,11 @@
                     // Summary and badge changes must fit on their first visible frame, including after resize.
                     const ring = this.options.anchorRing;
                     const pointer = (layer.pointer || (cursorMotion.target ? cursorMotion.position : undefined) || (this.Transient && !this.Persistent ?
-                        (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_e = this.visualRegister) === null || _e === void 0 ? void 0 : _e.GetLabelHoverPosition((_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId, (_g = this.rego) === null || _g === void 0 ? void 0 : _g.menuItemId)) : undefined));
+                        (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_f = this.visualRegister) === null || _f === void 0 ? void 0 : _f.GetLabelHoverPosition((_g = this.rego) === null || _g === void 0 ? void 0 : _g.entityId, (_h = this.rego) === null || _h === void 0 ? void 0 : _h.menuItemId)) : undefined));
                     const iconRing = frame.iconRadius ? Math.max(ICON_RING_MIN, frame.iconRadius + ICON_RING_PADDING) : 0;
-                    const hovered = pointer && Math.hypot(pointer.x - frame.anchorX, pointer.y - frame.anchorY) <= Math.max((_h = ring === null || ring === void 0 ? void 0 : ring.hoverDistance) !== null && _h !== void 0 ? _h : 24, iconRing);
+                    const boxed = leader ? frame.modelBox : undefined;
+                    const hovered = pointer && (boxed ? hullContains(boxed.hull, pointer) :
+                        Math.hypot(pointer.x - frame.anchorX, pointer.y - frame.anchorY) <= Math.max((_j = ring === null || ring === void 0 ? void 0 : ring.hoverDistance) !== null && _j !== void 0 ? _j : 24, iconRing));
                     if (look.iconPhoto && growPhoto) {
                         // A rectangle leans on the leader's side of the label.
                         if (photoShape === "rect") {
@@ -7405,15 +8256,15 @@
                         }
                         // Grown in layout rather than scaled, so the border keeps its width, and the label, whose bottom
                         // sits on the leader, grows up and sideways without changing the leader's length.
-                        growPhoto(Boolean(hovered) && !((_j = placement.members) === null || _j === void 0 ? void 0 : _j.length));
+                        growPhoto(Boolean(hovered) && !((_k = placement.members) === null || _k === void 0 ? void 0 : _k.length));
                     }
-                    const normalRadius = (!leader || (ring === null || ring === void 0 ? void 0 : ring.enabled) === false ? 0 : Math.max(frame.distance <= ((_k = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _k !== void 0 ? _k : 100) ? ((_l = ring === null || ring === void 0 ? void 0 : ring.nearRadius) !== null && _l !== void 0 ? _l : 10) : 0, hovered ? ((_m = ring === null || ring === void 0 ? void 0 : ring.hoverRadius) !== null && _m !== void 0 ? _m : (this.Transient && !this.Persistent ? 15.4 : 22)) : 0));
+                    const normalRadius = (!leader || (ring === null || ring === void 0 ? void 0 : ring.enabled) === false ? 0 : Math.max(frame.distance <= ((_l = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _l !== void 0 ? _l : 100) ? ((_m = ring === null || ring === void 0 ? void 0 : ring.nearRadius) !== null && _m !== void 0 ? _m : 10) : 0, hovered ? ((_o = ring === null || ring === void 0 ? void 0 : ring.hoverRadius) !== null && _o !== void 0 ? _o : (this.Transient && !this.Persistent ? 15.4 : 22)) : 0));
                     const targetRadius = normalRadius + (15.4 - normalRadius) * cursorMotion.amount;
                     // Around a glyph the ring keeps the glyph's size and only fades its stroke in, so it never covers the icon.
                     const targetOuter = iconRing || targetRadius || 2.5;
                     const targetInner = iconRing ? (targetRadius > 0 ? iconRing - 2 : iconRing) : Math.max(0, targetRadius - 2);
                     const now = Date.now();
-                    const duration = (_o = ring === null || ring === void 0 ? void 0 : ring.transitionDuration) !== null && _o !== void 0 ? _o : 200;
+                    const duration = (_p = ring === null || ring === void 0 ? void 0 : ring.transitionDuration) !== null && _p !== void 0 ? _p : 200;
                     const sharedRing = this.Transient && !this.Persistent && this.hoverFade.to === 1 ? this.hoverRingState : undefined;
                     let ringAnimation = sharedRing ? sharedRing.animation : this.ringAnimation;
                     if (!ringAnimation) {
@@ -7447,7 +8298,8 @@
                     if (sharedRing) {
                         sharedRing.animation = ringAnimation;
                     }
-                    const radius = ringAnimation.inner > 0 ? ringAnimation.outer : 0;
+                    const ringShare = 1 - (frame.boxBlend || 0);
+                    const radius = ringShare > 0 && ringAnimation.inner > 0 ? ringAnimation.outer * ringShare : 0;
                     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;
@@ -7455,19 +8307,19 @@
                     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 = (_q = (_p = placement.textSide) !== null && _p !== void 0 ? _p : frame.leaderSide) !== null && _q !== void 0 ? _q : "right";
+                        const side = (_r = (_q = placement.textSide) !== null && _q !== void 0 ? _q : frame.leaderSide) !== null && _r !== void 0 ? _r : "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 = (_s = (_r = this.options.pointerAvoidance) === null || _r === void 0 ? void 0 : _r.gap) !== null && _s !== void 0 ? _s : 12;
+                    const gap = (_t = (_s = this.options.pointerAvoidance) === null || _s === void 0 ? void 0 : _s.gap) !== null && _t !== void 0 ? _t : 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 && ((_t = this.options.pointerAvoidance) === null || _t === void 0 ? void 0 : _t.enabled) !== false && pointer &&
+                    if (passive && ((_u = this.options.pointerAvoidance) === null || _u === void 0 ? void 0 : _u.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.
@@ -7485,7 +8337,7 @@
                     else {
                         displacement = { x: 0, y: 0 };
                     }
-                    const nudgeDuration = (_v = (_u = this.options.pointerAvoidance) === null || _u === void 0 ? void 0 : _u.transitionDuration) !== null && _v !== void 0 ? _v : 200;
+                    const nudgeDuration = (_w = (_v = this.options.pointerAvoidance) === null || _v === void 0 ? void 0 : _v.transitionDuration) !== null && _w !== void 0 ? _w : 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);
@@ -7501,7 +8353,7 @@
                             fromY: nudge.y,
                             targetX: displacement.x,
                             targetY: displacement.y,
-                            start: now + ((_x = (_w = this.options.pointerAvoidance) === null || _w === void 0 ? void 0 : _w.delay) !== null && _x !== void 0 ? _x : 180)
+                            start: now + ((_y = (_x = this.options.pointerAvoidance) === null || _x === void 0 ? void 0 : _x.delay) !== null && _y !== void 0 ? _y : 180)
                         };
                     }
                     if (animateNudge() < 1 && (nudge.fromX !== nudge.targetX || nudge.fromY !== nudge.targetY)) {
@@ -7512,10 +8364,10 @@
                     ele.style.left = `${coordinates.x + position.x * coordinates.scaleX}px`;
                     ele.style.top = `${coordinates.y + position.y * coordinates.scaleY}px`;
                     for (const clickTarget of Array.from(content.querySelectorAll('[role="button"]'))) {
-                        clickTarget.setAttribute("aria-label", placement.members.length ? `Select ${placement.entityIds.length} entities` : `Select ${(_z = (_y = this.options.text) !== null && _y !== void 0 ? _y : text) !== null && _z !== void 0 ? _z : (_0 = this.rego) === null || _0 === void 0 ? void 0 : _0.entityId}`);
+                        clickTarget.setAttribute("aria-label", placement.members.length ? `Select ${placement.entityIds.length} entities` : `Select ${(_0 = (_z = this.options.text) !== null && _z !== void 0 ? _z : text) !== null && _0 !== void 0 ? _0 : (_1 = this.rego) === null || _1 === void 0 ? void 0 : _1.entityId}`);
                     }
                     if (leader) {
-                        const nodeRadius = ringAnimation.outer;
+                        const nodeRadius = ringAnimation.outer * (1 - (frame.boxBlend || 0));
                         const anchor = this.anchor;
                         anchor.style.left = `${coordinates.x + (frame.anchorX - nodeRadius) * coordinates.scaleX}px`;
                         anchor.style.top = `${coordinates.y + (frame.anchorY - nodeRadius) * coordinates.scaleY}px`;
@@ -7528,11 +8380,12 @@
                         const circle = svg.firstElementChild;
                         circle.setAttribute("cx", String(nodeRadius));
                         circle.setAttribute("cy", String(nodeRadius));
-                        circle.setAttribute("r", String((nodeRadius + ringAnimation.inner) / 2));
+                        const innerRadius = ringAnimation.inner * (1 - (frame.boxBlend || 0));
+                        circle.setAttribute("r", String((nodeRadius + innerRadius) / 2));
                         circle.setAttribute("stroke", this.options.leaderColor || "rgba(255, 255, 255, 0.8)");
-                        circle.setAttribute("stroke-width", String(nodeRadius - ringAnimation.inner));
+                        circle.setAttribute("stroke-width", String(nodeRadius - innerRadius));
                         anchor.style.boxShadow = radius ? "none" : "0 0 5px rgba(0, 0, 0, 0.3)";
-                        anchor.style.opacity = String(opacity * (normalLeader ? 1 : cursorMotion.amount));
+                        anchor.style.opacity = String(opacity * (normalLeader ? 1 : cursorMotion.amount) * (1 - (frame.boxBlend || 0)));
                         anchor.style.zIndex = String(placement.zIndex);
                         // The stem starts at the rim, never across the transparent centre, even after passive displacement.
                         const straightX = Math.max(position.x, Math.min(frame.anchorX, position.x + width));
@@ -7552,13 +8405,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)) : ((_1 = ringAnimation.arcOffset) !== null && _1 !== void 0 ? _1 : 0);
+                        const targetOffset = hovered ? Math.max(-rotationLimit, Math.min(rotationLimit, wrappedAngle)) : ((_2 = ringAnimation.arcOffset) !== null && _2 !== void 0 ? _2 : 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 - ((_2 = ringAnimation.arcTime) !== null && _2 !== void 0 ? _2 : now)));
+                        const elapsed = Math.min(32, Math.max(0, now - ((_3 = ringAnimation.arcTime) !== null && _3 !== void 0 ? _3 : 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((_3 = ringAnimation.arcOffset) !== null && _3 !== void 0 ? _3 : 0, targetOffset);
-                        ringAnimation.arcOpen = approach((_4 = ringAnimation.arcOpen) !== null && _4 !== void 0 ? _4 : 0, targetOpen);
+                        ringAnimation.arcOffset = approach((_4 = ringAnimation.arcOffset) !== null && _4 !== void 0 ? _4 : 0, targetOffset);
+                        ringAnimation.arcOpen = approach((_5 = ringAnimation.arcOpen) !== null && _5 !== void 0 ? _5 : 0, targetOpen);
                         ringAnimation.arcTime = now;
                         if (ringAnimation.arcOffset !== targetOffset || ringAnimation.arcOpen !== targetOpen) {
                             this.viewer.scene.requestRender();
@@ -7584,6 +8437,12 @@
                             element.style.zIndex = String(placement.zIndex);
                         };
                         draw(lineEle, startX, startY, endX, endY);
+                        if (layer.modelBoxes.Hull(this.id)) {
+                            layer.modelBoxes.Request(this.id, {
+                                whole: Boolean(cursorMotion.target), from: { x: frame.anchorX, y: frame.anchorY },
+                                opacity, zIndex: placement.zIndex, color: this.options.leaderColor || "rgba(255, 255, 255, 0.8)", duration
+                            });
+                        }
                         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;
@@ -7596,6 +8455,7 @@
                 ele.style.display = "flex";
                 ele.style.visibility = "hidden";
                 this.renderRemoval = layer.Add({ project, apply });
+                leaveLayer === null || leaveLayer === void 0 ? void 0 : leaveLayer();
                 // If terrain changes then we'll re-call createLabel as the position may have changed.
                 let terrTimeout = null;
                 this.terrChangedRemoval = this.viewer.scene.terrainProviderChanged.addEventListener(() => {
@@ -7741,7 +8601,7 @@
                 // The glyph plus the chip's padding of a third either side, enlarged for a photo.
                 const diameter = (size + 2 * (size / 3)) * PHOTO_SIZE_SCALE;
                 // Enough pixels to stay sharp at the hover size.
-                const pixels = Math.ceil(diameter * PHOTO_HOVER_SCALE * (window.devicePixelRatio || 1));
+                const pixels = photoPixels(size, true);
                 const canvas = document.createElement("canvas");
                 canvas.className = "entity-label-photo";
                 canvas.style.cssText = "display:block;box-sizing:border-box;border:2px solid rgba(255,255,255,0.9);box-shadow:0 1px 3px rgba(0,0,0,0.35);";
@@ -7752,13 +8612,15 @@
                 // Resting size, set once the photo's shape is known.
                 let width = 0;
                 let height = 0;
+                // How far hovering grows it, which a small image limits.
+                let hoverScale = PHOTO_HOVER_SCALE;
                 let grown = false;
                 const grow = (on) => {
                     if (on === grown || !width) {
                         return;
                     }
                     grown = on;
-                    const scale = on ? PHOTO_HOVER_SCALE : 1;
+                    const scale = on ? hoverScale : 1;
                     canvas.style.width = `${width * scale}px`;
                     canvas.style.height = `${height * scale}px`;
                     this.renderFor(PHOTO_TRANSITION);
@@ -7776,11 +8638,15 @@
                     (_a = canvas.getContext("2d")) === null || _a === void 0 ? void 0 : _a.drawImage(photo.source, 0, 0);
                     const longest = Math.max(photo.width, photo.height);
                     const circle = PhotoShape(photo.width, photo.height) === "circle";
-                    width = circle ? diameter : diameter * photo.width / longest;
-                    height = circle ? diameter : diameter * photo.height / longest;
+                    // Shown no larger than the image has pixels for, one to a CSS pixel, and never smaller than the icon.
+                    const native = circle ? Math.min(photo.width, photo.height) : longest;
+                    const across = Math.min(diameter, Math.max(size, native));
+                    hoverScale = Math.max(1, Math.min(PHOTO_HOVER_SCALE, native / across));
+                    width = circle ? across : across * photo.width / longest;
+                    height = circle ? across : across * photo.height / longest;
                     canvas.style.width = `${width}px`;
                     canvas.style.height = `${height}px`;
-                    canvas.style.borderRadius = circle ? "50%" : `${diameter * PHOTO_CORNER}px`;
+                    canvas.style.borderRadius = circle ? "50%" : `${across * PHOTO_CORNER}px`;
                     canvas.style.opacity = "1";
                     placePhoto === null || placePhoto === void 0 ? void 0 : placePhoto(circle ? "circle" : "rect", grow);
                     return true;
@@ -7827,6 +8693,57 @@
                 };
                 step();
             }
+            /*
+             * Reads the record's geometry box, preferring an entity a label group already hydrated.
+             */
+            async loadModelBox() {
+                var _a, _b, _c, _d;
+                const known = (_c = (_b = (_a = this.visualRegister) === null || _a === void 0 ? void 0 : _a.GetLabelGroupFor(this.rego.entityId, this.rego.menuItemId)) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.entity;
+                let entity = ((_d = known === null || known === void 0 ? void 0 : known.Bruce) === null || _d === void 0 ? void 0 : _d.GeometryPivotExtents) ? known : null;
+                if (!entity && this.api) {
+                    try {
+                        entity = (await BModels.Entity.Get({ api: this.api, entityId: this.rego.entityId, expandLocation: true, migrated: true })).entity;
+                    }
+                    // Expanding location fails for entities outside an assembly, which have no box to give.
+                    catch {
+                        return null;
+                    }
+                }
+                // A file uploaded before the API stored oriented boxes has only the record's axis-aligned extents.
+                return GetModelBox(entity, ReadOrientedBox(entity));
+            }
+            /*
+             * Eases the stem between the ring and the model box, returning how far onto the box it is this frame.
+             */
+            morphToBox(boxed, duration) {
+                const morph = this.boxMorph;
+                const now = Date.now();
+                const ease = (progress) => progress * progress * (3 - 2 * progress);
+                const progress = (start) => duration > 0 ? Math.min(1, Math.max(0, (now - start) / duration)) : 1;
+                const hadBox = morph.target === 1;
+                const target = boxed ? 1 : 0;
+                if (morph.target !== target) {
+                    Object.assign(morph, { from: morph.value, target, start: now });
+                }
+                morph.value = morph.from + (morph.target - morph.from) * ease(progress(morph.start));
+                // Settled, so a later frame with a longer duration does not replay the ease.
+                if (morph.value === morph.target) {
+                    morph.from = morph.target;
+                }
+                if (boxed) {
+                    // Moving to another outline, such as a hovered part pulled out of its group, eases the stem across.
+                    if (hadBox && morph.anchor && morph.group !== boxed.group) {
+                        morph.shift = { x: morph.anchor.x - boxed.anchor.x, y: morph.anchor.y - boxed.anchor.y, start: now };
+                    }
+                    morph.group = boxed.group;
+                    const remaining = 1 - ease(progress(morph.shift.start));
+                    morph.anchor = { x: boxed.anchor.x + morph.shift.x * remaining, y: boxed.anchor.y + morph.shift.y * remaining };
+                }
+                if (morph.value !== morph.target || (boxed && progress(morph.shift.start) < 1)) {
+                    this.viewer.scene.requestRender();
+                }
+                return morph.value;
+            }
             /**
              * Removes label from the viewer and unsubscribes from events.
              */
@@ -12888,6 +13805,13 @@
                 this.SyncLabelHover();
                 this.viewer.scene.requestRender();
             }
+            /*
+             * Whether the label hover is on this Entity, with or without a cursor position.
+             */
+            IsLabelHovered(entityId, menuItemId) {
+                const hover = this.labelHover;
+                return Boolean(entityId) && (hover === null || hover === void 0 ? void 0 : hover.entityId) === entityId && (hover.menuItemId == null || hover.menuItemId === menuItemId);
+            }
             GetLabelHoverPosition(entityId, menuItemId) {
                 const hover = this.labelHover;
                 return (hover === null || hover === void 0 ? void 0 : hover.entityId) === entityId && (hover.menuItemId == null || hover.menuItemId === menuItemId) ? hover.position : undefined;
@@ -51668,7 +52592,7 @@ void main() {
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "7.5.7";
+    const VERSION = "7.5.8";
     /**
      * 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.