관제 circle 공역 그리기

src/components/map/naver/draw/ControlDraw.js

@@ -1,82 +1,98 @@
 import $ from 'jquery';
 import { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 export default function ControlDraw(props) {
   const mapControl = useSelector(state => state.controlMapReducer);
 
   const naver = props.naver;
   const map = props.map;
-  let mode;
 
-  const [mapClickEvent, setMapClickEvent] = useState();
   const [circleArr, setCircleArr] = useState([]);
+  const [markerArr, setMarkerArr] = useState([]);
 
-  const [up, setUp] = useState(false);
+  const [upCircle, setUpCircle] = useState(false);
 
   useEffect(() => {
-    if (up) {
+    if (upCircle) {
       const delay = 100;
       const timer = setTimeout(() => {
-        createMapClick();
-        setUp(false);
+        resumeMapClick();
+        setUpCircle(false);
+
+        const index = circleArr.findIndex(
+          prev => prev.center === upCircle.getCenter()
+        );
+
+        markerArr.map((prev, idx) => {
+          if (idx === index) {
+            const text = fromMetersToText(upCircle.getRadius());
+            const content =
+              '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>' +
+              text +
+              '</span></div>';
+            prev.setIcon({
+              ...prev.getIcon(),
+              content: content
+            });
+          }
+        });
       }, delay);
 
       return () => {
         clearTimeout(timer);
       };
     }
-  }, [up]);
+  }, [upCircle]);
+
+  useEffect(() => {
+    naver.maps.Event.addListener(map, 'click', onClickCircle);
+    stopMapClick();
+  }, []);
 
   useEffect(() => {
     drawInit();
   }, [mapControl.ctrlDrawType]);
 
   const drawInit = () => {
-    removeMapClick();
     if (mapControl.ctrlDrawType === 'CIRCLE') {
       onClickButton('CIRCLE');
     } else if (mapControl.ctrlDrawType === 'RESET') {
-      onClickReset();
+      clearMode();
     }
   };
 
   const onClickButton = newMode => {
-    removeMapClick();
-    if (mode === newMode) {
-      mode = null;
-      return;
-    }
+    clearMode();
+    startMode(newMode);
+  };
+
+  const clearMode = () => {
+    if (circleArr.length != 0) {
+      circleArr.map(obj => obj.circle.setMap(null));
+      setCircleArr([]);
 
-    // startMode(newMode);
-    if (!newMode) return;
+      markerArr.map(marker => marker.setMap(null));
+      setMarkerArr([]);
 
-    createMapClick();
+      stopMapClick();
+    }
   };
 
-  const onClickReset = () => {
-    console.log('초기화 진행');
-    circleArr.map(circle => circle.setMap(null));
-    setCircleArr([]);
+  const startMode = mode => {
+    if (!mode) return;
 
-    removeMapClick();
+    if (mode === 'CIRCLE') {
+      resumeMapClick();
+    }
   };
 
-  const removeMapClick = () => {
-    $(document).off('mousemove.measure');
-    $(document).off('mouseup.measure');
-
-    // naver.maps.Event.clearInstanceListeners(map);
-    naver.maps.Event.removeListener(mapClickEvent);
-    setMapClickEvent();
+  const stopMapClick = () => {
+    naver.maps.Event.stopDispatch(map, 'click');
   };
 
-  const createMapClick = () => {
-    setMapClickEvent(
-      naver.maps.Event.addListener(map, 'click', function (e) {
-        onClickCircle(e);
-      })
-    );
+  const resumeMapClick = () => {
+    naver.maps.Event.resumeDispatch(map, 'click');
   };
 
   const onClickCircle = e => {
@@ -92,12 +108,16 @@ export default function ControlDraw(props) {
       map: map,
       clickable: true
     });
-    setCircleArr(prev => [...prev, circle]);
+    setCircleArr(prev => [
+      ...prev,
+      { center: coord, circle: circle, radius: 100 }
+    ]);
 
     naver.maps.Event.addListener(circle, 'mousedown', function () {
       onMouseDown(circle);
     });
-    setUp(false);
+
+    addMileStone(coord, fromMetersToText(100));
   };
 
   const onMouseDown = circle => {
@@ -115,8 +135,8 @@ export default function ControlDraw(props) {
       onMouseMove(e, circle);
     });
 
-    $(document).on('mouseup.measure', function (e) {
-      onMouseUp();
+    $(document).on('mouseup.measure', function () {
+      onMouseUp(circle);
     });
   };
 
@@ -132,7 +152,7 @@ export default function ControlDraw(props) {
     circle.setRadius(r);
   };
 
-  const onMouseUp = () => {
+  const onMouseUp = circle => {
     map.setOptions({
       draggable: true,
       pinchZoom: true,
@@ -143,8 +163,38 @@ export default function ControlDraw(props) {
       disableTwoFingerTapZoom: false
     });
 
-    removeMapClick();
-    setUp(true);
+    $(document).off('mousemove.measure');
+    $(document).off('mouseup.measure');
+
+    stopMapClick();
+    setUpCircle(circle);
+  };
+
+  const addMileStone = (coord, text) => {
+    const content =
+      '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>' +
+      text +
+      '</span></div>';
+
+    const midPoint = coord;
+
+    const anchor = new naver.maps.Point(20, 35);
+
+    const marker = new naver.maps.Marker({
+      position: midPoint,
+      icon: {
+        content: content,
+        anchor: anchor
+      }
+    });
+    marker.setMap(map);
+    setMarkerArr(prev => [...prev, marker]);
+  };
+
+  const fromMetersToText = meters => {
+    meters = meters || 0;
+    const text = parseFloat(meters.toFixed(1)) + 'm';
+    return text;
   };
 
   return null;