feat(DrawingManager): Support for Drawing API

tomchentw · May 15, 2015 · 9b3cbeb · 9b3cbeb
1 parent 7fb44f9
commit 9b3cbeb
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 4 deletions.
diff --git a/examples/gh-pages/scripts/ReactRoot.js b/examples/gh-pages/scripts/ReactRoot.js
@@ -66,7 +66,7 @@ const DROPDOWN_ACTIONS = [
   false,
   {
     key: "events__simple-click-event",
-    displayName: "Smple click event",
+    displayName: "Simple click event",
     path: "#events/simple-click-event",
     component: {
       componentClass: require("./components/events/SimpleClickEvent"),
@@ -108,6 +108,18 @@ const DROPDOWN_ACTIONS = [
       },
     },
   },
+  false,
+  {
+    key: "drawing__drawing-tools",
+    displayName: "Drawing Tools",
+    path: "#drawing/drawing-tools",
+    component: {
+      componentClass: require("./components/drawing/DrawingTools"),
+      componentRaw: {
+        __raw: require("!raw-loader!./components/drawing/DrawingTools"),
+      },
+    },
+  },
 ];
 
 const RIGHT_ACTIONS = [

diff --git a/examples/gh-pages/scripts/components/drawing/DrawingTools.js b/examples/gh-pages/scripts/components/drawing/DrawingTools.js
@@ -0,0 +1,63 @@
+import React from "react/addons";
+import {GoogleMaps, DrawingManager} from "react-google-maps";
+
+/*
+ * https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
+ *
+ * Note: requires the Google Maps drawing API library in your script src
+ */
+class DrawingTools extends React.Component {
+
+  constructor (...args) {
+    super(...args);
+    this.state = {
+      zoom: 8,
+      center: new google.maps.LatLng(-34.397, 150.644),
+    };
+  }
+
+  render () {
+    const {props, state} = this,
+          {googleMapsApi, ...otherProps} = props;
+
+    return (
+      <GoogleMaps containerProps={{
+          ...otherProps,
+          style: {
+            height: "100%",
+          },
+        }}
+        ref="map"
+        googleMapsApi={google.maps}
+        zoom={state.zoom}
+        center={state.center}>
+
+        <DrawingManager
+          drawingMode={google.maps.drawing.OverlayType.CIRCLE}
+          drawingControl={true}
+          drawingControlOptions={{
+            position: google.maps.ControlPosition.TOP_CENTER,
+            drawingModes: [
+              google.maps.drawing.OverlayType.CIRCLE,
+              google.maps.drawing.OverlayType.POLYGON,
+              google.maps.drawing.OverlayType.POLYLINE,
+              google.maps.drawing.OverlayType.RECTANGLE
+            ]
+          }}
+          circleOptions={{
+            fillColor: '#ffff00',
+            fillOpacity: 1,
+            strokeWeight: 5,
+            clickable: false,
+            editable: true,
+            zIndex: 1
+          }}
+        />
+
+      </GoogleMaps>
+    );
+  }
+
+}
+
+export default DrawingTools;
diff --git a/examples/gh-pages/scripts/html.js b/examples/gh-pages/scripts/html.js
@@ -22,7 +22,7 @@ class ReactHtml extends React.Component {
         <head>
           <title>React Google Maps | tomchentw</title>
           {this._render_link_to_stylesheet_(clientAssets)}
-          <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp" />
+          <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing" />
           <script type="text/javascript" src="prism.min.js" />
         </head>
         <body>

diff --git a/lib/DrawingManager.js b/lib/DrawingManager.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+var _internalsSimpleChildComponent = require("./internals/SimpleChildComponent");
+
+var _internalsSimpleChildComponent2 = _interopRequireDefault(_internalsSimpleChildComponent);
+
+var _internalsCreateRegisterEvents = require("./internals/createRegisterEvents");
+
+var _internalsCreateRegisterEvents2 = _interopRequireDefault(_internalsCreateRegisterEvents);
+
+var DrawingManager = (function (_SimpleChildComponent) {
+  function DrawingManager() {
+    _classCallCheck(this, DrawingManager);
+
+    if (_SimpleChildComponent != null) {
+      _SimpleChildComponent.apply(this, arguments);
+    }
+  }
+
+  _inherits(DrawingManager, _SimpleChildComponent);
+
+  return DrawingManager;
+})(_internalsSimpleChildComponent2["default"]);
+
+DrawingManager._GoogleMapsClassName = "drawing.DrawingManager";
+
+DrawingManager._registerEvents = _internalsCreateRegisterEvents2["default"]("drawingmode_changed overlaycomplete markercomplete circlecomplete polygoncomplete polylinecomplete rectanglecomplete");
+
+exports["default"] = DrawingManager;
+module.exports = exports["default"];
diff --git a/lib/index.js b/lib/index.js
@@ -18,6 +18,10 @@ var _DirectionsRenderer = require("./DirectionsRenderer");
 
 var _DirectionsRenderer2 = _interopRequireDefault(_DirectionsRenderer);
 
+var _DrawingManager = require("./DrawingManager");
+
+var _DrawingManager2 = _interopRequireDefault(_DrawingManager);
+
 var _InfoWindow = require("./InfoWindow");
 
 var _InfoWindow2 = _interopRequireDefault(_InfoWindow);
@@ -37,6 +41,7 @@ var _Polyline2 = _interopRequireDefault(_Polyline);
 exports.GoogleMaps = _GoogleMaps2["default"];
 exports.Circle = _Circle2["default"];
 exports.DirectionsRenderer = _DirectionsRenderer2["default"];
+exports.DrawingManager = _DrawingManager2["default"];
 exports.InfoWindow = _InfoWindow2["default"];
 exports.Marker = _Marker2["default"];
 exports.Polygon = _Polygon2["default"];

diff --git a/lib/internals/SimpleChildComponent.js b/lib/internals/SimpleChildComponent.js
@@ -24,6 +24,10 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
+var _objectPath = require("object-path");
+
+var _objectPath2 = _interopRequireDefault(_objectPath);
+
 var _EventComponent2 = require("./EventComponent");
 
 var _EventComponent3 = _interopRequireDefault(_EventComponent2);
@@ -78,7 +82,11 @@ var SimpleChildComponent = (function (_EventComponent) {
         }
         instance.setOptions(googleMapsConfig);
       } else {
-        var GoogleMapsClass = googleMapsApi[this.constructor._GoogleMapsClassName];
+        var googleMapsClassName = this.constructor._GoogleMapsClassName;
+        if (!_objectPath2["default"].has(googleMapsApi, googleMapsClassName)) {
+          return;
+        }
+        var GoogleMapsClass = _objectPath2["default"].get(googleMapsApi, googleMapsClassName);
         instance = new GoogleMapsClass(googleMapsConfig);
 
         _exposeGetters2["default"](this, GoogleMapsClass.prototype, instance);

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "tomchentw-npm-dev": "^1.2.0"
   },
   "dependencies": {
+    "object-path": "^0.9.2",
     "react": "^0.13.0"
   },
   "peerDependencies": {

diff --git a/src/DrawingManager.js b/src/DrawingManager.js
@@ -0,0 +1,13 @@
+import SimpleChildComponent from "./internals/SimpleChildComponent";
+import createRegisterEvents from "./internals/createRegisterEvents";
+
+class DrawingManager extends SimpleChildComponent {
+}
+
+DrawingManager._GoogleMapsClassName = "drawing.DrawingManager";
+
+DrawingManager._registerEvents = createRegisterEvents(
+  "drawingmode_changed overlaycomplete markercomplete circlecomplete polygoncomplete polylinecomplete rectanglecomplete"
+);
+
+export default DrawingManager;
diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ import GoogleMaps from "./GoogleMaps";
 
 import Circle from "./Circle";
 import DirectionsRenderer from "./DirectionsRenderer";
+import DrawingManager from './DrawingManager';
 import InfoWindow from "./InfoWindow";
 import Marker from "./Marker";
 import Polygon from "./Polygon";
@@ -14,6 +15,7 @@ export {
 export {
   Circle,
   DirectionsRenderer,
+  DrawingManager,
   InfoWindow,
   Marker,
   Polygon,

diff --git a/src/internals/SimpleChildComponent.js b/src/internals/SimpleChildComponent.js
@@ -1,4 +1,5 @@
 import React from "react";
+import objectPath from "object-path";
 
 import EventComponent from "./EventComponent";
 import exposeGetters from "./exposeGetters";
@@ -32,7 +33,11 @@ class SimpleChildComponent extends EventComponent {
       }
       instance.setOptions(googleMapsConfig);
     } else {
-      const GoogleMapsClass = googleMapsApi[this.constructor._GoogleMapsClassName];
+      const googleMapsClassName = this.constructor._GoogleMapsClassName;
+      if (!objectPath.has(googleMapsApi, googleMapsClassName)) {
+        return;
+      }
+      const GoogleMapsClass = objectPath.get(googleMapsApi, googleMapsClassName);
       instance = new GoogleMapsClass(googleMapsConfig);
 
       exposeGetters(this, GoogleMapsClass.prototype, instance);