js code can add multiple font files [#2]

maplibre · Dec 2, 2022 · b757657 · b757657
1 parent d57a4fc
commit b757657
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/app/public/worker.js b/app/public/worker.js
@@ -3,22 +3,23 @@ importScripts("sdfglyph.js");
 self.onmessage = function (e) {
   const fontstack_ptr = Module.ccall("create_fontstack", "number", [], []);
 
-  const uint8Arr = e.data;
-  const num_bytes = uint8Arr.length * uint8Arr.BYTES_PER_ELEMENT;
-  const data_ptr = Module._malloc(num_bytes);
-  const data_on_heap = new Uint8Array(
-    Module.HEAPU8.buffer,
-    data_ptr,
-    num_bytes
-  );
-  data_on_heap.set(uint8Arr);
-
-  Module.ccall(
-    "fontstack_add_face",
-    null,
-    ["number", "number", "number"],
-    [fontstack_ptr, data_ptr, num_bytes]
-  );
+  for (let ab of e.data) {
+    let uint8Arr = new Uint8Array(ab);
+    const num_bytes = uint8Arr.length * uint8Arr.BYTES_PER_ELEMENT;
+    const data_ptr = Module._malloc(num_bytes);
+    const data_on_heap = new Uint8Array(
+      Module.HEAPU8.buffer,
+      data_ptr,
+      num_bytes
+    );
+    data_on_heap.set(uint8Arr);
+    Module.ccall(
+      "fontstack_add_face",
+      null,
+      ["number", "number", "number"],
+      [fontstack_ptr, data_ptr, num_bytes]
+    );
+  }
 
   const s = Module.ccall(
     "fontstack_name",

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -3,7 +3,12 @@ import "tachyons/css/tachyons.min.css";
 import Pbf from "pbf";
 import JSZip from "jszip";
 import { saveAs } from "file-saver";
-import { Map, MapRef, NavigationControl, AttributionControl } from "react-map-gl";
+import {
+  Map,
+  MapRef,
+  NavigationControl,
+  AttributionControl,
+} from "react-map-gl";
 import maplibregl from "maplibre-gl";
 
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -113,14 +118,15 @@ function App() {
     });
   }
 
-  function addFont(event: React.ChangeEvent<HTMLInputElement>) {
+  async function addFont(event: React.ChangeEvent<HTMLInputElement>) {
     setRendered([]);
-    const file_reader = new FileReader();
-    file_reader.onload = function (loadEvent) {
-      const uint8Arr = new Uint8Array(loadEvent.target!.result as ArrayBuffer);
-      worker.postMessage(uint8Arr, [uint8Arr.buffer]);
-    };
-    file_reader.readAsArrayBuffer(event.target!.files![0]);
+
+    let bufs = [];
+    for (let file of event.target.files!) {
+      console.log(file);
+      bufs.push(await file.arrayBuffer());
+    }
+    worker.postMessage(bufs);
   }
 
   const example_file = "Lato-Bold.ttf";
@@ -133,7 +139,7 @@ function App() {
       })
       .then((buffer) => {
         const uint8Arr = new Uint8Array(buffer);
-        worker.postMessage(uint8Arr, [uint8Arr.buffer]);
+        worker.postMessage([uint8Arr], [uint8Arr.buffer]);
       });
   }
 
@@ -153,7 +159,7 @@ function App() {
         <div className="bg-light-blue pa2 dim pointer" onClick={loadExample}>
           Load Example {example_file}
         </div>
-        <input className="mt3" type="file" onChange={addFont} />
+        <input className="mt3" type="file" onChange={addFont} multiple={true} />
         <div className="progress-bar mt2">
           <span className="progress-bar-fill"></span>
         </div>
@@ -193,7 +199,7 @@ function App() {
             className="w-100 h-100 absolute bg-black flex items-center justify-center"
             style={{ opacity: 0.3, zIndex: 2 }}
           >
-            { progress }
+            {progress}
           </div>
         ) : null}
       </div>