Instant UI feedback

examples/mvtlayer.worker.js

@@ -11,6 +11,20 @@ const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9
 const worker = self;
 
 let frameState;
+const canvas = new OffscreenCanvas(1, 1);
+
+function getCircularReplacer() {
+  const seen = new WeakSet();
+  return function(key, value) {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return '[circular]';
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+}
 
 function getTilePriority(tile, tileSourceKey, tileCenter, tileResolution) {
   return tilePriorityFunction(frameState, tile, tileSourceKey, tileCenter, tileResolution);
@@ -24,13 +38,13 @@ const layer = new VectorTileLayer({
       '{z}/{x}/{y}.vector.pbf?access_token=' + key
   })
 });
+const renderer = layer.getRenderer();
 const tileQueue = new TileQueue(getTilePriority, function() {
-  worker.postMessage({type: 'render'});
+  worker.postMessage({type: 'request-render'});
 });
 const maxTotalLoading = 8;
 const maxNewLoads = 2;
 
-const renderer = layer.getRenderer();
 
 renderer.useContainer = function(target, transform, opacity) {
   target.style = {};
@@ -39,37 +53,38 @@ renderer.useContainer = function(target, transform, opacity) {
   this.container = {
     firstElementChild: target
   };
-  worker.postMessage({
-    type: 'transform-opacity',
-    transform: transform,
-    opacity: opacity
+  layer.once('postrender', function() {
+    const imageData = canvas.transferToImageBitmap();
+    worker.postMessage({
+      type: 'rendered',
+      imageData: imageData,
+      transform: transform,
+      opacity: opacity,
+      frameState: JSON.parse(JSON.stringify(frameState, getCircularReplacer()))
+    }, [imageData]);
   });
 };
 
-let canvas;
 let rendering = false;
 
 worker.onmessage = function(event) {
   if (rendering) {
     // drop this frame
+    worker.postMessage({type: 'request-render'});
     return;
   }
-  if (event.data.canvas) {
-    canvas = event.data.canvas;
-  } else {
-    frameState = event.data.frameState;
-    frameState.tileQueue = tileQueue;
-    frameState.viewState.projection.__proto__ = Projection.prototype;
-    rendering = true;
-    requestAnimationFrame(function() {
-      renderer.renderFrame(frameState, canvas);
-      if (tileQueue.getTilesLoading() < maxTotalLoading) {
-        tileQueue.reprioritize(); // FIXME only call if view has changed
-        tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads);
-      }
-      rendering = false;
-    });
-  }
+  frameState = event.data.frameState;
+  frameState.tileQueue = tileQueue;
+  frameState.viewState.projection.__proto__ = Projection.prototype;
+  rendering = true;
+  requestAnimationFrame(function() {
+    renderer.renderFrame(frameState, canvas);
+    if (tileQueue.getTilesLoading() < maxTotalLoading) {
+      tileQueue.reprioritize(); // FIXME only call if view has changed
+      tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads);
+    }
+    rendering = false;
+  });
 };
 
 export let create;