google-map-poly.js

/* Copyright (c) 2015 Google Inc. All rights reserved. */
/*
The `google-map-poly` element represents a series of connected line segments (aka a polyline) which
may also be closed to form a polygon (provided there are at least three points). It is used as a
child of `google-map` and will contain at least two `google-map-point` child elements.

<b>Example</b>—a simple line:

    <google-map latitude="37.77493" longitude="-122.41942">
      <google-map-poly>
        <google-map-point latitude="37.77493" longitude="-122.41942"></google-map-point>
        <google-map-point latitude="38.77493" longitude="-123.41942"></google-map-point>
      </google-map-poly>
    </google-map>

<b>Example</b>—a semi-translucent blue triangle:

    <google-map latitude="37.77493" longitude="-122.41942">
      <google-map-poly closed fill-color="blue" fill-opacity=".5">
        <google-map-point latitude="36.77493" longitude="-121.41942"></google-map-point>
        <google-map-point latitude="38.77493" longitude="-122.41942"></google-map-point>
        <google-map-point latitude="36.77493" longitude="-123.41942"></google-map-point>
      </google-map-poly>
    </google-map>
*/
/*
  FIXME(polymer-modulizer): the above comments were extracted
  from HTML and may be out of place here. Review them and
  then delete this comment!
*/
import '@polymer/polymer/polymer-legacy.js';

