diff --git a/src/ui.js b/src/ui.js index ff9edb69..82b287a8 100644 --- 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 index 004713e6..49fb57ca 100644 --- 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', () => {