openlayers/src/ol/render/webgl/circlereplay/index.js

Build tools and sources for developing OpenLayers based mapping applications

goog.provide('ol.render.webgl.CircleReplay');

goog.require('ol');
goog.require('ol.array');
goog.require('ol.color');
goog.require('ol.extent');
goog.require('ol.obj');
goog.require('ol.geom.flat.transform');
goog.require('ol.render.webgl.circlereplay.defaultshader');
goog.require('ol.render.webgl.Replay');
goog.require('ol.render.webgl');
goog.require('ol.webgl');
goog.require('ol.webgl.Buffer');


/**
 * @constructor
 * @extends {ol.render.webgl.Replay}
 * @param {number} tolerance Tolerance.
 * @param {ol.Extent} maxExtent Max extent.
 * @struct
 */
ol.render.webgl.CircleReplay = function(tolerance, maxExtent) {
  ol.render.webgl.Replay.call(this, tolerance, maxExtent);

  /**
   * @private
   * @type {ol.render.webgl.circlereplay.defaultshader.Locations}
   */
  this.defaultLocations_ = null;

  /**
   * @private
   * @type {Array.<Array.<Array.<number>|number>>}
   */
  this.styles_ = [];

  /**
   * @private
   * @type {Array.<number>}
   */
  this.styleIndices_ = [];

  /**
   * @private
   * @type {number}
   */
  this.radius_ = 0;

  /**
   * @private
   * @type {{fillColor: (Array.<number>|null),
   *         strokeColor: (Array.<number>|null),
   *         lineDash: Array.<number>,
   *         lineWidth: (number|undefined),
   *         changed: boolean}|null}
   */
  this.state_ = {
    fillColor: null,
    strokeColor: null,
    lineDash: null,
    lineWidth: undefined,
    changed: false
  };

};
ol.inherits(ol.render.webgl.CircleReplay, ol.render.webgl.Replay);


/**
 * @private
 * @param {Array.<number>} flatCoordinates Flat coordinates.
 * @param {number} offset Offset.
 * @param {number} end End.
 * @param {number} stride Stride.
 */
ol.render.webgl.CircleReplay.prototype.drawCoordinates_ = function(
    flatCoordinates, offset, end, stride) {
  var numVertices = this.vertices.length;
  var numIndices = this.indices.length;
  var n = numVertices / 4;
  var i, ii;
  for (i = offset, ii = end; i < ii; i += stride) {
    this.vertices[numVertices++] = flatCoordinates[i];
    this.vertices[numVertices++] = flatCoordinates[i + 1];
    this.vertices[numVertices++] = 0;
    this.vertices[numVertices++] = this.radius_;

    this.vertices[numVertices++] = flatCoordinates[i];
    this.vertices[numVertices++] = flatCoordinates[i + 1];
    this.vertices[numVertices++] = 1;
    this.vertices[numVertices++] = this.radius_;

    this.vertices[numVertices++] = flatCoordinates[i];
    this.vertices[numVertices++] = flatCoordinates[i + 1];
    this.vertices[numVertices++] = 2;
    this.vertices[numVertices++] = this.radius_;

    this.vertices[numVertices++] = flatCoordinates[i];
    this.vertices[numVertices++] = flatCoordinates[i + 1];
    this.vertices[numVertices++] = 3;
    this.vertices[numVertices++] = this.radius_;

    this.indices[numIndices++] = n;
    this.indices[numIndices++] = n + 1;
    this.indices[numIndices++] = n + 2;

    this.indices[numIndices++] = n + 2;
    this.indices[numIndices++] = n + 3;
    this.indices[numIndices++] = n;

    n += 4;
  }
};


/**
 * @inheritDoc
 */
ol.render.webgl.CircleReplay.prototype.drawCircle = function(circleGeometry, feature) {
  var radius = circleGeometry.getRadius();
  var stride = circleGeometry.getStride();
  if (radius) {
    this.startIndices.push(this.indices.length);
    this.startIndicesFeature.push(feature);
    if (this.state_.changed) {
      this.styleIndices_.push(this.indices.length);
      this.state_.changed = false;
    }

    this.radius_ = radius;
    var flatCoordinates = circleGeometry.getFlatCoordinates();
    flatCoordinates = ol.geom.flat.transform.translate(flatCoordinates, 0, 2,
        stride, -this.origin[0], -this.origin[1]);
    this.drawCoordinates_(flatCoordinates, 0, 2, stride);
  } else {
    if (this.state_.changed) {
      this.styles_.pop();
      if (this.styles_.length) {
        var lastState = this.styles_[this.styles_.length - 1];
        this.state_.fillColor =  /** @type {Array.<number>} */ (lastState[0]);
        this.state_.strokeColor = /** @type {Array.<number>} */ (lastState[1]);
        this.state_.lineWidth = /** @type {number} */ (lastState[2]);
        this.state_.changed = false;
      }
    }
  }
};


