비행구역 draw모드 꼬이는 현상 수정

src/components/laanc/map/LaancDrawControl.js

@@ -43,12 +43,14 @@ export const LaancDrawControl = props => {
     desc: ''
   });
 
-  useEffect(() => {
+  const [number, setNumber] = useState(0);
-    const areaType = props.areaCoordList[0].areaType;
-    const drawType = mapControl.drawType;
 
-    drawInit();
+  useEffect(() => {
-    // if (areaType !== drawType) drawInit();
+    if (mapControl.drawType === 'DONE') {
+      drawObj.changeMode('simple_select');
+    } else {
+      drawInit();
+    }
   }, [mapControl.drawType]);
 
   const originClickRef = useRef(null);
@@ -67,24 +69,27 @@ export const LaancDrawControl = props => {
         });
       };
 
-      mapObject.on('draw.update', handlerUpdateSetting);
+      if (number === 0) {
-
+        mapObject.on('draw.update', handlerUpdateSetting);
-      modeArr.forEach(m => {
+        modeArr.forEach(m => {
-        m.onStop = state => handlerFinishDraw(state);
+          m.onStop = state => handlerFinishDraw(state);
 
-        // onClick 이벤트 오버라이드
+          // onClick 이벤트 오버라이드
-        const mOriginClick = m.onClick;
+          const mOriginClick = m.onClick;
-        m.onClick = function (state, e) {
+          m.onClick = function (state, e) {
-          mOriginClick.call(this, state, e);
+            mOriginClick.call(this, state, e);
-          handlerCustomOnClick(state, e);
+            handlerCustomOnClick(state, e);
-        };
+          };
 
-        if (originClickRef.current === null) {
+          if (originClickRef.current === null) {
-          originClickRef.current = mOriginClick;
+            originClickRef.current = mOriginClick;
-        }
+          }
-      });
+        });
+        setNumber(number + 1);
+      }
 
       return () => {
+        dispatch(drawTypeChangeAction('DONE'));
         mapObject.off('draw.update', handlerUpdateSetting);
         cleanUp();
       };
@@ -121,6 +126,7 @@ export const LaancDrawControl = props => {
     if (mode && obj) {
       const feature = drawObj.get(obj.id);
       if (!feature) {
+        console.log('2222222222');
         drawObj.changeMode('simple_select');
         return;
       }
@@ -153,17 +159,16 @@ export const LaancDrawControl = props => {
       }
     }
 
+    // 좌표 7개 찍으면 자동 마무리
     if (state.currentVertexPosition > 6) {
-      if (obj) {
+      drawObj.changeMode('simple_select');
-        drawObj.changeMode('direct_select', {
-          featureId: obj.id
-        });
-      }
     }
   };
 
   // 도형 그리기 완료 시
   const handlerFinishDraw = state => {
+    if (drawObj.getAll().features.length === 0) return;
+
     const mode = handlerReturnMode(drawObj.getMode());
     const pointLength = state.currentVertexPosition;
     if (pointLength > 0) {
@@ -209,24 +214,6 @@ export const LaancDrawControl = props => {
         coords.splice(-1);
 
         const data = { coords: coords, mode: mode, id: obj.id };
-        // 에러 체크
-        // const isExist = drawObj.getAll().features.some(o => o.id === obj.id);
-        // if (!isExist) {
-        //   console.log('1111111?');
-        //   props.setModal({
-        //     title: '비행 구역 설정',
-        //     desc: (
-        //       <>
-        //         비행구역 설정이 완료되지 않았습니다.
-        //         <br />
-        //         비행구역 설정을 다시 해주시기 부탁드립니다.
-        //       </>
-        //     ),
-        //     isOpen: true
-        //   });
-        //   dispatch(drawTypeChangeAction('DONE'));
-        //   return;
-        // }
 
         handlerAbnormalityCheck(data).then(areaInfo => {
           if (areaInfo) {
@@ -251,14 +238,15 @@ export const LaancDrawControl = props => {
         });
       }
     } else {
+      console.log('333333333');
       // 좌표가 찍히기도 전에 틀만 생성된 도형들 삭제
-      if (mode === 'CIRCLE') {
+      // if (mode === 'CIRCLE') {
-        const obj = state.polygon;
+      //   const obj = state.polygon;
-        drawObj.delete(obj.id);
+      //   drawObj.delete(obj.id);
-      } else {
+      // } else {
-        const obj = state[mode.toLowerCase()];
+      //   const obj = state[mode.toLowerCase()];
-        drawObj.delete(obj.id);
+      //   drawObj.delete(obj.id);
-      }
+      // }
     }
   };
 
@@ -293,7 +281,6 @@ export const LaancDrawControl = props => {
           }
         }
       }
