bruce-cesium 7.5.4 → 7.5.6

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import * as Cesium from 'cesium';
-import { Cartographic, ColorMaterialProperty, Entity, Color, ConstantProperty, CallbackProperty, Primitive, Cesium3DTileFeature, HeightReference, ColorBlendMode, HeadingPitchRoll, Math as Math$1, Transforms, ShadowMode, Cartesian3, ClassificationType, Model, ShaderSource, Ellipsoid, Matrix4, Geometry, GeometryAttribute, ComponentDatatype, PrimitiveType, BoundingSphere, GeometryPipeline, Cartesian2, Cartesian4, sampleTerrain, Texture, PixelFormat, Sampler, TextureWrap, TextureMinificationFilter, TextureMagnificationFilter, VertexArray, BufferUsage, ShaderProgram, RenderState, BlendingState, DrawCommand, Pass, JulianDate, Quaternion, ArcType, CornerType, ConstantPositionProperty, DistanceDisplayCondition, HorizontalOrigin, VerticalOrigin, ImageMaterialProperty, PolygonHierarchy, PolylineGraphics, Rectangle, SceneTransforms, NearFarScalar, Matrix3, KmlDataSource, FeatureDetection, SceneMode, GeoJsonDataSource, Cesium3DTileStyle, HeadingPitchRange, Cesium3DTileColorBlendMode, Ion, IonResource, Cesium3DTileset, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, IonImageryProvider, createWorldImagery, createWorldImageryAsync, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, CesiumTerrainProvider, Intersect, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, PolygonPipeline, EllipsoidGeodesic, sampleTerrainMostDetailed, defined, CustomDataSource, CesiumInspector, ClockRange, DynamicEnvironmentMapManager, ScreenSpaceEventHandler, ScreenSpaceEventType, GeometryInstance, Fullscreen, CzmlDataSource } from 'cesium';
-import { Cartes, LRUCache, ProjectViewTile, ENVIRONMENT, Calculator, ClientFile, Entity as Entity$1, EntityLod, EntityTag, EntityType, ObjectUtils, Style, Carto, Geometry as Geometry$1, Api, ClientFileValueMap, Color as Color$1, BruceEvent, EntityCoords, MenuItem, Tileset, ProjectView, ProjectViewBookmark, ZoomControl, Bounds, DataLab, DelayQueue, AccountConcept, BruceApi, EntityRelation, RecordChangeFeed, EntitySource, Camera, ProgramKey, ProjectViewLegacyTile, Account, AccountLimits, Session, UrlUtils, EntityAttachment, EntityAttachmentType, EntityAttribute, MathUtils, ProjectViewBookmarkGroup, EntityRelationType, EntityHistoricData } from 'bruce-models';
+import { Cartographic, ColorMaterialProperty, Entity, Color, ConstantProperty, CallbackProperty, Primitive, Cesium3DTileFeature, HeightReference, ColorBlendMode, HeadingPitchRoll, Math as Math$1, Transforms, ShadowMode, Cartesian3, ClassificationType, Model, ConstantPositionProperty, DistanceDisplayCondition, JulianDate, Quaternion, Matrix4, HorizontalOrigin, VerticalOrigin, ArcType, CornerType, ImageMaterialProperty, PolygonHierarchy, PolylineGraphics, Rectangle, ShaderSource, Ellipsoid, Geometry, GeometryAttribute, ComponentDatatype, PrimitiveType, BoundingSphere, GeometryPipeline, Cartesian2, Cartesian4, sampleTerrain, Texture, PixelFormat, Sampler, TextureWrap, TextureMinificationFilter, TextureMagnificationFilter, VertexArray, BufferUsage, ShaderProgram, RenderState, BlendingState, DrawCommand, Pass, SceneTransforms, FeatureDetection, SceneMode, NearFarScalar, Matrix3, KmlDataSource, GeoJsonDataSource, Cesium3DTileStyle, HeadingPitchRange, Cesium3DTileColorBlendMode, Ion, IonResource, EllipsoidTerrainProvider, IonImageryProvider, createWorldImagery, createWorldImageryAsync, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, CesiumTerrainProvider, Cesium3DTileset, Intersect, OrthographicFrustum, EasingFunction, CustomDataSource, PolygonPipeline, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, EllipsoidGeodesic, sampleTerrainMostDetailed, defined, CesiumInspector, ClockRange, DynamicEnvironmentMapManager, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, Fullscreen, CzmlDataSource } from 'cesium';
+import { Cartes, LRUCache, ProjectViewTile, ENVIRONMENT, Calculator, ClientFile, Entity as Entity$1, EntityLod, EntityTag, EntityType, ObjectUtils, Style, Api, Carto, Geometry as Geometry$1, Bounds, ClientFileValueMap, Color as Color$1, MenuItem, ProjectView, ProjectViewBookmark, Tileset, ZoomControl, BruceEvent, EntityCoords, DataLab, DelayQueue, AccountConcept, EntityRelation, RecordChangeFeed, BruceApi, EntitySource, ProgramKey, ProjectViewLegacyTile, Camera, Account, AccountLimits, Session, UrlUtils, ProjectViewBookmarkGroup, EntityAttachment, EntityAttachmentType, EntityAttribute, MathUtils, EntityRelationType, EntityHistoricData } from 'bruce-models';
 
 /**
  * Ensures a number is returned from a given value.
@@ -5531,11 +5531,196 @@ var EntityLabel;
     const ICON_RING_PADDING = 4;
     // Small points still get a ring as large as the default near ring.
     const ICON_RING_MIN = 10;
+    // A photo grows by this much while its entity is hovered, since it is content worth a closer look.
+    const PHOTO_HOVER_SCALE = 2.5;
+    // How long a label must stay on show before its photo is fetched, so labels that only flash past while
+    // clusters settle or the camera sweeps by cost nothing.
+    const PHOTO_SHOW_DELAY = 250;
+    // Photos rest this much larger than an icon on its chip, since they are content rather than a marker.
+    const PHOTO_SIZE_SCALE = 1.5;
+    // Corner radius of a photo too oblong for a circle, relative to its longest side.
+    const PHOTO_CORNER = 0.15;
+    // How long a photo takes to grow into its label, and to grow on hover.
+    const PHOTO_TRANSITION = 250;
+    // Downsized photos kept per viewer before the least recently used is released.
+    const PHOTO_CACHE_LIMIT = 500;
+    // Key where the viewer keeps its downsized photos.
+    const PHOTO_CACHE_KEY = "_nextspaceLabelPhotos";
     // One per tinted icon, since an SVG mask is addressed by id across the whole document.
     let tintCounter = 0;
     // Key where the label instance is stored within the cesium entity.
     // Eg: rego[ATTACH_KEY] = new EntityLabel(...);
     EntityLabel.ATTACH_KEY = "nextspace-navigator-entity-label";
+    // 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) {
+        return typeof name === "string" && IMAGE_EXTENSIONS.includes(name.split(".").pop().toLowerCase());
+    }
+    // Whether a label was configured with an icon of its own, which always outranks a found photo.
+    function HasIcon(options) {
+        return Boolean(options.iconUrl || options.iconClass || options.icon);
+    }
+    EntityLabel.HasIcon = HasIcon;
+    /*
+     * Whether a label line is an http(s) link to an image, judged by its path so a query string cannot pass for one.
+     */
+    function IsImageUrl(value) {
+        const text = value === null || value === void 0 ? void 0 : value.trim();
+        if (!text || /\s/.test(text)) {
+            return false;
+        }
+        let url;
+        try {
+            url = new URL(text);
+        }
+        catch {
+            return false;
+        }
+        return (url.protocol === "http:" || url.protocol === "https:") && isImageFile(url.pathname);
+    }
+    EntityLabel.IsImageUrl = IsImageUrl;
+    /*
+     * 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.
+     */
+    function GetDefaultImageUrl(entity, api) {
+        var _a, _b, _c;
+        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"]) == EntityAttachmentType.EType.Photo && x.ClientFile)
+            .filter(x => isImageFile(x.ClientFile.FileExt || x.ClientFile.OriginalFileName))
+            .sort((a, b) => { var _a, _b; return ((_a = a.DisplayOrder) !== null && _a !== void 0 ? _a : 0) - ((_b = b.DisplayOrder) !== null && _b !== void 0 ? _b : 0); })[0];
+        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];
+        if (thumbnail) {
+            return thumbnail.URL || ClientFile.GetUrl({ fileId: thumbnail["ClientFile.ID"], api, viaCdn: true });
+        }
+        return photo.ClientFile.URL || photo.URL || ClientFile.GetUrl({ fileId: photo["ClientFile.ID"], api, viaCdn: true });
+    }
+    EntityLabel.GetDefaultImageUrl = GetDefaultImageUrl;
+    /*
+     * Gives a label an image it found rather than one it was configured with.
+     * A text label gains it beside the text, or alone when the image was all the text there was.
+     */
+    function WithPhoto(options, url) {
+        var _a, _b, _c, _d;
+        const presentation = (_a = options.presentation) !== null && _a !== void 0 ? _a : "text";
+        options.iconUrl = url;
+        options.iconPhoto = true;
+        // A tint would flatten a photo into a silhouette of its own outline.
+        options.iconColor = undefined;
+        (_b = options.iconSize) !== null && _b !== void 0 ? _b : (options.iconSize = IMAGE_SIZE);
+        if (!((_c = options.text) === null || _c === void 0 ? void 0 : _c.trim())) {
+            options.presentation = "icon";
+        }
+        else if (presentation === "text") {
+            options.presentation = "icon-text-side";
+        }
+        if (presentation === "text") {
+            // Keeps the leader a text label draws by default.
+            (_d = options.leader) !== null && _d !== void 0 ? _d : (options.leader = true);
+        }
+        return options;
+    }
+    EntityLabel.WithPhoto = WithPhoto;
+    /*
+     * Near-square photos are cropped to a circle the size of an icon chip; the rest keep their shape with rounded corners.
+     * An unknown size reads as square, since the circle crops whatever arrives.
+     */
+    function PhotoShape(width, height) {
+        if (!(width > 0 && height > 0)) {
+            return "circle";
+        }
+        const longest = Math.max(width, height);
+        return (longest - Math.min(width, height)) / longest <= ICON_BACKGROUND_UNIFORM_TOLERANCE ? "circle" : "rect";
+    }
+    EntityLabel.PhotoShape = PhotoShape;
+    /*
+     * Loads a photo through a plain image element, so a host without CORS still works, and redraws it once onto a canvas
+     * no larger than it is shown. Labels draw from that canvas, so none of them holds a camera original.
+     */
+    async function shrinkPhoto(url, pixels) {
+        const none = { source: null, width: 0, height: 0 };
+        const image = new Image();
+        image.decoding = "async";
+        image.src = url;
+        try {
+            await image.decode();
+        }
+        catch {
+            return none;
+        }
+        const width = image.naturalWidth;
+        const height = image.naturalHeight;
+        if (!width || !height) {
+            return none;
+        }
+        // A circle only ever shows the centre square, so that is all worth keeping.
+        const circle = PhotoShape(width, height) === "circle";
+        const sourceWidth = circle ? Math.min(width, height) : width;
+        const sourceHeight = circle ? Math.min(width, height) : height;
+        const scale = Math.min(1, pixels / Math.max(sourceWidth, sourceHeight));
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(1, Math.round(sourceWidth * scale));
+        canvas.height = Math.max(1, Math.round(sourceHeight * scale));
+        const context = canvas.getContext("2d");
+        if (!context) {
+            return none;
+        }
+        context.imageSmoothingQuality = "high";
+        context.drawImage(image, (width - sourceWidth) / 2, (height - sourceHeight) / 2, sourceWidth, sourceHeight, 0, 0, canvas.width, canvas.height);
+        return { source: canvas, width, height };
+    }
+    /*
+     * Downsized label photos, kept on the viewer so every label in a scene shares one load and one decode.
+     */
+    class Photos {
+        constructor() {
+            this.entries = new Map();
+            this.ready = new Map();
+        }
+        static Get(viewer) {
+            var _a;
+            return (_a = viewer[PHOTO_CACHE_KEY]) !== null && _a !== void 0 ? _a : (viewer[PHOTO_CACHE_KEY] = new Photos());
+        }
+        // The photo when it is already drawn, so a rebuilt label shows it at once instead of growing it again.
+        Peek(url, pixels) {
+            return this.ready.get(`${pixels} ${url}`);
+        }
+        Load(url, pixels) {
+            const key = `${pixels} ${url}`;
+            let entry = this.entries.get(key);
+            if (entry) {
+                // Reinsertion keeps the map in least recently used order.
+                this.entries.delete(key);
+                this.entries.set(key, entry);
+                return entry;
+            }
+            entry = shrinkPhoto(url, pixels).then(photo => {
+                if (this.entries.get(key) === entry) {
+                    this.ready.set(key, photo);
+                }
+                return photo;
+            });
+            this.entries.set(key, entry);
+            for (const oldest of this.entries.keys()) {
+                if (this.entries.size <= PHOTO_CACHE_LIMIT) {
+                    break;
+                }
+                this.entries.delete(oldest);
+                this.ready.delete(oldest);
+            }
+            return entry;
+        }
+    }
     /*
      * Indexes screen rectangles so sparse scenes do not compare every label with every other label.
      */
