From 0cf2e055bdbd9e4004fdfede9744e6f5b310673e Mon Sep 17 00:00:00 2001
From: Alexander <113525996+alex-fko@users.noreply.github.com>
Date: Mon, 17 Oct 2022 18:27:15 +0300
Subject: [PATCH] #8536 Resolving measure plugin draw conflicts (#8678) (#8704)

(cherry picked from commit e4bbfe71b3e03a144460829d45da6da421e01790)
---
 .../map/leaflet/MeasurementSupport.jsx        | 11 +++++
 .../map/openlayers/MeasurementSupport.jsx     | 43 +++++++++++++------
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/web/client/components/map/leaflet/MeasurementSupport.jsx b/web/client/components/map/leaflet/MeasurementSupport.jsx
index fd31df5ec1..3e73116cea 100644
--- a/web/client/components/map/leaflet/MeasurementSupport.jsx
+++ b/web/client/components/map/leaflet/MeasurementSupport.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import assign from 'object-assign';
 import L from 'leaflet';
 import {
+    isNil,
     slice
 } from 'lodash';
 import {
@@ -197,6 +198,11 @@ class MeasurementSupport extends React.Component {
         feet: false
     };
 
+    UNSAFE_componentWillMount() {
+        if (this.props.measurement?.geomType && (this.props.measurement?.lineMeasureEnabled || this.props.measurement?.areaMeasureEnabled || this.props.measurement?.bearingMeasureEnabled) && isNil(this.drawControl) && this.props.enabled) {
+            this.addDrawInteraction(this.props);
+        }
+    }
 
     UNSAFE_componentWillReceiveProps(newProps) {
         if ((newProps && newProps.uom && newProps.uom.length && newProps.uom.length.unit) !== (this.props && this.props.uom && this.props.uom.length && this.props.uom.length.unit) && this.drawControl) {
@@ -220,6 +226,11 @@ class MeasurementSupport extends React.Component {
             this.removeDrawInteraction();
         }
     }
+
+    componentWillUnmount() {
+        this.removeDrawInteraction();
+    }
+
     onDrawStart = () => {
         this.props.map.off('click', this.restartDrawing, this);
         this.removeArcLayer();
diff --git a/web/client/components/map/openlayers/MeasurementSupport.jsx b/web/client/components/map/openlayers/MeasurementSupport.jsx
index d594c02855..4d09e4a1f2 100644
--- a/web/client/components/map/openlayers/MeasurementSupport.jsx
+++ b/web/client/components/map/openlayers/MeasurementSupport.jsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {round, get, isEqual, dropRight, last} from 'lodash';
+import {round, get, isEqual, dropRight, last, isNil} from 'lodash';
 
 import {
     reprojectGeoJson,
@@ -83,6 +83,12 @@ export default class MeasurementSupport extends React.Component {
         updateOnMouseMove: false
     };
 
+    UNSAFE_componentWillMount() {
+        if (this.props.measurement.geomType && (this.props.measurement.lineMeasureEnabled || this.props.measurement.areaMeasureEnabled || this.props.measurement.bearingMeasureEnabled) && isNil(this.drawControl) && this.props.enabled) {
+            this.addDrawInteraction(this.props);
+        }
+    }
+
     /**
      * we assume that only valid features are passed to the draw tools
      */
@@ -112,24 +118,13 @@ export default class MeasurementSupport extends React.Component {
             this.addDrawInteraction(newProps);
         }
         if (!newProps.measurement.geomType) {
-            this.removeDrawInteraction();
-            this.removeMeasureTooltips();
-            this.removeSegmentLengthOverlays();
-            this.textLabels = [];
-            this.segmentLengths = [];
-            this.props.map.removeLayer(this.measureLayer);
-            this.vector = null;
-            this.measureLayer = null;
+            this.cleanupMeasures(newProps);
             if (newProps.measurement.features && newProps.measurement.features.length > 0) {
                 this.props.changeGeometry([]);
             }
             if (newProps.measurement.textLabels && newProps.measurement.textLabels.length > 0) {
                 this.props.setTextLabels([]);
             }
-            if (this.source) {
-                this.source.clear();
-                this.source = null;
-            }
         }
         let oldFt = this.props.measurement.features;
         let newFt = newProps.measurement.features;
@@ -144,6 +139,9 @@ export default class MeasurementSupport extends React.Component {
         }
     }
 
+    componentWillUnmount() {
+        this.cleanupMeasures();
+    }
 
     getLength = (coords, props) => {
         if (props.measurement.geomType === 'Bearing' && coords.length > 1) {
@@ -154,6 +152,7 @@ export default class MeasurementSupport extends React.Component {
         return calculateDistance(reprojectedCoords, props.measurement.lengthFormula);
     }
 
+
     getArea = (polygon) => {
         return this.calculateGeodesicArea(polygon.getLinearRing(0).getCoordinates());
     }
@@ -162,6 +161,24 @@ export default class MeasurementSupport extends React.Component {
         return null;
     }
 
+    /**
+     * Remove draw interaction and reset measurement data
+     */
+    cleanupMeasures = () => {
+        this.removeDrawInteraction();
+        this.removeMeasureTooltips();
+        this.removeSegmentLengthOverlays();
+        this.textLabels = [];
+        this.segmentLengths = [];
+        this.props.map.removeLayer(this.measureLayer);
+        this.vector = null;
+        this.measureLayer = null;
+        if (this.source) {
+            this.source.clear();
+            this.source = null;
+        }
+    };
+
     /**
      * Update the draw interaction when feature in edit
      */