-
       if (elev1.data[0] === 0 || elev2.length > 0) isBreak = true;
     } catch (error) {
       {
@@ -400,10 +387,8 @@ export const LaancDrawControl = props => {
       } else {
         // 폴리곤은 중첩좌표 제거해서 서버에 넘겨야함
         if (mode === 'POLYGON') coords.splice(-1);
-        const data = { coords: coords, mode: mode, id: id };
 
-        // handlerRemoveGroupMarker(obj.id);
+        const data = { coords: coords, mode: mode, id: id };
-        // handlerCreateGroupMarker(data, mode);
         handlerAbnormalityCheck(data).then(areaInfo => {
           if (areaInfo) handlerSaveData(areaInfo);
         });
@@ -413,24 +398,20 @@ export const LaancDrawControl = props => {
 
   // 비정상 감지 시 해당 도형, 마커 삭제
   const handlerRemoveError = id => {
-    dispatch(drawTypeChangeAction('DONE'));
+    // 삭제대상인 obj를 제외하고 남은 obj가 있는지 확인
-    // props.handlerAddChange('isAddable', false);
+    const isRemain = drawObj
-    props.handlerAddChange('overAdd', false);
-    handlerRemoveGroupMarker(id);
-
-    const remainObj = drawObj
       .getAll()
-      .features.filter(o => o.properties.id !== 'BUFFER' && o.id !== id);
+      .features.some(o => o.properties.id !== 'BUFFER' && o.id !== id);
 
-    if (remainObj.length === 0) {
+    if (!isRemain) {
-      props.handlerSaveCheck(false);
       dispatch(drawTypeChangeAction('RESET'));
     } else {
-      props.handlerSaveCheck(true);
+      dispatch(drawTypeChangeAction('DONE'));
     }
 
+    // 해당 obj 삭제
     drawObj.delete(id);
-    drawObj.changeMode('simple_select');
+    handlerRemoveGroupMarker(id);
 
     // 라인일 경우 버퍼도 삭제
     const buffer = drawObj
@@ -438,12 +419,16 @@ export const LaancDrawControl = props => {
       .features.find(obj => obj.properties?.lineId === id);
     if (buffer) drawObj.delete(buffer.id);
 
+    // viewCoord에 적용
     const viewCoordObj = drawObj
       .getAll()
       .features.filter(
         o => o.geometry.coordinates.length > 0 && o.properties.id !== 'BUFFER'
       );
     props.setViewCoordObj(viewCoordObj);
+
+    // 계속 20개 미만이라 overAdd false처리(임시)
+    props.handlerAddChange('overAdd', false);
   };
 
   // 정상 좌표 처리
@@ -454,7 +439,6 @@ export const LaancDrawControl = props => {
     const viewCoordObj = drawObj
       .getAll()
       .features.filter(o => o.properties.id !== 'BUFFER' && o.properties.id);
-
     props.setViewCoordObj(viewCoordObj);
 
     if (viewCoordObj.length > 19) {
@@ -608,9 +592,8 @@ export const LaancDrawControl = props => {
               handlerRemoveGroupMarker(data.id);
               handlerCreateGroupMarker(mapObject, data, area.areaType);
             }
+            // 구역설정이 종료되고 타입도 바로 변경
             dispatch(drawTypeChangeAction('DONE'));
-            // console.log('333');
-            // drawObj.changeMode('simple_select');
           }
         });
       } else if (areas.length > 0 && areas[0].areaType) {
@@ -719,6 +702,11 @@ export const LaancDrawControl = props => {
   const drawInit = () => {
     const mode = mapControl.drawType;
     if (mode !== 'DONE') {
+      if (!mode || mode === 'RESET') {
+        handlerResetMode();
+        return;
+      }
+
       if (!props.addData.isAddable) {
         // 추가 상태가 아닐 때
         drawObj.deleteAll();
@@ -730,23 +718,23 @@ export const LaancDrawControl = props => {
         props.handlerInitCoordinates();
       }
 
-      if (!mode || mode === 'RESET') {
-        props.handlerAddChange('isAddable', false);
-        props.handlerAddChange('isViewAdd', false);
-        props.handlerAddChange('overAdd', false);
-        props.setViewCoordObj([]);
-        drawObj.deleteAll();
-        handlerRemoveAllMarker();
-        drawObj.changeMode('simple_select');
-        return;
-      }
-
       handlerStartMode(mode);
-    } else {
-      drawObj.changeMode('simple_select');
     }
   };
 
+  // 초기화
+  const handlerResetMode = () => {
+    props.handlerAddChange('isAddable', false);
+    props.handlerAddChange('isViewAdd', false);
+    props.handlerAddChange('overAdd', false);
+
+    drawObj.deleteAll();
+    handlerRemoveAllMarker();
+    props.setViewCoordObj([]);
+
+    drawObj.changeMode('simple_select');
+  };
+
   const handlerStartMode = mode => {
     if (mode === 'LINE') {
       drawObj.changeMode('draw_line_string');