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

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

@@ -1,31 +1,34 @@
 <template>
   <div>
-    <div
-      class="overflow-auto"
-    >
+    <div class="overflow-auto">
       <Category
         v-for="category in categories"
         :key="category"
         :category-name="category"
       />
     </div>
-    <hr>
-    <span>
-      <VcsButton icon="$vcsPlus" @click="newDialog = true" />
-      <VcsButton icon="$vcsExport" @click="uploadDialog = true" />
-      <VcsButton @click="addManagedCategories">Add Categories To Manager</VcsButton>
-      <VcsButton @click="addFoobar">Add Foobar</VcsButton>
-    </span>
-    <v-dialog
-      v-model="newDialog"
-    >
-      <v-card
-        class="pa-2"
-      >
-        <v-form
-          @submit.prevent="add"
+    <hr />
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2">
+        <VcsFormButton icon="$vcsPlus" @click="newDialog = true" />
+        <VcsFormButton icon="$vcsExport" @click="uploadDialog = true" />
+      </div>
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton @click="addManagedCategories" variant="filled"
+          >Add Categories</VcsFormButton
         >
-          <v-select v-model="newCategory.type" :items="['Category', 'AppBackedCategory']" />
+        <VcsFormButton @click="addFoobar" variant="filled"
+          >Add Foobar</VcsFormButton
+        >
+      </div>
+    </div>
+    <v-dialog v-model="newDialog">
+      <v-card class="pa-2">
+        <v-form @submit.prevent="add">
+          <v-select
+            v-model="newCategory.type"
+            :items="['Category', 'AppBackedCategory']"
+          />
           <v-select
             v-model="newCategory.collectionName"
             v-if="newCategory.type === 'category.AppBackedCategory'"
@@ -33,23 +36,15 @@
             placeholder="Collection Name"
           />
           <v-text-field v-model="newCategory.name" v-else />
-          <v-btn type="submit">
-            Add
-          </v-btn>
+          <v-btn type="submit"> Add </v-btn>
         </v-form>
       </v-card>
     </v-dialog>
-    <v-dialog
-      v-model="uploadDialog"
-    >
+    <v-dialog v-model="uploadDialog">
       <v-card>
-        <v-form
-          @submit.prevent="upload"
-        >
+        <v-form @submit.prevent="upload">
           <v-textarea v-model="uploadString" />
-          <v-btn type="submit">
-            Upload
-          </v-btn>
+          <v-btn type="submit"> Upload </v-btn>
         </v-form>
       </v-card>
     </v-dialog>
@@ -58,7 +53,7 @@
 
 <script>
   import { inject, ref, onUnmounted } from 'vue';
-  import { VcsButton } from '@vcmap/ui';
+  import { VcsFormButton } from '@vcmap/ui';
   import { GeoJSONLayer } from '@vcmap/core';
   import {
     VDialog,
@@ -76,7 +71,7 @@
     name: 'CategoriesComponent',
     components: {
       Category,
-      VcsButton,
+      VcsFormButton,
       VDialog,
       VCard,
       VForm,
@@ -87,7 +82,7 @@
     },
     setup() {
       const app = inject('vcsApp');
-      const categories = ref([...app.categories].map(c => c.name));
+      const categories = ref([...app.categories].map((c) => c.name));
       const newDialog = ref(false);
       const uploadDialog = ref(false);
       const uploadString = ref('');
@@ -98,15 +93,17 @@
       });
       const listeners = [
         app.categories.added.addEventListener(() => {
-          categories.value = [...app.categories].map(c => c.name);
+          categories.value = [...app.categories].map((c) => c.name);
         }),
         app.categories.removed.addEventListener(() => {
-          categories.value = [...app.categories].map(c => c.name);
+          categories.value = [...app.categories].map((c) => c.name);
         }),
       ];
 
       onUnmounted(() => {
-        listeners.forEach((cb) => { cb(); });
+        listeners.forEach((cb) => {
+          cb();
+        });
       });
 
       return {
@@ -129,10 +126,18 @@
               type: 'Category',
               title: 'Foobar',
             });
