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

package/plugins/@vcmap-show-case/category-tester/CollectionComponentOptions.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <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">
+        <v-container class="py-0 px-2">
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="title" dense>
+                {{ $t('categoryTester.title') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField id="title" clearable dense v-model="title" />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="draggable" dense>
+                {{ $t('categoryTester.draggable') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsCheckbox id="draggable" dense v-model="draggable" />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="selectable" dense>
+                {{ $t('categoryTester.selectable') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsCheckbox id="selectable" dense v-model="selectable" />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="singleSelect" dense>
+                {{ $t('categoryTester.singleSelect') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsCheckbox id="singleSelect" dense v-model="singleSelect" />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-dialog v-model="dialog" width="300">
+      <v-card class="pa-2">
+        <v-form @submit.prevent="addItem">
+          <vcs-text-area v-model="jsonString" />
+          <vcs-form-button type="submit"> Add </vcs-form-button>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+  import { inject, ref } from 'vue';
+  import {
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VIcon,
+    VContainer,
+    VRow,
+    VCol,
+    VDialog,
+    VCard,
+    VForm,
+  } from 'vuetify/lib';
+  import {
+    VcsCheckbox,
+    VcsLabel,
+    VcsTextField,
+    VcsTextArea,
+    VcsActionButtonList,
+    VcsFormButton,
+    downloadText,
+  } from '@vcmap/ui';
+  import { getObjectFromClassRegistry } from '@vcmap/core';
+
+  /**
+   * Shows CollectionComponentOptions of a provided collectionComponent
+   */
+  export default {
+    name: 'CollectionComponent',
+    components: {
+      VcsFormButton,
+      VcsActionButtonList,
+      VcsCheckbox,
+      VcsLabel,
+      VcsTextField,
+      VcsTextArea,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VIcon,
+      VContainer,
+      VRow,
+      VCol,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      /**
+       * @type {CollectionComponent}
+       */
+      const collectionComponent = inject('collectionComponent');
+      const category = app.categories.getByKey(collectionComponent.id);
+      const active = ref(false);
+      const dialog = ref(false);
+      const jsonString = ref(JSON.stringify({ name: 'newItem' }, null, 2));
+
+      async function addItem() {
+        try {
+          const config = JSON.parse(jsonString.value);
+          if (category.classRegistryName) {
+            category.collection.add(
+              getObjectFromClassRegistry(
+                app[category.classRegistryName],
+                config,
+              ),
+            );
+          } else {
+            category.collection.add(config);
+          }
+          jsonString.value = JSON.stringify({ name: 'newItem' }, null, 2);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('invalid JSON');
+        }
+        dialog.value = false;
+      }
+
+      function download() {
+        const stringObject = JSON.stringify(
+          category.serializeModule(app.dynamicModuleId),
+          null,
+          2,
+        );
+        downloadText(stringObject, `${category.name}.json`);
+      }
+
+      const actions = [
+        {
+          name: 'add',
+          icon: '$vcsPlus',
+          callback() {
+            dialog.value = true;
+          },
+        },
+        {
+          name: 'download',
+          icon: 'mdi-download',
+          callback: download,
+        },
+      ];
+
+      return {
+        title: collectionComponent.title,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        active,
+        dialog,
+        jsonString,
+        actions,
+        addItem,
+      };
+    },
+  };
+</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/plugins/@vcmap-show-case/category-tester/index.js

@@ -1,15 +1,21 @@
 import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from './package.json';
-import Categories from './Categories.vue';
+import Categories from './CategoriesExample.vue';
 
 /**
  * @returns {VcsPlugin}
  */
 export default async function categoryTest() {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     initialize(app) {
       const { action, destroy } = createToggleAction(
         {
@@ -39,6 +45,24 @@ export default async function categoryTest() {
       );
       this._destroyAction = destroy;
     },
+    i18n: {
+      de: {
+        categoryTester: {
+          title: 'Titel',
+          draggable: 'verschiebbar',
+          selectable: 'selektierbar',
+          singleSelect: 'Einfachauswahl',
+        },
+      },
+      en: {
+        categoryTester: {
+          title: 'Title',
+          draggable: 'draggable',
+          selectable: 'selectable',
+          singleSelect: 'single select',
+        },
+      },
+    },
     destroy() {
       if (this._destroyAction) {
         this._destroyAction();

package/plugins/@vcmap-show-case/collection-manager-example/CollectionManagerExample.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <VcsFormSection heading="Collection Manager" v-if="componentIds.length > 0">
+      <CollectionManagerComponent />
+    </VcsFormSection>
+    <VcsFormSection heading="Tester Settings">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <VcsLabel html-for="selectInput" dense>
+              {{ $t('collectionManagerExample.select') }}
+            </VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsSelect
+              id="selectInput"
+              :items="appCollections"
+              dense
+              v-model="selected"
+            />
+          </v-col>
+        </v-row>
+        <div class="d-flex gap-2 w-full justify-end">
+          <VcsFormButton @click="addCollection" variant="filled"
+            >Add Collection</VcsFormButton
+          >
+          <VcsFormButton @click="clear">Clear</VcsFormButton>
+        </div>
+      </v-container>
+    </VcsFormSection>
+  </div>
+</template>
+
+<script>
+  import { inject, onMounted, onUnmounted, ref } from 'vue';
+  import {
+    VcsFormSection,
+    CollectionManagerComponent,
+    VcsFormButton,
+    VcsSelect,
+    VcsLabel,
+    NotificationType,
+  } from '@vcmap/ui';
+  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { name as owner } from './package.json';
+
+  /**
+   * a sample mapping function adding a console log to all list items
+   * @param {T} i
+   * @param {CollectionComponent} c
+   * @param {VcsListItem} l
+   */
+  const mappingFunction = (i, c, l) => {
+    l.actions = [
+      ...l.actions,
+      {
+        name: 'console.log',
+        title: 'log item, collectionComponent and listItem',
+        icon: 'mdi-printer',
+        callback: () => console.log(i, c, l),
+      },
+    ];
+  };
+
+  export default {
+    name: 'CollectionManagerExample',
+    components: {
+      VcsFormSection,
+      CollectionManagerComponent,
+      VcsFormButton,
+      VcsLabel,
+      VcsSelect,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const collectionManager = inject('collectionManager');
+      const componentIds = ref(collectionManager.componentIds);
+      const appCollections = [
+        'maps',
+        'layers',
+        'obliqueCollections',
+        'styles',
+        'featureInfo',
+        'plugins',
+        'viewpoints',
+      ];
+      const selected = ref(appCollections[0]);
+
+      onMounted(() => {
+        /**
+         * add general mapping function applied to all collections
+         */
+        collectionManager.addMappingFunction(
+          () => true,
+          mappingFunction,
+          owner,
+        );
+      });
+
+      onUnmounted(() => {
+        collectionManager.removeMappingFunction(mappingFunction, owner);
+      });
+
+      /**
+       * add item filter to collection of provided id
+       * @param {string} id
+       */
+      function addFilterActions(id) {
+        /**
+         * Filters all items having an 'a' within title or name
+         * @param {T} item
+         * @returns {boolean}
+         */
+        const filterFunction = (item) =>
+          item?.properties?.title?.includes('a') || item.name.includes('a');
+        collectionManager.addActions(
+          [
+            {
+              name: 'addFilter',
+              title: 'show only items including an "a" in title or name',
+              icon: 'mdi-filter-plus',
+              callback: () => {
+                collectionManager.addFilterFunction(filterFunction, owner, [
+                  id,
+                ]);
+              },
+            },
+            {
+              name: 'removeFilter',
+              title: 'remove filtering',
+              icon: 'mdi-filter-remove',
+              callback: () => {
+                collectionManager.removeFilterFunction(filterFunction, owner);
+              },
+            },
+          ],
+          owner,
+          [id],
+        );
+      }
+
+      /**
+       * add new collection to manager
+       */
+      function addCollection() {
+        if (!collectionManager.has(selected.value)) {
+          collectionManager.add(
+            {
+              id: selected.value,
+              title: selected.value,
+              collection: app[selected.value],
+            },
+            owner,
+          );
+          addFilterActions(selected.value);
+        } else {
+          app.notifier.add({
+            message: 'collectionManagerExample.addFailed',
+            type: NotificationType.ERROR,
+          });
+        }
+      }
+
+      function clear() {
+        collectionManager.clear();
+      }
+
+      return {
+        componentIds,
+        appCollections,
+        selected,
+        addCollection,
+        clear,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/collection-manager-example/README.md

@@ -0,0 +1,3 @@
+# Collection Manager Tester
+
+This is a show-case plugin demonstrating the usage of [Collection Manager](../../../documentation/COLLECTIONS.md).

package/plugins/@vcmap-show-case/collection-manager-example/index.js

@@ -0,0 +1,74 @@
+import {
+  ButtonLocation,
+  createToggleAction,
+  WindowSlot,
+  CollectionManager,
+} from '@vcmap/ui';
+import packageJSON from './package.json';
+import CollectionManagerExample from './CollectionManagerExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function collectionManagerExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
+    initialize(app) {
+      const collectionManager = new CollectionManager(app);
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Collection Manager Tester',
+          title: 'Collection Manager Tester',
+          icon: '$vcsPen',
+        },
+        {
+          id: 'collection-editor',
+          component: CollectionManagerExample,
+          slot: WindowSlot.DETACHED,
+          state: {
+            headerTitle: 'Collection Manager Tester',
+            headerIcon: '$vcsPen',
+          },
+          position: {
+            width: 500,
+          },
+          provides: {
+            collectionManager,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'collection-editor', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    i18n: {
+      de: {
+        select: 'Collection',
+        addFailed: 'Die gewählte Collection wurde bereits hinzugefügt!',
+      },
+      en: {
+        select: 'Collection',
+        addFailed: 'The selected collection is already added!',
+      },
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/collection-manager-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/collection-manager-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/config-editor/{editor.vue → ConfigEditor.vue}

@@ -1,42 +1,40 @@
 <template>
-  <div>
-    <v-textarea
-      v-model="configString"
-      v-if="!loading"
-    />
-    <v-progress-circular
-      v-else
-    />
+  <v-container class="py-0 px-1">
+    <VcsTextArea v-model="configString" v-if="!loading" />
+    <v-progress-circular v-else />
 
-    <VcsButton @click="replaceModule">
-      Apply
-    </VcsButton>
-    <VcsButton @click="removeModule">
-      Remove
-    </VcsButton>
-  </div>
+    <div class="d-flex gap-2 px-1 pt-2 pb-1 justify-end">
+      <VcsFormButton variant="filled" @click="replaceModule">
+        Apply
+      </VcsFormButton>
+      <VcsFormButton @click="removeModule"> Remove </VcsFormButton>
+    </div>
+  </v-container>
 </template>
 
 <script>
   import { ref, inject } from 'vue';
-  import { VcsButton } from '@vcmap/ui';
+  import { VcsTextArea, VcsFormButton } from '@vcmap/ui';
   import { VcsModule } from '@vcmap/core';
-  import { VProgressCircular, VTextarea } from 'vuetify/lib';
+  import { VContainer, VProgressCircular } from 'vuetify/lib';
 
   const moduleId = 'foo';
 
   export default {
-    name: 'Editor',
+    name: 'ConfigEditor',
     components: {
-      VcsButton,
-      VTextarea,
+      VcsFormButton,
+      VcsTextArea,
+      VContainer,
       VProgressCircular,
     },
     setup() {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       const module = app.getModuleById(moduleId);
-      const configString = ref(JSON.stringify(module ? module.config : {}, null, 2));
+      const configString = ref(
+        JSON.stringify(module ? module.config : {}, null, 2),
+      );
       const loading = ref(false);
 
       return {
@@ -61,6 +59,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/plugins/@vcmap-show-case/config-editor/index.js

@@ -1,19 +1,21 @@
-import {
-  ButtonLocation,
-  createToggleAction,
-  WindowSlot,
-} from '@vcmap/ui';
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from './package.json';
-import editor from './editor.vue';
+import ConfigEditor from './ConfigEditor.vue';
 
 /**
  * @returns {VcsPlugin}
  */
-export default async function () {
+export default async function configEditor() {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {
@@ -24,7 +26,7 @@ export default async function () {
           state: {
             headerTitle: 'Config Editor',
           },
-          component: editor,
+          component: ConfigEditor,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         app.windowManager,

package/plugins/@vcmap-show-case/context-menu-tester/index.js

@@ -2,19 +2,27 @@ import packageJSON from './package.json';
 
 export default () => {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     initialize(vcsApp) {
       vcsApp.contextMenuManager.addEventHandler(async (event) => {
-        const actions = [{
-          id: 'foo2',
-          name: 'Log Position',
-          icon: '$vcsInfo',
-          callback() {
-            console.log(event.positionOrPixel);
+        const actions = [
+          {
+            id: 'foo2',
+            name: 'Log Position',
+            icon: '$vcsInfo',
+            callback() {
+              console.log(event.positionOrPixel);
+            },
           },
-        }];
+        ];
         if (event.feature) {
           actions.push({
             id: 'foo',