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

package/src/legend/styleLegendItem.vue

@@ -6,20 +6,25 @@
         :key="idx"
         :class="{ 'w-full': item.colNr === 1, 'w-half': item.colNr !== 1 }"
       >
-        <v-list-item
-          dense
-          class="pa-0"
-          :class="determineInnerPadding(idx)"
-        >
+        <v-list-item dense class="pa-0" :class="determineInnerPadding(idx)">
           <v-list-item-icon class="pr-2">
             <v-img
-              v-if="row.type === StyleRowType.Icon || row.type === StyleRowType.Shape"
+              v-if="
+                row.type === StyleRowType.Icon ||
+                row.type === StyleRowType.Shape
+              "
               width="32"
               height="24"
               contain
               :src="getImageSrcFromShape(row.image)"
             />
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="24" viewBox="0 0 32 24" v-else>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="24"
+              viewBox="0 0 32 24"
+              v-else
+            >
               <text
                 v-if="row.type === StyleRowType.Text"
                 :style="`font:${row.text.font}`"
@@ -75,7 +80,9 @@
                 :stroke-dashoffset="row.image?.stroke?.lineDashOffset"
                 :stroke-miterlimit="row.image?.stroke?.miterLimit"
                 :stroke-width="row.image?.stroke?.width"
-                :fill="getColor(row.image?.fill?.color) || 'rgba(255,255,255,0)'"
+                :fill="
+                  getColor(row.image?.fill?.color) || 'rgba(255,255,255,0)'
+                "
               />
             </svg>
           </v-list-item-icon>
@@ -94,7 +101,6 @@
 </template>
 
 <script>
