@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.17

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -3,21 +3,22 @@
     class="d-flex flex-row align-center"
     v-if="item"
   >
-    <span v-if="item.icon" class="d-flex align-center">
-      <v-icon
-        v-if="iconType === iconTypes.string"
-        v-text="item.icon"
-        :size="16"
-        class="mr-1"
-      />
-      <span ref="imgContainer" />
-    </span>
-
     <div
-      class="position-relative col-8 pa-0 d-flex align-center treeview-label"
+      class="position-relative col-8 pa-0 d-flex align-center vcs-treeview-leaf"
       :title="$t(item.tooltip || item.title)"
     >
-      <span>{{ $t(item.title) }}</span>
+      <span
+        v-if="item.icon"
+      >
+        <v-icon
+          v-if="isStringIcon"
+          v-text="item.icon"
+          :size="16"
+          class="mr-1"
+        />
+        <ImageElementInjector :element="item.icon" v-else />
+      </span>
+      <span class="vcs-treeview-item-title">{{ $t(item.title) }}</span>
     </div>
     <VcsActionButtonList
       v-if="item.actions.length > 0"
@@ -31,7 +32,7 @@
   </div>
 </template>
 <style lang="css" scoped>
-.treeview-label span{
+.vcs-treeview-leaf .vcs-treeview-item-title{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -39,22 +40,10 @@
 </style>
 
 <script>
-  import
-  {
-    computed,
-    onMounted,
-    ref,
-  } from 'vue';
-
+  import { computed } from 'vue';
   import { VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-
-
-  const iconTypes = {
-    image: 'HTMLImageElement',
-    canvas: 'HTMLCanvasElement',
-    string: 'StringIcon',
-  };
+  import ImageElementInjector from '../imageElementInjector.vue';
 
   /**
    * @description
@@ -66,6 +55,7 @@
     components: {
       VcsActionButtonList,
       VIcon,
+      ImageElementInjector,
     },
     props: {
       item: {
@@ -74,32 +64,10 @@
       },
     },
     setup(props) {
-      const iconType = ref();
-      const imgContainer = ref();
-
       const leaf = computed(() => props.item?.children?.length === 0);
 
-      onMounted(() => { // TODO make icon reactive
-        const { icon } = props.item;
-        if (icon) {
-          if (icon instanceof HTMLImageElement) {
-            imgContainer.value.appendChild(icon);
-            iconType.value = iconTypes.image;
-          }
-          if (icon instanceof HTMLCanvasElement) {
-            imgContainer.value.appendChild(icon);
-            iconType.value = iconTypes.canvas;
-          }
-          if (typeof icon === 'string') {
-            iconType.value = iconTypes.string;
-          }
-        }
-      });
-
       return {
-        iconTypes,
-        iconType,
-        imgContainer,
+        isStringIcon: computed(() => typeof props.item.icon === 'string'),
         leaf,
       };
     },

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -17,7 +17,7 @@
         class="searchbar outlined rounded-xl align-center d-flex justify-center white pa-1 pl-6"
         :placeholder="$t(placeholder)"
         :value="value"
-        @input="$event => handleInput($event)"
+        v-on="$listeners"
         clearable
       />
     </slot>
@@ -104,13 +104,8 @@
 
 
 <script>
-  import { onMounted, onUnmounted } from 'vue';
-
-  import { Subject } from 'rxjs';
-  import { debounceTime } from 'rxjs/operators';
   import { VIcon, VTextField } from 'vuetify/lib';
 
-
   /**
    * @description Stylized wrapper around vuetify divider
    * @vue-prop {number} height - Height of the component.
@@ -140,22 +135,5 @@
         default: false,
       },
     },
-    setup(props, context) {
-      const sub = new Subject();
-      onMounted(() => {
-        sub.pipe(debounceTime(330)).subscribe(
-          (value) => {
-            context.emit('input', value);
-          },
-        );
-      });
-      onUnmounted(() => sub.unsubscribe());
-
-      return {
-        handleInput: (val) => {
-          sub.next(val);
-        },
-      };
-    },
   };
 </script>

package/src/components/tables/VcsTable.vue

@@ -90,7 +90,16 @@
 <script>
   import { getCurrentInstance, ref, computed } from 'vue';
   import {
-    VContainer, VDataTable, VList, VListItem, VListItemTitle, VMenu, VRow,
+    VCard,
+    VDivider,
+    VContainer,
+    VDataTable,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VMenu,
+    VIcon,
+    VRow,
   } from 'vuetify/lib';
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
@@ -140,10 +149,13 @@
     components: {
       VcsButton,
       VcsTreeviewSearchbar,
+      VCard,
       VDataTable,
       VContainer,
+      VDivider,
       VRow,
       VMenu,
+      VIcon,
       VList,
       VListItem,
       VListItemTitle,

package/src/contentTree/LayerTree.vue

@@ -3,7 +3,7 @@
     v-if="tree && tree.length"
     :items="tree"
     :open.sync="open"
-    :has-searchbar="true"
+    :show-searchbar="true"
     :searchbar-placeholder="'content.search.placeholder'"
     item-children="visibleChildren"
   />

package/src/contentTree/contentTreeCollection.js

@@ -198,6 +198,15 @@ class ContentTreeCollection extends IndexedCollection {
     this._subTreeListeners = subTrees.map(subTree => this._createSubtreeActionButton(subTree));
   }
 
+  /**
+   * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
+   * @type {import("vue").Ref<Map<string, TreeViewItem>>}
+   * @readonly
+   */
+  get subTreeViewItems() {
+    return this._subTreeViewItems;
+  }
+
   /**
    * All ids of the currently managed subtrees. Ids are not persisted and will change if
    * the trees get recalculated. The first ID is always the default tree. Other ids are subtree ids.

package/src/contentTree/contentTreeItem.js

@@ -7,30 +7,30 @@ import { createStateRefAction, StateActionState } from '../actions/stateRefActio
 
 /**
  * @typedef {Object} ContentTreeItemOptions
- * @property {string} name
+ * @property {string} name - name of the item defining the structure within the tree using dot notation.
  * @property {string} [title] - may be unset, if set from object properties later on. required otherwise
  * @property {string} [tooltip] - may be unset or set from object properties later on.
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display
- * @property {number} [weight]
- * @property {string} [infoUrl]
- * @property {boolean} [initOpen=false]
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display.
+ * @property {number} [weight] - optional weighting of the item. higher weights come first.
+ * @property {string} [infoUrl] - optional info url providing link with additional information.
+ * @property {boolean} [initOpen=false] - groups being initially open or not.
  */
 
 /**
  * A readonly rendering interface of a ContentTreeItem.
  * @typedef {Object} TreeViewItem
  * @property {string} name
- * @property {boolean} visible
- * @property {boolean} clickable
- * @property {boolean} disabled
- * @property {StateActionState} state
- * @property {string} title
+ * @property {boolean} visible - Whether to display this item or not.
+ * @property {boolean} clickable - Whether this item reacts to click events, e.g. with visual feedback
+ * @property {boolean} disabled - Whether this item should be displayed as disabled.
+ * @property {StateActionState} state - The state of this item. NONE if this item cannot have a state.
+ * @property {string} title - The title to be displayed
  * @property {string} [tooltip]
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
  * @property {Array<VcsAction>} actions
  * @property {Array<TreeViewItem>} children
  * @property {Array<TreeViewItem>} visibleChildren - computed property
- * @property {function():Promise<void>} clicked
+ * @property {function(PointerEvent):Promise<void>} clicked - A callback called once the item is clicked.
  */
 
 /**
@@ -376,7 +376,7 @@ class ContentTreeItem {
    * GoToExtent: 8
    * The default weight is set to always push new actions past these.
    * @param {VcsAction} action
-   * @param {number} [weight=0]
+   * @param {number} [weight=11]
    */
   addAction(action, weight = 11) {
     check(action.name, String);

package/src/contentTree/layerContentTreeItem.js

@@ -127,7 +127,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
             layerName: this._layerName,
           }),
         },
-        this._app.windowManager,
+        this._app,
         vcsAppSymbol,
       );
       this.addAction(action, 4);

