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

Named exports from ol/render/canvas

Browse Source
This commit is contained in:
Tim Schaub
2018-02-14 09:27:33 -07:00
parent 18fa8ddc58
commit 0948d4002f
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();