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

package/src/manager/categoryManager/CategoryManager.vue

@@ -1,17 +1,26 @@
 <template>
-  <div
-    v-if="categories.length > 0"
-  >
-    <category-component
-      v-for="category in categories"
-      :category="category"
-      :key="category.categoryName"
-    />
-  </div>
+  <v-sheet>
+    <v-expansion-panels
+      accordion
+      multiple
+      v-if="categories.length > 0"
+      class="rounded-0"
+    >
+      <category-component
+        v-for="category in categories"
+        :category="category"
+        :key="category.categoryName"
+      />
+    </v-expansion-panels>
+  </v-sheet>
 </template>
 
 <script>
   import { inject, ref, computed } from 'vue';
+  import {
+    VExpansionPanels,
+    VSheet,
+  } from 'vuetify/lib';
   import CategoryComponent from './CategoryComponent.vue';
 
   /**
@@ -21,7 +30,11 @@
    */
   export default {
     name: 'CategoryManager',
-    components: { CategoryComponent },
+    components: {
+      VExpansionPanels,
+      VSheet,
+      CategoryComponent,
+    },
     setup() {
       const app = inject('vcsApp');
       const categoryIds = ref(app.categoryManager.componentIds);

package/src/manager/categoryManager/categoryManager.js

@@ -1,5 +1,5 @@
 import { reactive } from 'vue';
-import { contextIdSymbol, IndexedCollection, VcsEvent } from '@vcmap/core';
+import { moduleIdSymbol, IndexedCollection, VcsEvent } from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import { sortByOwner } from '../navbarManager.js';
 import { validateAction, validateActions } from '../../components/lists/VcsActionList.vue';
@@ -145,8 +145,8 @@ class CategoryManager {
      * @type {function():void}
      * @private
      */
-    this._dynamicContextIdListener = this._app.dynamicContextIdChanged.addEventListener((id) => {
-      this._dynamicContextId = id;
+    this._dynamicModuleIdListener = this._app.dynamicModuleIdChanged.addEventListener((id) => {
+      this._dynamicModuleId = id;
       this._resetManagedCategories();
     });
 
@@ -162,7 +162,7 @@ class CategoryManager {
      * @type {string}
      * @private
      */
-    this._dynamicContextId = this._app.dynamicContextId;
+    this._dynamicModuleId = this._app.dynamicModuleId;
 
     /**
      * @type {Array<ItemMapping<*>>}
@@ -250,7 +250,7 @@ class CategoryManager {
   }
 
   /**
-   * removes all items from all categories and rebuilds the item tree depending on the ContextId
+   * removes all items from all categories and rebuilds the item tree depending on the ModuleId
    * @private
    */
   _resetManagedCategories() {
@@ -281,7 +281,7 @@ class CategoryManager {
       });
       managedCategory.items = [...category.collection]
         .filter((item) => {
-          return item[contextIdSymbol] === this._dynamicContextId;
+          return item[moduleIdSymbol] === this._dynamicModuleId;
         })
         .map((item) => {
           return transformItem(item, category, itemMappings);
@@ -306,17 +306,17 @@ class CategoryManager {
 
     const listeners = [
       category.collection.added.addEventListener((item) => {
-        if (item[contextIdSymbol] === this._dynamicContextId) {
+        if (item[moduleIdSymbol] === this._dynamicModuleId) {
           this._handleItemAdded(item, category);
         }
       }),
       category.collection.removed.addEventListener((item) => {
-        if (item[contextIdSymbol] === this._dynamicContextId) {
+        if (item[moduleIdSymbol] === this._dynamicModuleId) {
           this._handleItemRemoved(item, category);
         }
       }),
       category.collection.replaced.addEventListener((replacedEvent) => {
-        if (replacedEvent.old[contextIdSymbol] === this._dynamicContextId) {
+        if (replacedEvent.old[moduleIdSymbol] === this._dynamicModuleId) {
           this._handleItemRemoved(replacedEvent.old, category);
         }
       }),
@@ -324,7 +324,7 @@ class CategoryManager {
 
     if (category.collection instanceof IndexedCollection) {
       listeners.push(category.collection.moved.addEventListener((item) => {
-        if (item[contextIdSymbol] === this._dynamicContextId) {
+        if (item[moduleIdSymbol] === this._dynamicModuleId) {
           this._handleItemMoved(item, category);
         }
       }));
@@ -572,7 +572,7 @@ class CategoryManager {
    * destroys the categoryManager, removes all Listeners and clears all Managed Categories
    */
   destroy() {
-    this._dynamicContextIdListener();
+    this._dynamicModuleIdListener();
     this._appCategoriesRemovedListener();
     this.componentIds = [];
     this._managedCategories.forEach((item) => {

package/src/manager/navbarManager.js

@@ -84,6 +84,24 @@ class NavbarManager extends ButtonManager {
     buttonComponent[locationSymbol] = location;
     return buttonComponent;
   }
+
+  /**
+   * Toggles a button of provided id by executing its callback.
+   * Use active flag to force a state to be applied.
+   * @param {string} id
+   * @param {boolean} [active]
+   */
+  toggle(id, active = undefined) {
+    check(id, String);
+    const { action } = this.get(id);
+    if (active !== undefined) {
+      if (action?.active !== active) {
+        action.callback();
+      }
+    } else if (action) {
+      action.callback();
+    }
+  }
 }
 
 export default NavbarManager;

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -14,12 +14,12 @@
           :icon="group.icon"
           :tooltip="group.title"
           :active="open || hasActiveAction"
-          :color="hasActiveAction ? 'primary' : 'basic'"
+          :color="hasActiveAction ? 'primary' : ''"
           v-bind="attrs"
           v-on="on"
           large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
         </VcsButton>
       </template>
 
@@ -28,7 +28,6 @@
         class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop"
         :height="40"
         width="fit-content"
-        color="basic"
         dense
       >
         <v-toolbar-items class="w-full">

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -33,7 +33,7 @@
           :width="16"
           large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
         </VcsButton>
       </template>
 
@@ -41,7 +41,6 @@
         class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop justify-center"
         :height="40"
         width="fit-content"
-        color="basic"
         dense
       >
         <v-toolbar-items class="w-full">
@@ -62,6 +61,8 @@
   </div>
 </template>
 <style lang="scss">
+@import '../../styles/shades.scss';
+
 .vcs-toolbox-action-selected > .v-btn.vcs-button--large {
   max-width: 40px;
 }
@@ -71,9 +72,14 @@
 }
 
 .vcs-toolbox-action-select-button--active {
-  //border: 2px solid var(--v-basic-base);
-  border-radius: 5px;
-  background: var(--v-basic-base);
+  //border: 2px solid var(--v-shades-base);
+  border-radius: 4px;
+}
+.theme--light .vcs-toolbox-action-select-button--active {
+  background: map-get($shades, 'white');
+}
+.theme--dark .vcs-toolbox-action-select-button--active {
+  background: map-get($shades, 'black');
 }
 
 .vcs-toolbox-2 {

package/src/manager/toolbox/ToolboxManager.vue

@@ -50,13 +50,6 @@
         padding: 0;
       }
     }
-
-    &.theme--light.v-toolbar.v-sheet {
-      background-color: #ffffffda;
-    }
-    &.theme--dark.v-toolbar.v-sheet {
-      background-color: #000000da;
-    }
   }
 
   .marginToTop {

package/src/manager/window/WindowComponent.vue

@@ -2,7 +2,7 @@
   <v-sheet
     :id="`window-component--${windowState.id}`"
     class="elevation-3 position-absolute d-flex flex-column"
-    @click="clicked"
+    v-on="{ ...$listeners }"
     @dragstart="dragStart"
     @dragend="dragEnd"
     :draggable="isDraggable"
@@ -20,14 +20,18 @@
       class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
-        'grey--text': !isOnTop,
       }"
     >
       <slot name="headerComponent" :props="$attrs" />
     </div>
-    <v-divider />
+    <v-divider
+      v-if="!windowState.hideHeader"
+    />
     <div
       class="overflow-x-hidden mb-1"
+      :class="{
+        'rounded': !isDocked,
+      }"
     >
       <slot />
     </div>
@@ -54,7 +58,8 @@
    * @vue-prop {WindowState} windowState
    * @vue-prop {boolean} isOnTop - Whether the component is focused
    * @vue-prop {Object} slotWindow - slot ref of the window
-   * @vue-event {PointerEvent} clicked - raised when the component is clicked
+   * @vue-event {PointerEvent} click - raised when the component is clicked
+   * @vue-event {MouseEvent} mousedown - raised when the component is mousedown
    * @vue-event {{dx: number, dy: number}} move - raised when the component is moved (dragged)
    * @vue-data {slot} [#default] - slot with the window content
    * @vue-data {slot} [#headerComponent] - slot to override the default header
@@ -95,21 +100,14 @@
       });
       const isDockedRight = computed(() => props.slotWindow === WindowSlot.DYNAMIC_RIGHT);
       const isDraggable = ref(false);
-      /**
-       * @param {PointerEvent} e
-       */
-      const clicked = (e) => {
-        emit('click', e);
-      };
       /**
        * Sets window as draggable on mousedown on header.
        * Stops bubbling of header action buttons.
        * @param {MouseEvent} e
        */
       const mousedown = (e) => {
+        emit('mousedown', e);
         if (e.target.closest('button')) {
-          e.preventDefault();
-          e.stopPropagation();
           return;
         }
         isDraggable.value = isDynamic.value;
@@ -129,9 +127,6 @@
         startEvent = e;
         // set mouse cursor to move
         e.dataTransfer.effectAllowed = 'move';
-        const preventDefaultDragover = dragOverEvent => dragOverEvent.preventDefault();
-        e.target.parentElement.ondragover = preventDefaultDragover;
-        app.maps.target.ondragover = preventDefaultDragover;
       };
       /**
        * @param {DragEvent} endEvent
@@ -154,7 +149,6 @@
         isDynamicLeft: isDockedLeft,
         isDynamicRight: isDockedRight,
         isDraggable,
-        clicked,
         dragStart,
         dragEnd,
         mousedown,

package/src/manager/window/WindowComponentHeader.vue

@@ -4,11 +4,12 @@
       <v-icon
         v-if="windowState.headerIcon"
         class="mr-2"
-        :class="{ 'text--primary': isOnTop }"
+        :class="{ 'primary--text': isOnTop }"
         v-text="windowState.headerIcon"
+        size="16"
       />
       <h3
-        class="font-size-14 d-inline-block user-select-none font-weight-bold"
+        class="d-inline-block user-select-none font-weight-bold"
         :class="{ 'text--primary': isOnTop }"
       >
         {{ $t(windowState.headerTitle) }}
@@ -33,7 +34,7 @@
         small
         :icon="infoAction.icon"
         :tooltip="infoAction.title"
-        class="px-1"
+        class="px-1 d-flex"
       />
       <VcsButton
         v-if="isDockable"
@@ -41,13 +42,14 @@
         small
         icon="mdi-pin"
         tooltip="components.pin"
-        class="px-1"
+        class="px-1 d-flex"
       />
       <VcsButton
         @click.stop="close"
         small
         icon="mdi-close-thick"
         tooltip="components.close"
+        class="d-flex"
       />
     </div>
   </span>

package/src/manager/window/WindowManager.vue

@@ -3,16 +3,16 @@
     :class="{ 'win-container-mobile' : $vuetify.breakpoint.xs }"
   >
     <WindowComponent
-      v-for="(id, zIndex) in componentIds"
+      v-for="id in componentIds"
       :key="id"
       :window-state="getState(id)"
       :slot-window="getSlot(id)"
-      :z-index="zIndex"
+      :z-index="getComponent(id).zIndex"
       @moved="move(id, $event)"
-      @click="clicked(id)"
-      :style="getStyles(id, zIndex).value"
+      @mousedown="bringWindowToTop(id)"
+      :style="getStyles(id).value"
       :class="getState(id).classes"
-      :is-on-top="isOnTop(zIndex)"
+      :is-on-top="isOnTop(id)"
     >
       <component
         :is="getComponent(id)"
@@ -23,7 +23,7 @@
         <component
           :is="getHeaderComponent(id)"
           :window-state="getState(id)"
-          :is-on-top="isOnTop(zIndex)"
+          :is-on-top="isOnTop(id)"
           :slot-window="getSlot(id)"
           v-bind="getProps(id)"
           @close="close(id)"
@@ -84,23 +84,22 @@
         return windowManager.get(id)?.props ?? {};
       };
       /**
-       * @param {number} zIndex
+       * @param {string} id
        * @returns {boolean}
        */
-      const isOnTop = (zIndex) => {
-        return zIndex === componentIds.length - 1;
+      const isOnTop = (id) => {
+        return windowManager.get(id)?.zIndex.value === componentIds.length - 1;
       };
       /**
        * @param {string} id
-       * @param {number} zIndex
        * @returns {import("vue").ComputedRef<Object>}
        */
-      const getStyles = (id, zIndex) => computed(() => {
+      const getStyles = id => computed(() => {
         const windowComponent = windowManager.get(id);
         const state = windowComponent?.state;
         const position = applyPositionOnTarget(windowComponent?.position, targetSize.value);
         return {
-          zIndex,
+          zIndex: windowComponent.zIndex.value,
           ...position,
           ...(state.styles || {}),
         };
@@ -108,8 +107,8 @@
       /**
        * @param {string} id
        */
-      const clicked = (id) => {
-        if (windowManager.has(id)) {
+      const bringWindowToTop = (id) => {
+        if (windowManager.has(id) && !isOnTop(id)) {
           windowManager.bringWindowToTop(id);
         }
       };
@@ -143,7 +142,7 @@
         getSlot: id => windowManager.get(id).slot,
         close: (id) => { windowManager.remove(id); },
         pin: (id) => { windowManager.pinWindow(id); },
-        clicked,
+        bringWindowToTop,
         move,
       };
     },

package/src/manager/window/windowHelper.js

@@ -304,7 +304,7 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
     clippedPosition.height = windowPositionOptions.height;
   }
   clippedPosition.maxWidth = targetWidth;
-  clippedPosition.maxHeight = targetHeight;
+  clippedPosition.maxHeight = targetHeight - 4; // 2px space plus 2px due to margin bottom
   if (windowPositionOptions.maxWidth !== undefined) {
     clippedPosition.maxWidth = Math.min(windowPositionOptions.maxWidth, targetWidth);
   }

package/src/manager/window/windowManager.js

@@ -1,4 +1,4 @@
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
@@ -137,6 +137,7 @@ export function isSlotPosition(windowPosition) {
  * @property {WindowSlot} initialSlot
  * @property {Object} props
  * @property {Object} provides
+ * @property {import("vue").ComputedGetter<number>} zIndex
  */
 
 /**
@@ -238,6 +239,11 @@ class WindowManager {
      * @type {Array<string>}
      */
     this.componentIds = [];
+    /**
+     * reactive ordered array of ids, defining the zIndex of a component
+     * @type {import("vue").Ref<Array<string>>}
+     */
+    this._zIndices = ref([]);
 
     /**
      * @type {Map<string, WindowComponent>}
@@ -277,8 +283,8 @@ class WindowManager {
     const windowComponent = this._windowComponents.get(id);
     if (windowComponent) {
       this._cachePosition(windowComponent);
-      const index = this.componentIds.indexOf(id);
-      this.componentIds.splice(index, 1);
+      this.componentIds.splice(this.componentIds.indexOf(id), 1);
+      this._zIndices.value.splice(this._zIndices.value.indexOf(id), 1);
       this._windowComponents.delete(id);
       this._handleSlotsChanged(windowComponent.slot.value);
       this.removed.raiseEvent(windowComponent);
@@ -453,6 +459,7 @@ class WindowManager {
 
     const position = reactive(windowPosition);
     const initialPosition = { ...windowPositionOptions };
+    const zIndex = computed(() => this._zIndices.value.indexOf(id));
     /**
      * @type {WindowComponent}
      */
@@ -487,6 +494,9 @@ class WindowManager {
       get provides() {
         return provides;
       },
+      get zIndex() {
+        return zIndex;
+      },
     };
     const cached = this._assignCachedPosition(windowComponent);
     if (!cached) {
@@ -494,6 +504,7 @@ class WindowManager {
     }
     this._windowComponents.set(id, windowComponent);
     this.componentIds.push(id);
+    this._zIndices.value.push(id);
     this._handleSlotsChanged(slot);
     this.added.raiseEvent(windowComponent);
     return windowComponent;
@@ -505,10 +516,10 @@ class WindowManager {
    */
   bringWindowToTop(id) {
     if (this.has(id)) {
-      const index = this.componentIds.indexOf(id);
-      if (index >= 0 && index !== this.componentIds.length - 1) {
-        this.componentIds.push(id);
-        this.componentIds.splice(index, 1);
+      const index = this._zIndices.value.indexOf(id);
+      if (index >= 0 && index !== this._zIndices.value.length - 1) {
+        this._zIndices.value.push(id);
+        this._zIndices.value.splice(index, 1);
       }
     }
   }

package/src/navigation/mapNavCompass.vue

@@ -162,6 +162,6 @@
   }
 
   svg path:hover {
-    fill: var(--v-base-lighten5) !important;
+    fill: var(--v-primary-lighten1) !important;
   }
 </style>

package/src/navigation/mapNavigation.vue

@@ -58,7 +58,7 @@
   import OrientationToolsButton from './orientationToolsButton.vue';
 
   /**
-   * Creates a go-to viewpoint action from a startingViewpointName defined in a context
+   * Creates a go-to viewpoint action from a startingViewpointName defined in a module
    * @param {VcsUiApp} app
    * @returns {{action: import("vue").Reactive<{}>, destroy: function():void}}
    */
@@ -66,13 +66,13 @@
     const initialAction = { icon: undefined, title: undefined, active: undefined, callback: undefined };
     const action = reactive({ ...initialAction });
     /**
-     * Gets the starting viewpoint of the last added context, where a startingViewpointName was defined
+     * Gets the starting viewpoint of the last added module, where a startingViewpointName was defined
      * and sets it on the home button action.
      */
     const updateStartingViewpoint = () => {
       let viewpoint = null;
-      for (let idx = app.contexts.length - 1; idx >= 0; idx--) {
-        const { startingViewpointName } = app.contexts[idx].config;
+      for (let idx = app.modules.length - 1; idx >= 0; idx--) {
+        const { startingViewpointName } = app.modules[idx].config;
         if (startingViewpointName && app.viewpoints.hasKey(startingViewpointName)) {
           viewpoint = app.viewpoints.getByKey(startingViewpointName);
           break;
@@ -95,8 +95,8 @@
     };
 
     const listener = [
-      app.contextAdded.addEventListener(updateStartingViewpoint),
-      app.contextRemoved.addEventListener(updateStartingViewpoint),
+      app.moduleAdded.addEventListener(updateStartingViewpoint),
+      app.moduleRemoved.addEventListener(updateStartingViewpoint),
     ];
 
     const destroy = () => { listener.forEach(cb => cb()); };

package/src/navigation/obliqueRotation.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="d-inline-flex">
-    <OrientationToolsButton
-      @click="input(-90)"
-      icon="$vcsRotateLeft"
-      tooltip="navigation.obliqueLeftTooltip"
-    />
-    <OrientationToolsButton
-      @click="input(90)"
-      icon="$vcsRotateRight"
-      tooltip="navigation.obliqueRightTooltip"
-    />
+  <div class="d-inline-flex rounded vcs-oblique-orientation">
+    <div class="d-inline-flex rounded inner">
+      <OrientationToolsButton
+        @click="input(-90)"
+        icon="$vcsRotateLeft"
+        tooltip="navigation.obliqueLeftTooltip"
+        elevation="0"
+      />
+      <OrientationToolsButton
+        @click="input(90)"
+        icon="$vcsRotateRight"
+        tooltip="navigation.obliqueRightTooltip"
+        elevation="0"
+      />
+    </div>
   </div>
 </template>
 
@@ -43,6 +47,25 @@
   };
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .vcs-oblique-orientation {
+    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
+    .inner{
+      box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;
+    }
+    ::v-deep {
+      .btn-orientation-tools{
+        &:first-child{
+          box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 1px -2px,
+          rgba(0, 0, 0, 0.02) -3px 2px 2px 0,
+          rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
+        }
+        &:last-child{
+          box-shadow: rgba(0, 0, 0, 0.02) 1px 4px 1px -2px,
+          rgba(0, 0, 0, 0.02) 1px 2px 1px 0,
+          rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
+        }
+      }
+    }
+  }
 </style>

package/src/navigation/orientationToolsButton.vue

@@ -5,7 +5,6 @@
   >
     <template #activator="{ on, attrs }">
       <v-card
-        elevation="0"
         class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
         v-bind="{ ...$attrs, ...attrs }"
         v-on="{ ...$listeners, ...on }"