From 7f403e06ae1635ae2e58c3a978285532779efee0 Mon Sep 17 00:00:00 2001
From: Leslie Li <leslie.li@servicemax.com>
Date: Tue, 14 Jun 2022 09:59:27 +0800
Subject: [PATCH] MAX-26939: Apply the new design for the menus on polygon tool

https://servicemax.atlassian.net/browse/MAX-26939

Enhancement:
* Add new function `_toggleShapeBtnsEnableState` to enable/disable the shape creation buttons.
* Enhance the logic of `_handleShapeLayerDrawEnd`.
---
 HISTORY.md                  |  6 ++++++
 bower.json                  |  2 +-
 demo/px-map-demo.html       |  5 +++++
 package.json                |  2 +-
 px-map-behavior-root.es6.js | 19 +++++++++++++++++--
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index 0186d28..41fd524 100644
--- a/HISTORY.md
+++ b/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:
diff --git a/bower.json b/bower.json
index 6399521..456a2cb 100644
--- a/bower.json
+++ b/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"
diff --git a/demo/px-map-demo.html b/demo/px-map-demo.html
index bee8f35..8554115 100644
--- a/demo/px-map-demo.html
+++ b/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) {
diff --git a/package.json b/package.json
index 3ba3d71..03e88ff 100644
--- a/package.json
+++ b/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": {
diff --git a/px-map-behavior-root.es6.js b/px-map-behavior-root.es6.js
index 617a625..4a781b8 100644
--- a/px-map-behavior-root.es6.js
+++ b/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 });
     },
 
     /**