commentage du code

src/Map.js

@@ -15,7 +15,9 @@ import request3 from "./M-GN1-3.json"
 import request4 from "./M-GN1-4.json"
 import { useMapEvent, useMap } from 'react-leaflet/hooks'
 
-function polygonCenter(polygon) {
+function polygonCenter(polygon)
+{
+  // Function to calculate the central point of a given polygon
   let minX = -1;
   let minY = -1;
   let maxX = -1;
@@ -38,6 +40,8 @@ function polygonCenter(polygon) {
 }
 
 function min_max(request) {
+  // Function to calculate the minimal and maximal coordinates of all the points in a request
+  // (it being a list of polygons, a polygon being a list of points, a point being a list of 2 coordinates)
   let minX = -1;
   let minY = -1;
   let maxX = -1;
@@ -65,6 +69,8 @@ function min_max(request) {
 
 function Stairs({position, body})
 {
+  // React class (in function form) to represent stairs, takes the position where to put the stairs logo
+  // and the body of the popup of the stairs (list of floors accessible from that staircase)
   const map = useMap();
   const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: stairs, iconSize: [40, 40] }));
   const mmap = useMapEvent('zoomend', () => {console.log("ca zoom"); setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))});
@@ -75,6 +81,8 @@ function Stairs({position, body})
 
 function Lift({position, body})
 {
+  // React class (in function form) to represent lifts, takes the position where to put the lift logo
+  // and the body of the popup of the lift (list of floors accessible from that lift)
   const map = useMap();
   const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: lift, iconSize: [20, 20] }));
   const mmap = useMapEvent('zoomend', () => {console.log("ca zoom"); setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
@@ -83,10 +91,17 @@ function Lift({position, body})
   </Marker>
 }
 
-function list_polygons(request, center, ratio, cb, selectedRoom) {
+function list_polygons(request, center, ratio, cb, selectedRoom)
+{
+  // Function to calculate the list of polygons (React components)
+  // Taking the request as parameter, the center of the points of the request
+  // and the ratio to apply (zoom) as well as a callback (cb) to interact with the
+  // global web interface when a room is clicked (allowing the display of room informations)
+
   console.log(selectedRoom);
   let polygons = [];
-  for (const k in request) {
+  for (const k in request)
+  {
     polygons = [...polygons, ((request[k]).map((y) => {
       return y.map((z) => {
 
@@ -94,7 +109,9 @@ function list_polygons(request, center, ratio, cb, selectedRoom) {
       })
     })).map((x) => {
       const color = selectedRoom === k ? 'red' : 'grey';
-      if (k === "salle-M-GN1-X-aa" || k === "salle-M-GN1-X-ab" || k === "salle-M-GN1-X-ac" || k === "salle-M-GN1-X-ad") {
+      if (k === "salle-M-GN1-X-aa" || k === "salle-M-GN1-X-ab" || k === "salle-M-GN1-X-ac" || k === "salle-M-GN1-X-ad")
+      {
+        // In this case, the room is a staircase so we add a Stairs component
         return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}>
           <Tooltip>{k}</Tooltip>
           <Stairs position={polygonCenter(x)} body={<Popup>
@@ -109,7 +126,9 @@ function list_polygons(request, center, ratio, cb, selectedRoom) {
           />
         </Polygon>
       }
-      else if (k === "salle-M-GN1-X-ag" || k === "salle-M-GN1-X-ah") {
+      else if (k === "salle-M-GN1-X-ag" || k === "salle-M-GN1-X-ah")
+      {
+        // In this case the room is a lift so we add a Lift component
         return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}>
           <Tooltip>{k}</Tooltip>
           <Lift position={polygonCenter(x)} body={<Popup>
@@ -124,7 +143,9 @@ function list_polygons(request, center, ratio, cb, selectedRoom) {
           />
         </Polygon>
       }
-      else {
+      else
+      {
+        // In this case it is a regular room
         return <Polygon positions={x} key={k + color} color={color} eventHandlers={{click: () => cb(k)}}>
           <Tooltip>{k}</Tooltip>
         </Polygon>
@@ -135,7 +156,9 @@ function list_polygons(request, center, ratio, cb, selectedRoom) {
 }
 
 
-function buildPols(request, cb, selectedRoom) {
+function buildPols(request, cb, selectedRoom)
+{
+  // This function just calls the list_polygons one with appropriate parameters (precalculate ratio and center)
   const minMaxXY = min_max(request);
   const minX = minMaxXY[0];
   const maxX = minMaxXY[1];
@@ -147,7 +170,8 @@ function buildPols(request, cb, selectedRoom) {
   return polygons;
 }
 
-function Map({ callbackRoomSelected, selectedRoom }) {
+function Map({ callbackRoomSelected, selectedRoom })
+{
   // When the user selects a room on the map, call callbackRoomSelected.
   // The room that is currently selected is selectedRoom. It is null if no room
   // is selected