diff --git a/src/components/map/SelectMap.tsx b/src/components/map/SelectMap.tsx index 45ad3eb..4031f05 100644 --- a/src/components/map/SelectMap.tsx +++ b/src/components/map/SelectMap.tsx @@ -17,16 +17,30 @@ const IconSize = css({ function RectangleSelector({ isDrag = true, + bounds, + drawBounds, + onChange, + onDrawChange, }: { isDrag: boolean; + bounds: LatLngBounds | null; + drawBounds: LatLngBounds | null; + onChange: (bounds: LatLngBounds) => void; + onDrawChange: (bounds: LatLngBounds) => void; }) { const [firstPoint, setFirstPoint] = useState(null); + const lastLatlngRef = useRef(null); + const adjustLng = (latlng: LatLng): LatLng => { + const adjustedLng = ((((latlng.lng + 180) % 360) + 360) % 360) - 180; + return new L.LatLng(latlng.lat, adjustedLng); + }; + const map = useMapEvents({ mousedown(e) { if (!isDrag) { @@ -35,13 +49,19 @@ function RectangleSelector({ }, mousemove(e) { if (firstPoint) { - lastLatlngRef.current = e.latlng; - onChange(new L.LatLngBounds(firstPoint, e.latlng)); + lastLatlngRef.current = adjustLng(e.latlng); + onDrawChange(new L.LatLngBounds(firstPoint, e.latlng)); + onChange( + new L.LatLngBounds(adjustLng(firstPoint), adjustLng(e.latlng)) + ); } }, mouseup(e) { if (firstPoint) { - onChange(new L.LatLngBounds(firstPoint, e.latlng)); + onDrawChange(new L.LatLngBounds(firstPoint, e.latlng)); + onChange( + new L.LatLngBounds(adjustLng(firstPoint), adjustLng(e.latlng)) + ); setFirstPoint(null); } }, @@ -62,14 +82,18 @@ function RectangleSelector({ const touch = e.touches[0]; const latlng = map.mouseEventToLatLng(touch as any); lastLatlngRef.current = latlng; - onChange(new L.LatLngBounds(firstPoint, latlng)); + + onDrawChange(new L.LatLngBounds(firstPoint, latlng)); + onChange(new L.LatLngBounds(adjustLng(firstPoint), adjustLng(latlng))); } }; const handleTouchEnd = (e: TouchEvent) => { if (firstPoint) { const latlng = lastLatlngRef.current || firstPoint; - onChange(new L.LatLngBounds(firstPoint, latlng)); + + onDrawChange(new L.LatLngBounds(firstPoint, latlng)); + onChange(new L.LatLngBounds(adjustLng(firstPoint), adjustLng(latlng))); setFirstPoint(null); } }; @@ -91,8 +115,8 @@ function RectangleSelector({ } }, [isDrag, map]); - return bounds ? ( - + return drawBounds ? ( + ) : null; } @@ -105,6 +129,7 @@ export function MapComponent({ }) { const [isDrag, setIsDrag] = useState(true); const [bounds, setBounds] = useState(null); + const [drawBounds, setDrawBounds] = useState(null); const handleClickSwitchDrag = () => { setIsDrag(!isDrag); @@ -113,6 +138,7 @@ export function MapComponent({ const handleClickRemoveBox = () => { onRemove(); setBounds(null); + setDrawBounds(null); setIsDrag(true); }; @@ -121,6 +147,11 @@ export function MapComponent({ onDone([e._northEast, e._southWest]); }; + const handleChangeDraw = (e) => { + setDrawBounds(e); + onDone([e._northEast, e._southWest]); + }; + return (
diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 1919593..254c20b 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -137,7 +137,8 @@ function App() { Generate 3d map - Tools to create 3D maps based on maps and export them in 3D format + Tools to create 3D maps based on maps and export them in GLB + format