-            app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
-            app.categoryManager.addMappingFunction(() => true, (item, c, listItem) => {
-              listItem.title = item.name;
-            }, [category.name], packageJSON.name);
+            app.categoryManager.add(
+              { categoryName: category.name, draggable: true },
+              packageJSON.name,
+            );
+            app.categoryManager.addMappingFunction(
+              () => true,
+              (item, c, listItem) => {
+                listItem.title = item.name;
+              },
+              [category.name],
+              packageJSON.name,
+            );
             for (let i = 0; i <= 12; i++) {
               category.collection.add({
                 name: `foobar-${i}`,
@@ -145,13 +150,18 @@
           if (newCategoryValue.type === 'AppBackedCategory') {
             newCategoryValue.name = newCategoryValue.collectionName;
           }
-          const category = await app.categories.requestCategory(newCategoryValue);
+          const category = await app.categories.requestCategory(
+            newCategoryValue,
+          );
           newCategory.value = {
             name: 'new',
             type: 'Category',
             collectionName: null,
           };
-          app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
+          app.categoryManager.add(
+            { categoryName: category.name },
+            packageJSON.name,
+          );
           newDialog.value = false;
         },
         async upload() {
@@ -161,11 +171,21 @@
               console.error('must provide name');
               return;
             }
-            const category = await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
+            const category = await app.categories.requestCategory({
+              name: jsonUpload.name,
+              type: 'Category',
+            });
             if (jsonUpload?.items?.length > 0) {
-              await app.categories.parseCategoryItems(jsonUpload.name, jsonUpload.items, app.dynamicContextId);
+              await app.categories.parseCategoryItems(
+                jsonUpload.name,
+                jsonUpload.items,
+                app.dynamicModuleId,
+              );
             }
-            app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
+            app.categoryManager.add(
+              { categoryName: category.name },
+              packageJSON.name,
+            );
             uploadString.value = '';
             uploadDialog.value = false;
           } catch (e) {
@@ -176,80 +196,87 @@
           if (!app.categories.hasKey('layers')) {
             const layersCat = await app.categories.requestCategory({
               name: 'layers',
-              type: 'AppBackedCategory',
+              type: 'Category',
               collectionName: 'layers',
               title: 'categories.layers',
             });
-            const actions = [{
-              name: 'mySuperAction',
-              icon: 'mdi-plus',
-              callback: () => {
-                layersCat.collection.add(new GeoJSONLayer({
-                  features: [
-                    {
-                      type: 'Feature',
-                      properties: {},
-                      geometry: {
-                        type: 'Polygon',
-                        coordinates: [
-                          [
-                            [
-                              13.376044753386196,
-                              52.51700747314845,
-                              34.434221826595746,
-                            ],
-                            [
-                              13.375890137534464,
-                              52.51683412207231,
-                              34.43535288837092,
-                            ],
-                            [
-                              13.376141126603242,
-                              52.51641627693124,
-                              34.66410424636929,
-                            ],
-                            [
-                              13.376773170085109,
-                              52.516279904694215,
-                              34.73478984011562,
-                            ],
-                            [
-                              13.376887028670879,
-                              52.51695485856382,
-                              34.72412287410914,
-                            ],
-                            [
-                              13.376044753386196,
-                              52.51700747314845,
-                              34.434221826595746,
-                            ],
-                          ],
-                        ],
-                      },
-                    }],
-                }));
-              },
-            }];
-            app.categoryManager.add({ categoryName: layersCat.name, actions }, packageJSON.name);
-            app.categoryManager.addMappingFunction(() => true, (item, category, treeViewItem) => {
-              // eslint-disable-next-line no-console
-              const action = {
+            const actions = [
+              {
                 name: 'mySuperAction',
-                icon: '$vcsSimpleCircleFilled',
+                icon: 'mdi-plus',
                 callback: () => {
-                  console.log(item, category, treeViewItem);
-                },
-              };
-              treeViewItem.actions.push(action);
-              const action2 = {
-                name: 'mySuperAction3',
-                icon: 'mdi-minus',
-                callback: () => {
-                  category.collection.remove(item);
+                  layersCat.collection.add(
+                    new GeoJSONLayer({
+                      features: [
+                        {
+                          type: 'Feature',
+                          properties: {},
+                          geometry: {
+                            type: 'Polygon',
+                            coordinates: [
+                              [
+                                [
+                                  13.376044753386196, 52.51700747314845,
+                                  34.434221826595746,
+                                ],
+                                [
+                                  13.375890137534464, 52.51683412207231,
+                                  34.43535288837092,
+                                ],
+                                [
+                                  13.376141126603242, 52.51641627693124,
+                                  34.66410424636929,
+                                ],
+                                [
+                                  13.376773170085109, 52.516279904694215,
+                                  34.73478984011562,
+                                ],
+                                [
+                                  13.376887028670879, 52.51695485856382,
+                                  34.72412287410914,
+                                ],
+                                [
+                                  13.376044753386196, 52.51700747314845,
+                                  34.434221826595746,
+                                ],
+                              ],
+                            ],
+                          },
+                        },
+                      ],
+                    }),
+                  );
                 },
-              };
-              treeViewItem.actions.push(action2);
-            }, ['layers'], packageJSON.name);
+              },
+            ];
+            app.categoryManager.add(
+              { categoryName: layersCat.name, actions, draggable: true },
+              packageJSON.name,
+            );
+            app.categoryManager.addMappingFunction(
+              () => true,
+              (item, category, treeViewItem) => {
+                // eslint-disable-next-line no-console
+                const action = {
+                  name: 'mySuperAction',
+                  icon: '$vcsSimpleCircleFilled',
+                  callback: () => {
+                    console.log(item, category, treeViewItem);
+                  },
+                };
+                treeViewItem.actions.push(action);
+                const action2 = {
+                  name: 'mySuperAction3',
+                  icon: 'mdi-minus',
+                  callback: () => {
+                    category.collection.remove(item);
+                  },
+                };
+                treeViewItem.actions.push(action2);
+              },
+              ['layers'],
+              packageJSON.name,
+            );
           }
         },
       };
