@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

package/src/contentTree/subContentTreeItem.js

@@ -1,4 +1,6 @@
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 
 /**
  * @type {symbol}
@@ -13,7 +15,9 @@ export const subTreeSymbol = Symbol('SubTree');
  * @extends {ContentTreeItem}
  */
 class SubContentTreeItem extends ContentTreeItem {
-  static get className() { return 'SubContentTreeItem'; }
+  static get className() {
+    return 'SubContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -23,7 +27,9 @@ class SubContentTreeItem extends ContentTreeItem {
     super(options, app);
 
     if (!this.name || this.name.split('.').length > 1) {
-      throw new Error(`Sub trees may only be defined on top level. Tree ${this.name} is nested or undefined`);
+      throw new Error(
+        `Sub trees may only be defined on top level. Tree ${this.name} is nested or undefined`,
+      );
     }
     this.clickable = false;
   }
@@ -39,4 +45,7 @@ class SubContentTreeItem extends ContentTreeItem {
 }
 
 export default SubContentTreeItem;
-contentTreeClassRegistry.registerClass(SubContentTreeItem.className, SubContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  SubContentTreeItem.className,
+  SubContentTreeItem,
+);

package/src/contentTree/vcsObjectContentTreeItem.js

@@ -1,4 +1,6 @@
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 
 /**
  * @typedef {Object} VcsObjectContentTreeItemProperties
@@ -21,7 +23,9 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
    * @type {string}
    * @readonly
    */
-  static get className() { return 'VcsObjectContentTreeItem'; }
+  static get className() {
+    return 'VcsObjectContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -71,12 +75,11 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
   setPropertiesFromObject(object) {
     this._currentObjectProperties = object.properties;
     const mergedProperties = { ...this._currentObjectProperties };
-    Object.entries(this._ownProperties)
-      .forEach(([key, value]) => {
-        if (value !== undefined) {
-          mergedProperties[key] = value;
-        }
-      });
+    Object.entries(this._ownProperties).forEach(([key, value]) => {
+      if (value !== undefined) {
+        mergedProperties[key] = value;
+      }
+    });
     this._setProperties(mergedProperties);
   }
 
@@ -85,16 +88,22 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
    */
   toJSON() {
     const config = super.toJSON();
-    Object.entries(this._currentObjectProperties)
-      .forEach(([key, value]) => {
-        if (config[key] && config[key] === value && this._ownProperties[key] !== value) {
-          delete config[key];
-        }
-      });
+    Object.entries(this._currentObjectProperties).forEach(([key, value]) => {
+      if (
+        config[key] &&
+        config[key] === value &&
+        this._ownProperties[key] !== value
+      ) {
+        delete config[key];
+      }
+    });
 
     return config;
   }
 }
 
-contentTreeClassRegistry.registerClass(VcsObjectContentTreeItem.className, VcsObjectContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  VcsObjectContentTreeItem.className,
+  VcsObjectContentTreeItem,
+);
 export default VcsObjectContentTreeItem;

package/src/contentTree/viewpointContentTreeItem.js

@@ -12,7 +12,9 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
  * @class
  */
 class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
-  static get className() { return 'ViewpointContentTreeItem'; }
+  static get className() {
+    return 'ViewpointContentTreeItem';
+  }
 
   /**
    * @param {ViewpointContentTreeItemOptions} options
@@ -48,7 +50,9 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -69,12 +73,18 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
 
     if (!this.viewpoint) {
       this.visible = false;
-      this._listeners.push(this._app.viewpoints.added.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.viewpoints.added.addEventListener(resetCallback),
+      );
     } else {
       this.visible = true;
       this.setPropertiesFromObject(this.viewpoint);
-      this._listeners.push(this._app.viewpoints.added.addEventListener(resetCallback));
-      this._listeners.push(this._app.viewpoints.removed.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.viewpoints.added.addEventListener(resetCallback),
+      );
+      this._listeners.push(
+        this._app.viewpoints.removed.addEventListener(resetCallback),
+      );
     }
   }
 
@@ -104,4 +114,7 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default ViewpointContentTreeItem;
-contentTreeClassRegistry.registerClass(ViewpointContentTreeItem.className, ViewpointContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  ViewpointContentTreeItem.className,
+  ViewpointContentTreeItem,
+);

package/src/downloadHelper.js

@@ -0,0 +1,52 @@
+import { hasSameOrigin } from '@vcmap/core';
+
+/**
+ * Download a blob
+ * @param {string} uri
+ * @param {string} fileName
+ * @api
+ * @export
+ */
+export function downloadURI(uri, fileName) {
+  const link = document.createElement('a');
+  link.download = fileName;
+  link.href = uri;
+  if (!hasSameOrigin(uri)) {
+    link.target = '_blank';
+  }
+  link.click();
+  link.remove();
+}
+
+/**
+ * Download a blob
+ * @param {Blob} blob
+ * @param {string} fileName
+ */
+export function downloadBlob(blob, fileName) {
+  downloadURI(URL.createObjectURL(blob), fileName);
+}
+
+/**
+ * Download a text as UTF-8
+ * @param {string} text
+ * @param {string} fileName
+ */
+export function downloadText(text, fileName) {
+  downloadURI(
+    `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`,
+    fileName,
+  );
+}
+
+/**
+ * Download a canvas as an image
+ * @param {HTMLCanvasElement} canvas
+ * @param {string} fileName
+ * @param {string=} mimeType
+ */
+export function downloadCanvas(canvas, fileName, mimeType) {
+  canvas.toBlob((blob) => {
+    downloadBlob(blob, fileName);
+  }, mimeType);
+}

package/src/featureInfo/AddressBalloonComponent.vue

@@ -1,16 +1,9 @@
 <template>
-  <BalloonComponent
-    v-bind="{...$attrs}"
-  >
+  <BalloonComponent v-bind="{ ...$attrs }">
     <template #default="{ attrs }">
       <v-list-item two-line v-if="Object.values(attrs.attributes).length > 0">
-        <v-list-item-avatar
-          tile
-          size="40"
-        >
-          <v-icon size="20">
-            $vcsHomePoint
-          </v-icon>
+        <v-list-item-avatar tile size="40">
+          <v-icon size="20"> $vcsHomePoint </v-icon>
         </v-list-item-avatar>
         <v-list-item-content>
           <v-list-item-title v-if="attrs.attributes.addressName">
@@ -22,15 +15,19 @@
           <v-list-item-subtitle v-if="attrs.attributes.name">
             {{ attrs.attributes.street }} {{ attrs.attributes.number }}
           </v-list-item-subtitle>
-          <v-list-item-subtitle>{{ attrs.attributes.zip }} {{ attrs.attributes.city }}</v-list-item-subtitle>
-          <v-list-item-subtitle>{{ attrs.attributes.country }}</v-list-item-subtitle>
+          <v-list-item-subtitle
+            >{{ attrs.attributes.zip }}
+            {{ attrs.attributes.city }}</v-list-item-subtitle
+          >
+          <v-list-item-subtitle>{{
+            attrs.attributes.country
+          }}</v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
     </template>
   </BalloonComponent>
 </template>
 <script>
-
   import {
     VIcon,
     VListItem,
@@ -58,6 +55,4 @@
   };
 </script>
 
-<style>
-
-</style>
+<style></style>

package/src/featureInfo/BalloonComponent.vue

@@ -1,21 +1,11 @@
 <template>
-  <v-card
-    class="mx-auto elevation-0 rounded-0"
-    max-width="400"
-    v-if="position"
-  >
-    <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
-      <v-list-item class="px-2 pr-1 align-start">
-        <v-list-item-avatar
-          tile
-          size="20"
-          class="mr-2 align-self-start"
-        >
-          <v-icon color="primary">
-            $vcsInfo
-          </v-icon>
+  <v-card class="mx-auto elevation-0" max-width="400" v-if="position">
+    <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
+      <v-list-item class="px-2 align-center">
+        <v-list-item-avatar tile size="16" class="mr-2">
+          <v-icon color="primary"> $vcsInfo </v-icon>
         </v-list-item-avatar>
-        <v-list-item-content class="py-2 pr-1 align-self-start">
+        <v-list-item-content class="pr-1">
           <v-list-item-title>
             <h3 class="font-weight-bold">
               {{ $t(balloonTitle) }}
@@ -30,16 +20,24 @@
           small
           icon="mdi-close-thick"
           tooltip="components.close"
-          class="mt-1 mr-1"
+          class="d-flex"
         />
       </v-list-item>
     </slot>
 
     <v-divider />
 
-    <v-card class="overflow-y-auto py-2 elevation-0" max-height="250" color="transparent">
-      <slot :attrs="{...$props, ...$attrs}">
-        <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`" color="transparent">
+    <v-card
+      class="overflow-y-auto py-2 elevation-0"
+      max-height="250"
+      color="transparent"
+    >
+      <slot :attrs="{ ...$props, ...$attrs }">
+        <v-list
+          v-for="(value, name, index) in attributes"
+          :key="`attribute-${index}`"
+          color="transparent"
+        >
           <v-list-item class="px-2">
             <v-list-item-content>
               <v-list-item-title>
@@ -54,10 +52,10 @@
   </v-card>
 </template>
 <script>
-
   import { inject, onMounted, onUnmounted, watch } from 'vue';
   import {
-    VCard, VDivider,
+    VCard,
+    VDivider,
     VIcon,
     VList,
     VListItem,
@@ -128,13 +126,24 @@
       };
 
       onMounted(async () => {
-        balloonPositionListener = await setupBalloonPositionListener(app, windowId, props.position);
+        balloonPositionListener = await setupBalloonPositionListener(
+          app,
+          windowId,
+          props.position,
+        );
       });
 
-      watch(() => props.featureId, async () => {
-        destroyListener();
-        balloonPositionListener = await setupBalloonPositionListener(app, windowId, props.position);
-      });
+      watch(
+        () => props.featureId,
+        async () => {
+          destroyListener();
+          balloonPositionListener = await setupBalloonPositionListener(
+            app,
+            windowId,
+            props.position,
+          );
+        },
+      );
 
       onUnmounted(() => {
         destroyListener();
@@ -153,7 +162,7 @@
 </script>
 
 <style lang="scss">
-@import '../styles/shades.scss';
+  @import '../styles/shades.scss';
 
   .balloon {
     z-index: 0 !important;
@@ -162,14 +171,15 @@
     display: none;
   }
   .balloon:after {
-    content: "";
+    content: '';
     position: absolute;
-    bottom: -20px;
+    bottom: -12px;
     left: 40px;
-    border-width: 20px 20px 0;
+    border-width: 12px 10px 0;
     border-style: solid;
     display: block;
     width: 0;
+    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
   }
   .theme--light .balloon:after {
     border-color: map-get($shades, 'white') transparent;

package/src/featureInfo/abstractFeatureInfoView.js

@@ -49,11 +49,18 @@ export function applyValueMapping(attributes, mapping) {
     })
     .forEach((mappingKey) => {
       if (Object.hasOwn(attributes, mappingKey)) {
-        attributes[mappingKey] = getMappedValue(mapping[mappingKey], attributes[mappingKey]);
+        attributes[mappingKey] = getMappedValue(
+          mapping[mappingKey],
+          attributes[mappingKey],
+        );
       } else {
         const mappingKeys = mappingKey.split('.');
         mappingKeys.reduce((obj, key, index) => {
-          if (obj && Object.hasOwn(obj, key) && index === mappingKeys.length - 1) {
+          if (
+            obj &&
+            Object.hasOwn(obj, key) &&
+            index === mappingKeys.length - 1
+          ) {
             obj[key] = getMappedValue(mapping[mappingKey], obj[key]);
           }
           return obj?.[key];
@@ -109,7 +116,11 @@ export function applyKeyMapping(attributes, mapping) {
       } else {
         const mappingKeys = mappingKey.split('.');
         mappingKeys.reduce((obj, key, index) => {
-          if (obj && Object.hasOwn(obj, key) && index === mappingKeys.length - 1) {
+          if (
+            obj &&
+            Object.hasOwn(obj, key) &&
+            index === mappingKeys.length - 1
+          ) {
             attributes[mapping[mappingKey]] = obj[key];
             delete obj[key];
           }
@@ -152,13 +163,12 @@ export function applyAttributeFilter(attributes, keys, result = {}) {
     }
   });
 
-  Object.entries(nestedKeys)
-    .forEach(([parent, pKs]) => {
-      if (typeof attributes[parent] === 'object') {
-        result[parent] = {};
-        applyAttributeFilter(attributes[parent], pKs, result[parent]);
-      }
-    });
+  Object.entries(nestedKeys).forEach(([parent, pKs]) => {
+    if (typeof attributes[parent] === 'object') {
+      result[parent] = {};
+      applyAttributeFilter(attributes[parent], pKs, result[parent]);
+    }
+  });
   return result;
 }
 
@@ -173,7 +183,9 @@ class AbstractFeatureInfoView extends VcsObject {
   /**
    * @type {string}
    */
-  static get className() { return 'AbstractFeatureInfoView'; }
+  static get className() {
+    return 'AbstractFeatureInfoView';
+  }
 
   /** @returns {FeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -217,18 +229,22 @@ class AbstractFeatureInfoView extends VcsObject {
   }
 
   /**
-   * window options, configured in a context, used only internally by AbstractFeatureInfoView or subclass
+   * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
    * @type {WindowComponentOptions|Object}
    * @readonly
    */
-  get window() { return this._window; }
+  get window() {
+    return this._window;
+  }
 
   /**
    * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
    * @type {import("vue").Component|undefined}
    * @readonly
    */
-  get component() { return this._component; }
+  get component() {
+    return this._component;
+  }
 
   /**
    * This method returns all relevant attributes for this view.

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -1,4 +1,6 @@
-import BalloonFeatureInfoView, { extractNestedKey } from './balloonFeatureInfoView.js';
+import BalloonFeatureInfoView, {
+  extractNestedKey,
+} from './balloonFeatureInfoView.js';
 import AddressBalloonComponent from './AddressBalloonComponent.vue';
 
 /**
@@ -20,7 +22,9 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'AddressBalloonFeatureInfoView'; }
+  static get className() {
+    return 'AddressBalloonFeatureInfoView';
+  }
 
   /** @returns {AddressBalloonFeatureInfoViewOptions} */
   static getDefaultOptions() {
@@ -44,15 +48,20 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
     /**
      * @type {string|null}
      */
-    this.addressName = options.addressName !== undefined ? options.addressName : defaultOptions.addressName;
+    this.addressName =
+      options.addressName !== undefined
+        ? options.addressName
+        : defaultOptions.addressName;
     /**
      * @type {string|null}
      */
-    this.street = options.street !== undefined ? options.street : defaultOptions.street;
+    this.street =
+      options.street !== undefined ? options.street : defaultOptions.street;
     /**
      * @type {string|null}
      */
-    this.number = options.number !== undefined ? options.number : defaultOptions.number;
+    this.number =
+      options.number !== undefined ? options.number : defaultOptions.number;
     /**
      * @type {string|null}
      */
@@ -64,7 +73,8 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
     /**
      * @type {string|null}
      */
-    this.country = options.country !== undefined ? options.country : defaultOptions.country;
+    this.country =
+      options.country !== undefined ? options.country : defaultOptions.country;
   }
 
   /**
@@ -83,7 +93,9 @@ class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
         }
       }
     };
-    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(key => applyAddressKeys(key));
+    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(
+      (key) => applyAddressKeys(key),
+    );
     return obj;
   }
 

package/src/featureInfo/balloonFeatureInfoView.js

@@ -19,7 +19,7 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
   check(attrs, Object);
 
   const keys = key.split('.');
-  const derivedValue = keys.reduce((obj, prop) => (obj[prop] || {}), attrs);
+  const derivedValue = keys.reduce((obj, prop) => obj[prop] || {}, attrs);
   return typeof derivedValue === 'string' ? derivedValue : defaultValue;
 }
 
@@ -74,7 +74,9 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'BalloonFeatureInfoView'; }
+  static get className() {
+    return 'BalloonFeatureInfoView';
+  }
 
   /**
    * @param {BalloonFeatureInfoViewOptions} options
@@ -103,13 +105,24 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
-      balloonTitle: this.balloonTitle != null ?
-        extractNestedKey(this.balloonTitle, properties.attributes, this.balloonTitle) :
-        properties.layerProperties.title,
-      balloonSubtitle: this.balloonSubtitle != null ?
-        extractNestedKey(this.balloonSubtitle, properties.attributes, this.balloonSubtitle) :
-        properties.featureId,
+      position:
+        featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
+      balloonTitle:
+        this.balloonTitle != null
+          ? extractNestedKey(
+              this.balloonTitle,
+              properties.attributes,
+              this.balloonTitle,
+            )
+          : properties.layerProperties.title,
+      balloonSubtitle:
+        this.balloonSubtitle != null
+          ? extractNestedKey(
+              this.balloonSubtitle,
+              properties.attributes,
+              this.balloonSubtitle,
+            )
+          : properties.featureId,
     };
   }