Skip to content

Commit

Permalink
Merge pull request #190 from swisstopo/feature/asset-6-improve-map-co…
Browse files Browse the repository at this point in the history 
…mponent

Feature 6: Improve Map Component
  • Loading branch information
@daniel-va
daniel-va authored Jul 4, 2024
2 parents 78ccd0b + e905280 commit 7328f99
Show file tree
Hide file tree
Showing 23 changed files with 1,000 additions and 609 deletions.
2 changes: 1 addition & 1 deletion apps/client-asset-sg/src/app/i18n/it.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const itAppTranslations: AppTranslations = {
userManagement: 'IT Benutzer Verwaltung',
},
map: {
zoomIn: 'IT Hineinoomen',
zoomIn: 'IT Hineinzoomen',
zoomOut: 'IT Herauszoomen',
zoomToOrigin: 'IT Zur Ursprungsposition zoomen',
drawingModeOn: 'IT Zeichenmodus ein',
Expand Down
2 changes: 1 addition & 1 deletion apps/client-asset-sg/src/app/i18n/rm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const rmAppTranslations: AppTranslations = {
userManagement: 'RM Benutzer Verwaltung',
},
map: {
zoomIn: 'RM Hineinoomen',
zoomIn: 'RM Hineinzoomen',
zoomOut: 'RM Herauszoomen',
zoomToOrigin: 'RM Zur Ursprungsposition zoomen',
drawingModeOn: 'RM Zeichenmodus ein',
Expand Down
78 changes: 38 additions & 40 deletions ...r/src/lib/components/asset-editor-tab-geometries/asset-editor-tab-geometries.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,9 +414,9 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
this._vectorSourceAssetGeoms.clear();
const { studies } = this._form.getRawValue();
const studiesWithFeature = createFeaturesFromStudies(studies, {
point: featureStyles.bigPointStyleAsset,
polygon: featureStyles.polygonStyleAsset,
lineString: featureStyles.lineStringStyleAsset,
point: featureStyles.bigPointAsset,
polygon: featureStyles.polygonAsset,
lineString: featureStyles.lineStringAsset,
});
this._vectorSourceAssetGeoms.addFeatures(studiesWithFeature.map((s) => s.olGeometry));
zoomToStudies(this._windowService, olMap, studies, 1);
Expand Down Expand Up @@ -523,15 +523,15 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
}
this._selectInteraction.getFeatures().push(f);
}
f.setStyle(featureStyles.bigPointStyleAssetSelected);
f.setStyle(featureStyles.bigPointAssetHighlighted);
} else {
f.setStyle(featureStyles.bigPointStyleAssetNotSelected);
f.setStyle(featureStyles.bigPointAssetNotSelected);
}
} else {
f.setStyle(
this._state.get().selectedStudyGeometrySelected
? featureStyles.bigPointStyleAssetSelected
: featureStyles.bigPointStyleAsset
? featureStyles.bigPointAssetHighlighted
: featureStyles.bigPointAsset
);
}
}
Expand All @@ -540,14 +540,12 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
geomStyle(
selectedStudy.geom,
selectedStudyGeometrySelected
? featureStyles.bigPointStyleAssetSelected
: featureStyles.bigPointStyleAsset,
? featureStyles.bigPointAssetHighlighted
: featureStyles.bigPointAsset,
selectedStudyGeometrySelected ? featureStyles.polygonAssetHighlighted : featureStyles.polygonAsset,
selectedStudyGeometrySelected
? featureStyles.polygonStyleAssetSelected
: featureStyles.polygonStyleAsset,
selectedStudyGeometrySelected
? featureStyles.lineStringStyleAssetSelected
: featureStyles.lineStringStyleAsset
? featureStyles.lineStringAssetHighlighted
: featureStyles.lineStringAsset
)
);
}
Expand All @@ -574,15 +572,15 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
const id = getFeatureId(f);
if (O.isSome(id)) {
if (id.value.startsWith(makeCoordFeatureIdStartWithId(a.selectedStudy.studyId))) {
f.setStyle(featureStyles.bigPointStyleAssetSelected);
f.setStyle(featureStyles.bigPointAssetHighlighted);
}
if (id.value === a.selectedStudy.studyId) {
f.setStyle(
geomStyle(
a.selectedStudy.geom,
featureStyles.bigPointStyleAssetSelected,
featureStyles.polygonStyleAssetSelected,
featureStyles.lineStringStyleAssetNotSelected
featureStyles.bigPointAssetHighlighted,
featureStyles.polygonAssetHighlighted,
featureStyles.lineStringAssetNotSelected
)
);
}
Expand All @@ -606,9 +604,9 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
if (O.isSome(study)) {
const newStudies = [...this._state.get().studies, study.value];
const studiesWithFeature = createFeaturesFromStudies([study.value], {
point: featureStyles.bigPointStyleAsset,
polygon: featureStyles.polygonStyleAsset,
lineString: featureStyles.lineStringStyleAsset,
point: featureStyles.bigPointAsset,
polygon: featureStyles.polygonAsset,
lineString: featureStyles.lineStringAsset,
});
this._vectorSourceAssetGeoms.addFeatures(studiesWithFeature.map((s) => s.olGeometry));
this._state.set(
Expand Down Expand Up @@ -701,7 +699,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
const marker = this._vectorSourceAssetGeoms.getFeatureById(makeCoordFeatureId(study, i));
if (marker) {
marker.setGeometry(new Point(olCoordsFromLV95Array([coord])[0]));
marker.setStyle(featureStyles.bigPointStyleAssetSelected);
marker.setStyle(featureStyles.bigPointAssetHighlighted);
} else {
makeCoordinateMarker(this._vectorSourceAssetGeoms, coord, i, study);
}
Expand All @@ -723,7 +721,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
const marker = this._vectorSourceAssetGeoms.getFeatureById(makeCoordFeatureId(study, i));
if (marker) {
marker.setGeometry(new Point(olCoordsFromLV95Array([coord])[0]));
marker.setStyle(featureStyles.bigPointStyleAssetSelected);
marker.setStyle(featureStyles.bigPointAssetHighlighted);
} else {
makeCoordinateMarker(this._vectorSourceAssetGeoms, coord, i, study);
}
Expand All @@ -748,7 +746,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
const draw = new Draw({
source: this._vectorSourceDraw,
type: 'Point',
style: featureStyles.bigPointStyleAssetSelected,
style: featureStyles.bigPointAssetHighlighted,
});
olMap.addInteraction(draw);

Expand All @@ -762,7 +760,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
if (O.isSome(study)) {
const point = new Point(olCoordsFromLV95Array(study.value.geom.coords)[currentPointIndex]);
const feature = decorateFeature(new Feature({ geometry: point }), {
style: featureStyles.bigPointStyleAsset,
style: featureStyles.bigPointAsset,
id: `point_${currentPointIndex}`,
});
this._vectorSourceDraw.addFeature(feature);
Expand All @@ -775,7 +773,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
]),
}),
{
style: featureStyles.polygonStyleAsset,
style: featureStyles.polygonAsset,
id: `line_${currentPointIndex - 1}`,
}
);
Expand All @@ -792,7 +790,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
]),
}),
{
style: featureStyles.polygonStyleAssetNotSelected,
style: featureStyles.polygonAssetNotSelected,
id: `line_final`,
}
);
Expand All @@ -811,7 +809,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
.subscribe(() => {
olMap.addInteraction(draw);
const finalFeature = this._vectorSourceDraw.getFeatureById(`line_final`);
finalFeature && finalFeature.setStyle(featureStyles.polygonStyleAssetNotSelected);
finalFeature && finalFeature.setStyle(featureStyles.polygonAssetNotSelected);
});