@@ -258,7 +285,7 @@
 </script>
 
 <style scoped>
-.max-height {
-  max-height: 50%;
-}
+  .max-height {
+    max-height: 50%;
+  }
 </style>

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

@@ -5,13 +5,27 @@
         {{ categoryName }}
       </span>
       <span class="float-right">
-        <vcs-button icon="$vcsPlus" @click="dialog = true" />
-        <vcs-button icon="mdi-download" @click="download" />
-        <a :href="downloadLink" target="_blank" ref="link" download="category.json" />
+        <vcs-button
+          small
+          icon="$vcsPlus"
+          @click.stop="dialog = true"
+          class="ma-1"
+        />
+        <vcs-button
+          small
+          icon="mdi-download"
+          @click.stop="download"
+          class="ma-1"
+        />
+        <a
+          :href="downloadLink"
+          target="_blank"
+          ref="link"
+          download="category.json"
+        />
       </span>
     </span>
 
-
     <v-virtual-scroll
       item-height="44px"
       v-if="open"
@@ -20,11 +34,8 @@
       :bench="6"
       width="100%"
     >
-      <template #default="{item}">
-        <v-list-item
-          :key="item.name"
-          class="mb-1"
-        >
+      <template #default="{ item }">
+        <v-list-item :key="item.name" class="mb-1">
           <v-list-item-content>
             <v-list-item-title class="subtitle-1">
               {{ item.name }}
@@ -34,17 +45,11 @@
         </v-list-item>
       </template>
     </v-virtual-scroll>
-    <v-dialog
-      v-model="dialog"
-    >
+    <v-dialog v-model="dialog">
       <v-card>
-        <v-form
-          @submit.prevent="addItem"
-        >
+        <v-form @submit.prevent="addItem">
           <v-textarea v-model="jsonString" />
-          <vcs-button type="submit">
-            Add
-          </vcs-button>
+          <vcs-button type="submit"> Add </vcs-button>
         </v-form>
       </v-card>
     </v-dialog>
@@ -66,14 +71,12 @@
     VCard,
     VForm,
     VTextarea,
-    VBtn,
   } from 'vuetify/lib';
 
   export default {
     name: 'CategoryComponent',
     components: {
       VcsButton,
-      VSheet,
       VVirtualScroll,
       VListItem,
       VListItemContent,
@@ -84,7 +87,6 @@
       VForm,
       VTextarea,
       VSheet,
-      VBtn,
     },
     props: {
       categoryName: {
@@ -102,7 +104,10 @@
       const open = ref(true);
       const link = ref(null);
       if (categoryObject) {
-        category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
+        category.value = [...categoryObject.collection].map((c) => ({
+          name: c.name,
+          type: c.className || 'Object',
+        }));
       }
 
       return {
@@ -116,11 +121,19 @@
           try {
             const config = JSON.parse(jsonString.value);
             if (categoryObject.classRegistryName) {
-              categoryObject.collection.add(getObjectFromClassRegistry(app[categoryObject.classRegistryName], config));
+              categoryObject.collection.add(
+                getObjectFromClassRegistry(
+                  app[categoryObject.classRegistryName],
+                  config,
+                ),
+              );
             } else {
               categoryObject.collection.add(config);
             }
-            category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
+            category.value = [...categoryObject.collection].map((c) => ({
+              name: c.name,
+              type: c.className || 'Object',
+            }));
             jsonString.value = '{\n}';
           } catch (e) {
             // eslint-disable-next-line no-console
@@ -129,8 +142,14 @@
           dialog.value = false;
         },
         download() {
-          const stringObject = JSON.stringify(categoryObject.serializeForContext(app.dynamicContextId), null, 2);
-          downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
+          const stringObject = JSON.stringify(
+            categoryObject.serializeModule(app.dynamicModuleId),
+            null,
+            2,
+          );
+          downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(
+            stringObject,
+          )}`;
           if (downloadLink.value) {
             nextTick(() => {
               link.value.click();
@@ -142,6 +161,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -7,9 +7,15 @@ import Categories from './Categories.vue';
  */
 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(
         {

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

@@ -0,0 +1,62 @@
+<template>
+  <v-container class="py-0 px-1">
+    <VcsTextArea v-model="configString" v-if="!loading" />
+    <v-progress-circular v-else />
+
+    <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 { VcsTextArea, VcsFormButton } from '@vcmap/ui';
+  import { VcsModule } from '@vcmap/core';
+  import { VContainer, VProgressCircular } from 'vuetify/lib';
+
+  const moduleId = 'foo';
+
+  export default {
+    name: 'ConfigEditor',
+    components: {
+      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 loading = ref(false);
+
+      return {
+        configString,
+        loading,
+        async replaceModule() {
+          loading.value = true;
+          const config = JSON.parse(configString.value);
+          config.id = moduleId;
+          const newModule = new VcsModule(config);
+          await this.removeModule();
+          await app.addModule(newModule);
+          loading.value = false;
+        },
+        async removeModule() {
+          if (app.getModuleById(moduleId)) {
+            await app.removeModule(moduleId);
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<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',