@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -6,13 +6,11 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {ContentTreeItemOptions} ObliqueCollectionContentTreeItemOptions
- * @property {string} collectionName
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { collectionName: string }} ObliqueCollectionContentTreeItemOptions
  */
 
 /**
- * @typedef {VcsObjectContentTreeItemProperties} ObliqueCollectionContentTreeItemProperties
- * @property {string|import("@vcmap/core").Viewpoint} defaultViewpoint
+ * @typedef {import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & { defaultViewpoint: string }} ObliqueCollectionContentTreeItemProperties
  */
 
 /**
@@ -34,7 +32,7 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
 
   /**
    * @param {ObliqueCollectionContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/contentTree/subContentTreeItem.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @type {symbol}
+ */
+export const subTreeSymbol: symbol;
+export default SubContentTreeItem;
+/**
+ * A subtree item. Subtrees are rendered in their own (not the main content tree).
+ * They will receive their own toggle button in the nav bar.
+ * Only toplevel items can be content tree items (with a name which does not have a .)
+ * @class
+ * @extends {ContentTreeItem}
+ */
+declare class SubContentTreeItem extends ContentTreeItem {
+}
+import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/subContentTreeItem.js

@@ -20,8 +20,8 @@ class SubContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {ContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);
@@ -35,7 +35,7 @@ class SubContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @returns {TreeViewItem}
+   * @returns {import("./contentTreeItem.js").TreeViewItem}
    */
   getTreeViewItem() {
     const treeViewItem = super.getTreeViewItem();

package/src/contentTree/vcsObjectContentTreeItem.d.ts

@@ -0,0 +1,56 @@
+export default VcsObjectContentTreeItem;
+export type VcsObjectContentTreeItemProperties = {
+    title?: string | {
+        [x: string]: string;
+    } | undefined;
+    icon?: string | undefined;
+    infoUrl?: string | undefined;
+};
+/**
+ * @typedef {Object} VcsObjectContentTreeItemProperties
+ * @property {string|Object<string, string>} [title]
+ * @property {string} [icon]
+ * @property {string} [infoUrl]
+ */
+/**
+ * An abstract class for VcsObject based items.
+ * It handles the overriding/setting of its own values based on
+ * the VcsObjects properties bag.
+ * @class
+ * @template {VcsObjectContentTreeItemProperties} T
+ * @extends {ContentTreeItem}
+ * @abstract
+ */
+declare class VcsObjectContentTreeItem<T extends VcsObjectContentTreeItemProperties> extends ContentTreeItem {
+    /**
+     * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: import("./contentTreeItem.js").ContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * This object holds the properties which where configured on this item.
+     * @type {T}
+     * @protected
+     */
+    protected _ownProperties: T;
+    /**
+     * @type {T}
+     * @private
+     */
+    private _currentObjectProperties;
+    /**
+     * Sets the VcsObjects properties on the current item.
+     * When extending this class with any other type, you must override this
+     * method to set other values defined in your type.
+     * This method is called, when the properties are set from this.setPropertiesFromObject.
+     * @param {T} properties
+     * @protected
+     */
+    protected _setProperties(properties: T): void;
+    /**
+     * Sets the values on this item based on the objects properties bag.
+     * @param {import("@vcmap/core").VcsObject} object
+     */
+    setPropertiesFromObject(object: import("@vcmap/core").VcsObject): void;
+}
+import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/vcsObjectContentTreeItem.js

@@ -21,15 +21,14 @@ import ContentTreeItem, {
 class VcsObjectContentTreeItem extends ContentTreeItem {
   /**
    * @type {string}
-   * @readonly
    */
   static get className() {
     return 'VcsObjectContentTreeItem';
   }
 
   /**
-   * @param {ContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);
@@ -84,7 +83,7 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @returns {ContentTreeItemOptions}
+   * @returns {import("./contentTreeItem.js").ContentTreeItemOptions}
    */
   toJSON() {
     const config = super.toJSON();

package/src/contentTree/viewpointContentTreeItem.d.ts

@@ -0,0 +1,46 @@
+export default ViewpointContentTreeItem;
+export type ViewpointContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    viewpointName: string;
+};
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { viewpointName: string }} ViewpointContentTreeItemOptions
+ */
+/**
+ * A viewpoint item. Sets the viewpoint on the currently active map when clicked.
+ * @extends {VcsObjectContentTreeItem<import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties>}
+ * @class
+ */
+declare class ViewpointContentTreeItem extends VcsObjectContentTreeItem<import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties> {
+    /**
+     * @param {ViewpointContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ViewpointContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _viewpointName;
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    private _listeners;
+    /**
+     * @returns {import("@vcmap/core").Viewpoint}
+     */
+    get viewpoint(): import("@vcmap/core/dist/src/util/viewpoint.js").default;
+    /**
+     * @private
+     */
+    private _clearListeners;
+    /**
+     * @private
+     */
+    private _setup;
+    /**
+     * @returns {ViewpointContentTreeItemOptions}
+     */
+    toJSON(): ViewpointContentTreeItemOptions;
+}
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';

package/src/contentTree/viewpointContentTreeItem.js

@@ -2,13 +2,12 @@ import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
 
 /**
- * @typedef {VcsObjectContentTreeItem.Options} ViewpointContentTreeItemOptions
- * @property {string} viewpointName
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { viewpointName: string }} ViewpointContentTreeItemOptions
  */
 
 /**
  * A viewpoint item. Sets the viewpoint on the currently active map when clicked.
- * @extends {VcsObjectContentTreeItem<VcsObjectContentTreeItemProperties>}
+ * @extends {VcsObjectContentTreeItem<import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties>}
  * @class
  */
 class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
@@ -18,7 +17,7 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
 
   /**
    * @param {ViewpointContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     options.icon = options.icon || '$vcsPoi'; // XXX _should_ this be the default?

package/src/downloadHelper.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Download a blob
+ * @param {string} uri
+ * @param {string} fileName
+ * @api
+ * @export
+ */
+export function downloadURI(uri: string, fileName: string): void;
+/**
+ * Download a blob
+ * @param {Blob} blob
+ * @param {string} fileName
+ */
+export function downloadBlob(blob: Blob, fileName: string): void;
+/**
+ * Download a text as UTF-8
+ * @param {string} text
+ * @param {string} fileName
+ */
+export function downloadText(text: string, fileName: string): void;
+/**
+ * Download a canvas as an image
+ * @param {HTMLCanvasElement} canvas
+ * @param {string} fileName
+ * @param {string=} mimeType
+ */
+export function downloadCanvas(canvas: HTMLCanvasElement, fileName: string, mimeType?: string | undefined): void;

package/src/featureInfo/AddressBalloonComponent.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/featureInfo/BalloonComponent.vue

@@ -33,16 +33,21 @@
     >
       <slot :attrs="{ ...$props, ...$attrs }">
         <v-list
-          v-for="(value, name, index) in attributes"
+          v-for="(value, key, index) in attributes"
           :key="`attribute-${index}`"
           color="transparent"
         >
           <v-list-item class="px-2">
             <v-list-item-content>
               <v-list-item-title>
-                {{ $t(name) }}
+                {{ $t(key) }}
               </v-list-item-title>
-              <v-list-item-subtitle>{{ $t(value) }}</v-list-item-subtitle>
+              <v-list-item-subtitle
+                :tag="getTag(tags, key)"
+                v-bind="getTagOptions(tags, key)"
+              >
+                {{ typeof value === 'string' ? $t(value) : value }}
+              </v-list-item-subtitle>
             </v-list-item-content>
           </v-list-item>
         </v-list>
@@ -65,6 +70,7 @@
   } from 'vuetify/lib';
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
+  import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
 
   /**
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
@@ -73,6 +79,7 @@
    * @vue-prop {string} balloonTitle - balloon title
    * @vue-prop {string} balloonSubtitle - balloon subtitle
    * @vue-prop {Object} attributes - feature's attributes
+   * @vue-prop {Object} tags - optional object containing keys rendered as tags
    * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
    * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
    * @vue-data {slot} [#default] - slot to override balloon content, $props and $attrs are passed to `attrs`
@@ -108,6 +115,10 @@
         type: Object,
         required: true,
       },
+      tags: {
+        type: Object,
+        default: undefined,
+      },
       position: {
         type: Array,
         default: null,
@@ -155,6 +166,8 @@
 
       return {
         close,
+        getTag,
+        getTagOptions,
       };
     },
   };

package/src/featureInfo/BalloonComponent.vue.d.ts

@@ -0,0 +1,61 @@
+declare const _default: import("vue").DefineComponent<{
+    featureId: {
+        type: StringConstructor;
+        required: true;
+    };
+    balloonTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    balloonSubtitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    attributes: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    tags: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    position: {
+        type: ArrayConstructor;
+        default: null;
+    };
+}, {
+    close: () => void;
+    getTag: typeof getTag;
+    getTagOptions: typeof getTagOptions;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    featureId: {
+        type: StringConstructor;
+        required: true;
+    };
+    balloonTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    balloonSubtitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    attributes: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    tags: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    position: {
+        type: ArrayConstructor;
+        default: null;
+    };
+}>>, {
+    position: unknown[];
+    tags: Record<string, any>;
+}>;
+export default _default;
+import { getTag } from '../components/tables/VcsTable.vue';
+import { getTagOptions } from '../components/tables/VcsTable.vue';

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -0,0 +1,199 @@
+/**
+ * Replaces values by new values according to mapping table. Nested keys are represented by a "."
+ * @param {Record<string, unknown>} attributes
+ * @param {Object<string, string|Object<string,string>>} mapping - value mapping
+ */
+export function applyValueMapping(attributes: Record<string, unknown>, mapping: {
+    [x: string]: string | {
+        [x: string]: string;
+    };
+}): void;
+/**
+ * Replaces keys by new keys according to mapping table.
+ * Nested keys to replace are represented by a ".". Keys will
+ * be replaced by the given string literal. This will always lead
+ * to a new top level key or an overwritting of an existing key.
+ * Deletes old keys!
+ * @example
+ * const getAttrs = () => { foo: { bar: true }, 'foo.baz': true };
+ * const nestedMapping = { 'foo.bar': 'bar' };
+ * const nestedMappingWithPeriod = { 'foo.bar': 'bar.foo' };
+ * const flatMapping = { 'foo': 'bar' };
+ * const periodMapping = { 'foo.baz': 'foo' };
+ * // apply nested key mapping will replace nested key with top level key
+ * const nestedAttrs = applyKeyMapping(getAttrs(), nestedMapping);
+ * assert(nestedAttrs.bar === true);
+ * // apply nested key mapping with a new key with a period. will replace nested key with a top level key.
+ * const nestedAttrsWithPeriod = applyKeyMapping(getAttrs(), nestedMappingWithPeriod);
+ * assert(nestedAttrsWithPeriod['bar.foo'] === true);
+ * // apply flat mapping: will replace top level key with another top level key
+ * const flatAttrs = applyKeyMapping(getAttrs(), flatMapping);
+ * assert(flatAttrs.bar.bar === true);
+ * // apply flat mapping of a key with a period. this will overwrite an existing _other_ key
+ * const periodAttrs = applyKeyMapping(getAttrs(), periodMapping);
+ * assert(periodAttrs.foo === true);
+ * @param {Object<string, unknown>} attributes
+ * @param {Object<string,string>} mapping - key mapping
+ */
+export function applyKeyMapping(attributes: {
+    [x: string]: unknown;
+}, mapping: {
+    [x: string]: string;
+}): void;
+/**
+ * Applies an attribute filtering. Nested attributes are represented by a ".".
+ * @example
+ * const attrs = { foo: { bar: true, baz: false }, bar: true, baz: true, foobar: { foo: true, bar: true } };
+ * const filter = ["foo.bar", "baz", "foobar"];
+ * const filtered = applyAttributeFilter(attrs, filter)
+ * // nested keys will also filter for their parent
+ * assert(filtered.foo.bar === true);
+ * // only keys filtered will be present
+ * assert(filtered.foo.baz === undefined);
+ * assert(filtered.bar === undefined);
+ * assert(filtered.baz === true);
+ * // if filtering parent top level keys, will pass on a reference of the actual value and its children.
+ * assert(deepEquals(filtered.foobar, attrs.foobar));
+ * @param {Object<string, unknown>} attributes
+ * @param {Array<string>} keys
+ * @param {Object<string, unknown>=} result
+ * @returns {Object<string, unknown>}
+ */
+export function applyAttributeFilter(attributes: {
+    [x: string]: unknown;
+}, keys: Array<string>, result?: {
+    [x: string]: unknown;
+} | undefined): {
+    [x: string]: unknown;
+};
+/**
+ * Filters all olcs attributes, not provided as keys
+ * @param {Object<string, unknown>} attributes
+ * @param {Array<string>} keys
+ * @returns {Object}
+ */
+export function applyOlcsAttributeFilter(attributes: {
+    [x: string]: unknown;
+}, keys?: Array<string>): Object;
+export default AbstractFeatureInfoView;
+export type FeatureInfoProps = {
+    featureId: string;
+    layerName: string;
+    layerProperties: Object;
+    attributes: Object;
+    tags: Object;
+};
+export type HTMLTagOptions = {
+    /**
+     * - the html element type
+     * ... further html options, which can contain template string $value for reusing the attribute's value
+     */
+    tag: string;
+};
+export type FeatureInfoViewOptions = import("@vcmap/core").VcsObjectOptions & {
+    attributeKeys?: string[];
+    keyMapping?: Record<string, string>;
+    valueMapping?: Record<string, string | Record<string, string>>;
+    tags?: Record<string, HTMLTagOptions>;
+    window?: import("../manager/window/windowManager.js").WindowComponentOptions;
+};
+/**
+ * Abstract class to be extended by FeatureInfoView classes
+ * Subclasses must always provide a component and may overwrite class methods.
+ * @abstract
+ * @class
+ * @extends {VcsObject}
+ */
+declare class AbstractFeatureInfoView extends VcsObject {
+    /** @returns {FeatureInfoViewOptions} */
+    static getDefaultOptions(): FeatureInfoViewOptions;
+    /**
+     * @param {FeatureInfoViewOptions} options
+     * @param {import("vue").Component} component
+     */
+    constructor(options: FeatureInfoViewOptions, component: import("vue").Component);
+    /**
+     * @type {string[]}
+     */
+    attributeKeys: string[];
+    /**
+     * @type {null|Object<string,string>}
+     */
+    keyMapping: null | {
+        [x: string]: string;
+    };
+    /**
+     * @type {null|Object<string, string|Object<string,string>>}
+     */
+    valueMapping: null | {
+        [x: string]: string | {
+            [x: string]: string;
+        };
+    };
+    /**
+     * @type {null|Object<string,HTMLTagOptions>}
+     */
+    tags: null | {
+        [x: string]: HTMLTagOptions;
+    };
+    /**
+     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @private
+     */
+    private _window;
+    /**
+     * @type {import("vue").Component|undefined}
+     * @private
+     */
+    private _component;
+    /**
+     * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
+     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     */
+    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions;
+    /**
+     * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
+     * @type {import("vue").Component|undefined}
+     */
+    get component(): import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    /**
+     * This method returns all relevant attributes for this view.
+     * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.
+     * May be overwritten by classes extending AbstractFeatureInfoView.
+     * It filters attributes of the feature by keys, performs value and key mapping, if provided.
+     * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+     * @returns {Object}
+     */
+    getAttributes(feature: undefined | import("ol").Feature | import("@vcmap-cesium/engine").Cesium3DTileFeature | import("@vcmap-cesium/engine").Cesium3DTilePointFeature): Object;
+    /**
+     * This method returns an object with keys rendered as special html elements.
+     * Applies value mapping, when using $value html option.
+     * Ensures key mapping on defined anchor keys.
+     * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+     * @returns {Object|undefined}
+     */
+    getTags(feature: undefined | import("ol").Feature | import("@vcmap-cesium/engine").Cesium3DTileFeature | import("@vcmap-cesium/engine").Cesium3DTilePointFeature): Object | undefined;
+    /**
+     * This method returns all relevant properties passed to the VueComponent of this view.
+     * May be overwritten by classes extending AbstractFeatureInfoView.
+     * Called by `getWindowComponentOptions()`.
+     * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+     * @param {import("@vcmap/core").Layer} layer
+     * @returns {FeatureInfoProps}
+     */
+    getProperties({ feature }: import("./featureInfo.js").FeatureInfoEvent, layer: import("@vcmap/core").Layer): FeatureInfoProps;
+    /**
+     * This method is being called by featureInfo, whenever a new window is created (added to the windowManager).
+     * May be overwritten by classes extending AbstractFeatureInfoView.
+     * @param {import("../vcsUiApp.js").default} app
+     * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+     * @param {import("@vcmap/core").Layer} layer
+     * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
+     */
+    getWindowComponentOptions(app: import("../vcsUiApp.js").default, featureInfo: import("./featureInfo.js").FeatureInfoEvent, layer: import("@vcmap/core").Layer): import("../manager/window/windowManager.js").WindowComponentOptions;
+    /**
+     * @returns {FeatureInfoViewOptions}
+     */
+    toJSON(): FeatureInfoViewOptions;
+}
+import { VcsObject } from '@vcmap/core';