laanc 비행구역 시스템얼럿, 추가버튼 모달 삭제 및 동일한 타입으로 그리기 가능

11 months ago · f0114847d7
4 changed files with 98 additions and 58 deletions
--- a/src/components/map/mapbox/draw/LaancDrawControl.js
+++ b/src/components/map/mapbox/draw/LaancDrawControl.js
@ -6,6 +6,8 @@ import {
  handlerGetCircleCoord,
  handlerGetHtmlContent,
  handlerGetMidPoint,
+  handlerRemoveAllMarker,
+  handlerRemoveGroupMarker,
  handlerReturnMode
 } from '../../../../utility/DrawUtil';
 import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
@ -41,7 +43,8 @@ export const LaancDrawControl = props => {
    const areaType = props.areaCoordList[0].areaType;
    const drawType = mapControl.drawType;

-    if (areaType !== drawType) drawInit();
+    drawInit();
+    // if (areaType !== drawType) drawInit();
  }, [mapControl.drawType]);

  useEffect(() => {
@ -260,6 +263,9 @@ export const LaancDrawControl = props => {

  // 비정상 감지 시 해당 도형, 마커 삭제
  const handlerRemoveError = id => {
+    dispatch(drawTypeChangeAction('DONE'));
+    // props.handlerAddChange('isAddable', false);
+    props.handlerAddChange('overAdd', false);
    drawObj.delete(id);
    handlerRemoveGroupMarker(id);
    props.handlerSaveCheck(false);
@ -357,6 +363,7 @@ export const LaancDrawControl = props => {
                paths.push(paths[0]);
              }
            }
+            dispatch(drawTypeChangeAction('DONE'));
          }
        });
      }
@ -389,21 +396,21 @@ export const LaancDrawControl = props => {
    }
  };