package/src/contentTree/subContentTreeItem.js

@@ -6,7 +6,7 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 export const subTreeSymbol = Symbol('SubTree');
 
 /**
- * A sub tree item. Subtrees are rendered in their own (not the main content tree).
+ * 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

package/src/contentTree/vcsObjectContentTreeItem.js

@@ -9,7 +9,7 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 
 /**
  * An abstract class for VcsObject based items.
- * It handle the overriding/setting of its own values based on
+ * It handles the overriding/setting of its own values based on
  * the VcsObjects properties bag.
  * @class
  * @template {VcsObjectContentTreeItemProperties} T

package/src/featureInfo/BalloonComponent.vue

@@ -17,16 +17,17 @@
         </v-list-item-avatar>
         <v-list-item-content class="py-2 pr-1 align-self-start">
           <v-list-item-title class="text-h6">
-            {{ $t(title) }}
+            {{ $t(balloonTitle) }}
           </v-list-item-title>
-          <v-list-item-subtitle v-if="subtitle">
-            {{ $t(subtitle) }}
+          <v-list-item-subtitle v-if="balloonSubtitle">
+            {{ $t(balloonSubtitle) }}
           </v-list-item-subtitle>
         </v-list-item-content>
         <VcsButton
           @click.stop="close"
           small
           icon="mdi-close-thick"
+          tooltip="components.close"
         />
       </v-list-item>
     </slot>
@@ -58,7 +59,8 @@
     VList,
     VListItem,
     VListItemAvatar,
-    VListItemContent, VListItemSubtitle,
+    VListItemContent,
+    VListItemSubtitle,
     VListItemTitle,
   } from 'vuetify/lib';
   import { setupBalloonPositionListener } from './balloonHelper.js';
@@ -68,8 +70,8 @@
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
    * Scrollable, if more than 6 attributes are provided.
    * @vue-prop {string} featureId - feature's id
-   * @vue-prop {string} title - balloon title
-   * @vue-prop {string} subtitle - balloon subtitle
+   * @vue-prop {string} balloonTitle - balloon title
+   * @vue-prop {string} balloonSubtitle - balloon subtitle
    * @vue-prop {Object} attributes - feature's attributes
    * @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`
@@ -94,11 +96,11 @@
         type: String,
         required: true,
       },
-      title: {
+      balloonTitle: {
         type: String,
         required: true,
       },
-      subtitle: {
+      balloonSubtitle: {
         type: String,
         required: true,
       },
@@ -148,6 +150,9 @@
 </script>
 
 <style lang="scss">
+  .balloon {
+    z-index: 0 !important;
+  }
   .balloon hr:first-child {
     display: none;
   }

package/src/featureInfo/balloonFeatureInfoView.js

@@ -4,9 +4,8 @@ import { Cartographic, Entity, Math as CesiumMath } from '@vcmap/cesium';
 import { Projection } from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
-import { getWindowPositionOptions, WindowAlignment, WindowSlot } from '../manager/window/windowManager.js';
+import { WindowSlot } from '../manager/window/windowManager.js';
 import BalloonComponent from './BalloonComponent.vue';
-import { balloonOffset } from './balloonHelper.js';
 
 /**
  * derive value from attributes
@@ -26,14 +25,14 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
 
 /**
  * @typedef {FeatureInfoViewOptions} BalloonFeatureInfoViewOptions
- * @property {string} [title] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
- * @property {string} [subtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonTitle] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonSubtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
  */
 
 /**
  * @typedef {FeatureInfoProps} BalloonFeatureInfoViewProps
- * @property {string} title
- * @property {string} subtitle
+ * @property {string} balloonTitle
+ * @property {string} balloonSubtitle
  * @property {import("ol/coordinate").Coordinate} position
  */
 
