Fix UI bugs: unreliable style diffs, language dropdown (#9)

* fix display of language dropdown.

* force memfont to be async with setTimeout 0 to work around unreliable style diffing.

* update examples dir.

app/src/App.tsx

@@ -62,19 +62,19 @@ function App() {
   };
 
   const onChangeLangCode = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setLangCode(`{${event.target.value}}`);
+    setLangCode(event.target.value);
   };
 
   // make the state accessible in protocol hook.
   useEffect(() => {
     renderedRef.current = rendered;
   });
-  let [fontstackName, setFontstackName] = useState<string>("");
+  let [randomInternalName, setRandomInternalName] = useState<string>("");
 
   useEffect(() => {
     if (rendered.length === 256) {
       setInProgress(false);
-      setFontstackName(Math.random().toString(36).slice(2, 7));
+      setRandomInternalName(Math.random().toString(36).slice(2, 7));
     }
   }, [rendered]);
 
@@ -107,11 +107,11 @@ function App() {
             });
           } else {
             const fname = result[2] + "-" + result[3] + ".pbf";
-            for (let r of renderedRef.current) {
-              if (r.name === fname) {
-                callback(null, new Uint8Array(r.buffer), null, null);
-              }
-            }
+            let match = renderedRef.current.find((r) => r.name === fname);
+            setTimeout(() => {
+              if (!match) throw Error("Can't find range");
+              callback(null, new Uint8Array(match.buffer), null, null);
+            }, 0);
           }
         }
         return {
@@ -168,9 +168,9 @@ function App() {
 
   let style = styleFunc(
     "memfont://{fontstack}/{range}.pbf",
-    fontstackName || "Noto Sans Regular",
+    randomInternalName || "Noto Sans Regular",
     textSize,
-    textField || langCode
+    textField || "{" + langCode + "}"
   );
 
   return (
@@ -248,7 +248,12 @@ function App() {
             <label htmlFor="language" className="f6 b db mb2">
               Language
             </label>
-            <select id="language" value={langCode} onChange={onChangeLangCode} className="mb2 w-100">
+            <select
+              id="language"
+              value={langCode}
+              onChange={onChangeLangCode}
+              className="mb2 w-100"
+            >
               <option value="">Default</option>
               <option value="name:en">en</option>
               <option value="name:ru">ru</option>

examples/NotoSansBold.sh

@@ -1,4 +1,4 @@
-../sdf-glyph pbfs/NotoSans-Bold \
+../font-maker pbfs/NotoSans-Bold \
 fonts/Noto-unhinted/NotoSans-Bold.ttf \
 fonts/Noto-unhinted/NotoSansArmenian-Bold.ttf \
 fonts/Noto-unhinted/NotoSansHebrew-Bold.ttf \

examples/NotoSansRegular.sh

@@ -1,4 +1,4 @@
-../sdf-glyph pbfs/NotoSans-Regular \
+../font-maker pbfs/NotoSans-Regular \
 fonts/Noto-unhinted/NotoSans-Regular.ttf \
 fonts/Noto-unhinted/NotoSansArmenian-Regular.ttf \
 fonts/Noto-unhinted/NotoSansHebrew-Regular.ttf \