From e55bf859121afc7c4e2e169fdacee03fabbc3e6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Tue, 5 Dec 2023 17:37:51 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20direct?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EB=B0=94=EB=A1=9C=20=EC=A7=84=EC=9E=85=20?=
 =?UTF-8?q?=EB=B0=8F=20midPoint=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/laanc/map/LaancDrawControl.js | 79 +++++++++++++++++---
 1 file changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/components/laanc/map/LaancDrawControl.js b/src/components/laanc/map/LaancDrawControl.js
index b53e0a6a..0dd2ef9d 100644
--- a/src/components/laanc/map/LaancDrawControl.js
+++ b/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]);