Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-18 23:21:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

commentage du code

Browse Source
This commit is contained in:
Gabriel Dehame 2023-02-07 17:25:34 +01:00
parent 8b6dea9964
commit db633043c2
1 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/Map.js
View File

@ -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