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

package/src/contentTree/layerGroupContentTreeItem.js

@@ -1,5 +1,10 @@
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
-import { getStateFromLayer, setViewpointAction } from './layerContentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
+import {
+  getStateFromLayer,
+  setViewpointAction,
+} from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 
 /**
@@ -14,16 +19,16 @@ import { StateActionState } from '../actions/stateRefAction.js';
  * @returns {StateActionState}
  */
 function getStateFromLayers(layers) {
-  const states = layers.map(l => getStateFromLayer(l));
-  if (states.some(s => s === StateActionState.LOADING)) {
+  const states = layers.map((l) => getStateFromLayer(l));
+  if (states.some((s) => s === StateActionState.LOADING)) {
     return StateActionState.LOADING;
   }
 
-  if (states.every(s => s === StateActionState.INACTIVE)) {
+  if (states.every((s) => s === StateActionState.INACTIVE)) {
     return StateActionState.INACTIVE;
   }
 
-  if (states.every(s => s === StateActionState.ACTIVE)) {
+  if (states.every((s) => s === StateActionState.ACTIVE)) {
     return StateActionState.ACTIVE;
   }
   return StateActionState.INDETERMINATE;
@@ -39,7 +44,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    * @readonly
    * @type {string}
    */
-  static get className() { return 'LayerGroupContentTreeItem'; }
+  static get className() {
+    return 'LayerGroupContentTreeItem';
+  }
 
   /**
    * @param {LayerGroupContentTreeItemOptions} options
@@ -52,17 +59,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
      * @type {Array<string>}
      * @private
      */
-    this._layerNames = Array.isArray(options.layerNames) ?
-      options.layerNames.slice() :
-      [];
+    this._layerNames = Array.isArray(options.layerNames)
+      ? options.layerNames.slice()
+      : [];
 
     /**
      * @type {Array<string>}
      * @private
      */
-    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate) ?
-      options.layerNamesToDeactivate.slice() :
-      [];
+    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate)
+      ? options.layerNamesToDeactivate.slice()
+      : [];
 
     /**
      * @type {Array<function():void>}
@@ -85,15 +92,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    */
   get _layers() {
     return this._layerNames
-      .map(n => this._app.layers.getByKey(n))
-      .filter(l => l);
+      .map((n) => this._app.layers.getByKey(n))
+      .filter((l) => l);
   }
 
   /**
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -113,22 +122,30 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     };
     const layers = this._layers;
 
-    this.visible = layers.some(l => l.isSupported(this._app.maps.activeMap));
+    this.visible = layers.some((l) => l.isSupported(this._app.maps.activeMap));
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
 
-    this._listeners.push(this._app.layers.removed.addEventListener(resetHandler));
+    this._listeners.push(
+      this._app.layers.removed.addEventListener(resetHandler),
+    );
     this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
 
     layers.forEach((layer) => {
-      this._listeners.push(layer.stateChanged.addEventListener(() => {
-        this.state = getStateFromLayers(layers);
-      }));
+      this._listeners.push(
+        layer.stateChanged.addEventListener(() => {
+          this.state = getStateFromLayers(layers);
+        }),
+      );
     });
 
-    this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
-      this.visible = !!layers.find(l => l.isSupported(this._app.maps.activeMap));
-    }));
+    this._listeners.push(
+      this._app.maps.mapActivated.addEventListener(() => {
+        this.visible = !!layers.find((l) =>
+          l.isSupported(this._app.maps.activeMap),
+        );
+      }),
+    );
   }
 
   /**
@@ -136,15 +153,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    */
   async clicked() {
     const layers = this._layers;
-    const activate = layers.some(l => !(l.active || l.loading));
+    const activate = layers.some((l) => !(l.active || l.loading));
     if (activate) {
-      await Promise.all(layers.map(l => l.activate()));
+      await Promise.all(layers.map((l) => l.activate()));
       this._layerNamesToDeactivate
-        .map(n => this._app.layers.getByKey(n))
-        .filter(l => l)
-        .forEach(l => l.deactivate());
+        .map((n) => this._app.layers.getByKey(n))
+        .filter((l) => l)
+        .forEach((l) => l.deactivate());
     } else {
-      layers.forEach((l) => { l.deactivate(); });
+      layers.forEach((l) => {
+        l.deactivate();
+      });
     }
   }
 
@@ -171,4 +190,7 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
 }
 
 export default LayerGroupContentTreeItem;
-contentTreeClassRegistry.registerClass(LayerGroupContentTreeItem.className, LayerGroupContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  LayerGroupContentTreeItem.className,
+  LayerGroupContentTreeItem,
+);

package/src/contentTree/nodeContentTreeItem.js

@@ -1,5 +1,7 @@
 import { watch } from 'vue';
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 
 /**
  * A group item which has _no click handler_
@@ -10,7 +12,9 @@ class NodeContentTreeItem extends ContentTreeItem {
   /**
    * @returns {string}
    */
-  static get className() { return 'NodeContentTreeItem'; }
+  static get className() {
+    return 'NodeContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -21,10 +25,14 @@ class NodeContentTreeItem extends ContentTreeItem {
 
     this.clickable = false;
 
-    this._childWatcher = watch(this._children, () => {
-      const children = this._children.value;
-      this.visible = children.some(c => c.visible);
-    }, { deep: true });
+    this._childWatcher = watch(
+      this._children,
+      () => {
+        const children = this._children.value;
+        this.visible = children.some((c) => c.visible);
+      },
+      { deep: true },
+    );
   }
 
   destroy() {
@@ -34,4 +42,7 @@ class NodeContentTreeItem extends ContentTreeItem {
 }
 
 export default NodeContentTreeItem;
-contentTreeClassRegistry.registerClass(NodeContentTreeItem.className, NodeContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  NodeContentTreeItem.className,
+  NodeContentTreeItem,
+);

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -27,7 +27,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
   /**
    * @type {string}
    */
-  static get className() { return 'ObliqueCollectionContentTreeItem'; }
+  static get className() {
+    return 'ObliqueCollectionContentTreeItem';
+  }
 
   /**
    * @param {ObliqueCollectionContentTreeItemOptions} options
@@ -73,7 +75,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -95,36 +99,54 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
 
     if (!this._collection) {
       this.visible = false;
-      this._listeners.push(this._app.obliqueCollections.added.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.obliqueCollections.added.addEventListener(resetCallback),
+      );
     } else {
       const map = this._app.maps.activeMap;
       if (map instanceof ObliqueMap) {
         this.visible = true;
-        this.state = map.collection === this._collection ?
-          StateActionState.ACTIVE :
-          StateActionState.INACTIVE;
-        this._listeners.push(map.collectionChanged.addEventListener(() => {
-          this.state = map.collection === this._collection ?
-            StateActionState.ACTIVE :
-            StateActionState.INACTIVE;
-        }));
+        this.state =
+          map.collection === this._collection
+            ? StateActionState.ACTIVE
+            : StateActionState.INACTIVE;
+        this._listeners.push(
+          map.collectionChanged.addEventListener(() => {
+            this.state =
+              map.collection === this._collection
+                ? StateActionState.ACTIVE
+                : StateActionState.INACTIVE;
+          }),
+        );
       } else {
         this.visible = false;
       }
 
       this.setPropertiesFromObject(this._collection);
-      this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
-        this._setup();
-      }));
-
-      this._listeners.push(this._app.obliqueCollections.removed.addEventListener(resetCallback));
-      this._listeners.push(this._app.obliqueCollections.added.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.maps.mapActivated.addEventListener(() => {
+          this._setup();
+        }),
+      );
+
+      this._listeners.push(
+        this._app.obliqueCollections.removed.addEventListener(resetCallback),
+      );
+      this._listeners.push(
+        this._app.obliqueCollections.added.addEventListener(resetCallback),
+      );
     }
   }
 
   async clicked() {
-    if (this.visible && this._collection && this._app.maps.activeMap instanceof ObliqueMap) {
-      const map = /** @type {import("@vcmap/core").Oblique} */ (this._app.maps.activeMap);
+    if (
+      this.visible &&
+      this._collection &&
+      this._app.maps.activeMap instanceof ObliqueMap
+    ) {
+      const map = /** @type {import("@vcmap/core").Oblique} */ (
+        this._app.maps.activeMap
+      );
       const vp = await map.getViewpoint();
       if (this.state === StateActionState.INACTIVE) {
         this.state = StateActionState.LOADING;
@@ -152,4 +174,7 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default ObliqueCollectionContentTreeItem;
-contentTreeClassRegistry.registerClass(ObliqueCollectionContentTreeItem.className, ObliqueCollectionContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  ObliqueCollectionContentTreeItem.className,
+  ObliqueCollectionContentTreeItem,
+);

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

@@ -33,7 +33,10 @@ export function downloadBlob(blob, fileName) {
  * @param {string} fileName
  */
 export function downloadText(text, fileName) {
-  downloadURI(`data:text/plain;charset=utf-8,${encodeURIComponent(text)}`, fileName);
+  downloadURI(
+    `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`,
+    fileName,
+  );
 }
 
 /**

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,19 +1,9 @@
 <template>
-  <v-card
-    class="mx-auto elevation-0"
-    max-width="400"
-    v-if="position"
-  >
-    <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
+  <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 tile size="16" class="mr-2">
+          <v-icon color="primary"> $vcsInfo </v-icon>
         </v-list-item-avatar>
         <v-list-item-content class="pr-1">
           <v-list-item-title>
@@ -37,9 +27,17 @@
 
     <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,7 +171,7 @@
     display: none;
   }
   .balloon:after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: -12px;
     left: 40px;