@@ -6251,6 +6436,10 @@ var EntityLabel;
             this.cursorMotion = { amount: 0, from: 0, target: 0, start: 0, position: undefined };
             // 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.
+            this.imageAsked = false;
+            // The photo a label outside any group found while reading its attributes.
+            this.photo = null;
             // The label element itself.
             this.label = null;
             // Callback to kill render listener.
@@ -6285,6 +6474,7 @@ var EntityLabel;
             this.visible = params.visible;
             if (((_c = params.options) === null || _c === void 0 ? void 0 : _c.text) != null)
                 this.additionalTexts = [];
+            this.photo = null;
             this.prePositioned = !isNaN((_d = params.pos3d) === null || _d === void 0 ? void 0 : _d.x);
             this.createLabel(params.pos3d);
             if (!params.api && !ENVIRONMENT.IS_SELF_MANAGED && this.options.text == null) {
@@ -6347,6 +6537,7 @@ var EntityLabel;
             this.options = options || {};
             this.groupId = groupId;
             this.additionalTexts = this.options.text != null ? [] : null;
+            this.photo = null;
             this.createLabel();
         }
         /**
@@ -6354,8 +6545,8 @@ var EntityLabel;
          * @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;
-            this.removeLabel();
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            // 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;
             if (this.disposed) {
@@ -6513,6 +6704,7 @@ var EntityLabel;
                 }
             }
             if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                this.removeLabel();
                 return;
             }
             pos3d = DrawingUtils.EnsurePosHeight({
@@ -6522,6 +6714,7 @@ var EntityLabel;
                 viewer: this.viewer
             });
             if (isNaN(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+                this.removeLabel();
                 return;
             }
             this._pos3d = pos3d;
@@ -6587,35 +6780,39 @@ var EntityLabel;
                                 catch (e) {
                                     console.error(e);
                                 }
-                                // Type could be deleted, however we'll just catch that to show a label instead of nothing.
-                                // This is not unusual for Tilesets where the Type that is baked might be outdated.
-                                if (entityType || this.options.attributes) {
-                                    const attributes = (_a = this.options.attributes) !== null && _a !== void 0 ? _a : (_c = (_b = entityType.VisualSettings) === null || _b === void 0 ? void 0 : _b.label) === null || _c === void 0 ? void 0 : _c.attributes;
-                                    if (attributes) {
-                                        try {
-                                            const { entity } = await Entity$1.Get({
-                                                api: this.api,
-                                                entityId: this.rego.entityId,
-                                                scenario: ((_d = this.rego.outline) === null || _d === void 0 ? void 0 : _d.length) ? (_e = this.rego.outline.find(x => !!x.Scenario)) === null || _e === void 0 ? void 0 : _e.Scenario : null,
-                                                schemaId: this.rego.schema,
-                                                migrated: true
-                                            });
-                                            for (let i = 0; i < attributes.length; i++) {
-                                                const value = Entity$1.GetValue({
-                                                    entity: entity,
-                                                    path: attributes[i]
-                                                });
-                                                if (value != null) {
-                                                    additionalTexts.push(value);
-                                                }
-                                            }
-                                        }
-                                        // Entity doesn't exist.
-                                        // Likely a graphic with an ID that points to no record.
-                                        catch (e) {
-                                            console.error(e);
+                                const attributes = (_a = this.options.attributes) !== null && _a !== void 0 ? _a : (_c = (_b = entityType === null || entityType === void 0 ? void 0 : entityType.VisualSettings) === null || _b === void 0 ? void 0 : _b.label) === null || _c === void 0 ? void 0 : _c.attributes;
+                                // Read for its attributes, and for a photo when the label has no icon of its own.
+                                if (attributes || !HasIcon(this.options)) {
+                                    let entity = null;
+                                    try {
+                                        entity = (await Entity$1.Get({
+                                            api: this.api,
+                                            entityId: this.rego.entityId,
+                                            scenario: ((_d = this.rego.outline) === null || _d === void 0 ? void 0 : _d.length) ? (_e = this.rego.outline.find(x => !!x.Scenario)) === null || _e === void 0 ? void 0 : _e.Scenario : null,
+                                            schemaId: this.rego.schema,
+                                            migrated: true,
+                                            expandAttachments: !HasIcon(this.options)
+                                        })).entity;
+                                    }
+                                    // Entity doesn't exist.
+                                    // Likely a graphic with an ID that points to no record.
+                                    catch (e) {
+                                        console.error(e);
+                                    }
+                                    for (let i = 0; entity && attributes && i < attributes.length; i++) {
+                                        const value = Entity$1.GetValue({
+                                            entity: entity,
+                                            path: attributes[i]
+                                        });
+                                        if (value != null) {
+                                            additionalTexts.push(value);
                                         }
                                     }
+                                    // A linked image outranks the default one, as it does for group labels.
+                                    if (entity && !HasIcon(this.options)) {
+                                        const at = additionalTexts.findIndex(value => IsImageUrl(String(value)));
+                                        this.photo = at >= 0 ? String(additionalTexts.splice(at, 1)[0]).trim() : GetDefaultImageUrl(entity, this.api);
+                                    }
                                 }
                             }
                             this.additionalTexts = additionalTexts;
@@ -6634,9 +6831,13 @@ var EntityLabel;
             if (this.disposed || this.counter != counter) {
                 return;
             }
-            const presentation = this.options.presentation || "text";
+            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;
+            const look = photo ? WithPhoto({ ...this.options, text: (_k = this.options.text) !== null && _k !== void 0 ? _k : [text, ...additionalTexts].join("\n") }, photo) : this.options;
+            const presentation = look.presentation || "text";
             let clickEntityIds = [];
-            const selectOnClick = (_j = this.options.selectOnClick) !== null && _j !== void 0 ? _j : Boolean(this.groupId);
+            const selectOnClick = (_l = this.options.selectOnClick) !== null && _l !== void 0 ? _l : Boolean(this.groupId);
             const select = (event) => {
                 event.preventDefault();
                 event.stopPropagation();
@@ -6665,11 +6866,11 @@ var EntityLabel;
                     target.addEventListener(type, event => event.stopPropagation());
                 }
             };
-            const normalLeader = (_k = this.options.leader) !== null && _k !== void 0 ? _k : presentation === "text";
+            const normalLeader = (_m = look.leader) !== null && _m !== void 0 ? _m : presentation === "text";
             const angled = this.options.leaderStyle === "angled";
             let leader = normalLeader;
             const content = document.createElement("span");
-            const originalText = (_l = this.options.text) !== null && _l !== void 0 ? _l : [text, ...additionalTexts].join("\n");
+            const originalText = (_o = this.options.text) !== null && _o !== void 0 ? _o : [text, ...additionalTexts].join("\n");
             let textElement;
             let sourceText;
             let sourceNaturalText;
@@ -6684,10 +6885,33 @@ var EntityLabel;
             if (presentation === "icon-text-above") {
                 content.style.flexDirection = "column-reverse";
             }
+            // A found photo's shape decides its layout once it loads: a rectangle sits under the name it adds to, a circle beside it.
+            let photoShape = null;
+            let growPhoto = null;
+            // Loads the photo; called once the label is actually showing, so labels out of view or folded into a cluster never fetch one.
+            let startPhoto = null;
+            let photoTimer = null;
+            const placePhoto = (shape, grow) => {
+                photoShape = shape;
+                growPhoto = grow;
+                content.style.flexDirection = shape === "rect" ? "column-reverse" : "";
+            };
             if (presentation !== "text") {
-                const built = this.buildIcon(this.options, counter);
+                const built = this.buildIcon(look, counter, placePhoto);
+                startPhoto = built.start;
                 const icon = iconElement = built.icon;
                 fitIconBackground = built.fit;
+                if (built.arriving) {
+                    // The gap opens with the photo, so a text label does not shift before its photo grows in.
+                    content.style.gap = "0px";
+                    built.arriving.then(() => {
+                        if (iconElement.style.display === "none") {
+                            return;
+                        }
+                        content.style.transition = `gap ${PHOTO_TRANSITION}ms ease-out`;
+                        content.style.gap = "6px";
+                    });
+                }
                 makeClickable(icon);
                 // Keep badges outside the glyph so font classes and image masks cannot affect them.
                 iconContainer = document.createElement("span");
@@ -6709,7 +6933,7 @@ var EntityLabel;
                 if (presentation === "text")
                     makeClickable(textElement);
                 content.appendChild(textElement);
-                if ((_m = this.options.cluster) === null || _m === void 0 ? void 0 : _m.enabled) {
+                if ((_p = this.options.cluster) === null || _p === void 0 ? void 0 : _p.enabled) {
                     sourceText = document.createElement("span");
                     sourceText.className = "entity-label-source-text";
                     sourceText.setAttribute("aria-hidden", "true");
@@ -6729,7 +6953,9 @@ var EntityLabel;
             countElement.style.cssText = "flex:none;align-self:center;white-space:nowrap;background:#fff;color:#000;text-shadow:none;border-radius:8px;padding:0 3px;display:none;";
             // Text above the icon would have the badge land in it, so the free corner is the lower one.
             const badgeBelow = presentation === "icon-text-above";
-            if (iconContainer) {
+            // A photo is put away while its label stands for a cluster, so its count sits with the text instead.
+            const badgeOnIcon = Boolean(iconContainer) && !look.iconPhoto;
+            if (badgeOnIcon) {
                 countElement.style.cssText += `position:absolute;left:100%;top:${badgeBelow ? "100%" : "0"};transform:translate(-50%,-50%);`;
                 iconContainer.appendChild(countElement);
             }
@@ -6746,11 +6972,11 @@ var EntityLabel;
             else {
                 ele = document.createElement("div");
                 ele.appendChild(content);
-                if (!iconContainer) {
+                if (!badgeOnIcon) {
                     ele.appendChild(countElement);
                 }
                 ele.className = "entity-label";
-                ele.dataset.entityId = ((_o = this.rego) === null || _o === void 0 ? void 0 : _o.entityId) || "";
+                ele.dataset.entityId = ((_q = this.rego) === null || _q === void 0 ? void 0 : _q.entityId) || "";
                 ele.dataset.presentation = presentation;
                 if (this.groupId) {
                     ele.dataset.groupId = this.groupId;
@@ -6903,7 +7129,7 @@ var EntityLabel;
             };
             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;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
                 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;
@@ -6941,13 +7167,18 @@ var EntityLabel;
                 if (!Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.x) || !Number.isFinite(anchor === null || anchor === void 0 ? void 0 : anchor.y)) {
                     return null;
                 }
-                if (leader && (anchor.x < 0 || anchor.y < 0 || anchor.x >= this.viewer.canvas.clientWidth || anchor.y >= this.viewer.canvas.clientHeight))
+                const onScreen = anchor.x >= 0 && anchor.y >= 0 && anchor.x < this.viewer.canvas.clientWidth && anchor.y < this.viewer.canvas.clientHeight;
+                if (leader && !onScreen)
                     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);
+                }
                 const transientPivot = (this.Transient && !this.Persistent ?
-                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_e = this.visualRegister) === null || _e === void 0 ? void 0 : _e.GetLabelHoverPosition((_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId, (_g = this.rego) === null || _g === void 0 ? void 0 : _g.menuItemId)) : undefined);
+                    (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);
                 const hover = (presentation !== "icon" ?
                     (this.Transient && !this.Persistent && this.hoverFade.to === 0 ? this.retainedHoverPosition :
-                        (_h = this.visualRegister) === null || _h === void 0 ? void 0 : _h.GetLabelHoverPosition((_j = this.rego) === null || _j === void 0 ? void 0 : _j.entityId, (_k = this.rego) === null || _k === void 0 ? void 0 : _k.menuItemId)) : undefined);
+                        (_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);
                 const reused = !this.Transient || this.Persistent;
                 const now = Date.now();
                 const animateCursor = () => {
@@ -6974,8 +7205,8 @@ var EntityLabel;
                 const icon = measureIcon();
                 const iconRing = icon ? Math.max(ICON_RING_MIN, icon.radius + ICON_RING_PADDING) : 0;
                 const pivot = icon ? undefined : transientPivot;
-                let x = ((_l = pivot === null || pivot === void 0 ? void 0 : pivot.x) !== null && _l !== void 0 ? _l : anchor.x) + (icon || pixelOffset).x;
-                let y = ((_m = pivot === null || pivot === void 0 ? void 0 : pivot.y) !== null && _m !== void 0 ? _m : anchor.y) + (icon || pixelOffset).y;
+                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 leader-less label starts centred on its anchor; preserve that box as it lifts away.
                     if (!normalLeader) {
@@ -7027,11 +7258,12 @@ var EntityLabel;
                 const width = ele.offsetWidth / coordinates.scaleX;
                 const height = ele.offsetHeight / coordinates.scaleY;
                 let clusterBounds;
-                if ((_o = this.options.cluster) === null || _o === void 0 ? void 0 : _o.enabled) {
+                if ((_q = this.options.cluster) === null || _q === void 0 ? void 0 : _q.enabled) {
                     const textWidth = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetWidth) || 0;
                     const textHeight = (sourceText === null || sourceText === void 0 ? void 0 : sourceText.offsetHeight) || 0;
-                    const iconWidth = (iconElement === null || iconElement === void 0 ? void 0 : iconElement.offsetWidth) || 0;
-                    const iconHeight = (iconElement === null || iconElement === void 0 ? void 0 : iconElement.offsetHeight) || 0;
+                    // A photo is never part of the footprint, so its arrival cannot change which cluster a label joins.
+                    const iconWidth = look.iconPhoto ? 0 : (iconElement === null || iconElement === void 0 ? void 0 : iconElement.offsetWidth) || 0;
+                    const iconHeight = look.iconPhoto ? 0 : (iconElement === null || iconElement === void 0 ? void 0 : iconElement.offsetHeight) || 0;
                     const gap = sourceText && iconWidth ? 6 : 0;
                     const above = presentation === "icon-text-above";
                     // Match the fixed content gap and label padding, excluding the count badge.
@@ -7060,7 +7292,7 @@ var EntityLabel;
                 if (!leader && (bounds.x + bounds.width < 0 || bounds.y + bounds.height < 0 || bounds.x > this.viewer.canvas.clientWidth || bounds.y > this.viewer.canvas.clientHeight)) {
                     return null;
                 }
-                const state = (_p = this.visualRegister) === null || _p === void 0 ? void 0 : _p.GetState({ entityId: (_q = this.rego) === null || _q === void 0 ? void 0 : _q.entityId, menuItemId: (_r = this.rego) === null || _r === void 0 ? void 0 : _r.menuItemId });
+                const 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 opacity = this.prePositioned || hoverOnly || MAX_DISTANCE === Infinity ? 1 : 1 - distance / MAX_DISTANCE;
                 return {
                     canFlip: leader && presentation !== "icon", hasLeader: leader,
@@ -7068,8 +7300,8 @@ var EntityLabel;
                     transient: this.Transient || Boolean(hover) || cursorAmount > 0,
                     extendedGeometry: visual instanceof Entity && Boolean(visual.polygon || visual.polyline || visual.corridor),
                     viewportWidth: this.viewer.canvas.clientWidth,
-                    id: this.id, entityKey: ((_s = this.rego) === null || _s === void 0 ? void 0 : _s.entityId) ? JSON.stringify([this.rego.entityId, this.rego.menuItemId || "", this.Transient && !this.Persistent ? "hover" : ""]) : undefined,
-                    entityId: (_t = this.rego) === null || _t === void 0 ? void 0 : _t.entityId, group: this.groupId, x, y, width, height, anchorX, anchorY, depth, leaderLength, leaderRun, leaderSide, distance,
+                    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,
                     // 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
@@ -7078,7 +7310,7 @@ var EntityLabel;
             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;
+                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;
                 const show = (placement === null || placement === void 0 ? void 0 : placement.visible) && placement.opacity > 0;
                 clickEntityIds = show ? placement.entityIds : [];
                 ele.style.visibility = show ? "visible" : "hidden";
@@ -7092,9 +7324,30 @@ var EntityLabel;
                     if (!this.Transient) {
                         this.ringAnimation = undefined;
                     }
+                    clearTimeout(photoTimer);
+                    photoTimer = null;
                     return;
                 }
-                const displayText = (_a = placement.text) !== null && _a !== void 0 ? _a : originalText;
+                // 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);
+                if (look.iconPhoto && iconElement && iconElement.dataset.failed !== "true") {
+                    const display = solo ? "inline-flex" : "none";
+                    if (iconElement.style.display !== display) {
+                        iconElement.style.display = display;
+                    }
+                }
+                if (!solo) {
+                    clearTimeout(photoTimer);
+                    photoTimer = null;
+                }
+                else if (startPhoto && photoTimer == null) {
+                    photoTimer = setTimeout(() => {
+                        if (!this.disposed && this.counter === counter) {
+                            startPhoto();
+                        }
+                    }, PHOTO_SHOW_DELAY);
+                }
+                const displayText = (_b = placement.text) !== null && _b !== void 0 ? _b : originalText;
                 if (textElement && textElement.textContent !== displayText) {
                     textElement.textContent = displayText;
                     // Measure the summary's footprint next frame without replacing each member's source text.
@@ -7118,10 +7371,12 @@ var EntityLabel;
                 const stack = JSON.stringify(placement.icons || []);
                 if (iconStack && stack !== displayedStack) {
                     displayedStack = stack;
-                    const looks = ((_b = placement.icons) === null || _b === void 0 ? void 0 : _b.length) ? [iconLook(this.options), ...placement.icons] : [];
+                    const looks = ((_c = placement.icons) === null || _c === void 0 ? void 0 : _c.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) * ((_c = this.options.iconScale) !== null && _c !== void 0 ? _c : 1) * ICON_STACK_SCALE;
+                    const size = (this.options.iconSize || 24) * ((_d = this.options.iconScale) !== null && _d !== void 0 ? _d : 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());
                     // Two sit side by side; three make a triangle with the representative on top.
                     iconStack.style.gridTemplateColumns = built.length === 3 ? "auto auto" : `repeat(${built.length}, auto)`;
                     if (built.length === 3) {
@@ -7138,7 +7393,7 @@ var EntityLabel;
                 }
                 for (const fit of stackedFits)
                     fit();
-                if (iconContainer) {
+                if (badgeOnIcon) {
                     const badgeWidth = countElement.offsetWidth;
                     const iconWidth = iconElement.offsetWidth;
                     const narrow = iconWidth < iconElement.offsetHeight * 0.6;
@@ -7153,16 +7408,28 @@ var EntityLabel;
                 // 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 : (_d = this.visualRegister) === null || _d === void 0 ? void 0 : _d.GetLabelHoverPosition((_e = this.rego) === null || _e === void 0 ? void 0 : _e.entityId, (_f = this.rego) === null || _f === void 0 ? void 0 : _f.menuItemId)) : undefined));
+                    (this.hoverFade.to === 0 ? this.retainedHoverPosition : (_e = this.visualRegister) === null || _e === void 0 ? void 0 : _e.GetLabelHoverPosition((_f = this.rego) === null || _f === void 0 ? void 0 : _f.entityId, (_g = this.rego) === null || _g === void 0 ? void 0 : _g.menuItemId)) : undefined));
                 const 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((_g = ring === null || ring === void 0 ? void 0 : ring.hoverDistance) !== null && _g !== void 0 ? _g : 24, iconRing);
-                const normalRadius = (!leader || (ring === null || ring === void 0 ? void 0 : ring.enabled) === false ? 0 : Math.max(frame.distance <= ((_h = ring === null || ring === void 0 ? void 0 : ring.nearDistance) !== null && _h !== void 0 ? _h : 100) ? ((_j = ring === null || ring === void 0 ? void 0 : ring.nearRadius) !== null && _j !== void 0 ? _j : 10) : 0, hovered ? ((_k = ring === null || ring === void 0 ? void 0 : ring.hoverRadius) !== null && _k !== void 0 ? _k : (this.Transient && !this.Persistent ? 15.4 : 22)) : 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);
+                if (look.iconPhoto && growPhoto) {
+                    // A rectangle leans on the leader's side of the label.
+                    if (photoShape === "rect") {
+                        const align = !leader ? "center" : placement.textSide === "left" ? "flex-end" : "flex-start";
+                        if (content.style.alignItems !== align) {
+                            content.style.alignItems = align;
+                        }
+                    }
+                    // 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));
+                }
+                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 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 = (_l = ring === null || ring === void 0 ? void 0 : ring.transitionDuration) !== null && _l !== void 0 ? _l : 200;
+                const duration = (_o = ring === null || ring === void 0 ? void 0 : ring.transitionDuration) !== null && _o !== void 0 ? _o : 200;
                 const sharedRing = this.Transient && !this.Persistent && this.hoverFade.to === 1 ? this.hoverRingState : undefined;
                 let ringAnimation = sharedRing ? sharedRing.animation : this.ringAnimation;
                 if (!ringAnimation) {
@@ -7204,19 +7471,19 @@ var EntityLabel;
                 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 = (_o = (_m = placement.textSide) !== null && _m !== void 0 ? _m : frame.leaderSide) !== null && _o !== void 0 ? _o : "right";
+                    const side = (_q = (_p = placement.textSide) !== null && _p !== void 0 ? _p : frame.leaderSide) !== null && _q !== void 0 ? _q : "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 = (_q = (_p = this.options.pointerAvoidance) === null || _p === void 0 ? void 0 : _p.gap) !== null && _q !== void 0 ? _q : 12;
+                const gap = (_s = (_r = this.options.pointerAvoidance) === null || _r === void 0 ? void 0 : _r.gap) !== null && _s !== void 0 ? _s : 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 && ((_r = this.options.pointerAvoidance) === null || _r === void 0 ? void 0 : _r.enabled) !== false && pointer &&
+                if (passive && ((_t = this.options.pointerAvoidance) === null || _t === void 0 ? void 0 : _t.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.
@@ -7234,7 +7501,7 @@ var EntityLabel;
                 else {
                     displacement = { x: 0, y: 0 };
                 }
-                const nudgeDuration = (_t = (_s = this.options.pointerAvoidance) === null || _s === void 0 ? void 0 : _s.transitionDuration) !== null && _t !== void 0 ? _t : 200;
+                const nudgeDuration = (_v = (_u = this.options.pointerAvoidance) === null || _u === void 0 ? void 0 : _u.transitionDuration) !== null && _v !== void 0 ? _v : 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);
@@ -7250,7 +7517,7 @@ var EntityLabel;
                         fromY: nudge.y,
                         targetX: displacement.x,
                         targetY: displacement.y,
-                        start: now + ((_v = (_u = this.options.pointerAvoidance) === null || _u === void 0 ? void 0 : _u.delay) !== null && _v !== void 0 ? _v : 180)
+                        start: now + ((_x = (_w = this.options.pointerAvoidance) === null || _w === void 0 ? void 0 : _w.delay) !== null && _x !== void 0 ? _x : 180)
                     };
                 }
                 if (animateNudge() < 1 && (nudge.fromX !== nudge.targetX || nudge.fromY !== nudge.targetY)) {
@@ -7261,7 +7528,7 @@ var EntityLabel;
                 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 ${(_x = (_w = this.options.text) !== null && _w !== void 0 ? _w : text) !== null && _x !== void 0 ? _x : (_y = this.rego) === null || _y === void 0 ? void 0 : _y.entityId}`);
+                    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}`);
                 }
                 if (leader) {
                     const nodeRadius = ringAnimation.outer;
@@ -7301,13 +7568,13 @@ var EntityLabel;
                     // Keep the stem inside the 126-degree arc, away from antialiased endpoints.
                     const arcFraction = 0.35;
                     const rotationLimit = Math.PI * arcFraction - Math.PI / 30;
-                    const targetOffset = hovered ? Math.max(-rotationLimit, Math.min(rotationLimit, wrappedAngle)) : ((_z = ringAnimation.arcOffset) !== null && _z !== void 0 ? _z : 0);
+                    const targetOffset = hovered ? Math.max(-rotationLimit, Math.min(rotationLimit, wrappedAngle)) : ((_1 = ringAnimation.arcOffset) !== null && _1 !== void 0 ? _1 : 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 - ((_0 = ringAnimation.arcTime) !== null && _0 !== void 0 ? _0 : now)));
+                    const elapsed = Math.min(32, Math.max(0, now - ((_2 = ringAnimation.arcTime) !== null && _2 !== void 0 ? _2 : 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((_1 = ringAnimation.arcOffset) !== null && _1 !== void 0 ? _1 : 0, targetOffset);
-                    ringAnimation.arcOpen = approach((_2 = ringAnimation.arcOpen) !== null && _2 !== void 0 ? _2 : 0, targetOpen);
+                    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.arcTime = now;
                     if (ringAnimation.arcOffset !== targetOffset || ringAnimation.arcOpen !== targetOpen) {
                         this.viewer.scene.requestRender();
@@ -7362,14 +7629,16 @@ var EntityLabel;
         }
         /*
          * Builds one icon glyph from label options, with its background chip when asked for.
-         *
          * The returned fit squares the chip off once the glyph has a measurable size.
          */
