Instant UI feedback

examples/offscreen-canvas-tiles.js

@@ -3,6 +3,8 @@ import View from '../src/ol/View.js';
 import Layer from '../src/ol/layer/Layer.js';
 //eslint-disable-next-line
 import Worker from 'worker-loader!./mvtlayer.worker.js';
+import {compose, create} from '../src/ol/transform.js';
+import {createTransformString} from '../src/ol/render/canvas.js';
 
 const mvtLayerWorker = new Worker();
 
@@ -19,7 +21,28 @@ function getCircularReplacer() {
   };
 }
 
-let container, canvas;
+let container, transformContainer, canvas, workerFrameState, mainThreadFrameState;
+
+function updateContainerTransform() {
+  if (workerFrameState) {
+    const viewState = mainThreadFrameState.viewState;
+    const renderedViewState = workerFrameState.viewState;
+    const center = viewState.center;
+    const resolution = viewState.resolution;
+    const rotation = viewState.rotation;
+    const renderedCenter = renderedViewState.center;
+    const renderedResolution = renderedViewState.resolution;
+    const renderedRotation = renderedViewState.rotation;
+    const transform = compose(create(),
+      (renderedCenter[0] - center[0]) / resolution,
+      (center[1] - renderedCenter[1]) / resolution,
+      renderedResolution / resolution, renderedResolution / resolution,
+      rotation - renderedRotation,
+      0, 0);
+    transformContainer.style.transform = createTransformString(transform);
+  }
+
+}
 
 const map = new Map({
   layers: [
@@ -30,16 +53,19 @@ const map = new Map({
           container.style.position = 'absolute';
           container.style.width = '100%';
           container.style.height = '100%';
+          transformContainer = document.createElement('div');
+          transformContainer.style.position = 'absolute';
+          transformContainer.style.width = '100%';
+          transformContainer.style.height = '100%';
+          container.appendChild(transformContainer);
           canvas = document.createElement('canvas');
           canvas.style.position = 'absolute';
           canvas.style.left = '0';
           canvas.style.transformOrigin = 'top left';
-          container.appendChild(canvas);
-          const offscreen = canvas.transferControlToOffscreen();
-          mvtLayerWorker.postMessage({
-            canvas: offscreen
-          }, [offscreen]);
+          transformContainer.appendChild(canvas);
         }
+        mainThreadFrameState = frameState;
+        updateContainerTransform();
         mvtLayerWorker.postMessage({
           frameState: JSON.parse(JSON.stringify(frameState, getCircularReplacer()))
         });
@@ -53,11 +79,18 @@ const map = new Map({
     zoom: 2
   })
 });
-mvtLayerWorker.addEventListener('message', message => {
-  if (message.data.type === 'render') {
+mvtLayerWorker.addEventListener('message', function(message) {
+  if (message.data.type === 'request-render') {
     map.render();
-  } else if (canvas && message.data.type === 'transform-opacity') {
-    canvas.style.transform = message.data.transform;
+  } else if (canvas && message.data.type === 'rendered') {
+    transformContainer.style.transform = '';
+    const imageData = message.data.imageData;
+    canvas.width = imageData.width;
+    canvas.height = imageData.height;
+    canvas.getContext('2d').drawImage(imageData, 0, 0);
     canvas.style.opacity = message.data.opacity;
+    canvas.style.transform = message.data.transform;
+    workerFrameState = message.data.frameState;
+    updateContainerTransform();
   }
 });