Show HintMarker at the last position if continueDrawing is enabled (#…

…1536) (minor)

* Show HintMarkers at the last position (continueDrawing)

* Add tests

cypress/e2e/circle.cy.js

@@ -115,6 +115,12 @@ describe('Draw Circle', () => {
     // draw with continueDrawing: true the second circle
     cy.get(mapSelector).click(300, 200).click(350, 250);
 
+    cy.window().then(({ map }) => {
+      const latlng = map.pm.Draw.Circle._hintMarker.getLatLng();
+      const pxLatLng = map.containerPointToLatLng([350, 250]);
+      expect(pxLatLng).to.deep.equal(latlng);
+    });
+
     // additional click because cypress lose the focus on the window ... wtf ...
     cy.get(mapSelector).click();
     cy.toolbarButton('edit').click();

cypress/e2e/circlemarker.cy.js

@@ -162,6 +162,12 @@ describe('Draw Circle Marker', () => {
     // draw with continueDrawing: ture the second circle
     cy.get(mapSelector).click(300, 200).click(350, 250);
 
+    cy.window().then(({ map }) => {
+      const latlng = map.pm.Draw.CircleMarker._hintMarker.getLatLng();
+      const pxLatLng = map.containerPointToLatLng([350, 250]);
+      expect(pxLatLng).to.deep.equal(latlng);
+    });
+
     // additional click because cypress lose the focus on the window ... wtf ...
     cy.get(mapSelector).click();
 

cypress/e2e/line.cy.js

@@ -207,6 +207,12 @@ describe('Draw & Edit Line', () => {
 
     cy.get(mapSelector).click(200, 200).click(250, 250).click(250, 250);
 
+    cy.window().then(({ map }) => {
+      const latlng = map.pm.Draw.Line._hintMarker.getLatLng();
+      const pxLatLng = map.containerPointToLatLng([250, 250]);
+      expect(pxLatLng).to.deep.equal(latlng);
+    });
+
     cy.toolbarButton('edit').click();
     cy.hasVertexMarkers(5);
   });

cypress/e2e/polygon.cy.js

@@ -840,6 +840,12 @@ describe('Draw & Edit Poly', () => {
       .click(250, 300)
       .click(230, 230);
 
+    cy.window().then(({ map }) => {
+      const latlng = map.pm.Draw.Polygon._hintMarker.getLatLng();
+      const pxLatLng = map.containerPointToLatLng([230, 230]);
+      expect(pxLatLng).to.deep.equal(latlng);
+    });
+
     cy.toolbarButton('edit').click();
     cy.hasVertexMarkers(6);
   });

cypress/e2e/rectangle.cy.js

@@ -158,6 +158,12 @@ describe('Draw Rectangle', () => {
 
     cy.get(mapSelector).click(230, 230).click(350, 350);
 
+    cy.window().then(({ map }) => {
+      const latlng = map.pm.Draw.Rectangle._hintMarker.getLatLng();
+      const pxLatLng = map.containerPointToLatLng([350, 350]);
+      expect(pxLatLng).to.deep.equal(latlng);
+    });
+
     cy.toolbarButton('edit').click();
     cy.hasVertexMarkers(8);
   });

cypress/e2e/text.cy.js

@@ -147,6 +147,20 @@ describe('Text Layer', () => {
         const textLayer = map.pm.getGeomanDrawLayers()[1];
         textArea = textLayer.pm.getElement();
         cy.get(textArea).type('Geoman!');
+
+        const textMap = map.pm.Draw.Text._hintMarker._map;
+        expect(textMap).to.eq(null);
+      });
+
+      cy.get(mapSelector)
+        .trigger('mousemove', 200, 150, { which: 1 });
+
+      cy.window().then(({ map }) => {
+        const textMap = map.pm.Draw.Text._hintMarker._map;
+        expect(textMap).to.eq(map);
+        const latlng = map.pm.Draw.Text._hintMarker.getLatLng();
+        const pxLatLng = map.containerPointToLatLng([200, 150]);
+        expect(pxLatLng).to.deep.equal(latlng);
       });
 
       cy.get(mapSelector).click(290, 150);

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

@@ -408,10 +408,13 @@ Draw.CircleMarker = Draw.extend({
     // fire the pm:create event and pass shape and layer
     this._fireCreate(circleLayer);
 
+    const hintMarkerLatLng = this._hintMarker.getLatLng();
+
     // disable drawing
     this.disable();
     if (this.options.continueDrawing) {
       this.enable();
+      this._hintMarker.setLatLng(hintMarkerLatLng);
     }
   },
   _getNewDestinationOfHintMarker() {

src/js/Draw/L.PM.Draw.Cut.js

@@ -69,10 +69,13 @@ Draw.Cut = Draw.Polygon.extend({
     });
     this._editedLayers = [];
 
+    const hintMarkerLatLng = this._hintMarker.getLatLng();
+
     // disable drawing
     this.disable();
     if (this.options.continueDrawing) {
       this.enable();
+      this._hintMarker.setLatLng(hintMarkerLatLng);
     }
   },
   cut(layer) {

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

@@ -377,10 +377,13 @@ Draw.Line = Draw.extend({
       this._cleanupSnapping();
     }
 
+    const hintMarkerLatLng = this._hintMarker.getLatLng();
+
     // disable drawing
     this.disable();
     if (this.options.continueDrawing) {
       this.enable();
+      this._hintMarker.setLatLng(hintMarkerLatLng);
     }
   },
   _createMarker(latlng) {

src/js/Draw/L.PM.Draw.Polygon.js

@@ -101,10 +101,13 @@ Draw.Polygon = Draw.Line.extend({
     this._otherSnapLayers.splice(this._tempSnapLayerIndex, 1);
     delete this._tempSnapLayerIndex;
 
+    const hintMarkerLatLng = this._hintMarker.getLatLng();
+
     // disable drawing
     this.disable();
     if (this.options.continueDrawing) {
       this.enable();
+      this._hintMarker.setLatLng(hintMarkerLatLng);
     }
   },
 });

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

@@ -304,10 +304,13 @@ Draw.Rectangle = Draw.extend({
     // fire the pm:create event and pass shape and layer
     this._fireCreate(rectangleLayer);
 
+    const hintMarkerLatLng = this._hintMarker.getLatLng();
+
     // disable drawing
     this.disable();
     if (this.options.continueDrawing) {
       this.enable();
+      this._hintMarker.setLatLng(hintMarkerLatLng);
     }
   },
   setStyle() {

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

@@ -81,6 +81,8 @@ Draw.Text = Draw.extend({
     // remove event listener to sync hint marker
     this._map.off('mousemove', this._syncHintMarker, this);
 
+    this._map.off('mousemove', this._showHintMarker, this);
+
     // toggle the draw button of the Toolbar in case drawing mode got disabled without the button
     this._map.pm.Toolbar.toggleButton(this.toolbarButtonName, false);
 
@@ -181,10 +183,16 @@ Draw.Text = Draw.extend({
     // disable drawing
     this.disable();
     if (this.options.continueDrawing) {
-      this.enable();
+      // the user is still typing some text, so we re-enable the layer after moving the mouse
+      this._map.once('mousemove', this._showHintMarkerAfterMoving, this);
     }
   },
 
+  _showHintMarkerAfterMoving(e) {
+    this.enable();
+    this._hintMarker.setLatLng(e.latlng);
+  },
+
   _createTextArea() {
     const textArea = document.createElement('textarea');
     textArea.readOnly = true;