From b9e742ee6b64c74beb5d251485442c830a70aac6 Mon Sep 17 00:00:00 2001
From: Just van Rossum <justvanrossum@gmail.com>
Date: Wed, 6 Sep 2023 12:00:45 +0200
Subject: [PATCH 1/2] Render a dotter placeholder square when a component
 references an empty glyph

---
 src/fontra/client/core/glyph-controller.js | 29 +++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/fontra/client/core/glyph-controller.js b/src/fontra/client/core/glyph-controller.js
index 4dd80040e..e92a80bb6 100644
--- a/src/fontra/client/core/glyph-controller.js
+++ b/src/fontra/client/core/glyph-controller.js
@@ -10,7 +10,7 @@ import {
   registerRepresentationFactory,
 } from "./representation-cache.js";
 import { Transform } from "./transform.js";
-import { enumerate, makeAffineTransform } from "./utils.js";
+import { enumerate, makeAffineTransform, range } from "./utils.js";
 import { StaticGlyph } from "./var-glyph.js";
 import {
   VariationModel,
@@ -589,6 +589,9 @@ async function* iterFlattenedComponentPaths(
       console.log(errorMessage);
       return;
     }
+    if (!inst.path.numPoints && !inst.components.length) {
+      inst = makeEmptyComponentPlaceholderGlyph();
+    }
   }
   let t = makeAffineTransform(compo.transformation);
   if (transformation) {
@@ -823,6 +826,30 @@ function makeMissingComponentPlaceholderGlyph() {
   return StaticGlyph.fromObject({ path: path });
 }
 
+function makeEmptyComponentPlaceholderGlyph() {
+  const path = new VarPackedPath();
+  const numSq = 11;
+  const side = 14;
+  const dist = side * 2;
+
+  function sq(x, y) {
+    path.moveTo(x, y);
+    path.lineTo(x, y + side);
+    path.lineTo(x + side, y + side);
+    path.lineTo(x + side, y);
+    path.closePath();
+  }
+
+  for (const i of range(numSq + 1)) {
+    sq(dist * i, 0);
+    sq(0, dist + dist * i);
+    sq(dist + dist * i, 12 * dist);
+    sq(12 * dist, dist * i);
+  }
+
+  return StaticGlyph.fromObject({ path: path });
+}
+
 function makeDefaultLocation(axes) {
   return Object.fromEntries(axes.map((axis) => [axis.name, axis.defaultValue]));
 }

From 3a136843939e5041b40829524df90d280adb9106 Mon Sep 17 00:00:00 2001
From: Just van Rossum <justvanrossum@gmail.com>
Date: Wed, 6 Sep 2023 12:02:44 +0200
Subject: [PATCH 2/2] Remove silly + 1

---
 src/fontra/client/core/glyph-controller.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/fontra/client/core/glyph-controller.js b/src/fontra/client/core/glyph-controller.js
index e92a80bb6..f225e16b5 100644
--- a/src/fontra/client/core/glyph-controller.js
+++ b/src/fontra/client/core/glyph-controller.js
@@ -828,7 +828,7 @@ function makeMissingComponentPlaceholderGlyph() {
 
 function makeEmptyComponentPlaceholderGlyph() {
   const path = new VarPackedPath();
-  const numSq = 11;
+  const numSq = 12;
   const side = 14;
   const dist = side * 2;
 
@@ -840,7 +840,7 @@ function makeEmptyComponentPlaceholderGlyph() {
     path.closePath();
   }
 
-  for (const i of range(numSq + 1)) {
+  for (const i of range(numSq)) {
     sq(dist * i, 0);
     sq(0, dist + dist * i);
     sq(dist + dist * i, 12 * dist);