Skip to content

Commit

Permalink
fix(layer list): fix issue with reordering and sorting and clean up s…
Browse files Browse the repository at this point in the history 
…ome code (#286)
  • Loading branch information
@cbourget @mbarbeau
cbourget authored and mbarbeau committed Apr 10, 2019
1 parent 648dd96 commit 6f0b78c
Show file tree
Hide file tree
Showing 7 changed files with 324 additions and 406 deletions.
16 changes: 8 additions & 8 deletions packages/context/src/lib/share-map/share-map/share-map-binding.directive.ts
View file
Expand Up @@ -33,21 +33,21 @@ export class ShareMapBindingDirective implements OnInit {
const sortedAplhaFromUrl = params[this.route.options.llcAKey as string];
const onlyVisibleFromUrl = params[this.route.options.llcVKey as string];
const onlyInRangeFromUrl = params[this.route.options.llcRKey as string];
if (keywordFromUrl && !this.layerListService.keywordInitializated) {
if (keywordFromUrl && !this.layerListService.keywordInitialized) {
this.layerListService.keyword = keywordFromUrl;
this.layerListService.keywordInitializated = true;
this.layerListService.keywordInitialized = true;
}
if (sortedAplhaFromUrl && !this.layerListService.sortedAlphaInitializated) {
if (sortedAplhaFromUrl && !this.layerListService.sortedAlphaInitialized) {
this.layerListService.sortedAlpha = sortedAplhaFromUrl === '1' ? true : false;
this.layerListService.sortedAlphaInitializated = true;
this.layerListService.sortedAlphaInitialized = true;
}
if (onlyVisibleFromUrl && !this.layerListService.onlyVisibleInitializated) {
if (onlyVisibleFromUrl && !this.layerListService.onlyVisibleInitialized) {
this.layerListService.onlyVisible = onlyVisibleFromUrl === '1' ? true : false;
this.layerListService.onlyVisibleInitializated = true;
this.layerListService.onlyVisibleInitialized = true;
}
if (onlyInRangeFromUrl && !this.layerListService.onlyInRangeInitializated) {
if (onlyInRangeFromUrl && !this.layerListService.onlyInRangeInitialized) {
this.layerListService.onlyInRange = onlyInRangeFromUrl === '1' ? true : false;
this.layerListService.onlyInRangeInitializated = true;
this.layerListService.onlyInRangeInitialized = true;
}
this.component.resetUrl();
});
Expand Down
33 changes: 11 additions & 22 deletions packages/geo/src/lib/layer/layer-item/layer-item.component.html
View file
Expand Up @@ -4,23 +4,23 @@
mat-list-avatar
igoCollapse
[target]="legend"
[collapsed]="legendCollapsed"
[collapsed]="!(showLegend$ | async)"
(toggle)="toggleLegend($event)">
</mat-icon>
<h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500">{{layer.title}}</h4>
<h4 matLine [matTooltip]="layer.title" matTooltipShowDelay="500">{{layer.title}}</h4>

<button
mat-icon-button
color="primary"
collapsibleButton
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="layer.visible ?
('igo.geo.layer.hideLayer' | translate) :
('igo.geo.layer.showLayer' | translate)"
[color]="layer.visible ? color : 'default'"
(click)="toggleVisibility()">
<mat-icon
[ngClass]='{disabled: !layer.isInResolutionsRange}'>
[ngClass]="{disabled: !(inResolutionRange$ | async)}">
<ng-container *ngIf="layer.visible">
visibility
</ng-container>
Expand All @@ -32,8 +32,8 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"

<button
mat-icon-button
color="primary"
igoCollapse
[color]="color"
[target]="actions"
[collapsed]="true">
<mat-icon>more_horiz</mat-icon>
Expand All @@ -59,45 +59,34 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
<div class="igo-col igo-col-100 igo-col-100-m">
<div class="igo-layer-button-group">
<button
*ngIf="isVectorLayer(layer) && browsable === true"
mat-icon-button
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.layer.showFeaturesList' | translate"
[color]="color"
(click)="showFeaturesList(layer)">
<mat-icon>list</mat-icon>
</button>

<button
[disabled]="disableReorderLayers"
color="primary"
mat-icon-button
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.layer.raiseLayer' | translate"
[color]="color"
[disabled]="!orderable"
(click)="layer.map.raiseLayer(layer)">
<mat-icon>arrow_upward</mat-icon>
</button>

<button
[disabled]="disableReorderLayers"
mat-icon-button
color="primary"
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.layer.lowerLayer' | translate"
[color]="color"
[disabled]="!orderable"
(click)="layer.map.lowerLayer(layer)">
<mat-icon>arrow_downward</mat-icon>
</button>

<button
*ngIf="removable === true"
mat-icon-button
color="warn"
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.layer.removeLayer' | translate"
color="warn"
(click)="layer.map.removeLayer(layer)">
<mat-icon>delete</mat-icon>
</button>
Expand All @@ -108,5 +97,5 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
</div>

<div #legend class="igo-layer-legend-container">
<igo-layer-legend *ngIf="legendCollapsed === false" [layer]="layer"></igo-layer-legend>
<igo-layer-legend *ngIf="showLegend$ | async" [layer]="layer"></igo-layer-legend>
</div>
118 changes: 23 additions & 95 deletions packages/geo/src/lib/layer/layer-item/layer-item.component.ts
View file
@@ -1,92 +1,59 @@
import {
Component,
Input,
OnInit,
OnDestroy,
ChangeDetectorRef,
ChangeDetectionStrategy
} from '@angular/core';
import { Subscription } from 'rxjs';
import { Subscription, BehaviorSubject } from 'rxjs';

import olFormatGeoJSON from 'ol/format/GeoJSON';

import { MapService } from '../../map/shared/map.service';
// import { FeatureService } from '../../feature/shared/feature.service';
import { Layer, VectorLayer, VectorLayerOptions } from '../shared/layers';
import { Layer } from '../shared/layers';

@Component({
selector: 'igo-layer-item',
templateUrl: './layer-item.component.html',
styleUrls: ['./layer-item.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayerItemComponent implements OnDestroy {

legendCollapsed = true;
export class LayerItemComponent implements OnInit, OnDestroy {

private resolution$$: Subscription;
showLegend$: BehaviorSubject<boolean> = new BehaviorSubject(false);

@Input()
set layer(value: Layer) {
this._layer = value;
// TODO: This stuff should probably be in ngOnInit
this.subscribeResolutionObserver();
const legend = this.layer.dataSource.options.legend;
if (legend && legend.collapsed) {
this.legendCollapsed = legend.collapsed;
}
}
get layer(): Layer { return this._layer; }
private _layer: Layer;
inResolutionRange$: BehaviorSubject<boolean> = new BehaviorSubject(true);

@Input() edition: boolean = false;
private resolution$$: Subscription;

@Input() color: string = 'primary';
@Input() layer: Layer;

@Input() toggleLegendOnVisibilityChange: boolean = false;

@Input() disableReorderLayers: boolean = false;

get id(): string {
const dataSourceOptions = this.layer.dataSource.options as any;
return dataSourceOptions.id ? dataSourceOptions.id : this.layer.id;
}
@Input() orderable: boolean = true;

get removable(): boolean { return this.layer.options.removable !== false; }

get browsable(): boolean {
const options = this.layer.options as any as VectorLayerOptions;
return options.browsable !== false;
}

get opacity() { return this.layer.opacity * 100; }
set opacity(opacity: number) { this.layer.opacity = opacity / 100; }

constructor(
// private featureService: FeatureService,
private cdRef: ChangeDetectorRef,
private mapService: MapService
) {}
constructor(private cdRef: ChangeDetectorRef) {}

ngOnInit() {
// TODO: This stuff should probably be in ngOnInit
this.subscribeResolutionObserver();
const legend = this.layer.dataSource.options.legend;
if (legend && legend.collapsed) {
this.legendCollapsed = legend.collapsed;
}
const legend = this.layer.dataSource.options.legend || {};
const legendCollapsed = legend.collapsed === false ? false : true;
this.showLegend$.next(!legendCollapsed);

const resolution$ = this.layer.map.viewController.resolution$;
this.resolution$$ = resolution$.subscribe((resolution: number) => {
this.onResolutionChange(resolution);
});
}

ngOnDestroy() {
if (this.resolution$$ !== undefined) {
this.resolution$$.unsubscribe();
}
this.resolution$$.unsubscribe();
}

toggleLegend(collapsed: boolean) {
if (collapsed === undefined) {
return;
}
this.legendCollapsed = collapsed;
this.showLegend$.next(!collapsed);
}

toggleVisibility() {
Expand All @@ -96,46 +63,7 @@ export class LayerItemComponent implements OnDestroy {
}
}

showFeaturesList(layer: Layer) {
return;

// this.featureService.unfocusFeature();
// this.featureService.unselectFeature();

const map = this.mapService.getMap();
const featuresOL = (layer.dataSource.ol as any).getFeatures();

const format = new olFormatGeoJSON();
const featuresGeoJSON = JSON.parse(
format.writeFeatures(featuresOL, {
dataProjection: 'EPSG:4326',
featureProjection: map.projection
})
);

let i = 0;
const features = featuresGeoJSON.features.map(f =>
Object.assign({}, f, {
source: layer.title,
id: layer.title + String(i++)
})
);

// TODO: Restore that functionnality without using a global feature service
// this.featureService.setFeatures(features);
}

isVectorLayer(val) {
return val instanceof VectorLayer;
}

private subscribeResolutionObserver() {
if (!this.layer || !this.layer.map) {
return;
}
const resolution$ = this.layer.map.viewController.resolution$;
this.resolution$$ = resolution$.subscribe(resolution => {
this.cdRef.detectChanges();
});
private onResolutionChange(resolution: number) {
this.inResolutionRange$.next(this.layer.isInResolutionsRange);
}
}
16 changes: 8 additions & 8 deletions packages/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts
View file
Expand Up @@ -51,25 +51,25 @@ export class LayerListBindingDirective implements OnInit, AfterViewInit, OnDestr
const sortedAplhaFromUrl = params[this.route.options.llcAKey as string];
const onlyVisibleFromUrl = params[this.route.options.llcVKey as string];
const onlyInRangeFromUrl = params[this.route.options.llcRKey as string];
if (keywordFromUrl && !this.layerListService.keywordInitializated) {
if (keywordFromUrl && !this.layerListService.keywordInitialized) {
this.layerListService.keyword = keywordFromUrl;
this.layerListService.keywordInitializated = true;
this.layerListService.keywordInitialized = true;
}
if (sortedAplhaFromUrl && !this.layerListService.sortedAlphaInitializated) {
if (sortedAplhaFromUrl && !this.layerListService.sortedAlphaInitialized) {
this.layerListService.sortedAlpha = sortedAplhaFromUrl === '1' ? true : false;
this.layerListService.sortedAlphaInitializated = true;
this.layerListService.sortedAlphaInitialized = true;
}
if (onlyVisibleFromUrl &&
!this.layerListService.onlyVisibleInitializated &&
!this.layerListService.onlyVisibleInitialized &&
this.component.hasLayerNotVisible) {
this.layerListService.onlyVisible = onlyVisibleFromUrl === '1' ? true : false;
this.layerListService.onlyVisibleInitializated = true;
this.layerListService.onlyVisibleInitialized = true;
}
if (onlyInRangeFromUrl &&
!this.layerListService.onlyInRangeInitializated &&
!this.layerListService.onlyInRangeInitialized &&
this.component.hasLayerOutOfRange) {
this.layerListService.onlyInRange = onlyInRangeFromUrl === '1' ? true : false;
this.layerListService.onlyInRangeInitializated = true;
this.layerListService.onlyInRangeInitialized = true;
}
});
}
Expand Down

0 comments on commit 6f0b78c

Please sign in to comment.