@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/src/manager/buttonManager.js

@@ -1,14 +1,25 @@
-/* eslint-disable import/prefer-default-export */
-import { reactive } from '@vue/composition-api';
+import { reactive } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { check, checkMaybe } from '@vcsuite/check';
 import { vcsAppSymbol } from '../pluginHelper.js';
+import { ActionPattern } from '../components/lists/VcsActionList.vue';
+import { getActionFromOptions } from '../actions/actionHelper.js';
+
+/**
+ * @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 +27,7 @@ import { vcsAppSymbol } from '../pluginHelper.js';
  * @property {string} id
  * @property {string|vcsAppSymbol} owner
  * @property {VcsAction} action
+ * @property {number} weight
  */
 
 /**
@@ -23,7 +35,7 @@ import { vcsAppSymbol } from '../pluginHelper.js';
  * @description Manages a set of Map Buttons
  * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
  */
-export class ButtonManager {
+class ButtonManager {
   constructor() {
     /**
      * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
@@ -37,8 +49,7 @@ export class ButtonManager {
      * reactive ordered array of ids,
      * @type {Array<string>}
      */
-    this.componentIds = reactive([]);
-
+    this.componentIds = [];
     /**
      * @type {Map<string, ButtonComponent>}
      * @private
@@ -46,7 +57,6 @@ export class ButtonManager {
     this._buttonComponents = new Map();
   }
 
-
   /**
    * @param {string} id
    * @returns {ButtonComponent}
@@ -88,19 +98,17 @@ export class ButtonManager {
    */
   add(buttonComponentOptions, owner) {
     checkMaybe(buttonComponentOptions.id, String);
-    check(buttonComponentOptions.action, {
-      name: String,
-      title: [undefined, String],
-      icon: [undefined, String],
-      callback: Function,
-      active: [undefined, Boolean],
-    });
+    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();
+    const action = getActionFromOptions(buttonComponentOptions.action);
 
     /**
      * @type {ButtonComponent}
@@ -113,7 +121,14 @@ export class ButtonManager {
         return owner;
       },
       get action() {
-        return reactive(buttonComponentOptions.action);
+        return reactive(action);
+      },
+      get weight() {
+        return buttonComponentOptions.weight || 0;
+      },
+      set weight(value) {
+        check(value, Number);
+        buttonComponentOptions.weight = value;
       },
     };
 
@@ -141,7 +156,9 @@ export class ButtonManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**
@@ -154,3 +171,5 @@ export class ButtonManager {
     this._buttonComponents.clear();
   }
 }
+
+export default ButtonManager;

package/src/manager/collectionManager/CollectionComponent.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-expansion-panel>
+    <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"
+            :overflow-count="overflowCount"
+          />
+        </div>
+      </template>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content class="pb-1">
+      <vcs-list
+        :items="items.slice(0, limit)"
+        :draggable="draggable"
+        :selectable="selectable"
+        :single-select="singleSelect"
+        v-model="selection"
+        :show-title="false"
+        @item-moved="move"
+      />
+      <v-sheet v-if="items.length > limit" 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 } from 'vue';
+  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';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  import { WindowSlot } from '../window/windowManager.js';
+  import CollectionComponentList, {
+    moveItem,
+  } from './CollectionComponentList.vue';
+
+  /**
+   * @description
+   * 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`;
+
+      return {
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        overflowCount: collectionComponent.overflowCount,
+        limit: collectionComponent.limit,
+        actions: collectionComponent.getActions(),
+        move({ item, targetIndex }) {
+          moveItem(collectionComponent, item, targetIndex);
+        },
+        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,77 @@
+<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';
+
+  /**
+   * Moves an item to a new position.
+   * New position is derived from a target item in the collection.
+   * This ensures correct movement, if rendered list is only a subset of the collection.
+   * @param {CollectionComponent} collectionComponent
+   * @param {VcsListItem} item
+   * @param {number} targetIndex
+   */
+  export function moveItem(collectionComponent, item, targetIndex) {
+    const { collection } = collectionComponent;
+    if (collection instanceof IndexedCollection) {
+      const collectionItem = collection.getByKey(item.name);
+      const keyProperty = collection.uniqueKey;
+      const targetItem = collectionComponent.items.value[targetIndex];
+      const targetIndexCol = [...collection].findIndex(
+        (i) => i[keyProperty] === targetItem[keyProperty],
+      );
+      collection.moveTo(collectionItem, targetIndexCol);
+    }
+  }
+
+  /**
+   * @description
+   * 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 }.
+   * @vue-prop {string} windowId
+   */
+  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 }) {
+          moveItem(collectionComponent, item, targetIndex);
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="w-full">
+    <slot>
+      <collection-component />
+    </slot>
+  </div>
+</template>
+
+<script>
+  import { inject, provide } from 'vue';
+  import CollectionComponent from './CollectionComponent.vue';
+
+  /**
+   * @description Provides a CollectionComponent of a CollectionManager.
+   * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   * @vue-prop {string} componentId - ID of the collectionComponent to be provided
+   * @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,62 @@
+<template>
+  <v-container class="pa-0">
+    <v-expansion-panels
+      accordion
+      multiple
+      v-if="componentIds.length > 0"
+      v-model="panels"
+      class="rounded-0"
+    >
+      <collection-component-provider
+        v-for="componentId in componentIds"
+        :component-id="componentId"
+        :key="componentId"
+      />
+    </v-expansion-panels>
+  </v-container>
+</template>
+
+<script>
+  import { computed, inject, ref } from 'vue';
+  import { VExpansionPanels, VContainer } from 'vuetify/lib';
+  import CollectionComponentProvider from './CollectionComponentProvider.vue';
+
+  /**
+   * @description 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);
+
+      /**
+       * @type {WritableComputedRef<number[]>}
+       */
+      const panels = computed({
+        get() {
+          return [...Array(componentIds.value.length).keys()].filter(
+            (p, idx) =>
+              !!collectionManager.get(componentIds.value[idx]).open.value,
+          );
+        },
+        set(value) {
+          componentIds.value.forEach((id, idx) => {
+            collectionManager.get(id).open.value = value.includes(idx);
+          });
+        },
+      });
+
+      return {
+        componentIds,
+        panels,
+      };
+    },
+  };
+</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;