Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-17 22:51: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

48
src/Map.js
View File

@ -46,7 +46,7 @@ function min_max(request)
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 tarace = 0;
@ -54,25 +54,25 @@ function list_polygons(request, center, ratio, ind, cb, selectedRoom)
{
polygons = [...polygons, ((request[k]).map((y) => {
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)
}
else if (ind === 1)
/*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];
}
*/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) => {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)
@ -83,13 +83,13 @@ function containsRoom(request, selectedRoom)
}
}
return 0;
}
}*/
function layers_list(requestList, cb, selectedRoom)
function layers_list(/*requestList*/request, cb, selectedRoom)
{
let layers = [];
requestList.forEach( (request, ind) =>
{
// let layers = [];
// requestList.forEach( (request, ind) =>
// {
const minMaxXY = min_max(request);
const minX = minMaxXY[0];
const maxX = minMaxXY[1];
@ -97,14 +97,12 @@ function layers_list(requestList, 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)
// console.log((maxY-minY)/2284);
// console.log((maxX-minX)/135);
// console.log(ratio);
const polygons = list_polygons(request, center, ratio, ind, cb, selectedRoom);
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;
const polygons = list_polygons(request, center, ratio,/* ind,*/ 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})
@ -112,15 +110,15 @@ 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
const buildLayers = React.useCallback((request2, request3, request4, callbackRoomSelected, selectedRoom) => {
return layers_list([request2, request3, request4], callbackRoomSelected, selectedRoom);
}, [request2, request3, request4, callbackRoomSelected, 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 layers = buildLayers(request2, request3, request4);
const layers = buildLayers(request3);
return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>
<LayersControl position="topright">
//<LayersControl position="topright">
{layers}
</LayersControl>
//</LayersControl>
</MapContainer>
/*
return <MapContainer center={[0,0]} zoom={0} scrollWheelZoom={true} style={{flexGrow: '1'}}>