-
   import { getStringColor } from '@vcmap/core';
   import {
     VFlex,
@@ -164,7 +170,7 @@
 </script>
 
 <style scoped>
-.v-list-item--dense {
-  height: 32px;
-}
+  .v-list-item--dense {
+    height: 32px;
+  }
 </style>

package/src/legend/vcsLegend.vue

@@ -1,7 +1,5 @@
 <template>
-  <v-sheet
-    class="overflow-y-auto"
-  >
+  <v-sheet class="overflow-y-auto">
     <v-expansion-panels
       accordion
       multiple
@@ -10,7 +8,7 @@
       class="rounded-0"
     >
       <v-expansion-panel
-        v-for="(entry,i) in entries"
+        v-for="(entry, i) in entries"
         :key="i"
         class="px-2"
         @change="entry.open = !entry.open"
@@ -19,7 +17,7 @@
           <template #default="{ open }">
             <div class="d-flex justify-space-between">
               <div class="d-flex align-center">
-                <v-icon class="mr-1" :class="{ 'rotate': !open }">
+                <v-icon class="mr-1" :class="{ rotate: !open }">
                   mdi-chevron-down
                 </v-icon>
                 {{ $t(entry.title) }}
@@ -36,14 +34,14 @@
                   :src="$t(item.src)"
                   class="legend-image"
                   :title="item.tooltip"
-                >
+                />
               </div>
               <div v-else-if="item.type === LegendType.Iframe">
                 <iframe
                   :id="`legendIframe${idx}`"
                   :src="$t(item.src)"
                   scrolling="no"
-                  style="width: 100%; height: 100%;"
+                  style="width: 100%; height: 100%"
                   frameBorder="0"
                   @load="setIframeHeight(`legendIframe${idx}`)"
                 />
@@ -61,7 +59,6 @@
 </template>
 
 <script>
-
   import {
     VExpansionPanels,
     VExpansionPanel,
@@ -115,8 +112,9 @@
        * @type {import("vue").ComputedRef<number[]>}
        */
       const panels = computed(() => {
-        return [...Array(props.entries.length).keys()]
-          .filter((p, idx) => !!props.entries[idx].open);
+        return [...Array(props.entries.length).keys()].filter(
+          (p, idx) => !!props.entries[idx].open,
+        );
       });
 
       return {
@@ -129,11 +127,11 @@
 </script>
 
 <style lang="scss" scoped>
-.legend-image {
-  max-width: 100%;
-  height: auto;
-}
-.rotate {
-  transform: rotate(-90deg);
-}
+  .legend-image {
+    max-width: 100%;
+    height: auto;
+  }
+  .rotate {
+    transform: rotate(-90deg);
+  }
 </style>

package/src/manager/buttonManager.js

@@ -45,7 +45,6 @@ class ButtonManager {
     this._buttonComponents = new Map();
   }
 
-
   /**
    * @param {string} id
    * @returns {ButtonComponent}
@@ -91,7 +90,9 @@ class ButtonManager {
     check(owner, [String, vcsAppSymbol]);
 
     if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {
-      throw new Error(`A button with id ${buttonComponentOptions.id} has already been registered.`);
+      throw new Error(
+        `A button with id ${buttonComponentOptions.id} has already been registered.`,
+      );
     }
     const id = buttonComponentOptions.id || uuidv4();
 
@@ -134,7 +135,9 @@ class ButtonManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**

package/src/manager/categoryManager/CategoryComponent.vue

@@ -1,13 +1,10 @@
 <template>
-  <v-expansion-panel
-    class="px-2"
-    @change="active = !active"
-  >
+  <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 }">
+            <v-icon class="mr-1" :class="{ rotate: !open }">
               mdi-chevron-down
             </v-icon>
             {{ $t(category.title) }}
@@ -24,10 +21,12 @@
     <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"
         v-model="selection"
         :show-title="false"
+        @itemMoved="move"
       />
       <v-sheet v-if="category.items.length > 10" class="ma-2 pl-2">
         <VcsButton @click="openCategoryItemWindow" small>
@@ -44,11 +43,13 @@
 <script>
   import { computed, inject, ref } from 'vue';
   import {
-    VIcon, VExpansionPanel,
+    VIcon,
+    VExpansionPanel,
     VExpansionPanelHeader,
     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';
@@ -69,26 +70,40 @@
       VIcon,
     },
     props: {
-      /** @type {ManagedCategory} */
       category: {
         type: Object,
         required: true,
       },
     },
-    setup({ category }) {
+    setup(props) {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const windowId = `${category.id}-category-list`;
+      const windowId = `${props.category.id}-category-list`;
       const active = ref(false);
 
       const selection = computed({
-        get() { return category.selection; },
+        get() {
+          return props.category.selection;
+        },
         set(value) {
           // eslint-disable-next-line vue/no-mutating-props
-          category.selection = value;
+          props.category.selection = value;
         },
       });
 
+      const { collection } = app.categories.getByKey(
+        props.category.categoryName,
+      );
+      /**
+       * index of the first item within the collection
+       * @type {ComputedRef<number>}
+       */
+      const collectionItemOffset = computed(() => {
+        return [...collection].findIndex(
+          (i) => i[collection.uniqueKey] === props.category.items[0]?.id,
+        );
+      });
+
       return {
         selection,
         active,
@@ -98,18 +113,30 @@
               app.windowManager.bringWindowToTop(windowId);
             }, 0);
           } else {
-            app.windowManager.add({
-              id: windowId,
-              component: CategoryComponentList,
-              props: {
-                category,
-                windowId,
+            app.windowManager.add(
+              {
+                id: windowId,
+                component: CategoryComponentList,
+                props: {
+                  category: props.category,
+                  windowId,
+                },
+                provides: {
+                  selection,
+                },
+                slot: WindowSlot.DYNAMIC_LEFT,
               },
-              provides: {
-                selection,
-              },
-              slot: WindowSlot.DYNAMIC_LEFT,
-            }, vcsAppSymbol);
+              vcsAppSymbol,
+            );
+          }
+        },
+        move({ item, targetIndex }) {
+          if (collection instanceof IndexedCollection) {
+            const collectionItem = collection.getByKey(item.id);
+            collection.moveTo(
+              collectionItem,
+              targetIndex + collectionItemOffset.value,
+            );
           }
         },
       };
@@ -118,7 +145,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rotate {
-  transform: rotate(-90deg);
-}
+  .rotate {
+    transform: rotate(-90deg);
+  }
 </style>

package/src/manager/categoryManager/CategoryComponentList.vue

@@ -1,15 +1,18 @@
 <template>
   <vcs-list
     :items="category.items"
+    :draggable="category.draggable"
     :selectable="category.selectable"
     :single-select="category.singleSelect"
     v-model="selection"
     :title="category.title"
+    @item-moved="move"
   />
 </template>
 
 <script>
   import { computed, inject, watch } from 'vue';
+  import { IndexedCollection } from '@vcmap/core';
   import VcsList from '../../components/lists/VcsList.vue';
 
   export default {
@@ -27,31 +30,53 @@
         required: true,
       },
     },
