plop

romgere · May 30, 2024 · 3c0ac81 · 3c0ac81
1 parent 99182ce
commit 3c0ac81
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 83 deletions.
diff --git a/app/routes/app.ts b/app/routes/app.ts
@@ -1,10 +1,10 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import type IntlService from 'ember-intl/services/intl';
-import type FontManagerService from 'text2stl/services/font-manager';
-
 import { Registry as Services } from '@ember/service';
 
+import type IntlService from 'ember-intl/services/intl';
+import type FontManagerService from 'text2stl/services/font-manager';
+import type HarfbuzzService from 'text2stl/services/harfbuzz';
 import type RouterService from '@ember/routing/router-service';
 
 type Transition = ReturnType<RouterService['transitionTo']>;
@@ -13,6 +13,7 @@ export default class AppRoute extends Route {
   @service declare intl: IntlService;
   @service declare router: Services['router'];
   @service declare fontManager: FontManagerService;
+  @service declare harfbuzz: HarfbuzzService;
 
   constructor(props: object | undefined) {
     super(props);
@@ -23,6 +24,7 @@ export default class AppRoute extends Route {
     this.intl.locale = locale === 'en-us' ? locale : [locale, 'en-us'];
     // No await here, let's the loading happen & await for it in generator route
     this.fontManager.loadFont();
+    this.harfbuzz.loadWASM();
   }
 
   afterModel() {

diff --git a/app/routes/app/generator.ts b/app/routes/app/generator.ts
@@ -1,15 +1,18 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import type FontManagerService from 'text2stl/services/font-manager';
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import config from 'text2stl/config/environment';
 
+import type FontManagerService from 'text2stl/services/font-manager';
+import type HarfbuzzService from 'text2stl/services/harfbuzz';
+
 const {
   APP: { textMakerDefault },
 } = config;
 
 export default class GeneratorRoute extends Route {
   @service declare fontManager: FontManagerService;
+  @service declare harfbuzz: HarfbuzzService;
 
   queryParams = {
     modelSettings: {
@@ -31,12 +34,12 @@ export default class GeneratorRoute extends Route {
 
       // No custom font via QP
       model.customFont = undefined;
-      model.fontName = textMakerDefault.fontName;
-      model.variantName = textMakerDefault.variantName;
     }
 
     // Ensure font list is fully load
     await this.fontManager.loadFont();
+    // Ensure harfbuzzJS is fully load (WASM loaded & lib instance created)
+    await this.harfbuzz.loadWASM();
 
     return model;
   }

diff --git a/app/services/font-manager.ts b/app/services/font-manager.ts
@@ -1,6 +1,9 @@
 import Service from '@ember/service';
-import * as opentype from 'opentype.js';
 import config from 'text2stl/config/environment';
+import { inject as service } from '@ember/service';
+
+import type HarfbuzzService from 'text2stl/services/harfbuzz';
+import type { HBFont, HBFace } from 'harfbuzzjs/hbjs';
 
 export type Category = 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
 export type Script =
@@ -81,7 +84,14 @@ type GoogleFontApiResponse = {
   }[];
 };
 
+export interface FaceAndFont {
+  font: HBFont;
+  face: HBFace;
+}
+
 export default class FontManagerService extends Service {
+  @service declare harfbuzz: HarfbuzzService;
+
   availableFontScript: Script[] = [
     'arabic',
     'bengali',
@@ -120,9 +130,7 @@ export default class FontManagerService extends Service {
 
   fontList: Map<string, Font> = new Map();
 
-  fontCache: Record<string, opentype.Font> = {};
-
-  opentype = opentype; // For easy mock
+  fontCache: Record<string, FaceAndFont> = {};
 
   // For easy mock
   fetch(input: RequestInfo, init?: RequestInit | undefined): Promise<Response> {
@@ -216,7 +224,16 @@ export default class FontManagerService extends Service {
     document.adoptedStyleSheets.push(await stylesheet.replace(style));
   }
 
-  async fetchFont(fontName: string, variantName?: Variant): Promise<opentype.Font> {
+  private openHBFont(buffer: ArrayBuffer): FaceAndFont {
+    const blob = this.harfbuzz.hb.createBlob(buffer);
+    const face = this.harfbuzz.hb.createFace(blob, 0);
+    return {
+      font: this.harfbuzz.hb.createFont(face),
+      face,
+    };
+  }
+
+  async fetchFont(fontName: string, variantName?: Variant): Promise<FaceAndFont> {
     const font = this.fontList.get(fontName);
     if (!font) {
       throw `Unknown font name ${fontName}`;
@@ -238,15 +255,15 @@ export default class FontManagerService extends Service {
     if (!this.fontCache[cacheName]) {
       const res = await this.fetch(url.replace('http:', 'https:'));
       const fontData = await res.arrayBuffer();
-      this.fontCache[cacheName] = this.opentype.parse(fontData);
+      this.fontCache[cacheName] = this.openHBFont(fontData);
     }
 
     return this.fontCache[cacheName];
   }
 
-  async loadCustomFont(fontTTFFile: Blob): Promise<opentype.Font> {
+  async loadCustomFont(fontTTFFile: Blob): Promise<FaceAndFont> {
     const fontAsBuffer = await fontTTFFile.arrayBuffer();
-    return this.opentype.parse(fontAsBuffer);
+    return this.openHBFont(fontAsBuffer);
   }
 
   private chunk<T>(array: T[], chunkSize: number) {