@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/src/featureInfo/featureInfo.js

@@ -59,7 +59,7 @@ function getLogger() {
  * @param {string} defaultFillColor
  * @returns {import("ol/style/Style").default|import("@vcmap/core").VectorStyleItem}
  */
-function getHighlightStyle(feature, layer, defaultFillColor) {
+export function getHighlightStyle(feature, layer, defaultFillColor) {
   if (layer && layer.highlightStyle) {
     return layer.highlightStyle;
   }
@@ -175,6 +175,12 @@ function setupFeatureInfoTool(app) {
  */
 export const featureInfoClassRegistry = new ClassRegistry();
 
+/**
+ * Symbol added to features to overwrite the layers predefined feature info
+ * @type {symbol}
+ */
+export const featureInfoViewSymbol = Symbol('featureInfoView');
+
 /**
  * @class FeatureInfo
  * @description Provides registration of featureInfoClasses and stores featureInfoView instances in its collection.
@@ -225,6 +231,11 @@ class FeatureInfo {
      * @private
      */
     this._selectedFeature = null;
+    /**
+     * @type {string|null}
+     * @private
+     */
+    this._selectedFeatureId = null;
     /**
      * @type {Array<function():void>}
      * @private
@@ -293,6 +304,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}
@@ -355,7 +372,9 @@ class FeatureInfo {
     checkMaybe(windowPosition, [Number]);
     checkMaybe(featureInfoView, AbstractFeatureInfoView);
 
-    const usedFeatureInfoView = featureInfoView ?? this._getFeatureInfoViewForFeature(feature);
+    const usedFeatureInfoView = feature[featureInfoViewSymbol] ??
+      featureInfoView ??
+      this._getFeatureInfoViewForFeature(feature);
     const layer = this._app.layers.getByKey(feature[vcsLayerName]);
 
     if (usedFeatureInfoView && layer) {
@@ -396,6 +415,7 @@ class FeatureInfo {
       );
 
       this._selectedFeature = feature;
+      this._selectedFeatureId = feature.getId();
       this._featureChanged.raiseEvent(this._selectedFeature);
     } else {
       this.clear();
@@ -428,6 +448,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

@@ -44,11 +44,16 @@ const messages = {
   components: {
     title: 'Komponenten',
     tooltip: 'Komponenten',
+    close: 'Fenster schließen.',
+    vcsFormSection: {
+      help: 'Hilfe anzeigen.',
+    },
     vcsTable: {
       key: 'Name',
       value: 'Wert',
       searchbarPlaceholder: 'Name, Wert, ...',
       itemsPerPage: 'pro Seite',
+      ofItems: 'von',
       nextPage: 'Nächste Seite',
       formerPage: 'Vorherige Seite',
     },
@@ -69,12 +74,29 @@ const messages = {
     openInNew: 'In neuem Browser Tab öffnen',
     defaultLabelText: 'Text',
   },
+  search: {
+    title: 'Suche',
+    tooltip: 'Suche',
+    select: 'Suchergebnis selektieren',
+    placeholder: 'Suche nach Straße, Adresse, Ort, POI',
+    zoomToFeatureAction: 'Auf Ergebnis zoomen',
+  },
   toolbox: {
     flight: 'Flug',
     miscellaneous: 'Verschiedenes',
   },
   footer: {
     title: 'Fußzeile',
+    attributions: {
+      title: 'Attribution',
+      tooltip: 'Öffne Attribution Fenster',
+    },
+  },
+  notification: {
+    error: 'Fehler',
+    warning: 'Warnung',
+    information: 'Information',
+    success: 'Erfolg',
   },
 };
 

package/src/i18n/en.js

@@ -44,11 +44,16 @@ const messages = {
   components: {
     title: 'Components',
     tooltip: 'Components',
+    close: 'Close window.',
+    vcsFormSection: {
+      help: 'Show help.',
+    },
     vcsTable: {
       key: 'Name',
       value: 'Value',
       searchbarPlaceholder: 'Name, Value, ...',
       itemsPerPage: 'per page',
+      ofItems: 'of',
       nextPage: 'Next page',
       formerPage: 'Former page',
     },
@@ -69,12 +74,29 @@ const messages = {
     openInNew: 'Open in new tab',
     defaultLabelText: 'Text',
   },
+  search: {
+    title: 'Search',
+    tooltip: 'Search',
+    select: 'Select result item',
+    placeholder: 'Search for Street, Address, Landmark, POI',
+    zoomToFeatureAction: 'Zoom to result',
+  },
   toolbox: {
     flight: 'flight',
     miscellaneous: 'miscellaneous',
   },
   footer: {
     title: 'Footer',
+    attributions: {
+      title: 'Attributions',
+      tooltip: 'Open Attributions Window',
+    },
+  },
+  notification: {
+    error: 'Error',
+    warning: 'Warning',
+    information: 'Information',
+    success: 'Success',
   },
 };
 

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); };

package/src/icons/WandIcon.vue

@@ -0,0 +1,63 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_wizard" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g id="wand" transform="translate(1.706 1.705)">
+      <g id="Gruppe_1465" data-name="Gruppe 1465" transform="translate(0 10.491)">
+        <g id="Gruppe_1464" data-name="Gruppe 1464">
+          <path id="Pfad_540" data-name="Pfad 540" d="M1.574,22.1a.476.476,0,0,1-.367-.157L.157,20.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,1.574,22.1Z" transform="translate(0 -20)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1467" data-name="Gruppe 1467" transform="translate(1.049 1.049)">
+        <g id="Gruppe_1466" data-name="Gruppe 1466">
+          <path id="Pfad_541" data-name="Pfad 541" d="M2.525,13.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L12.648,2.157a.519.519,0,1,1,.734.734L2.892,13.382A.476.476,0,0,1,2.525,13.54Z" transform="translate(-2 -2)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1469" data-name="Gruppe 1469" transform="translate(10.491 0)">
+        <g id="Gruppe_1468" data-name="Gruppe 1468">
+          <path id="Pfad_542" data-name="Pfad 542" d="M21.574,2.1a.476.476,0,0,1-.367-.157L20.157.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,21.574,2.1Z" transform="translate(-20 0)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1471" data-name="Gruppe 1471" transform="translate(0 0)">
+        <g id="Gruppe_1470" data-name="Gruppe 1470">
+          <path id="Pfad_543" data-name="Pfad 543" d="M.525,11.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L10.648.157a.507.507,0,0,1,.734,0,.507.507,0,0,1,0,.734L.892,11.382A.476.476,0,0,1,.525,11.54Z" transform="translate(0 0)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1473" data-name="Gruppe 1473" transform="translate(8.393 2.098)">
+        <g id="Gruppe_1472" data-name="Gruppe 1472">
+          <path id="Pfad_544" data-name="Pfad 544" d="M17.574,6.1a.476.476,0,0,1-.367-.157L16.157,4.892a.519.519,0,0,1,.734-.734l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,17.574,6.1Z" transform="translate(-16 -4)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1475" data-name="Gruppe 1475" transform="translate(7.344 7.344)">
+        <g id="Gruppe_1474" data-name="Gruppe 1474">
+          <path id="Pfad_545" data-name="Pfad 545" d="M14.525,16.1A.5.5,0,0,1,14,15.574V14.525a.525.525,0,1,1,1.049,0v1.049A.5.5,0,0,1,14.525,16.1Z" transform="translate(-14 -14)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1477" data-name="Gruppe 1477" transform="translate(7.344)">
+        <g id="Gruppe_1476" data-name="Gruppe 1476">
+          <path id="Pfad_546" data-name="Pfad 546" d="M14.525,2.1A.5.5,0,0,1,14,1.574V.525a.525.525,0,0,1,1.049,0V1.574A.5.5,0,0,1,14.525,2.1Z" transform="translate(-14)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1479" data-name="Gruppe 1479" transform="translate(3.147 4.196)">
+        <g id="Gruppe_1478" data-name="Gruppe 1478">
+          <path id="Pfad_547" data-name="Pfad 547" d="M7.574,9.049H6.525A.525.525,0,0,1,6.525,8H7.574a.525.525,0,0,1,0,1.049Z" transform="translate(-6 -8)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1481" data-name="Gruppe 1481" transform="translate(10.491 4.196)">
+        <g id="Gruppe_1480" data-name="Gruppe 1480">
+          <path id="Pfad_548" data-name="Pfad 548" d="M21.574,9.049H20.525a.525.525,0,0,1,0-1.049h1.049a.525.525,0,1,1,0,1.049Z" transform="translate(-20 -8)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1483" data-name="Gruppe 1483" transform="translate(3.986 0.839)">
+        <g id="Gruppe_1482" data-name="Gruppe 1482">
+          <path id="Pfad_549" data-name="Pfad 549" d="M9.279,3.8a.476.476,0,0,1-.367-.157L7.757,2.492a.519.519,0,0,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.326.326,0,0,1,9.279,3.8Z" transform="translate(-7.6 -1.6)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1485" data-name="Gruppe 1485" transform="translate(9.599 6.452)">
+        <g id="Gruppe_1484" data-name="Gruppe 1484">
+          <path id="Pfad_550" data-name="Pfad 550" d="M19.926,14.451a.476.476,0,0,1-.367-.157l-1.1-1.1a.519.519,0,1,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.567.567,0,0,1,19.926,14.451Z" transform="translate(-18.3 -12.3)" fill="currentColor" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/legend/legendHelper.js

@@ -1,5 +1,5 @@
 import { getShapeFromOptions } from '@vcmap/core';
-import Vue, { reactive } from 'vue';
+import { ref } from 'vue';
 
 /**
  * @enum {string}
@@ -104,6 +104,7 @@ export function getImageSrcFromShape(image) {
 
 /**
  * @typedef {Object} LegendEntry
+ * @property {string} key
  * @property {string} title - layer or entry name
  * @property {Array<LegendItem>} legend - legend properties
  * @property {Array<VcsAction>} actions - popout actions
@@ -111,11 +112,12 @@ export function getImageSrcFromShape(image) {
 
 /**
  * creates a LegendEntry with title, options and optionally popout action to the entries array
+ * @param {string} key - layerName
  * @param {string} title
  * @param {Array<LegendItem>} legend
  * @returns {LegendEntry}
  */
-export function createLayerLegendEntry(title, legend) {
+export function createLayerLegendEntry(key, title, legend) {
   const actions = [];
   legend.forEach((item) => {
     // XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
@@ -128,19 +130,19 @@ export function createLayerLegendEntry(title, legend) {
       });
     }
   });
-  return { title, legend, actions };
+  return { key, title, legend, actions };
 }
 
 /**
  *
  * @param {VcsUiApp} app
- * @returns {{entries: import("vue").Reactive<{string,LegendEntry}>, destroy: (function():void)}}
+ * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: (function():void)}}
  */
 export function getLegendEntries(app) {
   /**
-   * @type {import("vue").Reactive<{string,LegendEntry}>}
+   * @type {import("vue").Ref<Array<LegendEntry>>}>}
    */
-  const entries = reactive({});
+  const entries = ref([]);
   /**
    * @type {Object<string,function():void>}
    */
@@ -150,11 +152,14 @@ export function getLegendEntries(app) {
    * @param {import("@vcmap/core").Layer} layer
    */
   function removeEntryForLayer(layer) {
-    const key = layer.name;
-    Vue.delete(entries, key); // XXX Vue.delete can be removed on Vue3
-    if (styleChangedListener[key]) {
-      styleChangedListener[key]();
-      delete styleChangedListener[key];
+    const layerName = layer.name;
+    const index = entries.value.findIndex(({ key }) => { return key === layerName; });
+    if (index >= 0) {
+      entries.value.splice(index, 1);
+    }
+    if (styleChangedListener[layerName]) {
+      styleChangedListener[layerName]();
+      delete styleChangedListener[layerName];
     }
   }
 
@@ -170,7 +175,8 @@ export function getLegendEntries(app) {
       const title = layer.properties.title || layer.name;
       const legend = layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
-        Vue.set(entries, key, createLayerLegendEntry(title, legend)); // XXX Vue.set can be removed on Vue3
+        const legendEntry = createLayerLegendEntry(key, title, legend);
+        entries.value.push(legendEntry);
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(() => syncLayerLegendEntries(layer));

package/src/legend/styleLegendItem.vue

@@ -92,6 +92,16 @@
 <script>
 
   import { getStringColor } from '@vcmap/core';
+  import {
+    VFlex,
+    VImg,
+    VLayout,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemIcon,
+    VListItemTitle,
+  } from 'vuetify/lib';
   import { StyleRowType, getImageSrcFromShape } from './legendHelper.js';
 
   /**
@@ -100,7 +110,16 @@
    */
   export default {
     name: 'StyleLegendItem',
-    components: { },
+    components: {
+      VList,
+      VLayout,
+      VFlex,
+      VListItem,
+      VListItemIcon,
+      VImg,
+      VListItemContent,
+      VListItemTitle,
+    },
     props: {
       item: {
         type: Object,

package/src/legend/vcsLegend.vue

@@ -50,17 +50,38 @@
 
 <script>
 
+  import {
+    VCard,
+    VExpansionPanels,
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VIcon,
+    VList,
+    VImg,
+  } from 'vuetify/lib';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './styleLegendItem.vue';
   import VcsTreeviewLeaf from '../components/lists/VcsTreeviewLeaf.vue';
 
   /**
    * @description A component rendering configured legend information for active layers.
-   * @vue-prop {import("vue").Reactive<{string,LegendEntry}>} entries - legend entries to be displayed
+   * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
    */
   export default {
     name: 'VcsLegend',
-    components: { VcsTreeviewLeaf, StyleLegendItem },
+    components: {
+      VcsTreeviewLeaf,
+      StyleLegendItem,
+      VCard,
+      VExpansionPanels,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VIcon,
+      VList,
+      VImg,
+    },
     props: {
       entries: {
         type: Object,
@@ -85,8 +106,13 @@
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .v-list-item--dense {
   height: 32px;
 }
+::v-deep {
+  .treeview-label {
+    max-width: 189px;
+  }
+}
 </style>

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -62,6 +62,12 @@
 </style>
 <script>
   import { computed, ref } from 'vue';
+  import {
+    VMenu,
+    VIcon,
+    VToolbar,
+    VToolbarItems,
+  } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
 
@@ -78,7 +84,13 @@
    */
   export default {
     name: 'ToolboxActionGroup',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VMenu,
+      VIcon,
+      VToolbar,
+      VToolbarItems,
+    },
     props: {
       group: {
         type: Object,

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -88,6 +88,12 @@
 </style>
 <script>
   import { ref, computed } from 'vue';
+  import {
+    VMenu,
+    VIcon,
+    VToolbar,
+    VToolbarItems,
+  } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
 
   /**
@@ -98,7 +104,13 @@
    */
   export default {
     name: 'ToolboxActionSelect',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VMenu,
+      VIcon,
+      VToolbar,
+      VToolbarItems,
+    },
     props: {
       group: {
         type: Object,

package/src/manager/toolbox/ToolboxManager.vue

@@ -72,6 +72,7 @@
 <script>
   import { inject, ref, computed, watch, onUnmounted } from 'vue';
   import { ButtonLocation, vcsAppSymbol } from '@vcmap/ui';
+  import { VToolbar, VToolbarItems } from 'vuetify/lib';
   import { getComponentsByOrder, ToolboxType } from './toolboxManager.js';
   import ToolboxActionSelect from './SelectToolboxComponent.vue';
   import ToolboxActionGroup from './GroupToolboxComponent.vue';
@@ -104,6 +105,8 @@
       ToolboxActionSelect,
       ToolboxActionGroup,
       VcsButton,
+      VToolbar,
+      VToolbarItems,
     },
     setup() {
       const app = inject('vcsApp');

package/src/manager/window/WindowComponent.vue

@@ -19,7 +19,7 @@
       }"
       :draggable="isDynamic"
     >
-      <slot name="headerComponent" />
+      <slot name="headerComponent" :props="$attrs" />
     </div>
     <v-divider />
     <div
@@ -40,13 +40,19 @@
 
 <script>
   import {
-    onMounted, onUnmounted, computed, ref, nextTick,
+    onMounted, onUnmounted, computed, ref, nextTick, inject, provide,
   } from 'vue';
   import { fromEvent } from 'rxjs';
   import { switchMap, take, map, tap } from 'rxjs/operators';
+  import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
 
   export default {
+    name: 'WindowComponent',
+    components: {
+      VSheet,
+      VDivider,
+    },
     props: {
       windowState: {
         type: Object,
@@ -127,6 +133,13 @@
           dropSub.unsubscribe();
         }
       });
+
+      const app = inject('vcsApp');
+      const { provides } = app.windowManager.get(windowState.id);
+      Object.entries(provides)
+        .forEach(([key, value]) => {
+          provide(key, value);
+        });
       return {
         isDynamic,
         isDocked,

package/src/manager/window/WindowComponentHeader.vue

@@ -10,25 +10,56 @@
         {{ $t(windowState.headerTitle) }}
       </h3>
     </span>
-    <VcsButton
-      @click.stop="close"
-      small
-      icon="mdi-close-thick"
-    />
+    <div class="d-flex justify-space-between align-center">
+      <template v-if="windowState.headerActions?.length > 0">
+        <VcsActionButtonList
+          :actions="windowState.headerActions"
+          :overflow-count="windowState.headerActionsOverflowCount ?? 3"
+          small
+        />
+        <v-divider
+          vertical
+          inset
+          class="mx-2"
+        />
+      </template>
+      <VcsButton
+        @click.stop="close"
+        small
+        icon="mdi-close-thick"
+        tooltip="components.close"
+      />
+    </div>
   </span>
 </template>
 
-<style>
+<style lang="scss" scoped>
 .window-component-header{
   max-height: 16px;
+
+  .v-divider--vertical.v-divider--inset {
+    margin-top: 2px;
+  }
 }
 </style>
 
 <script>
+  import { VIcon, VDivider } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
 
+  /**
+   * Default window component header with drag functionality close action and further optional window actions.
+   * @vue-prop {WindowState}    windowState - state of the window component.
+   */
   export default {
-    components: { VcsButton },
+    name: 'WindowComponentHeader',
+    components: {
+      VcsActionButtonList,
+      VcsButton,
+      VIcon,
+      VDivider,
+    },
     props: {
       windowState: {
         type: Object,

package/src/manager/window/WindowManager.vue

@@ -23,6 +23,7 @@
         <component
           :is="getHeaderComponent(id)"
           :window-state="getState(id)"
+          v-bind="getProps(id)"
           @close="close(id)"
         />
       </template>