Source: annotation/rectangleAnnotation.js

const $ = require('jquery');
const inherit = require('../inherit');
const geo_event = require('../event');
const geo_action = require('../action');
const registerAnnotation = require('../registry').registerAnnotation;
const polygonFeature = require('../polygonFeature');

const annotation = require('./annotation').annotation;
const annotationState = require('./annotation').state;
const annotationActionOwner = require('./annotation').annotationActionOwner;

/**
 * Rectangle annotation specification.  Extends {@link geo.annotation.spec}.
 *
 * @typedef {object} geo.rectangleAnnotation.spec
 * @extends geo.annotation.spec
 * @property {geo.geoPosition[]} [corners] A list of four corners in map gcs
 *    coordinates.  These must be in order around the perimeter of the
 *    rectangle (in either direction).
 * @property {geo.geoPosition[]} [coordinates] An alternate name for `corners`.
 * @property {geo.polygonFeature.styleSpec} [style] The style to apply to a
 *    finished rectangle.  This uses styles for {@link geo.polygonFeature}.
 * @property {geo.polygonFeature.styleSpec} [editStyle] The style to apply to a
 *    rectangle in edit mode.
 * @property {number|number[]|function} [constraint] If specified, an aspect
 *    ratio or list of aspect ratios to constraint the rectangle to.  If a
 *    function, a selection constraint function to call to adjust the
 *    rectangle.
 */

/**
 * Rectangle annotation class.
 *
 * Rectangles are always rendered as polygons.  This could be changed -- if no
 * stroke is specified, the quad feature would be sufficient and work on more
 * renderers.
 *
 * @class
 * @alias geo.rectangleAnnotation
 * @extends geo.annotation
 *
 * @param {geo.rectangleAnnotation.spec?} [args] Options for the annotation.
 * @param {string} [annotationName='rectangle'] Override the annotation name.
 */
