Fix issue where the edit menu would not disappear sometimes (close #7143

) Properly disable dragging the map under the edit menu for pointer events (re: #5505)
openstreetmap · Mar 25, 2020 · 5c2a96d · 5c2a96d
1 parent ad327be
commit 5c2a96d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 46 deletions.
diff --git a/modules/modes/select.js b/modules/modes/select.js
@@ -146,9 +146,7 @@ export function modeSelect(context, selectedIDs) {
 
 
     function closeMenu() {
-        if (editMenu) {
-            context.map().supersurface.call(editMenu.close);
-        }
+        if (editMenu) editMenu.close();
     }
 
 
@@ -264,6 +262,9 @@ export function modeSelect(context, selectedIDs) {
             }
         });
 
+        // remove the existing menu element, if any
+        closeMenu();
+
         editMenu = uiEditMenu(context, operations);
     }
 

diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js
@@ -7,22 +7,20 @@ import { svgIcon } from '../svg/icon';
 
 
 export function uiEditMenu(context, operations) {
-    var menu;
-    var center = [0, 0];
-    var offset = [0, 0];
+    var _menu = d3_select(null);
+    var _center = [0, 0];
 
-    var vpBottomMargin = 45; // viewport bottom margin
-    var vpSideMargin = 35;   // viewport side margin
+    var _vpBottomMargin = 45; // viewport bottom margin
+    var _vpSideMargin = 35;   // viewport side margin
 
     // hardcode these values to make menu positioning easier
-    var buttonWidth = 44;
-    var buttonHeight = 34;
-    var menuWidth = buttonWidth;
-    var verticalPadding = 4;
+    var _buttonWidth = 44;
+    var _buttonHeight = 34;
+    var _menuWidth = _buttonWidth;
+    var _verticalPadding = 4;
 
     // offset the menu slightly from the target location
-    var menuSideMargin = 10;
-
+    var _menuSideMargin = 10;
 
     var editMenu = function (selection) {
         if (!operations.length) return;
@@ -32,48 +30,45 @@ export function uiEditMenu(context, operations) {
         var isRTL = textDirection === 'rtl';
         var viewport = context.surfaceRect();
 
-        var menuHeight = verticalPadding * 2 + operations.length * buttonHeight;
+        var menuHeight = _verticalPadding * 2 + operations.length * _buttonHeight;
 
-        if (!isRTL && (center[0] + menuSideMargin + menuWidth) > (viewport.width - vpSideMargin)) {
+        if (!isRTL && (_center[0] + _menuSideMargin + _menuWidth) > (viewport.width - _vpSideMargin)) {
             // menu is going left-to-right and near right viewport edge, go left instead
             isRTL = true;
-        } else if (isRTL && (center[0] - menuSideMargin - menuWidth) < vpSideMargin) {
+        } else if (isRTL && (_center[0] - _menuSideMargin - _menuWidth) < _vpSideMargin) {
             // menu is going right-to-left and near left viewport edge, go right instead
             isRTL = false;
         }
 
-        offset[0] = (isRTL ? -1 * (menuSideMargin + menuWidth) : menuSideMargin);
+        var offset = [0, 0];
+
+        offset[0] = (isRTL ? -1 * (_menuSideMargin + _menuWidth) : _menuSideMargin);
 
-        if (center[1] + menuHeight > (viewport.height - vpBottomMargin)) {
+        if (_center[1] + menuHeight > (viewport.height - _vpBottomMargin)) {
             // menu is near bottom viewport edge, shift upwards
-            offset[1] = -1 * (center[1] + menuHeight - viewport.height + vpBottomMargin);
+            offset[1] = -1 * (_center[1] + menuHeight - viewport.height + _vpBottomMargin);
         }
 
-        var origin = geoVecAdd(center, offset);
+        var origin = geoVecAdd(_center, offset);
 
-        menu = selection
+        _menu = selection
             .append('div')
             .attr('class', 'edit-menu')
-            .style('padding', verticalPadding + 'px 0')
+            .style('padding', _verticalPadding + 'px 0')
             .style('left', origin[0] + 'px')
-            .style('top', origin[1] + 'px')
-            .attr('opacity', 0);
+            .style('top', origin[1] + 'px');
 
-        menu
-            .transition()
-            .attr('opacity', 1);
-
-        var buttons = menu.selectAll('.edit-menu-item')
+        var buttons = _menu.selectAll('.edit-menu-item')
             .data(operations);
 
         // enter
         var buttonsEnter = buttons.enter()
             .append('button')
             .attr('class', function (d) { return 'edit-menu-item edit-menu-item-' + d.id; })
-            .style('width', buttonWidth + 'px')
-            .style('height', buttonHeight + 'px')
+            .style('width', _buttonWidth + 'px')
+            .style('height', _buttonHeight + 'px')
             .on('click', click)
-            .on('mousedown', mousedown);
+            .on('pointerdown mousedown', pointerdown);
 
         buttonsEnter.each(function(d) {
             d3_select(this)
@@ -99,29 +94,21 @@ export function uiEditMenu(context, operations) {
             editMenu.close();
         }
 
-        function mousedown() {
+        function pointerdown() {
             d3_event.stopPropagation();  // https://github.com/openstreetmap/iD/issues/1869
         }
     };
 
-
     editMenu.close = function () {
-        if (menu) {
-            menu
-                .style('pointer-events', 'none')
-                .transition()
-                .attr('opacity', 0)
-                .remove();
-        }
+        _menu
+            .remove();
     };
 
-
     editMenu.center = function(val) {
-        if (!arguments.length) return center;
-        center = val;
+        if (!arguments.length) return _center;
+        _center = val;
         return editMenu;
     };
 
-
     return editMenu;
 }