First step in uncoupling replay creation and rendering

Signed-off-by: Guillaume Beraudo <guillaume.beraudo@camptocamp.com>

src/ol/render/canvas/ImageReplay.js

@@ -185,6 +185,7 @@ class CanvasImageReplay extends CanvasReplay {
     this.rotateWithView_ = undefined;
     this.rotation_ = undefined;
     this.width_ = undefined;
+    return super.finish();
   }
 
   /**

src/ol/render/canvas/LineStringReplay.js

@@ -97,6 +97,7 @@ class CanvasLineStringReplay extends CanvasReplay {
     }
     this.reverseHitDetectionInstructions();
     this.state = null;
+    return super.finish();
   }
 
   /**

src/ol/render/canvas/PolygonReplay.js

@@ -192,6 +192,7 @@ class CanvasPolygonReplay extends CanvasReplay {
         coordinates[i] = snap(coordinates[i], tolerance);
       }
     }
+    return super.finish();
   }
 
   /**

src/ol/render/canvas/Replay.js

@@ -28,6 +28,16 @@ import {
 } from '../../transform.js';
 
 
+/**
+ * @typedef {Object} SerializableInstructions
+ * @property {Array<*>} instructions The rendering instructions.
+ * @property {Array<*>} hitDetectionInstructions The rendering hit detection instructions.
+ * @property {Array<number>} coordinates The array of all coordinates.
+ * @property {!Object<string, import("../canvas.js").TextState>} textStates The text states (decluttering).
+ * @property {!Object<string, import("../canvas.js").FillState>} fillStates The fill states (decluttering).
+ * @property {!Object<string, import("../canvas.js").StrokeState>} strokeStates The stoke states (decluttering).
+ */
+
 /**
  * @type {import("../../extent.js").Extent}
  */
@@ -169,6 +179,16 @@ class CanvasReplay extends VectorContext {
 
   }
 
+  /**
+   * Recreate replays and populate them using the provided instructions.
+   * @param {SerializableInstructions} instructions The serializable instructions
+   */
+  replaceInstructions(instructions) {
+    this.instructions = instructions.instructions;
+    this.hitDetectionInstructions = instructions.hitDetectionInstructions;
+    this.coordinates = instructions.coordinates;
+  }
+
   /**
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../coordinate.js").Coordinate} p1 1st point of the background box.
@@ -456,9 +476,15 @@ class CanvasReplay extends VectorContext {
   }
 
   /**
-   * FIXME empty description for jsdoc
+   * @return {Object} the serializable instructions.
    */
-  finish() {}
+  finish() {
+    return {
+      instructions: this.instructions,
+      hitDetectionInstructions: this.hitDetectionInstructions,
+      coordinates: this.coordinates
+    };
+  }
 
   /**
    * @private

src/ol/render/canvas/ReplayGroup.js

@@ -150,6 +150,22 @@ class CanvasReplayGroup extends ReplayGroup {
     context.clip();
   }
 
+  /**
+   * Recreate replays and populate them using the provided instructions.
+   * @param {!Object<string, !Object<ReplayType, import("./Replay.js").SerializableInstructions>>} allInstructions The serializable instructions
+   */
+  replaceInstructions(allInstructions) {
+    this.replaysByZIndex_ = {};
+    for (const zIndex in allInstructions) {
+      const instructionByZindex = allInstructions[zIndex];
+      for (const replayType in instructionByZindex) {
+        const instructions = instructionByZindex[replayType];
+        const replay = this.getReplay(zIndex, replayType);
+        replay.replaceInstructions(instructions);
+      }
+    }
+  }
+
   /**
    * @param {Array<ReplayType>} replays Replays.
    * @return {boolean} Has replays of the provided types.
@@ -167,15 +183,19 @@ class CanvasReplayGroup extends ReplayGroup {
   }
 
   /**
-   * FIXME empty description for jsdoc
+   * @return {!Object<string, !Object<ReplayType, import("./Replay.js").SerializableInstructions>>} The serializable instructions
    */
   finish() {
+    const replaysInstructions = {};
     for (const zKey in this.replaysByZIndex_) {
+      replaysInstructions[zKey] = replaysInstructions[zKey] || {};
       const replays = this.replaysByZIndex_[zKey];
       for (const replayKey in replays) {
-        replays[replayKey].finish();
+        const replayInstructions = replays[replayKey].finish();
+        replaysInstructions[zKey][replayKey] = replayInstructions;
       }
     }
+    return replaysInstructions;
   }
 
   /**

src/ol/render/canvas/TextReplay.js

@@ -126,7 +126,27 @@ class CanvasTextReplay extends CanvasReplay {
     this.widths_ = {};
 
     labelCache.prune();
+  }
 
+  /**
+   * @inheritdoc
+   */
+  finish() {
+    const instructions = super.finish();
+    instructions.textStates = this.textStates;
+    instructions.fillStates = this.fillStates;
+    instructions.strokeStates = this.strokeStates;
+    return instructions;
+  }
+
+  /**
+   * @inheritdoc
+   */
+  replaceInstructions(instructions) {
+    super.replaceInstructions(instructions);
+    this.textStates = instructions.textStates;
+    this.fillStates = instructions.fillStates;
+    this.strokeStates = instructions.strokeStates;
   }
 
   /**

src/ol/renderer/canvas/VectorLayer.js

@@ -480,13 +480,18 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     } else {
       vectorSource.forEachFeatureInExtent(extent, render);
     }
-    replayGroup.finish();
+
+    const replayGroupInstructions = replayGroup.finish();
+    const renderingReplayGroup = new CanvasReplayGroup(
+      getRenderTolerance(resolution, pixelRatio), extent, resolution,
+      pixelRatio, vectorSource.getOverlaps(), this.declutterTree_, vectorLayer.getRenderBuffer());
+    renderingReplayGroup.replaceInstructions(replayGroupInstructions);
 
     this.renderedResolution_ = resolution;
     this.renderedRevision_ = vectorLayerRevision;
     this.renderedRenderOrder_ = vectorLayerRenderOrder;
     this.renderedExtent_ = extent;
-    this.replayGroup_ = replayGroup;
+    this.replayGroup_ = renderingReplayGroup;
 
     this.replayGroupChanged = true;
     return true;

src/ol/renderer/canvas/VectorTileLayer.js

@@ -226,8 +226,11 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
           render.call(this, feature);
         }
       }
-      replayGroup.finish();
-      sourceTile.setReplayGroup(layer, tile.tileCoord.toString(), replayGroup);
+      const replayGroupInstructions = replayGroup.finish();
+      const renderingReplayGroup = new CanvasReplayGroup(0, sharedExtent, resolution,
+        pixelRatio, source.getOverlaps(), this.declutterTree_, layer.getRenderBuffer());
+      renderingReplayGroup.replaceInstructions(replayGroupInstructions);
+      sourceTile.setReplayGroup(layer, tile.tileCoord.toString(), renderingReplayGroup);
     }
     replayState.renderedRevision = revision;
     replayState.renderedRenderOrder = renderOrder;