Fix keybindings ordering and tooltips (#1320)

mapbox · Dec 4, 2024 · 99b4542 · 99b4542
1 parent e09cd74
commit 99b4542
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/src/ui.js b/src/ui.js
@@ -104,11 +104,22 @@ export default function(ctx) {
 
     if (!controls) return controlGroup;
 
+    if (controls[Constants.types.POINT]) {
+      buttonElements[Constants.types.POINT] = createControlButton(Constants.types.POINT, {
+        container: controlGroup,
+        className: Constants.classes.CONTROL_BUTTON_POINT,
+        title: `Marker tool ${ctx.options.keybindings ? '(1)' : ''}`,
+        onActivate: () => ctx.events.changeMode(Constants.modes.DRAW_POINT),
+        onDeactivate: () => ctx.events.trash()
+      });
+    }
+
+
     if (controls[Constants.types.LINE]) {
       buttonElements[Constants.types.LINE] = createControlButton(Constants.types.LINE, {
         container: controlGroup,
         className: Constants.classes.CONTROL_BUTTON_LINE,
-        title: `LineString tool ${ctx.options.keybindings ? '(l)' : ''}`,
+        title: `LineString tool ${ctx.options.keybindings ? '(2)' : ''}`,
         onActivate: () => ctx.events.changeMode(Constants.modes.DRAW_LINE_STRING),
         onDeactivate: () => ctx.events.trash()
       });
@@ -118,22 +129,12 @@ export default function(ctx) {
       buttonElements[Constants.types.POLYGON] = createControlButton(Constants.types.POLYGON, {
         container: controlGroup,
         className: Constants.classes.CONTROL_BUTTON_POLYGON,
-        title: `Polygon tool ${ctx.options.keybindings ? '(p)' : ''}`,
+        title: `Polygon tool ${ctx.options.keybindings ? '(3)' : ''}`,
         onActivate: () => ctx.events.changeMode(Constants.modes.DRAW_POLYGON),
         onDeactivate: () => ctx.events.trash()
       });
     }
 
-    if (controls[Constants.types.POINT]) {
-      buttonElements[Constants.types.POINT] = createControlButton(Constants.types.POINT, {
-        container: controlGroup,
-        className: Constants.classes.CONTROL_BUTTON_POINT,
-        title: `Marker tool ${ctx.options.keybindings ? '(m)' : ''}`,
-        onActivate: () => ctx.events.changeMode(Constants.modes.DRAW_POINT),
-        onDeactivate: () => ctx.events.trash()
-      });
-    }
-
     if (controls.trash) {
       buttonElements.trash = createControlButton('trash', {
         container: controlGroup,

diff --git a/test/ui.test.js b/test/ui.test.js
@@ -171,22 +171,22 @@ test('ui buttons with all options.controls, no attribution control', async (t) =
 
   assert.equal(buttons.length, 4, 'one button added');
 
-  assert.ok(buttons[0].classList.contains('mapbox-gl-draw_line'), 'first button has line class');
+  assert.ok(buttons[0].classList.contains('mapbox-gl-draw_point'), 'first button has point class');
   assert.ok(buttons[0].classList.contains('mapbox-gl-draw_ctrl-draw-btn'), 'first button has control class');
   assert.equal(buttons[0].parentNode, controlGroup, 'first button is in controlGroup');
-  const lineButton = buttons[0];
-
-  assert.ok(buttons[1].classList.contains('mapbox-gl-draw_polygon'), 'second button has polygon class');
+  assert.ok(buttons[1].classList.contains('mapbox-gl-draw_line'), 'second button has line class');
   assert.ok(buttons[1].classList.contains('mapbox-gl-draw_ctrl-draw-btn'), 'second button has control class');
-  assert.equal(buttons[1].parentNode, controlGroup, 'second button is in controlGroup');
-  const polygonButton = buttons[1];
-  assert.ok(buttons[2].classList.contains('mapbox-gl-draw_point'), 'third button has point class');
+  assert.equal(buttons[2].parentNode, controlGroup, 'second button is in controlGroup');
+  assert.ok(buttons[2].classList.contains('mapbox-gl-draw_polygon'), 'third button has polygon class');
   assert.ok(buttons[2].classList.contains('mapbox-gl-draw_ctrl-draw-btn'), 'third button has control class');
-  assert.equal(buttons[2].parentNode, controlGroup, 'third button is in controlGroup');
-  const pointButton = buttons[2];
+  assert.equal(buttons[1].parentNode, controlGroup, 'third button is in controlGroup');
   assert.ok(buttons[3].classList.contains('mapbox-gl-draw_trash'), 'fourth button has trash class');
   assert.ok(buttons[3].classList.contains('mapbox-gl-draw_ctrl-draw-btn'), 'fourth button has control class');
   assert.equal(buttons[3].parentNode, controlGroup, 'fourth button is in controlGroup');
+
+  const pointButton = buttons[0];
+  const lineButton = buttons[1];
+  const polygonButton = buttons[2];
   const trashButton = buttons[3];
 
   t.test('click line button', () => {