diff --git a/cypress/e2e/toolbar.cy.js b/cypress/e2e/toolbar.cy.js index 047da511..9a907034 100644 --- a/cypress/e2e/toolbar.cy.js +++ b/cypress/e2e/toolbar.cy.js @@ -525,4 +525,46 @@ describe('Testing the Toolbar', () => { done(); }); }); + + it('Deletes custom control and adds a new one with the same name', () => { + const clickSpy = cy.spy(); + const clickSpyNew = cy.spy(); + + cy.window().then(({ map }) => { + map.pm.Toolbar.createCustomControl({ + name: 'alertBox', + onClick: clickSpy, + toggle: false, + block: 'custom', + }); + + cy.toolbarButtonContainer('alertBox', map).then((container) => { + container[0].children[0].click(); // button + }); + }); + + cy.window().then(({ map }) => { + // expect needs to be in the this block, otherwise it will be executed before the click event + expect(clickSpy.callCount).to.be.eq(1); + + map.pm.Toolbar.deleteControl('alertBox'); + + map.pm.Toolbar.createCustomControl({ + name: 'alertBox', + onClick: clickSpyNew, + toggle: false, + block: 'custom', + }); + + cy.toolbarButtonContainer('alertBox', map).then((container) => { + container[0].children[0].click(); // button + }); + }); + + cy.window().then(() => { + // expect needs to be in the this block, otherwise it will be executed before the click event + expect(clickSpy.callCount).to.be.eq(1); + expect(clickSpyNew.callCount).to.be.eq(1); + }); + }); }); diff --git a/leaflet-geoman.d.ts b/leaflet-geoman.d.ts index 554978ca..d43950dc 100644 --- a/leaflet-geoman.d.ts +++ b/leaflet-geoman.d.ts @@ -1087,6 +1087,9 @@ declare module 'leaflet' { /** Disable button by control name */ setButtonDisabled(name: TOOLBAR_CONTROL_ORDER, state: boolean): void; + + /** Deletes and removes a Control from the Toolbar */ + deleteControl(name: string): void; } type KEYBOARD_EVENT_TYPE = 'current' | 'keydown' | 'keyup'; diff --git a/src/js/Toolbar/L.PM.Toolbar.js b/src/js/Toolbar/L.PM.Toolbar.js index 24dfad32..ca45006b 100644 --- a/src/js/Toolbar/L.PM.Toolbar.js +++ b/src/js/Toolbar/L.PM.Toolbar.js @@ -151,6 +151,13 @@ const Toolbar = L.Class.extend({ this.isVisible = false; }, + deleteControl(name) { + const btnName = this._btnNameMapping(name); + if (this.buttons[btnName]) { + this.buttons[btnName].remove(); + delete this.buttons[btnName]; + } + }, toggleControls(options = this.options) { if (this.isVisible) { this.removeControls();