@vcmap/core 5.0.3 → 5.1.0-rc.2

package/src/util/flight/flightInstance.ts

@@ -0,0 +1,240 @@
+import type { FeatureCollection, Point as GeojsonPoint } from 'geojson';
+import { parseBoolean, parseNumber } from '@vcsuite/parsers';
+import { check, oneOf } from '@vcsuite/check';
+import VcsObject, { VcsObjectOptions } from '../../vcsObject.js';
+import VcsEvent from '../../vcsEvent.js';
+import { parseFlightOptionsFromGeoJson } from './flightHelpers.js';
+import { requestJson } from '../fetch.js';
+import {
+  FlightAnchor,
+  anchorFromGeojsonFeature,
+  anchorToGeojsonFeature,
+  FlightAnchorGeojsonFeature,
+} from './flightAnchor.js';
+import IndexedCollection from '../indexedCollection.js';
+import { destroyCollection } from '../../vcsModuleHelpers.js';
+
+export type FlightInterpolation = 'spline' | 'linear';
+
+export type FlightInstanceMeta = VcsObjectOptions & {
+  multiplier?: number;
+  interpolation?: FlightInterpolation;
+  loop?: boolean;
+};
+
+export type FlightInstanceOptions = FlightInstanceMeta & {
+  anchors?: FlightAnchorGeojsonFeature[];
+  url?: string;
+};
+
+class FlightInstance extends VcsObject {
+  static get className(): string {
+    return 'FlightInstance';
+  }
+
+  anchors: IndexedCollection<FlightAnchor>;
+
+  private _multiplier: number;
+
+  private _loop: boolean;
+
+  private _interpolation: FlightInterpolation;
+
+  /**
+   * Raised when anchors are added, removed, moved or changed
+   */
+  anchorsChanged = new VcsEvent<void>();
+
+  /**
+   * Raised when multiplier, loop or interpolation changes.
+   */
+  propertyChanged = new VcsEvent<'multiplier' | 'loop' | 'interpolation'>();
+
+  private readonly _url: string | undefined;
+
+  private _readyPromise: Promise<void> | null = null;
+
+  private _anchorListeners: Map<string, () => void> = new Map();
+
+  static getDefaultOptions(): FlightInstanceOptions {
+    return {
+      multiplier: 1,
+      loop: false,
+      interpolation: 'spline',
+      anchors: [],
+    };
+  }
+
+  constructor(options: FlightInstanceOptions) {
+    super(options);
+
+    const defaultOptions = FlightInstance.getDefaultOptions();
+    const anchorsArray = (options.anchors ?? defaultOptions.anchors!)
+      .map(anchorFromGeojsonFeature)
+      .filter((a): a is FlightAnchor => !!a);
+
+    this.anchors = IndexedCollection.from(anchorsArray);
+
+    this._multiplier = parseNumber(
+      options.multiplier,
+      defaultOptions.multiplier,
+    );
+
+    this._loop = parseBoolean(options.loop, defaultOptions.loop);
+
+    this._interpolation =
+      options.interpolation || defaultOptions.interpolation!;
+
+    this.anchorsChanged = new VcsEvent();
+
+    this._url = options.url;
+  }
+
+  get initialized(): boolean {
+    return !!this._readyPromise;
+  }
+
+  get multiplier(): number {
+    return this._multiplier;
+  }
+
+  set multiplier(value: number) {
+    check(value, Number);
+
+    if (this._multiplier !== value) {
+      this._multiplier = value;
+      this.propertyChanged.raiseEvent('multiplier');
+    }
+  }
+
+  /**
+   * Whether this flight represents a circular flight path or not
+   */
+  get loop(): boolean {
+    return this._loop;
+  }
+
+  set loop(value: boolean) {
+    check(value, Boolean);
+
+    if (this._loop !== value) {
+      this._loop = value;
+      this.propertyChanged.raiseEvent('loop');
+    }
+  }
+
+  get interpolation(): FlightInterpolation {
+    return this._interpolation;
+  }
+
+  set interpolation(value: FlightInterpolation) {
+    check(value, oneOf('linear', 'spline'));
+
+    if (this._interpolation !== value) {
+      this._interpolation = value;
+      this.propertyChanged.raiseEvent('interpolation');
+    }
+  }
+
+  initialize(): Promise<void> {
+    if (!this._readyPromise) {
+      if (this._url) {
+        this._readyPromise = requestJson<
+          FeatureCollection<
+            GeojsonPoint,
+            FlightAnchorGeojsonFeature['properties']
+          >
+        >(this._url).then((collection) => {
+          const instance = parseFlightOptionsFromGeoJson(collection);
+          (instance.anchors ?? [])
+            .map(anchorFromGeojsonFeature)
+            .filter((a): a is FlightAnchor => !!a)
+            .forEach((anchor) => this.anchors.add(anchor));
+          this._multiplier = instance.multiplier ?? this._multiplier;
+          this._loop = instance.loop ?? this._loop;
+          this._interpolation = instance.interpolation ?? this._interpolation;
+        });
+      } else {
+        this._readyPromise = Promise.resolve();
+      }
+      for (const anchor of this.anchors) {
+        this._anchorListeners.set(
+          anchor.name,
+          anchor.changed.addEventListener(() => {
+            this.anchorsChanged.raiseEvent();
+          }),
+        );
+      }
+
+      this.anchors.added.addEventListener((anchor) => {
+        this._anchorListeners.set(
+          anchor.name,
+          anchor.changed.addEventListener(() => {
+            this.anchorsChanged.raiseEvent();
+          }),
+        );
+        this.anchorsChanged.raiseEvent();
+      });
+
+      this.anchors.removed.addEventListener((anchor) => {
+        this._anchorListeners.get(anchor.name)?.();
+        this._anchorListeners.delete(anchor.name);
+        this.anchorsChanged.raiseEvent();
+      });
+
+      this.anchors.moved.addEventListener(() => {
+        this.anchorsChanged.raiseEvent();
+      });
+    }
+
+    return this._readyPromise;
+  }
+
+  /**
+   * checks if this flightInstance is valid. To be valid, a flight must have at least 2 anchors.
+   * @returns
+   */
+  isValid(): boolean {
+    return this.anchors.size >= 2;
+  }
+
+  /**
+   * returns an options object for this flight. if this flight was configured via an URL, only the url will be configured.
+   * @returns
+   */
+  toJSON(): FlightInstanceOptions {
+    const config = super.toJSON() as FlightInstanceOptions;
+
+    if (this._url) {
+      config.url = this._url;
+      return config;
+    }
+
+    const defaultOptions = FlightInstance.getDefaultOptions();
+    if (this._multiplier !== defaultOptions.multiplier) {
+      config.multiplier = this._multiplier;
+    }
+
+    if (this._loop !== defaultOptions.loop) {
+      config.loop = this._loop;
+    }
+
+    if (this._interpolation !== defaultOptions.interpolation) {
+      config.interpolation = this._interpolation;
+    }
+
+    if (this.anchors.size > 0) {
+      config.anchors = [...this.anchors].map(anchorToGeojsonFeature);
+    }
+    return config;
+  }
+
+  destroy(): void {
+    this.anchorsChanged.destroy();
+    destroyCollection(this.anchors);
+    this._anchorListeners.clear();
+    super.destroy();
+  }
+}
+
+export default FlightInstance;

