Skip to content

Commit

Permalink
feat(import-export): imported file can be styled from a style list (#571
Browse files Browse the repository at this point in the history
)
  • Loading branch information
drekss authored Feb 3, 2020
1 parent f5c959d commit 8b7565c
Show file tree
Hide file tree
Showing 12 changed files with 251 additions and 10 deletions.
6 changes: 4 additions & 2 deletions packages/geo/src/lib/import-export/import-export.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { IgoKeyValueModule, IgoDrapDropModule, IgoSpinnerModule } from '@igo2/co

import { ImportExportComponent } from './import-export/import-export.component';
import { DropGeoFileDirective } from './shared/drop-geo-file.directive';
import { IgoStyleListModule } from './style-list/style-list.module';

@NgModule({
imports: [
Expand All @@ -30,9 +31,10 @@ import { DropGeoFileDirective } from './shared/drop-geo-file.directive';
IgoLanguageModule,
IgoSpinnerModule,
IgoKeyValueModule,
IgoDrapDropModule
IgoDrapDropModule,
IgoStyleListModule.forRoot()
],
exports: [ImportExportComponent, DropGeoFileDirective],
exports: [ImportExportComponent, DropGeoFileDirective, IgoStyleListModule],
declarations: [ImportExportComponent, DropGeoFileDirective]
})
export class IgoImportExportModule {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Subscription, BehaviorSubject } from 'rxjs';

import { MessageService, LanguageService } from '@igo2/core';
import { MessageService, LanguageService, ConfigService } from '@igo2/core';

import { Feature } from '../../feature/shared/feature.interfaces';
import { IgoMap } from '../../map/shared/map';
Expand All @@ -19,6 +19,8 @@ import {
handleFileImportSuccess,
handleFileImportError
} from '../shared/import.utils';
import { StyleService } from '../../layer/shared/style.service';
import { StyleListService } from '../style-list/style-list.service';

