diff --git a/src/ol/render/canvas/Instruction.js b/src/ol/render/canvas/Instruction.js index 70421bc1e2..cccca58d61 100644 --- a/src/ol/render/canvas/Instruction.js +++ b/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.} + */ +export const fillInstruction = [Instruction.FILL]; + + +/** + * @type {Array.} + */ +export const strokeInstruction = [Instruction.STROKE]; + + +/** + * @type {Array.} + */ +export const beginPathInstruction = [Instruction.BEGIN_PATH]; + + +/** + * @type {Array.} + */ +export const closePathInstruction = [Instruction.CLOSE_PATH]; + + +export default Instruction; diff --git a/src/ol/render/canvas/LineStringReplay.js b/src/ol/render/canvas/LineStringReplay.js index efb0a3df18..6c45b158cb 100644 --- a/src/ol/render/canvas/LineStringReplay.js +++ b/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 - ], [ - CanvasInstruction.BEGIN_PATH - ]); + ], beginPathInstruction); 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 - ], [ - CanvasInstruction.BEGIN_PATH - ]); + ], beginPathInstruction); 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; diff --git a/src/ol/render/canvas/PolygonReplay.js b/src/ol/render/canvas/PolygonReplay.js index 07328c96fb..e61b7f886e 100644 --- a/src/ol/render/canvas/PolygonReplay.js +++ b/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); }