@vcmap/ui 5.0.0-rc.26 → 5.0.0-rc.27

package/src/i18n/de.js

@@ -9,7 +9,7 @@ const messages = {
       tooltip: 'Menü',
     },
     share: {
-      tooltip: 'Den aktuellen Kartenausschnitt teilen.',
+      tooltip: 'Aktuellen Kartenausschnitt teilen',
     },
   },
   content: {
@@ -22,24 +22,24 @@ const messages = {
       title: 'Weitere Informationen',
     },
     viewpointAction: {
-      title: 'Springe zur Ansicht',
+      title: 'Zur Ansicht springen',
     },
     styleAction: {
-      title: 'Öffne Stil Auswahl',
+      title: 'Stilauswahl öffnen',
     },
     layerExtentAction: {
-      name: 'Ebenenausdehnung',
+      name: 'Auf Ebene zoomen',
       title: 'Auf Ebenenausdehnung zoomen',
     },
   },
   navigation: {
-    obliqueLeftTooltip: 'Schrägluftbild nach links drehen',
-    obliqueRightTooltip: 'Schrägluftbild nach rechts drehen',
+    obliqueLeftTooltip: 'Ansicht nach links drehen',
+    obliqueRightTooltip: 'Ansicht nach rechts drehen',
     zoomInTooltip: 'Hineinzoomen',
     zoomOutTooltip: 'Herauszoomen',
     pitchTooltip: 'Kameraneigung: {0}°',
     overviewMapTooltip: 'Übersichtskarte',
-    homeButton: 'Springe zur Startansicht',
+    homeButton: 'Zur Startansicht springen',
   },
   categoryManager: {
     title: 'Mein Arbeitsbereich',
@@ -50,10 +50,10 @@ const messages = {
     empty: 'Es gibt noch keine Einträge.',
   },
   components: {
-    pin: 'Fenster andocken.',
-    close: 'Fenster schließen.',
+    pin: 'Fenster andocken',
+    close: 'Fenster schließen',
     vcsFormSection: {
-      help: 'Hilfe anzeigen.',
+      help: 'Hilfe anzeigen',
     },
     vcsTable: {
       key: 'Name',
@@ -68,6 +68,40 @@ const messages = {
       noDataPlaceholder: 'Keine Daten verfügbar',
       noResultsPlaceholder: 'Keine übereinstimmenden Einträge gefunden',
     },
+    style: {
+      fill: 'Füll Stil',
+      stroke: 'Linien Stil',
+      reset: 'Zurücksetzen',
+      lineWidth: 'Linienbreite',
+      type: 'Typ',
+      points: 'Points',
+      radius: 'Radius',
+      radius2: 'Radius2',
+      angle: 'Winkel',
+      rotation: 'Rotation',
+      scale: 'Skalierung',
+      opacity: 'Deckkraft',
+      image: 'Punkt Stil',
+      icon: 'Icon',
+      presets: 'Vorlagen',
+      shape: 'Form',
+      circle: 'Kreis',
+      square: 'Quadrat',
+      rectangle: 'Rechteck',
+      triangle: 'Dreieck',
+      star: 'Stern',
+      cross: 'Kreuz',
+      x: 'X',
+      custom: 'Benutzerdefiniert',
+      bold: 'Fett',
+      italic: 'Kursiv',
+      text: 'Text',
+      enterText: 'Text hier eingeben',
+      allowedRange: 'Erlaubter Wertebereich',
+      notValid: 'Eingabe nicht gültig',
+      required: 'Eingabe ist erforderlich',
+      offset: 'Versatz',
+    },
   },
   settings: {
     title: 'Einstellungen',
@@ -80,8 +114,8 @@ const messages = {
     },
   },
   featureInfo: {
-    activateToolTitle: 'Informationstool aktivieren',
-    deactivateToolTitle: 'Informationstool deaktivieren',
+    activateToolTitle: 'Informationswerkzeug aktivieren',
+    deactivateToolTitle: 'Informationswerkzeug deaktivieren',
   },
   legend: {
     title: 'Legende',
@@ -93,10 +127,10 @@ const messages = {
   search: {
     title: 'Suche',
     tooltip: 'Suche',
-    select: 'Suchergebnis selektieren',
-    placeholder: 'Suche nach Straße, Adresse, Ort, POI',
+    select: 'Suchergebnis auswählen',
+    placeholder: 'Suche nach Adresse oder Ort/Sehenswürdigkeit',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
-    zoomToAll: 'Zu allen Ergebnissen zoomen',
+    zoomToAll: 'Auf alle Ergebnisse zoomen',
   },
   toolbox: {
     flight: 'Flug',
@@ -105,8 +139,8 @@ const messages = {
   footer: {
     title: 'Fußzeile',
     attributions: {
-      title: 'Attribution',
-      tooltip: 'Öffne Attribution Fenster',
+      title: 'Attributionen',
+      tooltip: 'Öffne Attributionsfenster',
     },
   },
   notification: {

package/src/i18n/en.js

@@ -1,15 +1,15 @@
 const messages = {
   navbar: {
     maps: {
-      CesiumMap: 'Activate 3D map',
-      OpenlayersMap: 'Activate 2D map',
-      ObliqueMap: 'Activate Oblique map',
+      CesiumMap: 'Enable 3D view',
+      OpenlayersMap: 'Enable 2D view',
+      ObliqueMap: 'Enable oblique view',
     },
     menu: {
       tooltip: 'Menu',
     },
     share: {
-      tooltip: 'Share current view of the map.',
+      tooltip: 'Share current view of the map',
     },
   },
   content: {
@@ -19,27 +19,27 @@ const messages = {
       placeholder: 'Search elements',
     },
     infoAction: {
-      title: 'Info',
+      title: 'Further informationen',
     },
     viewpointAction: {
       title: 'Go to viewpoint',
     },
     styleAction: {
-      title: 'Open Style selector',
+      title: 'Open style selector',
     },
     layerExtentAction: {
-      name: 'Layer extent',
-      title: 'Jump to layer extent',
+      name: 'Zoom to extent',
+      title: 'Zoom to layer extent',
     },
   },
   navigation: {
-    obliqueLeftTooltip: 'Rotate view left',
-    obliqueRightTooltip: 'Rotate view right',
+    obliqueLeftTooltip: 'Rotate view to left',
+    obliqueRightTooltip: 'Rotate view to right',
     zoomInTooltip: 'Zoom in',
     zoomOutTooltip: 'Zoom out',
     pitchTooltip: 'Camera pitch: {0}°',
-    overviewMapTooltip: 'Overview Map',
-    homeButton: 'Go to starting view',
+    overviewMapTooltip: 'Show overview map',
+    homeButton: 'Go to home view',
   },
   categoryManager: {
     title: 'My Workspace',
@@ -50,28 +50,62 @@ const messages = {
     empty: 'There are no entries yet.',
   },
   components: {
-    pin: 'Pin window.',
-    close: 'Close window.',
+    pin: 'Dock window',
+    close: 'Close window',
     vcsFormSection: {
-      help: 'Show help.',
+      help: 'Show help',
     },
     vcsTable: {
       key: 'Name',
       value: 'Value',
     },
     vcsDataTable: {
-      searchbarPlaceholder: 'Name, Value, ...',
+      searchbarPlaceholder: 'Name, value, ...',
       itemsPerPage: 'per page',
       ofItems: 'of',
       nextPage: 'Next page',
-      formerPage: 'Former page',
+      formerPage: 'Previous page',
       noDataPlaceholder: 'No data available',
       noResultsPlaceholder: 'No matching records found',
     },
+    style: {
+      fill: 'Fill',
+      stroke: 'Stroke',
+      reset: 'Reset',
+      lineWidth: 'Line width',
+      type: 'Type',
+      points: 'Points',
+      radius: 'Radius',
+      radius2: 'Radius2',
+      angle: 'Angle',
+      rotation: 'Rotation',
+      scale: 'Scale',
+      opacity: 'Opacity',
+      image: 'Point style',
+      icon: 'Icon',
+      shape: 'Shape',
+      presets: 'Presets',
+      circle: 'Circle',
+      square: 'Square',
+      rectangle: 'Rectangle',
+      triangle: 'Triangle',
+      star: 'Star',
+      cross: 'Cross',
+      x: 'X',
+      custom: 'Custom',
+      bold: 'Bold',
+      italic: 'Italic',
+      text: 'Text',
+      enterText: 'Enter text here',
+      allowedRange: 'Allowed value range',
+      notValid: 'Input not valid',
+      required: 'Input is required',
+      offset: 'Offset',
+    },
   },
   settings: {
     title: 'Settings',
-    tooltip: 'Settings',
+    tooltip: 'Configure settings',
     languageSelector: 'Language',
     theme: {
       title: 'Color theme',
@@ -80,8 +114,8 @@ const messages = {
     },
   },
   featureInfo: {
-    activateToolTitle: 'Activate Infotool',
-    deactivateToolTitle: 'Deactivate Infotool',
+    activateToolTitle: 'Enable Info Tool',
+    deactivateToolTitle: 'Disable Info Tool',
   },
   legend: {
     title: 'Legend',
@@ -94,7 +128,7 @@ const messages = {
     title: 'Search',
     tooltip: 'Search',
     select: 'Select result item',
-    placeholder: 'Search for Street, Address, Landmark, POI',
+    placeholder: 'Search for address or landmark/point of interest',
     zoomToFeatureAction: 'Zoom to result',
     zoomToAll: 'Zoom to all',
   },
@@ -106,7 +140,7 @@ const messages = {
     title: 'Footer',
     attributions: {
       title: 'Attributions',
-      tooltip: 'Open Attributions Window',
+      tooltip: 'Open attributions window',
     },
   },
   notification: {

package/src/legend/vcsLegend.vue

@@ -108,13 +108,15 @@
       };
 
       /**
-       * Sets all entry panels open
        * @type {import("vue").ComputedRef<number[]>}
        */
-      const panels = computed(() => {
-        return [...Array(props.entries.length).keys()].filter(
-          (p, idx) => !!props.entries[idx].open,
-        );
+      const panels = computed({
+        get() {
+          return [...Array(props.entries.length).keys()].filter(
+            (p, idx) => !!props.entries[idx].open,
+          );
+        },
+        set() {},
       });
 
       return {

package/src/manager/collectionManager/CollectionComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-expansion-panel @change="active = !active">
+  <v-expansion-panel>
     <v-expansion-panel-header hide-actions class="px-2">
       <template #default="{ open }">
         <div class="d-flex justify-space-between">
@@ -15,7 +15,7 @@
     </v-expansion-panel-header>
     <v-expansion-panel-content class="pb-1">
       <vcs-list
-        :items="items.slice(0, 10)"
+        :items="items.slice(0, limit)"
         :draggable="draggable"
         :selectable="selectable"
         :single-select="singleSelect"
@@ -23,7 +23,7 @@
         :show-title="false"
         @item-moved="move"
       />
-      <v-sheet v-if="items.length > 10" class="ma-2 pl-2">
+      <v-sheet v-if="items.length > limit" class="ma-2 pl-2">
         <VcsButton @click="openCollectionComponentList">
           {{ $t('collectionManager.more') }}
         </VcsButton>
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import { inject, ref } from 'vue';
+  import { inject } from 'vue';
   import {
     VIcon,
     VExpansionPanel,
@@ -44,13 +44,14 @@
     VExpansionPanelContent,
     VSheet,
   } from 'vuetify/lib';
-  import { IndexedCollection } from '@vcmap/core';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
   import { WindowSlot } from '../window/windowManager.js';
-  import CollectionComponentList from './CollectionComponentList.vue';
+  import CollectionComponentList, {
+    moveItem,
+  } from './CollectionComponentList.vue';
 
   /**
    * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
@@ -76,7 +77,6 @@
        */
       const collectionComponent = inject('collectionComponent');
       const windowId = `${collectionComponent.id}-list`;
-      const active = ref(false);
 
       return {
         title: collectionComponent.title,
@@ -85,19 +85,11 @@
         draggable: collectionComponent.draggable,
         selectable: collectionComponent.selectable,
         singleSelect: collectionComponent.singleSelect,
+        limit: collectionComponent.limit,
         actions: collectionComponent.getActions(),
         move({ item, targetIndex }) {
-          if (collectionComponent.collection instanceof IndexedCollection) {
-            const collectionItem = collectionComponent.collection.getByKey(
-              item.name,
-            );
-            collectionComponent.collection.moveTo(
-              collectionItem,
-              targetIndex, // collectionItemOffset.value for paginated lists?
-            );
-          }
+          moveItem(collectionComponent, item, targetIndex);
         },
-        active,
         openCollectionComponentList() {
           if (app.windowManager.has(windowId)) {
             setTimeout(() => {

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -15,6 +15,27 @@
   import { IndexedCollection } from '@vcmap/core';
   import VcsList from '../../components/lists/VcsList.vue';
 
+  /**
+   * Moves an item to a new position.
+   * New position is derived from a target item in the collection.
+   * This ensures correct movement, if rendered list is only a subset of the collection.
+   * @param {CollectionComponent} collectionComponent
+   * @param {VcsListItem} item
+   * @param {number} targetIndex
+   */
+  export function moveItem(collectionComponent, item, targetIndex) {
+    const { collection } = collectionComponent;
+    if (collection instanceof IndexedCollection) {
+      const collectionItem = collection.getByKey(item.name);
+      const keyProperty = collection.uniqueKey;
+      const targetItem = collectionComponent.items.value[targetIndex];
+      const targetIndexCol = [...collection].findIndex(
+        (i) => i[keyProperty] === targetItem[keyProperty],
+      );
+      collection.moveTo(collectionItem, targetIndexCol);
+    }
+  }
+
   /**
    * Renders the items of a CollectionComponent in a List.
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
@@ -44,15 +65,7 @@
         selectable: collectionComponent.selectable,
         singleSelect: collectionComponent.singleSelect,
         move({ item, targetIndex }) {
-          if (collectionComponent.collection instanceof IndexedCollection) {
-            const collectionItem = collectionComponent.collection.getByKey(
-              item.id,
-            );
-            collectionComponent.collection.moveTo(
-              collectionItem,
-              targetIndex, // collectionItemOffset.value for paginated lists?
-            );
-          }
+          moveItem(collectionComponent, item, targetIndex);
         },
       };
     },

package/src/manager/collectionManager/CollectionManager.vue

@@ -4,6 +4,7 @@
       accordion
       multiple
       v-if="componentIds.length > 0"
+      v-model="panels"
       class="rounded-0"
     >
       <collection-component-provider
@@ -16,7 +17,7 @@
 </template>
 
 <script>
-  import { inject, ref } from 'vue';
+  import { computed, inject, ref } from 'vue';
   import { VExpansionPanels, VContainer } from 'vuetify/lib';
   import CollectionComponentProvider from './CollectionComponentProvider.vue';
 
@@ -35,8 +36,26 @@
       const collectionManager = inject('collectionManager');
       const componentIds = ref(collectionManager.componentIds);
 
+      /**
+       * @type {WritableComputedRef<number[]>}
+       */
+      const panels = computed({
+        get() {
+          return [...Array(componentIds.value.length).keys()].filter(
+            (p, idx) =>
+              !!collectionManager.get(componentIds.value[idx]).open.value,
+          );
+        },
+        set(value) {
+          componentIds.value.forEach((id, idx) => {
+            collectionManager.get(id).open.value = value.includes(idx);
+          });
+        },
+      });
+
       return {
         componentIds,
+        panels,
       };
     },
   };

package/src/manager/collectionManager/collectionComponent.js

@@ -2,6 +2,7 @@ import { IndexedCollection, isOverrideCollection } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { v4 as uuidv4 } from 'uuid';
 import { computed, ref } from 'vue';
+import { parseNumber } from '@vcsuite/parsers';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
 import { sortByWeight } from '../buttonManager.js';
 
@@ -12,6 +13,7 @@ import { sortByWeight } from '../buttonManager.js';
  * @property {boolean} [draggable] - only supported for IndexedCollections
  * @property {boolean} [selectable]
  * @property {boolean} [singleSelect]
+ * @property {number} [limit=10] - limit number of items in rendered list (more items are rendered in extra window)
  */
 
 /**
@@ -53,6 +55,15 @@ class CollectionComponent {
      * @type {import("vue").Ref<string>}
      */
     this.title = ref(options.title);
+    /**
+     * @type {import("vue").Ref<boolean>}
+     */
+    this.open = ref(false);
+    /**
+     *
+     * @type {import("vue").Ref<number>}
+     */
+    this.limit = ref(parseNumber(options.limit, 10));
     /**
      * @type {import("vue").Ref<boolean>}
      * @private

package/src/manager/window/WindowComponent.vue

@@ -91,7 +91,8 @@
       const isDockedLeft = computed(() => {
         return (
           props.slotWindow === WindowSlot.STATIC ||
-          props.slotWindow === WindowSlot.DYNAMIC_LEFT
+          props.slotWindow === WindowSlot.DYNAMIC_LEFT ||
+          props.slotWindow === WindowSlot.DYNAMIC_CHILD
         );
       });
       const isDockedRight = computed(

package/src/manager/window/WindowManager.vue

@@ -60,7 +60,7 @@
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
   import {
-    applyPositionOnTarget,
+    getPositionAppliedOnTarget,
     getTargetSize,
     moveWindow,
   } from './windowHelper.js';
@@ -98,6 +98,23 @@
       const isOnTop = (id) => {
         return windowManager.get(id)?.zIndex.value === componentIds.length - 1;
       };
+      /**
+       * @param {WindowComponent} windowComponent
+       * @returns {WindowPosition|null}
+       */
+      const getPosition = (windowComponent) => {
+        if (!windowComponent) {
+          return null;
+        }
+        const parentComponent =
+          !windowComponent?.state?.dockable &&
+          windowManager.get(windowComponent.parentId);
+        return getPositionAppliedOnTarget(
+          windowComponent?.position,
+          targetSize.value,
+          getPosition(parentComponent),
+        );
+      };
       /**
        * @param {string} id
        * @returns {import("vue").ComputedRef<Object>}
@@ -105,15 +122,10 @@
       const getStyles = (id) =>
         computed(() => {
           const windowComponent = windowManager.get(id);
-          const state = windowComponent?.state;
-          const position = applyPositionOnTarget(
-            windowComponent?.position,
-            targetSize.value,
-          );
           return {
             zIndex: windowComponent.zIndex.value,
-            ...position,
-            ...(state.styles || {}),
+            ...getPosition(windowComponent),
+            ...(windowComponent?.state?.styles || {}),
           };
         });
       /**
@@ -129,7 +141,9 @@
        * @param {{dx: number, dy: number}} translation
        */
       const move = (id, translation) => {
-        moveWindow(id, translation, windowManager, targetSize.value);
+        const windowComponent = windowManager.get(id);
+        const position = getPosition(windowComponent);
+        moveWindow(id, translation, windowManager, targetSize.value, position);
       };
 
       const componentIdRef = ref(componentIds);

package/src/manager/window/windowHelper.js

@@ -263,13 +263,23 @@ export function updateWindowPosition(previous, update, targetSize) {
  * @param {{dx: number, dy: number}} translation - translation in px
  * @param {WindowManager} windowManager
  * @param {DOMRect} targetSize - the map's target size
+ * @param {WindowPosition|null} windowPosition - Optional position to be preferred over windowComponent's position as start.
  */
-export function moveWindow(id, translation, windowManager, targetSize) {
+export function moveWindow(
+  id,
+  translation,
+  windowManager,
+  targetSize,
+  windowPosition = null,
+) {
   const { position, slot } = windowManager.get(id);
   if (slot.value === WindowSlot.STATIC) {
     return;
   }
-  const windowPositionOptions = optionsFromWindowPosition(position, targetSize);
+  const windowPositionOptions = optionsFromWindowPosition(
+    windowPosition || position,
+    targetSize,
+  );
   if (windowPositionOptions.top !== undefined) {
     windowPositionOptions.top += translation.dy;
   }
@@ -373,16 +383,78 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
 }
 
 /**
- * Applies the position on the target clipping the position to the target's size.
+ * Derives a child window position from a parent window, placing the child top-right of the parent.
+ * @param {WindowPositionOptions} windowPositionOptions - numerical WindowPositionOptions
+ * @param {DOMRect} targetSize - the map's target size
+ * @param {WindowPositionOptions} parentPosition - numerical WindowPositionOptions
+ */
+export function applyParentPosition(
+  windowPositionOptions,
+  targetSize,
+  parentPosition,
+) {
+  const {
+    left,
+    right,
+    top,
+    bottom,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+  } = optionsFromWindowPosition(parentPosition, targetSize);
+  let parentWidth = width;
+  if (minWidth !== undefined && minWidth > width) {
+    parentWidth = minWidth;
+  }
+  if (maxWidth !== undefined && maxWidth < width) {
+    parentWidth = maxWidth;
+  }
+  if (parentWidth === undefined) {
+    parentWidth = targetSize.width - right - left;
+  }
+  let parentLeft = left;
+  if (parentLeft === undefined) {
+    parentLeft = targetSize.width - right - parentWidth;
+  }
+  let parentTop = top;
+  if (parentTop === undefined) {
+    let parentHeight = height;
+    if (minHeight !== undefined && minHeight > height) {
+      parentHeight = minHeight;
+    }
+    if (maxHeight !== undefined && maxHeight < height) {
+      parentHeight = maxHeight;
+    }
+    parentTop = targetSize.height - bottom - parentHeight;
+  }
+  windowPositionOptions.left = parentLeft + parentWidth + 2;
+  windowPositionOptions.top = parentTop;
+}
+
+/**
+ * Returns the position applied on the target by clipping the position to the target's size.
+ * Maintains units of the input position.
+ * If parent position is provided, returned position is placed top-right of its parent
  * @param {WindowPosition} position
  * @param {DOMRect} targetSize
+ * @param {WindowPosition|null} parentPosition
  * @returns {WindowPosition}
  */
-export function applyPositionOnTarget(position, targetSize) {
+export function getPositionAppliedOnTarget(
+  position,
+  targetSize,
+  parentPosition,
+) {
   if (!targetSize) {
     return position;
   }
   const windowPositionOptions = optionsFromWindowPosition(position, targetSize);
+  if (parentPosition) {
+    applyParentPosition(windowPositionOptions, targetSize, parentPosition);
+  }
   const clippedPosition = clipToTargetSize(windowPositionOptions, targetSize);
   const updatedPosition = updateWindowPosition(
     position,