feat(Polygon): add component and client example

client/scripts/index.js

@@ -2,25 +2,40 @@
 "use strict";
 require("../styles/index.scss");
 var React = require("react/addons");
+var {update} = React.addons;
 
-var {GoogleMapsMixin, Map, Marker} = require("../../src");
+var {GoogleMapsMixin, Map, Marker, Polygon} = require("../../src");
 
 var Body = React.createClass({
 
   mixins: [GoogleMapsMixin],
 
   getDefaultProps () {
     return {
-      center: new google.maps.LatLng(-25.363882,131.044922),
-      mapTypeId: google.maps.MapTypeId.ROADMAP
+      center: {lat: 24.886436490787712, lng: -70.2685546875},
+      mapTypeId: google.maps.MapTypeId.TERRAIN,
+      bermudaTriangle: {
+        paths: [
+          {lat: 25.774252, lng: -80.190262},
+          {lat: 18.466465, lng: -66.118292},
+          {lat: 32.321384, lng: -64.75737},
+          {lat: 25.774252, lng: -80.190262},
+        ],
+        strokeColor: '#FF0000',
+        strokeOpacity: 0.8,
+        strokeWeight: 2,
+        fillColor: '#FF0000',
+        fillOpacity: 0.35,
+      },
     };
   },
 
   getInitialState () {
     return  {
       googleMapsApi: google.maps,
       zoom: 4,
-      opacity: 1
+      opacity: 1,
+      hideMarker: false,
     };
   },
 
@@ -45,6 +60,13 @@ var Body = React.createClass({
     });
   },
 
+  _handle_polygon_rightclick () {
+    console.log(this.state.hideMarker);
+    this.setState({
+      hideMarker: !this.state.hideMarker
+    })
+  },
+
   _render (props, state) {
     return <div>
       <Map  ref="map"
@@ -53,10 +75,17 @@ var Body = React.createClass({
             mapTypeId={props.mapTypeId}
             onClick={this._handle_map_click}
             onZoomChanged={this._handle_map_zoom_changed} />
-      <Marker position={props.center}
-              title={"Hello World!"}
-              opacity={state.opacity}
-              onClick={this._handle_marker_click} />
+      { state.hideMarker ? false :
+          <Marker position={props.center}
+                  title={"the Bermuda Triangle!"}
+                  opacity={state.opacity}
+                  onClick={this._handle_marker_click} />
+      }
+      {
+        Polygon(update(props.bermudaTriangle, { $merge: {
+          onRightclick: this._handle_polygon_rightclick
+        }}))
+      }
     </div>;
   }
 });

src/Polygon.js

@@ -0,0 +1,72 @@
+/** @jsx React.DOM */
+"use strict";
+var React = require("react/addons");
+
+var ChildMixin = require("./mixins/ChildMixin");
+var EventBindingMixin = require("./mixins/EventBindingMixin");
+
+module.exports = React.createClass({
+  displayName: "Polygon",
+
+  mixins: [ChildMixin, EventBindingMixin],
+
+  getInitialState () {
+    return {
+      polygon: null
+    };
+  },
+
+  componentDidMount () {
+    var {polygon} = this.state;
+    if (polygon || !this.context.hasMap()) return;
+    this.add_listeners(this._init_polygon());
+  },
+
+  componentWillUpdate () {
+    var {polygon} = this.state;
+    if (polygon || !this.context.hasMap()) return;
+    this.clear_listeners(polygon);
+  },
+
+  componentDidUpdate () {
+    var {polygon} = this.state;
+    if (!this.context.hasMap()) return;
+    if (polygon) {
+      polygon.setOptions(this.props);
+    } else {
+      this.add_listeners(this._init_polygon());
+    }
+  },
+
+  componentWillUnmount () {
+    var {polygon} = this.state;
+    if (polygon || !this.context.hasMap()) return;
+    this.clear_listeners(polygon);
+  },
+
+  render () {
+    return this._render(this.props, this.state);
+  },
+
+  get_event_names () {
+    return "click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick";
+  },
+
+  _init_polygon () {
+    var {context} = this;
+    if (this.state.polygon || !context.hasMap() || !context.getApi()) {
+      return;
+    }
+    var {Polygon} = context.getApi();
+    var polygon = new Polygon(this.props);
+    polygon.setMap(context.getMap());
+
+    this.expose_getters_from(Polygon.prototype, polygon);
+    this.setState({ polygon });
+    return polygon;
+  },
+
+  _render (props, state) {
+    return null;
+  }
+});

src/index.js

@@ -3,3 +3,4 @@
 exports.GoogleMapsMixin = require("./GoogleMapsMixin");
 exports.Map = require("./Map");
 exports.Marker = require("./Marker");
+exports.Polygon = require("./Polygon");