Automated class transform
npx lebab --replace src --transform class
This commit is contained in:
Tim Schaub
+193
-195
@@ -16,218 +16,216 @@ import CanvasReplay from '../canvas/Replay.js';
|
||||
* @param {?} declutterTree Declutter tree.
|
||||
* @struct
|
||||
*/
|
||||
const CanvasImageReplay = function(
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
class CanvasImageReplay {
|
||||
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/canvas~DeclutterGroup}
|
||||
*/
|
||||
this.declutterGroup_ = null;
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/canvas~DeclutterGroup}
|
||||
*/
|
||||
this.declutterGroup_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
|
||||
*/
|
||||
this.hitDetectionImage_ = null;
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
|
||||
*/
|
||||
this.hitDetectionImage_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
|
||||
*/
|
||||
this.image_ = null;
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement}
|
||||
*/
|
||||
this.image_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.anchorX_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.anchorX_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.anchorY_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.anchorY_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.height_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.height_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.opacity_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.opacity_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.originX_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.originX_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.originY_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.originY_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.rotateWithView_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.rotateWithView_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.rotation_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.rotation_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.scale_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.scale_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.snapToPixel_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.snapToPixel_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.width_ = undefined;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.width_ = undefined;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @private
|
||||
* @return {number} My end.
|
||||
*/
|
||||
drawCoordinates_(flatCoordinates, offset, end, stride) {
|
||||
return this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawPoint(pointGeometry, feature) {
|
||||
if (!this.image_) {
|
||||
return;
|
||||
}
|
||||
this.beginGeometry(pointGeometry, feature);
|
||||
const flatCoordinates = pointGeometry.getFlatCoordinates();
|
||||
const stride = pointGeometry.getStride();
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
this.instructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.endGeometry(pointGeometry, feature);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiPoint(multiPointGeometry, feature) {
|
||||
if (!this.image_) {
|
||||
return;
|
||||
}
|
||||
this.beginGeometry(multiPointGeometry, feature);
|
||||
const flatCoordinates = multiPointGeometry.getFlatCoordinates();
|
||||
const stride = multiPointGeometry.getStride();
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.drawCoordinates_(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
this.instructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.endGeometry(multiPointGeometry, feature);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
finish() {
|
||||
this.reverseHitDetectionInstructions();
|
||||
// FIXME this doesn't really protect us against further calls to draw*Geometry
|
||||
this.anchorX_ = undefined;
|
||||
this.anchorY_ = undefined;
|
||||
this.hitDetectionImage_ = null;
|
||||
this.image_ = null;
|
||||
this.height_ = undefined;
|
||||
this.scale_ = undefined;
|
||||
this.opacity_ = undefined;
|
||||
this.originX_ = undefined;
|
||||
this.originY_ = undefined;
|
||||
this.rotateWithView_ = undefined;
|
||||
this.rotation_ = undefined;
|
||||
this.snapToPixel_ = undefined;
|
||||
this.width_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
setImageStyle(imageStyle, declutterGroup) {
|
||||
const anchor = imageStyle.getAnchor();
|
||||
const size = imageStyle.getSize();
|
||||
const hitDetectionImage = imageStyle.getHitDetectionImage(1);
|
||||
const image = imageStyle.getImage(1);
|
||||
const origin = imageStyle.getOrigin();
|
||||
this.anchorX_ = anchor[0];
|
||||
this.anchorY_ = anchor[1];
|
||||
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
|
||||
this.hitDetectionImage_ = hitDetectionImage;
|
||||
this.image_ = image;
|
||||
this.height_ = size[1];
|
||||
this.opacity_ = imageStyle.getOpacity();
|
||||
this.originX_ = origin[0];
|
||||
this.originY_ = origin[1];
|
||||
this.rotateWithView_ = imageStyle.getRotateWithView();
|
||||
this.rotation_ = imageStyle.getRotation();
|
||||
this.scale_ = imageStyle.getScale();
|
||||
this.snapToPixel_ = imageStyle.getSnapToPixel();
|
||||
this.width_ = size[0];
|
||||
}
|
||||
}
|
||||
|
||||
inherits(CanvasImageReplay, CanvasReplay);
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @private
|
||||
* @return {number} My end.
|
||||
*/
|
||||
CanvasImageReplay.prototype.drawCoordinates_ = function(flatCoordinates, offset, end, stride) {
|
||||
return this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasImageReplay.prototype.drawPoint = function(pointGeometry, feature) {
|
||||
if (!this.image_) {
|
||||
return;
|
||||
}
|
||||
this.beginGeometry(pointGeometry, feature);
|
||||
const flatCoordinates = pointGeometry.getFlatCoordinates();
|
||||
const stride = pointGeometry.getStride();
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
this.instructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.endGeometry(pointGeometry, feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasImageReplay.prototype.drawMultiPoint = function(multiPointGeometry, feature) {
|
||||
if (!this.image_) {
|
||||
return;
|
||||
}
|
||||
this.beginGeometry(multiPointGeometry, feature);
|
||||
const flatCoordinates = multiPointGeometry.getFlatCoordinates();
|
||||
const stride = multiPointGeometry.getStride();
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.drawCoordinates_(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
this.instructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_,
|
||||
// Remaining arguments to DRAW_IMAGE are in alphabetical order
|
||||
this.anchorX_, this.anchorY_, this.declutterGroup_, this.height_, this.opacity_,
|
||||
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
|
||||
this.scale_, this.snapToPixel_, this.width_
|
||||
]);
|
||||
this.endGeometry(multiPointGeometry, feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasImageReplay.prototype.finish = function() {
|
||||
this.reverseHitDetectionInstructions();
|
||||
// FIXME this doesn't really protect us against further calls to draw*Geometry
|
||||
this.anchorX_ = undefined;
|
||||
this.anchorY_ = undefined;
|
||||
this.hitDetectionImage_ = null;
|
||||
this.image_ = null;
|
||||
this.height_ = undefined;
|
||||
this.scale_ = undefined;
|
||||
this.opacity_ = undefined;
|
||||
this.originX_ = undefined;
|
||||
this.originY_ = undefined;
|
||||
this.rotateWithView_ = undefined;
|
||||
this.rotation_ = undefined;
|
||||
this.snapToPixel_ = undefined;
|
||||
this.width_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasImageReplay.prototype.setImageStyle = function(imageStyle, declutterGroup) {
|
||||
const anchor = imageStyle.getAnchor();
|
||||
const size = imageStyle.getSize();
|
||||
const hitDetectionImage = imageStyle.getHitDetectionImage(1);
|
||||
const image = imageStyle.getImage(1);
|
||||
const origin = imageStyle.getOrigin();
|
||||
this.anchorX_ = anchor[0];
|
||||
this.anchorY_ = anchor[1];
|
||||
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
|
||||
this.hitDetectionImage_ = hitDetectionImage;
|
||||
this.image_ = image;
|
||||
this.height_ = size[1];
|
||||
this.opacity_ = imageStyle.getOpacity();
|
||||
this.originX_ = origin[0];
|
||||
this.originY_ = origin[1];
|
||||
this.rotateWithView_ = imageStyle.getRotateWithView();
|
||||
this.rotation_ = imageStyle.getRotation();
|
||||
this.scale_ = imageStyle.getScale();
|
||||
this.snapToPixel_ = imageStyle.getSnapToPixel();
|
||||
this.width_ = size[0];
|
||||
};
|
||||
export default CanvasImageReplay;
|
||||
|
||||
+837
-854
File diff suppressed because it is too large
Load Diff
@@ -16,111 +16,109 @@ import CanvasReplay from '../canvas/Replay.js';
|
||||
* @param {?} declutterTree Declutter tree.
|
||||
* @struct
|
||||
*/
|
||||
const CanvasLineStringReplay = function(
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
};
|
||||
class CanvasLineStringReplay {
|
||||
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @private
|
||||
* @return {number} end.
|
||||
*/
|
||||
drawFlatCoordinates_(flatCoordinates, offset, end, stride) {
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.appendFlatCoordinates(
|
||||
flatCoordinates, offset, end, stride, false, false);
|
||||
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
|
||||
this.instructions.push(moveToLineToInstruction);
|
||||
this.hitDetectionInstructions.push(moveToLineToInstruction);
|
||||
return end;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawLineString(lineStringGeometry, feature) {
|
||||
const state = this.state;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
const lineWidth = state.lineWidth;
|
||||
if (strokeStyle === undefined || lineWidth === undefined) {
|
||||
return;
|
||||
}
|
||||
this.updateStrokeStyle(state, this.applyStroke);
|
||||
this.beginGeometry(lineStringGeometry, feature);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
], beginPathInstruction);
|
||||
const flatCoordinates = lineStringGeometry.getFlatCoordinates();
|
||||
const stride = lineStringGeometry.getStride();
|
||||
this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
this.endGeometry(lineStringGeometry, feature);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiLineString(multiLineStringGeometry, feature) {
|
||||
const state = this.state;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
const lineWidth = state.lineWidth;
|
||||
if (strokeStyle === undefined || lineWidth === undefined) {
|
||||
return;
|
||||
}
|
||||
this.updateStrokeStyle(state, this.applyStroke);
|
||||
this.beginGeometry(multiLineStringGeometry, feature);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
], beginPathInstruction);
|
||||
const ends = multiLineStringGeometry.getEnds();
|
||||
const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
|
||||
const stride = multiLineStringGeometry.getStride();
|
||||
let offset = 0;
|
||||
for (let i = 0, ii = ends.length; i < ii; ++i) {
|
||||
offset = this.drawFlatCoordinates_(flatCoordinates, offset, ends[i], stride);
|
||||
}
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
this.endGeometry(multiLineStringGeometry, feature);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
finish() {
|
||||
const state = this.state;
|
||||
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
}
|
||||
this.reverseHitDetectionInstructions();
|
||||
this.state = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc.
|
||||
*/
|
||||
applyStroke(state) {
|
||||
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
state.lastStroke = this.coordinates.length;
|
||||
}
|
||||
state.lastStroke = 0;
|
||||
CanvasReplay.prototype.applyStroke.call(this, state);
|
||||
this.instructions.push(beginPathInstruction);
|
||||
}
|
||||
}
|
||||
|
||||
inherits(CanvasLineStringReplay, CanvasReplay);
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {number} end End.
|
||||
* @param {number} stride Stride.
|
||||
* @private
|
||||
* @return {number} end.
|
||||
*/
|
||||
CanvasLineStringReplay.prototype.drawFlatCoordinates_ = function(flatCoordinates, offset, end, stride) {
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.appendFlatCoordinates(
|
||||
flatCoordinates, offset, end, stride, false, false);
|
||||
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
|
||||
this.instructions.push(moveToLineToInstruction);
|
||||
this.hitDetectionInstructions.push(moveToLineToInstruction);
|
||||
return end;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasLineStringReplay.prototype.drawLineString = function(lineStringGeometry, feature) {
|
||||
const state = this.state;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
const lineWidth = state.lineWidth;
|
||||
if (strokeStyle === undefined || lineWidth === undefined) {
|
||||
return;
|
||||
}
|
||||
this.updateStrokeStyle(state, this.applyStroke);
|
||||
this.beginGeometry(lineStringGeometry, feature);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
], beginPathInstruction);
|
||||
const flatCoordinates = lineStringGeometry.getFlatCoordinates();
|
||||
const stride = lineStringGeometry.getStride();
|
||||
this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
this.endGeometry(lineStringGeometry, feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) {
|
||||
const state = this.state;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
const lineWidth = state.lineWidth;
|
||||
if (strokeStyle === undefined || lineWidth === undefined) {
|
||||
return;
|
||||
}
|
||||
this.updateStrokeStyle(state, this.applyStroke);
|
||||
this.beginGeometry(multiLineStringGeometry, feature);
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
], beginPathInstruction);
|
||||
const ends = multiLineStringGeometry.getEnds();
|
||||
const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
|
||||
const stride = multiLineStringGeometry.getStride();
|
||||
let offset = 0;
|
||||
for (let i = 0, ii = ends.length; i < ii; ++i) {
|
||||
offset = this.drawFlatCoordinates_(flatCoordinates, offset, ends[i], stride);
|
||||
}
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
this.endGeometry(multiLineStringGeometry, feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasLineStringReplay.prototype.finish = function() {
|
||||
const state = this.state;
|
||||
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
}
|
||||
this.reverseHitDetectionInstructions();
|
||||
this.state = null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc.
|
||||
*/
|
||||
CanvasLineStringReplay.prototype.applyStroke = function(state) {
|
||||
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
state.lastStroke = this.coordinates.length;
|
||||
}
|
||||
state.lastStroke = 0;
|
||||
CanvasReplay.prototype.applyStroke.call(this, state);
|
||||
this.instructions.push(beginPathInstruction);
|
||||
};
|
||||
export default CanvasLineStringReplay;
|
||||
|
||||
@@ -22,203 +22,200 @@ import CanvasReplay from '../canvas/Replay.js';
|
||||
* @param {?} declutterTree Declutter tree.
|
||||
* @struct
|
||||
*/
|
||||
const CanvasPolygonReplay = function(
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
};
|
||||
class CanvasPolygonReplay {
|
||||
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {Array.<number>} ends Ends.
|
||||
* @param {number} stride Stride.
|
||||
* @private
|
||||
* @return {number} End.
|
||||
*/
|
||||
drawFlatCoordinatess_(flatCoordinates, offset, ends, stride) {
|
||||
const state = this.state;
|
||||
const fill = state.fillStyle !== undefined;
|
||||
const stroke = state.strokeStyle != undefined;
|
||||
const numEnds = ends.length;
|
||||
this.instructions.push(beginPathInstruction);
|
||||
this.hitDetectionInstructions.push(beginPathInstruction);
|
||||
for (let i = 0; i < numEnds; ++i) {
|
||||
const end = ends[i];
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride, true, !stroke);
|
||||
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
|
||||
this.instructions.push(moveToLineToInstruction);
|
||||
this.hitDetectionInstructions.push(moveToLineToInstruction);
|
||||
if (stroke) {
|
||||
// Performance optimization: only call closePath() when we have a stroke.
|
||||
// Otherwise the ring is closed already (see appendFlatCoordinates above).
|
||||
this.instructions.push(closePathInstruction);
|
||||
this.hitDetectionInstructions.push(closePathInstruction);
|
||||
}
|
||||
offset = end;
|
||||
}
|
||||
if (fill) {
|
||||
this.instructions.push(fillInstruction);
|
||||
this.hitDetectionInstructions.push(fillInstruction);
|
||||
}
|
||||
if (stroke) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawCircle(circleGeometry, feature) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
if (fillStyle === undefined && strokeStyle === undefined) {
|
||||
return;
|
||||
}
|
||||
this.setFillStrokeStyles_(circleGeometry);
|
||||
this.beginGeometry(circleGeometry, feature);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_FILL_STYLE,
|
||||
asString(defaultFillStyle)
|
||||
]);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
]);
|
||||
}
|
||||
const flatCoordinates = circleGeometry.getFlatCoordinates();
|
||||
const stride = circleGeometry.getStride();
|
||||
const myBegin = this.coordinates.length;
|
||||
this.appendFlatCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride, false, false);
|
||||
const circleInstruction = [CanvasInstruction.CIRCLE, myBegin];
|
||||
this.instructions.push(beginPathInstruction, circleInstruction);
|
||||
this.hitDetectionInstructions.push(beginPathInstruction, circleInstruction);
|
||||
this.hitDetectionInstructions.push(fillInstruction);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.instructions.push(fillInstruction);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
}
|
||||
this.endGeometry(circleGeometry, feature);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawPolygon(polygonGeometry, feature) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
if (fillStyle === undefined && strokeStyle === undefined) {
|
||||
return;
|
||||
}
|
||||
this.setFillStrokeStyles_(polygonGeometry);
|
||||
this.beginGeometry(polygonGeometry, feature);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_FILL_STYLE,
|
||||
asString(defaultFillStyle)
|
||||
]);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
]);
|
||||
}
|
||||
const ends = polygonGeometry.getEnds();
|
||||
const flatCoordinates = polygonGeometry.getOrientedFlatCoordinates();
|
||||
const stride = polygonGeometry.getStride();
|
||||
this.drawFlatCoordinatess_(flatCoordinates, 0, ends, stride);
|
||||
this.endGeometry(polygonGeometry, feature);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawMultiPolygon(multiPolygonGeometry, feature) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
if (fillStyle === undefined && strokeStyle === undefined) {
|
||||
return;
|
||||
}
|
||||
this.setFillStrokeStyles_(multiPolygonGeometry);
|
||||
this.beginGeometry(multiPolygonGeometry, feature);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_FILL_STYLE,
|
||||
asString(defaultFillStyle)
|
||||
]);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
]);
|
||||
}
|
||||
const endss = multiPolygonGeometry.getEndss();
|
||||
const flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
|
||||
const stride = multiPolygonGeometry.getStride();
|
||||
let offset = 0;
|
||||
for (let i = 0, ii = endss.length; i < ii; ++i) {
|
||||
offset = this.drawFlatCoordinatess_(flatCoordinates, offset, endss[i], stride);
|
||||
}
|
||||
this.endGeometry(multiPolygonGeometry, feature);
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
finish() {
|
||||
this.reverseHitDetectionInstructions();
|
||||
this.state = null;
|
||||
// We want to preserve topology when drawing polygons. Polygons are
|
||||
// simplified using quantization and point elimination. However, we might
|
||||
// have received a mix of quantized and non-quantized geometries, so ensure
|
||||
// that all are quantized by quantizing all coordinates in the batch.
|
||||
const tolerance = this.tolerance;
|
||||
if (tolerance !== 0) {
|
||||
const coordinates = this.coordinates;
|
||||
for (let i = 0, ii = coordinates.length; i < ii; ++i) {
|
||||
coordinates[i] = snap(coordinates[i], tolerance);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
|
||||
*/
|
||||
setFillStrokeStyles_(geometry) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
if (fillStyle !== undefined) {
|
||||
this.updateFillStyle(state, this.createFill, geometry);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.updateStrokeStyle(state, this.applyStroke);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
inherits(CanvasPolygonReplay, CanvasReplay);
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array.<number>} flatCoordinates Flat coordinates.
|
||||
* @param {number} offset Offset.
|
||||
* @param {Array.<number>} ends Ends.
|
||||
* @param {number} stride Stride.
|
||||
* @private
|
||||
* @return {number} End.
|
||||
*/
|
||||
CanvasPolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates, offset, ends, stride) {
|
||||
const state = this.state;
|
||||
const fill = state.fillStyle !== undefined;
|
||||
const stroke = state.strokeStyle != undefined;
|
||||
const numEnds = ends.length;
|
||||
this.instructions.push(beginPathInstruction);
|
||||
this.hitDetectionInstructions.push(beginPathInstruction);
|
||||
for (let i = 0; i < numEnds; ++i) {
|
||||
const end = ends[i];
|
||||
const myBegin = this.coordinates.length;
|
||||
const myEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride, true, !stroke);
|
||||
const moveToLineToInstruction = [CanvasInstruction.MOVE_TO_LINE_TO, myBegin, myEnd];
|
||||
this.instructions.push(moveToLineToInstruction);
|
||||
this.hitDetectionInstructions.push(moveToLineToInstruction);
|
||||
if (stroke) {
|
||||
// Performance optimization: only call closePath() when we have a stroke.
|
||||
// Otherwise the ring is closed already (see appendFlatCoordinates above).
|
||||
this.instructions.push(closePathInstruction);
|
||||
this.hitDetectionInstructions.push(closePathInstruction);
|
||||
}
|
||||
offset = end;
|
||||
}
|
||||
if (fill) {
|
||||
this.instructions.push(fillInstruction);
|
||||
this.hitDetectionInstructions.push(fillInstruction);
|
||||
}
|
||||
if (stroke) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
}
|
||||
return offset;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasPolygonReplay.prototype.drawCircle = function(circleGeometry, feature) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
if (fillStyle === undefined && strokeStyle === undefined) {
|
||||
return;
|
||||
}
|
||||
this.setFillStrokeStyles_(circleGeometry);
|
||||
this.beginGeometry(circleGeometry, feature);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_FILL_STYLE,
|
||||
asString(defaultFillStyle)
|
||||
]);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
]);
|
||||
}
|
||||
const flatCoordinates = circleGeometry.getFlatCoordinates();
|
||||
const stride = circleGeometry.getStride();
|
||||
const myBegin = this.coordinates.length;
|
||||
this.appendFlatCoordinates(
|
||||
flatCoordinates, 0, flatCoordinates.length, stride, false, false);
|
||||
const circleInstruction = [CanvasInstruction.CIRCLE, myBegin];
|
||||
this.instructions.push(beginPathInstruction, circleInstruction);
|
||||
this.hitDetectionInstructions.push(beginPathInstruction, circleInstruction);
|
||||
this.hitDetectionInstructions.push(fillInstruction);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.instructions.push(fillInstruction);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.instructions.push(strokeInstruction);
|
||||
this.hitDetectionInstructions.push(strokeInstruction);
|
||||
}
|
||||
this.endGeometry(circleGeometry, feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasPolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
if (fillStyle === undefined && strokeStyle === undefined) {
|
||||
return;
|
||||
}
|
||||
this.setFillStrokeStyles_(polygonGeometry);
|
||||
this.beginGeometry(polygonGeometry, feature);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_FILL_STYLE,
|
||||
asString(defaultFillStyle)
|
||||
]);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
]);
|
||||
}
|
||||
const ends = polygonGeometry.getEnds();
|
||||
const flatCoordinates = polygonGeometry.getOrientedFlatCoordinates();
|
||||
const stride = polygonGeometry.getStride();
|
||||
this.drawFlatCoordinatess_(flatCoordinates, 0, ends, stride);
|
||||
this.endGeometry(polygonGeometry, feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasPolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
const strokeStyle = state.strokeStyle;
|
||||
if (fillStyle === undefined && strokeStyle === undefined) {
|
||||
return;
|
||||
}
|
||||
this.setFillStrokeStyles_(multiPolygonGeometry);
|
||||
this.beginGeometry(multiPolygonGeometry, feature);
|
||||
if (state.fillStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_FILL_STYLE,
|
||||
asString(defaultFillStyle)
|
||||
]);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.hitDetectionInstructions.push([
|
||||
CanvasInstruction.SET_STROKE_STYLE,
|
||||
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
|
||||
state.miterLimit, state.lineDash, state.lineDashOffset
|
||||
]);
|
||||
}
|
||||
const endss = multiPolygonGeometry.getEndss();
|
||||
const flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
|
||||
const stride = multiPolygonGeometry.getStride();
|
||||
let offset = 0;
|
||||
for (let i = 0, ii = endss.length; i < ii; ++i) {
|
||||
offset = this.drawFlatCoordinatess_(flatCoordinates, offset, endss[i], stride);
|
||||
}
|
||||
this.endGeometry(multiPolygonGeometry, feature);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasPolygonReplay.prototype.finish = function() {
|
||||
this.reverseHitDetectionInstructions();
|
||||
this.state = null;
|
||||
// We want to preserve topology when drawing polygons. Polygons are
|
||||
// simplified using quantization and point elimination. However, we might
|
||||
// have received a mix of quantized and non-quantized geometries, so ensure
|
||||
// that all are quantized by quantizing all coordinates in the batch.
|
||||
const tolerance = this.tolerance;
|
||||
if (tolerance !== 0) {
|
||||
const coordinates = this.coordinates;
|
||||
for (let i = 0, ii = coordinates.length; i < ii; ++i) {
|
||||
coordinates[i] = snap(coordinates[i], tolerance);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {module:ol/geom/Geometry|module:ol/render/Feature} geometry Geometry.
|
||||
*/
|
||||
CanvasPolygonReplay.prototype.setFillStrokeStyles_ = function(geometry) {
|
||||
const state = this.state;
|
||||
const fillStyle = state.fillStyle;
|
||||
if (fillStyle !== undefined) {
|
||||
this.updateFillStyle(state, this.createFill, geometry);
|
||||
}
|
||||
if (state.strokeStyle !== undefined) {
|
||||
this.updateStrokeStyle(state, this.applyStroke);
|
||||
}
|
||||
};
|
||||
export default CanvasPolygonReplay;
|
||||
|
||||
+999
-991
File diff suppressed because it is too large
Load Diff
+329
-316
@@ -46,76 +46,366 @@ const BATCH_CONSTRUCTORS = {
|
||||
* @param {number=} opt_renderBuffer Optional rendering buffer.
|
||||
* @struct
|
||||
*/
|
||||
const CanvasReplayGroup = function(
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree, opt_renderBuffer) {
|
||||
ReplayGroup.call(this);
|
||||
class CanvasReplayGroup {
|
||||
constructor(
|
||||
tolerance,
|
||||
maxExtent,
|
||||
resolution,
|
||||
pixelRatio,
|
||||
overlaps,
|
||||
declutterTree,
|
||||
opt_renderBuffer
|
||||
) {
|
||||
ReplayGroup.call(this);
|
||||
|
||||
/**
|
||||
* Declutter tree.
|
||||
* @private
|
||||
*/
|
||||
this.declutterTree_ = declutterTree;
|
||||
|
||||
/**
|
||||
* @type {module:ol/render/canvas~DeclutterGroup}
|
||||
* @private
|
||||
*/
|
||||
this.declutterGroup_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.tolerance_ = tolerance;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/extent~Extent}
|
||||
*/
|
||||
this.maxExtent_ = maxExtent;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.overlaps_ = overlaps;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.pixelRatio_ = pixelRatio;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.resolution_ = resolution;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.renderBuffer_ = opt_renderBuffer;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {!Object.<string, !Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>}
|
||||
*/
|
||||
this.replaysByZIndex_ = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {CanvasRenderingContext2D}
|
||||
*/
|
||||
this.hitDetectionContext_ = createCanvasContext2D(1, 1);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.hitDetectionTransform_ = createTransform();
|
||||
}
|
||||
|
||||
/**
|
||||
* Declutter tree.
|
||||
* @private
|
||||
* @param {boolean} group Group with previous replay.
|
||||
* @return {module:ol/render/canvas~DeclutterGroup} Declutter instruction group.
|
||||
*/
|
||||
this.declutterTree_ = declutterTree;
|
||||
addDeclutter(group) {
|
||||
let declutter = null;
|
||||
if (this.declutterTree_) {
|
||||
if (group) {
|
||||
declutter = this.declutterGroup_;
|
||||
/** @type {number} */ (declutter[4])++;
|
||||
} else {
|
||||
declutter = this.declutterGroup_ = createEmpty();
|
||||
declutter.push(1);
|
||||
}
|
||||
}
|
||||
return declutter;
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {module:ol/render/canvas~DeclutterGroup}
|
||||
* @private
|
||||
* @param {CanvasRenderingContext2D} context Context.
|
||||
* @param {module:ol/transform~Transform} transform Transform.
|
||||
*/
|
||||
this.declutterGroup_ = null;
|
||||
clip(context, transform) {
|
||||
const flatClipCoords = this.getClipCoords(transform);
|
||||
context.beginPath();
|
||||
context.moveTo(flatClipCoords[0], flatClipCoords[1]);
|
||||
context.lineTo(flatClipCoords[2], flatClipCoords[3]);
|
||||
context.lineTo(flatClipCoords[4], flatClipCoords[5]);
|
||||
context.lineTo(flatClipCoords[6], flatClipCoords[7]);
|
||||
context.clip();
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
* @param {Array.<module:ol/render/ReplayType>} replays Replays.
|
||||
* @return {boolean} Has replays of the provided types.
|
||||
*/
|
||||
this.tolerance_ = tolerance;
|
||||
hasReplays(replays) {
|
||||
for (const zIndex in this.replaysByZIndex_) {
|
||||
const candidates = this.replaysByZIndex_[zIndex];
|
||||
for (let i = 0, ii = replays.length; i < ii; ++i) {
|
||||
if (replays[i] in candidates) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/extent~Extent}
|
||||
* FIXME empty description for jsdoc
|
||||
*/
|
||||
this.maxExtent_ = maxExtent;
|
||||
finish() {
|
||||
for (const zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
replays[replayKey].finish();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {number} hitTolerance Hit tolerance in pixels.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T} callback Feature callback.
|
||||
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>} declutterReplays Declutter replays.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
this.overlaps_ = overlaps;
|
||||
forEachFeatureAtCoordinate(
|
||||
coordinate,
|
||||
resolution,
|
||||
rotation,
|
||||
hitTolerance,
|
||||
skippedFeaturesHash,
|
||||
callback,
|
||||
declutterReplays
|
||||
) {
|
||||
|
||||
hitTolerance = Math.round(hitTolerance);
|
||||
const contextSize = hitTolerance * 2 + 1;
|
||||
const transform = composeTransform(this.hitDetectionTransform_,
|
||||
hitTolerance + 0.5, hitTolerance + 0.5,
|
||||
1 / resolution, -1 / resolution,
|
||||
-rotation,
|
||||
-coordinate[0], -coordinate[1]);
|
||||
const context = this.hitDetectionContext_;
|
||||
|
||||
if (context.canvas.width !== contextSize || context.canvas.height !== contextSize) {
|
||||
context.canvas.width = contextSize;
|
||||
context.canvas.height = contextSize;
|
||||
} else {
|
||||
context.clearRect(0, 0, contextSize, contextSize);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {module:ol/extent~Extent}
|
||||
*/
|
||||
let hitExtent;
|
||||
if (this.renderBuffer_ !== undefined) {
|
||||
hitExtent = createEmpty();
|
||||
extendCoordinate(hitExtent, coordinate);
|
||||
buffer(hitExtent, resolution * (this.renderBuffer_ + hitTolerance), hitExtent);
|
||||
}
|
||||
|
||||
const mask = getCircleArray(hitTolerance);
|
||||
let declutteredFeatures;
|
||||
if (this.declutterTree_) {
|
||||
declutteredFeatures = this.declutterTree_.all().map(function(entry) {
|
||||
return entry.value;
|
||||
});
|
||||
}
|
||||
|
||||
let replayType;
|
||||
|
||||
/**
|
||||
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
|
||||
* @return {?} Callback result.
|
||||
*/
|
||||
function featureCallback(feature) {
|
||||
const imageData = context.getImageData(0, 0, contextSize, contextSize).data;
|
||||
for (let i = 0; i < contextSize; i++) {
|
||||
for (let j = 0; j < contextSize; j++) {
|
||||
if (mask[i][j]) {
|
||||
if (imageData[(j * contextSize + i) * 4 + 3] > 0) {
|
||||
let result;
|
||||
if (!(declutteredFeatures && (replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) ||
|
||||
declutteredFeatures.indexOf(feature) !== -1) {
|
||||
result = callback(feature);
|
||||
}
|
||||
if (result) {
|
||||
return result;
|
||||
} else {
|
||||
context.clearRect(0, 0, contextSize, contextSize);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
|
||||
let i, j, replays, replay, result;
|
||||
for (i = zs.length - 1; i >= 0; --i) {
|
||||
const zIndexKey = zs[i].toString();
|
||||
replays = this.replaysByZIndex_[zIndexKey];
|
||||
for (j = ORDER.length - 1; j >= 0; --j) {
|
||||
replayType = ORDER[j];
|
||||
replay = replays[replayType];
|
||||
if (replay !== undefined) {
|
||||
if (declutterReplays &&
|
||||
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
|
||||
const declutter = declutterReplays[zIndexKey];
|
||||
if (!declutter) {
|
||||
declutterReplays[zIndexKey] = [replay, transform.slice(0)];
|
||||
} else {
|
||||
declutter.push(replay, transform.slice(0));
|
||||
}
|
||||
} else {
|
||||
result = replay.replayHitDetection(context, transform, rotation,
|
||||
skippedFeaturesHash, featureCallback, hitExtent);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
* @param {module:ol/transform~Transform} transform Transform.
|
||||
* @return {Array.<number>} Clip coordinates.
|
||||
*/
|
||||
this.pixelRatio_ = pixelRatio;
|
||||
getClipCoords(transform) {
|
||||
const maxExtent = this.maxExtent_;
|
||||
const minX = maxExtent[0];
|
||||
const minY = maxExtent[1];
|
||||
const maxX = maxExtent[2];
|
||||
const maxY = maxExtent[3];
|
||||
const flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
|
||||
transform2D(
|
||||
flatClipCoords, 0, 8, 2, transform, flatClipCoords);
|
||||
return flatClipCoords;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.resolution_ = resolution;
|
||||
getReplay(zIndex, replayType) {
|
||||
const zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
|
||||
let replays = this.replaysByZIndex_[zIndexKey];
|
||||
if (replays === undefined) {
|
||||
replays = {};
|
||||
this.replaysByZIndex_[zIndexKey] = replays;
|
||||
}
|
||||
let replay = replays[replayType];
|
||||
if (replay === undefined) {
|
||||
const Constructor = BATCH_CONSTRUCTORS[replayType];
|
||||
replay = new Constructor(this.tolerance_, this.maxExtent_,
|
||||
this.resolution_, this.pixelRatio_, this.overlaps_, this.declutterTree_);
|
||||
replays[replayType] = replay;
|
||||
}
|
||||
return replay;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
* @return {Object.<string, Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>} Replays.
|
||||
*/
|
||||
this.renderBuffer_ = opt_renderBuffer;
|
||||
getReplays() {
|
||||
return this.replaysByZIndex_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {!Object.<string, !Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.replaysByZIndex_ = {};
|
||||
isEmpty() {
|
||||
return isEmpty(this.replaysByZIndex_);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {CanvasRenderingContext2D}
|
||||
* @param {CanvasRenderingContext2D} context Context.
|
||||
* @param {module:ol/transform~Transform} transform Transform.
|
||||
* @param {number} viewRotation View rotation.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {Array.<module:ol/render/ReplayType>=} opt_replayTypes Ordered replay types to replay.
|
||||
* Default is {@link module:ol/render/replay~ORDER}
|
||||
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>=} opt_declutterReplays Declutter replays.
|
||||
*/
|
||||
this.hitDetectionContext_ = createCanvasContext2D(1, 1);
|
||||
replay(
|
||||
context,
|
||||
transform,
|
||||
viewRotation,
|
||||
skippedFeaturesHash,
|
||||
opt_replayTypes,
|
||||
opt_declutterReplays
|
||||
) {
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/transform~Transform}
|
||||
*/
|
||||
this.hitDetectionTransform_ = createTransform();
|
||||
};
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
|
||||
// setup clipping so that the parts of over-simplified geometries are not
|
||||
// visible outside the current extent when panning
|
||||
context.save();
|
||||
this.clip(context, transform);
|
||||
|
||||
const replayTypes = opt_replayTypes ? opt_replayTypes : ORDER;
|
||||
let i, ii, j, jj, replays, replay;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
const zIndexKey = zs[i].toString();
|
||||
replays = this.replaysByZIndex_[zIndexKey];
|
||||
for (j = 0, jj = replayTypes.length; j < jj; ++j) {
|
||||
const replayType = replayTypes[j];
|
||||
replay = replays[replayType];
|
||||
if (replay !== undefined) {
|
||||
if (opt_declutterReplays &&
|
||||
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
|
||||
const declutter = opt_declutterReplays[zIndexKey];
|
||||
if (!declutter) {
|
||||
opt_declutterReplays[zIndexKey] = [replay, transform.slice(0)];
|
||||
} else {
|
||||
declutter.push(replay, transform.slice(0));
|
||||
}
|
||||
} else {
|
||||
replay.replay(context, transform, viewRotation, skippedFeaturesHash);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
inherits(CanvasReplayGroup, ReplayGroup);
|
||||
|
||||
@@ -217,281 +507,4 @@ export function replayDeclutter(declutterReplays, context, rotation) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {boolean} group Group with previous replay.
|
||||
* @return {module:ol/render/canvas~DeclutterGroup} Declutter instruction group.
|
||||
*/
|
||||
CanvasReplayGroup.prototype.addDeclutter = function(group) {
|
||||
let declutter = null;
|
||||
if (this.declutterTree_) {
|
||||
if (group) {
|
||||
declutter = this.declutterGroup_;
|
||||
/** @type {number} */ (declutter[4])++;
|
||||
} else {
|
||||
declutter = this.declutterGroup_ = createEmpty();
|
||||
declutter.push(1);
|
||||
}
|
||||
}
|
||||
return declutter;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {CanvasRenderingContext2D} context Context.
|
||||
* @param {module:ol/transform~Transform} transform Transform.
|
||||
*/
|
||||
CanvasReplayGroup.prototype.clip = function(context, transform) {
|
||||
const flatClipCoords = this.getClipCoords(transform);
|
||||
context.beginPath();
|
||||
context.moveTo(flatClipCoords[0], flatClipCoords[1]);
|
||||
context.lineTo(flatClipCoords[2], flatClipCoords[3]);
|
||||
context.lineTo(flatClipCoords[4], flatClipCoords[5]);
|
||||
context.lineTo(flatClipCoords[6], flatClipCoords[7]);
|
||||
context.clip();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array.<module:ol/render/ReplayType>} replays Replays.
|
||||
* @return {boolean} Has replays of the provided types.
|
||||
*/
|
||||
CanvasReplayGroup.prototype.hasReplays = function(replays) {
|
||||
for (const zIndex in this.replaysByZIndex_) {
|
||||
const candidates = this.replaysByZIndex_[zIndex];
|
||||
for (let i = 0, ii = replays.length; i < ii; ++i) {
|
||||
if (replays[i] in candidates) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* FIXME empty description for jsdoc
|
||||
*/
|
||||
CanvasReplayGroup.prototype.finish = function() {
|
||||
for (const zKey in this.replaysByZIndex_) {
|
||||
const replays = this.replaysByZIndex_[zKey];
|
||||
for (const replayKey in replays) {
|
||||
replays[replayKey].finish();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} rotation Rotation.
|
||||
* @param {number} hitTolerance Hit tolerance in pixels.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {function((module:ol/Feature|module:ol/render/Feature)): T} callback Feature callback.
|
||||
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>} declutterReplays Declutter replays.
|
||||
* @return {T|undefined} Callback result.
|
||||
* @template T
|
||||
*/
|
||||
CanvasReplayGroup.prototype.forEachFeatureAtCoordinate = function(
|
||||
coordinate, resolution, rotation, hitTolerance, skippedFeaturesHash, callback, declutterReplays) {
|
||||
|
||||
hitTolerance = Math.round(hitTolerance);
|
||||
const contextSize = hitTolerance * 2 + 1;
|
||||
const transform = composeTransform(this.hitDetectionTransform_,
|
||||
hitTolerance + 0.5, hitTolerance + 0.5,
|
||||
1 / resolution, -1 / resolution,
|
||||
-rotation,
|
||||
-coordinate[0], -coordinate[1]);
|
||||
const context = this.hitDetectionContext_;
|
||||
|
||||
if (context.canvas.width !== contextSize || context.canvas.height !== contextSize) {
|
||||
context.canvas.width = contextSize;
|
||||
context.canvas.height = contextSize;
|
||||
} else {
|
||||
context.clearRect(0, 0, contextSize, contextSize);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {module:ol/extent~Extent}
|
||||
*/
|
||||
let hitExtent;
|
||||
if (this.renderBuffer_ !== undefined) {
|
||||
hitExtent = createEmpty();
|
||||
extendCoordinate(hitExtent, coordinate);
|
||||
buffer(hitExtent, resolution * (this.renderBuffer_ + hitTolerance), hitExtent);
|
||||
}
|
||||
|
||||
const mask = getCircleArray(hitTolerance);
|
||||
let declutteredFeatures;
|
||||
if (this.declutterTree_) {
|
||||
declutteredFeatures = this.declutterTree_.all().map(function(entry) {
|
||||
return entry.value;
|
||||
});
|
||||
}
|
||||
|
||||
let replayType;
|
||||
|
||||
/**
|
||||
* @param {module:ol/Feature|module:ol/render/Feature} feature Feature.
|
||||
* @return {?} Callback result.
|
||||
*/
|
||||
function featureCallback(feature) {
|
||||
const imageData = context.getImageData(0, 0, contextSize, contextSize).data;
|
||||
for (let i = 0; i < contextSize; i++) {
|
||||
for (let j = 0; j < contextSize; j++) {
|
||||
if (mask[i][j]) {
|
||||
if (imageData[(j * contextSize + i) * 4 + 3] > 0) {
|
||||
let result;
|
||||
if (!(declutteredFeatures && (replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) ||
|
||||
declutteredFeatures.indexOf(feature) !== -1) {
|
||||
result = callback(feature);
|
||||
}
|
||||
if (result) {
|
||||
return result;
|
||||
} else {
|
||||
context.clearRect(0, 0, contextSize, contextSize);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
|
||||
let i, j, replays, replay, result;
|
||||
for (i = zs.length - 1; i >= 0; --i) {
|
||||
const zIndexKey = zs[i].toString();
|
||||
replays = this.replaysByZIndex_[zIndexKey];
|
||||
for (j = ORDER.length - 1; j >= 0; --j) {
|
||||
replayType = ORDER[j];
|
||||
replay = replays[replayType];
|
||||
if (replay !== undefined) {
|
||||
if (declutterReplays &&
|
||||
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
|
||||
const declutter = declutterReplays[zIndexKey];
|
||||
if (!declutter) {
|
||||
declutterReplays[zIndexKey] = [replay, transform.slice(0)];
|
||||
} else {
|
||||
declutter.push(replay, transform.slice(0));
|
||||
}
|
||||
} else {
|
||||
result = replay.replayHitDetection(context, transform, rotation,
|
||||
skippedFeaturesHash, featureCallback, hitExtent);
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {module:ol/transform~Transform} transform Transform.
|
||||
* @return {Array.<number>} Clip coordinates.
|
||||
*/
|
||||
CanvasReplayGroup.prototype.getClipCoords = function(transform) {
|
||||
const maxExtent = this.maxExtent_;
|
||||
const minX = maxExtent[0];
|
||||
const minY = maxExtent[1];
|
||||
const maxX = maxExtent[2];
|
||||
const maxY = maxExtent[3];
|
||||
const flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
|
||||
transform2D(
|
||||
flatClipCoords, 0, 8, 2, transform, flatClipCoords);
|
||||
return flatClipCoords;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasReplayGroup.prototype.getReplay = function(zIndex, replayType) {
|
||||
const zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
|
||||
let replays = this.replaysByZIndex_[zIndexKey];
|
||||
if (replays === undefined) {
|
||||
replays = {};
|
||||
this.replaysByZIndex_[zIndexKey] = replays;
|
||||
}
|
||||
let replay = replays[replayType];
|
||||
if (replay === undefined) {
|
||||
const Constructor = BATCH_CONSTRUCTORS[replayType];
|
||||
replay = new Constructor(this.tolerance_, this.maxExtent_,
|
||||
this.resolution_, this.pixelRatio_, this.overlaps_, this.declutterTree_);
|
||||
replays[replayType] = replay;
|
||||
}
|
||||
return replay;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {Object.<string, Object.<module:ol/render/ReplayType, module:ol/render/canvas/Replay>>} Replays.
|
||||
*/
|
||||
CanvasReplayGroup.prototype.getReplays = function() {
|
||||
return this.replaysByZIndex_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasReplayGroup.prototype.isEmpty = function() {
|
||||
return isEmpty(this.replaysByZIndex_);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {CanvasRenderingContext2D} context Context.
|
||||
* @param {module:ol/transform~Transform} transform Transform.
|
||||
* @param {number} viewRotation View rotation.
|
||||
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features to skip.
|
||||
* @param {Array.<module:ol/render/ReplayType>=} opt_replayTypes Ordered replay types to replay.
|
||||
* Default is {@link module:ol/render/replay~ORDER}
|
||||
* @param {Object.<string, module:ol/render/canvas~DeclutterGroup>=} opt_declutterReplays Declutter replays.
|
||||
*/
|
||||
CanvasReplayGroup.prototype.replay = function(context,
|
||||
transform, viewRotation, skippedFeaturesHash, opt_replayTypes, opt_declutterReplays) {
|
||||
|
||||
/** @type {Array.<number>} */
|
||||
const zs = Object.keys(this.replaysByZIndex_).map(Number);
|
||||
zs.sort(numberSafeCompareFunction);
|
||||
|
||||
// setup clipping so that the parts of over-simplified geometries are not
|
||||
// visible outside the current extent when panning
|
||||
context.save();
|
||||
this.clip(context, transform);
|
||||
|
||||
const replayTypes = opt_replayTypes ? opt_replayTypes : ORDER;
|
||||
let i, ii, j, jj, replays, replay;
|
||||
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||
const zIndexKey = zs[i].toString();
|
||||
replays = this.replaysByZIndex_[zIndexKey];
|
||||
for (j = 0, jj = replayTypes.length; j < jj; ++j) {
|
||||
const replayType = replayTypes[j];
|
||||
replay = replays[replayType];
|
||||
if (replay !== undefined) {
|
||||
if (opt_declutterReplays &&
|
||||
(replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
|
||||
const declutter = opt_declutterReplays[zIndexKey];
|
||||
if (!declutter) {
|
||||
opt_declutterReplays[zIndexKey] = [replay, transform.slice(0)];
|
||||
} else {
|
||||
declutter.push(replay, transform.slice(0));
|
||||
}
|
||||
} else {
|
||||
replay.replay(context, transform, viewRotation, skippedFeaturesHash);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
context.restore();
|
||||
};
|
||||
|
||||
export default CanvasReplayGroup;
|
||||
|
||||
+479
-481
@@ -25,113 +25,501 @@ import TextPlacement from '../../style/TextPlacement.js';
|
||||
* @param {?} declutterTree Declutter tree.
|
||||
* @struct
|
||||
*/
|
||||
const CanvasTextReplay = function(
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
class CanvasTextReplay {
|
||||
constructor(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
|
||||
CanvasReplay.call(this,
|
||||
tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/canvas~DeclutterGroup}
|
||||
*/
|
||||
this.declutterGroup_;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<HTMLCanvasElement>}
|
||||
*/
|
||||
this.labels_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.text_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.textOffsetX_ = 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.textOffsetY_ = 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.textRotateWithView_ = undefined;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.textRotation_ = 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {?module:ol/render/canvas~FillState}
|
||||
*/
|
||||
this.textFillState_ = null;
|
||||
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/render/canvas~FillState>}
|
||||
*/
|
||||
this.fillStates = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {?module:ol/render/canvas~StrokeState}
|
||||
*/
|
||||
this.textStrokeState_ = null;
|
||||
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/render/canvas~StrokeState>}
|
||||
*/
|
||||
this.strokeStates = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/canvas~TextState}
|
||||
*/
|
||||
this.textState_ = /** @type {module:ol/render/canvas~TextState} */ ({});
|
||||
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/render/canvas~TextState>}
|
||||
*/
|
||||
this.textStates = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.textKey_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.fillKey_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.strokeKey_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Object.<string, Object.<string, number>>}
|
||||
*/
|
||||
this.widths_ = {};
|
||||
|
||||
labelCache.prune();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
drawText(geometry, feature) {
|
||||
const fillState = this.textFillState_;
|
||||
const strokeState = this.textStrokeState_;
|
||||
const textState = this.textState_;
|
||||
if (this.text_ === '' || !textState || (!fillState && !strokeState)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let begin = this.coordinates.length;
|
||||
|
||||
const geometryType = geometry.getType();
|
||||
let flatCoordinates = null;
|
||||
let end = 2;
|
||||
let stride = 2;
|
||||
let i, ii;
|
||||
|
||||
if (textState.placement === TextPlacement.LINE) {
|
||||
if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
|
||||
return;
|
||||
}
|
||||
let ends;
|
||||
flatCoordinates = geometry.getFlatCoordinates();
|
||||
stride = geometry.getStride();
|
||||
if (geometryType == GeometryType.LINE_STRING) {
|
||||
ends = [flatCoordinates.length];
|
||||
} else if (geometryType == GeometryType.MULTI_LINE_STRING) {
|
||||
ends = geometry.getEnds();
|
||||
} else if (geometryType == GeometryType.POLYGON) {
|
||||
ends = geometry.getEnds().slice(0, 1);
|
||||
} else if (geometryType == GeometryType.MULTI_POLYGON) {
|
||||
const endss = geometry.getEndss();
|
||||
ends = [];
|
||||
for (i = 0, ii = endss.length; i < ii; ++i) {
|
||||
ends.push(endss[i][0]);
|
||||
}
|
||||
}
|
||||
this.beginGeometry(geometry, feature);
|
||||
const textAlign = textState.textAlign;
|
||||
let flatOffset = 0;
|
||||
let flatEnd;
|
||||
for (let o = 0, oo = ends.length; o < oo; ++o) {
|
||||
if (textAlign == undefined) {
|
||||
const range = matchingChunk(textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride);
|
||||
flatOffset = range[0];
|
||||
flatEnd = range[1];
|
||||
} else {
|
||||
flatEnd = ends[o];
|
||||
}
|
||||
for (i = flatOffset; i < flatEnd; i += stride) {
|
||||
this.coordinates.push(flatCoordinates[i], flatCoordinates[i + 1]);
|
||||
}
|
||||
end = this.coordinates.length;
|
||||
flatOffset = ends[o];
|
||||
this.drawChars_(begin, end, this.declutterGroup_);
|
||||
begin = end;
|
||||
}
|
||||
this.endGeometry(geometry, feature);
|
||||
|
||||
} else {
|
||||
const label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);
|
||||
const width = label.width / this.pixelRatio;
|
||||
switch (geometryType) {
|
||||
case GeometryType.POINT:
|
||||
case GeometryType.MULTI_POINT:
|
||||
flatCoordinates = geometry.getFlatCoordinates();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/LineString} */ (geometry).getFlatMidpoint();
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
flatCoordinates = /** @type {module:ol/geom/Circle} */ (geometry).getCenter();
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/MultiLineString} */ (geometry).getFlatMidpoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
flatCoordinates = /** @type {module:ol/geom/Polygon} */ (geometry).getFlatInteriorPoint();
|
||||
if (!textState.overflow && flatCoordinates[2] / this.resolution < width) {
|
||||
return;
|
||||
}
|
||||
stride = 3;
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
const interiorPoints = /** @type {module:ol/geom/MultiPolygon} */ (geometry).getFlatInteriorPoints();
|
||||
flatCoordinates = [];
|
||||
for (i = 0, ii = interiorPoints.length; i < ii; i += 3) {
|
||||
if (textState.overflow || interiorPoints[i + 2] / this.resolution >= width) {
|
||||
flatCoordinates.push(interiorPoints[i], interiorPoints[i + 1]);
|
||||
}
|
||||
}
|
||||
end = flatCoordinates.length;
|
||||
if (end == 0) {
|
||||
return;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
}
|
||||
end = this.appendFlatCoordinates(flatCoordinates, 0, end, stride, false, false);
|
||||
if (textState.backgroundFill || textState.backgroundStroke) {
|
||||
this.setFillStrokeStyle(textState.backgroundFill, textState.backgroundStroke);
|
||||
if (textState.backgroundFill) {
|
||||
this.updateFillStyle(this.state, this.createFill, geometry);
|
||||
this.hitDetectionInstructions.push(this.createFill(this.state, geometry));
|
||||
}
|
||||
if (textState.backgroundStroke) {
|
||||
this.updateStrokeStyle(this.state, this.applyStroke);
|
||||
this.hitDetectionInstructions.push(this.createStroke(this.state));
|
||||
}
|
||||
}
|
||||
this.beginGeometry(geometry, feature);
|
||||
this.drawTextImage_(label, begin, end);
|
||||
this.endGeometry(geometry, feature);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} text Text.
|
||||
* @param {string} textKey Text style key.
|
||||
* @param {string} fillKey Fill style key.
|
||||
* @param {string} strokeKey Stroke style key.
|
||||
* @return {HTMLCanvasElement} Image.
|
||||
*/
|
||||
getImage(text, textKey, fillKey, strokeKey) {
|
||||
let label;
|
||||
const key = strokeKey + textKey + text + fillKey + this.pixelRatio;
|
||||
|
||||
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 = 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 = measureTextWidths(textState.font, lines, widths);
|
||||
const lineHeight = measureTextHeight(textState.font);
|
||||
const height = lineHeight * numLines;
|
||||
const renderWidth = (width + strokeWidth);
|
||||
const context = createCanvasContext2D(
|
||||
Math.ceil(renderWidth * scale),
|
||||
Math.ceil((height + strokeWidth) * scale));
|
||||
label = context.canvas;
|
||||
labelCache.set(key, label);
|
||||
if (scale != 1) {
|
||||
context.scale(scale, scale);
|
||||
}
|
||||
context.font = textState.font;
|
||||
if (strokeKey) {
|
||||
context.strokeStyle = strokeState.strokeStyle;
|
||||
context.lineWidth = strokeWidth;
|
||||
context.lineCap = strokeState.lineCap;
|
||||
context.lineJoin = strokeState.lineJoin;
|
||||
context.miterLimit = strokeState.miterLimit;
|
||||
if (CANVAS_LINE_DASH && strokeState.lineDash.length) {
|
||||
context.setLineDash(strokeState.lineDash);
|
||||
context.lineDashOffset = strokeState.lineDashOffset;
|
||||
}
|
||||
}
|
||||
if (fillKey) {
|
||||
context.fillStyle = fillState.fillStyle;
|
||||
}
|
||||
context.textBaseline = 'middle';
|
||||
context.textAlign = 'center';
|
||||
const leftRight = (0.5 - align);
|
||||
const x = align * label.width / scale + leftRight * strokeWidth;
|
||||
let i;
|
||||
if (strokeKey) {
|
||||
for (i = 0; i < numLines; ++i) {
|
||||
context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
|
||||
}
|
||||
}
|
||||
if (fillKey) {
|
||||
for (i = 0; i < numLines; ++i) {
|
||||
context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
return labelCache.get(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/canvas~DeclutterGroup}
|
||||
* @param {HTMLCanvasElement} label Label.
|
||||
* @param {number} begin Begin.
|
||||
* @param {number} end End.
|
||||
*/
|
||||
this.declutterGroup_;
|
||||
drawTextImage_(label, begin, end) {
|
||||
const textState = this.textState_;
|
||||
const strokeState = this.textStrokeState_;
|
||||
const pixelRatio = this.pixelRatio;
|
||||
const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
|
||||
const baseline = TEXT_ALIGN[textState.textBaseline];
|
||||
const strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
|
||||
|
||||
const anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
|
||||
const anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
|
||||
this.instructions.push([CanvasInstruction.DRAW_IMAGE, 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 == defaultPadding ?
|
||||
defaultPadding : textState.padding.map(function(p) {
|
||||
return p * pixelRatio;
|
||||
}),
|
||||
!!textState.backgroundFill, !!textState.backgroundStroke
|
||||
]);
|
||||
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
|
||||
label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
|
||||
this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
|
||||
1 / pixelRatio, true, label.width, textState.padding,
|
||||
!!textState.backgroundFill, !!textState.backgroundStroke
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<HTMLCanvasElement>}
|
||||
* @param {number} begin Begin.
|
||||
* @param {number} end End.
|
||||
* @param {module:ol/render/canvas~DeclutterGroup} declutterGroup Declutter group.
|
||||
*/
|
||||
this.labels_ = null;
|
||||
drawChars_(begin, end, declutterGroup) {
|
||||
const strokeState = this.textStrokeState_;
|
||||
const textState = this.textState_;
|
||||
const fillState = this.textFillState_;
|
||||
|
||||
const strokeKey = this.strokeKey_;
|
||||
if (strokeState) {
|
||||
if (!(strokeKey in this.strokeStates)) {
|
||||
this.strokeStates[strokeKey] = /** @type {module:ol/render/canvas~StrokeState} */ ({
|
||||
strokeStyle: strokeState.strokeStyle,
|
||||
lineCap: strokeState.lineCap,
|
||||
lineDashOffset: strokeState.lineDashOffset,
|
||||
lineWidth: strokeState.lineWidth,
|
||||
lineJoin: strokeState.lineJoin,
|
||||
miterLimit: strokeState.miterLimit,
|
||||
lineDash: strokeState.lineDash
|
||||
});
|
||||
}
|
||||
}
|
||||
const textKey = this.textKey_;
|
||||
if (!(this.textKey_ in this.textStates)) {
|
||||
this.textStates[this.textKey_] = /** @type {module:ol/render/canvas~TextState} */ ({
|
||||
font: textState.font,
|
||||
textAlign: textState.textAlign || defaultTextAlign,
|
||||
scale: textState.scale
|
||||
});
|
||||
}
|
||||
const fillKey = this.fillKey_;
|
||||
if (fillState) {
|
||||
if (!(fillKey in this.fillStates)) {
|
||||
this.fillStates[fillKey] = /** @type {module:ol/render/canvas~FillState} */ ({
|
||||
fillStyle: fillState.fillStyle
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const pixelRatio = this.pixelRatio;
|
||||
const baseline = TEXT_ALIGN[textState.textBaseline];
|
||||
|
||||
const offsetY = this.textOffsetY_ * pixelRatio;
|
||||
const text = this.text_;
|
||||
const font = textState.font;
|
||||
const textScale = textState.scale;
|
||||
const strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;
|
||||
let widths = this.widths_[font];
|
||||
if (!widths) {
|
||||
this.widths_[font] = widths = {};
|
||||
}
|
||||
this.instructions.push([CanvasInstruction.DRAW_CHARS,
|
||||
begin, end, baseline, declutterGroup,
|
||||
textState.overflow, fillKey, textState.maxAngle,
|
||||
function(text) {
|
||||
let width = widths[text];
|
||||
if (!width) {
|
||||
width = widths[text] = measureTextWidth(font, text);
|
||||
}
|
||||
return width * textScale * pixelRatio;
|
||||
},
|
||||
offsetY, strokeKey, strokeWidth * pixelRatio, text, textKey, 1
|
||||
]);
|
||||
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_CHARS,
|
||||
begin, end, baseline, declutterGroup,
|
||||
textState.overflow, fillKey, textState.maxAngle,
|
||||
function(text) {
|
||||
let width = widths[text];
|
||||
if (!width) {
|
||||
width = widths[text] = measureTextWidth(font, text);
|
||||
}
|
||||
return width * textScale;
|
||||
},
|
||||
offsetY, strokeKey, strokeWidth, text, textKey, 1 / pixelRatio
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
* @inheritDoc
|
||||
*/
|
||||
this.text_ = '';
|
||||
setTextStyle(textStyle, declutterGroup) {
|
||||
let textState, fillState, strokeState;
|
||||
if (!textStyle) {
|
||||
this.text_ = '';
|
||||
} else {
|
||||
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.textOffsetX_ = 0;
|
||||
const textFillStyle = textStyle.getFill();
|
||||
if (!textFillStyle) {
|
||||
fillState = this.textFillState_ = null;
|
||||
} else {
|
||||
fillState = this.textFillState_;
|
||||
if (!fillState) {
|
||||
fillState = this.textFillState_ = /** @type {module:ol/render/canvas~FillState} */ ({});
|
||||
}
|
||||
fillState.fillStyle = asColorLike(
|
||||
textFillStyle.getColor() || defaultFillStyle);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.textOffsetY_ = 0;
|
||||
const textStrokeStyle = textStyle.getStroke();
|
||||
if (!textStrokeStyle) {
|
||||
strokeState = this.textStrokeState_ = null;
|
||||
} else {
|
||||
strokeState = this.textStrokeState_;
|
||||
if (!strokeState) {
|
||||
strokeState = this.textStrokeState_ = /** @type {module:ol/render/canvas~StrokeState} */ ({});
|
||||
}
|
||||
const lineDash = textStrokeStyle.getLineDash();
|
||||
const lineDashOffset = textStrokeStyle.getLineDashOffset();
|
||||
const lineWidth = textStrokeStyle.getWidth();
|
||||
const miterLimit = textStrokeStyle.getMiterLimit();
|
||||
strokeState.lineCap = textStrokeStyle.getLineCap() || defaultLineCap;
|
||||
strokeState.lineDash = lineDash ? lineDash.slice() : defaultLineDash;
|
||||
strokeState.lineDashOffset =
|
||||
lineDashOffset === undefined ? defaultLineDashOffset : lineDashOffset;
|
||||
strokeState.lineJoin = textStrokeStyle.getLineJoin() || defaultLineJoin;
|
||||
strokeState.lineWidth =
|
||||
lineWidth === undefined ? defaultLineWidth : lineWidth;
|
||||
strokeState.miterLimit =
|
||||
miterLimit === undefined ? defaultMiterLimit : miterLimit;
|
||||
strokeState.strokeStyle = asColorLike(
|
||||
textStrokeStyle.getColor() || defaultStrokeStyle);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.textRotateWithView_ = undefined;
|
||||
textState = this.textState_;
|
||||
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() || defaultTextBaseline;
|
||||
textState.backgroundFill = textStyle.getBackgroundFill();
|
||||
textState.backgroundStroke = textStyle.getBackgroundStroke();
|
||||
textState.padding = textStyle.getPadding() || defaultPadding;
|
||||
textState.scale = textScale === undefined ? 1 : textScale;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.textRotation_ = 0;
|
||||
const textOffsetX = textStyle.getOffsetX();
|
||||
const textOffsetY = textStyle.getOffsetY();
|
||||
const textRotateWithView = textStyle.getRotateWithView();
|
||||
const textRotation = textStyle.getRotation();
|
||||
this.text_ = textStyle.getText() || '';
|
||||
this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;
|
||||
this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;
|
||||
this.textRotateWithView_ = textRotateWithView === undefined ? false : textRotateWithView;
|
||||
this.textRotation_ = textRotation === undefined ? 0 : textRotation;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {?module:ol/render/canvas~FillState}
|
||||
*/
|
||||
this.textFillState_ = null;
|
||||
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/render/canvas~FillState>}
|
||||
*/
|
||||
this.fillStates = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {?module:ol/render/canvas~StrokeState}
|
||||
*/
|
||||
this.textStrokeState_ = null;
|
||||
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/render/canvas~StrokeState>}
|
||||
*/
|
||||
this.strokeStates = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/render/canvas~TextState}
|
||||
*/
|
||||
this.textState_ = /** @type {module:ol/render/canvas~TextState} */ ({});
|
||||
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/render/canvas~TextState>}
|
||||
*/
|
||||
this.textStates = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.textKey_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.fillKey_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string}
|
||||
*/
|
||||
this.strokeKey_ = '';
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Object.<string, Object.<string, number>>}
|
||||
*/
|
||||
this.widths_ = {};
|
||||
|
||||
labelCache.prune();
|
||||
|
||||
};
|
||||
this.strokeKey_ = strokeState ?
|
||||
(typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : getUid(strokeState.strokeStyle)) +
|
||||
strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth +
|
||||
strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' :
|
||||
'';
|
||||
this.textKey_ = textState.font + textState.scale + (textState.textAlign || '?');
|
||||
this.fillKey_ = fillState ?
|
||||
(typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + getUid(fillState.fillStyle))) :
|
||||
'';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
inherits(CanvasTextReplay, CanvasReplay);
|
||||
|
||||
@@ -155,394 +543,4 @@ export function measureTextWidths(font, lines, widths) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasTextReplay.prototype.drawText = function(geometry, feature) {
|
||||
const fillState = this.textFillState_;
|
||||
const strokeState = this.textStrokeState_;
|
||||
const textState = this.textState_;
|
||||
if (this.text_ === '' || !textState || (!fillState && !strokeState)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let begin = this.coordinates.length;
|
||||
|
||||
const geometryType = geometry.getType();
|
||||
let flatCoordinates = null;
|
||||
let end = 2;
|
||||
let stride = 2;
|
||||
let i, ii;
|
||||
|
||||
if (textState.placement === TextPlacement.LINE) {
|
||||
if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
|
||||
return;
|
||||
}
|
||||
let ends;
|
||||
flatCoordinates = geometry.getFlatCoordinates();
|
||||
stride = geometry.getStride();
|
||||
if (geometryType == GeometryType.LINE_STRING) {
|
||||
ends = [flatCoordinates.length];
|
||||
} else if (geometryType == GeometryType.MULTI_LINE_STRING) {
|
||||
ends = geometry.getEnds();
|
||||
} else if (geometryType == GeometryType.POLYGON) {
|
||||
ends = geometry.getEnds().slice(0, 1);
|
||||
} else if (geometryType == GeometryType.MULTI_POLYGON) {
|
||||
const endss = geometry.getEndss();
|
||||
ends = [];
|
||||
for (i = 0, ii = endss.length; i < ii; ++i) {
|
||||
ends.push(endss[i][0]);
|
||||
}
|
||||
}
|
||||
this.beginGeometry(geometry, feature);
|
||||
const textAlign = textState.textAlign;
|
||||
let flatOffset = 0;
|
||||
let flatEnd;
|
||||
for (let o = 0, oo = ends.length; o < oo; ++o) {
|
||||
if (textAlign == undefined) {
|
||||
const range = matchingChunk(textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride);
|
||||
flatOffset = range[0];
|
||||
flatEnd = range[1];
|
||||
} else {
|
||||
flatEnd = ends[o];
|
||||
}
|
||||
for (i = flatOffset; i < flatEnd; i += stride) {
|
||||
this.coordinates.push(flatCoordinates[i], flatCoordinates[i + 1]);
|
||||
}
|
||||
end = this.coordinates.length;
|
||||
flatOffset = ends[o];
|
||||
this.drawChars_(begin, end, this.declutterGroup_);
|
||||
begin = end;
|
||||
}
|
||||
this.endGeometry(geometry, feature);
|
||||
|
||||
} else {
|
||||
const label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);
|
||||
const width = label.width / this.pixelRatio;
|
||||
switch (geometryType) {
|
||||
case GeometryType.POINT:
|
||||
case GeometryType.MULTI_POINT:
|
||||
flatCoordinates = geometry.getFlatCoordinates();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
case GeometryType.LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/LineString} */ (geometry).getFlatMidpoint();
|
||||
break;
|
||||
case GeometryType.CIRCLE:
|
||||
flatCoordinates = /** @type {module:ol/geom/Circle} */ (geometry).getCenter();
|
||||
break;
|
||||
case GeometryType.MULTI_LINE_STRING:
|
||||
flatCoordinates = /** @type {module:ol/geom/MultiLineString} */ (geometry).getFlatMidpoints();
|
||||
end = flatCoordinates.length;
|
||||
break;
|
||||
case GeometryType.POLYGON:
|
||||
flatCoordinates = /** @type {module:ol/geom/Polygon} */ (geometry).getFlatInteriorPoint();
|
||||
if (!textState.overflow && flatCoordinates[2] / this.resolution < width) {
|
||||
return;
|
||||
}
|
||||
stride = 3;
|
||||
break;
|
||||
case GeometryType.MULTI_POLYGON:
|
||||
const interiorPoints = /** @type {module:ol/geom/MultiPolygon} */ (geometry).getFlatInteriorPoints();
|
||||
flatCoordinates = [];
|
||||
for (i = 0, ii = interiorPoints.length; i < ii; i += 3) {
|
||||
if (textState.overflow || interiorPoints[i + 2] / this.resolution >= width) {
|
||||
flatCoordinates.push(interiorPoints[i], interiorPoints[i + 1]);
|
||||
}
|
||||
}
|
||||
end = flatCoordinates.length;
|
||||
if (end == 0) {
|
||||
return;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
}
|
||||
end = this.appendFlatCoordinates(flatCoordinates, 0, end, stride, false, false);
|
||||
if (textState.backgroundFill || textState.backgroundStroke) {
|
||||
this.setFillStrokeStyle(textState.backgroundFill, textState.backgroundStroke);
|
||||
if (textState.backgroundFill) {
|
||||
this.updateFillStyle(this.state, this.createFill, geometry);
|
||||
this.hitDetectionInstructions.push(this.createFill(this.state, geometry));
|
||||
}
|
||||
if (textState.backgroundStroke) {
|
||||
this.updateStrokeStyle(this.state, this.applyStroke);
|
||||
this.hitDetectionInstructions.push(this.createStroke(this.state));
|
||||
}
|
||||
}
|
||||
this.beginGeometry(geometry, feature);
|
||||
this.drawTextImage_(label, begin, end);
|
||||
this.endGeometry(geometry, feature);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} text Text.
|
||||
* @param {string} textKey Text style key.
|
||||
* @param {string} fillKey Fill style key.
|
||||
* @param {string} strokeKey Stroke style key.
|
||||
* @return {HTMLCanvasElement} Image.
|
||||
*/
|
||||
CanvasTextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) {
|
||||
let label;
|
||||
const key = strokeKey + textKey + text + fillKey + this.pixelRatio;
|
||||
|
||||
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 = 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 = measureTextWidths(textState.font, lines, widths);
|
||||
const lineHeight = measureTextHeight(textState.font);
|
||||
const height = lineHeight * numLines;
|
||||
const renderWidth = (width + strokeWidth);
|
||||
const context = createCanvasContext2D(
|
||||
Math.ceil(renderWidth * scale),
|
||||
Math.ceil((height + strokeWidth) * scale));
|
||||
label = context.canvas;
|
||||
labelCache.set(key, label);
|
||||
if (scale != 1) {
|
||||
context.scale(scale, scale);
|
||||
}
|
||||
context.font = textState.font;
|
||||
if (strokeKey) {
|
||||
context.strokeStyle = strokeState.strokeStyle;
|
||||
context.lineWidth = strokeWidth;
|
||||
context.lineCap = strokeState.lineCap;
|
||||
context.lineJoin = strokeState.lineJoin;
|
||||
context.miterLimit = strokeState.miterLimit;
|
||||
if (CANVAS_LINE_DASH && strokeState.lineDash.length) {
|
||||
context.setLineDash(strokeState.lineDash);
|
||||
context.lineDashOffset = strokeState.lineDashOffset;
|
||||
}
|
||||
}
|
||||
if (fillKey) {
|
||||
context.fillStyle = fillState.fillStyle;
|
||||
}
|
||||
context.textBaseline = 'middle';
|
||||
context.textAlign = 'center';
|
||||
const leftRight = (0.5 - align);
|
||||
const x = align * label.width / scale + leftRight * strokeWidth;
|
||||
let i;
|
||||
if (strokeKey) {
|
||||
for (i = 0; i < numLines; ++i) {
|
||||
context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
|
||||
}
|
||||
}
|
||||
if (fillKey) {
|
||||
for (i = 0; i < numLines; ++i) {
|
||||
context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
return labelCache.get(key);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {HTMLCanvasElement} label Label.
|
||||
* @param {number} begin Begin.
|
||||
* @param {number} end End.
|
||||
*/
|
||||
CanvasTextReplay.prototype.drawTextImage_ = function(label, begin, end) {
|
||||
const textState = this.textState_;
|
||||
const strokeState = this.textStrokeState_;
|
||||
const pixelRatio = this.pixelRatio;
|
||||
const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
|
||||
const baseline = TEXT_ALIGN[textState.textBaseline];
|
||||
const strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
|
||||
|
||||
const anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
|
||||
const anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
|
||||
this.instructions.push([CanvasInstruction.DRAW_IMAGE, 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 == defaultPadding ?
|
||||
defaultPadding : textState.padding.map(function(p) {
|
||||
return p * pixelRatio;
|
||||
}),
|
||||
!!textState.backgroundFill, !!textState.backgroundStroke
|
||||
]);
|
||||
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_IMAGE, begin, end,
|
||||
label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
|
||||
this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
|
||||
1 / pixelRatio, true, label.width, textState.padding,
|
||||
!!textState.backgroundFill, !!textState.backgroundStroke
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {number} begin Begin.
|
||||
* @param {number} end End.
|
||||
* @param {module:ol/render/canvas~DeclutterGroup} declutterGroup Declutter group.
|
||||
*/
|
||||
CanvasTextReplay.prototype.drawChars_ = function(begin, end, declutterGroup) {
|
||||
const strokeState = this.textStrokeState_;
|
||||
const textState = this.textState_;
|
||||
const fillState = this.textFillState_;
|
||||
|
||||
const strokeKey = this.strokeKey_;
|
||||
if (strokeState) {
|
||||
if (!(strokeKey in this.strokeStates)) {
|
||||
this.strokeStates[strokeKey] = /** @type {module:ol/render/canvas~StrokeState} */ ({
|
||||
strokeStyle: strokeState.strokeStyle,
|
||||
lineCap: strokeState.lineCap,
|
||||
lineDashOffset: strokeState.lineDashOffset,
|
||||
lineWidth: strokeState.lineWidth,
|
||||
lineJoin: strokeState.lineJoin,
|
||||
miterLimit: strokeState.miterLimit,
|
||||
lineDash: strokeState.lineDash
|
||||
});
|
||||
}
|
||||
}
|
||||
const textKey = this.textKey_;
|
||||
if (!(this.textKey_ in this.textStates)) {
|
||||
this.textStates[this.textKey_] = /** @type {module:ol/render/canvas~TextState} */ ({
|
||||
font: textState.font,
|
||||
textAlign: textState.textAlign || defaultTextAlign,
|
||||
scale: textState.scale
|
||||
});
|
||||
}
|
||||
const fillKey = this.fillKey_;
|
||||
if (fillState) {
|
||||
if (!(fillKey in this.fillStates)) {
|
||||
this.fillStates[fillKey] = /** @type {module:ol/render/canvas~FillState} */ ({
|
||||
fillStyle: fillState.fillStyle
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const pixelRatio = this.pixelRatio;
|
||||
const baseline = TEXT_ALIGN[textState.textBaseline];
|
||||
|
||||
const offsetY = this.textOffsetY_ * pixelRatio;
|
||||
const text = this.text_;
|
||||
const font = textState.font;
|
||||
const textScale = textState.scale;
|
||||
const strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;
|
||||
let widths = this.widths_[font];
|
||||
if (!widths) {
|
||||
this.widths_[font] = widths = {};
|
||||
}
|
||||
this.instructions.push([CanvasInstruction.DRAW_CHARS,
|
||||
begin, end, baseline, declutterGroup,
|
||||
textState.overflow, fillKey, textState.maxAngle,
|
||||
function(text) {
|
||||
let width = widths[text];
|
||||
if (!width) {
|
||||
width = widths[text] = measureTextWidth(font, text);
|
||||
}
|
||||
return width * textScale * pixelRatio;
|
||||
},
|
||||
offsetY, strokeKey, strokeWidth * pixelRatio, text, textKey, 1
|
||||
]);
|
||||
this.hitDetectionInstructions.push([CanvasInstruction.DRAW_CHARS,
|
||||
begin, end, baseline, declutterGroup,
|
||||
textState.overflow, fillKey, textState.maxAngle,
|
||||
function(text) {
|
||||
let width = widths[text];
|
||||
if (!width) {
|
||||
width = widths[text] = measureTextWidth(font, text);
|
||||
}
|
||||
return width * textScale;
|
||||
},
|
||||
offsetY, strokeKey, strokeWidth, text, textKey, 1 / pixelRatio
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
CanvasTextReplay.prototype.setTextStyle = function(textStyle, declutterGroup) {
|
||||
let textState, fillState, strokeState;
|
||||
if (!textStyle) {
|
||||
this.text_ = '';
|
||||
} else {
|
||||
this.declutterGroup_ = /** @type {module:ol/render/canvas~DeclutterGroup} */ (declutterGroup);
|
||||
|
||||
const textFillStyle = textStyle.getFill();
|
||||
if (!textFillStyle) {
|
||||
fillState = this.textFillState_ = null;
|
||||
} else {
|
||||
fillState = this.textFillState_;
|
||||
if (!fillState) {
|
||||
fillState = this.textFillState_ = /** @type {module:ol/render/canvas~FillState} */ ({});
|
||||
}
|
||||
fillState.fillStyle = asColorLike(
|
||||
textFillStyle.getColor() || defaultFillStyle);
|
||||
}
|
||||
|
||||
const textStrokeStyle = textStyle.getStroke();
|
||||
if (!textStrokeStyle) {
|
||||
strokeState = this.textStrokeState_ = null;
|
||||
} else {
|
||||
strokeState = this.textStrokeState_;
|
||||
if (!strokeState) {
|
||||
strokeState = this.textStrokeState_ = /** @type {module:ol/render/canvas~StrokeState} */ ({});
|
||||
}
|
||||
const lineDash = textStrokeStyle.getLineDash();
|
||||
const lineDashOffset = textStrokeStyle.getLineDashOffset();
|
||||
const lineWidth = textStrokeStyle.getWidth();
|
||||
const miterLimit = textStrokeStyle.getMiterLimit();
|
||||
strokeState.lineCap = textStrokeStyle.getLineCap() || defaultLineCap;
|
||||
strokeState.lineDash = lineDash ? lineDash.slice() : defaultLineDash;
|
||||
strokeState.lineDashOffset =
|
||||
lineDashOffset === undefined ? defaultLineDashOffset : lineDashOffset;
|
||||
strokeState.lineJoin = textStrokeStyle.getLineJoin() || defaultLineJoin;
|
||||
strokeState.lineWidth =
|
||||
lineWidth === undefined ? defaultLineWidth : lineWidth;
|
||||
strokeState.miterLimit =
|
||||
miterLimit === undefined ? defaultMiterLimit : miterLimit;
|
||||
strokeState.strokeStyle = asColorLike(
|
||||
textStrokeStyle.getColor() || defaultStrokeStyle);
|
||||
}
|
||||
|
||||
textState = this.textState_;
|
||||
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() || defaultTextBaseline;
|
||||
textState.backgroundFill = textStyle.getBackgroundFill();
|
||||
textState.backgroundStroke = textStyle.getBackgroundStroke();
|
||||
textState.padding = textStyle.getPadding() || defaultPadding;
|
||||
textState.scale = textScale === undefined ? 1 : textScale;
|
||||
|
||||
const textOffsetX = textStyle.getOffsetX();
|
||||
const textOffsetY = textStyle.getOffsetY();
|
||||
const textRotateWithView = textStyle.getRotateWithView();
|
||||
const textRotation = textStyle.getRotation();
|
||||
this.text_ = textStyle.getText() || '';
|
||||
this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;
|
||||
this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;
|
||||
this.textRotateWithView_ = textRotateWithView === undefined ? false : textRotateWithView;
|
||||
this.textRotation_ = textRotation === undefined ? 0 : textRotation;
|
||||
|
||||
this.strokeKey_ = strokeState ?
|
||||
(typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : getUid(strokeState.strokeStyle)) +
|
||||
strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth +
|
||||
strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' :
|
||||
'';
|
||||
this.textKey_ = textState.font + textState.scale + (textState.textAlign || '?');
|
||||
this.fillKey_ = fillState ?
|
||||
(typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + getUid(fillState.fillStyle))) :
|
||||
'';
|
||||
}
|
||||
};
|
||||
export default CanvasTextReplay;
|
||||
|
||||
Reference in New Issue
Block a user