public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

cahnged design drawer

Browse Source 
improved map drawing tool
This commit is contained in:
Quentin Roussel
2024-03-29 16:01:03 +01:00
parent ed2e324a45
commit 198acdc699
5 changed files with 90 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
traque-front/components/admin/mapPicker.jsx
View File

@@ -3,6 +3,7 @@ import { useLocation } from "@/hook/useLocation";
import { use, useEffect, useState } from "react";
import "leaflet/dist/leaflet.css";
import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
import { useMapCircleDraw } from "@/hook/mapDrawing";
function MapPan(props) {
const map = useMap();
@@ -34,36 +35,26 @@ function MapEventListener({onClick, onMouseMove}) {
return null;
}
const DEFAULT_ZOOM = 17;
export function CircularAreaPicker({area, setArea, ...props}) {
const DEFAULT_ZOOM = 17;
const location = useLocation(Infinity);
const [drawing, setDrawing] = useState(false);
const [center, setCenter] = useState(area?.center || null);
const [radius, setRadius] = useState(area?.radius || null);
const {handleClick, handleMouseMove, center, radius} = useMapCircleDraw(area, setArea);
return (
<MapContainer {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{center && radius && <Circle center={center} radius={radius} fillColor="blue"/>}
<MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer>)
}
useEffect(() => {
console.log(area)
setDrawing(false);
setCenter(area?.center || null);
setRadius(area?.radius || null);
}, [area])
function handleClick(e) {
if(!drawing) {
setCenter(e.latlng);
setRadius(null);
setDrawing(true);
} else {
setDrawing(false);
setArea({center, radius});
}
}
function handleMouseMove(e) {
if(drawing) {
setRadius(e.latlng.distanceTo(center));
}
}
export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
const location = useLocation(Infinity);
const {handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius} = useMapCircleDraw(minArea, setMinArea);
const {handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius} = useMapCircleDraw(maxArea, setMaxArea);
return (
<MapContainer {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
<TileLayer