@Component({
selector: 'igo-import-export',
Expand All @@ -43,7 +45,10 @@ export class ImportExportComponent implements OnDestroy, OnInit {
private exportService: ExportService,
private languageService: LanguageService,
private messageService: MessageService,
private formBuilder: FormBuilder
private styleListService: StyleListService,
private styleService: StyleService,
private formBuilder: FormBuilder,
private config: ConfigService
) {
this.buildForm();
}
Expand Down Expand Up @@ -104,13 +109,25 @@ export class ImportExportComponent implements OnDestroy, OnInit {
}

private onFileImportSuccess(file: File, features: Feature[]) {
if (!this.config.getConfig('importWithStyle')) {
handleFileImportSuccess(
file,
features,
this.map,
this.messageService,
this.languageService
);
} else {
handleFileImportSuccess(
file,
features,
this.map,
this.messageService,
this.languageService,
this.styleListService,
this.styleService
);
}
}

private onFileImportError(file: File, error: Error) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ import { Directive, HostListener, EventEmitter, OnInit, OnDestroy } from '@angul

import { Subscription } from 'rxjs';

import { MessageService, LanguageService } from '@igo2/core';
import { MessageService, LanguageService, ConfigService } from '@igo2/core';
import { DragAndDropDirective } from '@igo2/common';

import { Feature } from '../../feature/shared/feature.interfaces';
import { IgoMap } from '../../map/shared/map';
import { MapBrowserComponent } from '../../map/map-browser/map-browser.component';
import { ImportService } from './import.service';
import { handleFileImportSuccess, handleFileImportError } from '../shared/import.utils';
import { StyleService } from '../../layer/shared/style.service';
import { StyleListService } from '../style-list/style-list.service';

@Directive({
selector: '[igoDropGeoFile]'
Expand All @@ -29,6 +31,9 @@ export class DropGeoFileDirective extends DragAndDropDirective implements OnInit
private component: MapBrowserComponent,
private importService: ImportService,
private languageService: LanguageService,
private styleListService: StyleListService,
private styleService: StyleService,
private config: ConfigService,
private messageService: MessageService
) {
super();
Expand Down Expand Up @@ -71,7 +76,12 @@ export class DropGeoFileDirective extends DragAndDropDirective implements OnInit
}

private onFileImportSuccess(file: File, features: Feature[]) {
handleFileImportSuccess(file, features, this.map, this.messageService, this.languageService);
if (!this.config.getConfig('importWithStyle')) {
handleFileImportSuccess(file, features, this.map, this.messageService, this.languageService);
} else {
handleFileImportSuccess(file, features, this.map, this.messageService, this.languageService,
this.styleListService, this.styleService);
}
}

private onFileImportError(file: File, error: Error) {
Expand Down
92 changes: 89 additions & 3 deletions packages/geo/src/lib/import-export/shared/import.utils.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as olStyle from 'ol/style';

import { MessageService, LanguageService } from '@igo2/core';
import { MessageService, LanguageService, ConfigService } from '@igo2/core';

import { FeatureDataSource } from '../../datasource/shared/datasources/feature-datasource';
import { FeatureDataSourceOptions } from '../../datasource/shared/datasources/feature-datasource.interface';
Expand All @@ -9,6 +9,9 @@ import { featureToOl, moveToOlFeatures } from '../../feature/shared/feature.util
import { VectorLayer } from '../../layer/shared/layers/vector-layer';
import { IgoMap } from '../../map/shared/map';
import { QueryableDataSourceOptions } from '../../query/shared/query.interfaces';
import { StyleService } from '../../layer/shared/style.service';
import { StyleByAttribute } from '../../layer/shared/vector-style.interface';
import { StyleListService } from '../style-list/style-list.service';

export function addLayerAndFeaturesToMap(features: Feature[], map: IgoMap, layerTitle: string): VectorLayer {
const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection));
Expand Down Expand Up @@ -48,20 +51,103 @@ export function addLayerAndFeaturesToMap(features: Feature[], map: IgoMap, layer
return layer;
}

export function addLayerAndFeaturesStyledToMap(features: Feature[], map: IgoMap, layerTitle: string,
styleListService: StyleListService, styleService: StyleService): VectorLayer {
const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection));
let style;

if (styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute')) {
const styleByAttribute: StyleByAttribute = styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute');

const styleBy = feature => {
return styleService.createStyleByAttribute(
feature,
styleByAttribute
);
};
style = styleBy;

} else if (styleListService.getStyleList(layerTitle.toString() + '.style')) {
const radius = styleListService.getStyleList(layerTitle.toString() + '.style.radius');

const stroke = new olStyle.Stroke({
color: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.color'),
width: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.width')
});

const fill = new olStyle.Fill({
color: styleListService.getStyleList(layerTitle.toString() + '.style.fill.color')
});

style = new olStyle.Style({
stroke,
fill,
image: new olStyle.Circle({
radius: radius ? radius : 5,
stroke,
fill
})
});
} else {
const radius = styleListService.getStyleList('default.style.radius');

const stroke = new olStyle.Stroke({
color: styleListService.getStyleList('default.style.stroke.color'),
width: styleListService.getStyleList('default.style.stroke.width')
});

const fill = new olStyle.Fill({
color: styleListService.getStyleList('default.style.fill.color')
});

style = new olStyle.Style({
stroke,
fill,
image: new olStyle.Circle({
radius: radius ? radius : 5,
stroke,
fill
})
});
}
const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = {
queryable: true
};
const source = new FeatureDataSource(sourceOptions);
source.ol.addFeatures(olFeatures);

const layer = new VectorLayer({
title: layerTitle,
source,
style
});
map.addLayer(layer);
moveToOlFeatures(map, olFeatures);

return layer;
}

export function handleFileImportSuccess(
file: File,
features: Feature[],
map: IgoMap,
messageService: MessageService,
languageService: LanguageService
languageService: LanguageService,
styleListService?: StyleListService,
styleService?: StyleService
) {
if (features.length === 0) {
handleNothingToImportError(file, messageService, languageService);
return;
}

const layerTitle = computeLayerTitleFromFile(file);
addLayerAndFeaturesToMap(features, map, layerTitle);

if (!styleListService) {
addLayerAndFeaturesToMap(features, map, layerTitle);
} else {
addLayerAndFeaturesStyledToMap(features, map, layerTitle, styleListService, styleService);
}

const translate = languageService.translate;
const messageTitle = translate.instant('igo.geo.dropGeoFile.success.title');
Expand Down
2 changes: 2 additions & 0 deletions packages/geo/src/lib/import-export/style-list/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './style-list.service';
export * from './style-list.interface';
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface StyleListOptions {
default?: { [key: string]: any };
path?: string;
}
16 changes: 16 additions & 0 deletions packages/geo/src/lib/import-export/style-list/style-list.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import { provideStyleListOptions, provideStyleListLoader } from './style-list.provider';

@NgModule({
imports: [],
declarations: [],
exports: []
})
export class IgoStyleListModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: IgoStyleListModule,
providers: [provideStyleListOptions({}), provideStyleListLoader()]
};
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { APP_INITIALIZER, InjectionToken } from '@angular/core';

import { StyleListService } from './style-list.service';
import { StyleListOptions } from './style-list.interface';

export let STYLELIST_OPTIONS = new InjectionToken<StyleListOptions>('styleListOptions');

export function provideStyleListOptions(options: StyleListOptions) {
return {
provide: STYLELIST_OPTIONS,
useValue: options
};
}

export function styleListFactory(
styleListService: StyleListService,
options: StyleListOptions
) {
return () => styleListService.load(options);
}

export function provideStyleListLoader() {
return {
provide: APP_INITIALIZER,
useFactory: styleListFactory,
multi: true,
deps: [StyleListService, STYLELIST_OPTIONS]
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { TestBed, inject } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';

import { StyleListService } from './style-list.service';

describe('StyleListService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientModule],
providers: [StyleListService]
});
});