import '@PaackEng/webcomponents-google-apis/google-maps-api.js';
import './google-map-point.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
Polymer({
  _template: html`
    <style>
      :host {
        display: none;
      }
    </style>

    <slot id="points"></slot>
`,

  is: 'google-map-poly',

  /**
   * Fired when the `path` property is built based on child `google-map-point` elements, either
   * initially or when they are changed.
   *
   * @event google-map-poly-path-built
   * @param {google.maps.MVCArray.<google.maps.LatLng>} path The poly path.
   */

  /**
   * Fired when the user finishes adding vertices to the poly. The host component can use the
   * provided path to rebuild its list of points.
   *
   * @event google-map-poly-path-updated
   * @param {google.maps.MVCArray.<google.maps.LatLng>} path The poly path.
   */

  /**
   * Fired when the DOM `click` event is fired on the poly. Requires the clickEvents and clickable attribute to
   * be true.
   *
   * @event google-map-poly-click
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Fired when the DOM `dblclick` event is fired on the poly. Requires the clickEvents and clickable attribute
   * to be true.
   *
   * @event google-map-poly-dblclick
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Fired repeatedly while the user drags the poly. Requires the dragEvents attribute to be true.
   *
   * @event google-map-poly-drag
   * @param {google.maps.MouseEvent} event The mouse event.
   */

  /**
   * Fired when the user stops dragging the poly. Requires the dragEvents attribute to be true.
   *
   * @event google-map-poly-dragend
   * @param {google.maps.MouseEvent} event The mouse event.
   */

  /**
   * Fired when the user starts dragging the poly. Requires the dragEvents attribute to be true.
   *
   * @event google-map-poly-dragstart
   * @param {google.maps.MouseEvent} event The mouse event.
   */

  /**
   * Fired when the DOM `mousedown` event is fired on the poly. Requires the mouseEvents attribute
   * to be true.
   *
   * @event google-map-poly-mousedown
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Fired when the DOM `mousemove` event is fired on the poly. Requires the mouseEvents attribute
   * to be true.
   *
   * @event google-map-poly-mousemove
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Fired on poly mouseout. Requires the mouseEvents attribute to be true.
   *
   * @event google-map-poly-mouseout
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Fired on poly mouseover. Requires the mouseEvents attribute to be true.
   *
   * @event google-map-poly-mouseover
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Fired when the DOM `mouseup` event is fired on the poly. Requires the mouseEvents attribute
   * to be true.
   *
   * @event google-map-poly-mouseup
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Fired when the poly is right-clicked on. Requires the clickEvents attribute to be true.
   *
   * @event google-map-poly-rightclick
   * @param {google.maps.PolyMouseEvent} event The poly event.
   */

  /**
   * Polymer properties for the google-map-poly element.
   */
  properties: {
    /**
     * A Google Maps polyline or polygon object (depending on value of "closed" attribute).
     *
     * @type {google.maps.Polyline|google.maps.Polygon}
     */
    poly: {
      type: Object,
      readOnly: true
    },

    /**
     * An array of the Google Maps LatLng objects that define the poly shape.
     *
     * @type google.maps.MVCArray.<google.maps.LatLng>
     */
    path: {
      type: Object,
      readOnly: true
    },

    /**
     * The Google map object.
     *
     * @type google.maps.Map
     */
    map: {
      type: Object,
      observer: '_mapChanged'
    },

    /**
     * When true, the poly will generate mouse events.
     */
    clickable: {
      type: Boolean,
      value: false,
      observer: '_clickableChanged'
    },

    /**
     * When true, the google-map-poly-*click events will be automatically registered.
     */
     clickEvents: {
       type: Boolean,
       value: false,
       observer: '_clickEventsChanged'
     },

    /**
     * When true, the path will be closed by connecting the last point to the first one and
     * treating the poly as a polygon.
     */
    closed: {
      type: Boolean,
      value: false,
      observer: '_closedChanged'
    },

    /**
     * When true, the poly may be dragged to a new position.
     */
    // FIXME: Add this feature again
    /*
    draggable: {
      type: Boolean,
      value: false,
    },
    */

    /**
     * When true, the google-map-poly-drag* events will be automatically registered.
     */
    dragEvents: {
      type: Boolean,
      value: false,
      observer: '_dragEventsChanged'
    },

    /**
     * When true, the poly's vertices may be individually moved or new ones added.
     */
    editable: {
      type: Boolean,
      value: false,
      observer: '_editableChanged'
    },

    /**
     * When true, indicates that the user has begun editing the poly path (adding vertices).
     */
    editing: {
      type: Boolean,
      value: false,
      notify: true,
      readOnly: true
    },

    /**
     * If the path is closed, the polygon fill color. All CSS3 colors are supported except for
     * extended named colors.
     */
    fillColor: {
      type: String,
      value: '',
      observer: '_fillColorChanged'
    },

    /**
     * If the path is closed, the polygon fill opacity (between 0.0 and 1.0).
     */
    fillOpacity: {
      type: Number,
      value: 0,
      observer: '_fillOpacityChanged'
    },

    /**
     * When true, the poly's edges are interpreted as geodesic and will follow the curvature of
     * the Earth. When not set, the poly's edges are rendered as straight lines in screen space.
     * Note that the poly of a geodesic poly may appear to change when dragged, as the dimensions
     * are maintained relative to the surface of the earth.
     */
    geodesic: {
      type: Boolean,
      value: false,
      observer: '_geodesicChanged'
    },

    /**
     * If the path is not closed, the icons to be rendered along the polyline.
     */
    icons: {
      type: Array,
      value: null,
      observer: '_iconsChanged'
    },

    /**
     * When true, the google-map-poly-mouse* events will be automatically registered.
     */
     mouseEvents: {
       type: Boolean,
       value: false,
       observer: '_mouseEventsChanged'
     },

    /**
     * The color to draw the poly's stroke with. All CSS3 colors are supported except for extended
     * named colors.
     */
    strokeColor: {
      type: String,
      value: 'black',
      observer: '_strokeColorChanged'
    },

    /**
     * The stroke opacity (between 0.0 and 1.0).
     */
    strokeOpacity: {
      type: Number,
      value: 1,
      observer: '_strokeOpacityChanged'
    },

    /**
     * The stroke position (center, inside, or outside).
     */
    strokePosition: {
      type: String,
      value: 'center',
      observer: '_strokePositionChanged'
    },

    /**
     * The stroke width in pixels.
     */
    strokeWeight: {
      type: Number,
      value: 3,
      observer: '_strokeWeightChanged'
    },

    /**
     * The Z-index relative to other objects on the map.
     */
    zIndex: {
      type: Number,
      value: 0,
      observer: '_zIndexChanged'
    }
  },

  // Lifecycle event handlers.

  detached: function() {
    this.poly.setMap(null);
    if (this._pointsObserver) {
      this._pointsObserver.disconnect();
      this._pointsObserver = null;
    }
    for (var name in this._listeners) {
      this._clearListener(name);
    }
  },

  attached: function() {
    // If element is added back to DOM, put it back on the map.
    this.poly && this.poly.setMap(this.map);
  },

  // Attribute/property change watchers.

  attributeChanged: function(attrName) {
    if (!this.poly) {
      return;
    }

    // Cannot use *Changed watchers for native properties.
    switch (attrName) {
      case 'hidden':
        this.poly.setVisible(!this.hidden);
        break;
      case 'draggable':
        this.poly.setDraggable(this.draggable);
        break;
    }
  },

  _clickableChanged: function() {
    this.poly && this.poly.set('clickable', this.clickable);
  },

  _clickEventsChanged: function() {
    if (this.poly) {
      if (this.clickEvents) {
        this._forwardEvent('click');
        this._forwardEvent('dblclick');
        this._forwardEvent('rightclick');
      } else {
        this._clearListener('click');
        this._clearListener('dblclick');
        this._clearListener('rightclick');
      }
    }
  },

  _closedChanged: function() {
    this._mapChanged();
  },

  _dragEventsChanged: function() {
    if (this.poly) {
      if (this.clickEvents) {
        this._forwardEvent('drag');
        this._forwardEvent('dragend');
        this._forwardEvent('dragstart');
      } else {
        this._clearListener('drag');
        this._clearListener('dragend');
        this._clearListener('dragstart');
      }
    }
  },

  _editableChanged: function() {
    this.poly && this.poly.setEditable(this.editable);
  },

  _fillColorChanged: function() {
    this.poly && this.poly.set('fillColor', this.fillColor);
  },

  _fillOpacityChanged: function() {
    this.poly && this.poly.set('fillOpacity', this.fillOpacity);
  },

  _geodesicChanged: function() {
    this.poly && this.poly.set('geodesic', this.geodesic);
  },

  _iconsChanged: function() {
    this.poly && this.poly.set('icons', this.icons);
  },

  _mapChanged: function() {
    // Poly will be rebuilt, so disconnect existing one from old map and listeners.
    if (this.poly) {
      this.poly.setMap(null);
      google.maps.event.clearInstanceListeners(this.poly);
    }

    if (this.map && this.map instanceof google.maps.Map) {
      this._createPoly();
    }
  },

  _mouseEventsChanged: function() {
    if (this.poly) {
      if (this.mouseEvents) {
        this._forwardEvent('mousedown');
        this._forwardEvent('mousemove');
        this._forwardEvent('mouseout');
        this._forwardEvent('mouseover');
        this._forwardEvent('mouseup');
      } else {
        this._clearListener('mousedown');
        this._clearListener('mousemove');
        this._clearListener('mouseout');
        this._clearListener('mouseover');
        this._clearListener('mouseup');
      }
    }
  },

  _strokeColorChanged: function() {
    this.poly && this.poly.set('strokeColor', this.strokeColor);
  },

  _strokeOpacityChanged: function() {
    this.poly && this.poly.set('strokeOpacity', this.strokeOpacity);
  },

  _strokePositionChanged: function() {
    this.poly && this.poly.set('strokePosition', this._convertStrokePosition());
  },

  _strokeWeightChanged: function() {
    this.poly && this.poly.set('strokeWeight', this.strokeWeight);
  },

  _zIndexChanged: function() {
    this.poly && this.poly.set('zIndex', this.zIndex);
  },

  // Helper logic.

  _buildPathFromPoints: function() {
    this._points = Array.prototype.slice.call(dom(this.$.points).getDistributedNodes());

    // Build path from current points (ignoring vertex insertions while doing so).
    this._building = true;
    this.path.clear();
    for (var i = 0, point; point = this._points[i]; ++i) {
      var tagName = point.tagName;

      if (tagName) {
        tagName = tagName.toLowerCase();

        if (tagName == 'google-map-point') {
          this.path.push(point.getPosition());
        }
      }
    }
    this._building = false;

    this.fire('google-map-poly-path-built', this.path);

    // Watch for future updates.
    if (this._pointsObserver) {
      return;
    }
    this._pointsObserver = new MutationObserver(this._buildPathFromPoints.bind(this));
    this._pointsObserver.observe(this, {
      childList: true
    });
  },

  _clearListener: function(name) {
    if (this._listeners[name]) {
      google.maps.event.removeListener(this._listeners[name]);
      this._listeners[name] = null;
    }
  },

  _convertStrokePosition: function() {
    return google.maps.StrokePosition && this.strokePosition ?
        google.maps.StrokePosition[this.strokePosition.toUpperCase()] : 0;
  },

  _createPoly: function() {
    // Build poly's path and register mutation listeners on first creation.
    if (!this.path) {
      this._setPath(new google.maps.MVCArray());
      google.maps.event.addListener(this.path, 'insert_at', this._startEditing.bind(this));
      google.maps.event.addListener(this.path, 'set_at', this._updatePoint.bind(this));
      this._buildPathFromPoints();
    }

    var options = {
      clickable: this.clickable || this.draggable,  // draggable must be clickable to work.
      draggable: this.draggable,
      editable: this.editable,
      geodesic: this.geodesic,
      map: this.map,
      path: this.path,
      strokeColor: this.strokeColor,
      strokeOpacity: this.strokeOpacity,
      strokePosition: this._convertStrokePosition(),
      strokeWeight: this.strokeWeight,
      visible: !this.hidden,
      zIndex: this.zIndex
    };

    if (this.closed) {
      options.fillColor = this.fillColor;
      options.fillOpacity = this.fillOpacity;
      this._setPoly(new google.maps.Polygon(options));
    } else {
      options.icons = this.icons;
      this._setPoly(new google.maps.Polyline(options));
    }

    this._listeners = {};
    this._clickEventsChanged();
    this._mouseEventsChanged();
    this._dragEventsChanged();
  },

  _forwardEvent: function(name) {
    this._listeners[name] = google.maps.event.addListener(this.poly, name, function(event) {
      this.fire('google-map-poly-' + name, event);
    }.bind(this));
  },

  _startEditing: function(index) {
    if (this._building) {
      // Ignore changes while building path.
      return;
    }

    // Signal start of editing when first vertex inserted, end when map clicked.
    if (!this.editing) {
      this._setEditing(true);
      // The poly path and google-map-point elements lose sync once the user starts adding points,
      // so invalidate the _points array.
      this._points = null;
      google.maps.event.addListenerOnce(this.map, 'click', function() {
        this._setEditing(false);
        this.fire('google-map-poly-path-updated', this.path);
      }.bind(this));
    }
  },

  _updatePoint: function(index, vertex) {
    // Ignore changes if path is out of sync with google-map-point elements.
    if (!this._points) {
      return;
    }

    // Update existing point so bound properties are updated. too.
    this._points[index].latitude = vertex.lat();
    this._points[index].longitude = vertex.lng();
  }
});