-        buildIcon(options, counter) {
+        buildIcon(options, counter, placePhoto) {
             var _a, _b, _c;
             let fit;
             const icon = document.createElement("span");
             icon.className = "entity-label-icon";
+            if (options.iconPhoto && options.iconUrl) {
+                return this.buildPhoto(icon, options, counter, placePhoto);
+            }
             icon.style.cssText = `font-size:${(options.iconSize || 24) * ((_a = options.iconScale) !== null && _a !== void 0 ? _a : 1)}px;line-height:1;`;
             icon.style.textShadow = "0 1px 2px rgba(0, 0, 0, 0.25)";
             const iconColor = typeof options.iconColor === "string" ? options.iconColor : undefined;
@@ -7422,6 +7691,8 @@ var EntityLabel;
                     }
                     this.viewer.scene.requestRender();
                 };
+                // A photo is rarely square; fit it inside the icon's box rather than stretching it.
+                image.style.objectFit = "contain";
                 image.onload = resize;
                 resize();
                 image.src = options.iconUrl;
@@ -7477,6 +7748,101 @@ var EntityLabel;
             }
             return { icon, fit };
         }
+        /*
+         * Draws an entity's own photo at the size of an icon on its chip: a circle, or a rounded rectangle when too oblong for one.
+         */
+        buildPhoto(icon, options, counter, placePhoto) {
+            var _a;
+            const size = (options.iconSize || 24) * ((_a = options.iconScale) !== null && _a !== void 0 ? _a : 1);
+            // 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 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);";
+            canvas.style.transition = ["width", "height", "opacity"].map(property => `${property} ${PHOTO_TRANSITION}ms ease-out`).join(",");
+            icon.classList.add("entity-label-icon-photo");
+            icon.style.display = options.iconScale === 0 ? "none" : "inline-flex";
+            icon.appendChild(canvas);
+            // Resting size, set once the photo's shape is known.
+            let width = 0;
+            let height = 0;
+            let grown = false;
+            const grow = (on) => {
+                if (on === grown || !width) {
+                    return;
+                }
+                grown = on;
+                const scale = on ? PHOTO_HOVER_SCALE : 1;
+                canvas.style.width = `${width * scale}px`;
+                canvas.style.height = `${height * scale}px`;
+                this.renderFor(PHOTO_TRANSITION);
+            };
+            // Draws the photo in, or drops the icon when it would not load so the label stays as its text.
+            const show = (photo) => {
+                var _a;
+                if (!photo.source) {
+                    icon.dataset.failed = "true";
+                    icon.style.display = "none";
+                    return false;
+                }
+                canvas.width = photo.source.width;
+                canvas.height = photo.source.height;
+                (_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;
+                canvas.style.width = `${width}px`;
+                canvas.style.height = `${height}px`;
+                canvas.style.borderRadius = circle ? "50%" : `${diameter * PHOTO_CORNER}px`;
+                canvas.style.opacity = "1";
+                placePhoto === null || placePhoto === void 0 ? void 0 : placePhoto(circle ? "circle" : "rect", grow);
+                return true;
+            };
+            const photos = Photos.Get(this.viewer);
+            const ready = photos.Peek(options.iconUrl, pixels);
+            if (ready) {
+                show(ready);
+                return { icon };
+            }
+            canvas.style.width = "0px";
+            canvas.style.height = "0px";
+            canvas.style.opacity = "0";
+            let arrived;
+            const arriving = new Promise(resolve => arrived = resolve);
+            let started = false;
+            const start = () => {
+                if (started) {
+                    return;
+                }
+                started = true;
+                photos.Load(options.iconUrl, pixels).then(photo => {
+                    if (!this.disposed && this.counter === counter && show(photo)) {
+                        this.renderFor(PHOTO_TRANSITION);
+                    }
+                    arrived();
+                });
+            };
+            return { icon, arriving, start };
+        }
+        /*
+         * Keeps rendering while a CSS transition changes a label's size, since placement measures it every frame.
+         */
+        renderFor(duration) {
+            const end = Date.now() + duration;
+            const step = () => {
+                if (this.disposed || !this.viewer || this.viewer.isDestroyed()) {
+                    return;
+                }
+                this.viewer.scene.requestRender();
+                if (Date.now() < end) {
+                    requestAnimationFrame(step);
+                }
+            };
+            step();
+        }
         /**
          * Removes label from the viewer and unsubscribes from events.
          */
@@ -7635,34 +8001,40 @@ var EntityLabelGroup;
         ].some(Array.isArray);
     }
     EntityLabelGroup.NeedsEntityData = NeedsEntityData;
