@vcmap/core 6.2.4 → 6.3.0-rc.2

package/src/panorama/panoramaImage.ts

@@ -68,6 +68,10 @@ export type PanoramaImage = Readonly<
    * The image name
    */
   readonly name: string;
+  /**
+   * The image time, if known
+   */
+  readonly time?: Date;
   readonly up: Cartesian3;
   readonly modelMatrix: Matrix4;
   readonly invModelMatrix: Matrix4;
@@ -122,6 +126,10 @@ export type CreatePanoramaImageOptions = {
    * The dataset an image may belong to
    */
   dataset?: PanoramaDatasetLayer;
+  /**
+   * The time of the image, if known
+   */
+  time?: Date;
   /**
    * The root URL for the image. This is used to load the intensity and depth images.
    */
@@ -304,7 +312,7 @@ function parseRgbUrl(imageUrl: string): {
   if (!fileName || !fileName.endsWith('_rgb.tif')) {
     throw new Error('Invalid image url');
   }
-  const name = fileName.slice(0, -8);
+  const name = decodeURIComponent(fileName.slice(0, -8));
 
   return {
     name,
@@ -333,9 +341,10 @@ export async function createPanoramaImage(
     hasIntensity,
     hasDepth,
   } = await loadRGBImages(rgbImage);
-  const { name, absoluteRootUrl, intensityImage, depthImage, dataset } =
+  const { name, absoluteRootUrl, intensityImage, depthImage, dataset, time } =
     options;
 
+  const imageTime = time ? new Date(time) : undefined;
   const nameOrId = name ?? uuid();
   const modelMatrix = Transforms.headingPitchRollToFixedFrame(
     position,
@@ -358,11 +367,14 @@ export async function createPanoramaImage(
   );
 
   let getIntensityImages: (() => Promise<GeoTIFFImage[]>) | undefined;
-  if (intensityImage || (hasIntensity && absoluteRootUrl)) {
+  if (intensityImage || (hasIntensity && absoluteRootUrl && name)) {
     getIntensityImages = async (): Promise<GeoTIFFImage[]> => {
       const usedIntensityImage =
         intensityImage ??
-        (await fromUrl(new URL(`${name}_intensity.tif`, absoluteRootUrl).href));
+        (await fromUrl(
+          new URL(`${encodeURIComponent(name!)}_intensity.tif`, absoluteRootUrl)
+            .href,
+        ));
 
       const {
         images: intensity,
@@ -389,10 +401,10 @@ export async function createPanoramaImage(
     | undefined;
 
   let usedDepthImage = depthImage;
-  if (!usedDepthImage && hasDepth && absoluteRootUrl) {
+  if (!usedDepthImage && hasDepth && absoluteRootUrl && name) {
     try {
       usedDepthImage = await fromUrl(
-        new URL(`${name}_depth.tif`, absoluteRootUrl).href,
+        new URL(`${encodeURIComponent(name)}_depth.tif`, absoluteRootUrl).href,
       );
     } catch (e) {
       getLogger('PanoramaImage').warning(
@@ -449,7 +461,7 @@ export async function createPanoramaImage(
           imageCoordinate,
         )
       : await tileProvider.getDepthAtImageCoordinate(imageCoordinate);
-    if (depthValue === undefined) {
+    if (depthValue === undefined || depthValue === 0) {
       return undefined;
     }
     const cartesian = imageSphericalToCartesian(imageCoordinate, result);
@@ -463,6 +475,9 @@ export async function createPanoramaImage(
     get name(): string {
       return nameOrId;
     },
+    get time(): Date | undefined {
+      return imageTime;
+    },
     get position(): Cartesian3 {
       return position;
     },
@@ -534,12 +549,14 @@ export async function createPanoramaImage(
  * Creates a panorama image from a URL. The URL must point to a RGB image with the name ending in "_rgb.tif".
  * @param rgbImageUrl - the url to the RGB image
  * @param [dataset] - the dataset to which the image belongs, if applicable
+ * @param [time] - the time of the image, if known
  */
 export async function createPanoramaImageFromURL(
   rgbImageUrl: string,
   dataset?: PanoramaDatasetLayer,
+  time?: Date,
 ): Promise<PanoramaImage> {
   const { name, absoluteRootUrl } = parseRgbUrl(rgbImageUrl);
   const image = await fromUrl(absoluteRootUrl);
-  return createPanoramaImage(image, { dataset, absoluteRootUrl, name });
+  return createPanoramaImage(image, { dataset, absoluteRootUrl, name, time });
 }

package/src/panorama/panoramaImageView.ts

@@ -1,5 +1,15 @@
-import type { Camera, Primitive, Scene } from '@vcmap-cesium/engine';
-import { Cartesian2, Matrix4, Cartesian3 } from '@vcmap-cesium/engine';
+import type {
+  Camera,
+  PerspectiveFrustum,
+  Primitive,
+  Scene,
+} from '@vcmap-cesium/engine';
+import {
+  Cartesian2,
+  Matrix4,
+  Cartesian3,
+  Math as CesiumMath,
+} from '@vcmap-cesium/engine';
 import { getWidth } from 'ol/extent.js';
 import type { Size } from 'ol/size.js';
 import { getLogger } from '@vcsuite/logger';
@@ -26,6 +36,10 @@ export type PanoramaImageView = {
    * Suspends the loading of tiles. This is used as a debug feature.
    */
   suspendTileLoading: boolean;
+  /**
+   * The default field of view to set when a new image is loaded in radians.
+   */
+  defaultFov: number;
   /**
    * The primitive collection that contains the panorama tiles.
    */
@@ -369,8 +383,12 @@ function setupEmptyImageOverlay(container: HTMLElement): () => void {
  * to the panorama camera and updates the panorama tiles accordingly. Typically, you will not
  * have to create this directly, but rather use the PanoramaMap's imageView property.
  * @param map
+ * @param [initialFov=CesiumMath.PI_OVER_FOUR] The default field of view to set when a new image is loaded in radians
  */
-export function createPanoramaImageView(map: PanoramaMap): PanoramaImageView {
+export function createPanoramaImageView(
+  map: PanoramaMap,
+  initialFov = CesiumMath.PI_OVER_FOUR,
+): PanoramaImageView {
   const { scene } = map.getCesiumWidget();
   const primitiveCollection = scene.primitives.add(
     new PanoramaTilePrimitiveCollection({
@@ -382,6 +400,7 @@ export function createPanoramaImageView(map: PanoramaMap): PanoramaImageView {
   const defaultPosition = Cartesian3.fromDegrees(12, 53, 0);
 
   let currentView: ImageWrapper | undefined;
+  let defaultFov = initialFov;
   let removeOverlay: (() => void) | undefined;
   scene.camera.setView({
     destination: defaultPosition,
@@ -400,6 +419,7 @@ export function createPanoramaImageView(map: PanoramaMap): PanoramaImageView {
     if (image) {
       currentView = createImageWrapper(image, primitiveCollection, scene, map);
       currentView.suspendTileLoading = suspendTileLoading;
+      (scene.camera.frustum as PerspectiveFrustum).fov = defaultFov;
     } else {
       currentView = undefined;
       if (scene.canvas.parentElement) {
@@ -433,6 +453,12 @@ export function createPanoramaImageView(map: PanoramaMap): PanoramaImageView {
     get tilePrimitiveCollection(): PanoramaTilePrimitiveCollection {
       return primitiveCollection;
     },
+    get defaultFov(): number {
+      return defaultFov;
+    },
+    set defaultFov(value: number) {
+      defaultFov = value;
+    },
     render,
     destroy(): void {
       this.render = (): void => {};

package/src/panorama/panoramaTileMaterial.ts

@@ -52,6 +52,8 @@ export type PanoramaTileMaterialUniforms = {
   u_imageReady: boolean;
   u_intensityReady: boolean;
   u_cursorColor: Color;
+  u_contrast: number;
+  u_brightness: number;
 };
 
 function createDebugCanvas(tileSize: Size, text: string): HTMLCanvasElement {
@@ -100,6 +102,8 @@ export function getDefaultPanoramaTileMaterialUniforms(): PanoramaTileMaterialUn
     u_depthReady: false,
     u_overlayNaNColor: Color.RED,
     u_cursorColor: Color.fromCssColorString(defaultCursorColor),
+    u_contrast: 1,
+    u_brightness: 0,
   };
 }
 
@@ -205,6 +209,22 @@ export default class PanoramaTileMaterial extends Material {
     this.uniforms.u_opacity = value;
   }
 
+  get contrast(): number {
+    return this.uniforms.u_contrast;
+  }
+
+  set contrast(value: number) {
+    this.uniforms.u_contrast = value;
+  }
+
+  get brightness(): number {
+    return this.uniforms.u_brightness;
+  }
+
+  set brightness(value: number) {
+    this.uniforms.u_brightness = value;
+  }
+
   /**
    * The position of the cursor in the panorama tile. Internal API to render the depth cursor.
    * (-1, -1, -1) means no data is available.

package/src/panorama/panoramaTileMaterialFS.glsl

@@ -22,6 +22,8 @@
  * @uniform {bool} u_intensityReady - Flag indicating if intensity data is ready
  * @uniform {bool} u_depthReady - Flag indicating if depth data is ready
  * @uniform {vec4} u_overlayNaNColor - Color used for missing/NaN overlay values
+ * @uniform {float} u_brightness - Brightness adjustment
+ * @uniform {float} u_contrast - Contrast adjustment
  */
 
 #define OVERLAY_INTENSITY 1.0
@@ -92,7 +94,20 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
     vec2 clamped_uv = clamp(materialInput.st, u_minUV, u_maxUV);
     vec2 scaled_uv = (clamped_uv - u_minUV) / (u_maxUV - u_minUV);
 
-    vec4 t_color = texture(u_rgb, scaled_uv);
+    vec4 t_color = czm_srgbToLinear(texture(u_rgb, scaled_uv));
+
+    if (u_brightness != 0.0)
+    {
+        t_color.rgb += u_brightness;
+    }
+
+    if (u_contrast != 1.0)
+    {
+        t_color.rgb = ((t_color.rgb - 0.5) * u_contrast) + 0.5;
+    }
+
+    clamp(t_color, 0.0, 1.0);
+
     if (u_intensityReady && u_overlay == OVERLAY_INTENSITY)
     {
         float inensity_value = get_texel_value(u_intensity, scaled_uv);

package/src/panorama/panoramaTilePrimitiveCollection.ts

@@ -28,6 +28,10 @@ export default class PanoramaTilePrimitiveCollection extends PrimitiveCollection
 
   private _cursorColor: Color = Color.fromCssColorString(defaultCursorColor);
 
+  private _contrast = 1.0;
+
+  private _brightness = 0.0;
+
   overlayChanged = new VcsEvent<PanoramaOverlayMode>();
 
   constructor(options?: ConstructorParameters<typeof PrimitiveCollection>[0]) {
@@ -104,6 +108,34 @@ export default class PanoramaTilePrimitiveCollection extends PrimitiveCollection
     }
   }
 
+  get contrast(): number {
+    return this._contrast;
+  }
+
+  set contrast(value: number) {
+    if (this._contrast !== value) {
+      this._contrast = value;
+      this._primitives.forEach((primitive) => {
+        (primitive.appearance.material as PanoramaTileMaterial).contrast =
+          value;
+      });
+    }
+  }
+
+  get brightness(): number {
+    return this._brightness;
+  }
+
+  set brightness(value: number) {
+    if (this._brightness !== value) {
+      this._brightness = value;
+      this._primitives.forEach((primitive) => {
+        (primitive.appearance.material as PanoramaTileMaterial).brightness =
+          value;
+      });
+    }
+  }
+
   get cursorPosition(): Cartesian3 {
     return this._cursorPosition;
   }
@@ -152,6 +184,8 @@ export default class PanoramaTilePrimitiveCollection extends PrimitiveCollection
     material.opacity = this.opacity;
     material.cursorPosition = this.cursorPosition;
     material.cursorColor = this.cursorColor;
+    material.brightness = this.brightness;
+    material.contrast = this.contrast;
 
     return super.add(primitive, index) as Primitive;
   }

package/src/style/declarativeStyleItem.ts

@@ -55,8 +55,6 @@ export type DeclarativeStyleItemOptions = StyleItemOptions & {
   declarativeStyle?: DeclarativeStyleOptions;
 };
 
-const scratchColor = new Color();
-
 const defaultText = new OLText({
   font: '30px sans-serif',
   fill: new Fill({ color: whiteColor }),
@@ -205,7 +203,7 @@ class DeclarativeStyleItem extends StyleItem {
   private _stylePolygon(feature: Feature): Style {
     const style = new Style({});
     const color = this.cesiumStyle.color
-      ? this.cesiumStyle.color.evaluate<Color>(feature, scratchColor)
+      ? this.cesiumStyle.color.evaluate<Color>(feature, new Color())
       : Color.WHITE;
     if (color) {
       style.setFill(
@@ -223,7 +221,7 @@ class DeclarativeStyleItem extends StyleItem {
     const style = new Style({});
     const isExtruded = !!feature.get('olcs_extrudedHeight');
     const color = this.cesiumStyle.color
-      ? this.cesiumStyle.color.evaluate<Color>(feature, scratchColor)
+      ? this.cesiumStyle.color.evaluate<Color>(feature, new Color())
       : Color.WHITE;
     if (color) {
       if (isExtruded) {
@@ -269,7 +267,7 @@ class DeclarativeStyleItem extends StyleItem {
         if (this.cesiumStyle.labelColor) {
           const textColor = this.cesiumStyle.labelColor.evaluateColor(
             feature,
-            scratchColor,
+            new Color(),
           );
           if (textColor) {
             textStyle.getFill()!.setColor(cesiumColorToColor(textColor));
@@ -279,7 +277,7 @@ class DeclarativeStyleItem extends StyleItem {
           const outlineColor =
             this.cesiumStyle.labelOutlineColor.evaluate<Color>(
               feature,
-              scratchColor,
+              new Color(),
             );
           if (outlineColor) {
             const outlineWidth = this.cesiumStyle.labelOutlineWidth
@@ -314,7 +312,7 @@ class DeclarativeStyleItem extends StyleItem {
       }
     } else {
       const color =
-        this.cesiumStyle.color?.evaluate<Color>(feature, scratchColor) ??
+        this.cesiumStyle.color?.evaluate<Color>(feature, new Color()) ??
         Color.WHITE;
 
       let radius = 4;
@@ -330,7 +328,7 @@ class DeclarativeStyleItem extends StyleItem {
         if (this.cesiumStyle.pointOutlineColor) {
           pointOutlineColor = this.cesiumStyle.pointOutlineColor.evaluateColor(
             feature,
-            scratchColor,
+            new Color(),
           );
         }
         radius += width / 2;
@@ -372,7 +370,7 @@ class DeclarativeStyleItem extends StyleItem {
     if (this.cesiumStyle.strokeColor) {
       const strokeColor = this.cesiumStyle.strokeColor.evaluateColor(
         feature,
-        scratchColor,
+        new Color(),
       );
       if (strokeColor) {
         const strokeWidth = this.cesiumStyle.strokeWidth

package/src/util/clipping/clippingPolygonObject.ts

@@ -82,8 +82,8 @@ class ClippingPolygonObject extends VcsObject {
   terrainChanged = new VcsEvent<boolean>();
 
   constructor(options: ClippingPolygonObjectOptions) {
-    super(options);
     const defaultOptions = ClippingPolygonObject.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
 
     this.activeOnStartup = parseBoolean(
       options.activeOnStartup,
@@ -190,12 +190,13 @@ class ClippingPolygonObject extends VcsObject {
     }
   }
 
-  toJSON(): ClippingPolygonObjectOptions {
+  toJSON(
+    defaultOptions = ClippingPolygonObject.getDefaultOptions(),
+  ): ClippingPolygonObjectOptions {
     const config: ClippingPolygonObjectOptions = {
-      ...super.toJSON(),
+      ...super.toJSON(defaultOptions),
       coordinates: structuredClone(this._coordinates),
     };
-    const defaultOptions = ClippingPolygonObject.getDefaultOptions();
 
     if (!deepEqual(this._layerNames, defaultOptions.layerNames)) {
       config.layerNames = getLayerNamesClone(this._layerNames);

package/src/util/displayQuality/displayQuality.ts

@@ -1,10 +1,10 @@
 import { check, oneOf } from '@vcsuite/check';
 import type VcsApp from '../../vcsApp.js';
 import FeatureStoreLayer from '../../layer/featureStoreLayer.js';
-import CesiumMap from '../../map/cesiumMap.js';
 import { isMobile } from '../isMobile.js';
 import CesiumTilesetLayer from '../../layer/cesiumTilesetLayer.js';
 import VcsEvent from '../../vcsEvent.js';
+import BaseCesiumMap from '../../map/baseCesiumMap.js';
 
 export enum DisplayQualityLevel {
   LOW = 'low',
@@ -104,7 +104,7 @@ class DisplayQuality {
     this._listeners = [
       this._app.maps.mapActivated.addEventListener(() => {
         if (
-          this._app.maps.activeMap instanceof CesiumMap &&
+          this._app.maps.activeMap instanceof BaseCesiumMap &&
           !this.currentQualityLevel
         ) {
           if (isMobile()) {
@@ -115,7 +115,7 @@ class DisplayQuality {
         }
       }),
       this._app.layers.stateChanged.addEventListener((layer) => {
-        if (layer.active && this._app.maps.activeMap instanceof CesiumMap) {
+        if (layer.active && this._app.maps.activeMap instanceof BaseCesiumMap) {
           this._setLayerQuality(layer.name);
         }
       }),
@@ -222,7 +222,7 @@ class DisplayQuality {
       ),
     );
 
-    if (!(this._app.maps.activeMap instanceof CesiumMap)) {
+    if (!(this._app.maps.activeMap instanceof BaseCesiumMap)) {
       this._currentQualityLevel = undefined;
       this._viewModelSettings.startingQualityLevel = level;
       this._viewModelSettings.startingMobileQualityLevel = level;

package/src/util/editor/createFeatureSession.ts

@@ -126,7 +126,7 @@ function startCreateFeatureSession<T extends GeometryType>(
     interactionChain,
     removed: interactionRemoved,
     destroy: destroyInteractionChain,
-  } = setupInteractionChain(app.maps.eventHandler);
+  } = setupInteractionChain(app.maps);
   const { layer: scratchLayer, destroy: destroyScratchLayer } =
     setupScratchLayer(app.layers, app.maps.eventHandler.featureInteraction);
 
@@ -340,6 +340,7 @@ function startCreateFeatureSession<T extends GeometryType>(
   if (app.maps.target) {
     app.maps.target.style.cursor = cursorMap.edit;
   }
+  app.maps.pausePanoramaImageSelection = true;
 
   const stop = (): void => {
     isStopped = true; // setting stopped true immediately, to prevent the recreation of the interaction chain on finished
@@ -348,6 +349,8 @@ function startCreateFeatureSession<T extends GeometryType>(
     if (app.maps.target) {
       app.maps.target.style.cursor = cursorMap.auto;
     }
+    app.maps.pausePanoramaImageSelection = false;
+
     mapChangedListener();
     obliqueImageChangedListener();
     if (currentInteraction) {

package/src/util/editor/editFeaturesSession.ts

@@ -39,6 +39,7 @@ import type VcsApp from '../../vcsApp.js';
 import type VectorLayer from '../../layer/vectorLayer.js';
 import type VcsMap from '../../map/vcsMap.js';
 import RightClickInteraction from './interactions/rightClickInteraction.js';
+import BaseCesiumMap from '../../map/baseCesiumMap.js';
 
 /**
  * Saves the original allowPicking settings and sets them to false if CTRL is not pressed.
@@ -189,7 +190,7 @@ function startEditFeaturesSession(
     interactionChain,
     removed: interactionRemoved,
     destroy: destroyInteractionChain,
-  } = setupInteractionChain(app.maps.eventHandler, interactionId);
+  } = setupInteractionChain(app.maps, interactionId);
 
   const { exclusiveInteractionId } = app.maps.eventHandler;
   const removeRightClickStart = app.maps.eventHandler.addExclusiveInteraction(
@@ -328,7 +329,9 @@ function startEditFeaturesSession(
 
   const createTransformations = (): void => {
     destroyTransformation();
-
+    const currentEnsurePositionActive =
+      app.maps.eventHandler.ensurePositionInteraction.active;
+    app.maps.eventHandler.ensurePositionInteraction.setActive(false);
     transformationHandler = createTransformationHandler(
       app.maps.activeMap!,
       layer,
@@ -374,6 +377,9 @@ function startEditFeaturesSession(
     interactionChain.addInteraction(interaction);
 
     destroyTransformation = (): void => {
+      app.maps.eventHandler.ensurePositionInteraction.setActive(
+        currentEnsurePositionActive,
+      );
       interactionChain.removeInteraction(interaction);
       interaction.destroy();
       transformationHandler?.destroy();
@@ -410,7 +416,10 @@ function startEditFeaturesSession(
     } else {
       obliqueImageChangedListener = (): void => {};
     }
-    if (mode === TransformationMode.EXTRUDE && !(map instanceof CesiumMap)) {
+    if (
+      mode === TransformationMode.EXTRUDE &&
+      !(map instanceof BaseCesiumMap)
+    ) {
       setMode(TransformationMode.TRANSLATE);
     } else {
       createTransformations();
@@ -432,7 +441,7 @@ function startEditFeaturesSession(
   };
 
   const originalCreateSyncMap = new Map<string | number, boolean>();
-
+  app.maps.pausePanoramaImageSelection = true;
   const stop = (): void => {
     destroyTransformation();
     destroyInteractionChain();
@@ -440,6 +449,7 @@ function startEditFeaturesSession(
     mapChangedListener();
     modifierChangedListener();
     unByKey(featureListeners);
+    app.maps.pausePanoramaImageSelection = false;
     currentFeatures.forEach((feature) => {
       clearAllowPicking(feature, allowPickingMap);
       clearCreateSync(feature, originalCreateSyncMap);

package/src/util/editor/editGeometrySession.ts

@@ -456,7 +456,7 @@ function startEditGeometrySession(
     interactionChain,
     removed: interactionRemoved,
     destroy: destroyInteractionChain,
-  } = setupInteractionChain(app.maps.eventHandler, interactionId);
+  } = setupInteractionChain(app.maps, interactionId);
 
   const { layer: scratchLayer, destroy: destroyScratchLayer } =
     setupScratchLayer(app.layers, app.maps.eventHandler.featureInteraction);
@@ -617,6 +617,7 @@ function startEditGeometrySession(
   const mapActivatedListener =
     app.maps.mapActivated.addEventListener(setupActiveMap);
   setupActiveMap();
+  app.maps.pausePanoramaImageSelection = true;
 
   const stop = (): void => {
     destroyScratchLayer();
@@ -624,6 +625,7 @@ function startEditGeometrySession(
       unByKey(featureListener);
     }
     mapActivatedListener();
+    app.maps.pausePanoramaImageSelection = false;
     mapInteractionController.reset();
     mouseOverInteraction.reset();
     destroyCurrentInteractionSet();

package/src/util/editor/editorSessionHelpers.ts

@@ -10,10 +10,10 @@ import type LayerCollection from '../layerCollection.js';
 import { maxZIndex } from '../layerCollection.js';
 import { markVolatile } from '../../vcsModule.js';
 import { PrimitiveOptionsType } from '../../layer/vectorProperties.js';
-import type EventHandler from '../../interaction/eventHandler.js';
 import type VcsApp from '../../vcsApp.js';
 import type { InteractionEvent } from '../../interaction/abstractInteraction.js';
 import type FeatureAtPixelInteraction from '../../interaction/featureAtPixelInteraction.js';
+import type MapCollection from '../mapCollection.js';
 
 export const alreadySnapped = Symbol('alreadySnapped');
 
@@ -50,6 +50,7 @@ export function setupScratchLayer(
 ): { layer: VectorLayer; destroy: () => void } {
   // IDEA pass in stopped and cleanup ourselves?
   const layer = new VectorLayer({
+    ignoreMapLayerTypes: true,
     projection: mercatorProjection.toJSON(),
     vectorProperties: {
       altitudeMode: 'clampToGround',
@@ -110,18 +111,19 @@ export function setupScratchLayer(
  * Sets up the default interaction chain for the editors. This will set the provided event handlers
  * feature interaction to be active on CLICKMOVE & DRAGSTART. Destroying the setup will reset the interaction
  * to its previous active state.
- * @param  eventHandler
+ * @param  maps
  * @param  [interactionId]
  * @private
  */
 export function setupInteractionChain(
-  eventHandler: EventHandler,
+  maps: MapCollection,
   interactionId?: string,
 ): {
   interactionChain: InteractionChain;
   removed: VcsEvent<void>;
   destroy(this: void): void;
 } {
+  const { eventHandler } = maps;
   const interactionChain = new InteractionChain();
   const removed = new VcsEvent<void>();
   const listener = eventHandler.addExclusiveInteraction(

package/src/util/editor/interactions/creationSnapping.ts

@@ -19,6 +19,7 @@ import type VectorLayer from '../../../layer/vectorLayer.js';
 import { validityPlaceholder } from './createPolygonInteraction.js';
 import type { SnappingInteractionEvent } from '../editorSessionHelpers.js';
 import { alreadySnapped } from '../editorSessionHelpers.js';
+import PanoramaMap from '../../../map/panoramaMap.js';
 
 function getBearings(coordinates: Coordinate[]): number[] {
   // we dont want to take into account the last bearing, since that would be our own
@@ -143,9 +144,14 @@ export default class CreationSnapping extends AbstractInteraction {
         this._coordinatesDirty = true;
       });
     }
+
+    const ctrlKey = event.key === ModificationKeyType.CTRL;
+    const useSnapping =
+      event.map.className === PanoramaMap.className ? ctrlKey : !ctrlKey;
+
     if (
       !event[alreadySnapped] &&
-      event.key !== ModificationKeyType.CTRL &&
+      useSnapping &&
       this._coordinates.length >= 3
     ) {
       const results = new Array<SnapResult | undefined>(2);

package/src/util/editor/interactions/ensureHandlerSelectionInteraction.ts

@@ -4,7 +4,7 @@ import type { EventAfterEventHandler } from '../../../interaction/abstractIntera
 import AbstractInteraction from '../../../interaction/abstractInteraction.js';
 import { EventType } from '../../../interaction/interactionType.js';
 import { handlerSymbol } from '../editorSymbols.js';
-import CesiumMap from '../../../map/cesiumMap.js';
+import BaseCesiumMap from '../../../map/baseCesiumMap.js';
 
 /**
  * This interaction ensure a potential handler is dragged in 3D when it is obscured by a transparent feature.
@@ -28,7 +28,7 @@ class EnsureHandlerSelectionInteraction extends AbstractInteraction {
       event.feature &&
       this._featureSelection.length > 0 &&
       !(event.feature as Feature)[handlerSymbol] &&
-      event.map instanceof CesiumMap
+      event.map instanceof BaseCesiumMap
     ) {
       const scene = event.map.getScene() as Scene;
       const drillPicks = scene.drillPick(

package/src/util/editor/interactions/layerSnapping.ts

@@ -16,6 +16,7 @@ import {
   setSnappingFeatures,
   getGeometrySnapResult,
 } from '../snappingHelpers.js';
+import PanoramaMap from '../../../map/panoramaMap.js';
 
 export default class LayerSnapping extends AbstractInteraction {
   private _removeFeatures: (() => void) | undefined;
@@ -59,7 +60,12 @@ export default class LayerSnapping extends AbstractInteraction {
 
   pipe(event: SnappingInteractionEvent): Promise<SnappingInteractionEvent> {
     this._removeFeatures?.();
-    if (event.key !== ModificationKeyType.CTRL) {
+
+    const ctrlKey = event.key === ModificationKeyType.CTRL;
+    const useSnapping =
+      event.map.className === PanoramaMap.className ? ctrlKey : !ctrlKey;
+
+    if (useSnapping) {
       const coordinate = event.positionOrPixel!;
       const bufferDistance = event.map.getCurrentResolution(coordinate) * 12;
       const maxDistanceSquared = bufferDistance ** 2;