Re-render shields after fonts load

scripts/build.ts

@@ -41,6 +41,7 @@ const buildWith = async (
       "src/americana.js",
       "src/bare_americana.js",
       "src/shieldtest.js",
+      "src/js/load_fonts.js",
     ],
     format: "esm",
     bundle: true,

scripts/generate_samples.ts

@@ -4,7 +4,7 @@ import type * as maplibre from "maplibre-gl";
 
 // Declare a global augmentation for the Window interface
 declare global {
-  interface Window {
+  interface WindowWithMap extends Window {
     map?: maplibre.Map;
   }
 }
@@ -43,10 +43,14 @@ const screenshots: SampleSpecification[] =
 fs.mkdirSync(sampleFolder, { recursive: true });
 
 const browser = await chromium.launch({
-  headless: true,
   executablePath: process.env.CHROME_BIN,
+  args: ["--headless=new"],
+});
+const context = await browser.newContext({
+  bypassCSP: true,
+  userAgent:
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36",
 });
-const context = await browser.newContext();
 
 const page = await context.newPage();
 
@@ -64,7 +68,7 @@ async function createImage(screenshot: SampleSpecification) {
 
   // Wait for map to load, then wait two more seconds for images, etc. to load.
   try {
-    await page.waitForFunction(() => window.map?.loaded(), {
+    await page.waitForFunction(() => (window as WindowWithMap).map?.loaded(), {
       timeout: 3000,
     });
   } catch (e) {

shieldlib/src/shield.d.ts

@@ -15,7 +15,8 @@ export function storeNoShield(
 export function missingIconLoader(
   renderContext: ShieldRenderingContext,
   routeDef: RouteDefinition,
-  spriteID: string
+  spriteID: string,
+  update?: boolean
 ): void;
 
 export function romanizeRef(ref: string): string;

shieldlib/src/shield.js

@@ -166,17 +166,17 @@ function drawShieldText(r, ctx, shieldDef, routeDef) {
   return ctx;
 }
 
-export function missingIconLoader(r, routeDef, spriteID) {
+export function missingIconLoader(r, routeDef, spriteID, update) {
   let ctx = generateShieldCtx(r, routeDef);
   if (ctx == null) {
     // Want to return null here, but that gives a corrupted display. See #243
     console.warn("Didn't produce a shield for", JSON.stringify(routeDef));
     ctx = r.gfxFactory.createGraphics({ width: 1, height: 1 });
   }
-  storeSprite(r, spriteID, ctx);
+  storeSprite(r, spriteID, ctx, update);
 }
 
-function storeSprite(r, id, ctx) {
+function storeSprite(r, id, ctx, update) {
   const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   r.spriteRepo.putSprite(
     id,
@@ -185,7 +185,8 @@ function storeSprite(r, id, ctx) {
       height: ctx.canvas.height,
       data: imgData.data,
     },
-    r.px(1)
+    r.px(1),
+    update
   );
 }
 

shieldlib/src/shield_renderer.ts

@@ -1,4 +1,8 @@
-import { Map, MapStyleImageMissingEvent, StyleImage } from "maplibre-gl";
+import {
+  Map as MapLibre,
+  MapStyleImageMissingEvent,
+  StyleImage,
+} from "maplibre-gl";
 import {
   Bounds,
   DebugOptions,
@@ -52,15 +56,26 @@ export type ShapeDrawFunction = (
 ) => number;
 
 class MaplibreGLSpriteRepository implements SpriteRepository {
-  map: Map;
-  constructor(map: Map) {
+  map: MapLibre;
+  constructor(map: MapLibre) {
     this.map = map;
   }
   getSprite(spriteID: string): StyleImage {
     return this.map.style.getImage(spriteID);
   }
-  putSprite(spriteID: string, image: ImageData, pixelRatio: number): void {
-    this.map.addImage(spriteID, image, { pixelRatio: pixelRatio });
+  putSprite(
+    spriteID: string,
+    image: ImageData,
+    pixelRatio: number,
+    update: boolean
+  ): void {
+    if (update) {
+      console.log(`update ${spriteID}`);
+      this.map.updateImage(spriteID, image);
+    } else {
+      console.log(`add ${spriteID}`);
+      this.map.addImage(spriteID, image, { pixelRatio: pixelRatio });
+    }
   }
 }
 
@@ -69,6 +84,10 @@ export class AbstractShieldRenderer {
   private _shieldPredicate: StringPredicate = () => true;
   private _networkPredicate: StringPredicate = () => true;
   private _routeParser: RouteParser;
+  private _fontsLoaded: boolean = false;
+  /** Cache images that are loaded before fonts so they can be re-rendered later */
+  private _preFontImageCache: Map<string, RouteDefinition> = new Map();
+
   /** @hidden */
   private _renderContext: ShieldRenderingContext;
   private _shieldDefCallbacks = [];
@@ -123,9 +142,25 @@ export class AbstractShieldRenderer {
   }
 
   /** Set which MaplibreGL map to handle shields for */
-  public renderOnMaplibreGL(map: Map): AbstractShieldRenderer {
+  public renderOnMaplibreGL(map: MapLibre): AbstractShieldRenderer {
     this.renderOnRepository(new MaplibreGLSpriteRepository(map));
     map.on("styleimagemissing", this.getStyleImageMissingHandler());
+    document.fonts.ready.then(() => {
+      this._fontsLoaded = true;
+      if (this._preFontImageCache.size == 0) {
+        return;
+      }
+      console.log("Re-processing shields with loaded fonts");
+
+      // Loop through each previously-loaded shield and re-render it
+      for (let [id, routeDef] of this._preFontImageCache.entries()) {
+        missingIconLoader(this._renderContext, routeDef, id, true);
+        console.log(`Updated ${id} post font-load`); // Example action
+      }
+
+      this._preFontImageCache.clear();
+      map.redraw();
+    });
     return this;
   }
 
@@ -166,7 +201,10 @@ export class AbstractShieldRenderer {
           return;
         }
         if (routeDef) {
-          missingIconLoader(this._renderContext, routeDef, e.id);
+          if (!this._fontsLoaded && routeDef.ref) {
+            this._preFontImageCache.set(e.id, routeDef);
+          }
+          missingIconLoader(this._renderContext, routeDef, e.id, false);
         }
       } catch (err) {
         console.error(`Exception while loading image ‘${e?.id}’:\n`, err);

shieldlib/src/types.d.ts

@@ -23,7 +23,12 @@ export interface SpriteProducer {
   getSprite(spriteID: string): StyleImage;
 }
 export interface SpriteConsumer {
-  putSprite(spriteID: string, image: ImageData, pixelRatio: number): void;
+  putSprite(
+    spriteID: string,
+    image: ImageData,
+    pixelRatio: number,
+    update: boolean
+  ): void;
 }
 export type SpriteRepository = SpriteProducer & SpriteConsumer;
 export interface ShieldDefinitions {

shieldlib/src/types.ts

@@ -135,7 +135,12 @@ export interface SpriteProducer {
 
 /** Store a sprite graphic based on an ID */
 export interface SpriteConsumer {
-  putSprite(spriteID: string, image: ImageData, pixelRatio: number): void;
+  putSprite(
+    spriteID: string,
+    image: ImageData,
+    pixelRatio: number,
+    update: boolean
+  ): void;
 }
 
 /** Respository that can store and retrieve sprite graphics */

src/bare_map.html

@@ -5,6 +5,7 @@
     <title>OpenStreetMap Americana</title>
     <link rel="preconnect" href="https://osm-americana.github.io" />
     <link href="fonts.css" rel="stylesheet" />
+    <script type="module" src="js/load_fonts.js"></script>
     <meta
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
@@ -27,13 +28,6 @@
   </head>
 
   <body>
-    <p style="
-            font-family: 'Noto Sans Condensed';
-            font-weight: 500;
-            visibility: hidden;
-          ">
-      Invisible text so the font will load early
-    </p>
     <div id="map"></div>
   </body>
 </html>

src/fonts.css

@@ -6,6 +6,7 @@
       format("woff");
   font-weight: 500;
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Noto Sans Armenian Condensed";
@@ -15,4 +16,5 @@
       format("woff");
   font-weight: 500;
   font-style: normal;
+  font-display: swap;
 }

src/index.html

@@ -5,6 +5,7 @@
     <title>OpenStreetMap Americana</title>
     <link rel="preconnect" href="https://osm-americana.github.io" />
     <link href="fonts.css" rel="stylesheet" />
+    <script type="module" src="js/load_fonts.js"></script>
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <meta
       name="viewport"
@@ -98,15 +99,6 @@
   </head>
 
   <body>
-    <p
-      style="
-        font-family: 'Noto Sans Condensed';
-        font-weight: 500;
-        visibility: hidden;
-      "
-    >
-      Invisible text so the font will load early
-    </p>
     <div id="map"></div>
     <div id="attribution-logo"></div>
     <a href="https://github.com/ZeLonewolf/openstreetmap-americana/"

src/js/load_fonts.js

@@ -0,0 +1,26 @@
+function loadFontByCreatingInvisibleDiv(fontFamily, dummyText) {
+  // Create a div element
+  const div = document.createElement("div");
+
+  // Set the font-family
+  div.style.fontFamily = fontFamily;
+
+  // Set the dummy text
+  div.textContent = dummyText;
+
+  // Make the div invisible
+  div.style.position = "absolute";
+  div.style.opacity = "0";
+  div.style.pointerEvents = "none";
+  div.style.zIndex = "-1";
+  div.style.left = "-1000px";
+  div.style.top = "-1000px";
+
+  // Append the div to the body
+  document.body.appendChild(div);
+
+  return div;
+}
+
+loadFontByCreatingInvisibleDiv("Noto Sans Condensed", "dummy");
+loadFontByCreatingInvisibleDiv("Noto Sans Armenian Condensed", "Քանզի անդամ");

src/shieldtest.html

@@ -5,6 +5,7 @@
     <title>Shield Test</title>
     <link rel="preconnect" href="https://osm-americana.github.io" />
     <link href="fonts.css" rel="stylesheet" />
+    <script type="module" src="js/load_fonts.js"></script>
     <style>
       body {
         background: #faf6f2;
@@ -33,15 +34,6 @@
   </head>
 
   <body>
-    <p
-      style="
-        font-family: 'Noto Sans Condensed';
-        font-weight: 500;
-        visibility: hidden;
-      "
-    >
-      Invisible text so the font will load early
-    </p>
     <table id="shield-table">
       <thead>
         <tr>