@vcmap/core 5.0.0-rc.5 → 5.0.0-rc.6

package/index.d.ts

@@ -182,8 +182,6 @@ export class VcsEvent<T extends any> {
 
 export const styleCollection: Collection<StyleItem>;
 
-export const obliqueCollectionCollection: Collection<ObliqueCollection>;
-
 /**
  */
 export interface ObliqueParameters {
@@ -5259,7 +5257,6 @@ export interface ObliqueOptions extends VcsMapOptions {
     changeOnMoveEnd?: boolean;
     switchThreshold?: number;
     switchOnEdge?: boolean;
-    defaultCollectionName?: string | undefined;
 }
 
 /**
@@ -5271,7 +5268,6 @@ export function getViewDirectionFromViewPoint(viewpoint: ViewPoint): ObliqueView
  * Oblique Map Class (2D map with oblique imagery)
  */
 export class Oblique extends BaseOLMap {
-    constructor(options: ObliqueOptions);
     static getDefaultOptions(): ObliqueOptions;
 
     /**
@@ -5501,6 +5497,7 @@ export interface ObliqueCollectionOptions extends VcsObjectOptions {
     minZoom?: number | undefined;
     scaleFactor?: number | undefined;
     hideLevels?: number | undefined;
+    activeOnStartup?: boolean | undefined;
 }
 
 export class ObliqueCollection {
@@ -5512,11 +5509,16 @@ export class ObliqueCollection {
      * Event raised when images are loaded. Is passed an Array of ObliqueImages as its only argument.
      */
     imagesLoaded: VcsEvent<ObliqueImage[]>;
+    /**
+     * Whether to activate this collection after loading its defining context.
+     */
+    activeOnStartup: boolean;
     readonly dataSets: ObliqueDataSet[];
     /**
      * Indicates, that this collection has been loaded
      */
     loaded: boolean;
+    destroyed: any;
     /**
      * A vector source of all tiles available to this collection in mercator. The feature have a "state" property,
      * the id is the string tile coordinate "z/x/y" of the tile
@@ -5766,7 +5768,7 @@ export interface ObliqueImageMetaOptions {
     tileResolution: number[];
     projection: Projection;
     url: string;
-    terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider;
+    terrainProvider?: import("@vcmap/cesium").CesiumTerrainProvider;
     name: string;
     format?: string | undefined;
 }
@@ -5802,7 +5804,7 @@ export class ObliqueImageMeta {
     /**
      * An optional terrain provider
      */
-    terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider;
+    terrainProvider: import("@vcmap/cesium").CesiumTerrainProvider | undefined;
     format: string;
     /**
      * Removes radial distortion in image coordinates. Radial coefficients must be provided
@@ -5911,7 +5913,7 @@ export class ObliqueView {
     /**
      * Sets the layers source to request data for this image
      */
-    setImageName(name: string): void;
+    setImageName(name: string, isDefaultImage?: boolean): void;
 }
 
 /**
@@ -5931,6 +5933,43 @@ export const obliqueViewDirectionNames: {
 
 export function getDirectionName(direction: number): string | undefined;
 
+/**
+ * This is a special oblique collection wich is shown, if no other oblique collection is set on an Oblique map.
+ * It will render a single image which indicates that no images can be loaded.
+ */
+export class DefaultObliqueCollection extends ObliqueCollection {
+    viewOptions: ObliqueViewOptions;
+
+    /**
+     * Event raised when images are loaded. Is passed an Array of ObliqueImages as its only argument.
+     */
+    imagesLoaded: VcsEvent<ObliqueImage[]>;
+    /**
+     * Whether to activate this collection after loading its defining context.
+     */
+    activeOnStartup: boolean;
+    readonly dataSets: ObliqueDataSet[];
+    /**
+     * Indicates, that this collection has been loaded
+     */
+    loaded: boolean;
+    destroyed: any;
+    /**
+     * A vector source of all tiles available to this collection in mercator. The feature have a "state" property,
+     * the id is the string tile coordinate "z/x/y" of the tile
+     */
+    readonly tileFeatureSource: import("ol/source/Vector").default<import("ol/geom/Geometry").default>;
+    /**
+     * A vector source of all image currently loaded for this collection in mercator.
+     * The id is the image name. The feature has a "viewDirection" property.
+     */
+    readonly imageFeatureSource: import("ol/source/Vector").default<import("ol/geom/Geometry").default>;
+    /**
+     * All currently loaded images
+     */
+    readonly images: ObliqueImage[];
+}
+
 export interface PickTerrainReturn {
     estimate: boolean;
     coords: import("ol/coordinate").Coordinate;
@@ -7565,6 +7604,10 @@ export class VcsApp {
     addContext(context: Context): Promise<void>;
     protected _removeContext(contextId: string): Promise<void>;
     removeContext(contextId: string): Promise<void>;
+    /**
+     * Destroys the app and all its collections, their content and ui managers.
+     */
+    destroy(): void;
 }
 
 export function getVcsAppById(id: string): VcsApp;

package/index.js

@@ -12,7 +12,7 @@ export { default as CategoryCollection } from './src/vcs/vcm/category/categoryCo
 export { VcsClassRegistry, default as ClassRegistry } from './src/vcs/vcm/classRegistry.js';
 export { default as Context } from './src/vcs/vcm/context.js';
 export { default as VcsEvent } from './src/vcs/vcm/event/vcsEvent.js';
-export { styleCollection, obliqueCollectionCollection } from './src/vcs/vcm/globalCollections.js';
+export { styleCollection } from './src/vcs/vcm/globalCollections.js';
 export { default as AbstractInteraction } from './src/vcs/vcm/interaction/abstractInteraction.js';
 export { default as CoordinateAtPixel } from './src/vcs/vcm/interaction/coordinateAtPixel.js';
 export { default as EventHandler } from './src/vcs/vcm/interaction/eventHandler.js';
@@ -102,6 +102,7 @@ export { default as ObliqueImageMeta } from './src/vcs/vcm/oblique/ObliqueImageM
 export { default as ObliqueProvider } from './src/vcs/vcm/oblique/ObliqueProvider.js';
 export { default as ObliqueView } from './src/vcs/vcm/oblique/ObliqueView.js';
 export { ObliqueViewDirection, obliqueViewDirectionNames, getDirectionName } from './src/vcs/vcm/oblique/ObliqueViewDirection.js';
+export { default as DefaultObliqueCollection } from './src/vcs/vcm/oblique/defaultObliqueCollection.js';
 export { sortRealWordEdgeCoordinates, checkLineIntersection, transformCWIFC, transformToImage, transformFromImage, hasSameOrigin } from './src/vcs/vcm/oblique/helpers.js';
 export { getVersionFromImageJson, parseImageMeta, parseImageData, parseLegacyImageData } from './src/vcs/vcm/oblique/parseImageJson.js';
 export { default as ClippingObject } from './src/vcs/vcm/util/clipping/clippingObject.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/core",
-  "version": "5.0.0-rc.5",
+  "version": "5.0.0-rc.6",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -36,7 +36,6 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
-    "@vcmap/cesium": "^1.87.3",
     "@vcsuite/eslint-config": "^2.0.3",
     "@vcsuite/tsd-jsdoc": "^1.0.2",
     "@web/dev-server": "^0.1.11",
@@ -53,14 +52,13 @@
     "mocha-junit-reporter": "^2.0.2",
     "nock": "^13.2.4",
     "node-fetch": "^3.2.0",
-    "ol": "^6.9.0",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.6.0",
     "typescript": "^4.4.4"
   },
   "peerDependencies": {
-    "@vcmap/cesium": "~1.87.2",
-    "ol": "^6.5.0"
+    "@vcmap/cesium": "~1.87.3",
+    "ol": "^6.9.0"
   },
   "eslintConfig": {
     "extends": [

package/src/vcs/vcm/globalCollections.js

@@ -3,9 +3,5 @@ import Collection from './util/collection.js';
 /**
  * @type {import("@vcmap/core").Collection<import("@vcmap/core").StyleItem>}
  */
+// eslint-disable-next-line import/prefer-default-export
 export const styleCollection = new Collection();
-
-/**
- * @type {import("@vcmap/core").Collection<import("@vcmap/core").ObliqueCollection>}
- */
-export const obliqueCollectionCollection = new Collection();

package/src/vcs/vcm/maps/oblique.js

@@ -9,12 +9,12 @@ import ViewPoint from '../util/viewpoint.js';
 import BaseOLMap from './baseOLMap.js';
 import VcsMap from './map.js';
 import VcsEvent from '../event/vcsEvent.js';
-import { obliqueCollectionCollection } from '../globalCollections.js';
 import { ObliqueViewDirection as ViewDirection } from '../oblique/ObliqueViewDirection.js';
 import ObliqueProvider from '../oblique/ObliqueProvider.js';
 import ObliqueCollection from '../oblique/ObliqueCollection.js';
 import { transformFromImage } from '../oblique/helpers.js';
 import { VcsClassRegistry } from '../classRegistry.js';
+import DefaultObliqueCollection from '../oblique/defaultObliqueCollection.js';
 
 /**
  * @typedef {Object} ObliqueClickParameters
@@ -28,7 +28,6 @@ import { VcsClassRegistry } from '../classRegistry.js';
  * @property {boolean} [changeOnMoveEnd=false]
  * @property {number} [switchThreshold=0]
  * @property {boolean} [switchOnEdge=true]
- * @property {string|undefined} defaultCollectionName
  * @api
  */
 
@@ -39,6 +38,8 @@ const defaultHeadings = {
   [ViewDirection.WEST]: 270,
 };
 
+const defaultCollection = new DefaultObliqueCollection();
+
 /**
  * returns the direction which matches the heading of the viewpoint
  * @param {ViewPoint} viewpoint
@@ -91,22 +92,12 @@ class Oblique extends BaseOLMap {
       changeOnMoveEnd: false,
       switchThreshold: 0,
       switchOnEdge: true,
-      defaultCollectionName: undefined,
     };
   }
 
-  /**
-   * @param {ObliqueOptions} options
-   */
   constructor(options) {
     super(options);
     const defaultOptions = Oblique.getDefaultOptions();
-    /**
-     * @type {string|undefined}
-     * @private
-     */
-    this._defaultCollectionName = options.defaultCollectionName || defaultOptions.defaultCollectionName;
-
     /**
      * @type  {ObliqueCollection|null}
      * @private
@@ -139,6 +130,11 @@ class Oblique extends BaseOLMap {
      * @api
      */
     this.collectionChanged = new VcsEvent();
+    /**
+     * @type {function():void}
+     * @private
+     */
+    this._activeCollectionDestroyedListener = () => {};
   }
 
   /**
@@ -209,9 +205,7 @@ class Oblique extends BaseOLMap {
           this.switchEnabled = this._switchEnabled;
           let collectionToLoad = this._loadingCollection;
           if (!collectionToLoad) {
-            collectionToLoad = this._defaultCollectionName ?
-              obliqueCollectionCollection.getByKey(this._defaultCollectionName) :
-              [...obliqueCollectionCollection][0];
+            collectionToLoad = defaultCollection;
           }
           if (collectionToLoad) {
             await this._setCollection(collectionToLoad);
@@ -333,11 +327,11 @@ class Oblique extends BaseOLMap {
       return;
     }
 
-    if (!this.initializedPromise) { // TODO add collection to obliqueCollections?
-      this._defaultCollectionName = obliqueCollection.name;
+    this._loadingCollection = obliqueCollection;
+    if (!this.initializedPromise) {
       return;
     }
-    this._loadingCollection = obliqueCollection;
+
     await this.initializedPromise;
     if (this._loadingCollection !== obliqueCollection) {
       return;
@@ -354,6 +348,10 @@ class Oblique extends BaseOLMap {
    */
   async _setCollection(obliqueCollection, viewpoint) {
     this._loadingCollection = obliqueCollection;
+    this._activeCollectionDestroyedListener();
+    this._activeCollectionDestroyedListener = obliqueCollection.destroyed.addEventListener(() => {
+      this._setCollection(defaultCollection);
+    });
     await obliqueCollection.load();
     const vp = viewpoint || await this.getViewPoint();
     if (this._loadingCollection !== obliqueCollection) {
@@ -513,10 +511,6 @@ class Oblique extends BaseOLMap {
       config.switchOnEdge = this.switchEnabled;
     }
 
-    if (this._defaultCollectionName !== defaultOptions.defaultCollectionName) {
-      config.defaultCollectionName = this._defaultCollectionName;
-    }
-
     return config;
   }
 
@@ -528,6 +522,7 @@ class Oblique extends BaseOLMap {
       this._obliqueProvider.destroy();
     }
     this.collectionChanged.destroy();
+    this._activeCollectionDestroyedListener();
     super.destroy();
   }
 }

package/src/vcs/vcm/oblique/ObliqueCollection.js

@@ -1,4 +1,4 @@
-import { parseInteger, parseNumber } from '@vcsuite/parsers';
+import { parseBoolean, parseInteger, parseNumber } from '@vcsuite/parsers';
 import RBush from 'rbush';
 import knn from 'rbush-knn';
 import { getTransform } from 'ol/proj.js';
@@ -67,6 +67,7 @@ import VcsObject from '../object.js';
  * @property {number|undefined} [minZoom]
  * @property {number|undefined} [scaleFactor=4]
  * @property {number|undefined} [hideLevels]
+ * @property {boolean|undefined} [activeOnStartup=false]
  * @api
  */
 
@@ -124,6 +125,7 @@ class ObliqueCollection extends VcsObject {
       scaleFactor: 4,
       dataSets: undefined,
       hideLevels: 0,
+      activeOnStartup: false,
     };
   }
 
@@ -185,6 +187,18 @@ class ObliqueCollection extends VcsObject {
         this._addDataSet(dataSet);
       });
     }
+
+    /**
+     * @type {VcsEvent<void>}
+     * @private
+     */
+    this._destroyed = new VcsEvent();
+
+    /**
+     * Whether to activate this collection after loading its defining context.
+     * @type {boolean}
+     */
+    this.activeOnStartup = parseBoolean(options.activeOnStartup, defaultOptions.activeOnStartup);
   }
 
   /**
@@ -205,6 +219,13 @@ class ObliqueCollection extends VcsObject {
     return this._loaded;
   }
 
+  /**
+   * @returns {VcsEvent<void>}
+   */
+  get destroyed() {
+    return this._destroyed;
+  }
+
   /**
    * A vector source of all tiles available to this collection in mercator. The feature have a "state" property,
    * the id is the string tile coordinate "z/x/y" of the tile
@@ -592,6 +613,9 @@ class ObliqueCollection extends VcsObject {
       this._imageFeatureSource = null;
     }
     this.imagesLoaded.destroy();
+    super.destroy();
+    this.destroyed.raiseEvent();
+    this._destroyed.destroy();
   }
 
   /**

package/src/vcs/vcm/oblique/ObliqueImageMeta.js

@@ -11,7 +11,7 @@ import { cartesian2DDistance } from '../util/math.js';
  * @property {Array<number>} tileResolution
  * @property {import("@vcmap/core").Projection} projection
  * @property {string} url
- * @property {import("@vcmap/cesium").CesiumTerrainProvider} terrainProvider
+ * @property {import("@vcmap/cesium").CesiumTerrainProvider} [terrainProvider]
  * @property {string} name
  * @property {string|undefined} [format='jpg']
  * @api
@@ -75,7 +75,7 @@ class ObliqueImageMeta {
     this.url = options.url;
     /**
      * An optional terrain provider
-     * @type {import("@vcmap/cesium").CesiumTerrainProvider}
+     * @type {import("@vcmap/cesium").CesiumTerrainProvider|undefined}
      * @api
      */
     this.terrainProvider = options.terrainProvider;

package/src/vcs/vcm/oblique/ObliqueProvider.js

@@ -7,6 +7,7 @@ import { transformFromImage } from './helpers.js';
 import { getHeightFromTerrainProvider } from '../layer/terrainHelpers.js';
 import { mercatorProjection } from '../util/projection.js';
 import VcsEvent from '../event/vcsEvent.js';
+import { isDefaultImageSymbol } from './defaultObliqueCollection.js';
 
 /**
  * @typedef {Object} ObliqueViewPoint
@@ -293,7 +294,7 @@ class ObliqueProvider {
     const previousView = this._currentView;
     this._currentView = olView;
     if (isNewImage) {
-      this._currentView.setImageName(this._currentImage.name);
+      this._currentView.setImageName(this._currentImage.name, this._currentImage[isDefaultImageSymbol]);
     }
 
     const [width, height] = this._currentImage.meta.size;

package/src/vcs/vcm/oblique/ObliqueView.js

@@ -6,6 +6,29 @@ import TileImage from 'ol/source/TileImage.js';
 import Tile from 'ol/layer/Tile.js';
 import { hasSameOrigin } from './helpers.js';
 
+/** @type {string} */
+let defaultImage = '';
+
+/**
+ * @returns {string}
+ */
+function getDefaultImage() {
+  if (!defaultImage) {
+    const canvas = document.createElement('canvas');
+    canvas.height = 512;
+    canvas.width = 512;
+    const context = canvas.getContext('2d');
+    context.fillStyle = '#409D76';
+    context.fillRect(0, 0, 512, 512);
+    context.font = 'bold 46px Monospace, Courier New';
+    context.fillStyle = '#424242';
+    context.textAlign = 'center';
+    context.fillText('No Image', 256, 256);
+    defaultImage = canvas.toDataURL('png');
+  }
+  return defaultImage;
+}
+
 /**
  * @typedef {Object} ObliqueViewOptions
  * @property {number} minZoom
@@ -108,9 +131,16 @@ class ObliqueView {
   /**
    * Sets the layers source to request data for this image
    * @param {string} name
+   * @param {boolean} [isDefaultImage=false]
    * @api
    */
-  setImageName(name) {
+  setImageName(name, isDefaultImage = false) {
+    if (isDefaultImage) {
+      this.tileImageSource.setTileLoadFunction(/** @param {import("ol").ImageTile} tile */ (tile) => {
+        /** @type {HTMLImageElement} */ (tile.getImage()).src = getDefaultImage();
+        tile.load();
+      });
+    }
     this.tileImageSource.setTileUrlFunction((coords) => {
       const [z, x, yInverted] = coords;
       const y = -yInverted - 1;

package/src/vcs/vcm/oblique/defaultObliqueCollection.js

@@ -0,0 +1,62 @@
+import ObliqueCollection from './ObliqueCollection.js';
+import ObliqueImage from './ObliqueImage.js';
+import ObliqueImageMeta from './ObliqueImageMeta.js';
+import { ObliqueViewDirection } from './ObliqueViewDirection.js';
+import { mercatorProjection } from '../util/projection.js';
+
+const defaultMeta = new ObliqueImageMeta({
+  name: 'defaultObliqueMeta',
+  size: [512, 512],
+  tileSize: [512, 512],
+  tileResolution: [1],
+  projection: mercatorProjection,
+  format: 'png',
+  url: '',
+});
+
+/**
+ * @type {symbol}
+ * @private
+ */
+export const isDefaultImageSymbol = Symbol('isDefaultImage');
+
+/**
+ * This is a special oblique collection wich is shown, if no other oblique collection is set on an Oblique map.
+ * It will render a single image which indicates that no images can be loaded.
+ * @class
+ * @extends {ObliqueCollection}
+ */
+class DefaultObliqueCollection extends ObliqueCollection {
+  constructor() {
+    super({});
+  }
+
+  /**
+   * @param {import("ol/coordinate").Coordinate} mercatorCoordinate
+   * @param {ObliqueViewDirection} viewDirection
+   * @returns {ObliqueImage}
+   */
+  // eslint-disable-next-line no-unused-vars
+  getImageForCoordinate(mercatorCoordinate, viewDirection) {
+    const groundCoordinates = [
+      [mercatorCoordinate[0] - 100, mercatorCoordinate[1] - 100, 0],
+      [mercatorCoordinate[0] + 100, mercatorCoordinate[1] - 100, 0],
+      [mercatorCoordinate[0] + 100, mercatorCoordinate[1] + 100, 0],
+      [mercatorCoordinate[0] - 100, mercatorCoordinate[1] + 100, 0],
+    ];
+
+    const image = new ObliqueImage({
+      meta: defaultMeta,
+      viewDirection: ObliqueViewDirection.NORTH,
+      viewDirectionAngle: 0,
+      name: this.name,
+      groundCoordinates,
+      centerPointOnGround: mercatorCoordinate,
+    });
+
+    image[isDefaultImageSymbol] = true;
+    return image;
+  }
+}
+
+export default DefaultObliqueCollection;

package/src/vcs/vcm/vcsApp.js

@@ -23,6 +23,7 @@ import StyleItem from './util/style/styleItem.js';
 import IndexedCollection from './util/indexedCollection.js';
 import VcsEvent from './event/vcsEvent.js';
 import { setDefaultProjectionOptions } from './util/projection.js';
+import Oblique from './maps/oblique.js';
 
 /**
  * @returns {import("@vcsuite/logger").Logger}
@@ -91,7 +92,7 @@ class VcsApp {
       new Collection(),
       getDynamicContextId,
       null,
-      getObjectFromOptions,
+      config => new ObliqueCollection(config),
       ObliqueCollection,
     ); // XXX there is a global for this collection in core.
     /**
@@ -258,6 +259,15 @@ class VcsApp {
         }
       });
 
+    const activeObliqueCollection = [...this._obliqueCollections]
+      .find(c => c[contextIdSymbol] === context.id && c.activeOnStartup);
+
+    if (activeObliqueCollection) {
+      [...this._maps]
+        .filter(m => m instanceof Oblique)
+        .forEach((m) => { /** @type {Oblique} */ (m).setCollection(activeObliqueCollection); });
+    }
+
     if (config.startingMapName) {
       await this._maps.setActiveMap(config.startingMapName);
     } else if (!this._maps.activeMap && this._maps.size > 0) {
@@ -327,6 +337,9 @@ class VcsApp {
     return this._contextMutationPromise;
   }
 
+  /**
+   * Destroys the app and all its collections, their content and ui managers.
+   */
   destroy() {
     Object.defineProperty(this, '_contextMutationPromise', {
       get() {