From 19cda34e4a250810f49b200854006d54463a04eb Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Wed, 14 Aug 2024 14:22:52 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B1=B0=EB=A6=AC=EC=B8=A1=EC=A0=95=20?= =?UTF-8?q?=EB=B0=98=EA=B2=BD=20=EC=9E=85=EB=A0=A5=EA=B0=92=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/input/index.tsx | 8 +- .../flight/ControlApprovalsContainer.js | 78 +++++++++++++++++-- .../flight/OperationApprovalsContainer.js | 78 ++++++++++++++++++- 3 files changed, 157 insertions(+), 7 deletions(-) diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index 52f1261c..386194ad 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx @@ -25,6 +25,8 @@ interface Props { disabled?: boolean; onBlur?: (event: React.FocusEvent) => void; onKeyPress?: (event: React.KeyboardEvent) => void; + onKeyDown?: (event: React.KeyboardEvent) => void; + onFocus?: (event: React.FocusEvent) => void; style?: any; } @@ -70,7 +72,9 @@ const CustomInput = forwardRef( placeholder, disabled = false, onKeyPress, - onBlur + onBlur, + onFocus, + onKeyDown }, ref ) => { @@ -94,6 +98,8 @@ const CustomInput = forwardRef( disabled={disabled} onBlur={onBlur} onKeyPress={onKeyPress} + onFocus={onFocus} + onKeyDown={onKeyDown} > {children} diff --git a/src/containers/flight/ControlApprovalsContainer.js b/src/containers/flight/ControlApprovalsContainer.js index c7554d12..4e22ba07 100644 --- a/src/containers/flight/ControlApprovalsContainer.js +++ b/src/containers/flight/ControlApprovalsContainer.js @@ -33,6 +33,7 @@ import { Card, ButtonGroup, Button, Input } from '@component/ui'; import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; import { X } from 'react-feather'; import mapboxgl from 'mapbox-gl'; +import * as turf from '@turf/turf'; let distanceMarkers = []; @@ -86,6 +87,7 @@ export default function ControlApprovalsContainer({ mode }) { const totalAreaRef = useRef(null); const mouseCursorRef = useRef(null); const distanceBoxRef = useRef(null); + const [metersRadius, setMetersRadius] = useState('0m'); // 비행구역 (관제과) 레이어 const controlLayer = { @@ -310,6 +312,8 @@ export default function ControlApprovalsContainer({ mode }) { dispatch(clientSaveAreaCoordinateList([area])); handlerMapInit(); + setMetersRadius('0m'); + handlerDistanceClose(); }; const handlerMapInit = () => { @@ -711,11 +715,75 @@ export default function ControlApprovalsContainer({ mode }) {

- + {selected && drawObj.getMode() === 'simple_select' && ( + { + const input = e.target; + const { value } = input; + if (e.key === 'Backspace') { + if (input.length > 2) { + input.setSelectionRange( + value.length - 2, + value.length - 2 + ); + } else { + input.setSelectionRange( + value.length - 1, + value.length - 1 + ); + } + } else if (e.key === 'Enter') { + let val = value.replace(/[^\d.]/g, ''); + if (!val) return; + const sources = drawObj.getAll(); + + const option = { + steps: 0, + units: 'meters' + }; + const rad = turf.circle( + sources.features[0].geometry.coordinates[0], + parseInt(val), + option + ); + + drawObj.set({ + type: 'FeatureCollection', + features: [ + { ...sources.features[0] }, + { + type: 'Feature', + properties: {}, + id: 'pal_Polygon_string', + geometry: { ...rad.geometry } + } + ] + }); + } + }} + onChange={e => { + const target = e.target; + const { value, selectionStart } = target; + // const numericValue = value.replace(/[^\d.]/g, ''); + + setMetersRadius( + value + .replace(/^0+/, '') // 맨 앞의 0 제거 + .replace(/[^\d.]/g, '') // 숫자가 아닌 문자 제거 + .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'm' + ); + }} + onBlur={() => { + if (metersRadius === 'm') { + setMetersRadius('0m'); + } + }} + /> + )}

diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index e2e0710e..bc82f5d3 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -29,7 +29,7 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk'; import logo from '../../assets/images/logo/kac_logo_ icon.svg'; import { AiOutlinePoweroff } from 'react-icons/ai'; import WebsocketClient from '../../components/websocket/WebsocketClient'; -import { Card, ButtonGroup, Button } from '@component/ui'; +import { Card, ButtonGroup, Button, Input } from '@component/ui'; import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; import { X } from 'react-feather'; @@ -91,6 +91,7 @@ export default function OperationApprovalsContainer({ mode }) { const totalAreaRef = useRef(null); const mouseCursorRef = useRef(null); const distanceBoxRef = useRef(null); + const [metersRadius, setMetersRadius] = useState('0m'); // 비행구역 (운항과) 레이어 const operationLayer = { @@ -359,6 +360,8 @@ export default function OperationApprovalsContainer({ mode }) { setSelected([area[0].planAreaSno]); } setSelectedPlanSno(area[0].planSno); + setMetersRadius('0m'); + handlerDistanceClose(); } else { setSelected([]); setSelectedPlanSno([]); @@ -857,6 +860,79 @@ export default function OperationApprovalsContainer({ mode }) { 총 거리 : 1050.24m

+ +

+ {selectedPlanSno && + drawObj.getMode() === 'simple_select' && ( + { + const input = e.target; + const { value } = input; + if (e.key === 'Backspace') { + if (input.length > 2) { + input.setSelectionRange( + value.length - 2, + value.length - 2 + ); + } else { + input.setSelectionRange( + value.length - 1, + value.length - 1 + ); + } + } else if (e.key === 'Enter') { + let val = value.replace(/[^\d.]/g, ''); + if (!val) return; + const sources = drawObj.getAll(); + + const option = { + steps: 0, + units: 'meters' + }; + const rad = turf.circle( + sources.features[0].geometry.coordinates[0], + parseInt(val), + option + ); + + drawObj.set({ + type: 'FeatureCollection', + features: [ + { ...sources.features[0] }, + { + type: 'Feature', + properties: {}, + id: 'pal_Polygon_string', + geometry: { ...rad.geometry } + } + ] + }); + } + }} + onChange={e => { + const target = e.target; + const { value, selectionStart } = target; + // const numericValue = value.replace(/[^\d.]/g, ''); + + setMetersRadius( + value + .replace(/^0+/, '') // 맨 앞의 0 제거 + .replace(/[^\d.]/g, '') // 숫자가 아닌 문자 제거 + .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'm' + ); + }} + onBlur={() => { + if (metersRadius === 'm') { + setMetersRadius('0m'); + } + }} + /> + )} +