From e870425ae86fe3de542ddb7f5179b17c50c43397 Mon Sep 17 00:00:00 2001
From: Gabriel Dehame <gabrieldehame@gmail.com>
Date: Sat, 21 Jan 2023 14:48:05 +0100
Subject: [PATCH] Ajout de l'affichage d'un icone escalier

---
 src/Map.js | 115 ++++++++++++++++++++++++-----------------------------
 1 file changed, 53 insertions(+), 62 deletions(-)

diff --git a/src/Map.js b/src/Map.js
index cf3deae..b84d05c 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -8,10 +8,39 @@ import { Tooltip } from 'react-leaflet/Tooltip'
 import { useState } from "react";
 import React from 'react';
 import L from 'leaflet';
+import "./stairs.png";
 import request2 from "./M-GN1-2.json"
 import request3 from "./M-GN1-3.json"
 import request4 from "./M-GN1-4.json"
 
+function polygonCenter(polygon)
+{
+  let minX = -1;
+  let minY = -1;
+  let maxX = -1;
+  let maxY = -1;
+  polygon.forEach( (pt) =>
+  {
+    if (minX === -1 || minX > pt[0])
+    {
+      minX = pt[0];
+    }
+    if (minY === -1 || minY > pt[1])
+    {
+      minY = pt[1];
+    }
+    if (maxY === -1 || maxY < pt[1])
+    {
+      maxY = pt[1];
+    }
+    if (maxX === -1 || maxX < pt[0])
+    {
+      maxX = pt[0];
+    }
+  })
+  return [(minX + maxX)/2, (maxY + minY)/2];
+}
+
 function min_max(request)
 {
   let minX = -1;
@@ -46,59 +75,41 @@ function min_max(request)
   return [minX, maxX, minY, maxY];
 }
 
-function list_polygons(request, center, ratio,/* ind,*/ cb, selectedRoom)
+
+function list_polygons(request, center, ratio, cb, selectedRoom)
 {
   console.log(selectedRoom);
   let polygons = [];
-  //let tarace = 0;
   for (const k in request)
   {
     polygons = [...polygons, ((request[k]).map((y) => {
       return y.map((z) => {
-        /*if (ind === 2)
-        {
-          return [-(z[0]-center[0])/25, (z[1]-center[1])/25]; //Centre en (0,0) + inverse verticalement car nord en bas sur map d'étage 4 + divise pour faire entrer dans l'espace dessinable (jsp pk on ne peut pas dessiner partout)
-        }*/
-        /*else if (ind === 1)
-        {*/
+
           return [-(z[1]-center[1])/25, (z[0]-center[0])/25];
-        //}
-        //else
-        //{
-        //  return [(z[1]-center[1])/25, (z[0]-center[0])/25];
-        //}
       })
     })).map((x) => {
-      //return <Polygon positions={x} key={k} color={selectedRoom === k ? 'red' : 'grey'} onClick={() => cb(k)}><Tooltip>{k}</Tooltip></Polygon>
-
       const color = selectedRoom === k ? 'red' : 'grey';
-
-      return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}>
-        <Tooltip>{k}</Tooltip>
-      </Polygon>
+      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")
+      {
+        return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}>
+            <Tooltip>{k}</Tooltip>
+            <Marker position={polygonCenter(x)} icon={new L.Icon({iconUrl: "http://getdrawings.com/img/stair-silhouette-30.png", iconSize: [40,40]})}></Marker>
+        </Polygon>
+      }
+      else
+      {
+        return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}>
+            <Tooltip>{k}</Tooltip>
+        </Polygon>
+      }
     })];
-//    })).map((x) => {tarace = tarace+1; return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}}><Tooltip permanent direction={tarace % 2 === 0 ? "bottom" : "top"}>{k}</Tooltip><Popup>Popup</Popup></Polygon>})];
   }
   return polygons;
 }
-/*
-function containsRoom(request, selectedRoom)
-{
-  for (const k in request)
-  {
-    if (k === selectedRoom)
-    {
-      return 1;
-    }
-  }
-  return 0;
-}*/
 
-function layers_list(/*requestList*/request, cb, selectedRoom)
+
+function buildPols(request, cb, selectedRoom)
 {
-//  let layers = [];
-//  requestList.forEach( (request, ind) =>
-//  {
     const minMaxXY = min_max(request);
     const minX = minMaxXY[0];
     const maxX = minMaxXY[1];
@@ -106,12 +117,8 @@ function layers_list(/*requestList*/request, cb, selectedRoom)
     const maxY = minMaxXY[3];
     const center = [(maxX + minX)/2, (maxY + minY)/2];
     const ratio = Math.ceil(Math.max((maxY-minY)/2284, (maxX-minX)/135)); //A priori ca devrait être convenable mais là ca ne fonctionne pas, je pense que c'est pck le SVG n'utilise pas des coordonnées et ducoup y'a des trucs bizarre (notamment les étages 3 et 4 n'ont pas du tout la même longueur ni même largeur)
-    const polygons = list_polygons(request, center, ratio,/* ind,*/ cb, selectedRoom);
+    const polygons = list_polygons(request, center, ratio, cb, selectedRoom);
     return polygons;
-//    const floorContainsSelectedRoom = containsRoom(request, selectedRoom);
-//    layers = [...layers, <LayersControl.BaseLayer checked={ (floorContainsSelectedRoom === 1 || (selectedRoom === null && ind === 1)) ? true : false} name={"Floor "+String(ind+2)} key={ind}><LayerGroup> {polygons} </LayerGroup></LayersControl.BaseLayer>];
-//  })
-//  return layers;
 }
 
 function Map({callbackRoomSelected, selectedRoom})
@@ -120,30 +127,14 @@ function Map({callbackRoomSelected, selectedRoom})
   // The room that is currently selected is selectedRoom. It is null if no room
   // is selected
   console.log(selectedRoom);
-  const buildLayers = React.useCallback((/*request2, request3, request4,*/request, callbackRoomSelected, selectedRoom) => {
-    return layers_list(/*[request2, request3, request4]*/request, callbackRoomSelected, selectedRoom);
-  }, [/*request2, request3, request4,*/request3, callbackRoomSelected, selectedRoom]);
+  const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => {
+    return buildPols(request, callbackRoomSelected, selectedRoom);
+  }, [request3, callbackRoomSelected, selectedRoom]);
 
-  const layers = buildLayers(request3, callbackRoomSelected, selectedRoom);
+  const polygons = createPolygons(request3, callbackRoomSelected, selectedRoom);
   return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>
-    {layers}
+    {polygons}
   </MapContainer>
-
-  /*return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>
-    <LayersControl position="topright">
-      {layers}
-    </LayersControl>
-  </MapContainer>
-*/
-/*
-  return <MapContainer center={[0,0]} zoom={0} scrollWheelZoom={true} style={{flexGrow: '1'}}>
-  <Polygon positions={[[85,-1142],[85,1142],[-85,1142],[-85,-1142]]}></Polygon>
-    <Marker position={[0,0]}>
-      <Popup>
-        CENTER OF THE MAP
-      </Popup>
-    </Marker>
-  </MapContainer>*/
 }
 
 export default Map;