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

package/src/featureInfo/featureInfo.js

@@ -1,11 +1,8 @@
 import {
   EventType,
-  makeOverrideCollection,
   Collection,
-  getObjectFromClassRegistry,
   VcsEvent,
   vcsLayerName,
-  OverrideClassRegistry,
   ClassRegistry,
   fromCesiumColor,
   VectorLayer,
@@ -155,23 +152,49 @@ function setupFeatureInfoTool(app) {
     },
   };
 
-  if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
-    action.callback();
+  function addFeatureInfoButton() {
+    if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
+      action.callback();
+    }
+    app.toolboxManager.add(
+      {
+        id: 'featureInfo',
+        type: ToolboxType.SINGLE,
+        action,
+      },
+      vcsAppSymbol,
+    );
   }
-  app.toolboxManager.add(
-    {
-      id: 'featureInfo',
-      type: ToolboxType.SINGLE,
-      action,
-    },
-    vcsAppSymbol,
-  );
+
+  if ([...app.layers].some((l) => l.properties?.featureInfo)) {
+    addFeatureInfoButton();
+  }
+
+  const listeners = [
+    app.layers.added.addEventListener((layer) => {
+      if (
+        layer?.properties?.featureInfo &&
+        !app.toolboxManager.has('featureInfo')
+      ) {
+        addFeatureInfoButton();
+      }
+    }),
+    app.layers.removed.addEventListener(() => {
+      if (
+        ![...app.layers].some((l) => l.properties?.featureInfo) &&
+        app.toolboxManager.has('featureInfo')
+      ) {
+        app.toolboxManager.remove('featureInfo');
+      }
+    }),
+  ];
 
   return () => {
     if (session) {
       session.stop();
     }
     app.toolboxManager.remove('featureInfo');
+    listeners.forEach((cb) => cb());
   };
 }
 
@@ -194,37 +217,22 @@ export const featureInfoViewSymbol = Symbol('featureInfoView');
 
 /**
  * @class FeatureInfo
- * @description Provides registration of featureInfoClasses and stores featureInfoView instances in its collection.
+ * @description Provides registration of featureInfoClasses and stores featureInfoView instances.
+ * @extends {Collection<AbstractFeatureInfoView>}
+ * @implements {import("@vcmap/core").OverrideCollectionInterface<AbstractFeatureInfoView>}
  */
