Toolbar block position

README.md

@@ -657,14 +657,38 @@ map.pm.addControls({
 
 Reorder the buttons with
 ```js
-map.pm.Toolbar.changeControlOrder(['drawCircle', 'drawRectangle', 'removalMode', 'editMode'])
+map.pm.Toolbar.changeControlOrder(['drawCircle', 'drawRectangle', 'removalMode', 'editMode']);
 ```
 
 Receive the current order with
 ```js
-map.pm.Toolbar.getControlOrder()
+map.pm.Toolbar.getControlOrder();
 ```
 
+**Position**
+
+You can set different positions per block `draw`, `edit`, `options`⭐, `custom`: 
+
+Possible values are `'topleft'`, `'topright'`, `'bottomleft'`, `'bottomright'`
+
+```javascript
+map.pm.addControls({
+  positions: {
+    draw: 'topright',
+    edit: 'topleft',
+  }
+});
+```
+
+```javascript
+map.pm.Toolbar.setBlockPosition('draw','topright');
+```
+
+```javascript
+map.pm.Toolbar.getBlockPositions();
+```
+
+
 **Adding New/Custom Controls**
 
 ```js

cypress/integration/toolbar.spec.js

@@ -259,7 +259,7 @@ describe('Testing the Toolbar', () => {
 
         cy.get(actions[0]).click();
         cy.get(container).should('not.have.class', 'active');
-        cy.window().then(({map, L}) => {
+        cy.window().then(() => {
           map.pm.enableDraw('PolygonCopy');
           map.on('pm:create', (e) => {
             e.layer.on('click', (l) => testlayer = l.target)
@@ -277,7 +277,6 @@ describe('Testing the Toolbar', () => {
 
 
         cy.get(mapSelector).click(390, 140).then(() => {
-          console.log(testlayer);
           expect(testlayer.options.color).to.equal("red");
         })
       })
@@ -303,9 +302,52 @@ describe('Testing the Toolbar', () => {
       map.pm.addControls({
         oneBlock: true
       });
-      cy.get('.leaflet-pm-toolbar.leaflet-pm-draw').then((container) => {
+      cy.get('.leaflet-pm-toolbar.leaflet-pm-topleft').then((container) => {
         expect(container[0].children.length).to.equal(10);
       })
     });
   });
+
+  it('Different block positions', () => {
+    cy.window().then(({map}) => {
+      map.pm.addControls({
+        positions: {
+          draw: 'topright',
+          edit: 'topleft'
+        }
+      });
+      cy.get('.leaflet-pm-toolbar.leaflet-pm-edit')
+        .parent('.leaflet-top.leaflet-left')
+        .should('exist');
+      cy.get('.leaflet-pm-toolbar.leaflet-pm-draw')
+        .parent('.leaflet-top.leaflet-right')
+        .should('exist');
+    });
+  });
+
+  it('Different block positions - One Block', () => {
+    cy.window().then(({map}) => {
+      map.pm.addControls({
+        oneBlock: true,
+        positions: {
+          draw: 'topright',
+          edit: 'topleft',
+          custom: 'topleft',
+        }
+      });
+
+      map.pm.Toolbar.copyDrawControl("Polygon", {
+        name: "PolygonCopy",
+        block: "custom",
+        className: "leaflet-pm-icon-polygon",
+        title: "Display text on hover button",
+      });
+      cy.get('.leaflet-pm-toolbar.leaflet-pm-topright').then((container) => {
+        expect(container[0].children.length).to.equal(6);
+      });
+      cy.get('.leaflet-pm-toolbar.leaflet-pm-topleft').then((container) => {
+        expect(container[0].children.length).to.equal(5);
+      });
+    });
+  });
 });

src/js/Toolbar/L.Controls.js

@@ -22,7 +22,7 @@ const PMButton = L.Control.extend({
         this._container = this._map.pm.Toolbar.drawContainer;
       }
     } else {
-      this._container = this._map.pm.Toolbar.drawContainer;
+      this._container = this._map.pm.Toolbar._createContainer(this.options.position);
     }
     this.buttonsDomNode = this._makeButton(this._button);
     this._container.appendChild(this.buttonsDomNode);

src/js/Toolbar/L.PM.Toolbar.js

@@ -23,6 +23,12 @@ const Toolbar = L.Class.extend({
     customControls: true,
     oneBlock: false,
     position: 'topleft',
+    positions: {
+      draw: '',
+      edit: '',
+      options: '',
+      custom: '',
+    }
   },
   customButtons: [],
   initialize(map) {
@@ -62,6 +68,16 @@ const Toolbar = L.Class.extend({
 
     this._defineButtons();
   },
+  _createContainer(name){
+    const container = `${name}Container`;
+    if(!this[container]) {
+      this[container] = L.DomUtil.create(
+        'div',
+        `leaflet-pm-toolbar leaflet-pm-${name} leaflet-bar leaflet-control`
+      );
+    }
+    return this[container];
+  },
   getButtons() {
     return this.buttons;
   },
@@ -378,14 +394,31 @@ const Toolbar = L.Class.extend({
     if (this.options.customControls === false) {
       ignoreBtns = ignoreBtns.concat(Object.keys(buttons).filter(btn => buttons[btn]._button.tool === 'custom'));
     }
+
     for (const btn in buttons) {
       if (this.options[btn] && ignoreBtns.indexOf(btn) === -1) {
         // if options say the button should be visible, add it to the map
-        buttons[btn].setPosition(this.options.position);
+        let block = buttons[btn]._button.tool;
+        if(!block) {
+          // undefined is the draw block
+          block = 'draw';
+        }
+        buttons[btn].setPosition(this._getBtnPosition(block));
         buttons[btn].addTo(this.map);
       }
     }
   },
+  _getBtnPosition(block){
+    return this.options.positions && this.options.positions[block] ? this.options.positions[block] : this.options.position;
+  },
+  setBlockPosition(block,position){
+    this.options.positions[block] = position;
+    this._showHideButtons();
+    this.changeControlOrder();
+  },
+  getBlockPositions(){
+    return this.options.positions;
+  },
   copyDrawControl(copyInstance, options) {
 
     if (!options) {