openlayers/src/ol/renderer/canvas/Map.js

/**
 * @module ol/renderer/canvas/Map
 */
// FIXME offset panning

import _ol_transform_ from '../../transform.js';
import {inherits} from '../../index.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 RendererType from '../Type.js';
import SourceState from '../../source/State.js';

/**
 * @constructor
 * @extends {ol.renderer.Map}
 * @param {Element} container Container.
 * @param {ol.PluggableMap} map Map.
 * @api
 */
const CanvasMapRenderer = function(container, map) {

  MapRenderer.call(this, container, map);

  /**
   * @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 {ol.Transform}
   */
  this.transform_ = _ol_transform_.create();

};

inherits(CanvasMapRenderer, MapRenderer);


/**
 * Determine if this renderer handles the provided layer.
 * @param {ol.renderer.Type} type The renderer type.
 * @return {boolean} The renderer can render the layer.
 */
CanvasMapRenderer['handles'] = function(type) {
  return type === RendererType.CANVAS;
};


/**
 * Create the map renderer.
 * @param {Element} container Container.
 * @param {ol.PluggableMap} map Map.
 * @return {ol.renderer.canvas.Map} The map renderer.
 */
CanvasMapRenderer['create'] = function(container, map) {
  return new CanvasMapRenderer(container, map);
};


/**
 * @param {ol.render.EventType} type Event type.
 * @param {olx.FrameState} frameState Frame state.
 * @private
 */
CanvasMapRenderer.prototype.dispatchComposeEvent_ = function(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 {olx.FrameState} frameState Frame state.
 * @protected
 * @return {!ol.Transform} Transform.
 */
CanvasMapRenderer.prototype.getTransform = function(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 _ol_transform_.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
};


/**
 * @inheritDoc
 */
CanvasMapRenderer.prototype.getType = function() {
  return RendererType.CANVAS;
};


/**
 * @inheritDoc
 */
CanvasMapRenderer.prototype.renderFrame = function(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.dispatchComposeEvent_(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, layer, layerRenderer, layerState;
  for (i = 0, ii = layerStatesArray.length; i < ii; ++i) {
    layerState = layerStatesArray[i];
    layer = layerState.layer;
    layerRenderer = /** @type {ol.renderer.canvas.Layer} */ (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.dispatchComposeEvent_(RenderEventType.POSTCOMPOSE, frameState);

  if (!this.renderedVisible_) {
    this.canvas_.style.display = '';
    this.renderedVisible_ = true;
  }

  this.scheduleRemoveUnusedLayerRenderers(frameState);
  this.scheduleExpireIconCache(frameState);
};


/**
 * @inheritDoc
 */
CanvasMapRenderer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg,
  layerFilter, thisArg2) {
  let result;
  const viewState = frameState.viewState;
  const viewResolution = viewState.resolution;

  const layerStates = frameState.layerStatesArray;
  const numLayers = layerStates.length;

  const coordinate = _ol_transform_.apply(
    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 {ol.renderer.canvas.Layer} */ (this.getLayerRenderer(layer));
      result = layerRenderer.forEachLayerAtCoordinate(
        coordinate, frameState, callback, thisArg);
      if (result) {
        return result;
      }
    }
  }
  return undefined;
};
export default CanvasMapRenderer;