diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 7e41af1b..fb4cec85 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -82,8 +82,8 @@ export default function OperationApprovalsContainer({ mode }) { const [dataBlocks, setDataBlocks] = useState([]); // 거리측정 - const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(true); - const [isResetDisabled, isSetResetDisabled] = useState(true); + const [isDistanceRevert, setIsDistanceRevert] = useState(true); + const [isResetDisabled, setIsResetDisabled] = useState(true); const totalDistanceRef = useRef(null); const totalAreaRef = useRef(null); const mouseCursorRef = useRef(null); @@ -453,7 +453,7 @@ export default function OperationApprovalsContainer({ mode }) { const handlerDrawTypeChange = (e, val) => { drawObj.deleteAll(); distanceMarkers.map(i => i.remove()); - isSetResetDisabled(true); + setIsResetDisabled(true); distanceBoxRef.current.style.display = 'block'; totalDistanceRef.current.innerText = ''; totalAreaRef.current.innerText = ''; @@ -467,6 +467,7 @@ export default function OperationApprovalsContainer({ mode }) { handlerDrawEvents( mapInstance, handlerDrawPopup, + handlerDrawEnd, { totalDistanceRef, mouseCursorRef, @@ -477,7 +478,6 @@ export default function OperationApprovalsContainer({ mode }) { }; const handlerMapTypeChange = val => { - // dispatch(clientChangeDrawType('')); handlerDistanceClose(); setMapType(val); }; @@ -495,10 +495,26 @@ export default function OperationApprovalsContainer({ mode }) { const handlerDrawReset = () => { drawObj.deleteAll(); distanceMarkers.map(i => i.remove()); - dispatch(clientChangeDrawType('LINE')); - drawObj.changeMode('draw_line_string'); + if (drawType === 'LINE') { + drawObj.changeMode('draw_line_string'); + } else { + drawObj.changeMode('draw_polygon'); + totalAreaRef.current.style.display = 'none'; + } + totalDistanceRef.current.style.display = 'none'; - isSetResetDisabled(true); + setIsResetDisabled(true); + }; + + const handlerDrawEnd = featuresLength => { + if (!featuresLength) { + dispatch(clientChangeDrawType('simple_select')); + totalDistanceRef.current.innerText = ''; + mouseCursorRef.current.style.display = 'none'; + distanceBoxRef.current.style.display = 'none'; + } else { + setIsResetDisabled(false); + } }; const handlerDistanceRevert = () => { @@ -575,11 +591,10 @@ export default function OperationApprovalsContainer({ mode }) { } if (draw.getMode() === 'simple_select') { - setIsDistanceStartPoint(true); - isSetResetDisabled(false); + setIsDistanceRevert(true); } else { if (draw.getMode() === 'draw_line_string') { - setIsDistanceStartPoint(false); + setIsDistanceRevert(false); } } }; @@ -685,7 +700,7 @@ export default function OperationApprovalsContainer({ mode }) { className='btn-icon rounded-circle' color='primary' size='sm' - disabled={isDistanceStartPoint} + disabled={isDistanceRevert} > diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js index f9d2e186..97a851e8 100644 --- a/src/utility/MapUtils.js +++ b/src/utility/MapUtils.js @@ -670,7 +670,13 @@ export const handlerStartMode = (mode, drawObj) => { } }; -export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { +export const handlerDrawEvents = ( + mapInstance, + popupCallback, + drawEndCallback, + refObj, + drawObj +) => { const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick; const originPolygonClickHandler = MapboxDraw.modes.draw_polygon.onClick; const { totalDistanceRef, mouseCursorRef, totalAreaRef } = refObj; @@ -688,7 +694,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { } const markerList = getDintancePointPopupList(drawObj); - callback(mapInstance, markerList, drawObj); + popupCallback(mapInstance, markerList, drawObj); }; MapboxDraw.modes.draw_polygon.onClick = function (state, e) { @@ -703,9 +709,6 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { totalAreaRef.current.style.display = 'block'; totalAreaRef.current.innerText = `면적 : ${area}m²`; } - - // const markerList = getDintancePointPopupList(drawObj); - // callback(mapInstance, markerList, drawObj); }; mapInstance.on('mousemove', e => { @@ -717,7 +720,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { // distanceMarkers.map(i => i.remove()); if (type.features[0].geometry.type === 'LineString') { const markerList = getDintancePointPopupList(drawObj); - callback(mapInstance, markerList, drawObj); + popupCallback(mapInstance, markerList, drawObj); const distance = getDrawDistance(drawObj, 'draw_line_string'); totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; } else { @@ -728,12 +731,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { } } } - // if (drawMode === 'direct_select') { - // if (drawMode === 'draw_line_string') { - // const markerList = getDintancePointPopupList(drawObj); - // callback(mapInstance, markerList, drawObj); - // } - // } + if (drawMode === 'draw_line_string') { if (drawObj.getAll().features[0].geometry.coordinates.length === 1) { mouseCursorRef.current.style.display = 'block'; @@ -742,25 +740,43 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { mouseCursorRef.current.innerText = '시작점 선택'; } } + + if (drawMode === 'draw_polygon') { + if (drawObj.getAll().features[0].geometry.coordinates[0].length === 2) { + mouseCursorRef.current.style.display = 'block'; + mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px'; + mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px'; + mouseCursorRef.current.innerText = '시작점 선택'; + } + } }); mapInstance.on('mouseout', e => { mouseCursorRef.current.style.display = 'none'; }); - mapInstance.on('draw.create', () => { - // totalDistanceRef.current.style.display = 'block'; - // const distance = getDrawDistance(drawObj); - // totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; + mapInstance.on('draw.create', e => { + console.log(e); + drawEndCallback(e.features.length); mouseCursorRef.current.style.display = 'none'; mouseCursorRef.current.style.innerText = ''; startPoint = null; }); + + mapInstance.on('draw.modechange', (obj, e) => { + if (obj.mode === 'simple_select') { + const featuresLength = drawObj.getAll().features.length; + if (!featuresLength) { + console.log('!?!?'); + drawEndCallback(drawObj.getAll().features.length); + } + } + }); }; /** * * @param {MapboxDraw} drawObj - * @returns 총 거리 : number + * @returns 총 거리 : string */ export const getDrawDistance = (drawObj, drawMode) => { const drawGeometry = drawObj.getAll().features[0]; @@ -788,6 +804,11 @@ export const getDrawDistance = (drawObj, drawMode) => { return distance; }; +/** + * + * @param {MapboxDraw} drawObj + * @returns 면적 : string + */ export const getArea = drawObj => { const drawGeometry = drawObj.getAll().features[0]; let area = 0;