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

Adaptation de Map.js pour gérer le changement d'étage hors de la carte

Browse Source
This commit is contained in:
Gabriel Dehame 2023-01-10 17:38:26 +01:00
parent c1ec6a07f4
commit c7d5356454
1 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/Map.js
View File

@ -46,7 +46,7 @@ function min_max(request)
return [minX, maxX, minY, maxY]; return [minX, maxX, minY, maxY];
} }
function list_polygons(request, center, ratio, ind, cb, selectedRoom) function list_polygons(request, center, ratio,/* ind,*/ cb, selectedRoom)
{ {
let polygons = []; let polygons = [];
//let tarace = 0; //let tarace = 0;
@ -54,25 +54,25 @@ function list_polygons(request, center, ratio, ind, cb, selectedRoom)
{ {
polygons = [...polygons, ((request[k]).map((y) => { polygons = [...polygons, ((request[k]).map((y) => {
return y.map((z) => { return y.map((z) => {
if (ind === 2) /*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) 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) /*else if (ind === 1)
{ {
return [-(z[1]-center[1])/25, (z[0]-center[0])/25]; return [-(z[1]-center[1])/25, (z[0]-center[0])/25];
} }
else else
{ {
return [(z[1]-center[1])/25, (z[0]-center[0])/25]; */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>})]; })).map((x) => {return <Polygon positions={x} key={k} color={selectedRoom === k ? 'red' : 'grey'} 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>})]; // })).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; return polygons;
} }
/*
function containsRoom(request, selectedRoom) function containsRoom(request, selectedRoom)
{ {
for (const k in request) for (const k in request)
@ -83,13 +83,13 @@ function containsRoom(request, selectedRoom)
} }
} }
return 0; return 0;
} }*/
function layers_list(requestList, cb, selectedRoom) function layers_list(/*requestList*/request, cb, selectedRoom)
{ {
let layers = []; // let layers = [];
requestList.forEach( (request, ind) => // requestList.forEach( (request, ind) =>
{ // {
const minMaxXY = min_max(request); const minMaxXY = min_max(request);
const minX = minMaxXY[0]; const minX = minMaxXY[0];
const maxX = minMaxXY[1]; const maxX = minMaxXY[1];
@ -97,30 +97,28 @@ function layers_list(requestList, cb, selectedRoom)
const maxY = minMaxXY[3]; const maxY = minMaxXY[3];
const center = [(maxX + minX)/2, (maxY + minY)/2]; 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 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)
// console.log((maxY-minY)/2284); const polygons = list_polygons(request, center, ratio,/* ind,*/ cb, selectedRoom);
// console.log((maxX-minX)/135); return polygons;
// console.log(ratio); // const floorContainsSelectedRoom = containsRoom(request, selectedRoom);
const polygons = list_polygons(request, center, ratio, ind, cb, 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>];
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;
})
return layers;
} }
function Map({callbackRoomSelected, selectedRoom}) function Map({callbackRoomSelected, selectedRoom})
{ {
// When the user selects a room on the map, call callbackRoomSelected. // 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 // The room that is currently selected is selectedRoom. It is null if no room
// is selected // is selected
const buildLayers = React.useCallback((request2, request3, request4, callbackRoomSelected, selectedRoom) => { const buildLayers = React.useCallback((/*request2, request3, request4,*/request, callbackRoomSelected, selectedRoom) => {
return layers_list([request2, request3, request4], callbackRoomSelected, selectedRoom); return layers_list(/*[request2, request3, request4]*/request, callbackRoomSelected, selectedRoom);
}, [request2, request3, request4, callbackRoomSelected, selectedRoom]); }, [/*request2, request3, request4,*/request3, callbackRoomSelected, selectedRoom]);
const layers = buildLayers(request2, request3, request4); const layers = buildLayers(request3);
return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}> return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>
<LayersControl position="topright"> //<LayersControl position="topright">
{layers} {layers}
</LayersControl> //</LayersControl>
</MapContainer> </MapContainer>
/* /*
return <MapContainer center={[0,0]} zoom={0} scrollWheelZoom={true} style={{flexGrow: '1'}}> return <MapContainer center={[0,0]} zoom={0} scrollWheelZoom={true} style={{flexGrow: '1'}}>