Merge pull request #7821 from fredj/memory

Add new canvas instruction array in ol/render/canvas/Instruction

src/ol/render/canvas/Instruction.js

@@ -5,7 +5,7 @@
 /**
  * @enum {number}
  */
-export default {
+const Instruction = {
   BEGIN_GEOMETRY: 0,
   BEGIN_PATH: 1,
   CIRCLE: 2,
@@ -20,3 +20,30 @@ export default {
   SET_STROKE_STYLE: 11,
   STROKE: 12
 };
+
+
+/**
+ * @type {Array.<Instruction>}
+ */
+export const fillInstruction = [Instruction.FILL];
+
+
+/**
+ * @type {Array.<Instruction>}
+ */
+export const strokeInstruction = [Instruction.STROKE];
+
+
+/**
+ * @type {Array.<Instruction>}
+ */
+export const beginPathInstruction = [Instruction.BEGIN_PATH];
+
+
+/**
+ * @type {Array.<Instruction>}
+ */
+export const closePathInstruction = [Instruction.CLOSE_PATH];
+
+
+export default Instruction;

src/ol/render/canvas/LineStringReplay.js

@@ -2,7 +2,7 @@
  * @module ol/render/canvas/LineStringReplay
  */
 import {inherits} from '../../index.js';
-import CanvasInstruction from '../canvas/Instruction.js';
+import CanvasInstruction, {strokeInstruction, beginPathInstruction} from '../canvas/Instruction.js';
 import CanvasReplay from '../canvas/Replay.js';
 
 /**
@@ -60,13 +60,11 @@ CanvasLineStringReplay.prototype.drawLineString = function(lineStringGeometry, f
     CanvasInstruction.SET_STROKE_STYLE,
     state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
     state.miterLimit, state.lineDash, state.lineDashOffset
-  ], [
+  ], beginPathInstruction);
-    CanvasInstruction.BEGIN_PATH
-  ]);
   const flatCoordinates = lineStringGeometry.getFlatCoordinates();
   const stride = lineStringGeometry.getStride();
   this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
-  this.hitDetectionInstructions.push([CanvasInstruction.STROKE]);
+  this.hitDetectionInstructions.push(strokeInstruction);
   this.endGeometry(lineStringGeometry, feature);
 };
 
@@ -87,9 +85,7 @@ CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringG
     CanvasInstruction.SET_STROKE_STYLE,
     state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
     state.miterLimit, state.lineDash, state.lineDashOffset
-  ], [
+  ], beginPathInstruction);
-    CanvasInstruction.BEGIN_PATH
-  ]);
   const ends = multiLineStringGeometry.getEnds();
   const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
   const stride = multiLineStringGeometry.getStride();
@@ -98,7 +94,7 @@ CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringG
     offset = this.drawFlatCoordinates_(
       flatCoordinates, offset, ends[i], stride);
   }
-  this.hitDetectionInstructions.push([CanvasInstruction.STROKE]);
+  this.hitDetectionInstructions.push(strokeInstruction);
   this.endGeometry(multiLineStringGeometry, feature);
 };
 
@@ -109,7 +105,7 @@ CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringG
 CanvasLineStringReplay.prototype.finish = function() {
   const state = this.state;
   if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
-    this.instructions.push([CanvasInstruction.STROKE]);
+    this.instructions.push(strokeInstruction);
   }
   this.reverseHitDetectionInstructions();
   this.state = null;
@@ -121,11 +117,11 @@ CanvasLineStringReplay.prototype.finish = function() {
  */
 CanvasLineStringReplay.prototype.applyStroke = function(state) {
   if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
-    this.instructions.push([CanvasInstruction.STROKE]);
+    this.instructions.push(strokeInstruction);
     state.lastStroke = this.coordinates.length;
   }
   state.lastStroke = 0;
   CanvasReplay.prototype.applyStroke.call(this, state);
-  this.instructions.push([CanvasInstruction.BEGIN_PATH]);
+  this.instructions.push(beginPathInstruction);
 };
 export default CanvasLineStringReplay;

src/ol/render/canvas/PolygonReplay.js

@@ -5,9 +5,12 @@ import {inherits} from '../../index.js';
 import {asString} from '../../color.js';
 import _ol_geom_flat_simplify_ from '../../geom/flat/simplify.js';
 import _ol_render_canvas_ from '../canvas.js';
-import CanvasInstruction from '../canvas/Instruction.js';
+import CanvasInstruction, {
+  fillInstruction, strokeInstruction, beginPathInstruction, closePathInstruction
+} from '../canvas/Instruction.js';
 import CanvasReplay from '../canvas/Replay.js';
 
+
 /**
  * @constructor
  * @extends {ol.render.canvas.Replay}
@@ -41,7 +44,6 @@ CanvasPolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates,
   const fill = state.fillStyle !== undefined;
   const stroke = state.strokeStyle != undefined;
   const numEnds = ends.length;
-  const beginPathInstruction = [CanvasInstruction.BEGIN_PATH];
   this.instructions.push(beginPathInstruction);
   this.hitDetectionInstructions.push(beginPathInstruction);
   for (let i = 0; i < numEnds; ++i) {
@@ -55,19 +57,16 @@ CanvasPolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates,
     if (stroke) {
       // Performance optimization: only call closePath() when we have a stroke.
       // Otherwise the ring is closed already (see appendFlatCoordinates above).
-      const closePathInstruction = [CanvasInstruction.CLOSE_PATH];
       this.instructions.push(closePathInstruction);
       this.hitDetectionInstructions.push(closePathInstruction);
     }
     offset = end;
   }
-  const fillInstruction = [CanvasInstruction.FILL];
   this.hitDetectionInstructions.push(fillInstruction);
   if (fill) {
     this.instructions.push(fillInstruction);
   }
   if (stroke) {
-    const strokeInstruction = [CanvasInstruction.STROKE];
     this.instructions.push(strokeInstruction);
     this.hitDetectionInstructions.push(strokeInstruction);
   }
@@ -104,17 +103,14 @@ CanvasPolygonReplay.prototype.drawCircle = function(circleGeometry, feature) {
   const myBegin = this.coordinates.length;
   this.appendFlatCoordinates(
     flatCoordinates, 0, flatCoordinates.length, stride, false, false);
-  const beginPathInstruction = [CanvasInstruction.BEGIN_PATH];
   const circleInstruction = [CanvasInstruction.CIRCLE, myBegin];
   this.instructions.push(beginPathInstruction, circleInstruction);
   this.hitDetectionInstructions.push(beginPathInstruction, circleInstruction);
-  const fillInstruction = [CanvasInstruction.FILL];
   this.hitDetectionInstructions.push(fillInstruction);
   if (state.fillStyle !== undefined) {
     this.instructions.push(fillInstruction);
   }
   if (state.strokeStyle !== undefined) {
-    const strokeInstruction = [CanvasInstruction.STROKE];
     this.instructions.push(strokeInstruction);
     this.hitDetectionInstructions.push(strokeInstruction);
   }