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