Arrows + marker click focus

traque-front/app/admin/parameters/components/polygonZoneSelector.jsx

@@ -1,98 +1,27 @@
 import { useEffect, useState } from "react";
-import { Polyline, Polygon, CircleMarker, Marker } from "react-leaflet";
+import { Polyline, Polygon, Marker } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import { GreenButton } from "@/components/button";
 import { ReorderList } from "@/components/list";
 import { CustomMapContainer, MapEventListener } from "@/components/map";
 import { TextInput } from "@/components/input";
+import { Node, LabeledPolygon } from "@/components/layer";
 import useAdmin from "@/hook/useAdmin";
 import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
 import useLocalVariable from "@/hook/useLocalVariable";
 
 function Drawings({ polygons, addPolygon, removePolygon }) {
     const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addPolygon, removePolygon);
-    const nodeSize = 5; // px
-    const lineThickness = 3; // px
 
-    function DrawNode({pos, color}) {
-        return (
-            <CircleMarker center={pos} radius={nodeSize} pathOptions={{ color: color, fillColor: color, fillOpacity: 1 }} />
-        );
-    }
-
-    function DrawLine({pos1, pos2, color}) {
-        return (
-            <Polyline positions={[pos1, pos2]} pathOptions={{ color: color, weight: lineThickness }} />
-        );
-    }
-
-    function DrawUnfinishedPolygon({polygon}) {
-        const length = polygon.length;
-        if (length > 0) {
-            return (
-                <div>
-                    <DrawNode pos={polygon[0]} color={"red"} zIndexOffset={1000} />
-                    {polygon.map((_, i) => {
-                        if (i < length-1) {
-                            return <DrawLine key={i} pos1={polygon[i]} pos2={polygon[i+1]} color={"red"} />;
-                        } else {
-                            return null;
-                        }
-                    })}
-                </div>
-            );
-        }
-    }
-
-    function DrawPolygon({polygon, number}) {
-        const length = polygon.length;
-
-        if (length < 3) return null;
-
-        const sum = polygon.reduce(
-            (acc, coord) => ({
-                lat: acc.lat + coord.lat,
-                lng: acc.lng + coord.lng
-            }),
-            { lat: 0, lng: 0 }
-        );
-
-        // meanPoint can be out of the polygon
-        // Idea : take the mean point of the largest connected subpolygon
-        const meanPoint = {lat: sum.lat / length, lng: sum.lng / length}
-
-        const numberIcon = L.divIcon({
-            html: `<div style="
-                font-size: 30px;
-                height: 30px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: white;
-                font-weight: bold;
-                font-size: 25px;
-            ">${number}</div>`,
-            className: 'custom-number-icon',
-            iconSize: [30, 30],
-            iconAnchor: [15, 15]
-        });
-
-        return (
-            <div>
-                <Polygon positions={polygon} pathOptions={{ color: 'black', fillColor: 'black', fillOpacity: '0.5', weight: lineThickness }} />
-                <Marker position={meanPoint} icon={numberIcon} />
-            </div>
-        );
-    }
-
-    return (
-        <div>
-            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
-            {polygons.map((polygon, i) => <DrawPolygon key={i} polygon={polygon} number={i+1} />)}
-            <DrawUnfinishedPolygon polygon={currentPolygon} />
-            {highlightNodes.map((node, i) => <DrawNode key={i} pos={node} color={"black"} />)}
-        </div>
-    );
+    return (<>
+        <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
+        {polygons.map((polygon, i) => <LabeledPolygon key={i} polygon={polygon} number={i+1} />)}
+        { currentPolygon.length > 0 && <>
+            <Node pos={currentPolygon[0]} color={"red"} />
+            <Polyline positions={currentPolygon} pathOptions={{ color: "red", weight: 3 }} />
+        </>}
+        {highlightNodes.map((node, i) => <Node key={i} pos={node} color={"black"} />)}
+    </>);
 }
 
 export default function PolygonZoneSelector({zoneSettings, modifyZoneSettings, applyZoneSettings}) {