Add pm:intersect event to Draw mode and refactor old intersection code (#1368)

Co-authored-by: Sumit Kumar <[email protected]>

Author: Falke-Design

cypress/integration/polygon.spec.js

@@ -252,17 +252,22 @@ describe('Draw & Edit Poly', () => {
   });
 
   it('prevents self intersections', () => {
+    let intersectEventCalled = false;
     cy.window().then(({ map }) => {
       map.pm.enableDraw('Polygon', {
         allowSelfIntersection: false,
       });
 
-      Cypress.$(map).on('pm:create', ({ originalEvent: event }) => {
+      map.on('pm:create', (event) => {
         const poly = event.layer;
         poly.pm.enable({
           allowSelfIntersection: false,
         });
       });
+
+      map.on('pm:intersect', () => {
+        intersectEventCalled = true;
+      });
     });
 
     cy.get(mapSelector)
@@ -276,6 +281,10 @@ describe('Draw & Edit Poly', () => {
     cy.toolbarButton('edit').click();
 
     cy.hasVertexMarkers(4);
+
+    cy.window().then(() => {
+      expect(intersectEventCalled).to.eql(true);
+    });
   });
 
   it('doesnt allow duplicate points in polygon', () => {

src/css/layers.css

@@ -36,11 +36,6 @@
   cursor: crosshair;
 }
 
-.leaflet-pm-invalid {
-  stroke: red;
-  transition: fill ease 0s, stroke ease 0s;
-}
-
 .rect-style-marker,
 .rect-start-marker {
   opacity: 0;

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

@@ -100,6 +100,9 @@ Draw.Line = Draw.extend({
     // TODO: think about moving this somewhere else?
     this._otherSnapLayers = [];
 
+    // make sure intersection is not set while start drawing
+    this.isRed = false;
+
     // fire drawstart event
     this._fireDrawStart();
     this._setGlobalDrawMode();
@@ -216,10 +219,16 @@ Draw.Line = Draw.extend({
 
     // change the style based on self intersection
     if (this._doesSelfIntersect) {
-      this._hintline.setStyle({
-        color: '#f00000ff',
-      });
+      if (!this.isRed) {
+        this.isRed = true;
+        this._hintline.setStyle({
+          color: '#f00000ff',
+        });
+        // fire intersect event
+        this._fireIntersect(selfIntersection, this._map, 'Draw');
+      }
     } else if (!this._hintline.isEmpty()) {
+      this.isRed = false;
       this._hintline.setStyle(this.options.hintlineStyle);
     }
   },

src/js/Edit/L.PM.Edit.Line.js

@@ -106,11 +106,6 @@ Edit.Line = Edit.extend({
       : this._layer._renderer._container;
     L.DomUtil.removeClass(el, 'leaflet-pm-draggable');
 
-    // remove invalid class if layer has self intersection
-    if (!this._map.hasLayer(this._layer) || this.hasSelfIntersection()) {
-      L.DomUtil.removeClass(el, 'leaflet-pm-invalid');
-    }
-
     if (this._layerEdited) {
       this._fireUpdate();
     }
@@ -355,9 +350,9 @@ Edit.Line = Edit.extend({
 
   _handleSelfIntersectionOnVertexRemoval() {
     // check for selfintersection again (mainly to reset the style)
-    this._handleLayerStyle(true);
+    const selfIntersection = this._handleLayerStyle(true);
 
-    if (this.hasSelfIntersection()) {
+    if (selfIntersection) {
       // reset coordinates
       this._layer.setLatLngs(this._coordsBeforeEdit);
       this._coordsBeforeEdit = null;
@@ -370,7 +365,16 @@ Edit.Line = Edit.extend({
   _handleLayerStyle(flash) {
     const layer = this._layer;
 
-    if (this.hasSelfIntersection()) {
+    let selfIntersection;
+    let intersection;
+    if (this.options.allowSelfIntersection) {
+      selfIntersection = false;
+    } else {
+      intersection = kinks(this._layer.toGeoJSON(15));
+      selfIntersection = intersection.features.length > 0;
+    }
+
+    if (selfIntersection) {
       if (
         !this.options.allowSelfIntersection &&
         this.options.allowSelfIntersectionEdit
@@ -379,7 +383,7 @@ Edit.Line = Edit.extend({
       }
 
       if (this.isRed) {
-        return;
+        return selfIntersection;
       }
 
       // if it does self-intersect, mark or flash it red
@@ -390,9 +394,8 @@ Edit.Line = Edit.extend({
         this.isRed = true;
       }
 
-      // TODO: call kinks only once (hasSelfIntersection)
       // fire intersect event
-      this._fireIntersect(kinks(this._layer.toGeoJSON(15)));
+      this._fireIntersect(intersection);
     } else {
       // if not, reset the style to the default color
       layer.setStyle({ color: this.cachedColor });
@@ -404,6 +407,7 @@ Edit.Line = Edit.extend({
         this._updateDisabledMarkerStyle(this._markers, false);
       }
     }
+    return selfIntersection;
   },
   _flashLayer() {
     if (!this.cachedColor) {

src/js/Mixins/Events.js

@@ -314,9 +314,14 @@ const EventMixin = {
     );
   },
   // Fired when a Line / Polygon has self intersection
-  _fireIntersect(intersection, source = 'Edit', customPayload = {}) {
+  _fireIntersect(
+    intersection,
+    fireLayer = this._layer,
+    source = 'Edit',
+    customPayload = {}
+  ) {
     this.__fire(
-      this._layer,
+      fireLayer,
       'pm:intersect',
       {
         layer: this._layer,