비행구역 direct모드 바로 진입 및 midPoint 제거

src/components/laanc/map/LaancDrawControl.js

@@ -19,6 +19,9 @@ import {
   SimpleSelectMode
 } from 'mapbox-gl-draw-circle';
 import axios from '../../../modules/utils/customAxiosUtil';
+import createSupplementaryPointsForCircle from 'mapbox-gl-draw-circle/lib/utils/create_supplementary_points_circle';
+import createSupplementaryPoints from 'mapbox-gl-draw-circle/node_modules/@mapbox/mapbox-gl-draw/src/lib/create_supplementary_points';
+import Constants from 'mapbox-gl-draw-circle/node_modules/@mapbox/mapbox-gl-draw/src/constants';
 
 export const LaancDrawControl = props => {
   const dispatch = useDispatch();
@@ -47,7 +50,17 @@ export const LaancDrawControl = props => {
 
   useEffect(() => {
     if (mapControl.drawType === 'DONE') {
-      drawObj.changeMode('simple_select');
+      // 구역 생성 후 바로 directMode
+      if (number !== 0) {
+        const obj = drawObj
+          .getAll()
+          .features.filter(o => o.properties.id !== 'BUFFER');
+        if (obj.length > 0) {
+          drawObj.changeMode('direct_select', {
+            featureId: obj[obj.length - 1]?.id
+          });
+        }
+      }
     } else {
       drawInit();
     }
@@ -85,6 +98,59 @@ export const LaancDrawControl = props => {
             originClickRef.current = mOriginClick;
           }
         });
+
+        // 버퍼 select 모드 방지를 위한 오버라이드
+        const SimpleSelect = SimpleSelectMode;
+        SimpleSelect.toDisplayFeatures = function (state, geojson, display) {
+          geojson.properties.active = this.isSelected(geojson.properties.id)
+            ? Constants.activeStates.ACTIVE
+            : Constants.activeStates.INACTIVE;
+          display(geojson);
+          this.fireActionable();
+          if (
+            geojson.properties.active !== Constants.activeStates.ACTIVE ||
+            geojson.geometry.type === Constants.geojsonTypes.POINT
+          )
+            return;
+
+          // 버퍼 select 모드 방지
+          if (geojson.properties?.user_id !== 'BUFFER') {
+            const supplementaryPoints = geojson.properties.user_isCircle
+              ? createSupplementaryPointsForCircle(geojson)
+              : createSupplementaryPoints(geojson);
+            supplementaryPoints.forEach(display);
+            // 바로 direct 모드로 돌입
+            drawObj.changeMode('direct_select', {
+              featureId: geojson.properties.id
+            });
+          }
+        };
+
+        // 버퍼 select 모드 방지, midPoint 생성 방지를 위한 오버라이드
+        const DirectSelect = DirectMode;
+        DirectSelect.toDisplayFeatures = function (state, geojson, push) {
+          if (state.featureId === geojson.properties.id) {
+            geojson.properties.active = Constants.activeStates.ACTIVE;
+            push(geojson);
+
+            // 버퍼 select 모드 방지
+            if (geojson.properties?.user_id !== 'BUFFER') {
+              const supplementaryPoints = geojson.properties.user_isCircle
+                ? createSupplementaryPointsForCircle(geojson)
+                : createSupplementaryPoints(geojson, {
+                    map: this.map,
+                    midpoints: false, // midPoint 생성 방지
+                    selectedPaths: state.selectedCoordPaths
+                  });
+              supplementaryPoints.forEach(push);
+            }
+          } else {
+            geojson.properties.active = Constants.activeStates.INACTIVE;
+            push(geojson);
+          }
+          this.fireActionable(state);
+        };
+
         setNumber(number + 1);
       }
 
@@ -93,17 +159,6 @@ export const LaancDrawControl = props => {
         mapObject.off('draw.update', handlerUpdateSetting);
         cleanUp();
       };
-
-      // const DirectSelect = DirectMode;
-      // console.log(DirectSelect, '---');
-      // const originSetup = DirectSelect.toDisplayFeatures;
-      // DirectSelect.toDisplayFeatures = function (state, geojson, push) {
-      //   originSetup.call(this, state, geojson, push);
-      //   // console.log(state, geojson, push, '----');
-      //   if (geojson.properties.active === 'true') {
-      //     console.log(state, geojson, push, '------');
-      //   }
-      // };
     }
   }, [mapObject]);