var rectangleAnnotation = function (args, annotationName) {
  'use strict';
  if (!(this instanceof rectangleAnnotation)) {
    return new rectangleAnnotation(args, annotationName);
  }

  args = $.extend(true, {}, this.constructor.defaults, args);
  args.corners = args.corners || args.coordinates || [];
  delete args.coordinates;
  annotation.call(this, annotationName || 'rectangle', args);

  var m_this = this,
      s_actions = this.actions,
      s_processEditAction = this.processEditAction;

  /**
   * Return actions needed for the specified state of this annotation.
   *
   * @param {string} [state] The state to return actions for.  Defaults to
   *    the current state.
   * @returns {geo.actionRecord[]} A list of actions.
   */
  this.actions = function (state) {
    if (!state) {
      state = m_this.state();
    }
    switch (state) {
      case annotationState.create:
        return [{
          action: geo_action.annotation_rectangle,
          name: 'rectangle create',
          owner: annotationActionOwner,
          input: 'left',
          selectionRectangle: true,
          selectionConstraint: this._selectionConstraint
        }];
      default:
        return s_actions.apply(m_this, arguments);
    }
  };

  /**
   * Process any actions for this annotation.
   *
   * @param {geo.event} evt The action event.
   * @returns {boolean|string} `true` to update the annotation, `'done'` if the
   *    annotation was completed (changed from create to done state),
   *    `'remove'` if the annotation should be removed, falsy to not update
   *    anything.
   */
  this.processAction = function (evt) {
    var layer = m_this.layer();
    if (m_this.state() !== annotationState.create || !layer ||
        evt.event !== geo_event.actionselection ||
        evt.state.action !== geo_action.annotation_rectangle) {
      return;
    }
    var map = layer.map(),
        corners = [
          /* Keep in map gcs, not interface gcs to avoid wrapping issues */
          map.displayToGcs({x: evt.lowerLeft.x, y: evt.lowerLeft.y}, null),
          map.displayToGcs({x: evt.lowerLeft.x, y: evt.upperRight.y}, null),
          map.displayToGcs({x: evt.upperRight.x, y: evt.upperRight.y}, null),
          map.displayToGcs({x: evt.upperRight.x, y: evt.lowerLeft.y}, null)
        ];
    if (this._selectionConstraint && evt.mouse && evt.state.origin) {
      this._selectionConstraint(evt.mouse.mapgcs, evt.state.origin.mapgcs, corners);
    }
    /* Don't keep rectangles that have nearly zero area in display pixels */
    if (layer.displayDistance(corners[0], null, corners[1], null) *
        layer.displayDistance(corners[0], null, corners[3], null) < 0.01) {
      return 'remove';
    }
    m_this.options('corners', corners);
    m_this.state(annotationState.done);
    return 'done';
  };

  /**
   * Get a list of renderable features for this annotation.
   *
   * @returns {array} An array of features.
   */
  this.features = function () {
    var opt = m_this.options(),
        state = m_this.state(),
        features;
    features = [];
    if (opt.corners && opt.corners.length >= 4) {
      features = [{
        polygon: {
          polygon: opt.corners,
          style: m_this.styleForState(state)
        }
      }];
    }
    if (state === annotationState.edit) {
      m_this._addEditHandles(features, opt.corners);
    }
    return features;
  };

  /**
   * Return this annotation as a polygon list.
   *
   * @param {geo.util.polyop.spec} [opts] Ignored.
   * @returns {geo.polygonList} A list of polygons.
   */
  this.toPolygonList = function (opts) {
    if (m_this._coordinates().length < 3) {
      return [];
    }
    return [[m_this._coordinates().map((pt) => [pt.x, pt.y])]];
  };

  /**
   * Get and optionally set coordinates associated with this annotation in the
   * map gcs coordinate system.
   *
   * @param {geo.geoPosition[]} [coordinates] An optional array of coordinates
   *  to set.
   * @returns {geo.geoPosition[]} The current array of coordinates.
   */
  this._coordinates = function (coordinates) {
    if (coordinates && coordinates.length >= 4) {
      m_this.options('corners', coordinates.slice(0, 4));
      /* Should we ensure that the four points form a rectangle in the current
       * projection, though this might not be rectangular in another gcs? */
    }
    return m_this.options('corners');
  };

  this._coordinateOption = 'corners';

  /**
   * Return the coordinates to be stored in a geojson geometry object.
   *
   * @param {string|geo.transform|null} [gcs] `undefined` to use the interface
   *    gcs, `null` to use the map gcs, or any other transform.
   * @returns {array} An array of flattened coordinates in the interface gcs
   *    coordinate system.  `undefined` if this annotation is incomplete.
   */
  this._geojsonCoordinates = function (gcs) {
    var src = m_this.coordinates(gcs);
    if (!src || m_this.state() === annotationState.create || src.length < 4) {
      return;
    }
    var coord = [];
    for (var i = 0; i < 4; i += 1) {
      coord.push([src[i].x, src[i].y]);
    }
    coord.push([src[0].x, src[0].y]);
    return [coord];
  };

  /**
   * Return the geometry type that is used to store this annotation in geojson.
   *
   * @returns {string} A geojson geometry type.
   */
  this._geojsonGeometryType = function () {
    return 'Polygon';
  };

  /**
   * Return a list of styles that should be preserved in a geojson
   * representation of the annotation.
   *
   * @returns {string[]} A list of style names to store.
   */
  this._geojsonStyles = function () {
    return [
      'fill', 'fillColor', 'fillOpacity', 'lineCap', 'lineJoin', 'stroke',
      'strokeColor', 'strokeOffset', 'strokeOpacity', 'strokeWidth'];
  };

  /**
   * Set three corners based on an initial corner and a mouse event.
   *
   * @param {geo.geoPosition} corners An array of four corners to update.
   * @param {geo.event} evt The mouse move event.
   */
  this._setCornersFromMouse = function (corners, evt) {
    var map = m_this.layer().map(),
        c0 = map.gcsToDisplay({x: corners[0].x, y: corners[0].y}, null),
        c2 = map.gcsToDisplay(evt.mapgcs, null),
        c1 = {x: c2.x, y: c0.y},
        c3 = {x: c0.x, y: c2.y};
    corners[2] = $.extend({}, evt.mapgcs);
    corners[1] = map.displayToGcs(c1, null);
    corners[3] = map.displayToGcs(c3, null);
    if (this._selectionConstraint) {
      this._selectionConstraint(evt.mapgcs, corners[0], corners);
    }
  };

  /**
   * Handle a mouse move on this annotation.
   *
   * @param {geo.event} evt The mouse move event.
   * @returns {boolean} Truthy to update the annotation, falsy to not
   *    update anything.
   */
  this.mouseMove = function (evt) {
    if (m_this.state() !== annotationState.create) {
      return;
    }
    var corners = m_this.options('corners');
    if (corners.length) {
      m_this._setCornersFromMouse(corners, evt);
      return true;
    }
  };

  /**
   * Handle a mouse click on this annotation.  If the event is processed,
   * evt.handled should be set to `true` to prevent further processing.
   *
   * @param {geo.event} evt The mouse click event.
   * @returns {boolean|string} `true` to update the annotation, `'done'` if
   *    the annotation was completed (changed from create to done state),
   *    `'remove'` if the annotation should be removed, falsy to not update
   *    anything.
   */
  this.mouseClick = function (evt) {
    var layer = m_this.layer();
    if (m_this.state() !== annotationState.create || !layer) {
      return;
    }
    if (!evt.buttonsDown.left && !evt.buttonsDown.right) {
      return;
    }
    var corners = m_this.options('corners');
    if (evt.buttonsDown.right && !corners.length) {
      return;
    }
    evt.handled = true;
    if (corners.length) {
      m_this._setCornersFromMouse(corners, evt);
      /* Don't keep rectangles that have nearly zero area in display pixels */
      if (layer.displayDistance(corners[0], null, corners[1], null) *
          layer.displayDistance(corners[0], null, corners[3], null) < 0.01) {
        return 'remove';
      }
      m_this.state(annotationState.done);
      return 'done';
    }
    if (evt.buttonsDown.left) {
      corners.push($.extend({}, evt.mapgcs));
      corners.push($.extend({}, evt.mapgcs));
      corners.push($.extend({}, evt.mapgcs));
      corners.push($.extend({}, evt.mapgcs));
      return true;
    }
  };

  /**
   * Process any edit actions for this annotation.
   *
   * @param {geo.event} evt The action event.
   * @returns {boolean|string} `true` to update the annotation, falsy to not
   *    update anything.
   */
  this.processEditAction = function (evt) {
    var start = m_this._editHandle.startCoordinates,
        delta = {
          x: evt.mouse.mapgcs.x - evt.state.origin.mapgcs.x,
          y: evt.mouse.mapgcs.y - evt.state.origin.mapgcs.y
        },
        type = m_this._editHandle.handle.type,
        index = m_this._editHandle.handle.index,
        ang = [
          Math.atan2(start[1].y - start[0].y, start[1].x - start[0].x),
          Math.atan2(start[2].y - start[1].y, start[2].x - start[1].x),
          Math.atan2(start[3].y - start[2].y, start[3].x - start[2].x),
          Math.atan2(start[0].y - start[3].y, start[0].x - start[3].x)
        ],
        corners, delta1, delta2, ang1, ang2;
    // an angle can be zero because it is horizontal or undefined.  If opposite
    // angles are both zero, this is a degenerate rectangle (a line or a point)
    if (!ang[0] && !ang[1] && !ang[2] && !ang[3]) {
      ang[1] = Math.PI / 2;
      ang[2] = Math.PI;
      ang[3] = -Math.PI / 2;
    }
    if (!ang[0] && !ang[2]) {
      ang[0] = ang[1] - Math.PI / 2;
      ang[2] = ang[1] + Math.PI / 2;
    }
    if (!ang[1] && !ang[3]) {
      ang[1] = ang[2] - Math.PI / 2;
      ang[3] = ang[2] + Math.PI / 2;
    }
    switch (type) {
      case 'vertex':
        corners = start.map(function (elem) {
          return {x: elem.x, y: elem.y};
        });
        ang1 = ang[(index + 1) % 4];
        delta1 = {
          x: (delta.x * Math.cos(ang1) + delta.y * Math.sin(ang1)) * Math.cos(ang1),
          y: (delta.y * Math.sin(ang1) + delta.x * Math.cos(ang1)) * Math.sin(ang1)
        };
        ang2 = ang[index];
        delta2 = {
          x: (delta.x * Math.cos(ang2) + delta.y * Math.sin(ang2)) * Math.cos(ang2),
          y: (delta.y * Math.sin(ang2) + delta.x * Math.cos(ang2)) * Math.sin(ang2)
        };
        corners[index].x += delta.x;
        corners[index].y += delta.y;
        corners[(index + 1) % 4].x += delta1.x;
        corners[(index + 1) % 4].y += delta1.y;
        corners[(index + 3) % 4].x += delta2.x;
        corners[(index + 3) % 4].y += delta2.y;
        if (this._selectionConstraint) {
          corners = this._selectionConstraint(evt.mouse.mapgcs, evt.state.origin.mapgcs, corners, 'vertex', ang, index).corners;
        }
        m_this.options('corners', corners);
        return true;
      case 'edge':
        corners = start.map(function (elem) {
          return {x: elem.x, y: elem.y};
        });
        ang1 = ang[(index + 1) % 4];
        delta = {
          x: (delta.x * Math.cos(ang1) + delta.y * Math.sin(ang1)) * Math.cos(ang1),
          y: (delta.y * Math.sin(ang1) + delta.x * Math.cos(ang1)) * Math.sin(ang1)
        };
        corners[index].x += delta.x;
        corners[index].y += delta.y;
        corners[(index + 1) % 4].x += delta.x;
        corners[(index + 1) % 4].y += delta.y;
        if (this._selectionConstraint) {
          corners = this._selectionConstraint(evt.mouse.mapgcs, evt.state.origin.mapgcs, corners, 'edge', ang, index).corners;
        }
        m_this.options('corners', corners);
        return true;
    }
    return s_processEditAction.apply(m_this, arguments);
  };
};
inherit(rectangleAnnotation, annotation);

/**
 * This object contains the default options to initialize the class.
 */
rectangleAnnotation.defaults = $.extend({}, annotation.defaults, {
  style: {
    fill: true,
    fillColor: {r: 0, g: 1, b: 0},
    fillOpacity: 0.25,
    polygon: function (d) { return d.polygon; },
    stroke: true,
    strokeColor: {r: 0, g: 0, b: 0},
    strokeOpacity: 1,
    strokeWidth: 3,
    uniformPolygon: true
  },
  highlightStyle: {
    fillColor: {r: 0, g: 1, b: 1},
    fillOpacity: 0.5,
    strokeWidth: 5
  },
  createStyle: {
    fillColor: {r: 0.3, g: 0.3, b: 0.3},
    fillOpacity: 0.25,
    strokeColor: {r: 0, g: 0, b: 1}
  },
  allowBooleanOperations: true
});

var rectangleRequiredFeatures = {};
rectangleRequiredFeatures[polygonFeature.capabilities.feature] = true;
registerAnnotation('rectangle', rectangleAnnotation, rectangleRequiredFeatures);

module.exports = rectangleAnnotation;