Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

⚡️ All provided location are in EPSG:3857, remove proj4 from frontend

Browse Source
This commit is contained in:
Adrien
2023-04-23 11:20:44 +02:00
parent d94027da9a
commit 245bc4d261
3 changed files with 51 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/package.json
View File

@@ -7,12 +7,12 @@
"start": "vite", "start": "vite",
"dev": "vite --debug", "dev": "vite --debug",
"build": "vite build", "build": "vite build",
"serve": "vite preview" "serve": "vite preview",
"bundle-visualizer": "npx vite-bundle-visualizer"
}, },
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@types/leaflet": "^1.9.0", "@types/leaflet": "^1.9.0",
"@types/proj4": "^2.5.2",
"@vitejs/plugin-basic-ssl": "^1.0.1", "@vitejs/plugin-basic-ssl": "^1.0.1",
"eslint": "^8.32.0", "eslint": "^8.32.0",
"eslint-plugin-solid": "^0.9.3", "eslint-plugin-solid": "^0.9.3",
@@ -20,10 +20,10 @@
"typescript": "^4.9.4", "typescript": "^4.9.4",
"typescript-eslint-language-service": "^5.0.0", "typescript-eslint-language-service": "^5.0.0",
"vite": "^4.0.3", "vite": "^4.0.3",
"vite-bundle-visualizer": "^0.6.0",
"vite-plugin-solid": "^2.5.0" "vite-plugin-solid": "^2.5.0"
}, },
"dependencies": { "dependencies": {
"@hope-ui/solid": "^0.6.7",
"@motionone/solid": "^10.15.5", "@motionone/solid": "^10.15.5",
"@solid-primitives/date": "^2.0.5", "@solid-primitives/date": "^2.0.5",
"@solid-primitives/scroll": "^2.0.10", "@solid-primitives/scroll": "^2.0.10",
@@ -31,7 +31,6 @@
"date-fns": "^2.29.3", "date-fns": "^2.29.3",
"matrix-widget-api": "^1.1.1", "matrix-widget-api": "^1.1.1",
"ol": "^7.3.0", "ol": "^7.3.0",
"proj4": "^2.9.0",
"solid-js": "^1.6.6", "solid-js": "^1.6.6",
"solid-transition-group": "^0.0.10" "solid-transition-group": "^0.0.10"
} }

27
frontend/src/stopsSearchMenu.tsx
View File