-    // How many entities to read at once, so a long hand-picked list does not arrive as a burst.
-    const HYDRATE_AT_ONCE = 8;
+    // How many entities one read asks for, so a long hand-picked list does not arrive as one request.
+    const HYDRATE_AT_ONCE = 100;
     /*
-     * Reads the entities behind items that name one without carrying it.
+     * Reads the entities behind items that name one without carrying it, attachments included,
+     * so a label's default image needs no second request.
      */
     async function Hydrate(items, api, signal) {
+        var _a, _b;
         if (!api) {
             return items;
         }
         const hydrated = items.slice();
-        for (let start = 0; start < hydrated.length; start += HYDRATE_AT_ONCE) {
+        const missing = hydrated.map((item, at) => (item === null || item === void 0 ? void 0 : item.entityId) && !item.entity ? at : -1).filter(at => at >= 0);
+        for (let start = 0; start < missing.length; start += HYDRATE_AT_ONCE) {
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 return hydrated;
             }
-            await Promise.all(hydrated.slice(start, start + HYDRATE_AT_ONCE).map(async (item, at) => {
-                if (!(item === null || item === void 0 ? void 0 : item.entityId) || item.entity) {
-                    return;
-                }
-                try {
-                    const { entity } = await Entity$1.Get({ api, entityId: item.entityId, migrated: true });
+            const chunk = missing.slice(start, start + HYDRATE_AT_ONCE);
+            try {
+                const { entities } = await Entity$1.GetListByIds({
+                    api, entityIds: chunk.map(at => hydrated[at].entityId), expandAttachments: true, migrated: true
+                });
+                const found = new Map((entities !== null && entities !== void 0 ? entities : []).map(entity => { var _a; return [(_a = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _a === void 0 ? void 0 : _a.ID, entity]; }));
+                for (const at of chunk) {
+                    const entity = found.get(hydrated[at].entityId);
                     if (entity) {
-                        hydrated[start + at] = { ...item, entity };
+                        // The API leaves Attachment out when there are none; an empty list records that they were read.
+                        hydrated[at] = { ...hydrated[at], entity: { ...entity, Bruce: { ...entity.Bruce, Attachment: (_b = (_a = entity.Bruce) === null || _a === void 0 ? void 0 : _a.Attachment) !== null && _b !== void 0 ? _b : [] } } };
                     }
                 }
-                catch {
-                    // Rip.
-                }
-            }));
+            }
+            catch {
+                // Entities that cannot be read keep their labels, just without attribute data.
+            }
         }
         return hydrated;
     }
@@ -7749,6 +8121,10 @@ var EntityLabelGroup;
             return null;
         }
     }