@@ -87,12 +86,12 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @type {string}
      */
-    this.title = options.title;
+    this.balloonTitle = options.balloonTitle;
 
     /**
      * @type {string}
      */
-    this.subtitle = options.subtitle;
+    this.balloonSubtitle = options.balloonSubtitle;
   }
 
   /**
@@ -105,11 +104,11 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     return {
       ...properties,
       position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
-      title: this.title != null ?
-        extractNestedKey(this.title, properties.attributes, this.title) :
+      balloonTitle: this.balloonTitle != null ?
+        extractNestedKey(this.balloonTitle, properties.attributes, this.balloonTitle) :
         properties.layerProperties.title,
-      subtitle: this.subtitle != null ?
-        extractNestedKey(this.subtitle, properties.attributes, this.subtitle) :
+      balloonSubtitle: this.balloonSubtitle != null ?
+        extractNestedKey(this.balloonSubtitle, properties.attributes, this.balloonSubtitle) :
         properties.featureId,
     };
   }
@@ -124,12 +123,7 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     options.state.hideHeader = true;
     options.state.classes = ['balloon'];
     options.slot = WindowSlot.DETACHED;
-    options.position = getWindowPositionOptions(
-      (featureInfo.windowPosition?.[0] ?? 0) - balloonOffset.x, // if we do not have a windowPosition, let the next render handle it
-      (featureInfo.windowPosition?.[1] ?? 0) - balloonOffset.y,
-      null,
-      WindowAlignment.BOTTOM_LEFT,
-    );
+    // windowPosition is handled by next render
     return options;
   }
 
@@ -138,11 +132,11 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
    */
   toJSON() {
     const config = super.toJSON();
-    if (this.title) {
-      config.title = this.title;
+    if (this.balloonTitle) {
+      config.balloonTitle = this.balloonTitle;
     }
-    if (this.subtitle) {
-      config.subtitle = this.subtitle;
+    if (this.balloonSubtitle) {
+      config.balloonSubtitle = this.balloonSubtitle;
     }
     return config;
   }

package/src/featureInfo/balloonHelper.js

@@ -4,7 +4,7 @@ import { unByKey } from 'ol/Observable.js';
 import {
   getWindowPositionOptionsFromMapEvent,
   WindowAlignment,
-} from '../manager/window/windowManager.js';
+} from '../manager/window/windowHelper.js';
 
 /**
  * balloon offset from location or click position in pixel
@@ -63,8 +63,9 @@ export async function getBalloonPosition(app, position) {
  * @param {WindowManager} windowManager
  * @param {string} id - windowId of balloon
  * @param {import("@vcmap/cesium").Cartesian2|undefined} windowPosition
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  */
-export function setBalloonPosition(windowManager, id, windowPosition) {
+export function setBalloonPosition(windowManager, id, windowPosition, target) {
   if (!windowPosition) {
     return;
   }
@@ -72,6 +73,7 @@ export function setBalloonPosition(windowManager, id, windowPosition) {
     id,
     getWindowPositionOptionsFromMapEvent(
       new Cartesian2(windowPosition.x - balloonOffset.x, windowPosition.y - balloonOffset.y),
+      target,
       WindowAlignment.BOTTOM_LEFT,
     ),
   );
@@ -99,13 +101,27 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
 
     const map = app.maps.activeMap;
     if (map instanceof CesiumMap) {
+      if (!position[2]) {
+        const [position3D] = await map.getHeightFromTerrain([position]);
+        position[2] = position3D[2];
+      }
       const wgs84Position = Projection.mercatorToWgs84(position);
       const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
       listeners.push(map.getScene().postRender.addEventListener((scene) => {
-        setBalloonPosition(app.windowManager, windowId, getBalloonPositionCesium(scene, cartesian));
+        setBalloonPosition(
+          app.windowManager,
+          windowId,
+          getBalloonPositionCesium(scene, cartesian),
+          app.maps.target,
+        );
       }));
     } else if (map instanceof OpenlayersMap) {
-      const handler = () => setBalloonPosition(app.windowManager, windowId, getBalloonPositionOL(map.olMap, position));
+      const handler = () => setBalloonPosition(
+        app.windowManager,
+        windowId,
+        getBalloonPositionOL(map.olMap, position),
+        app.maps.target,
+      );
       const key = map.olMap.on(
         'postrender',
         handler,
@@ -117,7 +133,12 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
         position,
       );
       listeners.push(map.imageChanged.addEventListener(setup.bind(null, app, windowId, position)));
-      const handler = () => setBalloonPosition(app.windowManager, windowId, getBalloonPositionOL(map.olMap, coords));
+      const handler = () => setBalloonPosition(
+        app.windowManager,
+        windowId,
+        getBalloonPositionOL(map.olMap, coords),
+        app.maps.target,
+      );
       const key = map.olMap.on(
         'postrender',
         handler,

package/src/featureInfo/featureInfo.js

@@ -25,7 +25,6 @@ import {
 } from '@vcmap/cesium';
 import { Feature } from 'ol';
 import { check, checkMaybe } from '@vcsuite/check';
-import { v4 as uuidv4 } from 'uuid';
 
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
@@ -231,6 +230,11 @@ class FeatureInfo {
      * @private
      */
     this._selectedFeature = null;
+    /**
+     * @type {string|null}
+     * @private
+     */
+    this._selectedFeatureId = null;
     /**
      * @type {Array<function():void>}
      * @private
@@ -299,6 +303,12 @@ class FeatureInfo {
    */
   get selectedFeature() { return this._selectedFeature; }
 
+  /**
+   * @type {null|string}
+   * @readonly
+   */
+  get selectedFeatureId() { return this._selectedFeatureId; }
+
   /**
    * The window id of the current features FeatureInfoView window
    * @type {string|null}
@@ -391,7 +401,7 @@ class FeatureInfo {
         });
         this._clearHighlightingCb = () => layer.featureVisibility.unHighlight([featureId]);
       }
-      this._windowId = uuidv4(); // we need to create a uuid, otherwise the window manager gets confused if we recreate a window in the same thread with the same id
+      this._windowId = usedFeatureInfoView.className; // use className for a type based position caching
       this._app.windowManager.add(
         {
           id: this._windowId,
@@ -404,6 +414,7 @@ class FeatureInfo {
       );
 
       this._selectedFeature = feature;
+      this._selectedFeatureId = feature.getId();
       this._featureChanged.raiseEvent(this._selectedFeature);
     } else {
       this.clear();
@@ -436,6 +447,7 @@ class FeatureInfo {
     this._clearInternal();
     if (this._selectedFeature) {
       this._selectedFeature = null;
+      this._selectedFeatureId = null;
       this._featureChanged.raiseEvent(this._selectedFeature);
     }
   }

package/src/featureInfo/featureInfoInteraction.js

@@ -24,7 +24,7 @@ class FeatureInfoInteraction extends AbstractInteraction {
    */
   async pipe(event) {
     if (event.feature) {
-      if (!this._featureInfo.selectedFeature || event.feature.getId() !== this._featureInfo.selectedFeature.getId()) {
+      if (!this._featureInfo.selectedFeature || event.feature.getId() !== this._featureInfo.selectedFeatureId) {
         event.stopPropagation = true;
         await this._featureInfo.selectFeature(
           event.feature,

package/src/i18n/de.js

@@ -41,9 +41,15 @@ const messages = {
     pitchTooltip: 'Kamera pitch: {0}°',
     overviewMapTooltip: 'Übersichtskarte',
   },
-  components: {
+  categoryManager: {
     title: 'Komponenten',
     tooltip: 'Komponenten',
+    more: 'Weitere anzeigen...',
+    empty: 'Es gibt noch keine Einträge.',
+  },
+  components: {
+    pin: 'Fenster andocken.',
+    close: 'Fenster schließen.',
     vcsFormSection: {
       help: 'Hilfe anzeigen.',
     },
@@ -91,6 +97,12 @@ const messages = {
       tooltip: 'Öffne Attribution Fenster',
     },
   },
+  notification: {
+    error: 'Fehler',
+    warning: 'Warnung',
+    information: 'Information',
+    success: 'Erfolg',
+  },
 };
 
 export default messages;

package/src/i18n/en.js

@@ -41,9 +41,15 @@ const messages = {
     pitchTooltip: 'Camera pitch: {0}°',
     overviewMapTooltip: 'Overview Map',
   },
-  components: {
+  categoryManager: {
     title: 'Components',
     tooltip: 'Components',
+    more: 'Show more...',
+    empty: 'There are no entries yet.',
+  },
+  components: {
+    pin: 'Pin window.',
+    close: 'Close window.',
     vcsFormSection: {
       help: 'Show help.',
     },
@@ -91,6 +97,12 @@ const messages = {
       tooltip: 'Open Attributions Window',
     },
   },
+  notification: {
+    error: 'Error',
+    warning: 'Warning',
+    information: 'Information',
+    success: 'Success',
+  },
 };
 
 export default messages;

package/src/icons/+all.js

@@ -100,6 +100,7 @@ import Viewshed360Icon from './Viewshed360Icon.vue';
 import ViewshedConeIcon from './ViewshedConeIcon.vue';
 import WalkingIcon from './WalkingIcon.vue';
 import WallIcon from './WallIcon.vue';
+import WandIcon from './WandIcon.vue';
 
 // * // IconMap.boundingBox
 // * <v-icon size="16" v-text="'$vcsBoundingBox'" />
@@ -431,6 +432,9 @@ const IconMap = {
   walking: {
     component: WalkingIcon,
   },
+  wand: {
+    component: WandIcon,
+  },
 };
 
 const nameCapitalized = (name) => { return name.charAt(0).toUpperCase() + name.slice(1); };