@vcmap/core 6.1.11 → 6.2.0-rc.1

package/src/featureProvider/wmsFeatureProvider.ts

@@ -7,29 +7,29 @@ import GML32 from 'ol/format/GML32.js';
 import Point from 'ol/geom/Point.js';
 import { getTransform, type Projection as OLProjection } from 'ol/proj.js';
 import type { Size } from 'ol/size.js';
-import type { Feature } from 'ol/index.js';
+import { Feature } from 'ol';
 import type { Coordinate } from 'ol/coordinate.js';
 import type { TileWMS } from 'ol/source.js';
 import type FeatureFormat from 'ol/format/Feature.js';
 import WMSGetFeatureInfo from 'ol/format/WMSGetFeatureInfo.js';
+import type { Options as WMSGetFeatureInfoOptions } from 'ol/format/WMSGetFeatureInfo.js';
 import { parseInteger } from '@vcsuite/parsers';
-import AbstractFeatureProvider, {
-  AbstractFeatureProviderOptions,
-} from './abstractFeatureProvider.js';
-import Projection, {
-  mercatorProjection,
-  ProjectionOptions,
-} from '../util/projection.js';
+import { getLogger } from '@vcsuite/logger';
+import type { AbstractFeatureProviderOptions } from './abstractFeatureProvider.js';
+import AbstractFeatureProvider from './abstractFeatureProvider.js';
+import type { ProjectionOptions } from '../util/projection.js';
+import Projection, { mercatorProjection } from '../util/projection.js';
 import type { WMSSourceOptions } from '../layer/wmsHelpers.js';
 import { getWMSSource } from '../layer/wmsHelpers.js';
-import Extent, { ExtentOptions } from '../util/extent.js';
+import type { ExtentOptions } from '../util/extent.js';
+import Extent from '../util/extent.js';
 import { getInitForUrl, requestUrl } from '../util/fetch.js';
 import { featureProviderClassRegistry } from '../classRegistry.js';
 import { TilingScheme } from '../layer/rasterLayer.js';
 
 export type FormatOptions = GeoJSONOptions &
   GMLOptions &
