feat(edition): wms edition with ogc filters + wfs download widget

demo/src/app/geo/edition/edition.component.html

@@ -10,12 +10,13 @@
   </igo-map-browser>
 
   <igo-editor-selector
-    igoWfsEditorSelector
+    igoEditorSelector
     [store]="editorStore"
     [map]="map">
   </igo-editor-selector>
   <ng-container *ngIf="selectedEditor$ | async as editor">
     <igo-actionbar
+      *ngIf="editor.actionStore"
       [store]="editor.actionStore"
       [horizontal]="true"
       [withToggleButton]="true"
@@ -26,6 +27,7 @@
     <igo-editor-outlet [editor]="editor"></igo-editor-outlet>
 
     <igo-entity-table
+      *ngIf="editor.entityStore && editor.tableTemplate"
       class="table-compact table-centered"
       [scrollBehavior]="scrollBehavior"
       [store]="editor.entityStore"

demo/src/app/geo/edition/edition.component.ts

@@ -15,9 +15,9 @@ import {
   IgoMap,
   DataSourceService,
   LayerService,
-  LayerOptions,
   WFSDataSourceOptions
 } from '@igo2/geo';
+import { OgcFilterableDataSourceOptions } from 'packages/geo/src/public_api';
 
 @Component({
   selector: 'app-edition',
@@ -75,7 +75,47 @@ export class AppEditionComponent implements OnInit {
         );
       });
 
