Leaflet-Geoman now consistently uses crosshair as the cursor while drawing (#1410) (patch)

* Add CSS Cursor class geoman-draw-cursor

* Add default draw cursor to Marker and CircleMarker

Author: Falke-Design

cypress/integration/circle.spec.js

@@ -7,8 +7,12 @@ describe('Draw Circle', () => {
       .closest('.button-container')
       .should('have.class', 'active');
 
+    cy.get(mapSelector).should('have.class', 'geoman-draw-cursor');
+
     cy.get(mapSelector).click(200, 200).click(250, 250);
 
+    cy.get(mapSelector).should('not.have.class', 'geoman-draw-cursor');
+
     cy.toolbarButton('edit')
       .click()
       .closest('.button-container')

cypress/integration/circlemarker.spec.js

@@ -124,8 +124,12 @@ describe('Draw Circle Marker', () => {
       .closest('.button-container')
       .should('have.class', 'active');
 
+    cy.get(mapSelector).should('have.class', 'geoman-draw-cursor');
+
     cy.get(mapSelector).click(200, 200).click(250, 250);
 
+    cy.get(mapSelector).should('not.have.class', 'geoman-draw-cursor');
+
     cy.hasCircleLayers(1);
 
     cy.toolbarButton('edit')

cypress/integration/line.spec.js

@@ -117,6 +117,8 @@ describe('Draw & Edit Line', () => {
       .closest('.button-container')
       .should('have.class', 'active');
 
+    cy.get(mapSelector).should('have.class', 'geoman-draw-cursor');
+
     // draw a line
     cy.get(mapSelector)
       .click(150, 250)
@@ -125,6 +127,8 @@ describe('Draw & Edit Line', () => {
       .click(250, 250)
       .click(250, 250);
 
+    cy.get(mapSelector).should('not.have.class', 'geoman-draw-cursor');
+
     // button should be disabled after successful draw
     cy.toolbarButton('polyline')
       .closest('.button-container')

cypress/integration/polygon.spec.js

@@ -4,13 +4,17 @@ describe('Draw & Edit Poly', () => {
   it('drages shared vertices when pinned', () => {
     cy.toolbarButton('polygon').click();
 
+    cy.get(mapSelector).should('have.class', 'geoman-draw-cursor');
+
     cy.get(mapSelector)
       .click(120, 150)
       .click(120, 100)
       .click(300, 100)
       .click(300, 200)
       .click(120, 150);
 
+    cy.get(mapSelector).should('not.have.class', 'geoman-draw-cursor');
+
     cy.toolbarButton('marker').click();
 
     cy.get(mapSelector).click(300, 100);

cypress/integration/rectangle.spec.js

@@ -7,8 +7,12 @@ describe('Draw Rectangle', () => {
       .closest('.button-container')
       .should('have.class', 'active');
 
+    cy.get(mapSelector).should('have.class', 'geoman-draw-cursor');
+
     cy.get(mapSelector).click(200, 200).click(400, 350);
 
+    cy.get(mapSelector).should('not.have.class', 'geoman-draw-cursor');
+
     cy.toolbarButton('edit')
       .click()
       .closest('.button-container')

cypress/integration/text.spec.js

@@ -63,8 +63,12 @@ describe('Text Layer', () => {
         .closest('.button-container')
         .should('have.class', 'active');
 
+      cy.get(mapSelector).should('have.class', 'geoman-draw-cursor');
+
       cy.get(mapSelector).click(90, 250);
 
+      cy.get(mapSelector).should('not.have.class', 'geoman-draw-cursor');
+
       let textArea;
       cy.window().then(({ map }) => {
         expect(1).to.eq(map.pm.getGeomanDrawLayers().length);

src/css/layers.css

@@ -32,6 +32,10 @@
   opacity: 1 !important;
 }
 
+.geoman-draw-cursor {
+  cursor: crosshair;
+}
+
 .leaflet-pm-invalid {
   stroke: red;
   transition: fill ease 0s, stroke ease 0s;

src/js/Draw/L.PM.Draw.Circle.js

@@ -72,7 +72,7 @@ Draw.Circle = Draw.extend({
     this._layerGroup.addLayer(this._hintline);
 
     // change map cursor
-    this._map._container.style.cursor = 'crosshair';
+    this._map.getContainer().classList.add('geoman-draw-cursor');
 
     // create a polygon-point on click
     this._map.on('click', this._placeCenterMarker, this);
@@ -102,7 +102,7 @@ Draw.Circle = Draw.extend({
     this._enabled = false;
 
     // reset cursor
-    this._map._container.style.cursor = '';
+    this._map.getContainer().classList.remove('geoman-draw-cursor');
 
     // unbind listeners
     this._map.off('click', this._finishShape, this);

src/js/Draw/L.PM.Draw.CircleMarker.js

@@ -20,6 +20,9 @@ Draw.CircleMarker = Draw.Marker.extend({
     // toggle the draw button of the Toolbar in case drawing mode got enabled without the button
     this._map.pm.Toolbar.toggleButton(this.toolbarButtonName, true);
 
+    // change map cursor
+    this._map.getContainer().classList.add('geoman-draw-cursor');
+
     // Draw the CircleMarker like a Circle
     if (this.options.editable) {
       // we need to set the radius to 0 without overwriting the CircleMarker style
@@ -80,8 +83,6 @@ Draw.CircleMarker = Draw.Marker.extend({
       this._layerGroup.addLayer(this._hintline);
       // create a polygon-point on click
       this._map.on('click', this._placeCenterMarker, this);
-      // change map cursor
-      this._map._container.style.cursor = 'crosshair';
     } else {
       // create a marker on click on the map
       this._map.on('click', this._createMarker, this);
@@ -137,10 +138,11 @@ Draw.CircleMarker = Draw.Marker.extend({
     // change enabled state
     this._enabled = false;
 
+    // reset cursor
+    this._map.getContainer().classList.remove('geoman-draw-cursor');
+
     // disable when drawing like a Circle
     if (this.options.editable) {
-      // reset cursor
-      this._map._container.style.cursor = '';
 
       // unbind listeners
       this._map.off('click', this._finishShape, this);

src/js/Draw/L.PM.Draw.Line.js

@@ -67,7 +67,7 @@ Draw.Line = Draw.extend({
     }
 
     // change map cursor
-    this._map._container.style.cursor = 'crosshair';
+    this._map.getContainer().classList.add('geoman-draw-cursor');
 
     // create a polygon-point on click
     this._map.on('click', this._createVertex, this);
@@ -115,7 +115,7 @@ Draw.Line = Draw.extend({
     this._enabled = false;
 
     // reset cursor
-    this._map._container.style.cursor = '';
+    this._map.getContainer().classList.remove('geoman-draw-cursor');
 
     // unbind listeners
     this._map.off('click', this._createVertex, this);

src/js/Draw/L.PM.Draw.Marker.js

@@ -15,6 +15,9 @@ Draw.Marker = Draw.extend({
     // change enabled state
     this._enabled = true;
 
+    // change map cursor
+    this._map.getContainer().classList.add('geoman-draw-cursor');
+
     // create a marker on click on the map
     this._map.on('click', this._createMarker, this);
 
@@ -71,6 +74,9 @@ Draw.Marker = Draw.extend({
     // change enabled state
     this._enabled = false;
 
+    // reset cursor
+    this._map.getContainer().classList.remove('geoman-draw-cursor');
+
     // undbind click event, don't create a marker on click anymore
     this._map.off('click', this._createMarker, this);
 

src/js/Draw/L.PM.Draw.Rectangle.js

@@ -90,7 +90,7 @@ Draw.Rectangle = Draw.extend({
     }
 
     // change map cursor
-    this._map._container.style.cursor = 'crosshair';
+    this._map.getContainer().classList.add('geoman-draw-cursor');
 
     // create a polygon-point on click
     this._map.on('click', this._placeStartingMarkers, this);
@@ -120,7 +120,7 @@ Draw.Rectangle = Draw.extend({
     this._enabled = false;
 
     // reset cursor
-    this._map._container.style.cursor = '';
+    this._map.getContainer().classList.remove('geoman-draw-cursor');
 
     // unbind listeners
     this._map.off('click', this._finishShape, this);

src/js/Draw/L.PM.Draw.Text.js

@@ -55,6 +55,8 @@ Draw.Text = Draw.extend({
     // sync hint marker with mouse cursor
     this._map.on('mousemove', this._syncHintMarker, this);
 
+    this._map.getContainer().classList.add('geoman-draw-cursor');
+
     // fire drawstart event
     this._fireDrawStart();
     this._setGlobalDrawMode();
@@ -74,6 +76,8 @@ Draw.Text = Draw.extend({
     // remove hint marker
     this._hintMarker.remove();
 
+    this._map.getContainer().classList.remove('geoman-draw-cursor');
+
     // remove event listener to sync hint marker
     this._map.off('mousemove', this._syncHintMarker, this);