Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-render shields after fonts load #991

Merged
merged 18 commits into from
Dec 13, 2023
Merged

Re-render shields after fonts load #991

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b840832
Re-render after font load
ZeLonewolf Oct 31, 2023
363af8c
Refactor SpriteRepository for updateImage()
ZeLonewolf Oct 31, 2023
ea05b39
Update shieldlib/src/shield_renderer.ts
ZeLonewolf Nov 1, 2023
1344f63
Add missing update param
ZeLonewolf Nov 1, 2023
c73143e
Merge branch 'main' into zlw-font-reload
ZeLonewolf Nov 1, 2023
2c353b3
Add code path through shield.js
ZeLonewolf Nov 2, 2023
f5a6632
Working font loader
ZeLonewolf Nov 4, 2023
4af46a4
Fix headless mode
ZeLonewolf Nov 5, 2023
f1159bf
Remove unneeded font check
ZeLonewolf Nov 5, 2023
716e0a9
Add font load code to shield renderer
ZeLonewolf Nov 7, 2023
84abfa2
Improved font loading
ZeLonewolf Nov 7, 2023
efd68a6
Remove font load hack
ZeLonewolf Nov 7, 2023
635d51a
Merge branch 'main' into zlw-font-reload
ZeLonewolf Nov 8, 2023
cfa653d
Fix method params
ZeLonewolf Nov 8, 2023
8ae9ad1
Merge branch 'main' into zlw-font-reload
ZeLonewolf Nov 28, 2023
29a1164
Merge branch 'main' into zlw-font-reload
ZeLonewolf Dec 5, 2023
eb16c23
Remove extra debug logging
ZeLonewolf Dec 12, 2023
0b59d81
Merge branch 'main' into zlw-font-reload
ZeLonewolf Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion shieldlib/src/shield.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export function storeNoShield(
export function missingIconLoader(
renderContext: ShieldRenderingContext,
routeDef: RouteDefinition,
spriteID: string
spriteID: string,
update?: boolean
ZeLonewolf marked this conversation as resolved.
Show resolved Hide resolved
): void;

export function romanizeRef(ref: string): string;
50 changes: 43 additions & 7 deletions shieldlib/src/shield_renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import { Map, MapStyleImageMissingEvent, StyleImage } from "maplibre-gl";
import {
Map as MapLibre,
jleedev marked this conversation as resolved.
Show resolved Hide resolved
MapStyleImageMissingEvent,
StyleImage,
} from "maplibre-gl";
import {
Bounds,
DebugOptions,
Expand Down Expand Up @@ -52,15 +56,24 @@ 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) {
this.map.updateImage(spriteID, image);
} else {
this.map.addImage(spriteID, image, { pixelRatio: pixelRatio });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The last parameter to addImage() accepts some other options, of which sdf may be the most relevant to a client of this library. Should we plumb through an entire options object?

}
}
}

Expand All @@ -69,6 +82,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 = [];
Expand Down Expand Up @@ -123,9 +140,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();
ZeLonewolf marked this conversation as resolved.
Show resolved Hide resolved
map.redraw();
});
return this;
}

Expand Down Expand Up @@ -166,7 +199,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);
Expand Down
7 changes: 6 additions & 1 deletion shieldlib/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
7 changes: 0 additions & 7 deletions src/bare_map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,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>
9 changes: 0 additions & 9 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,15 +98,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/"
Expand Down
9 changes: 0 additions & 9 deletions src/shieldtest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,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>
Expand Down