-  // 지도에 있는 모든 마커 삭제
-  const handlerRemoveAllMarker = () => {
-    const ele = document.getElementsByClassName('mapboxgl-popup');
-    const eleArr = Array.from(ele);
-    eleArr?.forEach(marker => marker.remove());
-  };
-
-  // 해당되는 id의 마커 삭제
-  const handlerRemoveGroupMarker = id => {
-    const ele = document.getElementsByClassName('mapboxgl-popup');
-    const eleArr = Array.from(ele);
-    eleArr?.forEach(marker => {
-      if (marker.innerHTML.includes(id)) marker.remove();
-    });
-  };
+  // // 지도에 있는 모든 마커 삭제
+  // const handlerRemoveAllMarker = () => {
+  //   const ele = document.getElementsByClassName('mapboxgl-popup');
+  //   const eleArr = Array.from(ele);
+  //   eleArr?.forEach(marker => marker.remove());
+  // };
+
+  // // 해당되는 id의 마커 삭제
+  // const handlerRemoveGroupMarker = id => {
+  //   const ele = document.getElementsByClassName('mapboxgl-popup');
+  //   const eleArr = Array.from(ele);
+  //   eleArr?.forEach(marker => {
+  //     if (marker.innerHTML.includes(id)) marker.remove();
+  //   });
+  // };

  // 개별 마커 생성
  const handlerCreateOneMarker = (anchor, lngLat, text, id) => {
@ -439,6 +446,9 @@ export const LaancDrawControl = props => {
  };

  const drawInit = () => {
+    const mode = mapControl.drawType;
+    if (mode !== 'DONE') {
+      console.log(props.addData.isAddable, '-----');
      if (!props.addData.isAddable) {
        drawObj.deleteAll();
        handlerRemoveAllMarker();
@ -450,7 +460,6 @@ export const LaancDrawControl = props => {
      }

      props.setCoordArr([]);
-    const mode = mapControl.drawType;
      if (!mode || mode === 'RESET') {
        props.handlerAddChange('isAddable', false);
        props.handlerAddChange('isViewAdd', false);
@ -460,12 +469,8 @@ export const LaancDrawControl = props => {
        return;
      }

-    const addData = props.addData;
-    if (addData.isAddable && addData.isViewAdd && addData.overAdd) {
-      alert('구역은 최대 2개까지 설정 가능합니다.');
-      return;
-    }
      handlerStartMode(mode);
+    }
  };

  const handlerStartMode = mode => {
--- a/src/utility/DrawUtil.js
+++ b/src/utility/DrawUtil.js
@ -118,6 +118,22 @@ export const handlerReturnMode = mode => {
  if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE';
 };

+// 지도에 있는 모든 마커 삭제
+export const handlerRemoveAllMarker = () => {
+  const ele = document.getElementsByClassName('mapboxgl-popup');
+  const eleArr = Array.from(ele);
+  eleArr?.forEach(marker => marker.remove());
+};
+
+// 해당되는 id의 마커 삭제
+export const handlerRemoveGroupMarker = id => {
+  const ele = document.getElementsByClassName('mapboxgl-popup');
+  const eleArr = Array.from(ele);
+  eleArr?.forEach(marker => {
+    if (marker.innerHTML.includes(id)) marker.remove();
+  });
+};
+
 // draw 레이어
 export const layerWayPoint = source => {
  return {
--- a/src/views/laanc/FlightArea.js
+++ b/src/views/laanc/FlightArea.js
@ -14,7 +14,10 @@ import { MAPBOX_TOKEN } from '../../configs/constants';
 import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { AREA_DETAIL_LIST_SAVE } from '../../modules/basis/flight/actions/basisFlightAction';
+import {
+  AREA_COORDINATE_LIST_SAVE,
+  AREA_DETAIL_LIST_SAVE
+} from '../../modules/basis/flight/actions/basisFlightAction';
 import {
  drawTypeChangeAction,
  mapInitAction
@ -25,6 +28,7 @@ import {
  handlerCreatePoint,
  handlerFitBounds,
  handlerGetCircleCoord,
+  handlerRemoveAllMarker,
  layerBuffer,
  layerPolygon,
  layerPolyline,
@ -38,6 +42,7 @@ import { ErrorModal } from '../../components/modal/ErrorModal';
 import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone';
 import { WeatherContainer } from '../../containers/basis/flight/plan/WeatherContainer';
 import { InfoModal } from '../../components/modal/InfoModal';
+import { initFlightBas } from '../../modules/laanc/models/laancModels';

 const initialAddData = {
  isAddable: false,
@ -497,13 +502,13 @@ export default function FlightArea({

  const handlerAddClick = () => {
    if (!addData.isAddable) {
-      setAddModal(prev => ({
-        ...prev,
-        isOpen: true
-      }));
+      // setAddModal(prev => ({
+      //   ...prev,
+      //   isOpen: true
+      // }));
      handlerAddChange('isAddable', true);
    } else {
-      alert('구역은 최대 2개까지 설정 가능합니다.');
+      // alert('구역은 최대 2개까지 설정 가능합니다.');
    }
  };

@ -520,6 +525,15 @@ export default function FlightArea({
    }));
  };

+  const handlerSaveCheck = save => {
+    setIsSaveable(save);
+  };
+
+  const handlerInitCoordinates = () => {
+    const init = initFlightBas.initDetail.areaList.concat();
+    dispatch(AREA_COORDINATE_LIST_SAVE(init));
+  };
+
  return (
    <div className='vertically-centered-modal'>
      <div>
@ -546,7 +560,8 @@ export default function FlightArea({
              centeredModal={centeredModal}
              mapContainer={mapContainer}
              drawObj={drawObj}
-              setIsSaveable={setIsSaveable}
+              handlerInitCoordinates={handlerInitCoordinates}
+              handlerSaveCheck={handlerSaveCheck}
              handlerAddChange={handlerAddChange}
              addData={addData}
            />
@ -556,27 +571,29 @@ export default function FlightArea({
              <div className='laanc-point'>
                <Button
                  color='primary'
+                  disabled={mapControl.drawType === 'LINE' || addData.overAdd}
                  onClick={() => {
                    handlerDrawType('LINE');
-                    // drawObj.changeMode('draw_line_string');
                  }}
                >
                  WayPoint
                </Button>
                <Button
                  color='primary'
+                  disabled={mapControl.drawType === 'CIRCLE' || addData.overAdd}
                  onClick={() => {
                    handlerDrawType('CIRCLE');
-                    // drawObj.changeMode('drag_circle');
                  }}
                >
                  Circle
                </Button>
                <Button
                  color='primary'
+                  disabled={
+                    mapControl.drawType === 'POLYGON' || addData.overAdd
+                  }
                  onClick={() => {
                    handlerDrawType('POLYGON');
-                    // drawObj.changeMode('draw_polygon');
                  }}
                >
                  Polygon
@ -592,6 +609,7 @@ export default function FlightArea({
                </Button>
                {addData.isViewAdd ? (
                  <Button
+                    disabled={addData.overAdd}
                    color='primary'
                    onClick={() => {
                      handlerAddClick();
--- a/src/views/laanc/LaancAreaMap.js
+++ b/src/views/laanc/LaancAreaMap.js
@ -37,9 +37,10 @@ export default function LaancAreaMap({
  centeredModal,
  mapContainer,
  drawObj,
-  setIsSaveable,
+  handlerSaveCheck,
  handlerAddChange,
-  addData
+  addData,
+  handlerInitCoordinates
 }) {
  const dispatch = useDispatch();
  const mapControl = useSelector(state => state.controlMapReducer);
@ -256,10 +257,10 @@ export default function LaancAreaMap({
    dispatch(mapInitAction(map));
  };

-  const handlerInitCoordinates = () => {
-    const init = initFlightBas.initDetail.areaList.concat();
-    dispatch(AREA_COORDINATE_LIST_SAVE(init));
-  };
+  // const handlerInitCoordinates = () => {
+  //   const init = initFlightBas.initDetail.areaList.concat();
+  //   dispatch(AREA_COORDINATE_LIST_SAVE(init));
+  // };

  const handlerCoordinates = areaInfo => {
    const initAreaList = initFlightBas.initDetail.areaList.concat();
@ -305,9 +306,9 @@ export default function LaancAreaMap({
    setModal(!modal);
  };

-  const handlerSaveCheck = save => {
-    setIsSaveable(save);
-  };
+  // const handlerSaveCheck = save => {
+  //   setIsSaveable(save);
+  // };

  return (
    <Card className='mb-0'>
@ -319,7 +320,7 @@ export default function LaancAreaMap({
            style={{
              position: 'relative',
              zIndex: 100,
-              margin: '400px 10px 10px 10px'
+              margin: '470px 10px 10px 10px'
            }}
          >
            {mapObject ? (