From 8e74f590c61c7d92d7dbb98d9885b075e4ee9ecb Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 15 Sep 2023 14:40:30 +0200 Subject: [PATCH 1/3] add scale for wider screens --- src/actions/Actions.ts | 8 +++++++- src/map/Map.module.css | 21 ++++++++++++++++++++- src/sidebar/SettingsBox.tsx | 2 +- src/stores/MapActionReceiver.ts | 21 +++++++++++++++++++++ src/stores/SettingsStore.ts | 2 +- 5 files changed, 50 insertions(+), 4 deletions(-) diff --git a/src/actions/Actions.ts b/src/actions/Actions.ts index 4278d395..763ea673 100644 --- a/src/actions/Actions.ts +++ b/src/actions/Actions.ts @@ -238,7 +238,13 @@ export class InstructionClicked implements Action { } } -export class ToggleDistanceUnits implements Action {} +export class ToggleDistanceUnits implements Action { + readonly showDistanceInMiles: boolean + + constructor(showDistanceInMiles: boolean) { + this.showDistanceInMiles = showDistanceInMiles + } +} export class DrawAreas implements Action { readonly enabled: boolean diff --git a/src/map/Map.module.css b/src/map/Map.module.css index 074f894e..f8fddcf3 100644 --- a/src/map/Map.module.css +++ b/src/map/Map.module.css @@ -7,6 +7,21 @@ width: 100%; } +.customScale { + position: absolute; + bottom: 18px; + padding: 2px; + background: var(--ol-partial-background-color); +} + +.customScale-inner { + border: 1px solid gray; + border-top: none; + font-size: 10px; + text-align: center; + margin: 1px; +} + .customZoom { right: 17px; top: 115px; @@ -17,6 +32,10 @@ top: unset; bottom: 0.5em; } + + .customScale { + display: none; + } } /* changing the position of the attribution is a bit complex as we have to repeat the other css */ @@ -24,7 +43,7 @@ left: 0; bottom: 0; padding: 1px 5px; - background-color: rgba(255, 255, 255, 0.8); + background: var(--ol-partial-background-color); border-radius: 0 4px 0 0; } diff --git a/src/sidebar/SettingsBox.tsx b/src/sidebar/SettingsBox.tsx index d1a08f06..9f973004 100644 --- a/src/sidebar/SettingsBox.tsx +++ b/src/sidebar/SettingsBox.tsx @@ -16,7 +16,7 @@ export default function SettingsBox() {
Dispatcher.dispatch(new ToggleDistanceUnits())} + onClick={() => Dispatcher.dispatch(new ToggleDistanceUnits(!showDistanceInMiles))} > {showDistanceInMiles ? : } diff --git a/src/stores/MapActionReceiver.ts b/src/stores/MapActionReceiver.ts index d6e127e0..0c961e05 100644 --- a/src/stores/MapActionReceiver.ts +++ b/src/stores/MapActionReceiver.ts @@ -1,26 +1,38 @@ import { Action, ActionReceiver } from '@/stores/Dispatcher' import { Map } from 'ol' import { fromLonLat } from 'ol/proj' +import mapstyles from '@/map/Map.module.css' + import { InfoReceived, PathDetailsRangeSelected, RouteRequestSuccess, SetBBox, SetSelectedPath, + ToggleDistanceUnits, ZoomMapToPoint, } from '@/actions/Actions' import RouteStore from '@/stores/RouteStore' import { Bbox } from '@/api/graphhopper' +import { ScaleLine } from 'ol/control' export default class MapActionReceiver implements ActionReceiver { readonly map: Map private readonly routeStore: RouteStore + private currentScaleControl: ScaleLine private readonly isSmallScreenQuery: () => boolean constructor(map: Map, routeStore: RouteStore, isSmallScreenQuery: () => boolean) { this.map = map this.routeStore = routeStore this.isSmallScreenQuery = isSmallScreenQuery + this.map.addControl( + (this.currentScaleControl = new ScaleLine({ + className: mapstyles.customScale, + units: 'metric', + minWidth: 50, + })) + ) } receive(action: Action) { @@ -36,6 +48,15 @@ export default class MapActionReceiver implements ActionReceiver { center: fromLonLat([action.coordinate.lng, action.coordinate.lat]), duration: 400, }) + } else if (action instanceof ToggleDistanceUnits) { + this.map.removeControl(this.currentScaleControl) + this.map.addControl( + (this.currentScaleControl = new ScaleLine({ + // className: mapstyles.customScale, + units: action.showDistanceInMiles ? 'imperial' : 'metric', + minWidth: 50, + })) + ) } else if (action instanceof RouteRequestSuccess) { // this assumes that always the first path is selected as result. One could use the // state of the routeStore as well, but then we would have to make sure that the route diff --git a/src/stores/SettingsStore.ts b/src/stores/SettingsStore.ts index ce4739e2..a68f1702 100644 --- a/src/stores/SettingsStore.ts +++ b/src/stores/SettingsStore.ts @@ -19,7 +19,7 @@ export default class SettingsStore extends Store { if (action instanceof ToggleDistanceUnits) { return { ...state, - showDistanceInMiles: !state.showDistanceInMiles, + showDistanceInMiles: action.showDistanceInMiles, } } else if (action instanceof SetCustomModelEnabled) { if (!action.enabled && state.drawAreasEnabled) From f0edc8eef4e0d3d2a56f626c0d5bd2d61bebd556 Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 15 Sep 2023 14:42:36 +0200 Subject: [PATCH 2/3] minor fix --- src/stores/MapActionReceiver.ts | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/stores/MapActionReceiver.ts b/src/stores/MapActionReceiver.ts index 0c961e05..787ff628 100644 --- a/src/stores/MapActionReceiver.ts +++ b/src/stores/MapActionReceiver.ts @@ -26,13 +26,12 @@ export default class MapActionReceiver implements ActionReceiver { this.map = map this.routeStore = routeStore this.isSmallScreenQuery = isSmallScreenQuery - this.map.addControl( - (this.currentScaleControl = new ScaleLine({ - className: mapstyles.customScale, - units: 'metric', - minWidth: 50, - })) - ) + this.currentScaleControl = new ScaleLine({ + className: mapstyles.customScale, + units: 'metric', + minWidth: 50, + }) + this.map.addControl(this.currentScaleControl) } receive(action: Action) { @@ -50,13 +49,12 @@ export default class MapActionReceiver implements ActionReceiver { }) } else if (action instanceof ToggleDistanceUnits) { this.map.removeControl(this.currentScaleControl) - this.map.addControl( - (this.currentScaleControl = new ScaleLine({ - // className: mapstyles.customScale, - units: action.showDistanceInMiles ? 'imperial' : 'metric', - minWidth: 50, - })) - ) + this.currentScaleControl = new ScaleLine({ + className: mapstyles.customScale, + units: action.showDistanceInMiles ? 'imperial' : 'metric', + minWidth: 50, + }) + this.map.addControl(this.currentScaleControl) } else if (action instanceof RouteRequestSuccess) { // this assumes that always the first path is selected as result. One could use the // state of the routeStore as well, but then we would have to make sure that the route From 19ff0c356534c4582dfdc7ff23f515daa660442f Mon Sep 17 00:00:00 2001 From: Peter Date: Fri, 15 Sep 2023 14:44:08 +0200 Subject: [PATCH 3/3] simpler --- src/stores/MapActionReceiver.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/stores/MapActionReceiver.ts b/src/stores/MapActionReceiver.ts index 787ff628..0172b062 100644 --- a/src/stores/MapActionReceiver.ts +++ b/src/stores/MapActionReceiver.ts @@ -19,7 +19,7 @@ import { ScaleLine } from 'ol/control' export default class MapActionReceiver implements ActionReceiver { readonly map: Map private readonly routeStore: RouteStore - private currentScaleControl: ScaleLine + private readonly currentScaleControl: ScaleLine private readonly isSmallScreenQuery: () => boolean constructor(map: Map, routeStore: RouteStore, isSmallScreenQuery: () => boolean) { @@ -48,13 +48,7 @@ export default class MapActionReceiver implements ActionReceiver { duration: 400, }) } else if (action instanceof ToggleDistanceUnits) { - this.map.removeControl(this.currentScaleControl) - this.currentScaleControl = new ScaleLine({ - className: mapstyles.customScale, - units: action.showDistanceInMiles ? 'imperial' : 'metric', - minWidth: 50, - }) - this.map.addControl(this.currentScaleControl) + this.currentScaleControl.setUnits(action.showDistanceInMiles ? 'imperial' : 'metric') } else if (action instanceof RouteRequestSuccess) { // this assumes that always the first path is selected as result. One could use the // state of the routeStore as well, but then we would have to make sure that the route