fix(timeline): wait for font to be loaded before generating BitmapFont

Author: Akryum

packages/app-frontend/src/assets/Roboto-Mono.ttf

@@ -7,14 +7,18 @@
 @import 'imports'
 @import 'transitions'
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap')
-
 @font-face
   font-family 'Roboto'
   font-style normal
   font-weight 400
   src local('Roboto'), local('Roboto-Regular'), url(../Roboto-Regular.woff2) format('woff2')
 
+@font-face
+  font-family 'Roboto Mono'
+  font-style normal
+  font-weight 400
+  src local('Roboto Mono'), local('Roboto-Mono'), url(../Roboto-Mono.ttf) format('truetype')
+
 html, body
   margin 0
   padding 0

packages/app-frontend/src/assets/style/index.styl

@@ -12,6 +12,7 @@ import { computed, onMounted, ref, watch, defineComponent, onUnmounted } from '@
 import { SharedData } from '@vue-devtools/shared-utils'
 import { onSharedDataChange } from '@front/util/shared-data'
 import { formatTime } from '@front/util/format'
+import { useFonts } from '@front/util/fonts'
 import {
   useTime,
   useLayers,
@@ -278,7 +279,12 @@ export default defineComponent({
       stopMove()
     })
 
+    // Fonts
+
+    const { loaded: fontsLoaded } = useFonts()
+
     return {
+      fontsLoaded,
       startTime,
       endTime,
       minTime,
@@ -386,6 +392,7 @@ export default defineComponent({
                 />
               </div>
               <TimelineView
+                v-if="fontsLoaded"
                 class="h-full"
               />
 

packages/app-frontend/src/features/timeline/Timeline.vue

@@ -38,13 +38,6 @@ import Vue from 'vue'
 PIXI.settings.ROUND_PIXELS = true
 PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST
 
-PIXI.BitmapFont.from('Roboto Mono', {
-  fontFamily: 'Roboto Mono',
-  fontSize: 9,
-}, {
-  resolution: window.devicePixelRatio,
-})
-
 delete Renderer.__plugins.interaction
 
 const LAYER_SIZE = 16
@@ -1064,8 +1057,7 @@ export default defineComponent({
           }
           if (!t) {
             t = event.groupT = new PIXI.BitmapText('', {
-              fontName: 'Roboto Mono',
-              tint: nonReactiveState.darkMode.value ? 0xffffff : 0,
+              fontName: nonReactiveState.darkMode.value ? 'roboto-white' : 'roboto-black',
             })
             t.x = 1
             t.y = Math.round(-t.height / 2)

packages/app-frontend/src/features/timeline/TimelineView.vue

@@ -0,0 +1,46 @@
+import { ref } from '@vue/composition-api'
+import * as PIXI from 'pixi.js-legacy'
+
+let installedFonts = false
+
+export async function installFonts () {
+  if (installedFonts) return
+
+  try {
+    await document.fonts.load('10px "Roboto Mono"')
+  } catch (e) {
+    console.error(e)
+  }
+
+  PIXI.BitmapFont.from('roboto-black', {
+    fontFamily: 'Roboto Mono',
+    fontSize: 9,
+    fill: '#000000',
+  }, {
+    resolution: window.devicePixelRatio,
+  })
+
+  PIXI.BitmapFont.from('roboto-white', {
+    fontFamily: 'Roboto Mono',
+    fontSize: 9,
+    fill: '#ffffff',
+  }, {
+    resolution: window.devicePixelRatio,
+  })
+
+  installedFonts = true
+}
+
+export function useFonts () {
+  const loaded = ref(installedFonts)
+
+  async function _load () {
+    await installFonts()
+    loaded.value = true
+  }
+  _load()
+
+  return {
+    loaded,
+  }
+}