package/src/util/flight/flightPlayer.ts

@@ -0,0 +1,326 @@
+import {
+  Cartesian3,
+  CatmullRomSpline,
+  HeadingPitchRoll,
+  LinearSpline,
+  QuaternionSpline,
+  Scene,
+  ScreenSpaceCameraController,
+} from '@vcmap-cesium/engine';
+import { getLogger } from '@vcsuite/logger';
+import { check } from '@vcsuite/check';
+import CesiumMap from '../../map/cesiumMap.js';
+import { getSplineAndTimesForInstance } from './flightHelpers.js';
+import FlightInstance from './flightInstance.js';
+import VcsEvent from '../../vcsEvent.js';
+import VcsApp from '../../vcsApp.js';
+
+export type FlightPlayerClock = {
+  startTime: number;
+  endTime: number;
+  currentTime: number;
+  times: number[];
+  currentSystemTime?: number;
+};
+
+export type FlightPlayerState = 'playing' | 'paused' | 'stopped';
+
+export type FlightPlayer = {
+  readonly flightInstanceName: string;
+  readonly state: FlightPlayerState;
+  readonly stateChanged: VcsEvent<FlightPlayerState>;
+  readonly destroyed: VcsEvent<void>;
+  clock: FlightPlayerClock;
+  play(): void;
+  stop(): void;
+  pause(): void;
+  /**
+   * jumps to the given time
+   * @param time time in seconds
+   */
+  goToTime(time: number): void;
+  forward(): void;
+  backward(): void;
+  destroy(): void;
+};
+
+function getDefaultFlightPlayerClock(): FlightPlayerClock {
+  return {
+    startTime: 0,
+    endTime: 0,
+    currentTime: 0,
+    times: [],
+  };
+}
+
+export async function createFlightPlayer(
+  instance: FlightInstance,
+  app: VcsApp,
+): Promise<FlightPlayer> {
+  check(instance, FlightInstance);
+  check(app, VcsApp);
+
+  let cesiumMap: CesiumMap =
+    app.maps.activeMap instanceof CesiumMap
+      ? app.maps.activeMap
+      : (app.maps.getByType(CesiumMap.className)[0] as CesiumMap);
+  if (!cesiumMap) {
+    throw new Error('Cannot start a flight player without a cesium map');
+  }
+  await instance.initialize();
+
+  const clock: FlightPlayerClock = getDefaultFlightPlayerClock();
+
+  let playerState: FlightPlayerState = 'stopped';
+
+  const stateChanged = new VcsEvent<FlightPlayerState>();
+
+  const setState = (state: FlightPlayerState): void => {
+    playerState = state;
+    stateChanged.raiseEvent(playerState);
+  };
+
+  let destinationSpline: CatmullRomSpline | LinearSpline | undefined;
+
+  let quaternionSpline: QuaternionSpline | undefined;
+
+  let postRenderListener: (() => void) | undefined;
+
+  let backedBeforeTimeout: number | undefined;
+
+  let screenSpaceCameraController: ScreenSpaceCameraController | undefined;
+
+  const stop = (): void => {
+    if (playerState !== 'stopped') {
+      if (postRenderListener) {
+        postRenderListener();
+        postRenderListener = undefined;
+      }
+
+      if (screenSpaceCameraController) {
+        screenSpaceCameraController.enableInputs = true;
+      }
+
+      setState('stopped');
+
+      clock.currentTime = 0;
+      clock.currentSystemTime = undefined;
+    }
+  };
+
+  const updateSplines = (): void => {
+    if (!instance.isValid()) {
+      stop();
+      Object.assign(clock, getDefaultFlightPlayerClock());
+    } else {
+      const splines = getSplineAndTimesForInstance(instance);
+
+      ({ destinationSpline, quaternionSpline } = splines);
+      const { times } = splines;
+      clock.endTime = times[times.length - 1];
+      clock.times = times;
+    }
+  };
+  updateSplines();
+
+  const listeners = [
+    instance.anchorsChanged.addEventListener(updateSplines),
+    instance.propertyChanged.addEventListener((property) => {
+      if (property === 'interpolation' || property === 'loop') {
+        updateSplines();
+      }
+    }),
+    app.maps.mapActivated.addEventListener(() => {
+      stop();
+      if (app.maps.activeMap instanceof CesiumMap) {
+        cesiumMap = app.maps.activeMap;
+      }
+    }),
+  ];
+
+  const cesiumPostRender = (scene: Scene): void => {
+    const time = Date.now() / 1000;
+    if (!clock.currentSystemTime) {
+      clock.currentSystemTime = time;
+    }
+    const seconds = time - clock.currentSystemTime;
+    clock.currentSystemTime = time;
+    if (playerState === 'paused') {
+      if (screenSpaceCameraController) {
+        screenSpaceCameraController.enableInputs = true;
+      }
+      return;
+    }
+
+    clock.currentTime += seconds * instance.multiplier;
+    if (clock.currentTime > clock.endTime) {
+      if (instance.loop && clock.endTime > 0) {
+        while (clock.currentTime > clock.endTime) {
+          clock.currentTime -= clock.endTime;
+        }
+      } else {
+        stop();
+      }
+    } else if (clock.currentTime < clock.startTime) {
+      if (instance.loop) {
+        clock.currentTime = clock.endTime + clock.currentTime;
+      } else {
+        clock.currentTime = clock.startTime;
+        return;
+      }
+    }
+
+    const view = {
+      destination: destinationSpline!.evaluate(clock.currentTime) as Cartesian3,
+      orientation: HeadingPitchRoll.fromQuaternion(
+        quaternionSpline!.evaluate(clock.currentTime),
+      ),
+    };
+    scene.camera.setView(view);
+    if (playerState === 'playing') {
+      if (screenSpaceCameraController) {
+        screenSpaceCameraController.enableInputs = false;
+      }
+    }
+  };
+
+  const play = (): void => {
+    if (playerState === 'playing') {
+      return;
+    }
+    if (!(app.maps.activeMap instanceof CesiumMap)) {
+      getLogger('FlightPlayer').warning(
+        'cannot play without a cesium map active',
+      );
+      return;
+    }
+    if (playerState === 'paused') {
+      setState('playing');
+      return;
+    }
+    if (postRenderListener) {
+      postRenderListener();
+      postRenderListener = undefined;
+    }
+
+    const scene = cesiumMap.getScene();
+    if (!scene) {
+      return;
+    }
+    ({ screenSpaceCameraController } = scene);
+    postRenderListener = scene.postRender.addEventListener(cesiumPostRender);
+    clock.currentSystemTime = undefined;
+
+    setState('playing');
+  };
+
+  const goToTime = (time: number): void => {
+    if (time > clock.endTime) {
+      getLogger('FlightPlayer').warning(`time: ${time} out of range`);
+      return;
+    }
+    clock.currentTime = time;
+    clock.currentSystemTime = undefined;
+    if (playerState !== 'playing') {
+      const view = {
+        destination: destinationSpline!.evaluate(
+          clock.currentTime,
+        ) as Cartesian3,
+        orientation: HeadingPitchRoll.fromQuaternion(
+          quaternionSpline!.evaluate(clock.currentTime),
+        ),
+      };
+      cesiumMap.getScene()?.camera.setView(view);
+    }
+  };
+  const destroyed = new VcsEvent<void>();
+  const destroy = (): void => {
+    if (postRenderListener) {
+      postRenderListener();
+      postRenderListener = undefined;
+    }
+
+    if (screenSpaceCameraController) {
+      screenSpaceCameraController.enableInputs = true;
+      screenSpaceCameraController = undefined;
+    }
+
+    if (backedBeforeTimeout != null) {
+      clearTimeout(backedBeforeTimeout);
+    }
+
+    listeners.forEach((cb) => {
+      cb();
+    });
+    stateChanged.destroy();
+    destroyed.raiseEvent();
+    destroyed.destroy();
+  };
+
+  listeners.push(
+    app.flights.removed.addEventListener((flight) => {
+      if (flight === instance) {
+        destroy();
+      }
+    }),
+    app.flights.added.addEventListener((flight) => {
+      if (flight.name === instance.name) {
+        destroy();
+      }
+    }),
+  );
+
+  return {
+    clock,
+    get flightInstanceName(): string {
+      return instance.name;
+    },
+    get state(): FlightPlayerState {
+      return playerState;
+    },
+    get stateChanged(): VcsEvent<FlightPlayerState> {
+      return stateChanged;
+    },
+    get destroyed(): VcsEvent<void> {
+      return destroyed;
+    },
+    play,
+    stop,
+    pause(): void {
+      if (playerState === 'playing') {
+        setState('paused');
+      }
+    },
+    goToTime,
+    /**
+     * forwards the currentTime to the next anchor
+     */
+    forward(): void {
+      const seconds = clock.currentTime;
+      const newTime =
+        clock.times.find((t) => t > seconds) ||
+        clock.times[clock.times.length - 1];
+      goToTime(newTime);
+    },
+    /**
+     * resets the currentTime to the previous anchor
+     */
+    backward(): void {
+      const seconds = clock.currentTime;
+      let index = clock.times.findIndex((t) => t >= seconds) - 1;
+      if (backedBeforeTimeout != null) {
+        index -= 1;
+        clearTimeout(backedBeforeTimeout);
+      }
+      if (index < 0) {
+        index = 0;
+      }
+      const newTime = clock.times[index];
+      goToTime(newTime);
+      backedBeforeTimeout = window.setTimeout(() => {
+        backedBeforeTimeout = undefined;
+      }, 700);
+    },
+    destroy,
+  };
+}