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

Added placement zones

Browse Source
This commit is contained in:
Sebastien Riviere
2025-09-07 17:24:29 +02:00
parent 93f9a05b1a
commit 75f8b10ecd
17 changed files with 436 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
traque-front/components/layer.jsx
View File

@@ -9,7 +9,7 @@ export function Node({pos, nodeSize = 5, color = 'black'}) {
);
}
export function LabeledPolygon({polygon, number, color = 'black', opacity = '0.5', border = 3, iconSize = 24, iconColor = 'white'}) {
export function LabeledPolygon({polygon, label, color = 'black', opacity = '0.5', border = 3, iconSize = 24, iconColor = 'white'}) {
const length = polygon.length;
if (length < 3) return null;
@@ -26,7 +26,7 @@ export function LabeledPolygon({polygon, number, color = 'black', opacity = '0.5
// Idea : take the mean point of the largest connected subpolygon
const meanPoint = {lat: sum.lat / length, lng: sum.lng / length}
const numberIcon = L.divIcon({
const labelIcon = L.divIcon({
html: `<div style="
display: flex;
align-items: center;
@@ -34,15 +34,15 @@ export function LabeledPolygon({polygon, number, color = 'black', opacity = '0.5
color: ${iconColor};
font-weight: bold;
font-size: ${iconSize}px;
">${number}</div>`,
className: 'custom-number-icon',
">${label}</div>`,
className: 'custom-label-icon',
iconSize: [iconSize, iconSize],
iconAnchor: [iconSize / 2, iconSize / 2]
});
return (<>
<Polygon positions={polygon} pathOptions={{ color: color, fillColor: color, fillOpacity: opacity, weight: border }} />
<Marker position={meanPoint} icon={numberIcon} />
<Marker position={meanPoint} icon={labelIcon} />
</>);
}