fromEvent(this.mapDiv.nativeElement, 'mouseout')
Expand All @@ -822,7 +820,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
const preview2LineFeature = this._vectorSourceDraw.getFeatureById(`line_preview2`);
preview2LineFeature && this._vectorSourceDraw.removeFeature(preview2LineFeature);
const finalFeature = this._vectorSourceDraw.getFeatureById(`line_final`);
finalFeature && finalFeature.setStyle(featureStyles.polygonStyleAsset);
finalFeature && finalFeature.setStyle(featureStyles.polygonAsset);

olMap.removeInteraction(draw);

Expand Down Expand Up @@ -1014,7 +1012,7 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
if (pointFeature) {
this._selectInteraction.getFeatures().clear();
this._selectInteraction.getFeatures().push(pointFeature);
pointFeature.setStyle(featureStyles.bigPointStyleAssetSelected);
pointFeature.setStyle(featureStyles.bigPointAssetHighlighted);
}
}
} else {
Expand Down Expand Up @@ -1052,9 +1050,9 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
const study = getCurrentStudy(this._state.get());
if (O.isSome(study)) {
const studyWithFeature = createFeaturesFromStudy(study.value, {
point: featureStyles.bigPointStyleAsset,
polygon: featureStyles.polygonStyleAsset,
lineString: featureStyles.lineStringStyleAsset,
point: featureStyles.bigPointAsset,
polygon: featureStyles.polygonAsset,
lineString: featureStyles.lineStringAsset,
});
this._vectorSourceAssetGeoms.addFeatures([studyWithFeature.olGeometry]);
this.updateMarkersForStudy(study.value);
Expand Down Expand Up @@ -1084,9 +1082,9 @@ export class AssetEditorTabGeometriesComponent implements OnInit {
f.setStyle(
geomStyle(
study.value.geom,
featureStyles.bigPointStyleAsset,
featureStyles.polygonStyleAsset,
featureStyles.lineStringStyleAsset
featureStyles.bigPointAsset,
featureStyles.polygonAsset,
featureStyles.lineStringAsset
)
);
}
Expand Down Expand Up @@ -1158,7 +1156,7 @@ const makeCoordinateMarker = (vectorSource: VectorSource<Geometry>, coord: LV95,
decorateFeature(
new Feature(new Point(olCoordsFromLV95Array([coord])[0])),
{
style: featureStyles.bigPointStyleAsset,
style: featureStyles.bigPointAsset,
id: makeCoordFeatureId(study, index),
},
{
Expand All @@ -1170,9 +1168,9 @@ const makeCoordinateMarker = (vectorSource: VectorSource<Geometry>, coord: LV95,

const setFeatureStyle = (feature: Feature, study: Study, selected: boolean) => {
const style = Geom.matchStrict({
Point: () => (selected ? featureStyles.bigPointStyleAsset : featureStyles.bigPointStyleAssetNotSelected),
Polygon: () => (selected ? featureStyles.polygonStyleAsset : featureStyles.polygonStyleAssetNotSelected),
LineString: () => (selected ? featureStyles.lineStringStyleAsset : featureStyles.lineStringStyleAssetNotSelected),
Point: () => (selected ? featureStyles.bigPointAsset : featureStyles.bigPointAssetNotSelected),
Polygon: () => (selected ? featureStyles.polygonAsset : featureStyles.polygonAssetNotSelected),
LineString: () => (selected ? featureStyles.lineStringAsset : featureStyles.lineStringAssetNotSelected),
})(study.geom);
feature.setStyle(style);
};
Expand Down
6 changes: 5 additions & 1 deletion libs/asset-viewer/src/lib/asset-viewer.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
MatRowDef,
MatTable,
} from '@angular/material/table';
import { MatTooltip } from '@angular/material/tooltip';
import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
import { RouterModule } from '@angular/router';
import {
Expand Down Expand Up @@ -53,14 +54,16 @@ import { AssetSearchFilterListComponent } from './components/asset-search-filter
import { AssetSearchRefineComponent } from './components/asset-search-refine';
import { AssetSearchResultsComponent } from './components/asset-search-results';
import { AssetViewerPageComponent } from './components/asset-viewer-page';
import { MapComponent } from './components/map';
import { MapComponent } from './components/map/map.component';
import { MapControlsComponent } from './components/map-controls/map-controls.component';
import { AssetSearchEffects } from './state/asset-search/asset-search.effects';
import { assetSearchReducer } from './state/asset-search/asset-search.reducer';

@NgModule({
declarations: [
AssetViewerPageComponent,
MapComponent,
MapControlsComponent,
AssetSearchDetailComponent,
AssetSearchRefineComponent,
AssetSearchFilterListComponent,
Expand Down Expand Up @@ -119,6 +122,7 @@ import { assetSearchReducer } from './state/asset-search/asset-search.reducer';
MatRowDef,
SmartTranslatePipe,
CdkMonitorFocus,
MatTooltip,
],
providers: [
TranslatePipe,
Expand Down
4 changes: 2 additions & 2 deletions libs/asset-viewer/src/lib/components/asset-picker/asset-picker.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
<a
asset-sg-reset
(click)="selectAndClose(asset.assetId)"
(mouseover)="onAssetMouseOver(asset.assetId)"
(mouseout)="onAssetMouseOut()"
(mouseover)="assetMouseOver.emit(asset.assetId)"
(mouseout)="assetMouseOver.emit(null)"
[innerHTML]="asset.titlePublic"
></a>
</li>
Expand Down
12 changes: 2 additions & 10 deletions libs/asset-viewer/src/lib/components/asset-picker/asset-picker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export class AssetPickerComponent extends RxState<AssetPickerState> {
this.connect('currentAssetId', currentAssetId$);
}

@Output() assetMouseOver = new EventEmitter<O.Option<number>>();
@Output() assetMouseOver = new EventEmitter<number | null>();

constructor() {
super();
Expand Down Expand Up @@ -158,19 +158,11 @@ export class AssetPickerComponent extends RxState<AssetPickerState> {
)
);

this.closePicker$.pipe(untilDestroyed(this)).subscribe(() => this.onAssetMouseOut());
this.closePicker$.pipe(untilDestroyed(this)).subscribe(() => this.assetMouseOver.emit(null));
}

public selectAndClose(assetId: number) {
this._store.dispatch(actions.searchForAssetDetail({ assetId }));
this.closePicker$.next();
}

public onAssetMouseOver(assetId: number) {
this.assetMouseOver.emit(O.some(assetId));
}

public onAssetMouseOut() {
this.assetMouseOver.emit(O.none);
}
}
4 changes: 2 additions & 2 deletions .../asset-viewer/src/lib/components/asset-search-results/asset-search-results.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@
mat-row
*matRowDef="let row; columns: COLUMNS"
(click)="searchForAsset(row.assetId)"
(mouseover)="onAssetMouseOver(row.assetId)"
(mouseleave)="onAssetMouseOut()"
(mouseover)="assetMouseOver.emit(row.assetId)"
(mouseleave)="assetMouseOver.emit(null)"
></tr>
</table>
</div>
Expand Down
11 changes: 2 additions & 9 deletions libs/asset-viewer/src/lib/components/asset-search-results/asset-search-results.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, inject, Output } from
import { ActivatedRoute, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import * as O from 'fp-ts/Option';
import { Observable } from 'rxjs';
import * as actions from '../../state/asset-search/asset-search.actions';
import { AppStateWithAssetSearch, LoadingState } from '../../state/asset-search/asset-search.reducer';
import {
Expand All @@ -19,7 +20,7 @@ import {
})
export class AssetSearchResultsComponent {
@Output() closeSearchResultsClicked = new EventEmitter<void>();
@Output() assetMouseOver = new EventEmitter<O.Option<number>>();
@Output() assetMouseOver = new EventEmitter<number | null>();

protected readonly COLUMNS = [
'favourites',
Expand All @@ -39,16 +40,8 @@ export class AssetSearchResultsComponent {
public loadingState = this._store.select(selectSearchLoadingState);
public pageStats$ = this._store.select(selectAssetSearchPageData);

public onAssetMouseOver(assetId: number) {
this.assetMouseOver.emit(O.some(assetId));
}

protected readonly LoadingState = LoadingState;

public onAssetMouseOut() {
this.assetMouseOver.emit(O.none);
}

public searchForAsset(assetId: number) {
this._store.dispatch(actions.searchForAssetDetail({ assetId }));
}
Expand Down
17 changes: 8 additions & 9 deletions libs/asset-viewer/src/lib/components/asset-viewer-page/asset-viewer-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<asset-sg-map
[searchPolygon$]="searchPolygon$"
[highlightAssetStudies]="highlightAssetStudies$"
(polygonChanged)="polygonChanged$.next($event)"
(assetClicked)="assetClicked$.next($event)"
(mapInitialized)="handleMapInitialised()"
></asset-sg-map>
[highlightedAssetId]="highlightedAssetId"
(assetsClick)="assetClicked$.next($event)"
(assetsHover)="highlightedAssetId = $event[0]"
(initializeEnd)="handleMapInitialised()"
/>

<asset-sg-asset-picker
class="asset-picker"
[assets]="assetsForPicker$"
[currentAssetId]="currentAssetId$"
(assetMouseOver)="highlightAssetStudies$.next($event)"
class="asset-picker"
(assetMouseOver)="highlightedAssetId = $event"
/>

<ng-template #templateAppBarPortalContent>
Expand All @@ -24,6 +23,6 @@

<asset-sg-asset-search-refine *ngIf="isFiltersOpen$ | push" class="mat-elevation-z4" [style.visibility]="'visible'" />

<asset-sg-asset-search-results class="mat-elevation-z2" (assetMouseOver)="highlightAssetStudies$.next($event)" />
<asset-sg-asset-search-results class="mat-elevation-z2" (assetMouseOver)="highlightedAssetId = $event" />

<asset-sg-asset-search-detail *ngIf="currentAsset$ | push" class="mat-elevation-z4" />
1 change: 1 addition & 0 deletions libs/asset-viewer/src/lib/components/asset-viewer-page/asset-viewer-page.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
grid-template-columns: auto 1fr auto;
}

asset-sg-map,
asset-sg-map {
grid-area: map;
}
Expand Down
Loading

0 comments on commit 7328f99

Please sign in to comment.