Workspace - enabling table view for vector layers

packages/common/src/lib/workspace/shared/workspace.ts

@@ -87,6 +87,8 @@ export class Workspace<E extends object = object> {
   get active(): boolean { return this.active$.value; }
   readonly active$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
+  toolToActivate$: BehaviorSubject<{ toolbox: string; options: {[key: string]: any} }> = new BehaviorSubject(undefined);
+
   /**
    * Activate the workspace. By doing that, the workspace will observe
    * the selected entity (from the store) and update the actions availability.

packages/geo/src/lib/directions/directions-form/directions-form.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
 import { Subscription, Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, take, skipWhile } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
 import olFeature from 'ol/Feature';
 import OlGeoJSON from 'ol/format/GeoJSON';

packages/geo/src/lib/feature/shared/strategies/loading-layer.ts

@@ -1,10 +1,13 @@
 import { unByKey } from 'ol/Observable';
 import { OlEvent } from 'ol/events/Event';
+import * as olextent from 'ol/extent';
 
 import { EntityStoreStrategy } from '@igo2/common';
 
 import { FeatureStore } from '../store';
-import { FeatureStoreLoadingLayerStrategyOptions } from '../feature.interfaces';
+import { FeatureStoreLoadingLayerStrategyOptions, Feature } from '../feature.interfaces';
+import { Subscription } from 'rxjs';
+import { ClusterDataSource } from '../../../datasource/shared/datasources/cluster-datasource';
 
 /**
  * This strategy loads a layer's features into it's store counterpart.
@@ -20,6 +23,7 @@ export class FeatureStoreLoadingLayerStrategy extends EntityStoreStrategy {
    * Subscription to the store's OL source changes
    */
   private stores$$ = new Map<FeatureStore, string>();
+  private states$$: Subscription[] = [];
 
   constructor(protected options: FeatureStoreLoadingLayerStrategyOptions) {
     super(options);
@@ -76,7 +80,22 @@ export class FeatureStoreLoadingLayerStrategy extends EntityStoreStrategy {
     const olSource = store.layer.ol.getSource();
     olSource.on('change', (event: OlEvent) => {
       this.onSourceChanges(store);
+      this.updateEntitiesInExtent(store);
     });
+
+    this.states$$.push(store.layer.map.viewController.state$.subscribe(() => {
+      this.updateEntitiesInExtent(store);
+    }));
+  }
+
+  private updateEntitiesInExtent(store) {
+    store.state.updateAll({ inMapExtent: false });
+    const mapExtent = store.layer.map.viewController.getExtent();
+    const entitiesInMapExtent = store.entities$.value
+      .filter((entity: Feature) => olextent.intersects(entity.ol.getGeometry().getExtent(), mapExtent));
+    if (entitiesInMapExtent.length > 0) {
+      store.state.updateMany(entitiesInMapExtent, { inMapExtent: true }, true);
+    }
   }
 
   /**
@@ -99,6 +118,7 @@ export class FeatureStoreLoadingLayerStrategy extends EntityStoreStrategy {
       unByKey(entries[1]);
     });
     this.stores$$.clear();
+    this.states$$.map(state => state.unsubscribe());
   }
 
   /**
@@ -107,7 +127,13 @@ export class FeatureStoreLoadingLayerStrategy extends EntityStoreStrategy {
    * @param store Feature store
    */
   private onSourceChanges(store: FeatureStore) {
-    const olFeatures = store.layer.ol.getSource().getFeatures();
+    let olFeatures = store.layer.ol.getSource().getFeatures();
+
+    if (store.layer.dataSource instanceof ClusterDataSource) {
+      olFeatures = (olFeatures as any).flatMap((cluster: any) =>
+        cluster.get('features')
+      );
+    }
     if (olFeatures.length === 0) {
       store.clear();
     } else {

packages/geo/src/lib/workspace/shared/feature-actions.service.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+
+import { Action, EntityStoreFilterCustomFuncStrategy } from '@igo2/common';
+
+import { FeatureWorkspace } from './feature-workspace';
+import { mapExtentStrategyActiveIcon, mapExtentStrategyActiveToolTip } from './workspace.utils';
+import { ExportOptions } from '../../import-export/shared/export.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FeatureActionsService {
+
+  constructor() {}
+
+  loadActions(workspace: FeatureWorkspace) {
+    const actions = this.buildActions(workspace);
+    workspace.actionStore.load(actions);
+  }
+
+  buildActions(workspace: FeatureWorkspace): Action[] {
+    return [
+      {
+        id: 'filterInMapExtent',
+        icon: mapExtentStrategyActiveIcon(workspace),
+        title: 'igo.geo.workspace.inMapExtent.title',
+        tooltip: mapExtentStrategyActiveToolTip(workspace),
+        args: [workspace],
+        handler: (ws: FeatureWorkspace) => {
+          const filterStrategy = ws.entityStore
+          .getStrategyOfType(EntityStoreFilterCustomFuncStrategy);
+          if (filterStrategy.active) {
+            filterStrategy.deactivate();
+          } else {
+            filterStrategy.activate();
+          }
+        }
+      },
+      {
+        id: 'featureDownload',
+        icon: 'download',
+        title: 'igo.geo.workspace.wfsDownload.title',
+        tooltip: 'igo.geo.workspace.wfsDownload.tooltip',
+        handler: (ws: FeatureWorkspace) => {
+          const filterStrategy = ws.entityStore.getStrategyOfType(EntityStoreFilterCustomFuncStrategy);
+          ws.toolToActivate$.next({
+            toolbox: 'importExport',
+            options: { layer: ws.layer.id, featureInMapExtent: filterStrategy.active } as ExportOptions
+          });
+        },
+        args: [workspace]
+      }
+    ];
+  }
+}

packages/geo/src/lib/workspace/shared/feature-workspace.service.ts

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+
+import {
+  ActionStore,
+  EntityTableTemplate,
+  EntityStoreFilterCustomFuncStrategy,
+  EntityRecord,
+  EntityStoreStrategyFuncOptions
+} from '@igo2/common';
+
+import {
+  FeatureStore,
+  FeatureStoreLoadingLayerStrategy,
+  FeatureStoreSelectionStrategy
+} from '../../feature';
+import { VectorLayer } from '../../layer';
+import { IgoMap } from '../../map';
+import { SourceFieldsOptionsParams } from '../../datasource';
+
+import { FeatureWorkspace } from './feature-workspace';
+import { FeatureActionsService } from './feature-actions.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FeatureWorkspaceService {
+
+  constructor(private featureActionsService: FeatureActionsService) {}
+
+  createWorkspace(layer: VectorLayer, map: IgoMap): FeatureWorkspace {
+    const wks = new FeatureWorkspace({
+      id: layer.id,
+      title: layer.title,
+      layer,
+      map,
+      entityStore: this.createFeatureStore(layer, map),
+      actionStore: new ActionStore([]),
+      meta: {
+        tableTemplate: this.createTableTemplate(layer)
+      }
+    });
+    this.featureActionsService.loadActions(wks);
+    return wks;
+
+  }
+
+  private createFeatureStore(layer: VectorLayer, map: IgoMap): FeatureStore {
+    const store = new FeatureStore([], {map});
+    store.bindLayer(layer);
+
+    const loadingStrategy = new FeatureStoreLoadingLayerStrategy({});
+    const selectionStrategy = new FeatureStoreSelectionStrategy({
+      map,
+      hitTolerance: 15
+    });
+    store.addStrategy(loadingStrategy, true);
+    store.addStrategy(selectionStrategy, true);
+    store.addStrategy(this.createFilterInMapExtentStrategy(), false);
+    return store;
+  }
+
+  private createTableTemplate(layer: VectorLayer): EntityTableTemplate {
+    const fields = layer.dataSource.options.sourceFields || [];
+    const columns = fields.map((field: SourceFieldsOptionsParams) => {
+      return {
+        name: `properties.${field.name}`,
+        title: field.alias ? field.alias : field.name
+      };
+    });
+
+    return {
+      selection: true,
+      sort: true,
+      columns
+    };
+  }
+
+  private createFilterInMapExtentStrategy(): EntityStoreFilterCustomFuncStrategy {
+    const filterClauseFunc = (record: EntityRecord<object>) => {
+      return record.state.inMapExtent === true;
+    };
+    return new EntityStoreFilterCustomFuncStrategy({filterClauseFunc} as EntityStoreStrategyFuncOptions);
+  }
+}

packages/geo/src/lib/workspace/shared/feature-workspace.ts

@@ -0,0 +1,23 @@
+import {
+  Workspace,
+  WorkspaceOptions
+} from '@igo2/common';
+
+import { VectorLayer } from '../../layer';
+import { IgoMap } from '../../map';
+
+export interface FeatureWorkspaceOptions extends WorkspaceOptions {
+  layer: VectorLayer;
+  map: IgoMap;
+}
+
+export class FeatureWorkspace extends Workspace {
+
+  get layer(): VectorLayer { return this.options.layer; }
+
+  get map(): IgoMap { return this.options.map; }
+
+  constructor(protected options: FeatureWorkspaceOptions) {
+    super(options);
+  }
+}

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

@@ -1,3 +1,7 @@
 export * from './wfs-workspace';
 export * from './wfs-actions.service';
 export * from './wfs-workspace.service';
+export * from './feature-workspace';
+export * from './feature-actions.service';
+export * from './feature-workspace.service';
+export * from './workspace.utils';

packages/geo/src/lib/workspace/shared/wfs-actions.service.ts

@@ -1,26 +1,45 @@
 import { Inject, Injectable } from '@angular/core';
 
-import { Action, Widget } from '@igo2/common';
+import { Action, Widget, EntityStoreFilterCustomFuncStrategy } from '@igo2/common';
 
-import { DownloadService } from '../../download';
-import { OgcFilterWidget } from '../widgets';
+import { OgcFilterWidget } from '../widgets/widgets';
 import { WfsWorkspace } from './wfs-workspace';
+import { mapExtentStrategyActiveIcon, mapExtentStrategyActiveToolTip } from './workspace.utils';
+import { ExportOptions } from '../../import-export/shared/export.interface';
 
 @Injectable({
   providedIn: 'root'
 })
 export class WfsActionsService {
 
-  constructor(
-    @Inject(OgcFilterWidget) private ogcFilterWidget: Widget,
-    private downloadService: DownloadService
-  ) {}
+  constructor(@Inject(OgcFilterWidget) private ogcFilterWidget: Widget) {}
+
+  loadActions(workspace: WfsWorkspace) {
+    const actions = this.buildActions(workspace);
+    workspace.actionStore.load(actions);
+  }
 
   buildActions(workspace: WfsWorkspace): Action[] {
     return [
+      {
+        id: 'filterInMapExtent',
+        icon: mapExtentStrategyActiveIcon(workspace),
+        title: 'igo.geo.workspace.inMapExtent.title',
+        tooltip: mapExtentStrategyActiveToolTip(workspace),
+        args: [workspace],
+        handler: (ws: WfsWorkspace) => {
+          const filterStrategy = ws.entityStore
+          .getStrategyOfType(EntityStoreFilterCustomFuncStrategy);
+          if (filterStrategy.active) {
+            filterStrategy.deactivate();
+          } else {
+            filterStrategy.activate();
+          }
+        }
+      },
       {
         id: 'ogcFilter',
-        icon: 'filter-list',
+        icon: 'filter',
         title: 'igo.geo.workspace.ogcFilter.title',
         tooltip: 'igo.geo.workspace.ogcFilter.tooltip',
         handler: (widget: Widget, ws: WfsWorkspace) => {
@@ -36,7 +55,13 @@ export class WfsActionsService {
         icon: 'download',
         title: 'igo.geo.workspace.wfsDownload.title',
         tooltip: 'igo.geo.workspace.wfsDownload.tooltip',
-        handler: (ws: WfsWorkspace) => this.downloadService.open(ws.layer),
+        handler: (ws: WfsWorkspace) => {
+          const filterStrategy = ws.entityStore.getStrategyOfType(EntityStoreFilterCustomFuncStrategy);
+          ws.toolToActivate$.next({
+            toolbox: 'importExport',
+            options: { layer: ws.layer.id, featureInMapExtent: filterStrategy.active } as ExportOptions
+          });
+        },
         args: [workspace]
       }
     ];

packages/geo/src/lib/workspace/shared/wfs-workspace.service.ts

@@ -2,7 +2,10 @@ import { Injectable } from '@angular/core';
 
 import {
   ActionStore,
-  EntityTableTemplate
+  EntityTableTemplate,
+  EntityStoreFilterCustomFuncStrategy,
+  EntityRecord,
+  EntityStoreStrategyFuncOptions
 } from '@igo2/common';
 
 import {
@@ -15,16 +18,17 @@ import { IgoMap } from '../../map';
 import { SourceFieldsOptionsParams } from '../../datasource';
 
 import { WfsWorkspace } from './wfs-workspace';
+import { WfsActionsService } from './wfs-actions.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class WfsWorkspaceService {
 
-  constructor() {}
+  constructor(private wfsActionsService: WfsActionsService) {}
 
   createWorkspace(layer: VectorLayer, map: IgoMap): WfsWorkspace {
-    return new WfsWorkspace({
+    const wks = new WfsWorkspace({
       id: layer.id,
       title: layer.title,
       layer,
@@ -35,6 +39,9 @@ export class WfsWorkspaceService {
         tableTemplate: this.createTableTemplate(layer)
       }
     });
+    this.wfsActionsService.loadActions(wks);
+    return wks;
+
   }
 
   private createFeatureStore(layer: VectorLayer, map: IgoMap): FeatureStore {
@@ -44,11 +51,11 @@ export class WfsWorkspaceService {
     const loadingStrategy = new FeatureStoreLoadingLayerStrategy({});
     const selectionStrategy = new FeatureStoreSelectionStrategy({
       map,
-      hitTolerance: 5
+      hitTolerance: 15
     });
     store.addStrategy(loadingStrategy, true);
     store.addStrategy(selectionStrategy, true);
-
+    store.addStrategy(this.createFilterInMapExtentStrategy(), false);
     return store;
   }
 
@@ -68,4 +75,10 @@ export class WfsWorkspaceService {
     };
   }
 
+  private createFilterInMapExtentStrategy(): EntityStoreFilterCustomFuncStrategy {
+    const filterClauseFunc = (record: EntityRecord<object>) => {
+      return record.state.inMapExtent === true;
+    };
+    return new EntityStoreFilterCustomFuncStrategy({filterClauseFunc} as EntityStoreStrategyFuncOptions);
+  }
 }