From 6bef1fa4c721c939add3463e904ec32cb109315f Mon Sep 17 00:00:00 2001 From: Adrien Vannson Date: Mon, 6 Mar 2023 10:41:54 +0100 Subject: [PATCH] Code format --- src/Map.js | 210 ++++++++++++++++++++++++----------------------------- 1 file changed, 93 insertions(+), 117 deletions(-) diff --git a/src/Map.js b/src/Map.js index 477a564..b9a36be 100644 --- a/src/Map.js +++ b/src/Map.js @@ -12,65 +12,71 @@ import toilet from "./toilet.png" import { useMapEvent, useMap } from 'react-leaflet/hooks'; import API_URL from './config'; -function Stairs({position, size, body}) -{ +function Stairs({ position, size, 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: size })); - 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 {body} } -function Lift({position, size, body}) -{ +function Lift({ position, size, 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: size })); - 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 {body} } -function Toilet({position, size}) -{ +function Toilet({ position, size }) { // 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: toilet, iconSize: size })); - useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: toilet, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))}); - return + useMapEvent('zoomend', () => { + setMarkerIcon(new L.Icon({ + iconUrl: toilet, + iconSize: [20 * Math.pow(2, map.getZoom() - 4), 20 * Math.pow(2, map.getZoom() - 4)] + })) + }); + return } -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; let maxY = -1; // We get the extremal coordinates - for (const ind in polygon) - { + for (const ind in polygon) { const pt = polygon[ind]; - if (minX === -1 || minX > pt[0]) - { + if (minX === -1 || minX > pt[0]) { minX = pt[0]; } - if (minY === -1 || minY > pt[1]) - { + if (minY === -1 || minY > pt[1]) { minY = pt[1]; } - if (maxY === -1 || maxY < pt[1]) - { + if (maxY === -1 || maxY < pt[1]) { maxY = pt[1]; } - if (maxX === -1 || maxX < pt[0]) - { + if (maxX === -1 || maxX < pt[0]) { maxX = pt[0]; } } @@ -78,8 +84,7 @@ function polygonCenter(polygon) return [(minX + maxX) / 2, (maxY + minY) / 2]; } -function logoSize(polygon) -{ +function logoSize(polygon) { // function to calculate the size of a logo to display // on a room which edges are in polygon let minX = -1; @@ -88,67 +93,54 @@ function logoSize(polygon) let maxY = -1; // We first calculate the maximal coordinates to then output // 75% the size of the room - for (const ind in polygon) - { + for (const ind in polygon) { const pt = polygon[ind]; - if (minX === -1 || minX > pt[0]) - { + if (minX === -1 || minX > pt[0]) { minX = pt[0]; } - if (minY === -1 || minY > pt[1]) - { + if (minY === -1 || minY > pt[1]) { minY = pt[1]; } - if (maxY === -1 || maxY < pt[1]) - { + if (maxY === -1 || maxY < pt[1]) { maxY = pt[1]; } - if (maxX === -1 || maxX < pt[0]) - { + if (maxX === -1 || maxX < pt[0]) { maxX = pt[0]; } } // For some unknown reason we have to multiply by 10 otherwise // it's almost invisible - const x = 30*(maxX - minX)/4; - const y = 30*(maxY - minY)/4; + const x = 30 * (maxX - minX) / 4; + const y = 30 * (maxY - minY) / 4; // We return a square size to make it better looking so we // take the minimal size of border - if (x < y) - { - return [x,x]; + if (x < y) { + return [x, x]; } - return [y,y]; + return [y, y]; } -function min_max(request) -{ +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; let maxY = -1; - for (const ind in request) - { + for (const ind in request) { const element = request[ind]; - for (const index in element["surface"]) - { + for (const index in element["surface"]) { const pt = element["surface"][index]; - if (minX === -1 || minX > pt["x"]) - { + if (minX === -1 || minX > pt["x"]) { minX = pt["x"]; } - if (minY === -1 || minY > pt["y"]) - { + if (minY === -1 || minY > pt["y"]) { minY = pt["y"]; } - if (maxY === -1 || maxY < pt["y"]) - { + if (maxY === -1 || maxY < pt["y"]) { maxY = pt["y"]; } - if (maxX === -1 || maxX < pt["x"]) - { + if (maxX === -1 || maxX < pt["x"]) { maxX = pt["x"]; } } @@ -156,38 +148,36 @@ function min_max(request) return [minX, maxX, minY, maxY]; } -function floorList(connectedFloors, callbackChangeFloor) -{ +function floorList(connectedFloors, callbackChangeFloor) { // Returns under html format a list of floors connected // listed in connectedFloors // Auxiliary function used when creating a Lift/Stairs component let htmlFloorList = []; - for (const floor in connectedFloors) - { - htmlFloorList = [...htmlFloorList,
  • {callbackChangeFloor(connectedFloors[floor]["id"]);}}> - {connectedFloors[floor]["name"]} -
    • ]; + for (const floor in connectedFloors) { + htmlFloorList = [ + ...htmlFloorList, +
  • {callbackChangeFloor(connectedFloors[floor]["id"]); }}> + {connectedFloors[floor]["name"]} +
    • + ]; } return htmlFloorList; } -function roomNameList(nameList) -{ +function roomNameList(nameList) { // Returns under html format a list of room names // (without bullet points) listed in nameList // Auxiliary function used when creating a Room component let htmlNameList = []; - for (const ind in nameList) - { + for (const ind in nameList) { htmlNameList = [...htmlNameList,
    - {nameList[ind]} -
    ]; + {nameList[ind]} + ]; } return htmlNameList; } -function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor) -{ +function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor) { // Auxiliary function to return the appropriate polygon depending // on wether it is a room (R), a lift (L), a staircase (S), toilets (T) or corridor (C) // For all except corridors we put a Tooltip with the name of the room @@ -195,64 +185,56 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call // and for S or L, we add a Popup with the list of connected floors and possibility to load the // map of a connected floor const color = selectedRoom === element["id"] ? 'red' : 'grey'; - if (element["type"] === "S") - { + if (element["type"] === "S") { // In this case, the room is a staircase so we add a Stairs component - return callbackRoomSelected(element["id"])}}> + return callbackRoomSelected(element["id"]) }}> {roomNameList(element["names"])} - {floorList(element["connectedFloors"], callbackChangeFloor)} - - } + {floorList(element["connectedFloors"], callbackChangeFloor)} + + } /> } - else if (element["type"] === "L") - { + else if (element["type"] === "L") { // In this case the room is a lift so we add a Lift component - return callbackRoomSelected(element["id"])}}> + return callbackRoomSelected(element["id"]) }}> {roomNameList(element["names"])} - {floorList(element["connectedFloors"], callbackChangeFloor)} - - } + {floorList(element["connectedFloors"], callbackChangeFloor)} + + } /> } - else if (element["type"] === "T") - { - return callbackRoomSelected(element["id"])}}> + else if (element["type"] === "T") { + return callbackRoomSelected(element["id"]) }}> {roomNameList(element["names"])} - + } - else if (element["type"] === "R") - { + else if (element["type"] === "R") { // In this case it is a regular room - return callbackRoomSelected(element["id"])}}> + return callbackRoomSelected(element["id"]) }}> {roomNameList(element["names"])} } - else if (element["type"] === "C") - { + else if (element["type"] === "C") { // In this case it is a corridor - return + return } } -function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor) -{ +function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor) { // Main function to calculate the list of polygons (React components) // Taking the request as parameter, the center of the points of the request // and a callback (callback) to interact with the global web interface // when a room is clicked (allowing the display of room informations) let polygons = []; - for (const ind in request) - { + for (const ind in request) { const element = request[ind]; // element can be a room, a lift, a staircase or toilets - const positions = (element["surface"]).map((pt) => - { + const positions = (element["surface"]).map((pt) => { // This function rotates and recenters de the map (should not be necessary once the real data are gathered. // It also changes the objects into lists of two coordinates to make it accepted by the "positions" attribute of // the "Polygon" react-leaflet component @@ -264,8 +246,7 @@ function list_polygons(request, center, callbackRoomSelected, selectedRoom, call return polygons; } -function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor) -{ +function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor) { // This function just calls the list_polygons one with appropriate parameters (precalculate center) const minMaxXY = min_max(request); const minX = minMaxXY[0]; @@ -277,8 +258,7 @@ function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFl return polygons; } -function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor}) -{ +function Map({ callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor }) { // 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 @@ -286,12 +266,11 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor}) const [floor, setFloor] = useState(null); const [error, setError] = useState(null); // We use the useEffect hook to fetch the data to build the Map - useEffect(() => - { - fetch(API_URL + "get_floor/"+floorID) - .then(response => response.json()) - .then(data => {setLoading(false); setFloor(data)}) - .catch((error) => {setError("API unreachable");}); + useEffect(() => { + fetch(API_URL + "get_floor/" + floorID) + .then(response => response.json()) + .then(data => { setLoading(false); setFloor(data) }) + .catch((error) => { setError("API unreachable"); }); }, [floorID]); // We distinguish wether to print an error, a loading message // or the map if we got the answer @@ -299,20 +278,17 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor}) const corner2 = L.latLng(50, 100); const bounds = L.latLngBounds(corner1, corner2); - if (error != null) - { + if (error != null) { return - {error} - ; + {error} + ; } - else if (loading) - { + else if (loading) { return - Loading map - ; + Loading map + ; } - else - { + else { const request = floor["places"]; /*const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => { return buildPols(request, callbackRoomSelected, selectedRoom);