geonetwork-ui 2.4.0-dev.e97caaf2 → 2.4.0-dev.f5019723

package/src/libs/feature/map/src/lib/map-context/component/map-context.component.ts

@@ -1,57 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-} from '@angular/core'
-import { MapUtilsService } from '../../utils/map-utils.service'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
-
-import Map from 'ol/Map'
-import { FeatureInfoService } from '../../feature-info/feature-info.service'
-import { MapManagerService } from '../../manager/map-manager.service'
-import { MapContextModel } from '../map-context.model'
-import { MapContextService } from '../map-context.service'
-import { MapConfig } from '../../../../../../../libs/util/app-config/src'
-
-@Component({
-  selector: 'gn-ui-map-context',
-  templateUrl: './map-context.component.html',
-  styleUrls: ['./map-context.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MapContextComponent implements OnChanges {
-  @Input() context: MapContextModel
-  @Input() mapConfig: MapConfig
-  @Output() featureClicked = new EventEmitter<Feature<Geometry>[]>()
-
-  map: Map
-
-  constructor(
-    private service: MapContextService,
-    private featureInfo: FeatureInfoService,
-    private manager: MapManagerService,
-    private utils: MapUtilsService
-  ) {
-    this.map = manager.map
-  }
-
-  ngOnChanges() {
-    if (this.context?.view) {
-      if (this.context.view.extent && !this.map.getSize()) {
-        this.map.once('change:size', () => {
-          this.service.resetMapFromContext(
-            this.map,
-            this.context,
-            this.mapConfig
-          )
-        })
-      } else {
-        this.service.resetMapFromContext(this.map, this.context, this.mapConfig)
-      }
-    }
-  }
-}

package/src/libs/feature/map/src/lib/map-context/map-context.fixtures.ts

@@ -1,51 +0,0 @@
-import { FEATURE_COLLECTION_POLYGON_FIXTURE_4326 } from '../../../../../../libs/common/fixtures/src'
-import { Extent } from 'ol/extent'
-import {
-  MapContextLayerGeojsonModel,
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapContextViewModel,
-} from '../map-context/map-context.model'
-
-export const MAP_CTX_LAYER_XYZ_FIXTURE: MapContextLayerModel = {
-  type: MapContextLayerTypeEnum.XYZ,
-  url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-}
-export const MAP_CTX_LAYER_WMS_FIXTURE: MapContextLayerModel = {
-  type: MapContextLayerTypeEnum.WMS,
-  url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WMS',
-  name: 'commune_actuelle_3857',
-}
-export const MAP_CTX_LAYER_WFS_FIXTURE: MapContextLayerModel = {
-  type: MapContextLayerTypeEnum.WFS,
-  url: 'https://www.geograndest.fr/geoserver/region-grand-est/ows?REQUEST=GetCapabilities&SERVICE=WFS&VERSION=1.1.0',
-  name: 'ms:commune_actuelle_3857',
-}
-export const MAP_CTX_LAYER_GEOJSON_FIXTURE: MapContextLayerGeojsonModel = {
-  type: MapContextLayerTypeEnum.GEOJSON,
-  data: FEATURE_COLLECTION_POLYGON_FIXTURE_4326,
-}
-export const MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE: MapContextLayerGeojsonModel =
-  {
-    type: MapContextLayerTypeEnum.GEOJSON,
-    url: 'https://my.host.com/data/regions.json',
-  }
-
-export const MAP_CTX_VIEW_FIXTURE: MapContextViewModel = {
-  center: [7.75, 48.6],
-  zoom: 9,
-}
-
-export const MAP_CTX_FIXTURE: MapContextModel = {
-  layers: [
-    MAP_CTX_LAYER_XYZ_FIXTURE,
-    MAP_CTX_LAYER_WMS_FIXTURE,
-    MAP_CTX_LAYER_GEOJSON_FIXTURE,
-  ],
-  view: MAP_CTX_VIEW_FIXTURE,
-}
-
-export const MAP_CTX_EXTENT_FIXTURE: Extent = [
-  171083.69713494915, 6246047.945419401, 476970.39956295764, 6631079.362882684,
-]

package/src/libs/feature/map/src/lib/map-context/map-context.model.ts

@@ -1,95 +0,0 @@
-import type { FeatureCollection } from 'geojson'
-import { Coordinate } from 'ol/coordinate'
-import type { Extent } from 'ol/extent'
-
-export enum MapContextLayerTypeEnum {
-  XYZ = 'xyz',
-  WMS = 'wms',
-  WMTS = 'wmts',
-  WFS = 'wfs',
-  GEOJSON = 'geojson',
-  OGCAPI = 'ogcapi',
-}
-
-export interface MapContextModel {
-  layers: MapContextLayerModel[]
-  view?: MapContextViewModel
-}
-
-export interface MapContextLayerWmsModel {
-  type: 'wms'
-  url: string
-  name: string
-  attributions?: string
-}
-
-export interface MapContextLayerWmtsModel {
-  type: 'wmts'
-  url: string
-  name: string
-  attributions?: string
-}
-
-interface MapContextLayerWfsModel {
-  type: 'wfs'
-  url: string
-  name: string
-  attributions?: string
-}
-
-export interface MapContextLayerOgcapiModel {
-  type: 'ogcapi'
-  url: string
-  name: string
-  layerType: 'feature' | 'vectorTiles' | 'mapTiles' | 'record'
-  attributions?: string
-}
-
-interface LayerXyzModel {
-  type: 'xyz'
-  name?: string
-  attributions?: string
-}
-interface LayerXyzModelWithUrl extends LayerXyzModel {
-  url: string
-  urls?: never
-}
-interface LayerXyzModelWithUrls extends LayerXyzModel {
-  urls: string[]
-  url?: never
-}
-export type MapContextLayerXyzModel =
-  | LayerXyzModelWithUrl
-  | LayerXyzModelWithUrls
-
-interface LayerGeojson {
-  type: 'geojson'
-  attributions?: string
-}
-interface LayerGeojsonWithUrl extends LayerGeojson {
-  url: string
-  data?: never
-}
-interface LayerGeojsonWithData extends LayerGeojson {
-  data: FeatureCollection | string
-  url?: never
-}
-export type MapContextLayerGeojsonModel =
-  | LayerGeojsonWithUrl
-  | LayerGeojsonWithData
-
-export type MapContextLayerModel =
-  | MapContextLayerWmsModel
-  | MapContextLayerWmtsModel
-  | MapContextLayerWfsModel
-  | MapContextLayerXyzModel
-  | MapContextLayerGeojsonModel
-  | MapContextLayerOgcapiModel
-
-export interface MapContextViewModel {
-  center?: Coordinate // expressed in long/lat (EPSG:4326)
-  zoom?: number
-  extent?: Extent // expressed in long/lat (EPSG:4326)
-  maxZoom?: number
-  maxExtent?: Extent // expressed in long/lat (EPSG:4326)
-}

package/src/libs/feature/map/src/lib/map-context/map-context.service.ts

@@ -1,318 +0,0 @@
-import { Injectable } from '@angular/core'
-import { MapStyleService } from '../style/map-style.service'
-import {
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextLayerXyzModel,
-  MapContextModel,
-  MapContextViewModel,
-} from './map-context.model'
-import Map from 'ol/Map'
-import View from 'ol/View'
-import Layer from 'ol/layer/Base'
-import VectorLayer from 'ol/layer/Vector'
-import TileWMS from 'ol/source/TileWMS'
-import TileLayer from 'ol/layer/Tile'
-import XYZ from 'ol/source/XYZ'
-import VectorSource from 'ol/source/Vector'
-import GeoJSON from 'ol/format/GeoJSON'
-import { MapUtilsService } from '../utils/map-utils.service'
-import { bbox as bboxStrategy } from 'ol/loadingstrategy'
-import { LayerConfig, MapConfig } from '../../../../../../libs/util/app-config/src'
-import { FeatureCollection } from 'geojson'
-import { fromLonLat } from 'ol/proj'
-import WMTS from 'ol/source/WMTS'
-import { Geometry } from 'ol/geom'
-import Feature from 'ol/Feature'
-import { WfsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
-import OGCVectorTile from 'ol/source/OGCVectorTile.js'
-import { MVT } from 'ol/format'
-import VectorTileLayer from 'ol/layer/VectorTile'
-import OGCMapTile from 'ol/source/OGCMapTile.js'
-import ImageLayer from 'ol/layer/Image'
-import ImageWMS from 'ol/source/ImageWMS'
-
-export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = {
-  type: MapContextLayerTypeEnum.XYZ,
-  urls: [
-    `https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-    `https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-    `https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-  ],
-  attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
-}
-
-export const DEFAULT_VIEW: MapContextViewModel = {
-  center: [0, 15],
-  zoom: 2,
-}
-
-export const WFS_MAX_FEATURES = 10000
-
-@Injectable({
-  providedIn: 'root',
-})
-export class MapContextService {
-  constructor(
-    private mapUtils: MapUtilsService,
-    private styleService: MapStyleService
-  ) {}
-
-  resetMapFromContext(
-    map: Map,
-    mapContext: MapContextModel,
-    mapConfig?: MapConfig
-  ): Map {
-    if (mapConfig) {
-      mapContext = this.mergeMapConfigWithContext(mapContext, mapConfig)
-    } else {
-      mapContext.layers = this.addDefaultBaselayerContext(mapContext.layers)
-    }
-    if (
-      !mapContext.view?.extent &&
-      (!mapContext.view?.center || !mapContext.view?.zoom)
-    ) {
-      mapContext.view = this.getFallbackView(mapConfig)
-    }
-    map.setView(this.createView(mapContext.view, map))
-    map.getLayers().clear()
-    mapContext.layers.forEach((layer) =>
-      map.addLayer(this.createLayer(layer, mapConfig))
-    )
-    return map
-  }
-
-  createLayer(layerModel: MapContextLayerModel, mapConfig?: MapConfig): Layer {
-    const { type } = layerModel
-    const style = this.styleService.styles.default
-    switch (type) {
-      case MapContextLayerTypeEnum.OGCAPI:
-        if (layerModel.layerType === 'vectorTiles') {
-          return new VectorTileLayer({
-            source: new OGCVectorTile({
-              url: layerModel.url,
-              format: new MVT(),
-              attributions: layerModel.attributions,
-            }),
-          })
-        } else if (layerModel.layerType === 'mapTiles') {
-          return new TileLayer({
-            source: new OGCMapTile({
-              url: layerModel.url,
-              attributions: layerModel.attributions,
-            }),
-          })
-        } else {
-          return new VectorLayer({
-            source: new VectorSource({
-              format: new GeoJSON(),
-              url: layerModel.url,
-              attributions: layerModel.attributions,
-            }),
-            style,
-          })
-        }
-      case MapContextLayerTypeEnum.XYZ:
-        return new TileLayer({
-          source: new XYZ({
-            url: 'url' in layerModel ? layerModel.url : undefined,
-            urls: 'urls' in layerModel ? layerModel.urls : undefined,
-            attributions: layerModel.attributions,
-          }),
-        })
-      case MapContextLayerTypeEnum.WMS:
-        if (mapConfig?.DO_NOT_TILE_WMS) {
-          return new ImageLayer({
-            source: new ImageWMS({
-              url: layerModel.url,
-              params: { LAYERS: layerModel.name },
-              attributions: layerModel.attributions,
-            }),
-          })
-        } else {
-          return new TileLayer({
-            source: new TileWMS({
-              url: layerModel.url,
-              params: { LAYERS: layerModel.name, TILED: true },
-              attributions: layerModel.attributions,
-            }),
-          })
-        }
-
-      case MapContextLayerTypeEnum.WMTS: {
-        // TODO: isolate this in utils service
-        const olLayer = new TileLayer({})
-        const endpoint = new WmtsEndpoint(layerModel.url)
-        endpoint.isReady().then(async (endpoint) => {
-          const layerName = endpoint.getSingleLayerName() ?? layerModel.name
-          const layer = endpoint.getLayerByName(layerName)
-          const matrixSet = layer.matrixSets[0]
-          const tileGrid = await endpoint.getOpenLayersTileGrid(layer.name)
-          const resourceUrl = layer.resourceLinks[0]
-          const dimensions = endpoint.getDefaultDimensions(layer.name)
-          olLayer.setSource(
-            new WMTS({
-              layer: layer.name,
-              style: layer.defaultStyle,
-              matrixSet: matrixSet.identifier,
-              format: resourceUrl.format,
-              url: resourceUrl.url,
-              requestEncoding: resourceUrl.encoding,
-              tileGrid,
-              projection: matrixSet.crs,
-              dimensions,
-              attributions: layerModel.attributions,
-            })
-          )
-        })
-        return olLayer
-      }
-      case MapContextLayerTypeEnum.WFS: {
-        const olLayer = new VectorLayer({
-          style,
-        })
-        new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
-          const featureType =
-            endpoint.getSingleFeatureTypeName() ?? layerModel.name
-          olLayer.setSource(
-            new VectorSource({
-              format: new GeoJSON(),
-              url: function (extent: [number, number, number, number]) {
-                return endpoint.getFeatureUrl(featureType, {
-                  maxFeatures: WFS_MAX_FEATURES,
-                  asJson: true,
-                  outputCrs: 'EPSG:3857',
-                  extent,
-                  extentCrs: 'EPSG:3857',
-                })
-              },
-              strategy: bboxStrategy,
-              attributions: layerModel.attributions,
-            })
-          )
-        })
-        return olLayer
-      }
-      case MapContextLayerTypeEnum.GEOJSON: {
-        if ('url' in layerModel) {
-          return new VectorLayer({
-            source: new VectorSource({
-              format: new GeoJSON(),
-              url: layerModel.url,
-            }),
-            style,
-          })
-        } else {
-          let geojson = layerModel.data
-          if (typeof geojson === 'string') {
-            try {
-              geojson = JSON.parse(geojson)
-            } catch (e) {
-              console.warn('A layer could not be created', layerModel, e)
-              geojson = { type: 'FeatureCollection', features: [] }
-            }
-          }
-          const features = this.mapUtils.readFeatureCollection(
-            geojson as FeatureCollection
-          ) as Feature<Geometry>[]
-          return new VectorLayer({
-            source: new VectorSource({
-              features,
-            }),
-            style,
-          })
-        }
-      }
-      default:
-        throw new Error(`Unrecognized layer type: ${layerModel.type}`)
-    }
-  }
-
-  createView(viewModel: MapContextViewModel, map?: Map): View {
-    const { center: centerInViewProj, zoom, maxZoom, maxExtent } = viewModel
-    const center = centerInViewProj
-      ? fromLonLat(centerInViewProj, 'EPSG:3857')
-      : [0, 0]
-    const view = new View({
-      center,
-      zoom,
-      maxZoom,
-      extent: maxExtent,
-      multiWorld: false,
-      constrainResolution: true,
-    })
-    if (viewModel.extent && map) {
-      view.fit(viewModel.extent, {
-        size: map.getSize(),
-      })
-    }
-    return view
-  }
-
-  addDefaultBaselayerContext(
-    layers: MapContextLayerModel[]
-  ): MapContextLayerModel[] {
-    return layers.includes(DEFAULT_BASELAYER_CONTEXT)
-      ? layers
-      : [DEFAULT_BASELAYER_CONTEXT, ...layers]
-  }
-
-  mergeMapConfigWithContext(
-    mapContext: MapContextModel,
-    mapConfig: MapConfig
-  ): MapContextModel {
-    return {
-      ...mapContext,
-      view: {
-        ...mapContext.view,
-        ...(mapConfig.MAX_ZOOM && {
-          maxZoom: mapConfig.MAX_ZOOM,
-        }),
-        ...(mapConfig.MAX_EXTENT && {
-          maxExtent: mapConfig.MAX_EXTENT,
-        }),
-      },
-      layers: [
-        ...(mapConfig.DO_NOT_USE_DEFAULT_BASEMAP
-          ? []
-          : [DEFAULT_BASELAYER_CONTEXT]),
-        ...mapConfig.MAP_LAYERS.map(this.getContextLayerFromConfig),
-        ...mapContext.layers,
-      ],
-    }
-  }
-
-  getFallbackView(mapConfig: MapConfig): MapContextViewModel {
-    return mapConfig?.MAX_EXTENT
-      ? { extent: mapConfig.MAX_EXTENT }
-      : DEFAULT_VIEW
-  }
-
-  getContextLayerFromConfig(config: LayerConfig): MapContextLayerModel {
-    switch (config.TYPE) {
-      case 'wms':
-        return {
-          type: 'wms',
-          url: config.URL,
-          name: config.NAME,
-        }
-      case 'wfs':
-        return {
-          type: 'wfs',
-          url: config.URL,
-          name: config.NAME,
-        }
-      case 'xyz':
-        return {
-          type: config.TYPE,
-          url: config.URL,
-          name: config.NAME,
-        }
-      case 'geojson':
-        return {
-          type: config.TYPE,
-          ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
-        }
-    }
-  }
-}

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.html

@@ -1,29 +0,0 @@
-<div
-  cdkDropList
-  class="sortable-list flex flex-col gap-3 p-2"
-  (cdkDropListDropped)="drop($event)"
->
-  <ng-container
-    *ngFor="let element of elements; index as index; trackBy: trackByFn"
-  >
-    <div class="sortable-box bg-white flex items-center" cdkDrag>
-      <span
-        cdkDragHandle
-        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
-      >
-        drag_handle
-      </span>
-      <div class="flex-1">
-        <ng-container
-          *ngComponentOutlet="element.component; inputs: element.inputs"
-        ></ng-container>
-      </div>
-      <span
-        (click)="removeElement(index)"
-        class="material-symbols-outlined mx-[10px] cursor-pointer gn-ui-icon-medium flex-none"
-      >
-        close
-      </span>
-    </div>
-  </ng-container>
-</div>

package/src/libs/ui/map/src/lib/components/map/map.component.ts

@@ -1,57 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-  ViewChild,
-} from '@angular/core'
-import Map from 'ol/Map'
-import { fromEvent, merge, Observable, of, timer } from 'rxjs'
-import { delay, map, startWith, switchMap } from 'rxjs/operators'
-
-@Component({
-  selector: 'gn-ui-map',
-  templateUrl: './map.component.html',
-  styleUrls: ['./map.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MapComponent implements OnInit, AfterViewInit {
-  @Input() map: Map
-  @ViewChild('map') container: ElementRef
-  resizeObserver = new ResizeObserver(() => {
-    this.map.updateSize()
-    this.resizeObserver.unobserve(this.container.nativeElement)
-  })
-  mapMuted$: Observable<boolean>
-  cancelMapmuted$: Observable<boolean>
-  displayMessage$: Observable<boolean>
-
-  constructor(private _element: ElementRef) {}
-
-  ngOnInit() {
-    // this will show the message when a 'mapmuted' event is received and hide it a few seconds later
-    // 'movestart' and 'singleclick' will cancel displaying the message in particular for two finger interactions on mobile
-    this.displayMessage$ = merge(
-      fromEvent(this.map, 'mapmuted').pipe(map(() => true)),
-      fromEvent(this.map, 'movestart').pipe(map(() => false)),
-      fromEvent(this.map, 'singleclick').pipe(map(() => false))
-    ).pipe(
-      switchMap((muted) =>
-        muted
-          ? timer(2000).pipe(
-              map(() => false),
-              startWith(true),
-              delay(400)
-            )
-          : of(false)
-      )
-    )
-  }
-
-  ngAfterViewInit() {
-    this.map.setTarget(this.container.nativeElement)
-    this.resizeObserver.observe(this.container.nativeElement)
-  }
-}

package/src/libs/ui/map/src/lib/ui-map.module.ts

@@ -1,19 +0,0 @@
-import { HttpClientModule } from '@angular/common/http'
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { MapComponent } from './components/map/map.component'
-import { FeatureDetailComponent } from './components/feature-detail/feature-detail.component'
-import { TranslateModule } from '@ngx-translate/core'
-import { MatIconModule } from '@angular/material/icon'
-
-@NgModule({
-  declarations: [MapComponent, FeatureDetailComponent],
-  imports: [
-    CommonModule,
-    HttpClientModule,
-    MatIconModule,
-    TranslateModule.forChild(),
-  ],
-  exports: [MapComponent, FeatureDetailComponent],
-})
-export class UiMapModule {}