From 97c090373b6281fa905a74770179bfbe68cc8f21 Mon Sep 17 00:00:00 2001 From: valadaptive Date: Thu, 30 May 2024 11:30:09 -0400 Subject: [PATCH] Restore the structure of the old font code --- src/load-svg.ts | 68 +++++++++++++++++++++++++++---------------------- 1 file changed, 37 insertions(+), 31 deletions(-) diff --git a/src/load-svg.ts b/src/load-svg.ts index 8e76b40..474f1d8 100644 --- a/src/load-svg.ts +++ b/src/load-svg.ts @@ -12,39 +12,44 @@ const fonts = { type FontName = keyof typeof fonts; -const isFont = Object.prototype.hasOwnProperty.bind(fonts) as (font: unknown) => font is keyof typeof fonts; - -const fontPromises: Partial>> = {}; - -const fontURLs: Partial> = {}; +const loadedFonts: Record | null> = { + 'Sans Serif': null, + 'Serif': null, + 'Handwriting': null, + 'Marker': null, + 'Curly': null, + 'Pixel': null, + 'Scratch': null, +}; // Load fonts for SVG costumes on-demand. -const loadFonts = async(fontNames: Iterable) => { - const promises: Promise[] = []; +const loadFonts = async(fontNames: Iterable): Promise> => { for (const name of fontNames) { - if (!isFont(name)) { + if (!Object.prototype.hasOwnProperty.call(loadedFonts, name)) { continue; } - const cachedPromise = fontPromises[name]; - promises.push( - !cachedPromise ? - fontPromises[name] = fetch(import.meta.resolve(fonts[name])) - .then(response => response.blob()) - .then(blob => new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onload = () => { - fontURLs[name] = reader.result as string; - resolve(); - }; - reader.onerror = () => { - reject(reader.error); - }; - reader.readAsDataURL(blob); - })) : - cachedPromise, - ); + if (loadedFonts[name as FontName] === null) { + loadedFonts[name as FontName] = fetch(import.meta.resolve(fonts[name as FontName])) + .then(response => response.blob()) + .then(blob => new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + resolve(reader.result as string); + }; + reader.onerror = () => { + reject(reader.error); + }; + reader.readAsDataURL(blob); + })); + } + } + + const fontURLs = {} as Record; + const fontPromises = await Promise.all(Object.values(loadedFonts)); + for (let i = 0; i < fontPromises.length; i++) { + fontURLs[Object.keys(loadedFonts)[i] as FontName] = fontPromises[i]!; } - await Promise.all(promises); + return fontURLs; }; const loadSVG = async(src: Blob): Promise<{url: string; viewBox: Rectangle}> => { @@ -88,16 +93,17 @@ const loadSVG = async(src: Blob): Promise<{url: string; viewBox: Rectangle}> => } if (foundFonts.size > 0) { - await loadFonts(foundFonts.values()); + const fontURLs = await loadFonts(foundFonts.values()); const css = []; // Inject fonts as data URLs into the SVG for (const fontName of foundFonts) { - const fontURL = isFont(fontName) && fontURLs[fontName]; - if (fontURL) { - css.push("@font-face{font-family:'", fontName, "';src:url('", fontURL, "')}"); + if (!Object.prototype.hasOwnProperty.call(fonts, fontName)) { + continue; } + const fontURL = fontURLs[fontName as FontName]; + css.push("@font-face{font-family:'", fontName, "';src:url('", fontURL, "')}"); } const defs = svgDOM.createElementNS('http://www.w3.org/2000/svg', 'defs');