@vcmap/core 6.0.7 → 6.1.0-rc.2

package/src/util/mapCollection.ts

@@ -1,5 +1,6 @@
 import { check, maybe, oneOf } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
+import { v4 as uuidv4 } from 'uuid';
 import VcsEvent from '../vcsEvent.js';
 import Collection from './collection.js';
 import EventHandler from '../interaction/eventHandler.js';
@@ -129,6 +130,13 @@ class MapCollection extends Collection<VcsMap> {
   // eslint-disable-next-line class-methods-use-this
   private _exclusiveMapControlsRemoved: () => void = () => {};
 
+  private _exclusiveMapControlsChanged = new VcsEvent<{
+    options: DisableMapControlOptions;
+    id?: string | symbol;
+  }>();
+
+  private _exclusiveMapControlsId: string | symbol | undefined;
+
   constructor() {
     super();
 
@@ -202,6 +210,23 @@ class MapCollection extends Collection<VcsMap> {
     return this._postRender;
   }
 
+  /**
+   * Event raised when exclusive map controls are changed. If the Id is empty the default map controls have been reinstated
+   */
+  get exclusiveMapControlsChanged(): VcsEvent<{
+    options: DisableMapControlOptions;
+    id?: string | symbol;
+  }> {
+    return this._exclusiveMapControlsChanged;
+  }
+
+  /**
+   * The id of the current exclusive map controls owner.
+   */
+  get exclusiveMapControlsId(): string | symbol | undefined {
+    return this._exclusiveMapControlsId;
+  }
+
   /**
    * Adds a map to the collection. This will set the collections target
    * and the collections  on the map.
@@ -399,30 +424,56 @@ class MapCollection extends Collection<VcsMap> {
    * Manages the disabling of map navigation controls. By calling this function the map navigation controls passed in the options are disabled. The remove function passed by the previous caller is executed.
    * @param options - which of the movement controls should be disabled.
    * @param removed - the callback for when the interaction is forcefully removed.
+   * @param id - an optional id to identify the owner of the exclusive map controls.
    * @returns function to reset map controls.
    */
   requestExclusiveMapControls(
     options: DisableMapControlOptions,
     removed: () => void,
+    id?: string | symbol,
   ): () => void {
     this._exclusiveMapControlsRemoved();
     if (this._activeMap) {
       this._activeMap.disableMovement(options);
     }
 
-    this._exclusiveMapControlsRemoved = removed;
+    if (options.pointerEvents || options.keyEvents || options.apiCalls) {
+      this._exclusiveMapControlsId = id || uuidv4();
+      this._exclusiveMapControlsRemoved = removed;
+    } else {
+      this._exclusiveMapControlsRemoved = (): void => {};
+      this._exclusiveMapControlsId = undefined;
+    }
+
+    this._exclusiveMapControlsChanged.raiseEvent({
+      options,
+      id: this._exclusiveMapControlsId,
+    });
 
     return () => {
       // only reset if this function is called by the current exclusiveMapControls owner.
       if (removed === this._exclusiveMapControlsRemoved) {
-        this._exclusiveMapControlsRemoved = (): void => {};
         if (this._activeMap) {
           this._activeMap.disableMovement(false);
         }
+
+        this._exclusiveMapControlsRemoved = (): void => {};
+        this._exclusiveMapControlsId = undefined;
+
+        this._exclusiveMapControlsChanged.raiseEvent({
+          options: { apiCalls: false, keyEvents: false, pointerEvents: false },
+        });
       }
     };
   }
 
+  resetExclusiveMapControls(): void {
+    this.requestExclusiveMapControls(
+      { keyEvents: false, apiCalls: false, pointerEvents: false },
+      () => {},
+    );
+  }
+
   destroy(): void {
     super.destroy();
     [...this._layerCollection].forEach((l) => {

package/src/util/renderScreenshot.ts

@@ -0,0 +1,193 @@
+import { Size } from 'ol/size.js';
+import { getLogger } from '@vcsuite/logger';
+import CesiumMap from '../map/cesiumMap.js';
+import OpenlayersMap from '../map/openlayersMap.js';
+import ObliqueMap from '../map/obliqueMap.js';
+import VcsApp from '../vcsApp.js';
+/**
+ * Prepares the cesium map for the screenshot
+ * @param map - The cesium map
+ * @param scale - The factor to scale the map according to the required resolution
+ * @returns The function to reset the applied scale.
+ */
+function prepareCesiumMap(map: CesiumMap, scale: number): () => void {
+  const viewer = map.getCesiumWidget()!;
+  const { resolutionScale } = viewer;
+  viewer.resolutionScale = scale;
+
+  return function resetCesiumMap() {
+    viewer.resolutionScale = resolutionScale;
+  };
+}
+
+/**
+ * Returns a function to reset the OLMap to the original state.
+ * @param map - The map instance.
+ * @param renderSize - The size to set for rendering.
+ * @returns The function to reset the map.
+ */
+function prepareOlMap(
+  map: OpenlayersMap | ObliqueMap,
+  renderSize: Size,
+): () => void {
+  const { olMap } = map;
+  if (olMap) {
+    const olSize = olMap.getSize();
+    const extent = olMap.getView().calculateExtent(olSize);
+    const originalMinZoom = olMap.getView().getMinZoom();
+    const originalMaxZoom = olMap.getView().getMaxZoom();
+    olMap.setSize(renderSize);
+    olMap.getView().setMinZoom(0);
+    olMap.getView().setMaxZoom(28);
+    olMap.getView().fit(extent, { size: renderSize });
+    olMap.set('vcs_scale', renderSize, true);
+
+    return function resetOlMap() {
+      olMap.setSize(olSize);
+      olMap.getView().setMinZoom(originalMinZoom);
+      olMap.getView().setMaxZoom(originalMaxZoom);
+      olMap.getView().fit(extent, { size: olSize });
+      olMap.unset('vcs_scale', true);
+      olMap.renderSync();
+    };
+  }
+  return () => {};
+}
+
+/**
+ * Copies Cesium content on the given canvas.
+ * @param map - The Cesium map instance.
+ * @returns A promise that resolves to the canvas element.
+ */
+async function getImageFromCesium(map: CesiumMap): Promise<HTMLCanvasElement> {
+  const { scene } = map.getCesiumWidget()!;
+
+  return new Promise((resolve) => {
+    const removePreListener = scene.preUpdate.addEventListener(() => {
+      const { canvas } = scene;
+      const removePostListener = scene.postRender.addEventListener(() => {
+        resolve(canvas);
+        removePostListener();
+      });
+      removePreListener();
+    });
+  });
+}
+
+/**
+ * Copies Openlayers content on the given canvas
+ * @param map - The map instance.
+ * @param canvasSize - The size of the canvas.
+ * @returns A promise that resolves to the canvas element.
+ */
+async function getImageFromOpenlayers(
+  map: OpenlayersMap | ObliqueMap,
+  canvasSize: Size,
+): Promise<HTMLCanvasElement> {
+  const canvas = document.createElement('canvas');
+  canvas.width = canvasSize[0];
+  canvas.height = canvasSize[1];
+  const { olMap } = map;
+  const canvasContext = canvas.getContext('2d')!;
+  // fill canvas with white so transparent pixels are not printed as black when exporting as jpeg.
+  canvasContext.fillStyle = 'white';
+  canvasContext.fillRect(0, 0, canvas.width, canvas.height);
+  await new Promise<void>((resolve) => {
+    if (olMap) {
+      olMap.once('rendercomplete', () => {
+        const olLayerCanvasList = Array.from(
+          olMap
+            .getViewport()
+            .querySelectorAll<HTMLCanvasElement>('.ol-layer canvas'),
+        );
+        olLayerCanvasList.forEach((layerCanvas) => {
+          if (layerCanvas.width > 0) {
+            const opacity =
+              (layerCanvas.parentNode instanceof HTMLElement
+                ? layerCanvas.parentNode.style.opacity
+                : '') || layerCanvas.style.opacity;
+            canvasContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+            const { transform } = layerCanvas.style;
+            const matrix = transform
+              .match(/^matrix\(([^(]*)\)$/)?.[1]
+              .split(',')
+              .map(Number) as
+              | [number, number, number, number, number, number]
+              | undefined;
+            if (matrix) {
+              canvasContext.setTransform(...matrix);
+            }
+            canvasContext.drawImage(layerCanvas, 0, 0);
+          }
+        });
+        resolve();
+      });
+    }
+  });
+  return canvas;
+}
+
+/**
+ * Renders a screenshot of the active map in the VcsApp.
+ *
+ * @param app - The VcsApp instance containing the active map.
+ * @param width - The desired width of the screenshot.
+ * @returns A promise that resolves to the canvas element containing the screenshot.
+ */
+export default async function renderScreenshot(
+  app: VcsApp,
+  width: number,
+): Promise<HTMLCanvasElement> {
+  let screenshotCanvas: HTMLCanvasElement;
+
+  function calcRenderSize(mapSize: Size, screenshotWidth: number): Size {
+    const aspectRatio = mapSize[0] / mapSize[1];
+    return [screenshotWidth, screenshotWidth / aspectRatio];
+  }
+
+  function checkChromeMaxPixel(renderSize: Size, threshold: number): void {
+    const totalPixelCount = renderSize[0] * renderSize[1];
+    if (totalPixelCount > threshold && 'chrome' in window) {
+      getLogger('@vcmap/print').warning(
+        `The created image might have black bars at some of the edges. This is due to a behavior of chromium based browsers
+        that occurs when the total pixel count of the cesium map exceeds a threshold of thirty-three million pixels.
+        In order to avoid this either reduce the resolution or switch to Mozilla Firefox browser.`,
+      );
+    }
+  }
+  /**
+   * Function for resetting map after screenshot processes finished.
+   */
+  let resetMap: () => void;
+  const map = app.maps.activeMap;
+
+  if (map instanceof CesiumMap) {
+    const { canvas } = map.getCesiumWidget()!.scene;
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+
+    // check if render size is above chromium threshold
+    checkChromeMaxPixel(
+      calcRenderSize([canvasWidth, canvasHeight], width),
+      33000000,
+    );
+    const scale = width / canvasWidth;
+    resetMap = prepareCesiumMap(map, scale);
+    screenshotCanvas = await getImageFromCesium(map);
+  } else if (map instanceof OpenlayersMap || map instanceof ObliqueMap) {
+    const biggestCanvas = Array.from(
+      map
+        .olMap!.getViewport()
+        .querySelectorAll<HTMLCanvasElement>('.ol-layer canvas'),
+    ).reduce((acc, val) => (acc.width > val.width ? val : acc));
+    const canvasWidth = biggestCanvas.width;
+    const canvasHeight = biggestCanvas.height;
+    const renderSize = calcRenderSize([canvasWidth, canvasHeight], width);
+    resetMap = prepareOlMap(map, renderSize);
+    screenshotCanvas = await getImageFromOpenlayers(map, renderSize);
+  } else {
+    throw new Error('wrong Map');
+  }
+  resetMap();
+  return screenshotCanvas;
+}

package/src/util/rotation.ts

@@ -0,0 +1,215 @@
+import {
+  Camera,
+  Cartesian2,
+  Cartesian3,
+  Cartographic,
+  Math as CesiumMath,
+  JulianDate,
+  HeadingPitchRollValues,
+} from '@vcmap-cesium/engine';
+import Viewpoint from './viewpoint.js';
+import VcsApp from '../vcsApp.js';
+import { CesiumMap } from '../../index.js';
+import Projection from './projection.js';
+
+/**
+ * Unique symbol for rotation.
+ * @type {symbol}
+ */
+export const rotationMapControlSymbol: unique symbol = Symbol(
+  'rotationMapControlSymbol',
+);
+
+export type SetViewOptions = {
+  destination: Cartesian3;
+  orientation: HeadingPitchRollValues;
+};
+
+/**
+ * Rotates the camera to a specified viewpoint.
+ * @param {SetViewOptions} options - The options for setting the view.
+ * @param {number} [distance] - The distance to move backward.
+ * @param {CesiumMap} activeMap - The active map instance.
+ */
+function setUpdatedPosition(
+  options: SetViewOptions,
+  distance: number | undefined,
+  activeMap: CesiumMap,
+): void {
+  let cameraPosition: Cartesian3;
+
+  const clonedCamera = new Camera(activeMap.getCesiumWidget()!.scene);
+
+  clonedCamera.setView(options);
+  clonedCamera.moveBackward(distance);
+
+  cameraPosition = clonedCamera.position;
+
+  const cam = activeMap.getCesiumWidget()!.scene.camera;
+  const cameraOptions = {
+    heading: options.orientation.heading,
+    pitch: options.orientation.pitch,
+    roll: options.orientation.roll,
+  };
+  cameraPosition = cameraPosition || null;
+  cam.cancelFlight();
+
+  cam.setView({
+    destination: cameraPosition,
+    orientation: cameraOptions,
+  });
+}
+
+/**
+ * Rotates the center of the map.
+ * @param {number} heading - The current heading of the view.
+ * @param {CesiumMap} activeMap - The current Cesium Map.
+ * @param {number} timePerRotation - The current rotation speed.
+ * @param {JulianDate} [timeLastTick] - The time of the last tick.
+ * @returns {number | undefined} The new heading.
+ */
+export function calculateRotation(
+  heading: number,
+  activeMap: CesiumMap,
+  timePerRotation: number,
+  timeLastTick?: JulianDate,
+): number {
+  let localHeading = heading;
+
+  const { clock } = activeMap.getCesiumWidget()!;
+  let timeDifference = timeLastTick
+    ? clock.currentTime.secondsOfDay - timeLastTick.secondsOfDay
+    : 1 / 60;
+  if (timeDifference <= 0 || timeDifference > 1) {
+    timeDifference = 1 / 60;
+  }
+
+  const timeFactor = timeDifference / (1 / 60);
+  const headingDiff = CesiumMath.TWO_PI / ((timePerRotation * 60) / timeFactor);
+  localHeading += headingDiff;
+  localHeading = CesiumMath.zeroToTwoPi(localHeading);
+  return localHeading;
+}
+
+/**
+ * Starts the rotation of the map.
+ * @param app - The VCS application instance.
+ * @param [viewpoint] - The optional viewpoint to start the rotation from, if no viewpoint is provided the current Viewpoint is used.
+ * @param [timePerRotation=60] - The duration of a single full rotation in seconds.
+ * @returns A function to stop the rotation.
+ */
+export async function startRotation(
+  app: VcsApp,
+  viewpoint?: Viewpoint,
+  timePerRotation = 60,
+): Promise<() => void> {
+  const { activeMap } = app.maps;
+
+  let localViewpoint: Viewpoint | undefined;
+
+  let rotationListener: (() => void) | undefined;
+  let resetMapControls: (() => void) | undefined;
+
+  const stopRotation: () => void = () => {
+    if (rotationListener) {
+      rotationListener();
+      rotationListener = undefined;
+    }
+    if (resetMapControls) {
+      resetMapControls();
+    }
+  };
+
+  if (activeMap instanceof CesiumMap) {
+    const scene = activeMap.getScene();
+    if (scene) {
+      if (!(viewpoint instanceof Viewpoint)) {
+        localViewpoint = activeMap.getViewpointSync() || undefined;
+      } else {
+        localViewpoint = viewpoint.clone();
+      }
+      if (localViewpoint) {
+        if (!localViewpoint.animate) {
+          localViewpoint.animate = true;
+
+          localViewpoint.duration = 0.00000001;
+        }
+        await activeMap.gotoViewpoint(localViewpoint);
+
+        const newCenter = scene.pickPosition(
+          new Cartesian2(scene.canvas.width / 2, scene.canvas.height / 2),
+        );
+        if (newCenter) {
+          const cartographic = Cartographic.fromCartesian(newCenter);
+          localViewpoint.groundPosition = [
+            CesiumMath.toDegrees(cartographic.longitude),
+            CesiumMath.toDegrees(cartographic.latitude),
+            cartographic.height,
+          ];
+          localViewpoint.distance = Cartesian3.distance(
+            newCenter,
+            scene.camera.position,
+          );
+        } else {
+          throw new Error('new ground position could not be determined');
+        }
+
+        const { distance } = localViewpoint;
+        const heading = CesiumMath.toRadians(localViewpoint.heading);
+        const pitch = CesiumMath.toRadians(localViewpoint.pitch);
+        const roll = CesiumMath.toRadians(localViewpoint.roll);
+
+        const groundPositionCoords = localViewpoint.groundPosition;
+        if (!groundPositionCoords[2]) {
+          const positions = await activeMap.getHeightFromTerrain([
+            Projection.wgs84ToMercator(groundPositionCoords),
+          ]);
+          groundPositionCoords[2] = positions[0][2];
+        }
+        const groundPosition = Cartesian3.fromDegrees(
+          groundPositionCoords[0],
+          groundPositionCoords[1],
+          groundPositionCoords[2],
+        );
+
+        const options = {
+          destination: groundPosition,
+          orientation: {
+            heading,
+            pitch,
+            roll,
+          },
+        };
+
+        let timeLastTick: JulianDate | undefined;
+
+        resetMapControls = app.maps.requestExclusiveMapControls(
+          { apiCalls: true, keyEvents: true, pointerEvents: true },
+          stopRotation,
+          rotationMapControlSymbol,
+        );
+
+        rotationListener = activeMap
+          .getCesiumWidget()!
+          .scene.postRender.addEventListener(() => {
+            options.orientation.heading = calculateRotation(
+              options.orientation.heading,
+              activeMap,
+              timePerRotation,
+              timeLastTick,
+            );
+
+            if (options) {
+              setUpdatedPosition(options, distance, activeMap);
+            }
+
+            timeLastTick = activeMap.getCesiumWidget()!.clock.currentTime;
+          });
+      }
+    }
+  }
+
+  return (): void => {
+    stopRotation();
+  };
+}