Skip to content

Commit

Permalink
fix(catalog): preview layer
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbarbeau
mbarbeau committed Jan 6, 2020
1 parent 4710037 commit 96bec67
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 47 deletions.
20 changes: 14 additions & 6 deletions packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,13 @@ export class CatalogBrowserLayerComponent implements OnInit {
switch (event.type) {
case 'click':
if (!this.isPreview$.value) {
this.remove();
if (this.added) {
this.remove();
} else {
this.add();
}
}
this.isPreview$.next(!this.isPreview$.value);
this.isPreview$.next(false);
break;
case 'mouseenter':
if (!this.isPreview$.value && !this.added) {
Expand All @@ -117,16 +121,20 @@ export class CatalogBrowserLayerComponent implements OnInit {
* Emit added change event with added = true
*/
private add() {
this.added = true;
this.addedChange.emit({ added: true, layer: this.layer });
if (!this.added) {
this.added = true;
this.addedChange.emit({ added: true, layer: this.layer });
}
}

/**
* Emit added change event with added = false
*/
private remove() {
this.added = false;
this.addedChange.emit({ added: false, layer: this.layer });
if (this.added) {
this.added = false;
this.addedChange.emit({ added: false, layer: this.layer });
}
}

isInResolutionsRange(): boolean {
Expand Down
106 changes: 65 additions & 41 deletions packages/geo/src/lib/search/search-results/search-results-add-button.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { Component, Input, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
import {
Component,
Input,
ChangeDetectionStrategy,
OnInit,
OnDestroy
} from '@angular/core';

import { SearchResult } from '../shared/search.interfaces';
import { IgoMap } from '../../map/shared/map';
Expand All @@ -14,8 +20,9 @@ import { Subscription, BehaviorSubject } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchResultAddButtonComponent implements OnInit, OnDestroy {

public tooltip$: BehaviorSubject<string> = new BehaviorSubject('igo.geo.catalog.layer.addToMap');
public tooltip$: BehaviorSubject<string> = new BehaviorSubject(
'igo.geo.catalog.layer.addToMap'
);

private resolution$$: Subscription;

Expand All @@ -25,7 +32,7 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy {

private layersSubcriptions = [];

private lastTimeoutRequest ;
private lastTimeoutRequest;

@Input() layer: SearchResult;

Expand Down Expand Up @@ -55,9 +62,12 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy {
*/
ngOnInit(): void {
if (this.layer.meta.dataType === 'Layer') {
this.added = this.map.layers.findIndex((lay) => lay.id === this.layer.data.sourceOptions.id) !== -1;
this.added =
this.map.layers.findIndex(
lay => lay.id === this.layer.data.sourceOptions.id
) !== -1;
}
this.resolution$$ = this.map.viewController.resolution$.subscribe((value) => {
this.resolution$$ = this.map.viewController.resolution$.subscribe(value => {
this.isInResolutionsRange(value);
this.tooltip$.next(this.computeTooltip());
});
Expand All @@ -80,47 +90,54 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy {
* @internal
*/
onToggleClick(event) {

if (typeof this.lastTimeoutRequest !== 'undefined') {
clearTimeout(this.lastTimeoutRequest);
}

switch (event.type) {
case 'click':
if (!this.isPreview$.value) {
this.remove();
}
this.isPreview$.next(!this.isPreview$.value);
break;
case 'mouseenter':
if (!this.isPreview$.value && !this.added) {
this.lastTimeoutRequest = setTimeout(() => {
this.add();
this.isPreview$.next(true);
}, 500);
}
break;
case 'mouseleave':
if (this.isPreview$.value) {
this.remove();
this.isPreview$.next(false);
}
break;
default:
break;
case 'click':
if (!this.isPreview$.value) {
if (this.added) {
this.remove();
} else {
this.add();
}
}
this.isPreview$.next(false);
break;
case 'mouseenter':
if (!this.isPreview$.value && !this.added) {
this.lastTimeoutRequest = setTimeout(() => {
this.add();
this.isPreview$.next(true);
}, 500);
}
break;
case 'mouseleave':
if (this.isPreview$.value) {
this.remove();
this.isPreview$.next(false);
}
break;
default:
break;
}
}

private add() {
this.added = true;
this.addLayerToMap();
if (!this.added) {
this.added = true;
this.addLayerToMap();
}
}

private remove() {
this.added = false;
this.removeLayerFromMap();
this.layersSubcriptions.map(s => s.unsubscribe());
this.layersSubcriptions = [];
if (this.added) {
this.added = false;
this.removeLayerFromMap();
this.layersSubcriptions.map(s => s.unsubscribe());
this.layersSubcriptions = [];
}
}

/**
Expand All @@ -137,9 +154,10 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy {

const layerOptions = (this.layer as SearchResult<LayerOptions>).data;
this.layersSubcriptions.push(
this.layerService
.createAsyncLayer(layerOptions)
.subscribe(layer => this.map.addLayer(layer)));
this.layerService
.createAsyncLayer(layerOptions)
.subscribe(layer => this.map.addLayer(layer))
);
}

/**
Expand All @@ -161,14 +179,20 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy {
isInResolutionsRange(resolution: number) {
const minResolution = this.layer.data.minResolution;
const maxResolution = this.layer.data.maxResolution;
this.inRange$.next(resolution >= minResolution && resolution <= maxResolution);
this.inRange$.next(
resolution >= minResolution && resolution <= maxResolution
);
}

computeTooltip(): string {
if (this.added) {
return this.inRange$.value ? 'igo.geo.catalog.layer.removeFromMap' : 'igo.geo.catalog.layer.removeFromMapOutRange';
return this.inRange$.value
? 'igo.geo.catalog.layer.removeFromMap'
: 'igo.geo.catalog.layer.removeFromMapOutRange';
} else {
return this.inRange$.value ? 'igo.geo.catalog.layer.addToMap' : 'igo.geo.catalog.layer.addToMapOutRange';
return this.inRange$.value
? 'igo.geo.catalog.layer.addToMap'
: 'igo.geo.catalog.layer.addToMapOutRange';
}
}
}

0 comments on commit 96bec67

Please sign in to comment.