-    const wfsDatasource: WFSDataSourceOptions = {
+    const wmsDataSourceOptions = {
+      type: 'wms',
+      url: 'https://ahocevar.com/geoserver/wms',
+      urlWfs: 'https://ahocevar.com/geoserver/wfs',
+      params: {
+        layers: 'water_areas',
+        version: '1.3.0'
+      },
+      paramsWFS: {
+        featureTypes: 'water_areas',
+        fieldNameGeometry: 'the_geom',
+        maxFeatures: 10000,
+        version: '1.1.0',
+        outputFormat: 'application/json',
+        outputFormatDownload: 'application/vnd.google-earth.kml+xml'
+      },
+      sourceFields: [
+        {name: 'waterway', alias: 'Chemin d eau'},
+        {name: 'osm_id'},
+        {name: 'landuse'}
+      ],
+      ogcFilters: {
+        enabled: true,
+        editable: true
+      },
+      serverType: 'geoserver'
+    };
+
+    this.dataSourceService
+      .createAsyncDataSource(wmsDataSourceOptions as OgcFilterableDataSourceOptions)
+      .subscribe(dataSource => {
+        const layer = {
+          optionsFromCapabilities: true,
+          title: 'WMS Geoserver filterable ',
+          visible: true,
+          source: dataSource
+        };
+        this.map.addLayer(this.layerService.createLayer(layer));
+      });
+
+    const wfsDataSourceOptions: WFSDataSourceOptions = {
       type: 'wfs',
       url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/swtq',
       params: {
@@ -92,9 +132,9 @@ export class AppEditionComponent implements OnInit {
     };
 
     this.dataSourceService
-      .createAsyncDataSource(wfsDatasource)
+      .createAsyncDataSource(wfsDataSourceOptions)
       .subscribe(dataSource => {
-        const layer: LayerOptions = {
+        const layer = {
           title: 'Simple WFS ',
           visible: true,
           source: dataSource

packages/common/src/lib/edition/shared/edition.interfaces.ts

@@ -1,7 +1,7 @@
 import { ActionStore } from '../../action';
 import { EntityStore, EntityTableTemplate } from '../../entity';
 
-export interface EditorConfig {
+export interface EditorOptions {
   id: string;
   title: string;
   tableTemplate?: EntityTableTemplate;

packages/common/src/lib/edition/shared/editor.ts

@@ -5,7 +5,7 @@ import { ActionStore } from '../../action';
 import { EntityRecord, EntityStore, EntityTableTemplate } from '../../entity';
 import { Widget } from '../../widget';
 
-import { EditorConfig } from './edition.interfaces';
+import { EditorOptions } from './edition.interfaces';
 
 /**
  * This class is responsible of managing the relations between
@@ -52,27 +52,27 @@ export class Editor {
   /**
    * Editor id
    */
-  get id(): string { return this.config.id; }
+  get id(): string { return this.options.id; }
 
   /**
    * Editor title
    */
-  get title(): string { return this.config.title; }
+  get title(): string { return this.options.title; }
 
   /**
    * Entity table template
    */
-  get tableTemplate(): EntityTableTemplate { return this.config.tableTemplate; }
+  get tableTemplate(): EntityTableTemplate { return this.options.tableTemplate; }
 
   /**
    * Entities store
    */
-  get entityStore(): EntityStore<object> { return this.config.entityStore; }
+  get entityStore(): EntityStore<object> { return this.options.entityStore; }
 
   /**
    * Actions store (some actions activate a widget)
    */
-  get actionStore(): ActionStore { return this.config.actionStore; }
+  get actionStore(): ActionStore { return this.options.actionStore; }
 
   /**
    * Selected entity
@@ -89,7 +89,7 @@ export class Editor {
    */
   get hasWidget(): boolean { return this.widget !== undefined; }
 
-  constructor(private config: EditorConfig) {}
+  constructor(private options: EditorOptions) {}
 
   /**
    * Whether this editor is active
@@ -107,17 +107,22 @@ export class Editor {
     }
     this.active = true;
 
-    this.entity$$ = this.entityStore.stateView
+    if (this.entityStore !== undefined) {
+      this.entity$$ = this.entityStore.stateView
       .firstBy$((record: EntityRecord<object>) => record.state.selected === true)
       .pipe(distinctUntilChanged())
       .subscribe((record: EntityRecord<object>) => {
         const entity = record ? record.entity : undefined;
         this.onSelectEntity(entity);
       });
+    }
 
-    this.changes$$ = this.changes$
+    if (this.actionStore !== undefined) {
+      this.changes$$ = this.changes$
       .pipe(debounceTime(50))
       .subscribe(() => this.actionStore.updateActionsAvailability());
+    }
+
     this.changes$.next();
   }
 

packages/geo/src/lib/datasource/shared/datasources/arcgisrest-datasource.interface.ts

@@ -3,9 +3,7 @@ import olAttribution from 'ol/control/Attribution';
 import { DataSourceOptions } from './datasource.interface';
 import { FeatureDataSourceOptions } from './feature-datasource.interface';
 
-export interface ArcGISRestDataSourceOptions
-  extends DataSourceOptions,
-    FeatureDataSourceOptions {
+export interface ArcGISRestDataSourceOptions extends FeatureDataSourceOptions {
   // type?: 'arcgisrest'
   layer: string;
   params?: ArcGISRestDataSourceOptionsParams;

packages/geo/src/lib/datasource/shared/datasources/wfs-datasource.interface.ts

@@ -1,9 +1,7 @@
 import { DataSourceOptions } from './datasource.interface';
 import { FeatureDataSourceOptions } from './feature-datasource.interface';
 
-export interface WFSDataSourceOptions
-  extends DataSourceOptions,
-    FeatureDataSourceOptions {
+export interface WFSDataSourceOptions extends FeatureDataSourceOptions {
   // type?: 'wfs';
   params: WFSDataSourceOptionsParams; // Used by user
   paramsWFS?: WFSDataSourceOptionsParams; // Used by code

packages/geo/src/lib/edition/edition.module.ts

@@ -2,24 +2,25 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IgoWidgetModule } from '@igo2/common';
 
-import { provideWfsOgcFilterWidget } from './shared/wfs.widgets';
-import { IgoWfsEditorSelectorModule } from './wfs-editor-selector/wfs-editor-selector.module';
-import { IgoWfsOgcFilterModule } from './wfs-ogc-filter/wfs-ogc-filter.module';
+import { provideOgcFilterWidget } from './shared/widgets';
+
+import { IgoEditorSelectorModule } from './editor-selector/editor-selector.module';
+import { IgoOgcFilterModule } from './ogc-filter/ogc-filter.module';
 
 @NgModule({
   imports: [
     CommonModule,
     IgoWidgetModule,
-    IgoWfsEditorSelectorModule,
-    IgoWfsOgcFilterModule
+    IgoEditorSelectorModule,
+    IgoOgcFilterModule
   ],
   exports: [
-    IgoWfsEditorSelectorModule,
-    IgoWfsOgcFilterModule
+    IgoEditorSelectorModule,
+    IgoOgcFilterModule
   ],
   declarations: [],
   providers: [
-    provideWfsOgcFilterWidget()
+    provideOgcFilterWidget()
   ]
 })
 export class IgoGeoEditionModule {}

packages/geo/src/lib/edition/editor-selector/editor-selector.directive.ts

@@ -0,0 +1,89 @@
+import { Directive, Input, OnInit, OnDestroy } from '@angular/core';
+
+import { Subscription } from 'rxjs';
+
+import {
+  Editor,
+  EditorStore,
+  EditorSelectorComponent
+} from '@igo2/common';
+
+import { Layer, ImageLayer, VectorLayer } from '../../layer';
+import { IgoMap } from '../../map';
+import { WFSDataSource, WMSDataSource } from '../../datasource';
+import { OgcFilterableDataSourceOptions } from '../../filter';
+
+import { WfsEditorService } from '../shared/wfs-editor.service';
+import { WmsEditorService } from '../shared/wms-editor.service';
+
+@Directive({
+  selector: '[igoEditorSelector]'
+})
+export class EditorSelectorDirective implements OnInit, OnDestroy {
+
+  private layers$$: Subscription;
+
+  @Input() map: IgoMap;
+
+  get editorStore(): EditorStore { return this.component.store; }
+
+  constructor(
+    private component: EditorSelectorComponent,
+    private wfsEditorService: WfsEditorService,
+    private wmsEditorService: WmsEditorService
+  ) {}
+
+  ngOnInit() {
+    this.layers$$ = this.map.layers$
+      .subscribe((layers: Layer[]) => this.onLayersChange(layers));
+  }
+
+  ngOnDestroy() {
+    this.layers$$.unsubscribe();
+  }
+
+  private onLayersChange(layers: Layer[]) {
+    const editableLayers = layers.filter((layer: Layer) => this.layerIsEditable(layer));
+
+    const editors = editableLayers.map((layer: VectorLayer) => {
+      return this.getOrCreateEditor(layer);
+    });
+    this.editorStore.updateMany(editors);
+  }
+
+  private getOrCreateEditor(layer: VectorLayer | ImageLayer): Editor {
+    const editor = this.editorStore.get(layer.id);
+    if (editor !== undefined) {
+      return editor;
+    }
+    if (layer.dataSource instanceof WFSDataSource) {
+      return this.wfsEditorService.createEditor(
+        layer as VectorLayer,
+        this.map
+        );
+    } else if (layer.dataSource instanceof WMSDataSource) {
+      return this.wmsEditorService.createEditor(
+        layer as ImageLayer,
+        this.map
+      );
+    }
+
+    return;
+  }
+
+  private layerIsEditable(layer: Layer): boolean {
+    const dataSource = layer.dataSource;
+    if (dataSource instanceof WFSDataSource) {
+      return true;
+    }
+
+    if (dataSource instanceof WMSDataSource) {
+      const dataSourceOptions = (dataSource.options || {}) as OgcFilterableDataSourceOptions;
+      return dataSourceOptions.ogcFilters && dataSourceOptions.ogcFilters.enabled;
+    }
+
+    return false;
+
+  }
+
+}

packages/geo/src/lib/edition/editor-selector/editor-selector.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IgoOgcFilterModule } from '../ogc-filter/ogc-filter.module';
+import { EditorSelectorDirective } from './editor-selector.directive';
+
+/**
+ * @ignore
+ */
+@NgModule({
+  imports: [
+    CommonModule,
+    IgoOgcFilterModule
+  ],
+  exports: [
+    EditorSelectorDirective
+  ],
+  declarations: [
+    EditorSelectorDirective
+  ]
+})
+export class IgoEditorSelectorModule {}

packages/geo/src/lib/edition/wfs-ogc-filter/wfs-ogc-filter.component.ts → packages/geo/src/lib/edition/ogc-filter/ogc-filter.component.ts

@@ -13,12 +13,12 @@ import { Layer } from '../../layer/shared/layers/layer';
 import { IgoMap } from '../../map/shared/map';
 
 @Component({
-  selector: 'igo-wfs-ogc-filter',
-  templateUrl: './wfs-ogc-filter.component.html',
-  styleUrls: ['./wfs-ogc-filter.component.scss'],
+  selector: 'igo-ogc-filter',
+  templateUrl: './ogc-filter.component.html',
+  styleUrls: ['./ogc-filter.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class WfsOgcFilterComponent implements OnUpdateInputs, WidgetComponent {
+export class OgcFilterComponent implements OnUpdateInputs, WidgetComponent {
 
   @Input() layer: Layer;
 

packages/geo/src/lib/edition/wfs-ogc-filter/wfs-ogc-filter.module.ts → packages/geo/src/lib/edition/ogc-filter/ogc-filter.module.ts

@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material';
 
 import { IgoLanguageModule } from '@igo2/core';
 import { IgoFilterModule } from '../../filter/filter.module';
-import { WfsOgcFilterComponent } from './wfs-ogc-filter.component';
+import { OgcFilterComponent } from './ogc-filter.component';
 
 /**
  * @ignore
@@ -16,8 +16,8 @@ import { WfsOgcFilterComponent } from './wfs-ogc-filter.component';
     IgoLanguageModule,
     IgoFilterModule
   ],
-  exports: [WfsOgcFilterComponent],
-  declarations: [WfsOgcFilterComponent],
-  entryComponents: [WfsOgcFilterComponent]
+  exports: [OgcFilterComponent],
+  declarations: [OgcFilterComponent],
+  entryComponents: [OgcFilterComponent]
 })
-export class IgoWfsOgcFilterModule {}
+export class IgoOgcFilterModule {}

packages/geo/src/lib/edition/shared/index.ts

@@ -1,2 +1,3 @@
 export * from './wfs-editor.service';
-export * from './wfs.widgets';
+export * from './wms-editor.service';
+export * from './widgets';