From 753bfb9da931113ef2437e6c55f25d272c040aea Mon Sep 17 00:00:00 2001 From: Dustin Carlino Date: Thu, 17 Nov 2022 16:31:19 +0000 Subject: [PATCH] Use web workers to load the route snapper. #23 ... doesn't work, we can't ship a WASM thing across the web worker channels --- app.js | 8 ++++++-- route-snapper/lib.js | 14 ++------------ route-snapper/worker.js | 25 +++++++++++++++++++++++++ scheme.html | 2 -- 4 files changed, 33 insertions(+), 16 deletions(-) create mode 100644 route-snapper/worker.js diff --git a/app.js b/app.js index b2411a6d6..31bb00af2 100644 --- a/app.js +++ b/app.js @@ -223,7 +223,7 @@ export class App { } }); - this.routeSnapper = await setupRouteSnapper(this); + await setupRouteSnapper(this); }); document.getElementById("basemaps").onchange = (e) => { @@ -405,7 +405,11 @@ async function setupRouteSnapper(app) { console.log(`Grabbing ${url}`); try { const mapBytes = await fetchWithProgress(url, "snap-progress"); - window.routeSnapper = new RouteSnapper(app, mapBytes); + const worker = new Worker("route-snapper/worker.js"); + worker.onmessage = (e) => { + app.routeSnapper = new RouteSnapper(app, e.data); + }; + worker.postMessage(mapBytes); } catch (err) { console.log(`Route snapper broke: ${err}`); document.getElementById("snap-tool").innerHTML = "Failed to load"; diff --git a/route-snapper/lib.js b/route-snapper/lib.js index 5f37237c7..1ac8aaad7 100644 --- a/route-snapper/lib.js +++ b/route-snapper/lib.js @@ -1,20 +1,10 @@ -// Weird workaround to make WASM work in web workers. See -// https://rustwasm.github.io/wasm-bindgen/examples/wasm-in-web-worker.html -const { JsRouteSnapper } = wasm_bindgen; -async function setup() { - await wasm_bindgen("./route-snapper/pkg/route_snapper_bg.wasm"); -} -setup(); - export class RouteSnapper { - constructor(app, mapBytes) { + constructor(app, inner) { const circleRadiusPixels = 10; this.app = app; this.map = app.map; - console.time("Deserialize and setup JsRouteSnapper"); - this.inner = new JsRouteSnapper(mapBytes); - console.timeEnd("Deserialize and setup JsRouteSnapper"); + this.inner = inner; console.log("JsRouteSnapper ready, waiting for idle event"); this.active = false; diff --git a/route-snapper/worker.js b/route-snapper/worker.js new file mode 100644 index 000000000..ead4de2a3 --- /dev/null +++ b/route-snapper/worker.js @@ -0,0 +1,25 @@ +importScripts("./pkg/route_snapper.js"); + +console.log("Hi from worker"); + +// Weird workaround to make WASM work in web workers. See +// https://rustwasm.github.io/wasm-bindgen/examples/wasm-in-web-worker.html +const { JsRouteSnapper } = wasm_bindgen; +async function setup() { +console.log("Hi from setup"); + await wasm_bindgen("./pkg/route_snapper_bg.wasm"); +console.log("setup done"); +} +//setup(); + +// Web worker magic +self.onmessage = async (e) => { + console.log("got msg"); + await setup(); + console.log("now doing stuff"); + console.time("Deserialize and setup JsRouteSnapper"); + const inner = new JsRouteSnapper(e.data); + console.log("cool done, now pass it back"); + console.timeEnd("Deserialize and setup JsRouteSnapper"); + self.postMessage(inner); +}; diff --git a/scheme.html b/scheme.html index d3fbece2c..b8070b23e 100644 --- a/scheme.html +++ b/scheme.html @@ -9,8 +9,6 @@ - -