Reparation des connexions (qui causait un crash quand on cliquait sur ascneseur/escalier) et ajout du tracage des couloirs

This commit is contained in:
Gabriel Dehame 2023-02-28 18:26:04 +01:00
parent 45181ad049
commit b06eec2c37

View File

@ -2,9 +2,7 @@ import { MapContainer } from 'react-leaflet/MapContainer';
import { Marker } from 'react-leaflet/Marker';
import { Popup } from 'react-leaflet/Popup';
import { Polygon } from 'react-leaflet/Polygon';
import { LayersControl } from 'react-leaflet/LayersControl'
import { LayerGroup } from 'react-leaflet/LayerGroup'
import { Tooltip } from 'react-leaflet/Tooltip'
import { Tooltip } from 'react-leaflet/Tooltip';
import { useState, useEffect } from "react";
import React from 'react';
import L from 'leaflet';
@ -19,7 +17,7 @@ function Stairs({position, size, body})
// 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: size }));
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))});
useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))});
return <Marker position={position} icon={markerIcon}>
{body}
</Marker>
@ -31,7 +29,7 @@ function Lift({position, size, body})
// 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: size }));
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
return <Marker position={position} icon={markerIcon}>
{body}
</Marker>
@ -43,7 +41,7 @@ function Toilet({position, size})
// 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: toilet, iconSize: size }));
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: toilet, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: toilet, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
return <Marker position={position} icon={markerIcon}/>
}
@ -145,8 +143,8 @@ function floorList(connectedFloors, callbackChangeFloor)
let htmlFloorList = [];
for (const floor in connectedFloors)
{
htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]);}}>
{connectedFloors[floor]}
htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]);}}>
{connectedFloors[floor]["name"]}
</li>];
}
return htmlFloorList;
@ -195,6 +193,13 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
<Tooltip>{element["id"]}</Tooltip>
</Polygon>
}
else if (element["type"] === "C")
{
// In this case it is a corridor
return <Polygon positions={positions} key={element["id"] + color} color={"peru"} eventHandlers={{click: () => callbackRoomSelected(element["id"])}}>
<Tooltip>{element["id"]}</Tooltip>
</Polygon>
}
}
function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor)