거리측정 기타 기능 유효성 추가 및 수정

src/containers/flight/OperationApprovalsContainer.js

@@ -82,8 +82,8 @@ export default function OperationApprovalsContainer({ mode }) {
   const [dataBlocks, setDataBlocks] = useState([]);
 
   // 거리측정
-  const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(true);
+  const [isDistanceRevert, setIsDistanceRevert] = useState(true);
-  const [isResetDisabled, isSetResetDisabled] = useState(true);
+  const [isResetDisabled, setIsResetDisabled] = useState(true);
   const totalDistanceRef = useRef(null);
   const totalAreaRef = useRef(null);
   const mouseCursorRef = useRef(null);
@@ -453,7 +453,7 @@ export default function OperationApprovalsContainer({ mode }) {
   const handlerDrawTypeChange = (e, val) => {
     drawObj.deleteAll();
     distanceMarkers.map(i => i.remove());
-    isSetResetDisabled(true);
+    setIsResetDisabled(true);
     distanceBoxRef.current.style.display = 'block';
     totalDistanceRef.current.innerText = '';
     totalAreaRef.current.innerText = '';
@@ -467,6 +467,7 @@ export default function OperationApprovalsContainer({ mode }) {
     handlerDrawEvents(
       mapInstance,
       handlerDrawPopup,
+      handlerDrawEnd,
       {
         totalDistanceRef,
         mouseCursorRef,
@@ -477,7 +478,6 @@ export default function OperationApprovalsContainer({ mode }) {
   };
 
   const handlerMapTypeChange = val => {
-    // dispatch(clientChangeDrawType(''));
     handlerDistanceClose();
     setMapType(val);
   };
@@ -495,10 +495,26 @@ export default function OperationApprovalsContainer({ mode }) {
   const handlerDrawReset = () => {
     drawObj.deleteAll();
     distanceMarkers.map(i => i.remove());
-    dispatch(clientChangeDrawType('LINE'));
+    if (drawType === 'LINE') {
       drawObj.changeMode('draw_line_string');
+    } else {
+      drawObj.changeMode('draw_polygon');
+      totalAreaRef.current.style.display = 'none';
+    }
+
     totalDistanceRef.current.style.display = 'none';
-    isSetResetDisabled(true);
+    setIsResetDisabled(true);
+  };
+
+  const handlerDrawEnd = featuresLength => {
+    if (!featuresLength) {
+      dispatch(clientChangeDrawType('simple_select'));
+      totalDistanceRef.current.innerText = '';
+      mouseCursorRef.current.style.display = 'none';
+      distanceBoxRef.current.style.display = 'none';
+    } else {
+      setIsResetDisabled(false);
+    }
   };
 
   const handlerDistanceRevert = () => {
@@ -575,11 +591,10 @@ export default function OperationApprovalsContainer({ mode }) {
     }
 
     if (draw.getMode() === 'simple_select') {
-      setIsDistanceStartPoint(true);
+      setIsDistanceRevert(true);
-      isSetResetDisabled(false);
     } else {
       if (draw.getMode() === 'draw_line_string') {
-        setIsDistanceStartPoint(false);
+        setIsDistanceRevert(false);
       }
     }
   };
@@ -685,7 +700,7 @@ export default function OperationApprovalsContainer({ mode }) {
                       className='btn-icon rounded-circle'
                       color='primary'
                       size='sm'
-                      disabled={isDistanceStartPoint}
+                      disabled={isDistanceRevert}
                     >
                       <FiCornerUpLeft size={16} />
                     </Button>

src/utility/MapUtils.js

@@ -670,7 +670,13 @@ export const handlerStartMode = (mode, drawObj) => {
   }
 };
 
-export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
+export const handlerDrawEvents = (
+  mapInstance,
+  popupCallback,
+  drawEndCallback,
+  refObj,
+  drawObj
+) => {
   const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick;
   const originPolygonClickHandler = MapboxDraw.modes.draw_polygon.onClick;
   const { totalDistanceRef, mouseCursorRef, totalAreaRef } = refObj;
@@ -688,7 +694,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
     }
 
     const markerList = getDintancePointPopupList(drawObj);
-    callback(mapInstance, markerList, drawObj);
+    popupCallback(mapInstance, markerList, drawObj);
   };
 
   MapboxDraw.modes.draw_polygon.onClick = function (state, e) {
@@ -703,9 +709,6 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
       totalAreaRef.current.style.display = 'block';
       totalAreaRef.current.innerText = `면적 : ${area}m²`;
     }
-
-    // const markerList = getDintancePointPopupList(drawObj);
-    // callback(mapInstance, markerList, drawObj);
   };
 
   mapInstance.on('mousemove', e => {
@@ -717,7 +720,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
         // distanceMarkers.map(i => i.remove());
         if (type.features[0].geometry.type === 'LineString') {
           const markerList = getDintancePointPopupList(drawObj);
-          callback(mapInstance, markerList, drawObj);
+          popupCallback(mapInstance, markerList, drawObj);
           const distance = getDrawDistance(drawObj, 'draw_line_string');
           totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
         } else {
@@ -728,12 +731,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
         }
       }
     }
-    // if (drawMode === 'direct_select') {
+
-    //   if (drawMode === 'draw_line_string') {
-    //     const markerList = getDintancePointPopupList(drawObj);
-    //     callback(mapInstance, markerList, drawObj);
-    //   }
-    // }
     if (drawMode === 'draw_line_string') {
       if (drawObj.getAll().features[0].geometry.coordinates.length === 1) {
         mouseCursorRef.current.style.display = 'block';
@@ -742,25 +740,43 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
         mouseCursorRef.current.innerText = '시작점 선택';
       }
     }
+
+    if (drawMode === 'draw_polygon') {
+      if (drawObj.getAll().features[0].geometry.coordinates[0].length === 2) {
+        mouseCursorRef.current.style.display = 'block';
+        mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
+        mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
+        mouseCursorRef.current.innerText = '시작점 선택';
+      }
+    }
   });
   mapInstance.on('mouseout', e => {
     mouseCursorRef.current.style.display = 'none';
   });
 
-  mapInstance.on('draw.create', () => {
+  mapInstance.on('draw.create', e => {
-    // totalDistanceRef.current.style.display = 'block';
+    console.log(e);
-    // const distance = getDrawDistance(drawObj);
+    drawEndCallback(e.features.length);
-    // totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
     mouseCursorRef.current.style.display = 'none';
     mouseCursorRef.current.style.innerText = '';
     startPoint = null;
   });
+
+  mapInstance.on('draw.modechange', (obj, e) => {
+    if (obj.mode === 'simple_select') {
+      const featuresLength = drawObj.getAll().features.length;
+      if (!featuresLength) {
+        console.log('!?!?');
+        drawEndCallback(drawObj.getAll().features.length);
+      }
+    }
+  });
 };
 
 /**
  *
  * @param {MapboxDraw} drawObj
- * @returns 총 거리 : number
+ * @returns 총 거리 : string
  */
 export const getDrawDistance = (drawObj, drawMode) => {
   const drawGeometry = drawObj.getAll().features[0];
@@ -788,6 +804,11 @@ export const getDrawDistance = (drawObj, drawMode) => {
   return distance;
 };
 
+/**
+ *
+ * @param {MapboxDraw} drawObj
+ * @returns 면적 : string
+ */
 export const getArea = drawObj => {
   const drawGeometry = drawObj.getAll().features[0];
   let area = 0;