Reuse the uiEditMenu instead of recreating it every time the operations change

modules/modes/select.js

@@ -48,7 +48,7 @@ export function modeSelect(context, selectedIDs) {
         modeDragNote(context).behavior
     ];
     var inspector;   // unused?
-    var editMenu;
+    var _editMenu = uiEditMenu(context);
     var _timeout = null;
     var _newFeature = false;
     var _suppressMenu = true;
@@ -146,12 +146,12 @@ export function modeSelect(context, selectedIDs) {
 
 
     function closeMenu() {
-        if (editMenu) editMenu.close();
+        if (_editMenu) _editMenu.close();
     }
 
 
     function positionMenu() {
-        if (!editMenu) return;
+        if (!_editMenu) return;
 
         var entity = singular();
         if (entity && entity.geometry(context.graph()) === 'relation') {
@@ -161,7 +161,7 @@ export function modeSelect(context, selectedIDs) {
             var viewport = geoExtent(context.projection.clipExtent()).polygon();
 
             if (point && geoPointInPolygon(point, viewport)) {
-                editMenu.center(point);
+                _editMenu.center(point);
             } else {
                 _suppressMenu = true;
             }
@@ -171,12 +171,12 @@ export function modeSelect(context, selectedIDs) {
 
     function showMenu() {
         closeMenu();
-        if (editMenu) {
+        if (_editMenu) {
 
             // disable menu if in wide selection, for example
             if (!context.map().editableDataEnabled()) return;
 
-            context.map().supersurface.call(editMenu);
+            context.map().supersurface.call(_editMenu);
         }
     }
 
@@ -265,7 +265,7 @@ export function modeSelect(context, selectedIDs) {
         // remove the existing menu element, if any
         closeMenu();
 
-        editMenu = uiEditMenu(context, operations);
+        _editMenu.operations(operations);
     }
 
 
@@ -545,7 +545,6 @@ export function modeSelect(context, selectedIDs) {
             .call(keybinding.unbind);
 
         closeMenu();
-        editMenu = undefined;
 
         context.history()
             .on('change.select', null)

modules/ui/edit_menu.js

@@ -6,8 +6,9 @@ import { uiTooltip } from './tooltip';
 import { svgIcon } from '../svg/icon';
 
 
-export function uiEditMenu(context, operations) {
+export function uiEditMenu(context) {
     var _menu = d3_select(null);
+    var _operations = [];
     var _center = [0, 0];
 
     var _vpBottomMargin = 45; // viewport bottom margin
@@ -22,15 +23,15 @@ export function uiEditMenu(context, operations) {
     // offset the menu slightly from the target location
     var _menuSideMargin = 10;
 
-    var editMenu = function (selection) {
-        if (!operations.length) return;
+    var editMenu = function(selection) {
+        if (!_operations.length) return;
 
-        selection.node().parentNode.focus();
+        selection.node().focus();
 
         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)) {
             // menu is going left-to-right and near right viewport edge, go left instead
@@ -42,7 +43,7 @@ export function uiEditMenu(context, operations) {
 
         var offset = [0, 0];
 
-        offset[0] = (isRTL ? -1 * (_menuSideMargin + _menuWidth) : _menuSideMargin);
+        offset[0] = isRTL ? -1 * (_menuSideMargin + _menuWidth) : _menuSideMargin;
 
         if (_center[1] + menuHeight > (viewport.height - _vpBottomMargin)) {
             // menu is near bottom viewport edge, shift upwards
@@ -59,7 +60,7 @@ export function uiEditMenu(context, operations) {
             .style('top', origin[1] + 'px');
 
         var buttons = _menu.selectAll('.edit-menu-item')
-            .data(operations);
+            .data(_operations);
 
         // enter
         var buttonsEnter = buttons.enter()
@@ -110,5 +111,11 @@ export function uiEditMenu(context, operations) {
         return editMenu;
     };
 
+    editMenu.operations = function(val) {
+        if (!arguments.length) return _operations;
+        _operations = val;
+        return editMenu;
+    };
+
     return editMenu;
 }