/**
 * @inheritDoc
 **/
ol.render.webgl.CircleReplay.prototype.finish = function(context) {
  // create, bind, and populate the vertices buffer
  this.verticesBuffer = new ol.webgl.Buffer(this.vertices);

  // create, bind, and populate the indices buffer
  this.indicesBuffer = new ol.webgl.Buffer(this.indices);

  this.startIndices.push(this.indices.length);

  //Clean up, if there is nothing to draw
  if (this.styleIndices_.length === 0 && this.styles_.length > 0) {
    this.styles_ = [];
  }

  this.vertices = null;
  this.indices = null;
};


/**
 * @inheritDoc
 */
ol.render.webgl.CircleReplay.prototype.getDeleteResourcesFunction = function(context) {
  // We only delete our stuff here. The shaders and the program may
  // be used by other CircleReplay instances (for other layers). And
  // they will be deleted when disposing of the ol.webgl.Context
  // object.
  ol.DEBUG && console.assert(this.verticesBuffer,
      'verticesBuffer must not be null');
  ol.DEBUG && console.assert(this.indicesBuffer,
      'indicesBuffer must not be null');
  var verticesBuffer = this.verticesBuffer;
  var indicesBuffer = this.indicesBuffer;
  return function() {
    context.deleteBuffer(verticesBuffer);
    context.deleteBuffer(indicesBuffer);
  };
};


/**
 * @inheritDoc
 */
ol.render.webgl.CircleReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
  // get the program
  var fragmentShader, vertexShader;
  fragmentShader = ol.render.webgl.circlereplay.defaultshader.fragment;
  vertexShader = ol.render.webgl.circlereplay.defaultshader.vertex;
  var program = context.getProgram(fragmentShader, vertexShader);

  // get the locations
  var locations;
  if (!this.defaultLocations_) {
    locations =
        new ol.render.webgl.circlereplay.defaultshader.Locations(gl, program);
    this.defaultLocations_ = locations;
  } else {
    locations = this.defaultLocations_;
  }

  context.useProgram(program);

  // enable the vertex attrib arrays
  gl.enableVertexAttribArray(locations.a_position);
  gl.vertexAttribPointer(locations.a_position, 2, ol.webgl.FLOAT,
      false, 16, 0);

  gl.enableVertexAttribArray(locations.a_instruction);
  gl.vertexAttribPointer(locations.a_instruction, 1, ol.webgl.FLOAT,
      false, 16, 8);

  gl.enableVertexAttribArray(locations.a_radius);
  gl.vertexAttribPointer(locations.a_radius, 1, ol.webgl.FLOAT,
      false, 16, 12);

  // Enable renderer specific uniforms.
  gl.uniform2fv(locations.u_size, size);
  gl.uniform1f(locations.u_pixelRatio, pixelRatio);

  return locations;
};


/**
 * @inheritDoc
 */
ol.render.webgl.CircleReplay.prototype.shutDownProgram = function(gl, locations) {
  gl.disableVertexAttribArray(locations.a_position);
  gl.disableVertexAttribArray(locations.a_instruction);
  gl.disableVertexAttribArray(locations.a_radius);
};


/**
 * @inheritDoc
 */
ol.render.webgl.CircleReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
  if (!ol.obj.isEmpty(skippedFeaturesHash)) {
    this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
  } else {
    ol.DEBUG && console.assert(this.styles_.length === this.styleIndices_.length,
        'number of styles and styleIndices match');

    //Draw by style groups to minimize drawElements() calls.
    var i, start, end, nextStyle;
    end = this.startIndices[this.startIndices.length - 1];
    for (i = this.styleIndices_.length - 1; i >= 0; --i) {
      start = this.styleIndices_[i];
      nextStyle = this.styles_[i];
      this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
      this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
          /** @type {number} */ (nextStyle[2]));
      this.drawElements(gl, context, start, end);
      end = start;
    }
  }
};


/**
 * @inheritDoc
 */
ol.render.webgl.CircleReplay.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
    featureCallback, opt_hitExtent) {
  ol.DEBUG && console.assert(this.styles_.length === this.styleIndices_.length,
      'number of styles and styleIndices match');
  ol.DEBUG && console.assert(this.startIndices.length - 1 === this.startIndicesFeature.length,
      'number of startIndices and startIndicesFeature match');

  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
  featureIndex = this.startIndices.length - 2;
  end = this.startIndices[featureIndex + 1];
  for (i = this.styleIndices_.length - 1; i >= 0; --i) {
    nextStyle = this.styles_[i];
    this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
    this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
        /** @type {number} */ (nextStyle[2]));
    groupStart = this.styleIndices_[i];

    while (featureIndex >= 0 &&
        this.startIndices[featureIndex] >= groupStart) {
      start = this.startIndices[featureIndex];
      feature = this.startIndicesFeature[featureIndex];
      featureUid = ol.getUid(feature).toString();

      if (skippedFeaturesHash[featureUid] === undefined &&
          feature.getGeometry() &&
          (opt_hitExtent === undefined || ol.extent.intersects(
              /** @type {Array<number>} */ (opt_hitExtent),
              feature.getGeometry().getExtent()))) {
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        this.drawElements(gl, context, start, end);

        var result = featureCallback(feature);

        if (result) {
          return result;
        }

      }
      featureIndex--;
      end = start;
    }
  }
  return undefined;
};