-class FeatureInfo {
+class FeatureInfo extends Collection {
   /**
    * @param {VcsUiApp} app
    */
   constructor(app) {
+    super();
+
     /**
      * @type {VcsUiApp}
      * @private
      */
     this._app = app;
-    /**
-     * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
-     * @private
-     */
-    this._collection = makeOverrideCollection(
-      new Collection(),
-      () => this._app.dynamicModuleId,
-      null,
-      (config) =>
-        getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
-      AbstractFeatureInfoView,
-    );
-    /**
-     * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
-     * @private
-     */
-    this._featureInfoClassRegistry = new OverrideClassRegistry(
-      featureInfoClassRegistry,
-    );
     /**
      * @type {function():void|null}
      * @private
@@ -301,22 +309,6 @@ class FeatureInfo {
     this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
   }
 
-  /**
-   * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
-   * @readonly
-   */
-  get collection() {
-    return this._collection;
-  }
-
-  /**
-   * @type {OverrideClassRegistry<AbstractFeatureInfoView>}
-   * @readonly
-   */
-  get classRegistry() {
-    return this._featureInfoClassRegistry;
-  }
-
   /**
    * @type {VcsEvent<null|FeatureType>}
    * @readonly
@@ -379,13 +371,11 @@ class FeatureInfo {
       );
       return null;
     }
-    if (!this._collection.hasKey(name)) {
+    if (!this.hasKey(name)) {
       getLogger().warning(`No view with name '${name}' has been registered.`);
       return null;
     }
-    return /** @type {AbstractFeatureInfoView} */ this._collection.getByKey(
-      name,
-    );
+    return /** @type {AbstractFeatureInfoView} */ this.getByKey(name);
   }
 
   /**
@@ -502,6 +492,7 @@ class FeatureInfo {
    * Destroys the feature info and all its events & listeners
    */
   destroy() {
+    super.destroy();
     this._clearInternal();
     this._featureChanged.destroy();
     this._destroyFeatureInfoTool();
@@ -511,8 +502,6 @@ class FeatureInfo {
     }
     this._listeners.forEach((cb) => cb());
     this._listeners.splice(0);
-    this._collection.destroy();
-    this._featureInfoClassRegistry.destroy();
   }
 }
 

package/src/i18n/de.js

@@ -14,6 +14,7 @@ const messages = {
   },
   content: {
     title: 'Inhalte',
+    empty: 'Aktuell sind keine Einträge verfügbar.',
     search: {
       placeholder: 'Elemente suchen',
     },
@@ -41,8 +42,10 @@ const messages = {
     homeButton: 'Springe zur Startansicht',
   },
   categoryManager: {
-    title: 'Komponenten',
-    tooltip: 'Komponenten',
+    title: 'Mein Arbeitsbereich',
+    tooltip: 'Mein Arbeitsbereich',
+  },
+  collectionManager: {
     more: 'Weitere anzeigen...',
     empty: 'Es gibt noch keine Einträge.',
   },

package/src/i18n/en.js

@@ -14,6 +14,7 @@ const messages = {
   },
   content: {
     title: 'Content',
+    empty: 'Currently there are no entries available.',
     search: {
       placeholder: 'Search elements',
     },
@@ -41,8 +42,10 @@ const messages = {
     homeButton: 'Go to starting view',
   },
   categoryManager: {
-    title: 'Components',
-    tooltip: 'Components',
+    title: 'My Workspace',
+    tooltip: 'My Workspace',
+  },
+  collectionManager: {
     more: 'Show more...',
     empty: 'There are no entries yet.',
   },

package/src/i18n/i18nCollection.js

@@ -103,8 +103,7 @@ class I18nCollection extends IndexedCollection {
   async parseItems(configArray, moduleId) {
     if (Array.isArray(configArray)) {
       configArray.forEach((item) => {
-        item[moduleIdSymbol] = moduleId;
-        this.add(item);
+        this.add({ ...item, [moduleIdSymbol]: moduleId });
       });
     }
   }

package/src/init.js

@@ -3,7 +3,6 @@ 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';
 
 /**
@@ -45,10 +44,9 @@ export const VcsUiAppConfigPattern = {
 export default async function initApp(mountTarget) {
   check(mountTarget, String);
   const app = new VcsUiApp();
-  const i18n = createVueI18n();
   new Vue({
     vuetify,
-    i18n,
+    i18n: app.vueI18n,
     render: (h) =>
       h(VcsAppComponentWrapper, {
         props: {
@@ -57,7 +55,6 @@ export default async function initApp(mountTarget) {
       }),
   }).$mount(mountTarget);
 
-  setupI18n(app, i18n);
   return app;
 }
 

package/src/legend/vcsLegend.vue

@@ -22,7 +22,7 @@
                 </v-icon>
                 {{ $t(entry.title) }}
               </div>
-              <VcsActionButtonList small :actions="entry.actions" />
+              <VcsActionButtonList :actions="entry.actions" />
             </div>
           </template>
         </v-expansion-panel-header>

package/src/manager/buttonManager.js

@@ -5,10 +5,20 @@ import { check, checkMaybe } from '@vcsuite/check';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { ActionPattern } from '../components/lists/VcsActionList.vue';
 
+/**
+ * @param {number} weightA
+ * @param {number} weightB
+ * @returns {number}
+ */
+export function sortByWeight(weightA, weightB) {
+  return weightB - weightA;
+}
+
 /**
  * @typedef ButtonComponentOptions
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {VcsAction} action Action performed by button.
+ * @property {number} [weight=0] Optional weight affecting the displaying order
  */
 
 /**
@@ -16,6 +26,7 @@ import { ActionPattern } from '../components/lists/VcsActionList.vue';
  * @property {string} id
  * @property {string|vcsAppSymbol} owner
  * @property {VcsAction} action
+ * @property {number} weight
  */
 
 /**
@@ -86,6 +97,7 @@ class ButtonManager {
    */
   add(buttonComponentOptions, owner) {
     checkMaybe(buttonComponentOptions.id, String);
+    checkMaybe(buttonComponentOptions.weight, Number);
     check(buttonComponentOptions.action, ActionPattern);
     check(owner, [String, vcsAppSymbol]);
 
@@ -109,6 +121,9 @@ class ButtonManager {
       get action() {
         return reactive(buttonComponentOptions.action);
       },
+      get weight() {
+        return buttonComponentOptions.weight || 0;
+      },
     };
 
     this._buttonComponents.set(id, buttonComponent);

package/src/manager/{categoryManager/CategoryComponent.vue → collectionManager/CollectionComponent.vue}

@@ -1,47 +1,42 @@
 <template>
-  <v-expansion-panel class="px-2" @change="active = !active">
-    <v-expansion-panel-header hide-actions>
+  <v-expansion-panel @change="active = !active">
+    <v-expansion-panel-header hide-actions class="px-2">
       <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) }}
+            {{ $t(title) }}
           </div>
-          <VcsActionButtonList
-            v-if="category.actions?.length > 0"
-            :actions="category.actions"
-            small
-            class="float-end"
-          />
+          <VcsActionButtonList v-if="actions?.length > 0" :actions="actions" />
         </div>
       </template>
     </v-expansion-panel-header>
     <v-expansion-panel-content class="pb-1">
       <vcs-list
-        :items="category.items.slice(0, 10)"
-        :draggable="category.draggable"
-        :selectable="category.selectable"
-        :single-select="category.singleSelect"
+        :items="items.slice(0, 10)"
+        :draggable="draggable"
+        :selectable="selectable"
+        :single-select="singleSelect"
         v-model="selection"
         :show-title="false"
-        @itemMoved="move"
+        @item-moved="move"
       />
-      <v-sheet v-if="category.items.length > 10" class="ma-2 pl-2">
-        <VcsButton @click="openCategoryItemWindow" small>
-          {{ $t('categoryManager.more') }}
+      <v-sheet v-if="items.length > 10" class="ma-2 pl-2">
+        <VcsButton @click="openCollectionComponentList">
+          {{ $t('collectionManager.more') }}
         </VcsButton>
       </v-sheet>
-      <v-sheet v-else-if="category.items.length === 0" class="ma-2 pl-2">
-        {{ $t('categoryManager.empty') }}
+      <v-sheet v-else-if="items.length === 0" class="ma-2 pl-2">
+        {{ $t('collectionManager.empty') }}
       </v-sheet>
     </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
 
 <script>
-  import { computed, inject, ref } from 'vue';
+  import { inject, ref } from 'vue';
   import {
     VIcon,
     VExpansionPanel,
@@ -54,11 +49,15 @@
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
-  import CategoryComponentList from './CategoryComponentList.vue';
   import { WindowSlot } from '../window/windowManager.js';
+  import CollectionComponentList from './CollectionComponentList.vue';
 
+  /**
+   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
   export default {
-    name: 'CategoryComponent',
+    name: 'CollectionComponent',
     components: {
       VcsActionButtonList,
       VcsButton,
@@ -69,45 +68,37 @@
       VSheet,
       VIcon,
     },
-    props: {
-      category: {
-        type: Object,
-        required: true,
-      },
-    },
-    setup(props) {
+    setup() {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const windowId = `${props.category.id}-category-list`;
-      const active = ref(false);
-
-      const selection = computed({
-        get() {
-          return props.category.selection;
-        },
-        set(value) {
-          // eslint-disable-next-line vue/no-mutating-props
-          props.category.selection = value;
-        },
-      });
-
-      const { collection } = app.categories.getByKey(
-        props.category.categoryName,
-      );
       /**
-       * index of the first item within the collection
-       * @type {ComputedRef<number>}
+       * @type {CollectionComponent}
        */
-      const collectionItemOffset = computed(() => {
-        return [...collection].findIndex(
-          (i) => i[collection.uniqueKey] === props.category.items[0]?.id,
-        );
-      });
+      const collectionComponent = inject('collectionComponent');
+      const windowId = `${collectionComponent.id}-list`;
+      const active = ref(false);
 
       return {
-        selection,
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        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?
+            );
+          }
+        },
         active,
-        openCategoryItemWindow() {
+        openCollectionComponentList() {
           if (app.windowManager.has(windowId)) {
             setTimeout(() => {
               app.windowManager.bringWindowToTop(windowId);
@@ -116,13 +107,12 @@
             app.windowManager.add(
               {
                 id: windowId,
-                component: CategoryComponentList,
+                component: CollectionComponentList,
                 props: {
-                  category: props.category,
                   windowId,
                 },
                 provides: {
-                  selection,
+                  collectionComponent,
                 },
                 slot: WindowSlot.DYNAMIC_LEFT,
               },
@@ -130,15 +120,6 @@
             );
           }
         },
-        move({ item, targetIndex }) {
-          if (collection instanceof IndexedCollection) {
-            const collectionItem = collection.getByKey(item.id);
-            collection.moveTo(
-              collectionItem,
-              targetIndex + collectionItemOffset.value,
-            );
-          }
-        },
       };
     },
   };
@@ -148,4 +129,14 @@
   .rotate {
     transform: rotate(-90deg);
   }
+  .v-icon {
+    font-size: 16px;
+  }
+  ::v-deep {
+    .v-list {
+      .v-list-item {
+        padding: 4px 8px 4px 28px;
+      }
+    }
+  }
 </style>

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -0,0 +1,62 @@
+<template>
+  <vcs-list
+    :items="items"
+    :draggable="draggable"
+    :selectable="selectable"
+    :single-select="singleSelect"
+    v-model="selection"
+    :title="title"
+    @item-moved="move"
+  />
+</template>
+
+<script>
+  import { inject } from 'vue';
+  import { IndexedCollection } from '@vcmap/core';
+  import VcsList from '../../components/lists/VcsList.vue';
+
+  /**
+   * 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 }.
+   */
+  export default {
+    name: 'CollectionComponentList',
+    components: {
+      VcsList,
+    },
+    props: {
+      windowId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup() {
+      /**
+       * @type {CollectionComponent}
+       */
+      const collectionComponent = inject('collectionComponent');
+
+      return {
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        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?
+            );
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="w-full">
+    <slot>
+      <collection-component />
+    </slot>
+  </div>
+</template>
+
+<script>
+  import { inject, provide } from 'vue';
+  import CollectionComponent from './CollectionComponent.vue';
+
+  /**
+   * Provides a CollectionComponent of a CollectionManager.
+   * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   * @vue-data {slot} [#default] - Slot rendering collection component.
+   */
+  export default {
+    name: 'CollectionManagerProvider',
+    components: {
+      CollectionComponent,
+    },
+    props: {
+      componentId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      /**
+       * @type {CollectionManager}
+       */
+      const collectionManager = inject('collectionManager');
+      const collectionComponent = collectionManager.get(props.componentId);
+      provide('collectionComponent', collectionComponent);
+    },
+  };
+</script>

package/src/manager/collectionManager/CollectionManager.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-container class="pa-0">
+    <v-expansion-panels
+      accordion
+      multiple
+      v-if="componentIds.length > 0"
+      class="rounded-0"
+    >
+      <collection-component-provider
+        v-for="componentId in componentIds"
+        :component-id="componentId"
+        :key="componentId"
+      />
+    </v-expansion-panels>
+  </v-container>
+</template>
+
+<script>
+  import { inject, ref } from 'vue';
+  import { VExpansionPanels, VContainer } from 'vuetify/lib';
+  import CollectionComponentProvider from './CollectionComponentProvider.vue';
+
+  /**
+   * Renders the all managed CollectionComponents of a CollectionManager.
+   * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
+  export default {
+    name: 'CollectionManager',
+    components: {
+      VExpansionPanels,
+      VContainer,
+      CollectionComponentProvider,
+    },
+    setup() {
+      const collectionManager = inject('collectionManager');
+      const componentIds = ref(collectionManager.componentIds);
+
+      return {
+        componentIds,
+      };
+    },
+  };
+</script>