Merge pull request #269 from PrefectHQ/on-the-fly-bitmap-fonts

use on-the-fly bitmap font spritesheets

.vscode/settings.json

@@ -21,6 +21,7 @@
   "cSpell.words": [
     "combobox",
     "consts",
+    "fontfaceobserver",
     "gsap",
     "heroicons",
     "isequal",

package.json

@@ -39,6 +39,7 @@
   "devDependencies": {
     "@prefecthq/eslint-config": "1.0.31",
     "@types/d3": "7.4.1",
+    "@types/fontfaceobserver": "^2.1.2",
     "@types/lodash.isequal": "4.5.6",
     "@types/lodash.merge": "4.6.7",
     "@types/node": "^20.1.7",
@@ -65,6 +66,7 @@
     "@pixi-essentials/cull": "2.0.0",
     "d3": "7.8.5",
     "date-fns": "2.30.0",
+    "fontfaceobserver": "^2.3.0",
     "lodash.isequal": "4.5.0",
     "lodash.merge": "4.6.2",
     "pixi-viewport": "5.0.2",

src/factories/label.ts

@@ -8,9 +8,7 @@ export async function nodeLabelFactory() {
   const { inter } = await waitForFonts()
   const cull = await waitForLabelCull()
 
-  const label = inter('', {
-    fontSize: 12,
-  })
+  const label = inter('')
 
   cull.add(label)
 

src/factories/nodeFlowRun.ts

@@ -130,10 +130,10 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
 
     const labelMinLeft = Math.max(barRight, buttonRight)
     const inside = barWithoutMargin > labelMinLeft + label.width
-    const y = bar.height / 2
+    const yOffset = 0.5
+    const y = bar.height / 2 - label.height / 2 - yOffset
     const x = inside ? labelMinLeft + margin : arrowButton.x + arrowButton.width + margin
 
-    label.anchor.set(0, 0.5)
     label.position = { x, y }
 
     return label

src/factories/nodeTaskRun.ts

@@ -35,7 +35,7 @@ export async function taskRunContainerFactory() {
     // todo: this should probably be nodePadding
     const margin = config.styles.nodeMargin
     const inside = bar.width > margin + label.width + margin
-    const y = bar.height / 2 - label.height
+    const y = bar.height / 2 - label.height / 2
 
     if (inside) {
       return {