ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #7827 from tschaub/named-exports

Browse Source 
Named exports from ol/render/canvas
This commit is contained in:
Tim Schaub
2018-02-14 22:52:32 -07:00
committed by GitHub
parent 18fa8ddc58 0948d4002f
commit dfdc7e0c95
13 changed files with 154 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/ol/render/canvas.js
View File

@@ -6,125 +6,123 @@ import {createCanvasContext2D} from '../dom.js';
import {clear} from '../obj.js';
import LRUCache from '../structs/LRUCache.js';
import _ol_transform_ from '../transform.js';
const _ol_render_canvas_ = {};
/**
* @const
* @type {string}
*/
_ol_render_canvas_.defaultFont = '10px sans-serif';
export const defaultFont = '10px sans-serif';
/**
* @const
* @type {ol.Color}
*/
_ol_render_canvas_.defaultFillStyle = [0, 0, 0, 1];
export const defaultFillStyle = [0, 0, 0, 1];
/**
* @const
* @type {string}
*/
_ol_render_canvas_.defaultLineCap = 'round';
export const defaultLineCap = 'round';
/**
* @const
* @type {Array.<number>}
*/
_ol_render_canvas_.defaultLineDash = [];
export const defaultLineDash = [];
/**
* @const
* @type {number}
*/
_ol_render_canvas_.defaultLineDashOffset = 0;
export const defaultLineDashOffset = 0;
/**
* @const
* @type {string}
*/
_ol_render_canvas_.defaultLineJoin = 'round';
export const defaultLineJoin = 'round';
/**
* @const
* @type {number}
*/
_ol_render_canvas_.defaultMiterLimit = 10;
export const defaultMiterLimit = 10;
/**
* @const
* @type {ol.Color}
*/
_ol_render_canvas_.defaultStrokeStyle = [0, 0, 0, 1];
export const defaultStrokeStyle = [0, 0, 0, 1];
/**
* @const
* @type {string}
*/
_ol_render_canvas_.defaultTextAlign = 'center';
export const defaultTextAlign = 'center';
/**
* @const
* @type {string}
*/
_ol_render_canvas_.defaultTextBaseline = 'middle';
export const defaultTextBaseline = 'middle';
/**
* @const
* @type {Array.<number>}
*/
_ol_render_canvas_.defaultPadding = [0, 0, 0, 0];
export const defaultPadding = [0, 0, 0, 0];
/**
* @const
* @type {number}
*/
_ol_render_canvas_.defaultLineWidth = 1;
export const defaultLineWidth = 1;
/**
* @type {ol.structs.LRUCache.<HTMLCanvasElement>}
*/
_ol_render_canvas_.labelCache = new LRUCache();
export const labelCache = new LRUCache();
/**
* @type {!Object.<string, number>}
*/
_ol_render_canvas_.checkedFonts_ = {};
export const checkedFonts = {};
/**
* @type {CanvasRenderingContext2D}
*/
_ol_render_canvas_.measureContext_ = null;
let measureContext = null;
/**
* @type {!Object.<string, number>}
*/
_ol_render_canvas_.textHeights_ = {};
export const textHeights = {};
/**
* Clears the label cache when a font becomes available.
* @param {string} fontSpec CSS font spec.
*/
_ol_render_canvas_.checkFont = (function() {
export const checkFont = (function() {
const retries = 60;
const checked = _ol_render_canvas_.checkedFonts_;
const labelCache = _ol_render_canvas_.labelCache;
const checked = checkedFonts;
const size = '32px ';
const referenceFonts = ['monospace', 'serif'];
const len = referenceFonts.length;
@@ -132,7 +130,7 @@ _ol_render_canvas_.checkFont = (function() {
let interval, referenceWidth;
function isAvailable(font) {
const context = _ol_render_canvas_.getMeasureContext();
const context = getMeasureContext();
let available = true;
for (let i = 0; i < len; ++i) {
const referenceFont = referenceFonts[i];
@@ -155,9 +153,9 @@ _ol_render_canvas_.checkFont = (function() {
if (checked[font] < retries) {
if (isAvailable(font)) {
checked[font] = retries;
clear(_ol_render_canvas_.textHeights_);
clear(textHeights);
// Make sure that loaded fonts are picked up by Safari
_ol_render_canvas_.measureContext_ = null;
measureContext = null;
labelCache.clear();
} else {
++checked[font];
@@ -195,22 +193,21 @@ _ol_render_canvas_.checkFont = (function() {
/**
* @return {CanvasRenderingContext2D} Measure context.
*/
_ol_render_canvas_.getMeasureContext = function() {
let context = _ol_render_canvas_.measureContext_;
if (!context) {
context = _ol_render_canvas_.measureContext_ = createCanvasContext2D(1, 1);
function getMeasureContext() {
if (!measureContext) {
measureContext = createCanvasContext2D(1, 1);
}
return context;
};
return measureContext;
}
/**
* @param {string} font Font to use for measuring.
* @return {ol.Size} Measurement.
*/
_ol_render_canvas_.measureTextHeight = (function() {
export const measureTextHeight = (function() {
let span;
const heights = _ol_render_canvas_.textHeights_;
const heights = textHeights;
return function(font) {
let height = heights[font];
if (height == undefined) {
@@ -236,13 +233,13 @@ _ol_render_canvas_.measureTextHeight = (function() {
* @param {string} text Text.
* @return {number} Width.
*/
_ol_render_canvas_.measureTextWidth = function(font, text) {
const measureContext = _ol_render_canvas_.getMeasureContext();
export function measureTextWidth(font, text) {
const measureContext = getMeasureContext();
if (font != measureContext.font) {
measureContext.font = font;
}
return measureContext.measureText(text).width;
};
}
/**
@@ -251,16 +248,16 @@ _ol_render_canvas_.measureTextWidth = function(font, text) {
* @param {number} offsetX X offset.
* @param {number} offsetY Y offset.
*/
_ol_render_canvas_.rotateAtOffset = function(context, rotation, offsetX, offsetY) {
export function rotateAtOffset(context, rotation, offsetX, offsetY) {
if (rotation !== 0) {
context.translate(offsetX, offsetY);
context.rotate(rotation);
context.translate(-offsetX, -offsetY);
}
};
}
_ol_render_canvas_.resetTransform_ = _ol_transform_.create();
export const resetTransform = _ol_transform_.create();
/**
@@ -276,7 +273,7 @@ _ol_render_canvas_.resetTransform_ = _ol_transform_.create();
* @param {number} y Y.
* @param {number} scale Scale.
*/
_ol_render_canvas_.drawImage = function(context,
export function drawImage(context,
transform, opacity, image, originX, originY, w, h, x, y, scale) {
let alpha;
if (opacity != 1) {
@@ -293,7 +290,6 @@ _ol_render_canvas_.drawImage = function(context,
context.globalAlpha = alpha;
}
if (transform) {
context.setTransform.apply(context, _ol_render_canvas_.resetTransform_);
context.setTransform.apply(context, resetTransform);
}
};
export default _ol_render_canvas_;
}

42
src/ol/render/canvas/Immediate.js
View File

@@ -14,7 +14,7 @@ import SimpleGeometry from '../../geom/SimpleGeometry.js';
import {transform2D} from '../../geom/flat/transform.js';
import {CANVAS_LINE_DASH} from '../../has.js';
import VectorContext from '../VectorContext.js';
import _ol_render_canvas_ from '../canvas.js';
import {defaultTextAlign, defaultFillStyle, defaultLineCap, defaultLineDash, defaultLineDashOffset, defaultLineJoin, defaultLineWidth, defaultMiterLimit, defaultStrokeStyle, defaultTextBaseline, defaultFont} from '../canvas.js';
import _ol_transform_ from '../../transform.js';
/**
@@ -784,7 +784,7 @@ CanvasImmediateRenderer.prototype.setContextTextState_ = function(textState) {
const context = this.context_;
const contextTextState = this.contextTextState_;
const textAlign = textState.textAlign ?
textState.textAlign : _ol_render_canvas_.defaultTextAlign;
textState.textAlign : defaultTextAlign;
if (!contextTextState) {
context.font = textState.font;
context.textAlign = textAlign;
@@ -824,7 +824,7 @@ CanvasImmediateRenderer.prototype.setFillStrokeStyle = function(fillStyle, strok
const fillStyleColor = fillStyle.getColor();
this.fillState_ = {
fillStyle: asColorLike(fillStyleColor ?
fillStyleColor : _ol_render_canvas_.defaultFillStyle)
fillStyleColor : defaultFillStyle)
};
}
if (!strokeStyle) {
@@ -839,19 +839,19 @@ CanvasImmediateRenderer.prototype.setFillStrokeStyle = function(fillStyle, strok
const strokeStyleMiterLimit = strokeStyle.getMiterLimit();
this.strokeState_ = {
lineCap: strokeStyleLineCap !== undefined ?
strokeStyleLineCap : _ol_render_canvas_.defaultLineCap,
strokeStyleLineCap : defaultLineCap,
lineDash: strokeStyleLineDash ?
strokeStyleLineDash : _ol_render_canvas_.defaultLineDash,
strokeStyleLineDash : defaultLineDash,
lineDashOffset: strokeStyleLineDashOffset ?
strokeStyleLineDashOffset : _ol_render_canvas_.defaultLineDashOffset,
strokeStyleLineDashOffset : defaultLineDashOffset,
lineJoin: strokeStyleLineJoin !== undefined ?
strokeStyleLineJoin : _ol_render_canvas_.defaultLineJoin,
strokeStyleLineJoin : defaultLineJoin,
lineWidth: this.pixelRatio_ * (strokeStyleWidth !== undefined ?
strokeStyleWidth : _ol_render_canvas_.defaultLineWidth),
strokeStyleWidth : defaultLineWidth),
miterLimit: strokeStyleMiterLimit !== undefined ?
strokeStyleMiterLimit : _ol_render_canvas_.defaultMiterLimit,
strokeStyleMiterLimit : defaultMiterLimit,
strokeStyle: asColorLike(strokeStyleColor ?
strokeStyleColor : _ol_render_canvas_.defaultStrokeStyle)
strokeStyleColor : defaultStrokeStyle)
};
}
};
@@ -907,7 +907,7 @@ CanvasImmediateRenderer.prototype.setTextStyle = function(textStyle) {
const textFillStyleColor = textFillStyle.getColor();
this.textFillState_ = {
fillStyle: asColorLike(textFillStyleColor ?
textFillStyleColor : _ol_render_canvas_.defaultFillStyle)
textFillStyleColor : defaultFillStyle)
};
}
const textStrokeStyle = textStyle.getStroke();
@@ -923,19 +923,19 @@ CanvasImmediateRenderer.prototype.setTextStyle = function(textStyle) {
const textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
this.textStrokeState_ = {
lineCap: textStrokeStyleLineCap !== undefined ?
textStrokeStyleLineCap : _ol_render_canvas_.defaultLineCap,
textStrokeStyleLineCap : defaultLineCap,
lineDash: textStrokeStyleLineDash ?
textStrokeStyleLineDash : _ol_render_canvas_.defaultLineDash,
textStrokeStyleLineDash : defaultLineDash,
lineDashOffset: textStrokeStyleLineDashOffset ?
textStrokeStyleLineDashOffset : _ol_render_canvas_.defaultLineDashOffset,
textStrokeStyleLineDashOffset : defaultLineDashOffset,
lineJoin: textStrokeStyleLineJoin !== undefined ?
textStrokeStyleLineJoin : _ol_render_canvas_.defaultLineJoin,
textStrokeStyleLineJoin : defaultLineJoin,
lineWidth: textStrokeStyleWidth !== undefined ?
textStrokeStyleWidth : _ol_render_canvas_.defaultLineWidth,
textStrokeStyleWidth : defaultLineWidth,
miterLimit: textStrokeStyleMiterLimit !== undefined ?
textStrokeStyleMiterLimit : _ol_render_canvas_.defaultMiterLimit,
textStrokeStyleMiterLimit : defaultMiterLimit,
strokeStyle: asColorLike(textStrokeStyleColor ?
textStrokeStyleColor : _ol_render_canvas_.defaultStrokeStyle)
textStrokeStyleColor : defaultStrokeStyle)
};
}
const textFont = textStyle.getFont();
@@ -949,11 +949,11 @@ CanvasImmediateRenderer.prototype.setTextStyle = function(textStyle) {
const textTextBaseline = textStyle.getTextBaseline();
this.textState_ = {
font: textFont !== undefined ?
textFont : _ol_render_canvas_.defaultFont,
textFont : defaultFont,
textAlign: textTextAlign !== undefined ?
textTextAlign : _ol_render_canvas_.defaultTextAlign,
textTextAlign : defaultTextAlign,
textBaseline: textTextBaseline !== undefined ?
textTextBaseline : _ol_render_canvas_.defaultTextBaseline
textTextBaseline : defaultTextBaseline
};
this.text_ = textText !== undefined ? textText : '';
this.textOffsetX_ =

8
src/ol/render/canvas/PolygonReplay.js
View File

@@ -4,7 +4,7 @@
import {inherits} from '../../index.js';
import {asString} from '../../color.js';
import {snap} from '../../geom/flat/simplify.js';
import _ol_render_canvas_ from '../canvas.js';
import {defaultFillStyle} from '../canvas.js';
import CanvasInstruction, {
fillInstruction, strokeInstruction, beginPathInstruction, closePathInstruction
} from '../canvas/Instruction.js';
@@ -89,7 +89,7 @@ CanvasPolygonReplay.prototype.drawCircle = function(circleGeometry, feature) {
// always fill the circle for hit detection
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(_ol_render_canvas_.defaultFillStyle)
asString(defaultFillStyle)
]);
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
@@ -128,7 +128,7 @@ CanvasPolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) {
// always fill the polygon for hit detection
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(_ol_render_canvas_.defaultFillStyle)]
asString(defaultFillStyle)]
);
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([
@@ -160,7 +160,7 @@ CanvasPolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry,
// always fill the multi-polygon for hit detection
this.hitDetectionInstructions.push([
CanvasInstruction.SET_FILL_STYLE,
asString(_ol_render_canvas_.defaultFillStyle)
asString(defaultFillStyle)
]);
if (state.strokeStyle !== undefined) {
this.hitDetectionInstructions.push([

31
src/ol/render/canvas/Replay.js
View File

@@ -15,7 +15,7 @@ import {transform2D} from '../../geom/flat/transform.js';
import {CANVAS_LINE_DASH} from '../../has.js';
import {isEmpty} from '../../obj.js';
import VectorContext from '../VectorContext.js';
import _ol_render_canvas_ from '../canvas.js';
import {drawImage, resetTransform, defaultPadding, defaultFillStyle, defaultStrokeStyle, defaultMiterLimit, defaultLineWidth, defaultLineJoin, defaultLineDashOffset, defaultLineDash, defaultLineCap} from '../canvas.js';
import CanvasInstruction from '../canvas/Instruction.js';
import _ol_render_replay_ from '../replay.js';
import _ol_transform_ from '../../transform.js';
@@ -165,7 +165,7 @@ const CanvasReplay = function(tolerance, maxExtent, resolution, pixelRatio, over
* @private
* @type {!ol.Transform}
*/
this.resetTransform_ = _ol_transform_.create();
this.resetTransform = _ol_transform_.create();
};
inherits(CanvasReplay, VectorContext);
@@ -296,7 +296,7 @@ CanvasReplay.prototype.replayImage_ = function(context, x, y, image,
/** @type {Array.<*>} */ (fillInstruction),
/** @type {Array.<*>} */ (strokeInstruction));
}
_ol_render_canvas_.drawImage(context, transform, opacity, image, originX, originY, w, h, x, y, scale);
drawImage(context, transform, opacity, image, originX, originY, w, h, x, y, scale);
}
};
@@ -463,7 +463,7 @@ CanvasReplay.prototype.fill_ = function(context) {
}
context.fill();
if (this.fillOrigin_) {
context.setTransform.apply(context, _ol_render_canvas_.resetTransform_);
context.setTransform.apply(context, resetTransform);
}
};
@@ -504,7 +504,6 @@ CanvasReplay.prototype.renderDeclutter_ = function(declutterGroup, feature) {
};
if (!this.declutterTree.collides(box)) {
this.declutterTree.insert(box);
const drawImage = _ol_render_canvas_.drawImage;
for (let j = 5, jj = declutterGroup.length; j < jj; ++j) {
const declutterData = /** @type {Array} */ (declutterGroup[j]);
if (declutterData) {
@@ -676,7 +675,7 @@ CanvasReplay.prototype.replay_ = function(
backgroundFill = /** @type {boolean} */ (instruction[17]);
backgroundStroke = /** @type {boolean} */ (instruction[18]);
} else {
padding = _ol_render_canvas_.defaultPadding;
padding = defaultPadding;
backgroundFill = backgroundStroke = false;
}
@@ -730,7 +729,7 @@ CanvasReplay.prototype.replay_ = function(
/** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
/** @type {number} */ (part[3]), textScale, false, label.width,
_ol_render_canvas_.defaultPadding, null, null);
defaultPadding, null, null);
}
}
if (fillKey) {
@@ -744,7 +743,7 @@ CanvasReplay.prototype.replay_ = function(
/** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
/** @type {number} */ (part[3]), textScale, false, label.width,
_ol_render_canvas_.defaultPadding, null, null);
defaultPadding, null, null);
}
}
}
@@ -915,32 +914,32 @@ CanvasReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
if (fillStyle) {
const fillStyleColor = fillStyle.getColor();
state.fillStyle = asColorLike(fillStyleColor ?
fillStyleColor : _ol_render_canvas_.defaultFillStyle);
fillStyleColor : defaultFillStyle);
} else {
state.fillStyle = undefined;
}
if (strokeStyle) {
const strokeStyleColor = strokeStyle.getColor();
state.strokeStyle = asColorLike(strokeStyleColor ?
strokeStyleColor : _ol_render_canvas_.defaultStrokeStyle);
strokeStyleColor : defaultStrokeStyle);
const strokeStyleLineCap = strokeStyle.getLineCap();
state.lineCap = strokeStyleLineCap !== undefined ?
strokeStyleLineCap : _ol_render_canvas_.defaultLineCap;
strokeStyleLineCap : defaultLineCap;
const strokeStyleLineDash = strokeStyle.getLineDash();
state.lineDash = strokeStyleLineDash ?
strokeStyleLineDash.slice() : _ol_render_canvas_.defaultLineDash;
strokeStyleLineDash.slice() : defaultLineDash;
const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
state.lineDashOffset = strokeStyleLineDashOffset ?
strokeStyleLineDashOffset : _ol_render_canvas_.defaultLineDashOffset;
strokeStyleLineDashOffset : defaultLineDashOffset;
const strokeStyleLineJoin = strokeStyle.getLineJoin();
state.lineJoin = strokeStyleLineJoin !== undefined ?
strokeStyleLineJoin : _ol_render_canvas_.defaultLineJoin;
strokeStyleLineJoin : defaultLineJoin;
const strokeStyleWidth = strokeStyle.getWidth();
state.lineWidth = strokeStyleWidth !== undefined ?
strokeStyleWidth : _ol_render_canvas_.defaultLineWidth;
strokeStyleWidth : defaultLineWidth;
const strokeStyleMiterLimit = strokeStyle.getMiterLimit();
state.miterLimit = strokeStyleMiterLimit !== undefined ?
strokeStyleMiterLimit : _ol_render_canvas_.defaultMiterLimit;
strokeStyleMiterLimit : defaultMiterLimit;
if (state.lineWidth > this.maxLineWidth) {
this.maxLineWidth = state.lineWidth;

46
src/ol/render/canvas/TextReplay.js
View File

@@ -8,7 +8,7 @@ import {intersects} from '../../extent.js';
import {matchingChunk} from '../../geom/flat/straightchunk.js';
import GeometryType from '../../geom/GeometryType.js';
import {CANVAS_LINE_DASH, SAFARI} from '../../has.js';
import _ol_render_canvas_ from '../canvas.js';
import {labelCache, measureTextWidth, defaultTextAlign, measureTextHeight, defaultPadding, defaultLineCap, defaultLineDashOffset, defaultLineDash, defaultLineJoin, defaultFillStyle, checkFont, defaultFont, defaultLineWidth, defaultMiterLimit, defaultStrokeStyle, defaultTextBaseline} from '../canvas.js';
import CanvasInstruction from '../canvas/Instruction.js';
import CanvasReplay from '../canvas/Replay.js';
import _ol_render_replay_ from '../replay.js';
@@ -129,7 +129,6 @@ const CanvasTextReplay = function(
*/
this.widths_ = {};
const labelCache = _ol_render_canvas_.labelCache;
labelCache.prune();
};
@@ -149,7 +148,7 @@ CanvasTextReplay.measureTextWidths = function(font, lines, widths) {
let width = 0;
let currentWidth, i;
for (i = 0; i < numLines; ++i) {
currentWidth = _ol_render_canvas_.measureTextWidth(font, lines[i]);
currentWidth = measureTextWidth(font, lines[i]);
width = Math.max(width, currentWidth);
widths.push(currentWidth);
}
@@ -286,21 +285,20 @@ CanvasTextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey
let label;
const key = strokeKey + textKey + text + fillKey + this.pixelRatio;
const labelCache = _ol_render_canvas_.labelCache;
if (!labelCache.containsKey(key)) {
const strokeState = strokeKey ? this.strokeStates[strokeKey] || this.textStrokeState_ : null;
const fillState = fillKey ? this.fillStates[fillKey] || this.textFillState_ : null;
const textState = this.textStates[textKey] || this.textState_;
const pixelRatio = this.pixelRatio;
const scale = textState.scale * pixelRatio;
const align = _ol_render_replay_.TEXT_ALIGN[textState.textAlign || _ol_render_canvas_.defaultTextAlign];
const align = _ol_render_replay_.TEXT_ALIGN[textState.textAlign || defaultTextAlign];
const strokeWidth = strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
const lines = text.split('\n');
const numLines = lines.length;
const widths = [];
const width = CanvasTextReplay.measureTextWidths(textState.font, lines, widths);
const lineHeight = _ol_render_canvas_.measureTextHeight(textState.font);
const lineHeight = measureTextHeight(textState.font);
const height = lineHeight * numLines;
const renderWidth = (width + strokeWidth);
const context = createCanvasContext2D(
@@ -356,7 +354,7 @@ CanvasTextReplay.prototype.drawTextImage_ = function(label, begin, end) {
const textState = this.textState_;
const strokeState = this.textStrokeState_;
const pixelRatio = this.pixelRatio;
const align = _ol_render_replay_.TEXT_ALIGN[textState.textAlign || _ol_render_canvas_.defaultTextAlign];
const align = _ol_render_replay_.TEXT_ALIGN[textState.textAlign || defaultTextAlign];
const baseline = _ol_render_replay_.TEXT_ALIGN[textState.textBaseline];
const strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
@@ -366,8 +364,8 @@ CanvasTextReplay.prototype.drawTextImage_ = function(label, begin, end) {
label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
1, true, label.width,
textState.padding == _ol_render_canvas_.defaultPadding ?
_ol_render_canvas_.defaultPadding : textState.padding.map(function(p) {
textState.padding == defaultPadding ?
defaultPadding : textState.padding.map(function(p) {
return p * pixelRatio;
}),
!!textState.backgroundFill, !!textState.backgroundStroke
@@ -410,7 +408,7 @@ CanvasTextReplay.prototype.drawChars_ = function(begin, end, declutterGroup) {
if (!(this.textKey_ in this.textStates)) {
this.textStates[this.textKey_] = /** @type {ol.CanvasTextState} */ ({
font: textState.font,
textAlign: textState.textAlign || _ol_render_canvas_.defaultTextAlign,
textAlign: textState.textAlign || defaultTextAlign,
scale: textState.scale
});
}
@@ -441,7 +439,7 @@ CanvasTextReplay.prototype.drawChars_ = function(begin, end, declutterGroup) {
function(text) {
let width = widths[text];
if (!width) {
width = widths[text] = _ol_render_canvas_.measureTextWidth(font, text);
width = widths[text] = measureTextWidth(font, text);
}
return width * textScale * pixelRatio;
},
@@ -453,7 +451,7 @@ CanvasTextReplay.prototype.drawChars_ = function(begin, end, declutterGroup) {
function(text) {
let width = widths[text];
if (!width) {
width = widths[text] = _ol_render_canvas_.measureTextWidth(font, text);
width = widths[text] = measureTextWidth(font, text);
}
return width * textScale;
},
@@ -481,7 +479,7 @@ CanvasTextReplay.prototype.setTextStyle = function(textStyle, declutterGroup) {
fillState = this.textFillState_ = /** @type {ol.CanvasFillState} */ ({});
}
fillState.fillStyle = asColorLike(
textFillStyle.getColor() || _ol_render_canvas_.defaultFillStyle);
textFillStyle.getColor() || defaultFillStyle);
}
const textStrokeStyle = textStyle.getStroke();
@@ -496,32 +494,32 @@ CanvasTextReplay.prototype.setTextStyle = function(textStyle, declutterGroup) {
const lineDashOffset = textStrokeStyle.getLineDashOffset();
const lineWidth = textStrokeStyle.getWidth();
const miterLimit = textStrokeStyle.getMiterLimit();
strokeState.lineCap = textStrokeStyle.getLineCap() || _ol_render_canvas_.defaultLineCap;
strokeState.lineDash = lineDash ? lineDash.slice() : _ol_render_canvas_.defaultLineDash;
strokeState.lineCap = textStrokeStyle.getLineCap() || defaultLineCap;
strokeState.lineDash = lineDash ? lineDash.slice() : defaultLineDash;
strokeState.lineDashOffset =
lineDashOffset === undefined ? _ol_render_canvas_.defaultLineDashOffset : lineDashOffset;
strokeState.lineJoin = textStrokeStyle.getLineJoin() || _ol_render_canvas_.defaultLineJoin;
lineDashOffset === undefined ? defaultLineDashOffset : lineDashOffset;
strokeState.lineJoin = textStrokeStyle.getLineJoin() || defaultLineJoin;
strokeState.lineWidth =
lineWidth === undefined ? _ol_render_canvas_.defaultLineWidth : lineWidth;
lineWidth === undefined ? defaultLineWidth : lineWidth;
strokeState.miterLimit =
miterLimit === undefined ? _ol_render_canvas_.defaultMiterLimit : miterLimit;
miterLimit === undefined ? defaultMiterLimit : miterLimit;
strokeState.strokeStyle = asColorLike(
textStrokeStyle.getColor() || _ol_render_canvas_.defaultStrokeStyle);
textStrokeStyle.getColor() || defaultStrokeStyle);
}
textState = this.textState_;
const font = textStyle.getFont() || _ol_render_canvas_.defaultFont;
_ol_render_canvas_.checkFont(font);
const font = textStyle.getFont() || defaultFont;
checkFont(font);
const textScale = textStyle.getScale();
textState.overflow = textStyle.getOverflow();
textState.font = font;
textState.maxAngle = textStyle.getMaxAngle();
textState.placement = textStyle.getPlacement();
textState.textAlign = textStyle.getTextAlign();
textState.textBaseline = textStyle.getTextBaseline() || _ol_render_canvas_.defaultTextBaseline;
textState.textBaseline = textStyle.getTextBaseline() || defaultTextBaseline;
textState.backgroundFill = textStyle.getBackgroundFill();
textState.backgroundStroke = textStyle.getBackgroundStroke();
textState.padding = textStyle.getPadding() || _ol_render_canvas_.defaultPadding;
textState.padding = textStyle.getPadding() || defaultPadding;
textState.scale = textScale === undefined ? 1 : textScale;
const textOffsetX = textStyle.getOffsetX();

10
src/ol/renderer/canvas/Layer.js
View File

@@ -6,7 +6,7 @@ import {getBottomLeft, getBottomRight, getTopLeft, getTopRight} from '../../exte
import {TRUE} from '../../functions.js';
import RenderEvent from '../../render/Event.js';
import RenderEventType from '../../render/EventType.js';
import _ol_render_canvas_ from '../../render/canvas.js';
import {rotateAtOffset} from '../../render/canvas.js';
import CanvasImmediateRenderer from '../../render/canvas/Immediate.js';
import LayerRenderer from '../Layer.js';
import _ol_transform_ from '../../transform.js';
@@ -60,14 +60,14 @@ CanvasLayerRenderer.prototype.clip = function(context, frameState, extent) {
_ol_transform_.apply(frameState.coordinateToPixelTransform, bottomLeft);
context.save();
_ol_render_canvas_.rotateAtOffset(context, -rotation, width / 2, height / 2);
rotateAtOffset(context, -rotation, width / 2, height / 2);
context.beginPath();
context.moveTo(topLeft[0] * pixelRatio, topLeft[1] * pixelRatio);
context.lineTo(topRight[0] * pixelRatio, topRight[1] * pixelRatio);
context.lineTo(bottomRight[0] * pixelRatio, bottomRight[1] * pixelRatio);
context.lineTo(bottomLeft[0] * pixelRatio, bottomLeft[1] * pixelRatio);
context.clip();
_ol_render_canvas_.rotateAtOffset(context, rotation, width / 2, height / 2);
rotateAtOffset(context, rotation, width / 2, height / 2);
};
@@ -84,7 +84,7 @@ CanvasLayerRenderer.prototype.dispatchComposeEvent_ = function(type, context, fr
const width = frameState.size[0] * frameState.pixelRatio;
const height = frameState.size[1] * frameState.pixelRatio;
const rotation = frameState.viewState.rotation;
_ol_render_canvas_.rotateAtOffset(context, -rotation, width / 2, height / 2);
rotateAtOffset(context, -rotation, width / 2, height / 2);
const transform = opt_transform !== undefined ?
opt_transform : this.getTransform(frameState, 0);
const render = new CanvasImmediateRenderer(
@@ -93,7 +93,7 @@ CanvasLayerRenderer.prototype.dispatchComposeEvent_ = function(type, context, fr
const composeEvent = new RenderEvent(type, render, frameState,
context, null);
layer.dispatchEvent(composeEvent);
_ol_render_canvas_.rotateAtOffset(context, rotation, width / 2, height / 2);
rotateAtOffset(context, rotation, width / 2, height / 2);
}
};

4
src/ol/renderer/canvas/Map.js
View File

@@ -11,7 +11,7 @@ import {createCanvasContext2D} from '../../dom.js';
import {visibleAtResolution} from '../../layer/Layer.js';
import RenderEvent from '../../render/Event.js';
import RenderEventType from '../../render/EventType.js';
import _ol_render_canvas_ from '../../render/canvas.js';
import {rotateAtOffset} from '../../render/canvas.js';
import CanvasImmediateRenderer from '../../render/canvas/Immediate.js';
import MapRenderer, {sortByZIndex} from '../Map.js';
import RendererType from '../Type.js';
@@ -170,7 +170,7 @@ CanvasMapRenderer.prototype.renderFrame = function(frameState) {
if (rotation) {
context.save();
_ol_render_canvas_.rotateAtOffset(context, rotation, width / 2, height / 2);
rotateAtOffset(context, rotation, width / 2, height / 2);
}
const viewResolution = frameState.viewState.resolution;

10
src/ol/renderer/canvas/VectorLayer.js
View File

@@ -10,7 +10,7 @@ import EventType from '../../events/EventType.js';
import rbush from 'rbush';
import {buffer, createEmpty, containsExtent, getWidth} from '../../extent.js';
import RenderEventType from '../../render/EventType.js';
import _ol_render_canvas_ from '../../render/canvas.js';
import {labelCache, rotateAtOffset} from '../../render/canvas.js';
import CanvasReplayGroup from '../../render/canvas/ReplayGroup.js';
import RendererType from '../Type.js';
import CanvasLayerRenderer from '../canvas/Layer.js';
@@ -79,7 +79,7 @@ const CanvasVectorLayerRenderer = function(vectorLayer) {
*/
this.context = createCanvasContext2D();
listen(_ol_render_canvas_.labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
};
@@ -112,7 +112,7 @@ CanvasVectorLayerRenderer['create'] = function(mapRenderer, layer) {
* @inheritDoc
*/
CanvasVectorLayerRenderer.prototype.disposeInternal = function() {
unlisten(_ol_render_canvas_.labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
unlisten(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
CanvasLayerRenderer.prototype.disposeInternal.call(this);
};
@@ -184,7 +184,7 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
const width = frameState.size[0] * pixelRatio;
const height = frameState.size[1] * pixelRatio;
_ol_render_canvas_.rotateAtOffset(replayContext, -rotation,
rotateAtOffset(replayContext, -rotation,
width / 2, height / 2);
replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
if (vectorSource.getWrapX() && projection.canWrapX() &&
@@ -212,7 +212,7 @@ CanvasVectorLayerRenderer.prototype.composeFrame = function(frameState, layerSta
// restore original transform for render and compose events
transform = this.getTransform(frameState, 0);
}
_ol_render_canvas_.rotateAtOffset(replayContext, rotation,
rotateAtOffset(replayContext, rotation,
width / 2, height / 2);
if (replayContext != context) {

10
src/ol/renderer/canvas/VectorTileLayer.js
View File

@@ -13,7 +13,7 @@ import _ol_layer_VectorTileRenderType_ from '../../layer/VectorTileRenderType.js
import {equivalent as equivalentProjection} from '../../proj.js';
import Units from '../../proj/Units.js';
import ReplayType from '../../render/ReplayType.js';
import _ol_render_canvas_ from '../../render/canvas.js';
import {labelCache, rotateAtOffset} from '../../render/canvas.js';
import CanvasReplayGroup from '../../render/canvas/ReplayGroup.js';
import _ol_render_replay_ from '../../render/replay.js';
import RendererType from '../Type.js';
@@ -85,7 +85,7 @@ const CanvasVectorTileLayerRenderer = function(layer) {
this.zDirection =
layer.getRenderMode() == _ol_layer_VectorTileRenderType_.VECTOR ? 1 : 0;
listen(_ol_render_canvas_.labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
};
@@ -118,7 +118,7 @@ CanvasVectorTileLayerRenderer['create'] = function(mapRenderer, layer) {
* @inheritDoc
*/
CanvasVectorTileLayerRenderer.prototype.disposeInternal = function() {
unlisten(_ol_render_canvas_.labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
unlisten(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
CanvasTileLayerRenderer.prototype.disposeInternal.call(this);
};
@@ -374,7 +374,7 @@ CanvasVectorTileLayerRenderer.prototype.postCompose = function(context, frameSta
if (rotation) {
offsetX = Math.round(pixelRatio * size[0] / 2);
offsetY = Math.round(pixelRatio * size[1] / 2);
_ol_render_canvas_.rotateAtOffset(context, -rotation, offsetX, offsetY);
rotateAtOffset(context, -rotation, offsetX, offsetY);
}
if (declutterReplays) {
this.declutterTree_.clear();
@@ -437,7 +437,7 @@ CanvasVectorTileLayerRenderer.prototype.postCompose = function(context, frameSta
CanvasReplayGroup.replayDeclutter(declutterReplays, context, rotation);
}
if (rotation) {
_ol_render_canvas_.rotateAtOffset(context, rotation,
rotateAtOffset(context, rotation,
/** @type {number} */ (offsetX), /** @type {number} */ (offsetY));
}
CanvasTileLayerRenderer.prototype.postCompose.apply(this, arguments);

16
src/ol/style/RegularShape.js
View File

@@ -6,7 +6,7 @@ import {asColorLike} from '../colorlike.js';
import {createCanvasContext2D} from '../dom.js';
import {CANVAS_LINE_DASH} from '../has.js';
import ImageState from '../ImageState.js';
import _ol_render_canvas_ from '../render/canvas.js';
import {defaultStrokeStyle, defaultFillStyle, defaultLineCap, defaultLineWidth, defaultLineJoin, defaultMiterLimit} from '../render/canvas.js';
import ImageStyle from '../style/Image.js';
/**
@@ -325,12 +325,12 @@ RegularShape.prototype.render_ = function(atlasManager) {
if (this.stroke_) {
strokeStyle = this.stroke_.getColor();
if (strokeStyle === null) {
strokeStyle = _ol_render_canvas_.defaultStrokeStyle;
strokeStyle = defaultStrokeStyle;
}
strokeStyle = asColorLike(strokeStyle);
strokeWidth = this.stroke_.getWidth();
if (strokeWidth === undefined) {
strokeWidth = _ol_render_canvas_.defaultLineWidth;
strokeWidth = defaultLineWidth;
}
lineDash = this.stroke_.getLineDash();
lineDashOffset = this.stroke_.getLineDashOffset();
@@ -340,15 +340,15 @@ RegularShape.prototype.render_ = function(atlasManager) {
}
lineJoin = this.stroke_.getLineJoin();
if (lineJoin === undefined) {
lineJoin = _ol_render_canvas_.defaultLineJoin;
lineJoin = defaultLineJoin;
}
lineCap = this.stroke_.getLineCap();
if (lineCap === undefined) {
lineCap = _ol_render_canvas_.defaultLineCap;
lineCap = defaultLineCap;
}
miterLimit = this.stroke_.getMiterLimit();
if (miterLimit === undefined) {
miterLimit = _ol_render_canvas_.defaultMiterLimit;
miterLimit = defaultMiterLimit;
}
}
@@ -455,7 +455,7 @@ RegularShape.prototype.draw_ = function(renderOptions, context, x, y) {
if (this.fill_) {
let color = this.fill_.getColor();
if (color === null) {
color = _ol_render_canvas_.defaultFillStyle;
color = defaultFillStyle;
}
context.fillStyle = asColorLike(color);
context.fill();
@@ -532,7 +532,7 @@ RegularShape.prototype.drawHitDetectionCanvas_ = function(renderOptions, context
}
}
context.fillStyle = _ol_render_canvas_.defaultFillStyle;
context.fillStyle = defaultFillStyle;
context.fill();
if (this.stroke_) {
context.strokeStyle = renderOptions.strokeStyle;

50
test/spec/ol/render/canvas/index.test.js
View File

@@ -1,6 +1,6 @@
import {listen, unlisten} from '../../../../../src/ol/events.js';
import {clear} from '../../../../../src/ol/obj.js';
import _ol_render_canvas_ from '../../../../../src/ol/render/canvas.js';
import * as render from '../../../../../src/ol/render/canvas.js';
describe('ol.render.canvas', function() {
@@ -13,71 +13,65 @@ describe('ol.render.canvas', function() {
describe('ol.render.canvas.checkFont()', function() {
beforeEach(function() {
clear(_ol_render_canvas_.checkedFonts_);
_ol_render_canvas_.getMeasureContext();
_ol_render_canvas_.measureTextHeight('12px sans-serif');
clear(render.checkedFonts);
render.measureTextHeight('12px sans-serif');
});
const checkFont = _ol_render_canvas_.checkFont;
const retries = 60;
it('does not clear label cache and measurements for unavailable fonts', function(done) {
this.timeout(3000);
const spy = sinon.spy();
listen(_ol_render_canvas_.labelCache, 'clear', spy);
listen(render.labelCache, 'clear', spy);
const interval = setInterval(function() {
if (_ol_render_canvas_.checkedFonts_['foo'] == retries && _ol_render_canvas_.checkedFonts_['sans-serif'] == retries) {
if (render.checkedFonts['foo'] == retries && render.checkedFonts['sans-serif'] == retries) {
clearInterval(interval);
unlisten(_ol_render_canvas_.labelCache, 'clear', spy);
unlisten(render.labelCache, 'clear', spy);
expect(spy.callCount).to.be(0);
expect(_ol_render_canvas_.measureContext_).to.not.be(null);
expect(_ol_render_canvas_.textHeights_).to.not.eql({});
expect(render.textHeights).to.not.eql({});
done();
}
}, 32);
checkFont('12px foo,sans-serif');
render.checkFont('12px foo,sans-serif');
});
it('does not clear label cache and measurements for available fonts', function(done) {
const spy = sinon.spy();
listen(_ol_render_canvas_.labelCache, 'clear', spy);
listen(render.labelCache, 'clear', spy);
const interval = setInterval(function() {
if (_ol_render_canvas_.checkedFonts_['sans-serif'] == retries) {
if (render.checkedFonts['sans-serif'] == retries) {
clearInterval(interval);
unlisten(_ol_render_canvas_.labelCache, 'clear', spy);
unlisten(render.labelCache, 'clear', spy);
expect(spy.callCount).to.be(0);
expect(_ol_render_canvas_.measureContext_).to.not.be(null);
expect(_ol_render_canvas_.textHeights_).to.not.eql({});
expect(render.textHeights).to.not.eql({});
done();
}
}, 32);
checkFont('12px sans-serif');
render.checkFont('12px sans-serif');
});
it('does not clear label cache and measurements for the \'monospace\' font', function(done) {
const spy = sinon.spy();
listen(_ol_render_canvas_.labelCache, 'clear', spy);
listen(render.labelCache, 'clear', spy);
const interval = setInterval(function() {
if (_ol_render_canvas_.checkedFonts_['monospace'] == retries) {
if (render.checkedFonts['monospace'] == retries) {
clearInterval(interval);
unlisten(_ol_render_canvas_.labelCache, 'clear', spy);
unlisten(render.labelCache, 'clear', spy);
expect(spy.callCount).to.be(0);
expect(_ol_render_canvas_.measureContext_).to.not.be(null);
expect(_ol_render_canvas_.textHeights_).to.not.eql({});
expect(render.textHeights).to.not.eql({});
done();
}
}, 32);
checkFont('12px monospace');
render.checkFont('12px monospace');
});
it('clears label cache and measurements for fonts that become available', function(done) {
head.appendChild(font);
listen(_ol_render_canvas_.labelCache, 'clear', function() {
expect(_ol_render_canvas_.measureContext_).to.be(null);
expect(_ol_render_canvas_.textHeights_).to.eql({});
listen(render.labelCache, 'clear', function() {
expect(render.textHeights).to.eql({});
done();
});
checkFont('12px Abel');
render.checkFont('12px Abel');
});
});
@@ -89,7 +83,7 @@ describe('ol.render.canvas', function() {
translate: sinon.spy(),
rotate: sinon.spy()
};
_ol_render_canvas_.rotateAtOffset(context, Math.PI, 10, 10);
render.rotateAtOffset(context, Math.PI, 10, 10);
expect(context.translate.callCount).to.be(2);
expect(context.translate.firstCall.args).to.eql([10, 10]);
expect(context.translate.secondCall.args).to.eql([-10, -10]);

8
test/spec/ol/renderer/canvas/vectorlayer.test.js
View File

@@ -7,7 +7,7 @@ import Point from '../../../../../src/ol/geom/Point.js';
import VectorLayer from '../../../../../src/ol/layer/Vector.js';
import {clear} from '../../../../../src/ol/obj.js';
import {get as getProjection} from '../../../../../src/ol/proj.js';
import _ol_render_canvas_ from '../../../../../src/ol/render/canvas.js';
import {checkedFonts} from '../../../../../src/ol/render/canvas.js';
import CanvasVectorLayerRenderer from '../../../../../src/ol/renderer/canvas/VectorLayer.js';
import VectorSource from '../../../../../src/ol/source/Vector.js';
import Style from '../../../../../src/ol/style/Style.js';
@@ -85,7 +85,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
});
it('does not re-render for unavailable fonts', function(done) {
clear(_ol_render_canvas_.checkedFonts_);
clear(checkedFonts);
const map = new Map({
view: new View({
center: [0, 0],
@@ -116,7 +116,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
});
it('does not re-render for available fonts', function(done) {
clear(_ol_render_canvas_.checkedFonts_);
clear(checkedFonts);
const map = new Map({
view: new View({
center: [0, 0],
@@ -147,7 +147,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
});
it('re-renders for fonts that become available', function(done) {
clear(_ol_render_canvas_.checkedFonts_);
clear(checkedFonts);
head.appendChild(font);
const map = new Map({
view: new View({

8
test/spec/ol/renderer/canvas/vectortilelayer.test.js
View File

@@ -12,7 +12,7 @@ import Point from '../../../../../src/ol/geom/Point.js';
import VectorTileLayer from '../../../../../src/ol/layer/VectorTile.js';
import {get as getProjection, fromLonLat} from '../../../../../src/ol/proj.js';
import Projection from '../../../../../src/ol/proj/Projection.js';
import _ol_render_canvas_ from '../../../../../src/ol/render/canvas.js';
import {checkedFonts} from '../../../../../src/ol/render/canvas.js';
import RenderFeature from '../../../../../src/ol/render/Feature.js';
import CanvasVectorTileLayerRenderer from '../../../../../src/ol/renderer/canvas/VectorTileLayer.js';
import VectorTileSource from '../../../../../src/ol/source/VectorTile.js';
@@ -154,7 +154,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('does not re-render for unavailable fonts', function(done) {
map.renderSync();
clear(_ol_render_canvas_.checkedFonts_);
clear(checkedFonts);
layerStyle[0].getText().setFont('12px "Unavailable font",sans-serif');
layer.changed();
const revision = layer.getRevision();
@@ -166,7 +166,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('does not re-render for available fonts', function(done) {
map.renderSync();
clear(_ol_render_canvas_.checkedFonts_);
clear(checkedFonts);
layerStyle[0].getText().setFont('12px sans-serif');
layer.changed();
const revision = layer.getRevision();
@@ -178,7 +178,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('re-renders for fonts that become available', function(done) {
map.renderSync();
clear(_ol_render_canvas_.checkedFonts_);
clear(checkedFonts);
head.appendChild(font);
layerStyle[0].getText().setFont('12px "Dancing Script",sans-serif');
layer.changed();