+    // How many entities one attachment read asks for.
+    const IMAGES_AT_ONCE = 100;
+    // How long on-screen requests gather before they are read together.
+    const IMAGES_GATHER = 60;
     /*
      * Owns membership independently of manual labelled states, with atomic replacement and stale-load cancellation.
      */
@@ -7764,6 +8140,12 @@ var EntityLabelGroup;
             this.definitions = new Map();
             this.visibility = new Map();
             this.errors = new Map();
+            // Default image per entity, null once read and found to have none. Shared by every group.
+            this.images = new Map();
+            // Members whose labels came on screen and are waiting on, or being read for, their default image.
+            this.imagesQueued = new Set();
+            this.imagesAsking = new Set();
+            this.imagesTimer = null;
         }
         notify() {
             try {
@@ -7909,7 +8291,7 @@ var EntityLabelGroup;
             return false;
         }
         Resolve(entityId, menuItemId) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            var _a, _b, _c, _d, _e;
             const ids = Array.from(this.members.get(entityId) || []).reverse();
             for (const id of ids) {
                 const group = this.active.get(id);
@@ -7919,61 +8301,145 @@ var EntityLabelGroup;
                 if (group.definition.menuItemId && group.definition.menuItemId !== menuItemId) {
                     continue;
                 }
+                const options = this.compose(group, entityId, menuItemId);
                 const item = group.items.get(entityId);
-                const entity = (_a = item.entity) !== null && _a !== void 0 ? _a : { Bruce: { ID: entityId, Name: item.text } };
-                let iconPriority = (_b = group.definition.options) === null || _b === void 0 ? void 0 : _b.iconPriority;
-                if (Array.isArray(iconPriority)) {
-                    try {
-                        iconPriority = Calculator.GetNumber(iconPriority, entity);
+                const image = (_a = this.images.get(entityId)) !== null && _a !== void 0 ? _a : (Array.isArray((_c = (_b = item.entity) === null || _b === void 0 ? void 0 : _b.Bruce) === null || _c === void 0 ? void 0 : _c.Attachment) ? EntityLabel.GetDefaultImageUrl(item.entity, (_d = this.register.ApiGetters) === null || _d === void 0 ? void 0 : _d.GetBruceApi()) : null);
+                if (image && !EntityLabel.HasIcon(options)) {
+                    (_e = options.photo) !== null && _e !== void 0 ? _e : (options.photo = image);
+                }
+                return { groupId: id, options, item };
+            }
+            return null;
+        }
+        /*
+         * One member's label settings, with any image its own text links to but before its default image.
+         */
+        compose(group, entityId, menuItemId) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            const item = group.items.get(entityId);
+            const entity = (_a = item.entity) !== null && _a !== void 0 ? _a : { Bruce: { ID: entityId, Name: item.text } };
+            let iconPriority = (_b = group.definition.options) === null || _b === void 0 ? void 0 : _b.iconPriority;
+            if (Array.isArray(iconPriority)) {
+                try {
+                    iconPriority = Calculator.GetNumber(iconPriority, entity);
+                }
+                catch {
+                    iconPriority = null;
+                }
+            }
+            let iconScale = (_c = group.definition.options) === null || _c === void 0 ? void 0 : _c.iconScale;
+            if (Array.isArray(iconScale)) {
+                try {
+                    iconScale = Calculator.GetNumber(iconScale, entity);
+                }
+                catch {
+                    iconScale = null;
+                }
+                if (!Number.isFinite(iconScale)) {
+                    iconScale = 1;
+                }
+            }
+            if (iconScale != null) {
+                iconScale = Math.max(0, iconScale);
+            }
+            const textSetting = (_d = group.definition.options) === null || _d === void 0 ? void 0 : _d.text;
+            let resolvedText = resolveIcon(textSetting, entity);
+            const expression = Array.isArray(textSetting);
+            if (expression && !(resolvedText === null || resolvedText === void 0 ? void 0 : resolvedText.trim())) {
+                resolvedText = undefined;
+            }
+            const fallbackText = [item.text, (_e = entity.Bruce) === null || _e === void 0 ? void 0 : _e.Name, (_f = this.register.GetRego({ entityId, menuItemId })) === null || _f === void 0 ? void 0 : _f.name, entityId]
+                .find(text => typeof text === "string" && text.trim().length > 0);
+            const options = {
+                ...group.definition.options,
+                text: resolvedText !== null && resolvedText !== void 0 ? resolvedText : fallbackText,
+                iconScale: iconScale,
+                icon: resolveIcon((_g = group.definition.options) === null || _g === void 0 ? void 0 : _g.icon, entity),
+                iconUrl: resolveIcon((_h = group.definition.options) === null || _h === void 0 ? void 0 : _h.iconUrl, entity),
+                iconClass: resolveIcon((_j = group.definition.options) === null || _j === void 0 ? void 0 : _j.iconClass, entity),
+                iconColor: resolveIcon((_k = group.definition.options) === null || _k === void 0 ? void 0 : _k.iconColor, entity),
+                iconBackground: (_l = group.definition.options) === null || _l === void 0 ? void 0 : _l.iconBackground,
+                iconPriority: Number.isFinite(iconPriority) ? iconPriority : item.iconPriority,
+                iconStatus: (_o = resolveIcon((_m = group.definition.options) === null || _m === void 0 ? void 0 : _m.iconStatus, entity)) !== null && _o !== void 0 ? _o : item.iconStatus
+            };
+            if (options.attributes && item.entity && !(expression && resolvedText != null)) {
+                options.text = [
+                    (_r = (_p = options.text) !== null && _p !== void 0 ? _p : (_q = item.entity.Bruce) === null || _q === void 0 ? void 0 : _q.Name) !== null && _r !== void 0 ? _r : entityId,
+                    ...options.attributes.map(path => Entity$1.GetValue({ entity: item.entity, path })).filter(value => value != null).map(String)
+                ].join("\n");
+            }
+            if (!EntityLabel.HasIcon(options) && typeof options.text === "string") {
+                const lines = options.text.split("\n");
+                const at = lines.findIndex(line => EntityLabel.IsImageUrl(line));
+                if (at >= 0) {
+                    const [url] = lines.splice(at, 1);
+                    options.text = lines.join("\n");
+                    options.photo = url.trim();
+                }
+            }
+            return options;
+        }
+        /*
+         * Queues a member's default image once its label is on screen, so members out of view never cost a read.
+         * Requests arriving close together are read as one.
+         */
+        RequestImage(entityId) {
+            var _a, _b, _c, _d, _e, _f;
+            const api = (_a = this.register.ApiGetters) === null || _a === void 0 ? void 0 : _a.GetBruceApi();
+            if (!api || !entityId || this.images.has(entityId) || this.imagesAsking.has(entityId)) {
+                return;
+            }
+            // Members read with their attachments already know their image, or that they have none.
+            for (const id of this.members.get(entityId) || []) {
+                if (Array.isArray((_e = (_d = (_c = (_b = this.active.get(id)) === null || _b === void 0 ? void 0 : _b.items.get(entityId)) === null || _c === void 0 ? void 0 : _c.entity) === null || _d === void 0 ? void 0 : _d.Bruce) === null || _e === void 0 ? void 0 : _e.Attachment)) {
+                    return;
+                }
+            }
+            if (!this.members.has(entityId)) {
+                return;
+            }
+            this.imagesAsking.add(entityId);
+            this.imagesQueued.add(entityId);
+            (_f = this.imagesTimer) !== null && _f !== void 0 ? _f : (this.imagesTimer = setTimeout(() => {
+                this.imagesTimer = null;
+                this.readImages(api).catch(error => console.error("Label images could not be loaded", error));
+            }, IMAGES_GATHER));
+        }
+        async readImages(api) {
+            var _a, _b;
+            const ids = Array.from(this.imagesQueued);
+            this.imagesQueued.clear();
+            for (let start = 0; start < ids.length; start += IMAGES_AT_ONCE) {
+                const chunk = ids.slice(start, start + IMAGES_AT_ONCE);
+                let entities;
+                try {
+                    entities = (_a = (await Entity$1.GetListByIds({ api, entityIds: chunk, expandAttachments: true, migrated: true })).entities) !== null && _a !== void 0 ? _a : [];
+                }
+                catch {
+                    // Left unread, so the next label to come on screen for these members asks again.
+                    entities = null;
+                }
+                if (this.register.Disposed) {
+                    return;
+                }
+                const found = new Map((entities !== null && entities !== void 0 ? entities : []).map(entity => { var _a; return [(_a = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _a === void 0 ? void 0 : _a.ID, EntityLabel.GetDefaultImageUrl(entity, api)]; }));
+                const gained = [];
+                for (const id of chunk) {
+                    if (!this.imagesAsking.delete(id) || !entities) {
+                        continue;
                     }
-                    catch {
-                        iconPriority = null;
+                    const url = (_b = found.get(id)) !== null && _b !== void 0 ? _b : null;
+                    this.images.set(id, url);
+                    if (url) {
+                        gained.push(id);
                     }
                 }
-                let iconScale = (_c = group.definition.options) === null || _c === void 0 ? void 0 : _c.iconScale;
-                if (Array.isArray(iconScale)) {
-                    try {
-                        iconScale = Calculator.GetNumber(iconScale, entity);
-                    }
-                    catch {
-                        iconScale = null;
-                    }
-                    if (!Number.isFinite(iconScale)) {
-                        iconScale = 1;
-                    }
-                }
-                if (iconScale != null) {
-                    iconScale = Math.max(0, iconScale);
-                }
-                const textSetting = (_d = group.definition.options) === null || _d === void 0 ? void 0 : _d.text;
-                let resolvedText = resolveIcon(textSetting, entity);
-                const expression = Array.isArray(textSetting);
-                if (expression && !(resolvedText === null || resolvedText === void 0 ? void 0 : resolvedText.trim())) {
-                    resolvedText = undefined;
-                }
-                const fallbackText = [item.text, (_e = entity.Bruce) === null || _e === void 0 ? void 0 : _e.Name, (_f = this.register.GetRego({ entityId, menuItemId })) === null || _f === void 0 ? void 0 : _f.name, entityId]
-                    .find(text => typeof text === "string" && text.trim().length > 0);
-                const options = {
-                    ...group.definition.options,
-                    text: resolvedText !== null && resolvedText !== void 0 ? resolvedText : fallbackText,
-                    iconScale: iconScale,
-                    icon: resolveIcon((_g = group.definition.options) === null || _g === void 0 ? void 0 : _g.icon, entity),
-                    iconUrl: resolveIcon((_h = group.definition.options) === null || _h === void 0 ? void 0 : _h.iconUrl, entity),
-                    iconClass: resolveIcon((_j = group.definition.options) === null || _j === void 0 ? void 0 : _j.iconClass, entity),
-                    iconColor: resolveIcon((_k = group.definition.options) === null || _k === void 0 ? void 0 : _k.iconColor, entity),
-                    iconBackground: (_l = group.definition.options) === null || _l === void 0 ? void 0 : _l.iconBackground,
-                    iconPriority: Number.isFinite(iconPriority) ? iconPriority : item.iconPriority,
-                    iconStatus: (_o = resolveIcon((_m = group.definition.options) === null || _m === void 0 ? void 0 : _m.iconStatus, entity)) !== null && _o !== void 0 ? _o : item.iconStatus
-                };
-                if (options.attributes && item.entity && !(expression && resolvedText != null)) {
-                    options.text = [
-                        (_r = (_p = options.text) !== null && _p !== void 0 ? _p : (_q = item.entity.Bruce) === null || _q === void 0 ? void 0 : _q.Name) !== null && _r !== void 0 ? _r : entityId,
-                        ...options.attributes.map(path => Entity$1.GetValue({ entity: item.entity, path })).filter(value => value != null).map(String)
-                    ].join("\n");
+                // Reconfigured in place rather than through refresh, which would drop a standalone label and redraw it.
+                if (gained.length) {
+                    this.register.ForceUpdate({ entityIds: gained });
+                    this.register.Viewer.scene.requestRender();
                 }
-                return { groupId: id, options, item };
             }
-            return null;
         }
         RefreshEntity(entityId) {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -8031,6 +8497,11 @@ var EntityLabelGroup;
             }
             this.unindex(id);
             this.active.delete(id);
+            for (const entityId of group.items.keys()) {
+                if (!this.members.has(entityId)) {
+                    this.images.delete(entityId);
+                }
+            }
             this.refresh(new Set(group.items.keys()));
             this.notify();
         }
@@ -8039,6 +8510,7 @@ var EntityLabelGroup;
                 controller.abort();
             }
             this.pending.clear();
+            this.clearImages();
             const affected = new Set(this.members.keys());
             this.active.clear();
             this.members.clear();
@@ -8055,6 +8527,7 @@ var EntityLabelGroup;
             for (const label of this.standalone.values()) {
                 label.Dispose();
             }
+            this.clearImages();
             this.pending.clear();
             this.standalone.clear();
             this.standaloneItems.clear();
@@ -8064,6 +8537,13 @@ var EntityLabelGroup;
             this.visibility.clear();
             this.errors.clear();
         }
+        clearImages() {
+            clearTimeout(this.imagesTimer);
+            this.imagesTimer = null;
+            this.imagesQueued.clear();
+            this.imagesAsking.clear();
+            this.images.clear();
+        }
         unindex(groupId) {
             var _a;
             for (const id of ((_a = this.active.get(groupId)) === null || _a === void 0 ? void 0 : _a.items.keys()) || []) {
@@ -12417,8 +12897,15 @@ var VisualsRegister;
                 createIfMissing: params.createIfMissing !== false
             };
             const doc = this.viewer.container.ownerDocument;
-            doc.addEventListener("pointermove", this.CheckLabelHoverBounds, true);
-            this.viewer.container.addEventListener("pointerleave", this.CheckLabelHoverBounds);
+            // Only a label following the cursor should go when the cursor leaves the canvas.
+            if (params.position) {
+                doc.addEventListener("pointermove", this.CheckLabelHoverBounds, true);
+                this.viewer.container.addEventListener("pointerleave", this.CheckLabelHoverBounds);
+            }
+            else {
+                doc.removeEventListener("pointermove", this.CheckLabelHoverBounds, true);
+                this.viewer.container.removeEventListener("pointerleave", this.CheckLabelHoverBounds);
+            }
             doc.defaultView.addEventListener("blur", this.ClearLabelHover);
             this.SyncLabelHover();
             this.viewer.scene.requestRender();
@@ -12554,6 +13041,13 @@ var VisualsRegister;
             var _a;
             return (_a = this.labelGroups) === null || _a === void 0 ? void 0 : _a.Resolve(entityId, menuItemId);
         }
+        /*
+         * Called by a group label once it is on screen, so its entity's default image is read only when it can be seen.
+         */
+        RequestLabelImage(entityId) {
+            var _a;
+            (_a = this.labelGroups) === null || _a === void 0 ? void 0 : _a.RequestImage(entityId);
+        }
         RefreshLabelGroupEntity(entityId) {
             var _a, _b;
             (_a = this.labelGroups) === null || _a === void 0 ? void 0 : _a.RefreshEntity(entityId);
@@ -27315,6 +27809,159 @@ var TilesetI3sRenderManager;
     TilesetI3sRenderManager.Manager = Manager;
 })(TilesetI3sRenderManager || (TilesetI3sRenderManager = {}));
 
