Merge pull request #72 from leslieli/master

MAX-26939: Apply the new design for the menus on polygon tool

HISTORY.md

@@ -1,3 +1,9 @@
+v3.19.26
+===================
+## Enhancement:
+* Add new function `_toggleShapeBtnsEnableState` to enable/disable the shape creation buttons.
+* Enhance the logic of `_handleShapeLayerDrawEnd`.
+
 v3.19.25
 ===================
 ## Enhancement:

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-map",
-  "version": "3.19.25",
+  "version": "3.19.26",
   "description": "A lightweight framework for building interactive maps with web components",
   "main": [
     "px-map.html"

demo/px-map-demo.html

@@ -172,12 +172,17 @@
 
       mapMove: function(evt) {
         var markers = Polymer.dom(evt).rootTarget.getVisibleMarkers();
+        if (Polymer.dom(evt).rootTarget.elementInst.pm) {
+          Polymer.dom(evt).rootTarget.elementInst.pm.disableDraw();
+        }
         console.log('There are ' + markers.length + ' markers visible on the map.');
       },
       drawFinished: function(evt) {
+        Polymer.dom(evt).rootTarget._removeDrawnLayers();
         console.log('There is the feature collection for the drawn polygon.', evt.detail);
       },
       drawnLayerChanged: function(evt) {
+        Polymer.dom(evt).rootTarget._toggleShapeBtnsEnableState(!evt.detail.hasDrawnLayers);
         console.log('The drawn layer is changed, still has layer on map?', evt.detail);
       },
       removalModeChanged: function(evt) {

package.json

@@ -2,7 +2,7 @@
   "name": "px-map",
   "author": "General Electric",
   "description": "A lightweight framework for building interactive maps with web components",
-  "version": "3.19.25",
+  "version": "3.19.26",
   "private": false,
   "extName": null,
   "repository": {

px-map-behavior-root.es6.js

@@ -525,6 +525,17 @@
       }
     },
 
+    /**
+     * Enable/Disable the shape buttons
+     *
+     * @param {*} enable
+     */
+    _toggleShapeBtnsEnableState(enable) {
+      this.elementInst.pm.Toolbar.setButtonDisabled('Rectangle', !enable);
+      this.elementInst.pm.Toolbar.setButtonDisabled('Polygon', !enable);
+      this.elementInst.pm.Toolbar.setButtonDisabled('Circle', !enable);
+    },
+
     /**
      * Update the drawing toolbar position
      * @param {*} position
@@ -566,11 +577,15 @@
 
     /**
      * Handle when the layer or shape is draw ended.
+     *
      * @param {*} e
      */
     _handleShapeLayerDrawEnd(e) {
-      this._toggleFinishBtnEnalbeState(true);
-      this.fire('px-map-drawn-layer-changed', { hasDrawnLayers: true });
+      // drawend event is triggerred as well when disable the draw for the first shape/layer
+      // can't use hasLayers = true directly here
+      const hasLayers = this._hasDrawnLayers();
+      this._toggleFinishBtnEnalbeState(hasLayers);
+      this.fire('px-map-drawn-layer-changed', { hasDrawnLayers: hasLayers });
     },
 
     /**