/**
 * @private
 * @param {WebGLRenderingContext} gl gl.
 * @param {ol.webgl.Context} context Context.
 * @param {Object} skippedFeaturesHash Ids of features to skip.
 */
ol.render.webgl.CircleReplay.prototype.drawReplaySkipping_ = function(gl, context, skippedFeaturesHash) {
  ol.DEBUG && console.assert(this.startIndices.length - 1 === this.startIndicesFeature.length,
      'number of startIndices and startIndicesFeature match');

  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
  featureIndex = this.startIndices.length - 2;
  end = start = this.startIndices[featureIndex + 1];
  for (i = this.styleIndices_.length - 1; i >= 0; --i) {
    nextStyle = this.styles_[i];
    this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
    this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
        /** @type {number} */ (nextStyle[2]));
    groupStart = this.styleIndices_[i];

    while (featureIndex >= 0 &&
        this.startIndices[featureIndex] >= groupStart) {
      featureStart = this.startIndices[featureIndex];
      feature = this.startIndicesFeature[featureIndex];
      featureUid = ol.getUid(feature).toString();

      if (skippedFeaturesHash[featureUid]) {
        if (start !== end) {
          this.drawElements(gl, context, start, end);
        }
        end = featureStart;
      }
      featureIndex--;
      start = featureStart;
    }
    if (start !== end) {
      this.drawElements(gl, context, start, end);
    }
    start = end = groupStart;
  }
};


/**
 * @private
 * @param {WebGLRenderingContext} gl gl.
 * @param {Array.<number>} color Color.
 */
ol.render.webgl.CircleReplay.prototype.setFillStyle_ = function(gl, color) {
  gl.uniform4fv(this.defaultLocations_.u_fillColor, color);
};


/**
 * @private
 * @param {WebGLRenderingContext} gl gl.
 * @param {Array.<number>} color Color.
 * @param {number} lineWidth Line width.
 */
ol.render.webgl.CircleReplay.prototype.setStrokeStyle_ = function(gl, color, lineWidth) {
  gl.uniform4fv(this.defaultLocations_.u_strokeColor, color);
  gl.uniform1f(this.defaultLocations_.u_lineWidth, lineWidth);
};


/**
 * @inheritDoc
 */
ol.render.webgl.CircleReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
  ol.DEBUG && console.assert(this.state_, 'this.state_ should not be null');
  var strokeStyleColor, strokeStyleWidth;
  if (strokeStyle) {
    var strokeStyleLineDash = strokeStyle.getLineDash();
    this.state_.lineDash = strokeStyleLineDash ?
        strokeStyleLineDash : ol.render.webgl.defaultLineDash;
    strokeStyleColor = strokeStyle.getColor();
    if (!(strokeStyleColor instanceof CanvasGradient) &&
        !(strokeStyleColor instanceof CanvasPattern)) {
      strokeStyleColor = ol.color.asArray(strokeStyleColor).map(function(c, i) {
        return i != 3 ? c / 255 : c;
      }) || ol.render.webgl.defaultStrokeStyle;
    } else {
      strokeStyleColor = ol.render.webgl.defaultStrokeStyle;
    }
    strokeStyleWidth = strokeStyle.getWidth();
    strokeStyleWidth = strokeStyleWidth !== undefined ?
        strokeStyleWidth : ol.render.webgl.defaultLineWidth;
  } else {
    strokeStyleColor = [0, 0, 0, 0];
    strokeStyleWidth = 0;
  }
  var fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
  if (!(fillStyleColor instanceof CanvasGradient) &&
      !(fillStyleColor instanceof CanvasPattern)) {
    fillStyleColor = ol.color.asArray(fillStyleColor).map(function(c, i) {
      return i != 3 ? c / 255 : c;
    }) || ol.render.webgl.defaultFillStyle;
  } else {
    fillStyleColor = ol.render.webgl.defaultFillStyle;
  }
  if (!this.state_.strokeColor || !ol.array.equals(this.state_.strokeColor, strokeStyleColor) ||
      !this.state_.fillColor || !ol.array.equals(this.state_.fillColor, fillStyleColor) ||
      this.state_.lineWidth !== strokeStyleWidth) {
    this.state_.changed = true;
    this.state_.fillColor = fillStyleColor;
    this.state_.strokeColor = strokeStyleColor;
    this.state_.lineWidth = strokeStyleWidth;
    this.styles_.push([fillStyleColor, strokeStyleColor, strokeStyleWidth]);
  }
};