+/**
+ * Remaps a (assumed grayscale, server-rendered black-to-white) image's pixels into a gradient between minColor/maxColor,
+ * preserving source alpha blended with the mask's own alpha.
+ * @param imageData
+ * @param minColor
+ * @param maxColor
+ */
+function ApplyGrayscaleColorMask(imageData, minColor, maxColor) {
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+        // The texture is rendered black-to-white server-side, so any channel carries the value.
+        const t = data[i] / 255;
+        data[i] = Math.round(minColor.red + (maxColor.red - minColor.red) * t);
+        data[i + 1] = Math.round(minColor.green + (maxColor.green - minColor.green) * t);
+        data[i + 2] = Math.round(minColor.blue + (maxColor.blue - minColor.blue) * t);
+        // Preserve source transparency (eg unrasterized pixels) blended with the mask's own alpha.
+        const srcAlpha = data[i + 3] / 255;
+        const maskAlpha = minColor.alpha + (maxColor.alpha - minColor.alpha) * t;
+        data[i + 3] = Math.round(srcAlpha * maskAlpha * 255);
+    }
+}
+/**
+ * The colour a ramp gives a normalised value.
+ * @param sorted stops in ascending position, normalised into the texture's value range
+ */
+function SampleRamp(sorted, t) {
+    let upper = 0;
+    while (upper < sorted.length && sorted[upper].position < t) {
+        upper++;
+    }
+    if (upper === 0) {
+        return sorted[0].color;
+    }
+    if (upper >= sorted.length) {
+        return sorted[sorted.length - 1].color;
+    }
+    const a = sorted[upper - 1];
+    const b = sorted[upper];
+    const span = b.position - a.position;
+    // Equal positions are a hard step rather than a division by zero, which is how a band
+    // gets a crisp edge instead of a gradient into its neighbour.
+    const f = span > 0 ? (t - a.position) / span : 1;
+    return {
+        red: a.color.red + (b.color.red - a.color.red) * f,
+        green: a.color.green + (b.color.green - a.color.green) * f,
+        blue: a.color.blue + (b.color.blue - a.color.blue) * f,
+        alpha: a.color.alpha + (b.color.alpha - a.color.alpha) * f
+    };
+}
+/**
+ * A ramp baked into RGBA bytes, for a shader that cannot walk stops per fragment.
+ * @param steps entries in the lookup, each covering an equal slice of the value range
+ */
+function RampLookup(stops, low, high, steps = 256) {
+    const sorted = stops && stops.length > 0
+        ? stops.slice().sort((a, b) => a.position - b.position)
+        : null;
+    const out = new Uint8Array(steps * 4);
+    for (let i = 0; i < steps; i++) {
+        const t = steps > 1 ? i / (steps - 1) : 0;
+        const color = sorted
+            ? SampleRamp(sorted, t)
+            : {
+                red: low.red + (high.red - low.red) * t,
+                green: low.green + (high.green - low.green) * t,
+                blue: low.blue + (high.blue - low.blue) * t,
+                alpha: low.alpha + (high.alpha - low.alpha) * t
+            };
+        out[i * 4] = Math.round(color.red);
+        out[i * 4 + 1] = Math.round(color.green);
+        out[i * 4 + 2] = Math.round(color.blue);
+        out[i * 4 + 3] = Math.round(Math.min(1, Math.max(0, color.alpha)) * 255);
+    }
+    return out;
+}
+function ApplyGradientStops(imageData, stops) {
+    if (!stops || stops.length === 0) {
+        return;
+    }
+    const sorted = stops.slice().sort((a, b) => a.position - b.position);
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+        const t = data[i] / 255;
+        const color = SampleRamp(sorted, t);
+        data[i] = Math.round(color.red);
+        data[i + 1] = Math.round(color.green);
+        data[i + 2] = Math.round(color.blue);
+        const srcAlpha = data[i + 3] / 255;
+        data[i + 3] = Math.round(srcAlpha * color.alpha * 255);
+    }
+}
+/**
+ * Draws the texture's own cell grid into the tinted pixels.
+ *
+ * Drawn in texture space rather than screen space so it stays with the cells it describes and needs
+ * no per-frame work as the camera moves.
+ */
+function ApplyCellBorders(imageData, cellTexels, widthTexels, color) {
+    if (!(cellTexels > 0) || !(widthTexels > 0) || !color || color.alpha <= 0) {
+        return;
+    }
+    const { width, height, data } = imageData;
+    const edge = Math.max(1, Math.round(widthTexels));
+    for (let y = 0; y < height; y++) {
+        const onRow = (y % cellTexels) < edge;
+        for (let x = 0; x < width; x++) {
+            if (!onRow && (x % cellTexels) >= edge) {
+                continue;
+            }
+            const i = (y * width + x) * 4;
+            // Only where something is already drawn, so a border cannot invent coverage the data
+            // does not have.
+            if (data[i + 3] === 0) {
+                continue;
+            }
+            const a = color.alpha;
+            data[i] = Math.round(data[i] * (1 - a) + color.red * a);
+            data[i + 1] = Math.round(data[i + 1] * (1 - a) + color.green * a);
+            data[i + 2] = Math.round(data[i + 2] * (1 - a) + color.blue * a);
+        }
+    }
+}
+function loadImage(src) {
+    return new Promise((res, rej) => {
+        const image = new Image();
+        image.onload = () => res(image);
+        image.onerror = (e) => rej(e);
+        image.src = src;
+    });
+}
+/*
+ * Loads an image whose pixels will be read back or uploaded to WebGL, which needs a CORS-clean copy.
+ */
+async function loadImageForCanvas(url) {
+    let response;
+    try {
+        response = await fetch(url);
+    }
+    catch {
+        response = await fetch(url, { cache: "reload" });
+    }
+    if (!response.ok) {
+        throw new Error(`Image request failed with ${response.status}: ${url}`);
+    }
+    const objectUrl = URL.createObjectURL(await response.blob());
+    try {
+        return await loadImage(objectUrl);
+    }
+    finally {
+        URL.revokeObjectURL(objectUrl);
+    }
+}
+
 var GoogleSearchRenderManager;
 (function (GoogleSearchRenderManager) {
     class Manager {
@@ -27621,45 +28268,39 @@ async function createBillboardImage(url, bgColor, size) {
         return cacheData;
     }
     const IMAGE_PADDING = 8;
-    const prom = new Promise(async (res, rej) => {
-        try {
-            const response = await fetch(url);
-            const blob = await response.blob();
-            const image = new Image();
-            image.onload = () => {
-                const canvas = document.createElement("canvas");
-                canvas.width = size;
-                canvas.height = size;
-                const context = canvas.getContext("2d");
-                // Calculate padding and available space.
-                const availableSize = size - 2 * IMAGE_PADDING;
-                // Calculate resized dimensions preserving aspect ratio.
-                const { newWidth, newHeight } = calculateBillboardSpace(image.width, image.height, availableSize, availableSize);
-                // Draw the circular background.
-                context.beginPath();
-                context.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
-                context.fillStyle = bgColor;
-                context.fill();
-                // Draw the image centered within the circle.
-                const offsetX = (size - newWidth) / 2;
-                const offsetY = (size - newHeight) / 2;
-                context.drawImage(image, offsetX, offsetY, newWidth, newHeight);
-                // Draw a 2px darkened border around the circle.
-                context.beginPath();
-                context.arc(size / 2, size / 2, size / 2 - 1, 0, 2 * Math.PI, false);
-                context.lineWidth = 1;
-                context.strokeStyle = "rgba(0, 0, 0, 0.3)";
-                context.stroke();
-                res(canvas);
-            };
-            image.onerror = (e) => rej(e);
-            image.src = URL.createObjectURL(blob);
-        }
-        catch (e) {
-            rej(e);
-        }
+    const prom = loadImageForCanvas(url).then(image => {
+        const canvas = document.createElement("canvas");
+        canvas.width = size;
+        canvas.height = size;
+        const context = canvas.getContext("2d");
+        // Calculate padding and available space.
+        const availableSize = size - 2 * IMAGE_PADDING;
+        // Calculate resized dimensions preserving aspect ratio.
+        const { newWidth, newHeight } = calculateBillboardSpace(image.width, image.height, availableSize, availableSize);
+        // Draw the circular background.
+        context.beginPath();
+        context.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
+        context.fillStyle = bgColor;
+        context.fill();
+        // Draw the image centered within the circle.
+        const offsetX = (size - newWidth) / 2;
+        const offsetY = (size - newHeight) / 2;
+        context.drawImage(image, offsetX, offsetY, newWidth, newHeight);
+        // Draw a 2px darkened border around the circle.
+        context.beginPath();
+        context.arc(size / 2, size / 2, size / 2 - 1, 0, 2 * Math.PI, false);
+        context.lineWidth = 1;
+        context.strokeStyle = "rgba(0, 0, 0, 0.3)";
+        context.stroke();
+        return canvas;
     });
     _billboardCache.Set(key, prom);
+    // A failure is not kept, so the icon is tried again rather than staying missing for the session.
+    prom.catch(() => {
+        if (_billboardCache.Get(key) === prom) {
+            _billboardCache.Delete(key);
+        }
+    });
     return prom;
 }
 
@@ -43540,33 +44181,23 @@ const createImageBillboard = (url) => {
     if (cacheData) {
         return cacheData;
     }
-    const prom = new Promise(async (res, rej) => {
-        try {
-            const response = await fetch(url);
-            const blob = await response.blob();
-            const canvas = document.createElement("canvas");
-            const image = new Image();
-            image.onload = () => {
-                canvas.width = image.width;
-                canvas.height = image.height;
-                const context = canvas.getContext("2d");
-                context.drawImage(image, 0, 0);
-                const data = {
-                    canvasDataUri: canvas.toDataURL("image/png"),
-                    height: image.height
-                };
-                res(data);
-            };
-            image.onerror = (e) => {
-                rej(e);
-            };
-            image.src = URL.createObjectURL(blob);
-        }
-        catch (e) {
-            rej(e);
-        }
+    const prom = loadImageForCanvas(url).then((image) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = image.width;
+        canvas.height = image.height;
+        canvas.getContext("2d").drawImage(image, 0, 0);
+        return {
+            canvasDataUri: canvas.toDataURL("image/png"),
+            height: image.height
+        };
     });
     _billboardCache$1.Set(cacheKey, prom);
+    // A failure is not kept, so the icon is tried again rather than staying missing for the session.
+    prom.catch(() => {
+        if (_billboardCache$1.Get(cacheKey) === prom) {
+            _billboardCache$1.Delete(cacheKey);
+        }
+    });
     return prom;
 };
 /**
@@ -45026,137 +45657,6 @@ function getZIndex(style, entity, tags) {
     return EnsureNumber(zIndex);
 }
 
-/**
- * Remaps a (assumed grayscale, server-rendered black-to-white) image's pixels into a gradient between minColor/maxColor,
- * preserving source alpha blended with the mask's own alpha.
- * @param imageData
- * @param minColor
- * @param maxColor
- */
-function ApplyGrayscaleColorMask(imageData, minColor, maxColor) {
-    const data = imageData.data;
-    for (let i = 0; i < data.length; i += 4) {
-        // The texture is rendered black-to-white server-side, so any channel carries the value.
-        const t = data[i] / 255;
-        data[i] = Math.round(minColor.red + (maxColor.red - minColor.red) * t);
-        data[i + 1] = Math.round(minColor.green + (maxColor.green - minColor.green) * t);
-        data[i + 2] = Math.round(minColor.blue + (maxColor.blue - minColor.blue) * t);
-        // Preserve source transparency (eg unrasterized pixels) blended with the mask's own alpha.
-        const srcAlpha = data[i + 3] / 255;
-        const maskAlpha = minColor.alpha + (maxColor.alpha - minColor.alpha) * t;
-        data[i + 3] = Math.round(srcAlpha * maskAlpha * 255);
-    }
-}
-/**
- * The colour a ramp gives a normalised value.
- * @param sorted stops in ascending position, normalised into the texture's value range
- */
-function SampleRamp(sorted, t) {
-    let upper = 0;
-    while (upper < sorted.length && sorted[upper].position < t) {
-        upper++;
-    }
-    if (upper === 0) {
-        return sorted[0].color;
-    }
-    if (upper >= sorted.length) {
-        return sorted[sorted.length - 1].color;
-    }
-    const a = sorted[upper - 1];
-    const b = sorted[upper];
-    const span = b.position - a.position;
-    // Equal positions are a hard step rather than a division by zero, which is how a band
-    // gets a crisp edge instead of a gradient into its neighbour.
-    const f = span > 0 ? (t - a.position) / span : 1;
-    return {
-        red: a.color.red + (b.color.red - a.color.red) * f,
-        green: a.color.green + (b.color.green - a.color.green) * f,
-        blue: a.color.blue + (b.color.blue - a.color.blue) * f,
-        alpha: a.color.alpha + (b.color.alpha - a.color.alpha) * f
-    };
-}
-/**
- * A ramp baked into RGBA bytes, for a shader that cannot walk stops per fragment.
- * @param steps entries in the lookup, each covering an equal slice of the value range
- */
-function RampLookup(stops, low, high, steps = 256) {
-    const sorted = stops && stops.length > 0
-        ? stops.slice().sort((a, b) => a.position - b.position)
-        : null;
-    const out = new Uint8Array(steps * 4);
-    for (let i = 0; i < steps; i++) {
-        const t = steps > 1 ? i / (steps - 1) : 0;
-        const color = sorted
-            ? SampleRamp(sorted, t)
-            : {
-                red: low.red + (high.red - low.red) * t,
-                green: low.green + (high.green - low.green) * t,
-                blue: low.blue + (high.blue - low.blue) * t,
-                alpha: low.alpha + (high.alpha - low.alpha) * t
-            };
-        out[i * 4] = Math.round(color.red);
-        out[i * 4 + 1] = Math.round(color.green);
-        out[i * 4 + 2] = Math.round(color.blue);
-        out[i * 4 + 3] = Math.round(Math.min(1, Math.max(0, color.alpha)) * 255);
-    }
-    return out;
-}
-function ApplyGradientStops(imageData, stops) {
-    if (!stops || stops.length === 0) {
-        return;
-    }
-    const sorted = stops.slice().sort((a, b) => a.position - b.position);
-    const data = imageData.data;
-    for (let i = 0; i < data.length; i += 4) {
-        const t = data[i] / 255;
-        const color = SampleRamp(sorted, t);
-        data[i] = Math.round(color.red);
-        data[i + 1] = Math.round(color.green);
-        data[i + 2] = Math.round(color.blue);
-        const srcAlpha = data[i + 3] / 255;
-        data[i + 3] = Math.round(srcAlpha * color.alpha * 255);
-    }
-}
-/**
- * Draws the texture's own cell grid into the tinted pixels.
- *
- * Drawn in texture space rather than screen space so it stays with the cells it describes and needs
- * no per-frame work as the camera moves.
- */
-function ApplyCellBorders(imageData, cellTexels, widthTexels, color) {
-    if (!(cellTexels > 0) || !(widthTexels > 0) || !color || color.alpha <= 0) {
-        return;
-    }
-    const { width, height, data } = imageData;
-    const edge = Math.max(1, Math.round(widthTexels));
-    for (let y = 0; y < height; y++) {
-        const onRow = (y % cellTexels) < edge;
-        for (let x = 0; x < width; x++) {
-            if (!onRow && (x % cellTexels) >= edge) {
-                continue;
-            }
-            const i = (y * width + x) * 4;
-            // Only where something is already drawn, so a border cannot invent coverage the data
-            // does not have.
-            if (data[i + 3] === 0) {
-                continue;
-            }
-            const a = color.alpha;
-            data[i] = Math.round(data[i] * (1 - a) + color.red * a);
-            data[i + 1] = Math.round(data[i + 1] * (1 - a) + color.green * a);
-            data[i + 2] = Math.round(data[i + 2] * (1 - a) + color.blue * a);
-        }
-    }
-}
-function loadImage(src) {
-    return new Promise((res, rej) => {
-        const image = new Image();
-        image.onload = () => res(image);
-        image.onerror = (e) => rej(e);
-        image.src = src;
-    });
-}
-
 var TextureFrameSeriesAnimator;
 (function (TextureFrameSeriesAnimator) {
     /**
@@ -49702,8 +50202,7 @@ async function resolveTextureValue(params) {
     const cacheKey = "texture-" + url + "-" + (mask ? mask.type + "-" + mask.minColor + "-" + mask.maxColor : "none");
     let prom = _textureCache.Get(cacheKey);
     if (!prom) {
-        prom = buildTintedTextureDataUri(url, mask).catch(() => null);
-        _textureCache.Set(cacheKey, prom);
+        prom = cacheTexture(cacheKey, buildTintedTextureDataUri(url, mask));
     }
     return { dataUri: await prom, effective: textureTrace.effective };
 }
@@ -49731,11 +50230,23 @@ async function resolveTextureCondition(params) {
     const cacheKey = "texture-" + url + "-none";
     let prom = _textureCache.Get(cacheKey);
     if (!prom) {
-        prom = buildTintedTextureDataUri(url).catch(() => null);
-        _textureCache.Set(cacheKey, prom);
+        prom = cacheTexture(cacheKey, buildTintedTextureDataUri(url));
     }
     return { dataUri: await prom, effective: null };
 }
+/*
+ * Keeps a texture build for reuse, but drops a failed one so the texture is tried again next time.
+ */
+function cacheTexture(cacheKey, build) {
+    const prom = build.catch(() => {
+        if (_textureCache.Get(cacheKey) === prom) {
+            _textureCache.Delete(cacheKey);
+        }
+        return null;
+    });
+    _textureCache.Set(cacheKey, prom);
+    return prom;
+}
 /**
  * Fetches an image and, if a color mask is provided, remaps its (assumed grayscale) pixel values
  * into a gradient between the mask's minColor/maxColor, preserving source alpha.
@@ -49743,16 +50254,7 @@ async function resolveTextureCondition(params) {
  * @param mask
  */
 async function buildTintedTextureDataUri(url, mask) {
-    const response = await fetch(url);
-    const blob = await response.blob();
-    const objectUrl = URL.createObjectURL(blob);
-    let image;
-    try {
-        image = await loadImage(objectUrl);
-    }
-    finally {
-        URL.revokeObjectURL(objectUrl);
-    }
+    const image = await loadImageForCanvas(url);
     const canvas = document.createElement("canvas");
     canvas.width = image.width;
     canvas.height = image.height;
@@ -51310,7 +51812,7 @@ var StyleUtils;
     StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
 })(StyleUtils || (StyleUtils = {}));
 
-const VERSION = "7.5.4";
+const VERSION = "7.5.6";
 /**
  * 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.