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

package/src/i18n/i18nCollection.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line max-classes-per-file
-import { contextIdSymbol, IndexedCollection } from '@vcmap/core';
+import { moduleIdSymbol, IndexedCollection } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 
 /**
@@ -51,59 +51,59 @@ export function mergeDeep(...sources) {
  */
 class I18nCollection extends IndexedCollection {
   /**
-   * @param {function():string} getDynamicContextId - function to get the current dynamic context id
+   * @param {function():string} getDynamicModuleId - function to get the current dynamic module id
    */
-  constructor(getDynamicContextId) {
+  constructor(getDynamicModuleId) {
     super(false);
     /**
      * @type {function(): string}
      * @private
      */
-    this._getDynamicContextId = getDynamicContextId;
+    this._getDynamicModuleId = getDynamicModuleId;
   }
 
   /**
    * @inheritDoc
    */
   add(item) {
-    if (!item[contextIdSymbol]) {
-      item[contextIdSymbol] = this._getDynamicContextId();
+    if (!item[moduleIdSymbol]) {
+      item[moduleIdSymbol] = this._getDynamicModuleId();
     }
     super.add(item);
   }
 
   /**
    * @param {Array<Object>} configArray
-   * @param {string} contextId
+   * @param {string} moduleId
    * @returns {Promise<void>}
    */
-  async parseItems(configArray, contextId) {
+  async parseItems(configArray, moduleId) {
     if (Array.isArray(configArray)) {
       configArray.forEach((item) => {
-        item[contextIdSymbol] = contextId;
+        item[moduleIdSymbol] = moduleId;
         this.add(item);
       });
     }
   }
 
   /**
-   * @param {string} contextId
+   * @param {string} moduleId
    */
-  async removeContext(contextId) {
+  async removeModule(moduleId) {
     [...this]
-      .filter(item => item[contextIdSymbol] === contextId)
+      .filter(item => item[moduleIdSymbol] === moduleId)
       .forEach((item) => {
         this.remove(item);
       });
   }
 
   /**
-   * @param {string} contextId
+   * @param {string} moduleId
    * @returns {Array<Object>}
    */
-  serializeContext(contextId) {
+  serializeModule(moduleId) {
     return [...this]
-      .filter(item => item[contextIdSymbol] === contextId)
+      .filter(item => item[moduleIdSymbol] === moduleId)
       .filter(item => !item[i18nPluginSymbol])
       .map(item => JSON.parse(JSON.stringify(item)));
   }
@@ -112,12 +112,12 @@ class I18nCollection extends IndexedCollection {
    * This method adds plugin messages to the collection. It is no necessary to call this function
    * from within a plugin. Use the i18n property on your plugin.
    * @param {string} plugin Name of the plugin
-   * @param {string} contextId
+   * @param {string} moduleId
    * @param {Object} messages
    */
-  addPluginMessages(plugin, contextId, messages) {
+  addPluginMessages(plugin, moduleId, messages) {
     messages[i18nPluginSymbol] = plugin;
-    messages[contextIdSymbol] = contextId;
+    messages[moduleIdSymbol] = moduleId;
     this.add(messages);
   }
 
@@ -125,11 +125,11 @@ class I18nCollection extends IndexedCollection {
    * This method removes plugin messages from the collection. It is no necessary to call this function
    * from within a plugin. Once your plugin is removed, the VcsUiApp will call this for you.
    * @param {string} pluginName
-   * @param {string} contextId
+   * @param {string} moduleId
    */
-  removePluginMessages(pluginName, contextId) {
+  removePluginMessages(pluginName, moduleId) {
     [...this]
-      .filter(item => item[i18nPluginSymbol] === pluginName && item[contextIdSymbol] === contextId)
+      .filter(item => item[i18nPluginSymbol] === pluginName && item[moduleIdSymbol] === moduleId)
       .forEach((item) => {
         this.remove(item);
       });
@@ -147,7 +147,7 @@ class I18nCollection extends IndexedCollection {
    * @inheritDoc
    */
   destroy() {
-    this._getDynamicContextId = null;
+    this._getDynamicModuleId = null;
     super.destroy();
   }
 }

package/src/init.js

@@ -1,20 +1,49 @@
 import Vue from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
-import { Context } from '@vcmap/core';
+import { check, checkMaybe, is } from '@vcsuite/check';
+import { VcsModule } from '@vcmap/core';
 import VcsAppComponentWrapper from './application/vcsAppWrapper.vue';
 import { vuetify } from './vuePlugins/vuetify.js';
 import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
 import VcsUiApp from './vcsUiApp.js';
 
+/**
+ * Base pattern to check VcsObjects
+ * @type {import("vcsuite/check").PatternFor<import("@vcmap/core").VcsObject>}
+ */
+const VcsObjectPattern = {
+  type: String,
+  name: String,
+};
+
+/**
+ * Base pattern to check VcsUiAppConfig
+ * @type {import("vcsuite/check").PatternFor<VcsUiAppConfig>}
+ */
+export const VcsUiAppConfigPattern = {
+  id: [undefined, String],
+  layers: [undefined, [VcsObjectPattern]],
+  maps: [undefined, [VcsObjectPattern]],
+  styles: [undefined, [VcsObjectPattern]],
+  viewpoints: [undefined, [VcsObjectPattern]],
+  startingViewpointName: [undefined, String],
+  startingMapName: [undefined, String],
+  projection: [undefined, Object],
+  categories: [undefined, [{ name: String, items: [Object] }]],
+  obliqueCollections: [undefined, [VcsObjectPattern]],
+  plugins: [undefined, [Object]],
+  contentTree: [undefined, [Object]],
+  uiConfig: [undefined, [Object]],
+  featureInfo: [undefined, [VcsObjectPattern]],
+  i18n: [undefined, [Object]],
+};
+
 /**
  * creates and mounts a vcsApp
  * @param {string} mountTarget
- * @param {string=} configUrl optional config
  * @returns {Promise<VcsUiApp>}
  */
-export default async function initApp(mountTarget, configUrl) {
+export default async function initApp(mountTarget) {
   check(mountTarget, String);
-  checkMaybe(configUrl, String);
   const app = new VcsUiApp();
   const i18n = createVueI18n();
   new Vue({
@@ -28,11 +57,65 @@ export default async function initApp(mountTarget, configUrl) {
   }).$mount(mountTarget);
 
   setupI18n(app, i18n);
+  return app;
+}
+
+/**
+ * Initializes app with an optional single config
+ * @param {string} mountTarget
+ * @param {string=} configUrl optional config
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromModule(mountTarget, configUrl) {
+  check(mountTarget, String);
+  checkMaybe(configUrl, String);
+
+  const app = await initApp(mountTarget);
   if (configUrl) {
     const config = await fetch(configUrl)
       .then(response => response.json());
-    const context = new Context(config);
-    await app.addContext(context);
+    const module = new VcsModule(config);
+    await app.addModule(module);
   }
+
   return app;
 }
+
+/**
+ * Initializes app with a map config containing a set of config urls
+ * @param {string} mountTarget
+ * @param {string} appUrl app config containing further modules to be loaded
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromAppConfig(mountTarget, appUrl) {
+  check(mountTarget, String);
+  check(appUrl, String);
+
+  const app = await initApp(mountTarget);
+  /**
+   * @type {{modules: Array<string|VcsUiAppConfig>}}
+   */
+  const appConfig = await fetch(appUrl)
+    .then(response => response.json());
+
+  check(appConfig.modules, [String, Object]);
+
+  const modules = await Promise.all(appConfig.modules.map(async (c) => {
+    if (is(c, VcsUiAppConfigPattern)) {
+      return new VcsModule(/** @type{import("@vcmap/core").VcsAppConfig} */ c);
+    } else if (is(c, String)) {
+      const response = await fetch(c);
+      if (response.ok) {
+        const config = await response.json();
+        return new VcsModule(config);
+      }
+    }
+    return null;
+  }));
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const module of modules) {
+    if (module) {
+      await app.addModule(module);
+    }
+  }
+}

package/src/manager/categoryManager/CategoryComponent.vue

@@ -1,48 +1,54 @@
 <template>
-  <v-container>
-    <v-row @click="open = !open" class="px-2 py-1 cursor-pointer">
-      <span>
-        <v-icon v-if="open">mdi-chevron-up</v-icon>
-        <v-icon v-else>mdi-chevron-down</v-icon>
-      </span>
-      <span class="flex-grow-1 flex-shrink-1">{{ $t(category.title) }}</span>
-      <vcs-action-button-list
-        v-if="category.actions?.length > 0"
-        :actions="category.actions"
-        small
-      />
-    </v-row>
-    <template v-if="open">
-      <v-row>
-        <v-col class="pa-0">
-          <vcs-list
-            :items="category.items.slice(0, 10)"
-            :selectable="category.selectable"
-            :single-select="category.singleSelect"
-            v-model="selection"
-            :show-title="false"
+  <v-expansion-panel
+    class="px-2"
+    @change="active = !active"
+  >
+    <v-expansion-panel-header hide-actions>
+      <template #default="{ open }">
+        <div class="d-flex justify-space-between">
+          <div class="d-flex align-center">
+            <v-icon class="mr-1" :class="{ 'rotate': !open }">
+              mdi-chevron-down
+            </v-icon>
+            {{ $t(category.title) }}
+          </div>
+          <VcsActionButtonList
+            v-if="category.actions?.length > 0"
+            :actions="category.actions"
+            small
+            class="float-end"
           />
-        </v-col>
-      </v-row>
-      <v-row v-if="category.items.length > 10">
-        <v-col class="pa-0">
-          <VcsButton @click="openCategoryItemWindow" class="pa-2" small>
-            {{ $t('categoryManager.more') }}
-          </VcsButton>
-        </v-col>
-      </v-row>
-      <v-row v-else-if="category.items.length === 0">
-        <v-col class="pa-2">
-          {{ $t('categoryManager.empty') }}
-        </v-col>
-      </v-row>
-    </template>
-  </v-container>
+        </div>
+      </template>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content class="pb-1">
+      <vcs-list
+        :items="category.items.slice(0, 10)"
+        :selectable="category.selectable"
+        :single-select="category.singleSelect"
+        v-model="selection"
+        :show-title="false"
+      />
+      <v-sheet v-if="category.items.length > 10" class="ma-2 pl-2">
+        <VcsButton @click="openCategoryItemWindow" small>
+          {{ $t('categoryManager.more') }}
+        </VcsButton>
+      </v-sheet>
+      <v-sheet v-else-if="category.items.length === 0" class="ma-2 pl-2">
+        {{ $t('categoryManager.empty') }}
+      </v-sheet>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
 </template>
 
 <script>
   import { computed, inject, ref } from 'vue';
-  import { VIcon, VContainer, VRow, VCol } from 'vuetify/lib';
+  import {
+    VIcon, VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VSheet,
+  } from 'vuetify/lib';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
@@ -54,11 +60,12 @@
     name: 'CategoryComponent',
     components: {
       VcsActionButtonList,
-      VcsList,
-      VContainer,
-      VRow,
       VcsButton,
-      VCol,
+      VcsList,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VSheet,
       VIcon,
     },
     props: {
@@ -72,7 +79,7 @@
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       const windowId = `${category.id}-category-list`;
-      const open = ref(false);
+      const active = ref(false);
 
       const selection = computed({
         get() { return category.selection; },
@@ -84,7 +91,7 @@
 
       return {
         selection,
-        open,
+        active,
         openCategoryItemWindow() {
           if (app.windowManager.has(windowId)) {
             setTimeout(() => {
@@ -110,6 +117,8 @@
   };
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.rotate {
+  transform: rotate(-90deg);
+}
 </style>

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/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"
@@ -24,9 +24,14 @@
     >
       <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>
@@ -53,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
@@ -94,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;
@@ -128,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
@@ -153,7 +149,6 @@
         isDynamicLeft: isDockedLeft,
         isDynamicRight: isDockedRight,
         isDraggable,
-        clicked,
         dragStart,
         dragEnd,
         mousedown,

package/src/manager/window/WindowComponentHeader.vue

@@ -6,6 +6,7 @@
         class="mr-2"
         :class="{ 'primary--text': isOnTop }"
         v-text="windowState.headerIcon"
+        size="16"
       />
       <h3
         class="d-inline-block user-select-none font-weight-bold"
@@ -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>