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

End of composeFrame

Browse Source
This commit is contained in:
Tim Schaub
2018-11-13 16:39:17 +01:00
parent f416cf742d
commit 433ab97d1c
8 changed files with 39 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/ol/renderer/canvas/IntermediateCanvas.js
View File

@@ -50,58 +50,12 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer {
canvas.className = this.getLayer().getClassName();
}
/**
* @inheritDoc
*/
composeFrame(frameState, layerState, context) {
this.preCompose(context, frameState);
const image = this.getImage();
if (image) {
// clipped rendering if layer extent is set
const extent = layerState.extent;
const clipped = extent !== undefined &&
!containsExtent(extent, frameState.extent) &&
intersects(extent, frameState.extent);
if (clipped) {
this.clip(context, frameState, extent);
}
const imageTransform = this.getImageTransform();
// for performance reasons, context.save / context.restore is not used
// to save and restore the transformation matrix and the opacity.
// see http://jsperf.com/context-save-restore-versus-variable
const alpha = context.globalAlpha;
context.globalAlpha = layerState.opacity;
// for performance reasons, context.setTransform is only used
// when the view is rotated. see http://jsperf.com/canvas-transform
const dx = imageTransform[4];
const dy = imageTransform[5];
const dw = image.width * imageTransform[0];
const dh = image.height * imageTransform[3];
if (dw >= 0.5 && dh >= 0.5) {
context.drawImage(image, 0, 0, +image.width, +image.height,
Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
}
context.globalAlpha = alpha;
if (clipped) {
context.restore();
}
}
this.postCompose(context, frameState, layerState);
}
/**
* @inheritDoc
*/
renderFrame(frameState, layerState) {
this.preRender(frameState);
this.preRender(this.layerContext, frameState);
const image = this.getImage();
if (image) {
@@ -134,7 +88,7 @@ class IntermediateCanvasRenderer extends CanvasLayerRenderer {
}
}
this.postRender(frameState, layerState);
this.postRender(this.layerContext, frameState, layerState);
return this.layerContext.canvas;
}

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

@@ -1,7 +1,6 @@
/**
* @module ol/renderer/canvas/Layer
*/
import {abstract} from '../../util.js';
import {getBottomLeft, getBottomRight, getTopLeft, getTopRight} from '../../extent.js';
import {TRUE} from '../../functions.js';
import RenderEvent from '../../render/Event.js';
@@ -118,11 +117,10 @@ class CanvasLayerRenderer extends LayerRenderer {
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
* @param {import("../../transform.js").Transform=} opt_transform Transform.
* @protected
*/
postCompose(context, frameState, layerState, opt_transform) {
preRender(context, frameState, opt_transform) {
this.dispatchComposeEvent_(RenderEventType.POSTCOMPOSE, context, frameState, opt_transform);
}
@@ -132,27 +130,8 @@ class CanvasLayerRenderer extends LayerRenderer {
* @param {import("../../transform.js").Transform=} opt_transform Transform.
* @protected
*/
preCompose(context, frameState, opt_transform) {
this.dispatchComposeEvent_(RenderEventType.PRECOMPOSE, context, frameState, opt_transform);
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../transform.js").Transform=} opt_transform Transform.
* @protected
*/
preRender(frameState, opt_transform) {
// TODO: pre-render event
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
* @param {import("../../transform.js").Transform=} opt_transform Transform.
* @protected
*/
postRender(frameState, layerState, opt_transform) {
// TODO: pre-render event
postRender(context, frameState, opt_transform) {
this.dispatchComposeEvent_(RenderEventType.POSTCOMPOSE, context, frameState, opt_transform);
}
/**
@@ -205,16 +184,6 @@ class CanvasLayerRenderer extends LayerRenderer {
return composeTransform(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2);
}
/**
* @abstract
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
* @param {CanvasRenderingContext2D} context Context.
*/
composeFrame(frameState, layerState, context) {
abstract();
}
}
export default CanvasLayerRenderer;

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

@@ -1,205 +0,0 @@
/**
* @module ol/renderer/canvas/Map
*/
import {create as createTransform, apply as applyTransform, compose as composeTransform} from '../../transform.js';
import {stableSort} from '../../array.js';
import {CLASS_UNSELECTABLE} from '../../css.js';
import {createCanvasContext2D} from '../../dom.js';
import {visibleAtResolution} from '../../layer/Layer.js';
import RenderEvent from '../../render/Event.js';
import RenderEventType from '../../render/EventType.js';
import {rotateAtOffset} from '../../render/canvas.js';
import CanvasImmediateRenderer from '../../render/canvas/Immediate.js';
import MapRenderer, {sortByZIndex} from '../Map.js';
import SourceState from '../../source/State.js';
/**
* @classdesc
* Canvas map renderer.
* @api
*/
class CanvasMapRenderer extends MapRenderer {
/**
* @param {import("../../PluggableMap.js").default} map Map.
*/
constructor(map) {
super(map);
const container = map.getViewport();
/**
* @private
* @type {CanvasRenderingContext2D}
*/
this.context_ = createCanvasContext2D();
/**
* @private
* @type {HTMLCanvasElement}
*/
this.canvas_ = this.context_.canvas;
this.canvas_.style.width = '100%';
this.canvas_.style.height = '100%';
this.canvas_.style.display = 'block';
this.canvas_.className = CLASS_UNSELECTABLE;
container.insertBefore(this.canvas_, container.childNodes[0] || null);
/**
* @private
* @type {boolean}
*/
this.renderedVisible_ = true;
/**
* @private
* @type {import("../../transform.js").Transform}
*/
this.transform_ = createTransform();
}
/**
* @param {import("../../render/EventType.js").default} type Event type.
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
*/
dispatchRenderEvent(type, frameState) {
const map = this.getMap();
const context = this.context_;
if (map.hasListener(type)) {
const extent = frameState.extent;
const pixelRatio = frameState.pixelRatio;
const viewState = frameState.viewState;
const rotation = viewState.rotation;
const transform = this.getTransform(frameState);
const vectorContext = new CanvasImmediateRenderer(context, pixelRatio,
extent, transform, rotation);
const composeEvent = new RenderEvent(type, vectorContext,
frameState, context, null);
map.dispatchEvent(composeEvent);
}
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @protected
* @return {!import("../../transform.js").Transform} Transform.
*/
getTransform(frameState) {
const viewState = frameState.viewState;
const dx1 = this.canvas_.width / 2;
const dy1 = this.canvas_.height / 2;
const sx = frameState.pixelRatio / viewState.resolution;
const sy = -sx;
const angle = -viewState.rotation;
const dx2 = -viewState.center[0];
const dy2 = -viewState.center[1];
return composeTransform(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
}
/**
* @inheritDoc
*/
renderFrame(frameState) {
if (!frameState) {
if (this.renderedVisible_) {
this.canvas_.style.display = 'none';
this.renderedVisible_ = false;
}
return;
}
const context = this.context_;
const pixelRatio = frameState.pixelRatio;
const width = Math.round(frameState.size[0] * pixelRatio);
const height = Math.round(frameState.size[1] * pixelRatio);
if (this.canvas_.width != width || this.canvas_.height != height) {
this.canvas_.width = width;
this.canvas_.height = height;
} else {
context.clearRect(0, 0, width, height);
}
const rotation = frameState.viewState.rotation;
this.calculateMatrices2D(frameState);
this.dispatchRenderEvent(RenderEventType.PRECOMPOSE, frameState);
const layerStatesArray = frameState.layerStatesArray;
stableSort(layerStatesArray, sortByZIndex);
if (rotation) {
context.save();
rotateAtOffset(context, rotation, width / 2, height / 2);
}
const viewResolution = frameState.viewState.resolution;
let i, ii;
for (i = 0, ii = layerStatesArray.length; i < ii; ++i) {
const layerState = layerStatesArray[i];
const layer = layerState.layer;
const layerRenderer = /** @type {import("./Layer.js").default} */ (this.getLayerRenderer(layer));
if (!visibleAtResolution(layerState, viewResolution) ||
layerState.sourceState != SourceState.READY) {
continue;
}
if (layerRenderer.prepareFrame(frameState, layerState)) {
layerRenderer.composeFrame(frameState, layerState, context);
}
}
if (rotation) {
context.restore();
}
this.dispatchRenderEvent(RenderEventType.POSTCOMPOSE, frameState);
if (!this.renderedVisible_) {
this.canvas_.style.display = '';
this.renderedVisible_ = true;
}
this.scheduleRemoveUnusedLayerRenderers(frameState);
this.scheduleExpireIconCache(frameState);
}
/**
* @inheritDoc
*/
forEachLayerAtPixel(pixel, frameState, hitTolerance, callback, thisArg, layerFilter, thisArg2) {
let result;
const viewState = frameState.viewState;
const viewResolution = viewState.resolution;
const layerStates = frameState.layerStatesArray;
const numLayers = layerStates.length;
const coordinate = applyTransform(
frameState.pixelToCoordinateTransform, pixel.slice());
let i;
for (i = numLayers - 1; i >= 0; --i) {
const layerState = layerStates[i];
const layer = layerState.layer;
if (visibleAtResolution(layerState, viewResolution) && layerFilter.call(thisArg2, layer)) {
const layerRenderer = /** @type {import("./Layer.js").default} */ (this.getLayerRenderer(layer));
result = layerRenderer.forEachLayerAtCoordinate(
coordinate, frameState, hitTolerance, callback, thisArg);
if (result) {
return result;
}
}
}
return undefined;
}
}
export default CanvasMapRenderer;

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

@@ -9,7 +9,7 @@ import EventType from '../../events/EventType.js';
import rbush from 'rbush';
import {buffer, createEmpty, containsExtent, getWidth} from '../../extent.js';
import RenderEventType from '../../render/EventType.js';
import {labelCache, rotateAtOffset} from '../../render/canvas.js';
import {labelCache} from '../../render/canvas.js';
import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
import InstructionsGroupExecutor from '../../render/canvas/ExecutorGroup.js';
import CanvasLayerRenderer from './Layer.js';
@@ -97,136 +97,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
super.disposeInternal();
}
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
*/
compose(context, frameState, layerState) {
const extent = frameState.extent;
const pixelRatio = frameState.pixelRatio;
const skippedFeatureUids = layerState.managed ?
frameState.skippedFeatureUids : {};
const viewState = frameState.viewState;
const projection = viewState.projection;
const rotation = viewState.rotation;
const projectionExtent = projection.getExtent();
const vectorSource = /** @type {import("../../source/Vector.js").default} */ (this.getLayer().getSource());
let transform = this.getTransform(frameState, 0);
// clipped rendering if layer extent is set
const clipExtent = layerState.extent;
const clipped = clipExtent !== undefined;
if (clipped) {
this.clip(context, frameState, clipExtent);
}
const replayGroup = this.replayGroup_;
if (replayGroup && !replayGroup.isEmpty()) {
if (this.declutterTree_) {
this.declutterTree_.clear();
}
const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
let drawOffsetX = 0;
let drawOffsetY = 0;
let replayContext;
const transparentLayer = layerState.opacity !== 1;
const hasRenderListeners = layer.hasListener(RenderEventType.RENDER);
if (transparentLayer || hasRenderListeners) {
let drawWidth = context.canvas.width;
let drawHeight = context.canvas.height;
if (rotation) {
const drawSize = Math.round(Math.sqrt(drawWidth * drawWidth + drawHeight * drawHeight));
drawOffsetX = (drawSize - drawWidth) / 2;
drawOffsetY = (drawSize - drawHeight) / 2;
drawWidth = drawHeight = drawSize;
}
// resize and clear
this.context.canvas.width = drawWidth;
this.context.canvas.height = drawHeight;
replayContext = this.context;
} else {
replayContext = context;
}
const alpha = replayContext.globalAlpha;
if (!transparentLayer) {
// for performance reasons, context.save / context.restore is not used
// to save and restore the transformation matrix and the opacity.
// see http://jsperf.com/context-save-restore-versus-variable
replayContext.globalAlpha = layerState.opacity;
}
if (replayContext != context) {
replayContext.translate(drawOffsetX, drawOffsetY);
}
const viewHints = frameState.viewHints;
const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
const halfWidth = (frameState.size[0] * pixelRatio) / 2;
const halfHeight = (frameState.size[1] * pixelRatio) / 2;
rotateAtOffset(replayContext, -rotation, halfWidth, halfHeight);
replayGroup.execute(replayContext, transform, rotation, skippedFeatureUids, snapToPixel);
if (vectorSource.getWrapX() && projection.canWrapX() &&
!containsExtent(projectionExtent, extent)) {
let startX = extent[0];
const worldWidth = getWidth(projectionExtent);
let world = 0;
let offsetX;
while (startX < projectionExtent[0]) {
--world;
offsetX = worldWidth * world;
transform = this.getTransform(frameState, offsetX);
replayGroup.execute(replayContext, transform, rotation, skippedFeatureUids, snapToPixel);
startX += worldWidth;
}
world = 0;
startX = extent[2];
while (startX > projectionExtent[2]) {
++world;
offsetX = worldWidth * world;
transform = this.getTransform(frameState, offsetX);
replayGroup.execute(replayContext, transform, rotation, skippedFeatureUids, snapToPixel);
startX -= worldWidth;
}
}
rotateAtOffset(replayContext, rotation, halfWidth, halfHeight);
if (hasRenderListeners) {
this.dispatchRenderEvent(replayContext, frameState, transform);
}
if (replayContext != context) {
if (transparentLayer) {
const mainContextAlpha = context.globalAlpha;
context.globalAlpha = layerState.opacity;
context.drawImage(replayContext.canvas, -drawOffsetX, -drawOffsetY);
context.globalAlpha = mainContextAlpha;
} else {
context.drawImage(replayContext.canvas, -drawOffsetX, -drawOffsetY);
}
replayContext.translate(-drawOffsetX, -drawOffsetY);
}
if (!transparentLayer) {
replayContext.globalAlpha = alpha;
}
}
if (clipped) {
context.restore();
}
}
/**
* @inheritDoc
*/
composeFrame(frameState, layerState, context) {
const transform = this.getTransform(frameState, 0);
this.preCompose(context, frameState, transform);
this.compose(context, frameState, layerState);
this.postCompose(context, frameState, layerState, transform);
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
@@ -318,10 +188,12 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
* @inheritDoc
*/
renderFrame(frameState, layerState) {
this.preRender(frameState);
const context = this.context;
this.preRender(context, frameState);
this.render(frameState, layerState);
this.postRender(frameState, layerState);
const canvas = this.context.canvas;
this.postRender(context, frameState);
const canvas = context.canvas;
const opacity = layerState.opacity;
if (opacity !== canvas.style.opacity) {