Skip to content

Commit

Permalink
Rotation (#1117)
Browse files Browse the repository at this point in the history
* feat(rotation): show azimuth on map view rotation (issue igo2 780)

* i18n(rotation): add degree north °N

* i18n(rotation): typo

* lint

* wip

Co-authored-by: Pierre-Étienne Lord <[email protected]>
  • Loading branch information
pelord and Pierre-Étienne Lord authored Nov 11, 2022
1 parent 6d3cbfd commit 36fe2c3
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 54 deletions.
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
<div *ngIf="rotated && !showIfNoRotation" class="igo-rotation-button-container"
[matTooltip]="rotated ? ('igo.geo.mapButtons.resetRotation' | translate): ('igo.geo.mapButtons.tipRotation' | translate)"
<div *ngIf="((rotated$ | async) && !showIfNoRotation) || showIfNoRotation" class="igo-rotation-button-container"
[matTooltip]="(rotated$ | async) ? ('igo.geo.mapButtons.resetRotation' | translate: {azimuth: azimuthRounded, rotation: rotationRounded}): ('igo.geo.mapButtons.tipRotation' | translate)"
matTooltipPosition="left">
<button mat-icon-button matTooltipPosition="left" [color]="color" [disabled]="!rotated"
<button mat-icon-button matTooltipPosition="left" [color]="color" [disabled]="(rotated$ | async) === false"
(click)="map.viewController.resetRotation()">
<mat-icon [ngStyle]="rotationStyle(map.viewController.getRotation())" svgIcon="navigation">
<mat-icon [ngStyle]="currentStyle$ | async" svgIcon="navigation">
</mat-icon>
</button>
</div>

<div *ngIf="showIfNoRotation" class="igo-rotation-button-container"
[matTooltip]="rotated ? ('igo.geo.mapButtons.resetRotation' | translate): ('igo.geo.mapButtons.tipRotation' | translate)"
matTooltipPosition="left">
<button mat-icon-button matTooltipPosition="left" [color]="color" [disabled]="!rotated"
(click)="map.viewController.resetRotation()">
<mat-icon [ngStyle]="rotationStyle(map.viewController.getRotation())" svgIcon="navigation">
</mat-icon>
</button>
</div>
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Component, Input } from '@angular/core';
import { AfterContentInit, Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { bearingToAzimuth } from '@turf/helpers';

import { IgoMap } from '../shared/map';

Expand All @@ -7,44 +9,31 @@ import { IgoMap } from '../shared/map';
templateUrl: './rotation-button.component.html',
styleUrls: ['./rotation-button.component.scss']
})
export class RotationButtonComponent {
@Input()
get map(): IgoMap {
return this._map;
}
set map(value: IgoMap) {
this._map = value;
}
private _map: IgoMap;

@Input()
get showIfNoRotation(): boolean {
return this._showIfNoRotation;
}
set showIfNoRotation(value: boolean) {
this._showIfNoRotation = value;
}
private _showIfNoRotation: boolean;
export class RotationButtonComponent implements AfterContentInit {
readonly rotated$ = new BehaviorSubject<boolean>(false);
public azimuthRounded: number = 0;
public rotationRounded: number = 0;
readonly currentStyle$ = new BehaviorSubject<{}>({
transform: 'rotate(0rad)'
});

@Input()
get color(): string {
return this._color;
}
set color(value: string) {
this._color = value;
}
private _color: string;

get rotated(): boolean {
return this.map.viewController.getRotation() !== 0;
}
@Input() map: IgoMap;
@Input() showIfNoRotation: boolean;
@Input() color: string;

constructor() {}
constructor() { }

rotationStyle(radians): {} {
const rotation = 'rotate(' + radians + 'rad)';
return {
transform: rotation
};
ngAfterContentInit() {
this.map.viewController.rotation$.subscribe(r => {
const radians = r || 0;
const deg = radians * 180 / Math.PI;
this.rotationRounded = Math.round(deg);
this.azimuthRounded = Math.round(bearingToAzimuth(deg * -1));
this.currentStyle$.next({
transform: 'rotate(' + radians + 'rad)'
});
this.rotated$.next(radians !== 0);
}
);
}
}
16 changes: 15 additions & 1 deletion packages/geo/src/lib/map/shared/controllers/view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { MapExtent, MapViewState } from '../map.interface';
import { getScaleFromResolution, viewStatesAreEqual } from '../map.utils';
import { MapController } from './controller';
import { EventsKey } from 'ol/events';
import { ObjectEvent } from 'ol/Object';

export interface MapViewControllerOptions {
stateHistory: boolean;
Expand All @@ -23,6 +24,11 @@ export interface MapViewControllerOptions {
* Controller to handle map view interactions
*/
export class MapViewController extends MapController {
/**
* Observable of the current rotation in radians
*/
readonly rotation$ = new BehaviorSubject<number>(0);

/**
* Observable of the current resolution
*/
Expand Down Expand Up @@ -129,6 +135,14 @@ export class MapViewController extends MapController {
});
}

monitorRotation() {
this.observerKeys.push(
this.olMap.getView().on('change:rotation', (evt: ObjectEvent) => {
this.rotation$.next(evt.target.getRotation());
}) as EventsKey
);
}

/**
* Teardown any observers
*/
Expand Down Expand Up @@ -254,7 +268,7 @@ export class MapViewController extends MapController {

/**
* Return the current view rotation
* @returns Rotation angle in degrees
* @returns Rotation angle in radians
*/
getRotation(): number {
return this.olView.getRotation();
Expand Down
1 change: 1 addition & 0 deletions packages/geo/src/lib/map/shared/map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export class IgoMap {
}
}
});
this.viewController.monitorRotation();
});
this.propertyChange$.pipe(skipWhile((pc) => !pc)).subscribe(p => handleLayerPropertyChange(this, p.event, p.layer));
}
Expand Down
2 changes: 1 addition & 1 deletion packages/geo/src/locale/en.geo.json
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@
"online": "Online mode",
"zoomIn": "Zoom in ({{zoom}})",
"zoomOut": "Zoom out ({{zoom}})",
"resetRotation": "Set map to north",
"resetRotation": "Azimuth: {{azimuth}}°N. Rotation: {{rotation}}°. Set map to north",
"tipRotation": "Hold Alt and SHIFT while dragging on map to rotate the map.",
"preventSreenLock": "Prevent the screen to enter in lock mode.",
"letScreenLock": "Allow the screen to enter in lock mode."
Expand Down
2 changes: 1 addition & 1 deletion packages/geo/src/locale/fr.geo.json
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@
"online": "Passer en mode en ligne",
"zoomIn": "Zoomer ({{zoom}})",
"zoomOut": "Dézoomer ({{zoom}})",
"resetRotation": "Réinitialiser la carte vers le nord",
"resetRotation": "Azimut: {{azimuth}}°N. Rotation: {{rotation}}°. Réinitialiser la carte vers le nord",
"tipRotation": "Maintenez les touches Alt et Majuscule (shift) tout en cliquant sur la carte pour faire pivoter la carte",
"preventSreenLock": "Prévient l'écran d'entrer en mode verrouillé.",
"letScreenLock": "Permet l'écran d'entrer en mode verrouillé."
Expand Down

0 comments on commit 36fe2c3

Please sign in to comment.