BREAKING CHANGE(style): Various style interface moved into igoStyle …

…property + vectorlayer style changer * refactor(*):unifying styles in a single directory * refactor(*):unifying styles in a single directory * refactor(style-modal): move to style directory * wip * fix(context): crash on context export with vector data (infra-geo-ouverte/igo2#711) * refactor(import-style): random style based on attributes * BREAKING CHANGE(style): Various style interface moved into igoStyle property * wip * wip * wip * wip * refactor(style-modal): renaming style-modal to style-modal-drawing * feat(style): methods to change imported vector layer style (base style only) * wip merge conflict resolution * wip
infra-geo-ouverte · Mar 22, 2023 · 2913d70 · 2913d70
1 parent 331d998
commit 2913d70
Show file tree

Hide file tree

Showing 84 changed files with 1,059 additions and 539 deletions.
diff --git a/demo/src/app/geo/import-export/import-export.module.ts b/demo/src/app/geo/import-export/import-export.module.ts
@@ -6,7 +6,8 @@ import { IgoMessageModule } from '@igo2/core';
 import {
   IgoMapModule,
   IgoImportExportModule,
-  provideStyleListOptions
+  provideStyleListOptions,
+  IgoStyleModule
 } from '@igo2/geo';
 
 import { AppImportExportComponent } from './import-export.component';
@@ -20,6 +21,7 @@ import { AppImportExportRoutingModule } from './import-export-routing.module';
     MatButtonModule,
     IgoMessageModule,
     IgoMapModule,
+    IgoStyleModule,
     IgoImportExportModule
   ],
   exports: [AppImportExportComponent],