-  Record<string, unknown> & { gmlFormat?: keyof typeof gmlFormats };
+  Record<string, unknown>;
 
 export type WMSFeatureProviderOptions = AbstractFeatureProviderOptions & {
   /**
@@ -38,9 +38,17 @@ export type WMSFeatureProviderOptions = AbstractFeatureProviderOptions & {
    */
   responseType?: string;
   /**
-   * format options for the GeojsonLayer, WfsLayer or GML format. To overwrite the gmlFormat option in WfsLayer format, use 'GML', 'GML2' or 'GML3' as string
+   * format options forwarded to OpenLayers
    */
   formatOptions?: FormatOptions;
+  /**
+   * optional format to use to parse the feature info response, overriding the responseType to format mapping. Use 'GeoJSON', 'GML2', 'GML3', 'GML32', 'WMSGetFeatureInfo' or 'WFS' as string.
+   */
+  featureInfoFormat?: keyof typeof featureInfoFormat;
+  /**
+   * optional GMLFormat for the WFS format to override the default GML2 format. Use 'GML', 'GML2', 'GML3' or 'GML32' as string
+   */
+  wfsGMLFormat?: keyof typeof gmlFormats;
   /**
    * the projection of the data, if not encoded in the response
    */
@@ -72,6 +80,15 @@ export type WMSFeatureProviderOptions = AbstractFeatureProviderOptions & {
 
 const gmlFormats = { GML: GML3, GML2, GML3, GML32 };
 
+const featureInfoFormat = {
+  GeoJSON,
+  GML2,
+  GML3,
+  GML32,
+  WMSGetFeatureInfo,
+  WFS,
+};
+
 const geojsonFormats = [
   'application/geojson',
   'application/json',
@@ -82,11 +99,36 @@ const geojsonFormats = [
 export function getFormat(
   responseType: string,
   options: FormatOptions = {},
+  format?: keyof typeof featureInfoFormat,
+  gmlFormatKey?: keyof typeof gmlFormats,
 ): null | FeatureFormat {
+  if (format) {
+    if (!(format in featureInfoFormat)) {
+      getLogger('WMSFeatureProvider').error(
+        `Unknown featureInfoFormat ${format}`,
+      );
+      return null;
+    }
+    const formatOptions = {
+      ...options,
+      ...(gmlFormatKey && { gmlFormat: new gmlFormats[gmlFormatKey]() }),
+    };
+    return new featureInfoFormat[format](formatOptions);
+  }
+
+  if (responseType === 'text/html') {
+    return new WMSGetFeatureInfo(options as WMSGetFeatureInfoOptions);
+  }
   if (responseType === 'text/xml') {
-    const gmlFormat: GML3 | GML2 = options.gmlFormat
-      ? new gmlFormats[options.gmlFormat]()
-      : new GML2();
+    if (gmlFormatKey && !(gmlFormatKey in gmlFormats)) {
+      getLogger('WMSFeatureProvider').error(
+        `Unknown GML format ${gmlFormatKey}`,
+      );
+      return null;
+    }
+    const gmlFormat: GML2 | GML3 | GML32 = new gmlFormats[
+      gmlFormatKey ?? 'GML2'
+    ]();
     return new WFS({ ...options, gmlFormat });
   }
   if (geojsonFormats.includes(responseType)) {
@@ -94,7 +136,7 @@ export function getFormat(
   }
   if (responseType === 'application/vnd.ogc.gml') {
     // works with mapServer and "msGMLOutput", replaces GML2 format, and still works with gml2 documents
-    return new WMSGetFeatureInfo({});
+    return new WMSGetFeatureInfo(options as WMSGetFeatureInfoOptions);
   }
   if (
     responseType === 'application/vnd.ogc.gml/3.1.1' ||
@@ -148,8 +190,19 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
    */
   featureInfoResponseType: string;
 
+  /**
+   * The feature info format, if different from the responseType.
+   */
+  featureInfoFormat: keyof typeof featureInfoFormat | undefined;
+
   private _formatOptions: FormatOptions | undefined;
 
+  /**
+   * The GMLFormat used for the WfsLayer, defaults to GML2.
+   * Use 'GML', 'GML2', 'GML3' or 'GML32' as string
+   */
+  wfsGMLFormat: keyof typeof gmlFormats | undefined;
+
   /**
    * The feature response format determined by the response type. Use formatOptions to configure the underlying ol.format.Feature
    */
@@ -185,11 +238,14 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
     this._wmsSource = getWMSSource(this._wmsSourceOptions);
     this.featureInfoResponseType =
       options.responseType || (defaultOptions.responseType as string);
-
+    this.featureInfoFormat = options.featureInfoFormat;
     this._formatOptions = options.formatOptions || defaultOptions.formatOptions;
+    this.wfsGMLFormat = options.wfsGMLFormat;
     this.featureFormat = getFormat(
       this.featureInfoResponseType,
       options.formatOptions,
+      this.featureInfoFormat,
+      this.wfsGMLFormat,
     );
     this.projection = options.projection
       ? new Projection(options.projection)
@@ -208,17 +264,23 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
   }
 
   featureResponseCallback(
+    // any because this is the type provided by readFeatures
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-redundant-type-constituents
     data: Document | Element | ArrayBuffer | any | string,
     coordinate: Coordinate,
   ): Feature[] {
-    let features: Feature[];
+    let features = [];
 
     try {
-      features = this.featureFormat!.readFeatures(data, {
-        dataProjection: this.projection ? this.projection.proj : undefined,
-        featureProjection: mercatorProjection.proj,
-      });
-    } catch (ex) {
+      if (this.featureInfoResponseType === 'text/html') {
+        features = [new Feature()];
+      } else {
+        features = this.featureFormat!.readFeatures(data, {
+          dataProjection: this.projection ? this.projection.proj : undefined,
+          featureProjection: mercatorProjection.proj,
+        });
+      }
+    } catch (_err) {
       this.getLogger().warning(
         'Features could not be read, please verify the featureInfoResponseType with the capabilities from the server',
       );
@@ -259,7 +321,11 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
       { INFO_FORMAT: this.featureInfoResponseType },
     );
 
-    if (url) {
+    if (this.featureInfoResponseType === 'text/html') {
+      return this.featureResponseCallback(null, coordinate).map((f) =>
+        this.getProviderFeature(f),
+      );
+    } else if (url) {
       const init = getInitForUrl(url, headers);
       let data: string;
       try {
@@ -283,6 +349,14 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
       config.responseType = this.featureInfoResponseType;
     }
 
+    if (this.featureInfoFormat) {
+      config.featureInfoFormat = this.featureInfoFormat;
+    }
+
+    if (this.wfsGMLFormat) {
+      config.wfsGMLFormat = this.wfsGMLFormat;
+    }
+
     if (this._formatOptions !== defaultOptions.formatOptions) {
       config.formatOptions = { ...this._formatOptions };
     }

package/src/global.d.ts

@@ -1,13 +1,18 @@
 import type VcsApp from './vcsApp.js';
-import { mouseOverSymbol } from './util/editor/editorSymbols.js';
+import type { mouseOverSymbol } from './util/editor/editorSymbols.js';
 // eslint-disable-next-line import/no-named-default
 import type { default as VcsModule, VcsModuleConfig } from './vcsModule.js';
 
 declare global {
+  // eslint-disable-next-line no-var
+  var useVcsCustomShading: boolean | undefined;
+
   interface Window {
     vcs: {
       apps: Map<string, VcsApp>;
       createModuleFromConfig: (config: VcsModuleConfig) => VcsModule;
+      getFirstApp: () => VcsApp | undefined;
+      workerBase?: string;
     };
     opera?: string;
   }

package/src/interaction/abstractInteraction.ts

@@ -8,14 +8,14 @@ import type {
 } from '@vcmap-cesium/engine';
 import type { Coordinate } from 'ol/coordinate.js';
 import type { Feature } from 'ol';
+import type { PointerEventType } from './interactionType.js';
 import {
   EventType,
   ModificationKeyType,
-  PointerEventType,
   PointerKeyType,
 } from './interactionType.js';
 import type VcsMap from '../map/vcsMap.js';
-import VcsEvent from '../vcsEvent.js';
+import type VcsEvent from '../vcsEvent.js';
 
 export type MapEvent = {
   pointerEvent: PointerEventType;
@@ -39,7 +39,7 @@ export type ObliqueParameters = {
   /**
    * the image pixel clicked
    */
-  pixel: import('ol/coordinate.js').Coordinate;
+  pixel: Coordinate;
   /**
    * true if the terrain could not be taken into account
    */
@@ -97,7 +97,7 @@ class AbstractInteraction {
   /**
    * The current active bitmask for {@link EventType}
    */
-  active: number;
+  active: EventType;
 
   private _defaultModificationKey: ModificationKeyType;
 
@@ -143,7 +143,7 @@ class AbstractInteraction {
   /**
    * Called when the modifier keys have changed.
    */
-  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-unused-vars
   modifierChanged(_modifier: ModificationKeyType): void {}
 
   /**

package/src/interaction/coordinateAtPixel.ts

@@ -17,6 +17,41 @@ import {
 import { transformFromImage } from '../oblique/helpers.js';
 import type CesiumMap from '../map/cesiumMap.js';
 import type ObliqueMap from '../map/obliqueMap.js';
+import type PanoramaMap from '../map/panoramaMap.js';
+import { cartesianToMercator } from '../util/math.js';
+import { windowPositionToImageSpherical } from '../panorama/fieldOfView.js';
+
+const scratchPanoramaCartesian = new Cartesian3();
+async function getCoordinateFromPanoramap(
+  map: PanoramaMap,
+  event: InteractionEvent,
+): Promise<InteractionEvent> {
+  const image = map.currentPanoramaImage;
+  let position = [0, 0, 0];
+  if (image) {
+    const { camera } = map.getCesiumWidget();
+    const imageCoordinate = windowPositionToImageSpherical(
+      event.windowPosition,
+      camera,
+      image.invModelMatrix,
+    );
+
+    event.positionOrPixel = imageCoordinate;
+
+    if (imageCoordinate) {
+      const cartesian = await image.getPositionAtImageCoordinate(
+        imageCoordinate,
+        scratchPanoramaCartesian,
+      );
+      if (cartesian) {
+        position = cartesianToMercator(cartesian);
+      }
+    }
+  }
+
+  event.position = position;
+  return event;
+}
 
 /**
  * @group Interaction
@@ -37,6 +72,8 @@ class CoordinateAtPixel extends AbstractInteraction {
       return this._cesiumHandler(event);
     } else if (event.map.className === 'ObliqueMap') {
       return CoordinateAtPixel.obliqueHandler(event);
+    } else if (event.map.className === 'PanoramaMap') {
+      return getCoordinateFromPanoramap(event.map as PanoramaMap, event);
     }
     return event;
   }

package/src/interaction/eventHandler.ts

@@ -2,10 +2,8 @@ import { v4 as uuidv4 } from 'uuid';
 import { Cartesian2 } from '@vcmap-cesium/engine';
 import { check, maybe } from '@vcsuite/check';
 import { getLogger as getLoggerByName, type Logger } from '@vcsuite/logger';
-import AbstractInteraction, {
-  InteractionEvent,
-  MapEvent,
-} from './abstractInteraction.js';
+import type { InteractionEvent, MapEvent } from './abstractInteraction.js';
+import AbstractInteraction from './abstractInteraction.js';
 import InteractionChain from './interactionChain.js';
 import CoordinateAtPixel from './coordinateAtPixel.js';
 import FeatureAtPixelInteraction from './featureAtPixelInteraction.js';
@@ -65,7 +63,7 @@ class EventHandler {
 
   exclusiveRemoved: VcsEvent<void>;
 
-  exclusiveAdded: VcsEvent<void>;
+  exclusiveAdded: VcsEvent<AbstractInteraction>;
 
   private _boundKeyListener: (e: KeyboardEvent) => void;
 
@@ -170,7 +168,7 @@ class EventHandler {
     removed: () => void,
     index?: number,
     id?: string,
-  ): () => void {
+  ): () => number {
     check(interaction, AbstractInteraction);
     check(removed, Function);
     check(index, maybe(Number));
@@ -190,7 +188,7 @@ class EventHandler {
         interactions: [interaction],
       };
     }
-    this.exclusiveAdded.raiseEvent();
+    this.exclusiveAdded.raiseEvent(interaction);
     return this._exclusiveUnListen.bind(
       this,
       interaction,
@@ -417,7 +415,7 @@ class EventHandler {
       this._running = true;
       this._interactionChain
         .pipe(event)
-        .catch((error) => {
+        .catch((error: unknown) => {
           getLogger().error((error as Error).message);
         })
         .finally(() => {

package/src/interaction/featureAtPixelInteraction.ts

@@ -1,15 +1,17 @@
+import type {
+  Scene,
+  Cartesian2,
+  Ray,
+  Billboard,
+  Label,
+} from '@vcmap-cesium/engine';
 import {
   Cartesian3,
   Cesium3DTileFeature,
   Cesium3DTilePointFeature,
   Entity,
-  Scene,
-  Cartesian2,
-  Ray,
-  type Label,
-  Billboard,
 } from '@vcmap-cesium/engine';
-import OLMap from 'ol/Map.js';
+import type OLMap from 'ol/Map.js';
 import type { Feature } from 'ol/index.js';
 import AbstractInteraction, {
   type EventFeature,
@@ -27,7 +29,8 @@ import type ObliqueMap from '../map/obliqueMap.js';
 import type CesiumMap from '../map/cesiumMap.js';
 import { vectorClusterGroupName } from '../vectorCluster/vectorClusterSymbols.js';
 import { cartesianToMercator } from '../util/math.js';
-import { PrimitiveType } from '../util/featureconverter/convert.js';
+import type { PrimitiveType } from '../util/featureconverter/convert.js';
+import type PanoramaMap from '../map/panoramaMap.js';
 
 /**
  * This is the return from cesium scene.pick and scene.drillPick, which returns "any". We cast to this type.
@@ -116,7 +119,7 @@ export function getFeatureFromPickObject(
   return feature;
 }
 
-function getFeatureFromScene(
+export function getFeatureFromScene(
   scene: Scene,
   windowPosition: Cartesian2,
   hitTolerance: number,
@@ -185,7 +188,7 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
 
   private _draggingFeature: EventFeature | undefined;
 
-  private _excludeFromPickPosition: Set<Feature> = new Set();
+  private _excludeFromPickPosition = new Set<Feature>();
 
   constructor() {
     super(
@@ -212,9 +215,13 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
       await this._openlayersHandler(event);
     } else if (event.map.className === 'ObliqueMap') {
       await this._obliqueHandler(event);
-    } else if (event.map.className === 'CesiumMap') {
+    } else if (
+      event.map.className === 'CesiumMap' ||
+      event.map.className === 'PanoramaMap'
+    ) {
       await this._cesiumHandler(event);
     }
+
     if (event.type & EventType.DRAGSTART && event.feature) {
       this._draggingFeature = event.feature;
     }
@@ -276,8 +283,8 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
   }
 
   private _cesiumHandler(event: InteractionEvent): Promise<InteractionEvent> {
-    const cesiumMap = event.map as CesiumMap;
-    const scene = cesiumMap.getScene();
+    const cesiumMap = event.map as CesiumMap | PanoramaMap;
+    const { scene } = cesiumMap.getCesiumWidget()!;
 
     if (!scene) {
       return Promise.resolve(event);
@@ -298,7 +305,11 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
       return Promise.resolve(event);
     }
 
-    if (pickObject && scene.pickPositionSupported) {
+    if (
+      pickObject &&
+      scene.pickPositionSupported &&
+      event.map.className === 'CesiumMap'
+    ) {
       if (this.pickTranslucent) {
         scene.pickTranslucentDepth = true;
         event.exactPosition = true;

package/src/interaction/featureProviderInteraction.ts

@@ -49,13 +49,12 @@ class FeatureProviderInteraction extends AbstractInteraction {
       // TODO make sure the layers are rendered, check min/max RenderingResolution
       const features = (
         await Promise.all(
-          layersWithProvider.map(
-            (l) =>
-              l.featureProvider?.getFeaturesByCoordinate?.(
-                event.position as Coordinate,
-                resolution,
-                l.headers,
-              ),
+          layersWithProvider.map((l) =>
+            l.featureProvider?.getFeaturesByCoordinate?.(
+              event.position as Coordinate,
+              resolution,
+              l.headers,
+            ),
           ),
         )
       )

package/src/interaction/interactionType.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/prefer-literal-enum-member */
 /**
  * Enumeration of modification key types
  */

package/src/interaction/panoramaFeatureHighlight.ts

@@ -0,0 +1,109 @@
+import type { Feature } from 'ol/index.js';
+import AbstractInteraction, {
+  type InteractionEvent,
+} from './abstractInteraction.js';
+import { EventType } from './interactionType.js';
+import { panoramaFeature } from '../layer/vectorSymbols.js';
+import PanoramaMap from '../map/panoramaMap.js';
+import { getFeatureFromScene } from './featureAtPixelInteraction.js';
+import { getDefaultHighlightStyle } from '../util/editor/selectFeaturesSession.js';
+import type { PanoramaDatasetFeatureProperties } from '../layer/panoramaDatasetLayer.js';
+
+/**
+ * Throttle time in milliseconds to limit how frequently mouse move events are processed.
+ * This prevents excessive highlighting/unhighlighting operations during rapid mouse movements
+ * and improves overall performance by reducing CPU load.
+ *
+ * @remarks
+ * - 50ms equals approximately 20 FPS update rate
+ * - Lower values increase responsiveness but use more CPU
+ * - Higher values reduce CPU usage but may feel less responsive
+ */
+const THROTTLE_TIME_MS = 50;
+
+/**
+ * Interaction class that handles highlighting of panorama tiles on mouse move.
+ *
+ * This interaction listens for mouse move events over a PanoramaMap and highlights
+ * panorama features under the cursor. When the mouse moves to a different feature,
+ * the previous feature is unhighlighted and the new one is highlighted. When the
+ * mouse leaves all features, the last highlighted feature is unhighlighted.
+ *
+ * @example
+ * ```typescript
+ * const highlightInteraction = new PanoramaFeatureHighlight();
+ * map.addInteraction(highlightInteraction);
+ * ```
+ *
+ * @remarks
+ * - Uses throttling (50ms) to improve performance during rapid mouse movements
+ * - Only works with PanoramaMap instances
+ * - Prevents race conditions with internal processing flag
+ * - Automatically cleans up highlights when destroyed
+ */
+export default class PanoramaFeatureHighlight extends AbstractInteraction {
+  private _lastPickTime = 0;
+  private _lastPickedPanoramaFeature:
+    | PanoramaDatasetFeatureProperties
+    | undefined = undefined;
+
+  constructor() {
+    super(EventType.MOVE);
+  }
+
+  private _unhighlightLastFeature(): void {
+    if (this._lastPickedPanoramaFeature) {
+      this._lastPickedPanoramaFeature.dataset.featureVisibility.unHighlight([
+        this._lastPickedPanoramaFeature.name,
+      ]);
+    }
+  }
+
+  override pipe(event: InteractionEvent): Promise<InteractionEvent> {
+    const now = Date.now();
+
+    if (now - this._lastPickTime < THROTTLE_TIME_MS) {
+      return Promise.resolve(event);
+    }
+    this._lastPickTime = now;
+
+    if (event.map instanceof PanoramaMap) {
+      const picked = getFeatureFromScene(
+        event.map.getCesiumWidget().scene,
+        event.windowPosition,
+        10,
+      );
+
+      if (picked.feature && (picked.feature as Feature)[panoramaFeature]) {
+        const { dataset, name } = (picked.feature as Feature)[panoramaFeature]!;
+
+        if (name !== this._lastPickedPanoramaFeature?.name) {
+          this._unhighlightLastFeature();
+
+          dataset.featureVisibility.highlight({
+            [name]: getDefaultHighlightStyle(),
+          });
+
+          this._lastPickedPanoramaFeature = (picked.feature as Feature)[
+            panoramaFeature
+          ]!;
+        }
+      } else if (this._lastPickedPanoramaFeature?.name !== undefined) {
+        this._unhighlightLastFeature();
+        this._lastPickedPanoramaFeature = undefined;
+      }
+    } else {
+      this._unhighlightLastFeature();
+    }
+    return Promise.resolve(event);
+  }
+
+  destroy(): void {
+    if (this._lastPickedPanoramaFeature) {
+      this._lastPickedPanoramaFeature.dataset.featureVisibility.unHighlight([
+        this._lastPickedPanoramaFeature.name,
+      ]);
+    }
+    super.destroy();
+  }
+}

package/src/interaction/panoramaImageSelection.ts

@@ -0,0 +1,37 @@
+import type { Feature } from 'ol/index.js';
+import type { InteractionEvent } from './abstractInteraction.js';
+import AbstractInteraction from './abstractInteraction.js';
+import { EventType } from './interactionType.js';
+import PanoramaMap from '../map/panoramaMap.js';
+import type MapCollection from '../util/mapCollection.js';
+import { panoramaFeature } from '../layer/vectorSymbols.js';
+
+export default class PanoramaImageSelection extends AbstractInteraction {
+  constructor(private _mapCollection: MapCollection) {
+    super(EventType.CLICK);
+  }
+
+  override async pipe(event: InteractionEvent): Promise<InteractionEvent> {
+    if (event.feature && (event.feature as Feature)[panoramaFeature]) {
+      const { dataset, name } = (event.feature as Feature)[panoramaFeature]!;
+      const panoramaImage = await dataset.createPanoramaImage(name);
+      event.stopPropagation = true;
+
+      if (event.map instanceof PanoramaMap) {
+        event.map.setCurrentImage(panoramaImage);
+      } else {
+        const firstPanoramaMap = this._mapCollection.getByType(
+          PanoramaMap.className,
+        )[0];
+        if (firstPanoramaMap) {
+          await this._mapCollection.activatePanoramaMap(
+            firstPanoramaMap as PanoramaMap,
+            panoramaImage,
+          );
+        }
+      }
+    }
+
+    return event;
+  }
+}