@@ -12,29 +12,20 @@ import OlOverlay from 'ol/Overlay';
import OlPoint from 'ol/geom/Point'; import OlPoint from 'ol/geom/Point';
import OlPolygon from 'ol/geom/Polygon'; import OlPolygon from 'ol/geom/Polygon';
import OlVectorSource from 'ol/source/Vector'; import OlVectorSource from 'ol/source/Vector';
import { fromLonLat, toLonLat } from 'ol/proj';
import { Tile as OlTileLayer, Vector as OlVectorLayer } from 'ol/layer'; import { Tile as OlTileLayer, Vector as OlVectorLayer } from 'ol/layer';
import { Circle, Fill, Stroke, Style } from 'ol/style'; import { Circle, Fill, Stroke, Style } from 'ol/style';
import { easeOut } from 'ol/easing'; import { easeOut } from 'ol/easing';
import { getVectorContext } from 'ol/render'; import { getVectorContext } from 'ol/render';
import { unByKey } from 'ol/Observable'; import { unByKey } from 'ol/Observable';
import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
import { Stop, StopShape } from './types'; import { Stop, StopShape } from './types';
import { PositionedPanel, renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from './utils'; import { PositionedPanel, renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from './utils';
import { AppContextContext, AppContextStore } from "./appContext"; import { AppContextContext, AppContextStore } from "./appContext";
import { BusinessDataContext, BusinessDataStore } from "./businessData"; import { BusinessDataContext, BusinessDataStore } from "./businessData";
import "./stopsSearchMenu.scss"; 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<number, OlFeature>; type ByStopIdMapFeatures = Record<number, OlFeature>;
interface SearchStore { interface SearchStore {
@@ -166,7 +157,6 @@ function SearchProvider(props: { children: JSX.Element }) {
setStore('mapFeatures', stopId, feature); setStore('mapFeatures', stopId, feature);
}; };
return ( return (
<SearchContext.Provider value={{ <SearchContext.Provider value={{
getSearchText, setSearchText, getSearchText, setSearchText,
@@ -200,7 +190,6 @@ const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) =>
const { setSearchText } = searchStore; const { setSearchText } = searchStore;
const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => { const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
const stopName = event.currentTarget.value; const stopName = event.currentTarget.value;
if (stopName.length >= props.minCharsNb) { if (stopName.length >= props.minCharsNb) {
await setSearchText(stopName, businessDataStore); await setSearchText(stopName, businessDataStore);
@@ -361,7 +350,6 @@ const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
} }
const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore; const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore;
let stopsPanelsRef: HTMLDivElement | undefined = undefined let stopsPanelsRef: HTMLDivElement | undefined = undefined
const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef); const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef);
const yStopsPanelsScroll = () => stopsPanelsScroll.y; const yStopsPanelsScroll = () => stopsPanelsScroll.y;
@@ -507,15 +495,13 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop
let feature = undefined; 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 = () => { const selectStopStyle = () => {
return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle); return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle);
} }
feature = new OlFeature({ 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); feature.setStyle(selectStopStyle);
} }
@@ -523,11 +509,10 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop
let geometry = undefined; let geometry = undefined;
const areaShape = shape(); const areaShape = shape();
if (areaShape !== undefined) { if (areaShape !== undefined) {
const transformed = areaShape.points.map(point => fromLonLat(toLonLat(point, 'EPSG:2154'))); geometry = new OlPolygon([areaShape.epsg3857_points.slice(0, -1)]);
geometry = new OlPolygon([transformed.slice(0, -1)]);
} }
else { 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 = new OlFeature({ geometry: geometry });
feature.setStyle(stopAreaStyle); feature.setStyle(stopAreaStyle);
@@ -613,11 +598,11 @@ const Map: ParentComponent<{}> = () => {
const stopId: number = feature.getId(); const stopId: number = feature.getId();
const stop = getStop(stopId); const stop = getStop(stopId);
// TODO: Handle StopArea (use center given by the backend) // 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); setSelectedMapStop(stop);
map?.getView().animate( map?.getView().animate(
{ {
center: fromLonLat([stop.lon, stop.lat]), center: [stop.epsg3857_x, stop.epsg3857_y],
duration: 1000 duration: 1000
}, },
// Display the popup once the animation finished // Display the popup once the animation finished

20
frontend/src/types.tsx
View File

@@ -42,17 +42,17 @@ export class Stop {
id: number; id: number;
name: string; name: string;
town: string; town: string;
lat: number; epsg3857_x: number;
lon: number; epsg3857_y: number;
stops: Stop[]; stops: Stop[];
lines: string[]; 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.id = id;
this.name = name; this.name = name;
this.town = town; this.town = town;
this.lat = lat; this.epsg3857_x = epsg3857_x;
this.lon = lon; this.epsg3857_y = epsg3857_y;
this.stops = stops; this.stops = stops;
this.lines = lines; this.lines = lines;
for (const stop of this.stops) { for (const stop of this.stops) {
@@ -68,14 +68,14 @@ export type Points = [number, number][];
export class StopShape { export class StopShape {
stop_id: number; stop_id: number;
type_: number; type_: number;
bounding_box: number[]; epsg3857_bbox: number[];
points: Points; 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.stop_id = stop_id;
this.type_ = type_; this.type_ = type_;
this.bounding_box = bounding_box; this.epsg3857_bbox = epsg3857_bbox;
this.points = points; this.epsg3857_points = epsg3857_points;
} }
}; };