-    setup({ category, windowId }) {
+    setup(props) {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
 
       const selection = computed({
-        get() { return category.selection; },
+        get() {
+          return props.category.selection;
+        },
         set(value) {
           // eslint-disable-next-line vue/no-mutating-props
-          category.selection = value;
+          props.category.selection = value;
         },
       });
 
       watch(app.categoryManager.componentIds, () => {
-        if (!app.categoryManager.get(category.id)) {
-          app.windowManager.remove(windowId);
+        if (!app.categoryManager.get(props.category.id)) {
+          app.windowManager.remove(props.windowId);
         }
       });
 
+      const { collection } = app.categories.getByKey(
+        props.category.categoryName,
+      );
+      /**
+       * index of the first item within the collection
+       * @type {ComputedRef<number>}
+       */
+      const collectionItemOffset = computed(() => {
+        return [...collection].findIndex(
+          (i) => i[collection.uniqueKey] === props.category.items[0]?.id,
+        );
+      });
+
       return {
         selection,
+        move({ item, targetIndex }) {
+          if (collection instanceof IndexedCollection) {
+            const collectionItem = collection.getByKey(item.id);
+            collection.moveTo(
+              collectionItem,
+              targetIndex + collectionItemOffset.value,
+            );
+          }
+        },
       };
     },
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/manager/categoryManager/CategoryManager.vue

@@ -17,10 +17,7 @@
 
 <script>
   import { inject, ref, computed } from 'vue';
-  import {
-    VExpansionPanels,
-    VSheet,
-  } from 'vuetify/lib';
+  import { VExpansionPanels, VSheet } from 'vuetify/lib';
   import CategoryComponent from './CategoryComponent.vue';
 
   /**
@@ -38,7 +35,9 @@
     setup() {
       const app = inject('vcsApp');
       const categoryIds = ref(app.categoryManager.componentIds);
-      const categories = computed(() => categoryIds.value.map(id => app.categoryManager.get(id)));
+      const categories = computed(() =>
+        categoryIds.value.map((id) => app.categoryManager.get(id)),
+      );
 
       return {
         categories,

package/src/manager/categoryManager/categoryManager.js

@@ -2,7 +2,10 @@ import { reactive } from 'vue';
 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';
+import {
+  validateAction,
+  validateActions,
+} from '../../components/lists/VcsActionList.vue';
 
 /**
  * @callback MappingFunction
@@ -35,6 +38,7 @@ import { validateAction, validateActions } from '../../components/lists/VcsActio
  * @property {string} title
  * @property {Array<VcsAction>} actions
  * @property {Array<VcsListItem & { destroy: (function():void|undefined) }>} items
+ * @property {boolean} draggable
  * @property {boolean} selectable
  * @property {boolean} singleSelect
  * @property {Array<VcsListItem>} selection
@@ -44,6 +48,7 @@ import { validateAction, validateActions } from '../../components/lists/VcsActio
 /**
  * @typedef {Object} ManagedCategoryOptions
  * @property {string} categoryName
+ * @property {boolean} [draggable] - only allowed for categories with underlying IndexedCollections
  * @property {boolean} [selectable]
  * @property {boolean} [singleSelect]
  * @property {Array<VcsAction>} [actions]
@@ -61,7 +66,9 @@ import { validateAction, validateActions } from '../../components/lists/VcsActio
 function transformItem(item, category, itemMappings) {
   const keyProperty = category.collection.uniqueKey;
   const listItem = {
-    get id() { return item[keyProperty]; },
+    get id() {
+      return item[keyProperty];
+    },
     title: item?.properties?.title || item[keyProperty],
     actions: [],
   };
@@ -114,6 +121,7 @@ function reduceCategoryOptions(current, next) {
   if (next.actions?.length > 0) {
     current.actions.push(...next.actions);
   }
+  current.draggable = current.draggable ?? next.draggable;
   current.selectable = current.selectable ?? next.selectable;
   current.singleSelect = current.singleSelect ?? next.singleSelect;
   return current;
@@ -145,18 +153,20 @@ class CategoryManager {
      * @type {function():void}
      * @private
      */
-    this._dynamicModuleIdListener = this._app.dynamicModuleIdChanged.addEventListener((id) => {
-      this._dynamicModuleId = id;
-      this._resetManagedCategories();
-    });
+    this._dynamicModuleIdListener =
+      this._app.dynamicModuleIdChanged.addEventListener((id) => {
+        this._dynamicModuleId = id;
+        this._resetManagedCategories();
+      });
 
     /**
      * @type {function():void}
      * @private
      */
-    this._appCategoriesRemovedListener = this._app.categories.removed.addEventListener((category) => {
-      this._removeCategory(category.name);
-    });
+    this._appCategoriesRemovedListener =
+      this._app.categories.removed.addEventListener((category) => {
+        this._removeCategory(category.name);
+      });
 
     /**
      * @type {string}
@@ -217,8 +227,9 @@ class CategoryManager {
   _handleItemMoved(item, category) {
     const managedCategory = this.get(category.name);
     if (managedCategory) {
-      const index = managedCategory.items
-        .findIndex((elem) => { return elem.id === item[category.collection.uniqueKey]; });
+      const index = managedCategory.items.findIndex((elem) => {
+        return elem.id === item[category.collection.uniqueKey];
+      });
       if (index > -1) {
         const listItem = managedCategory.items[index];
         managedCategory.items.splice(index, 1);
@@ -237,8 +248,9 @@ class CategoryManager {
   _handleItemRemoved(item, category) {
     const managedCategory = this.get(category.name);
     if (managedCategory) {
-      const index = managedCategory.items
-        .findIndex((elem) => { return elem.id === item[category.collection.uniqueKey]; });
+      const index = managedCategory.items.findIndex((elem) => {
+        return elem.id === item[category.collection.uniqueKey];
+      });
       if (index > -1) {
         const listItem = managedCategory.items[index];
         if (listItem.destroy) {
@@ -301,7 +313,9 @@ class CategoryManager {
       throw new Error(`Could not find Category: ${categoryName}`);
     }
 
-    const options = [...this._managedCategoryOptions.get(category.name).values()] // does not have to be sorted, since this is the first owner
+    const options = [
+      ...this._managedCategoryOptions.get(category.name).values(),
+    ] // does not have to be sorted, since this is the first owner
       .reduce(reduceCategoryOptions, { actions: [] });
 
     const listeners = [
@@ -323,22 +337,28 @@ class CategoryManager {
     ];
 
     if (category.collection instanceof IndexedCollection) {
-      listeners.push(category.collection.moved.addEventListener((item) => {
-        if (item[moduleIdSymbol] === this._dynamicModuleId) {
-          this._handleItemMoved(item, category);
-        }
-      }));
+      listeners.push(
+        category.collection.moved.addEventListener((item) => {
+          if (item[moduleIdSymbol] === this._dynamicModuleId) {
+            this._handleItemMoved(item, category);
+          }
+        }),
+      );
     }
 
     /** @type {ManagedCategory} */
     const managedCategory = reactive({
       ...options,
-      get categoryName() { return category.name; },
+      get categoryName() {
+        return category.name;
+      },
       selection: [],
       title: category.title,
       items: [],
       destroy() {
-        listeners.forEach((cb) => { cb(); });
+        listeners.forEach((cb) => {
+          cb();
+        });
         this.items.forEach((item) => {
           if (item.destroy) {
             item.destroy();
@@ -365,9 +385,13 @@ class CategoryManager {
     if (this._managedCategoryOptions.has(categoryName)) {
       const managedCategory = this.get(categoryName);
       if (managedCategory) {
-        const pluginNames = [...this._app.plugins].map(p => p.name);
-        const options = [...this._managedCategoryOptions.get(categoryName).entries()]
-          .sort(([ownerA], [ownerB]) => sortByOwner(ownerA, ownerB, pluginNames))
+        const pluginNames = [...this._app.plugins].map((p) => p.name);
+        const options = [
+          ...this._managedCategoryOptions.get(categoryName).entries(),
+        ]
+          .sort(([ownerA], [ownerB]) =>
+            sortByOwner(ownerA, ownerB, pluginNames),
+          )
           .map(([, value]) => value)
           .reduce(reduceCategoryOptions, { actions: [] });
         Object.assign(managedCategory, options);
@@ -404,7 +428,10 @@ class CategoryManager {
     check(owner, [String, Symbol]);
 
     const { categoryName } = managedCategoryOptions;
-    if (managedCategoryOptions.actions && !validateActions(managedCategoryOptions.actions)) {
+    if (
+      managedCategoryOptions.actions &&
+      !validateActions(managedCategoryOptions.actions)
+    ) {
       throw new Error('Invalid actions Array');
     }
     if (!this._app.categories.hasKey(categoryName)) {
@@ -412,13 +439,21 @@ class CategoryManager {
     }
 
     if (this._managedCategoryOptions.get(categoryName)?.has(owner)) {
-      throw new Error(`Category has already been added by this owner: ${categoryName}, ${owner}`);
+      throw new Error(
+        `Category has already been added by this owner: ${categoryName}, ${owner}`,
+      );
+    }
+    if (managedCategoryOptions.draggable) {
+      const { collection } = this._app.categories.getByKey(categoryName);
+      managedCategoryOptions.draggable =
+        collection instanceof IndexedCollection;
     }
 
     /** @type {ManagedCategoryOptions} */
     const clonedOptions = {
       categoryName,
       actions: managedCategoryOptions.actions?.slice?.() ?? [],
+      draggable: managedCategoryOptions.draggable,
       selectable: managedCategoryOptions.selectable,
       singleSelect: managedCategoryOptions.singleSelect,
     };
@@ -489,10 +524,17 @@ class CategoryManager {
     if (categoryNames.length === 0) {
       throw new Error('Provide at least one categoryName');
     }
-    if (this._itemMappings.find((itemMapping) => {
-      return itemMapping.mappingFunction === mappingFunction && itemMapping.owner === owner;
-    })) {
-      throw new Error('Could not add MappingFunction, the MappingFunction is already under management');
+    if (
+      this._itemMappings.find((itemMapping) => {
+        return (
+          itemMapping.mappingFunction === mappingFunction &&
+          itemMapping.owner === owner
+        );
+      })
+    ) {
+      throw new Error(
+        'Could not add MappingFunction, the MappingFunction is already under management',
+      );
     }
     /** @type {ItemMapping} */
     const itemMapping = {
@@ -519,7 +561,10 @@ class CategoryManager {
     check(owner, [String, Symbol]);
     const affectedCategories = [];
     this._itemMappings = this._itemMappings.filter((itemMapping) => {
-      if (itemMapping.mappingFunction === mappingFunction && itemMapping.owner === owner) {
+      if (
+        itemMapping.mappingFunction === mappingFunction &&
+        itemMapping.owner === owner
+      ) {
         affectedCategories.push(...itemMapping.categoryNames);
         return false;
       }
@@ -552,10 +597,9 @@ class CategoryManager {
         this._removeCategory(categoryName);
       }
     });
-    this._itemMappings = this._itemMappings
-      .filter((itemMapping) => {
-        return itemMapping.owner !== owner;
-      });
+    this._itemMappings = this._itemMappings.filter((itemMapping) => {
+      return itemMapping.owner !== owner;
+    });
     this._resetManagedCategories();
   }
 
@@ -563,8 +607,9 @@ class CategoryManager {
    * Clears the manager of all added categories and item mappings
    */
   clear() {
-    [...this.componentIds]
-      .forEach((categoryName) => { this._removeCategory(categoryName); });
+    [...this.componentIds].forEach((categoryName) => {
+      this._removeCategory(categoryName);
+    });
     this._itemMappings = [];
   }
 

package/src/manager/contextMenu/contextMenuComponent.vue

@@ -1,9 +1,6 @@
 <template>
   <div @click.stop="close">
-    <VcsActionList
-      :actions="actions"
-      :show-icon="true"
-    />
+    <VcsActionList :actions="actions" :show-icon="true" />
   </div>
 </template>
 
@@ -39,5 +36,4 @@
   };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>