it(
'should ...',
inject([StyleListService], (service: StyleListService) => {
expect(service).toBeTruthy();
})
);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { Injectable, Injector } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { ObjectUtils } from '@igo2/utils';

import { StyleListOptions } from './style-list.interface';

@Injectable({
providedIn: 'root'
})
export class StyleListService {
private styleList: object = {};

constructor(private injector: Injector) {}

/**
* Use to get the data found in styleList file
*/
public getStyleList(key: string): any {
return ObjectUtils.resolve(this.styleList, key);
}

/**
* This method loads "[path]" to get all styleList's variables
*/
public load(options: StyleListOptions) {
const baseStyleList = options.default || {};
if (!options.path) {
this.styleList = baseStyleList;
return true;
}

const http = this.injector.get(HttpClient);

return new Promise((resolve, _reject) => {
http
.get(options.path)
.pipe(
catchError((error: any): any => {
console.log(`StyleList file ${options.path} could not be read`);
resolve(true);
return throwError(error.error || 'Server error');
})
)
.subscribe(styleListResponse => {
this.styleList = ObjectUtils.mergeDeep(baseStyleList, styleListResponse);
resolve(true);
});
});
}
}
3 changes: 2 additions & 1 deletion packages/geo/src/lib/layer/shared/style.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,8 @@ export class StyleService {
image: new olstyle.Circle({
radius: radius ? radius[i] : 4,
stroke: new olstyle.Stroke({
color: stroke ? stroke[i] : 'black'
color: stroke ? stroke[i] : 'black',
width: width ? width[i] : 1
}),
fill: new olstyle.Fill({
color: fill ? fill[i] : 'black'
Expand Down
1 change: 1 addition & 0 deletions packages/geo/src/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export * from './lib/search/shared/sources/nominatim.providers';
export * from './lib/search/shared/sources/storedqueries.providers';
export * from './lib/routing/routing-sources/routing-source.provider';
export * from './lib/routing/shared/routing-source.service';
export * from './lib/import-export/style-list/style-list.provider';

export * from './lib/catalog';
export * from './lib/datasource';
Expand Down

0 comments on commit 8b7565c

Please sign in to comment.