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

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,12 +17,12 @@
           <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) }}
               </div>
-              <VcsActionButtonList small :actions="entry.actions" />
+              <VcsActionButtonList :actions="entry.actions" />
             </div>
           </template>
         </v-expansion-panel-header>
@@ -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

@@ -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
  */
 
 /**
@@ -45,7 +56,6 @@ class ButtonManager {
     this._buttonComponents = new Map();
   }
 
-
   /**
    * @param {string} id
    * @returns {ButtonComponent}
@@ -87,11 +97,14 @@ class ButtonManager {
    */
   add(buttonComponentOptions, owner) {
     checkMaybe(buttonComponentOptions.id, String);
+    checkMaybe(buttonComponentOptions.weight, Number);
     check(buttonComponentOptions.action, ActionPattern);
     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();
 
@@ -108,6 +121,9 @@ class ButtonManager {
       get action() {
         return reactive(buttonComponentOptions.action);
       },
+      get weight() {
+        return buttonComponentOptions.weight || 0;
+      },
     };
 
     this._buttonComponents.set(id, buttonComponent);
@@ -134,7 +150,9 @@ class ButtonManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**

package/src/manager/collectionManager/CollectionComponent.vue

@@ -0,0 +1,142 @@
+<template>
+  <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(title) }}
+          </div>
+          <VcsActionButtonList v-if="actions?.length > 0" :actions="actions" />
+        </div>
+      </template>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content class="pb-1">
+      <vcs-list
+        :items="items.slice(0, 10)"
+        :draggable="draggable"
+        :selectable="selectable"
+        :single-select="singleSelect"
+        v-model="selection"
+        :show-title="false"
+        @item-moved="move"
+      />
+      <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="items.length === 0" class="ma-2 pl-2">
+        {{ $t('collectionManager.empty') }}
+      </v-sheet>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<script>
+  import { inject, ref } from 'vue';
+  import {
+    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';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  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: 'CollectionComponent',
+    components: {
+      VcsActionButtonList,
+      VcsButton,
+      VcsList,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VSheet,
+      VIcon,
+    },
+    setup() {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      /**
+       * @type {CollectionComponent}
+       */
+      const collectionComponent = inject('collectionComponent');
+      const windowId = `${collectionComponent.id}-list`;
+      const active = ref(false);
+
+      return {
+        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,
+        openCollectionComponentList() {
+          if (app.windowManager.has(windowId)) {
+            setTimeout(() => {
+              app.windowManager.bringWindowToTop(windowId);
+            }, 0);
+          } else {
+            app.windowManager.add(
+              {
+                id: windowId,
+                component: CollectionComponentList,
+                props: {
+                  windowId,
+                },
+                provides: {
+                  collectionComponent,
+                },
+                slot: WindowSlot.DYNAMIC_LEFT,
+              },
+              vcsAppSymbol,
+            );
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .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>

package/src/manager/collectionManager/categoryManager.js

@@ -0,0 +1,83 @@
+import { moduleIdSymbol } from '@vcmap/core';
+import { vcsAppSymbol } from '../../pluginHelper.js';
+import CollectionManager from './collectionManager.js';
+
+/**
+ * Manages all requested category collections.
+ * Provides an API to add/remove collectionsComponents.
+ * @implements {VcsComponentManager<CollectionComponent, CollectionComponentOptions>}
+ * @extends CollectionManager
+ */
+class CategoryManager extends CollectionManager {
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   */
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   */
+  constructor(app) {
+    super();
+
+    /**
+     * @type {import("@vcmap/ui").VcsUiApp}
+     * @private
+     */
+    this._app = app;
+    /**
+     * @type {string}
+     * @private
+     */
+    this._dynamicModuleId = this._app.dynamicModuleId;
+
+    this._dynamicModuleIdFilter = (item) =>
+      item[moduleIdSymbol] === this._dynamicModuleId;
+
+    this.addFilterFunction(this._dynamicModuleIdFilter, vcsAppSymbol);
+
+    this._categoryListeners = [
+      this._app.dynamicModuleIdChanged.addEventListener((id) => {
+        this._dynamicModuleId = id;
+        this.reset();
+      }),
+      this._app.categories.removed.addEventListener((category) => {
+        const collectionComponents = this.getCollection(category.collection);
+        collectionComponents.forEach(({ id }) => this.remove(id));
+      }),
+    ];
+  }
+
+  /**
+   * Requests a new or existing category and adds its collection to this manager.
+   * The collectionComponent's id is always the category's name.
+   * Returns requested category and its corresponding collectionComponent.
+   * @param {import("@vcmap/core").CategoryOptions} options
+   * @param {string|symbol} owner
+   * @param {CollectionComponentUiOptions} collectionComponentOptions
+   * @return {{ collectionComponent:CollectionComponent,category:import("@vcmap/core").Category }}
+   */
+  async requestCategory(options, owner, collectionComponentOptions = {}) {
+    const category = await this._app.categories.requestCategory(options);
+    const id = category.name;
+    if (this.has(id)) {
+      const collectionComponent = this.get(id);
+      return { collectionComponent, category };
+    }
+    const collectionComponent = this.add(
+      {
+        ...collectionComponentOptions,
+        id,
+        title: collectionComponentOptions.title ?? category.title ?? id,
+        collection: category.collection,
+      },
+      owner,
+    );
+    return { collectionComponent, category };
+  }
+
+  destroy() {
+    super.destroy();
+    this._categoryListeners.forEach((cb) => cb());
+  }
+}
+
+export default CategoryManager;