diff --git a/cypress/integration/circle.spec.js b/cypress/integration/circle.spec.js index 3a6f5c77..fff84017 100644 --- a/cypress/integration/circle.spec.js +++ b/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') diff --git a/cypress/integration/circlemarker.spec.js b/cypress/integration/circlemarker.spec.js index 88470dde..d8e99abb 100644 --- a/cypress/integration/circlemarker.spec.js +++ b/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') diff --git a/cypress/integration/line.spec.js b/cypress/integration/line.spec.js index a4cd7d35..345ac22c 100644 --- a/cypress/integration/line.spec.js +++ b/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') diff --git a/cypress/integration/polygon.spec.js b/cypress/integration/polygon.spec.js index 69a98e15..6b458d24 100644 --- a/cypress/integration/polygon.spec.js +++ b/cypress/integration/polygon.spec.js @@ -4,6 +4,8 @@ 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) @@ -11,6 +13,8 @@ describe('Draw & Edit Poly', () => { .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); diff --git a/cypress/integration/rectangle.spec.js b/cypress/integration/rectangle.spec.js index 6d2c3f1b..f2f3beab 100644 --- a/cypress/integration/rectangle.spec.js +++ b/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') diff --git a/cypress/integration/text.spec.js b/cypress/integration/text.spec.js index d12f9a92..16525499 100644 --- a/cypress/integration/text.spec.js +++ b/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); diff --git a/src/css/layers.css b/src/css/layers.css index a4763d49..517ac978 100644 --- a/src/css/layers.css +++ b/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; diff --git a/src/js/Draw/L.PM.Draw.Circle.js b/src/js/Draw/L.PM.Draw.Circle.js index 2df71226..59feadc5 100644 --- a/src/js/Draw/L.PM.Draw.Circle.js +++ b/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); diff --git a/src/js/Draw/L.PM.Draw.CircleMarker.js b/src/js/Draw/L.PM.Draw.CircleMarker.js index 0d9529c8..ff1bb99e 100644 --- a/src/js/Draw/L.PM.Draw.CircleMarker.js +++ b/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); diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 89e1a45d..72e86a40 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/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); diff --git a/src/js/Draw/L.PM.Draw.Marker.js b/src/js/Draw/L.PM.Draw.Marker.js index 786287a6..8c03dde2 100644 --- a/src/js/Draw/L.PM.Draw.Marker.js +++ b/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); diff --git a/src/js/Draw/L.PM.Draw.Rectangle.js b/src/js/Draw/L.PM.Draw.Rectangle.js index e85df516..5a8ef4a9 100644 --- a/src/js/Draw/L.PM.Draw.Rectangle.js +++ b/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); diff --git a/src/js/Draw/L.PM.Draw.Text.js b/src/js/Draw/L.PM.Draw.Text.js index de8a4d3f..977eea48 100644 --- a/src/js/Draw/L.PM.Draw.Text.js +++ b/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);