diff --git a/frontend/package.json b/frontend/package.json index 54540a1..1049d89 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,38 +1,37 @@ { - "name": "vite-template-solid", - "version": "0.0.0", - "engine": "19.3.0", - "description": "", - "scripts": { - "start": "vite", - "dev": "vite --debug", - "build": "vite build", - "serve": "vite preview" - }, - "license": "MIT", - "devDependencies": { - "@types/leaflet": "^1.9.0", - "@types/proj4": "^2.5.2", - "@vitejs/plugin-basic-ssl": "^1.0.1", - "eslint": "^8.32.0", - "eslint-plugin-solid": "^0.9.3", - "sass": "^1.62.0", - "typescript": "^4.9.4", - "typescript-eslint-language-service": "^5.0.0", - "vite": "^4.0.3", - "vite-plugin-solid": "^2.5.0" - }, - "dependencies": { - "@hope-ui/solid": "^0.6.7", - "@motionone/solid": "^10.15.5", - "@solid-primitives/date": "^2.0.5", - "@solid-primitives/scroll": "^2.0.10", - "@stitches/core": "^1.2.8", - "date-fns": "^2.29.3", - "matrix-widget-api": "^1.1.1", - "ol": "^7.3.0", - "proj4": "^2.9.0", - "solid-js": "^1.6.6", - "solid-transition-group": "^0.0.10" - } + "name": "vite-template-solid", + "version": "0.0.0", + "engine": "19.3.0", + "description": "", + "scripts": { + "start": "vite", + "dev": "vite --debug", + "build": "vite build", + "serve": "vite preview", + "bundle-visualizer": "npx vite-bundle-visualizer" + }, + "license": "MIT", + "devDependencies": { + "@types/leaflet": "^1.9.0", + "@vitejs/plugin-basic-ssl": "^1.0.1", + "eslint": "^8.32.0", + "eslint-plugin-solid": "^0.9.3", + "sass": "^1.62.0", + "typescript": "^4.9.4", + "typescript-eslint-language-service": "^5.0.0", + "vite": "^4.0.3", + "vite-bundle-visualizer": "^0.6.0", + "vite-plugin-solid": "^2.5.0" + }, + "dependencies": { + "@motionone/solid": "^10.15.5", + "@solid-primitives/date": "^2.0.5", + "@solid-primitives/scroll": "^2.0.10", + "@stitches/core": "^1.2.8", + "date-fns": "^2.29.3", + "matrix-widget-api": "^1.1.1", + "ol": "^7.3.0", + "solid-js": "^1.6.6", + "solid-transition-group": "^0.0.10" + } } diff --git a/frontend/src/stopsSearchMenu.tsx b/frontend/src/stopsSearchMenu.tsx index 6625016..d6fd3e2 100644 --- a/frontend/src/stopsSearchMenu.tsx +++ b/frontend/src/stopsSearchMenu.tsx @@ -12,29 +12,20 @@ import OlOverlay from 'ol/Overlay'; import OlPoint from 'ol/geom/Point'; import OlPolygon from 'ol/geom/Polygon'; import OlVectorSource from 'ol/source/Vector'; -import { fromLonLat, toLonLat } from 'ol/proj'; import { Tile as OlTileLayer, Vector as OlVectorLayer } from 'ol/layer'; import { Circle, Fill, Stroke, Style } from 'ol/style'; import { easeOut } from 'ol/easing'; import { getVectorContext } from 'ol/render'; import { unByKey } from 'ol/Observable'; -import { register } from 'ol/proj/proj4'; - -import proj4 from 'proj4'; - import { Stop, StopShape } from './types'; import { PositionedPanel, renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from './utils'; - import { AppContextContext, AppContextStore } from "./appContext"; import { BusinessDataContext, BusinessDataStore } from "./businessData"; import "./stopsSearchMenu.scss"; -proj4.defs("EPSG:2154", "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"); -register(proj4); - type ByStopIdMapFeatures = Record; interface SearchStore { @@ -166,7 +157,6 @@ function SearchProvider(props: { children: JSX.Element }) { setStore('mapFeatures', stopId, feature); }; - return ( = (props) => const { setSearchText } = searchStore; const onStopNameInput: JSX.EventHandler = async (event): Promise => { - /* TODO: Add a tempo before fetching stop for giving time to user to finish his request */ const stopName = event.currentTarget.value; if (stopName.length >= props.minCharsNb) { await setSearchText(stopName, businessDataStore); @@ -361,7 +350,6 @@ const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => { } const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore; - let stopsPanelsRef: HTMLDivElement | undefined = undefined const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef); const yStopsPanelsScroll = () => stopsPanelsScroll.y; @@ -507,15 +495,13 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop let feature = undefined; - if (props.stop.lat !== undefined && props.stop.lon !== undefined) { + if (props.stop.epsg3857_x !== undefined && props.stop.epsg3857_y !== undefined) { const selectStopStyle = () => { return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle); } - feature = new OlFeature({ - geometry: new OlPoint(fromLonLat([props.stop.lon, props.stop.lat])), + geometry: new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]), }); - feature.setStyle(selectStopStyle); } @@ -523,11 +509,10 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop let geometry = undefined; const areaShape = shape(); if (areaShape !== undefined) { - const transformed = areaShape.points.map(point => fromLonLat(toLonLat(point, 'EPSG:2154'))); - geometry = new OlPolygon([transformed.slice(0, -1)]); + geometry = new OlPolygon([areaShape.epsg3857_points.slice(0, -1)]); } else { - geometry = new OlPoint(fromLonLat([props.stop.lon, props.stop.lat])); + geometry = new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]); } feature = new OlFeature({ geometry: geometry }); feature.setStyle(stopAreaStyle); @@ -613,11 +598,11 @@ const Map: ParentComponent<{}> = () => { const stopId: number = feature.getId(); const stop = getStop(stopId); // TODO: Handle StopArea (use center given by the backend) - if (stop?.lat !== undefined && stop?.lon !== undefined) { + if (stop?.epsg3857_x !== undefined && stop?.epsg3857_y !== undefined) { setSelectedMapStop(stop); map?.getView().animate( { - center: fromLonLat([stop.lon, stop.lat]), + center: [stop.epsg3857_x, stop.epsg3857_y], duration: 1000 }, // Display the popup once the animation finished diff --git a/frontend/src/types.tsx b/frontend/src/types.tsx index 6af88e5..dd2da16 100644 --- a/frontend/src/types.tsx +++ b/frontend/src/types.tsx @@ -42,17 +42,17 @@ export class Stop { id: number; name: string; town: string; - lat: number; - lon: number; + epsg3857_x: number; + epsg3857_y: number; stops: Stop[]; lines: string[]; - constructor(id: number, name: string, town: string, lat: number, lon: number, stops: Stop[], lines: string[]) { + constructor(id: number, name: string, town: string, epsg3857_x: number, epsg3857_y: number, stops: Stop[], lines: string[]) { this.id = id; this.name = name; this.town = town; - this.lat = lat; - this.lon = lon; + this.epsg3857_x = epsg3857_x; + this.epsg3857_y = epsg3857_y; this.stops = stops; this.lines = lines; for (const stop of this.stops) { @@ -68,14 +68,14 @@ export type Points = [number, number][]; export class StopShape { stop_id: number; type_: number; - bounding_box: number[]; - points: Points; + epsg3857_bbox: number[]; + epsg3857_points: Points; - constructor(stop_id: number, type_: number, bounding_box: number[], points: Points) { + constructor(stop_id: number, type_: number, epsg3857_bbox: number[], epsg3857_points: Points) { this.stop_id = stop_id; this.type_ = type_; - this.bounding_box = bounding_box; - this.points = points; + this.epsg3857_bbox = epsg3857_bbox; + this.epsg3857_points = epsg3857_points; } };