diff --git a/packages/context/src/lib/context-import-export/shared/context-import.utils.ts b/packages/context/src/lib/context-import-export/shared/context-import.utils.ts
@@ -1,4 +1,3 @@
-import * as olStyle from 'ol/style';
 import type { default as OlGeometry } from 'ol/geom/Geometry';
 
 import {
@@ -12,7 +11,9 @@ import {
   StyleByAttribute,
   ClusterParam,
   ClusterDataSourceOptions,
-  ClusterDataSource
+  ClusterDataSource,
+  featureRandomStyle,
+  featureRandomStyleFunction
 } from '@igo2/geo';
 import { MessageService, LanguageService } from '@igo2/core';
 import { DetailedContext } from '../../context-manager/shared/context.interface';
@@ -174,36 +175,28 @@ export function addImportedFeaturesToMap(
   map: IgoMap,
   layerTitle: string
 ): VectorLayer {
-  const r = Math.floor(Math.random() * 255);
-  const g = Math.floor(Math.random() * 255);
-  const b = Math.floor(Math.random() * 255);
-  const stroke = new olStyle.Stroke({
-    color: [r, g, b, 1],
-    width: 2
-  });
-
-  const fill = new olStyle.Fill({
-    color: [r, g, b, 0.4]
-  });
   const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = {
     type: 'vector',
     queryable: true
   };
   const source = new FeatureDataSource(sourceOptions);
   source.ol.addFeatures(olFeatures);
+  let randomStyle;
+  let editable: boolean = false;
+  if (
+    olFeatures[0].getKeys().includes('_style') ||
+    olFeatures[0].getKeys().includes('_mapTitle')) {
+    randomStyle = featureRandomStyleFunction();
+  } else {
+    randomStyle = featureRandomStyle();
+    editable = true;
+  }
   const layer = new VectorLayer({
     title: layerTitle,
     isIgoInternalLayer: true,
     source,
-    style: new olStyle.Style({
-      stroke,
-      fill,
-      image: new olStyle.Circle({
-        radius: 5,
-        stroke,
-        fill
-      })
-    })
+    igoStyle: { editable },
+    style: randomStyle
   });
   map.addLayer(layer);
 

diff --git a/packages/context/src/lib/context-manager/shared/context.service.ts b/packages/context/src/lib/context-manager/shared/context.service.ts
@@ -542,17 +542,17 @@ export class ContextService {
       });
 
     layers.forEach((layer) => {
+      // Do not seem to work properly. layerFound is always undefined.
       const layerFound = currentContext.layers.find(
         (contextLayer) => {
           const source = contextLayer.source;
           return source && layer.id === source.id && !contextLayer.baseLayer;
         });
-
       if (layerFound) {
         let layerStyle = layerFound[`style`];
-        if (layerFound[`styleByAttribute`]) {
+        if (layerFound[`igoStyle`][`styleByAttribute`]) {
           layerStyle = undefined;
-        } else if (layerFound[`clusterBaseStyle`]) {
+        } else if (layerFound[`igoStyle`][`clusterBaseStyle`]) {
           layerStyle = undefined;
           delete layerFound.sourceOptions[`source`];
           delete layerFound.sourceOptions[`format`];
@@ -561,8 +561,10 @@ export class ContextService {
           baseLayer: layerFound.baseLayer,
           title: layer.options.title,
           zIndex: layer.zIndex,
-          styleByAttribute: layerFound[`styleByAttribute`],
-          clusterBaseStyle: layerFound[`clusterBaseStyle`],
+          igoStyle: {
+            styleByAttribute: layerFound[`igoStyle`][`styleByAttribute`],
+            clusterBaseStyle: layerFound[`igoStyle`][`clusterBaseStyle`],
+          },
           style: layerStyle,
           clusterParam: layerFound[`clusterParam`],
           visible: layer.visible,

diff --git a/packages/geo/src/lib/datasource/shared/capabilities.service.ts b/packages/geo/src/lib/datasource/shared/capabilities.service.ts
@@ -14,7 +14,7 @@ import olAttribution from 'ol/control/Attribution';
 import { ObjectUtils } from '@igo2/utils';
 import { MapService } from '../../map/shared/map.service';
 import { getResolutionFromScale } from '../../map/shared/map.utils';
-import { EsriStyleGenerator } from '../utils/esri-style-generator';
+import { EsriStyleGenerator } from '../../style/shared/datasource/esri-style-generator';
 import {
   QueryFormat,
   QueryFormatMimeType

diff --git a/packages/geo/src/lib/datasource/utils/index.ts b/packages/geo/src/lib/datasource/utils/index.ts
@@ -1,2 +1 @@
-export * from './esri-style-generator';
 export * from './tilegrid';
diff --git a/packages/geo/src/lib/directions/shared/directions.utils.ts b/packages/geo/src/lib/directions/shared/directions.utils.ts
@@ -8,7 +8,7 @@ import * as olProj from 'ol/proj';
 import { uuid, NumberUtils } from '@igo2/utils';
 
 import { Direction, FeatureWithDirection, FeatureWithStop, Stop } from './directions.interface';
-import { createOverlayMarkerStyle } from '../../overlay/shared/overlay-marker-style.utils';
+import { createOverlayMarkerStyle } from '../../style/shared/overlay/overlay-marker-style.utils';
 import { VectorLayer } from '../../layer/shared/layers/vector-layer';
 import { FeatureDataSource } from '../../datasource/shared/datasources/feature-datasource';
 import { tryBindStoreLayer } from '../../feature/shared/feature.utils';

diff --git a/packages/geo/src/lib/draw/draw/draw.component.html b/packages/geo/src/lib/draw/draw/draw.component.html
@@ -169,8 +169,8 @@
     mat-raised-button
     color="primary"
     (click)="openStyleModalDialog()"
-    [matTooltip]="'igo.geo.layer.style.styleModalTooltip' | translate">
-    {{'igo.geo.layer.style.styleModal' | translate}}
+    [matTooltip]="'igo.geo.style.styleModalTooltipSelected' | translate">
+    {{'igo.geo.style.styleModal' | translate}}
     <mat-icon
       class="style-icon"
       svgIcon="palette"

diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts
@@ -23,7 +23,8 @@ import {
 
 import { LanguageService } from '@igo2/core';
 import { MatDialog } from '@angular/material/dialog';
-import { CoordinatesUnit, FontType, GeometryType, LabelType } from '../shared/draw.enum';
+import { CoordinatesUnit, GeometryType, LabelType } from '../shared/draw.enum';
+import { FontType } from '../../style/shared/font.enum';
 import { IgoMap } from '../../map/shared/map';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { Draw, FeatureWithDraw } from '../shared/draw.interface';
@@ -50,15 +51,16 @@ import OlOverlay from 'ol/Overlay';
 import type { Type } from 'ol/geom/Geometry';
 import { default as OlGeometry } from 'ol/geom/Geometry';
 import { getDistance, getLength } from 'ol/sphere';
-import { DrawStyleService } from '../shared/draw-style.service';
+import { DrawStyleService } from '../../style/style-service/draw-style.service';
 import { first, skip } from 'rxjs/operators';
 import { DrawPopupComponent } from './draw-popup.component';
 import { DrawShorcutsComponent } from './draw-shorcuts.component';
 import { getTooltipsOfOlGeometry } from '../../measure/shared/measure.utils';
 import { createInteractionStyle, DDtoDMS } from '../shared/draw.utils';
 import { transform } from 'ol/proj';
 import { DrawIconService } from '../shared/draw-icon.service';
-import { StyleModalComponent, StyleModalData } from '../../layer/style-modal/style-modal.component';
+import { StyleModalDrawingComponent } from '../../style/style-modal/drawing/style-modal-drawing.component';
+import { StyleModalData } from '../../style/style-modal/shared/style-modal.interface';
 
 import {
   trigger,
@@ -397,7 +399,7 @@ export class DrawComponent implements OnInit, OnDestroy {
   openStyleModalDialog() {
     setTimeout(() => {
       // open the dialog box used to style features
-      const dialogRef = this.dialog.open(StyleModalComponent, {
+      const dialogRef = this.dialog.open(StyleModalDrawingComponent, {
         disableClose: false,
         data: {
           features: this.selectedFeatures$.getValue(),
@@ -1358,7 +1360,8 @@ export class DrawComponent implements OnInit, OnDestroy {
           feature.get('drawingStyle').fill,
           feature.get('drawingStyle').stroke,
           feature.get('offsetX'),
-          feature.get('offsetY')
+          feature.get('offsetY'),
+          this.map.projection
         );
       });
     }

diff --git a/packages/geo/src/lib/draw/shared/draw.enum.ts b/packages/geo/src/lib/draw/shared/draw.enum.ts
@@ -5,22 +5,6 @@ export enum GeometryType {
     Circle = 'Circle'
 }
 
-export enum FontType {
-    Arial = 'Arial',
-    ArialBlack = 'Arial Black',
-    Verdana = 'Verdana',
-    Tahoma = 'Tahoma',
-    TrebuchetMS = 'Trebuchet MS',
-    Impact = 'Impact',
-    TimesNewRoman = 'Times New Roman',
-    Georgia = 'Georgia',
-    AmericanTypewriter = 'American Typewriter',
-    Courier = 'Courier',
-    LucidaConsole = 'Lucida Console',
-    BrushScriptMT = 'Brush Script MT',
-    ComicSansMS = 'Comic Sans MS'
-}
-
 export enum LabelType{
     Coordinates = 'Coordinates',
     Length = 'Length',

diff --git a/packages/geo/src/lib/draw/shared/index.ts b/packages/geo/src/lib/draw/shared/index.ts
@@ -2,4 +2,3 @@ export * from './draw.enum';
 export * from './draw-icon.service';
 export * from './draw.interface';
 export * from './draw.utils';
-export * from './draw-style.service';
diff --git a/packages/geo/src/lib/geo.module.ts b/packages/geo/src/lib/geo.module.ts
@@ -20,6 +20,7 @@ import { IgoSearchModule } from './search/search.module';
 import { IgoToastModule } from './toast/toast.module';
 import { IgoGeoWorkspaceModule } from './workspace/workspace.module';
 import { IgoWktModule } from './wkt/wkt.module';
+import { IgoStyleModule } from './style/style.module';
 
 @NgModule({
   imports: [],
@@ -44,6 +45,7 @@ import { IgoWktModule } from './wkt/wkt.module';
     IgoSearchModule,
     IgoToastModule,
     IgoGeoWorkspaceModule,
+    IgoStyleModule,
     IgoWktModule
   ]
 })

diff --git a/packages/geo/src/lib/import-export/import-export.module.ts b/packages/geo/src/lib/import-export/import-export.module.ts
@@ -19,7 +19,6 @@ import { IgoKeyValueModule, IgoDrapDropModule, IgoSpinnerModule, IgoCustomHtmlMo
 import { ExportButtonComponent } from './export-button/export-button.component';
 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: [
@@ -40,10 +39,9 @@ import { IgoStyleListModule } from './style-list/style-list.module';
     IgoSpinnerModule,
     IgoKeyValueModule,
     IgoDrapDropModule,
-    IgoCustomHtmlModule,
-    IgoStyleListModule.forRoot()
+    IgoCustomHtmlModule
   ],
-  exports: [ImportExportComponent, DropGeoFileDirective, IgoStyleListModule, ExportButtonComponent],
+  exports: [ImportExportComponent, DropGeoFileDirective, ExportButtonComponent],
   declarations: [ImportExportComponent, DropGeoFileDirective, ExportButtonComponent]
 })
 export class IgoImportExportModule {

diff --git a/packages/geo/src/lib/import-export/import-export/import-export.component.ts b/packages/geo/src/lib/import-export/import-export/import-export.component.ts
@@ -40,8 +40,8 @@ import {
   handleFileImportSuccess,
   handleFileImportError
 } from '../shared/import.utils';
-import { StyleService } from '../../layer/shared/style.service';
-import { StyleListService } from '../style-list/style-list.service';
+import { StyleService } from '../../style/style-service/style.service';
+import { StyleListService } from '../../style/style-list/style-list.service';
 import { skipWhile } from 'rxjs/operators';
 import { EntityRecord, Workspace } from '@igo2/common';
 import type { WorkspaceStore } from '@igo2/common';

diff --git a/packages/geo/src/lib/import-export/index.ts b/packages/geo/src/lib/import-export/index.ts
@@ -1,4 +1,3 @@
 export * from './shared';
 export * from './import-export';
 export * from './export-button';
-export * from './style-list';
diff --git a/packages/geo/src/lib/import-export/shared/drop-geo-file.directive.ts b/packages/geo/src/lib/import-export/shared/drop-geo-file.directive.ts
@@ -10,8 +10,8 @@ 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';
+import { StyleService } from '../../style/style-service/style.service';
+import { StyleListService } from '../../style/style-list/style-list.service';
 import { concatMap, first, skipWhile } from 'rxjs/operators';
 
 @Directive({

diff --git a/packages/geo/src/lib/import-export/shared/import.utils.ts b/packages/geo/src/lib/import-export/shared/import.utils.ts
@@ -1,7 +1,3 @@
-import * as olStyle from 'ol/style';
-import OlFeature from 'ol/Feature';
-import type { default as OlGeometry } from 'ol/geom/Geometry';
-
 import { MessageService, LanguageService } from '@igo2/core';
 
 import { FeatureDataSource } from '../../datasource/shared/datasources/feature-datasource';
@@ -15,13 +11,14 @@ import {
 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';
+import { StyleService } from '../../style/style-service/style.service';
+import { StyleByAttribute } from '../../style/shared/vector/vector-style.interface';
+import { StyleListService } from '../../style/style-list/style-list.service';
 import { ClusterParam } from '../../layer/shared/clusterParam';
 import { ClusterDataSource } from '../../datasource/shared/datasources/cluster-datasource';
 import { ClusterDataSourceOptions } from '../../datasource/shared/datasources/cluster-datasource.interface';
 import { uuid } from '@igo2/utils';
+import { featureRandomStyle, featureRandomStyleFunction } from '../../style/shared/feature/feature-style';
 
 export function addLayerAndFeaturesToMap(
   features: Feature[],
@@ -38,11 +35,22 @@ export function addLayerAndFeaturesToMap(
   };
   const source = new FeatureDataSource(sourceOptions);
   source.ol.addFeatures(olFeatures);
+  let randomStyle;
+  let editable: boolean = false;
+  if (
+    olFeatures[0].getKeys().includes('_style') ||
+    olFeatures[0].getKeys().includes('_mapTitle')) {
+    randomStyle = featureRandomStyleFunction();
+  } else {
+    randomStyle = featureRandomStyle();
+    editable = true;
+  }
   const layer = new VectorLayer({
     title: layerTitle,
     isIgoInternalLayer: true,
     source,
-    style: createImportedLayerRandomStyle()
+    igoStyle: { editable },
+    style: randomStyle
   });
   layer.setExtent(computeOlFeaturesExtent(map, olFeatures));
   map.addLayer(layer);
@@ -327,44 +335,3 @@ export function getFileExtension(file: File): string {
 export function computeLayerTitleFromFile(file: File): string {
   return file.name.substr(0, file.name.lastIndexOf('.'));
 }
-function createImportedLayerRandomStyle(): (olFeature: OlFeature<OlGeometry>) => olStyle.Style {
-  const r = Math.floor(Math.random() * 255);
-  const g = Math.floor(Math.random() * 255);
-  const b = Math.floor(Math.random() * 255);
-  const stroke = new olStyle.Stroke({
-    color: [r, g, b, 1],
-    width: 2
-  });
-  const fill = new olStyle.Fill({
-    color: [r, g, b, 0.4]
-  });
-
-  return (olFeature: OlFeature<OlGeometry>) => {
-      const customStyle = olFeature.get('_style');
-      if (customStyle) {
-        const styleService = new StyleService();
-        return styleService.createStyle(customStyle);
-      }
-
-      const style = new olStyle.Style({
-        stroke,
-        fill,
-        image: new olStyle.Circle({
-          radius: 5,
-          stroke,
-          fill
-        }),
-        text: olFeature.get('_mapTitle') ? new olStyle.Text({
-          text: olFeature.get('_mapTitle').toString(),
-          offsetX: 5,
-          offsetY: -5,
-          font: '12px Calibri,sans-serif',
-          fill: new olStyle.Fill({ color: '#000' }),
-          stroke: new olStyle.Stroke({ color: '#fff', width: 3 }),
-          overflow: true
-        }): undefined
-      });
-      return style;
-  };
-}
-
diff --git a/packages/geo/src/lib/layer/index.ts b/packages/geo/src/lib/layer/index.ts
@@ -7,4 +7,3 @@ export * from './layer-list';
 export * from './layer-list-tool';
 export * from './track-feature-button';
 export * from './utils';
-export * from './style-modal';
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './esri-style-generator';
		export * from './tilegrid';