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

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

@@ -1,291 +0,0 @@
-<template>
-  <div>
-    <div class="overflow-auto">
-      <Category
-        v-for="category in categories"
-        :key="category"
-        :category-name="category"
-      />
-    </div>
-    <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
-        >
-        <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'"
-            :items="appBackedCollectionNames"
-            placeholder="Collection Name"
-          />
-          <v-text-field v-model="newCategory.name" v-else />
-          <v-btn type="submit"> Add </v-btn>
-        </v-form>
-      </v-card>
-    </v-dialog>
-    <v-dialog v-model="uploadDialog">
-      <v-card>
-        <v-form @submit.prevent="upload">
-          <v-textarea v-model="uploadString" />
-          <v-btn type="submit"> Upload </v-btn>
-        </v-form>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-  import { inject, ref, onUnmounted } from 'vue';
-  import { VcsFormButton } from '@vcmap/ui';
-  import { GeoJSONLayer } from '@vcmap/core';
-  import {
-    VDialog,
-    VCard,
-    VForm,
-    VSelect,
-    VTextField,
-    VBtn,
-    VTextarea,
-  } from 'vuetify/lib';
-  import packageJSON from './package.json';
-  import Category from './Category.vue';
-
-  export default {
-    name: 'CategoriesComponent',
-    components: {
-      Category,
-      VcsFormButton,
-      VDialog,
-      VCard,
-      VForm,
-      VSelect,
-      VTextField,
-      VBtn,
-      VTextarea,
-    },
-    setup() {
-      const app = inject('vcsApp');
-      const categories = ref([...app.categories].map((c) => c.name));
-      const newDialog = ref(false);
-      const uploadDialog = ref(false);
-      const uploadString = ref('');
-      const newCategory = ref({
-        name: 'new',
-        type: 'Category',
-        collectionName: null,
-      });
-      const listeners = [
-        app.categories.added.addEventListener(() => {
-          categories.value = [...app.categories].map((c) => c.name);
-        }),
-        app.categories.removed.addEventListener(() => {
-          categories.value = [...app.categories].map((c) => c.name);
-        }),
-      ];
-
-      onUnmounted(() => {
-        listeners.forEach((cb) => {
-          cb();
-        });
-      });
-
-      return {
-        categories,
-        newDialog,
-        newCategory,
-        uploadDialog,
-        uploadString,
-        appBackedCollectionNames: [
-          'layers',
-          'maps',
-          'plugins',
-          'viewpoints',
-          'styles',
-        ],
-        async addFoobar() {
-          if (!app.categories.hasKey('foobar')) {
-            const category = await app.categories.requestCategory({
-              name: 'foobar',
-              type: 'Category',
-              title: 'Foobar',
-            });
-            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}`,
-              });
-            }
-          }
-        },
-        async add() {
-          const { value: newCategoryValue } = newCategory;
-          if (newCategoryValue.type === 'AppBackedCategory') {
-            newCategoryValue.name = newCategoryValue.collectionName;
-          }
-          const category = await app.categories.requestCategory(
-            newCategoryValue,
-          );
-          newCategory.value = {
-            name: 'new',
-            type: 'Category',
-            collectionName: null,
-          };
-          app.categoryManager.add(
-            { categoryName: category.name },
-            packageJSON.name,
-          );
-          newDialog.value = false;
-        },
-        async upload() {
-          try {
-            const jsonUpload = JSON.parse(uploadString.value);
-            if (!jsonUpload.name) {
-              console.error('must provide name');
-              return;
-            }
-            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.dynamicModuleId,
-              );
-            }
-            app.categoryManager.add(
-              { categoryName: category.name },
-              packageJSON.name,
-            );
-            uploadString.value = '';
-            uploadDialog.value = false;
-          } catch (e) {
-            console.error('not a valid JSON');
-          }
-        },
-        async addManagedCategories() {
-          if (!app.categories.hasKey('layers')) {
-            const layersCat = await app.categories.requestCategory({
-              name: 'layers',
-              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, 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,
-            );
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped>
-  .max-height {
-    max-height: 50%;
-  }
-</style>

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

@@ -1,164 +0,0 @@
-<template>
-  <v-sheet>
-    <span class="pa-1 mb-2" @click.stop="open = !open">
-      <span class="headline">
-        {{ categoryName }}
-      </span>
-      <span class="float-right">
-        <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"
-      :height="6 * 44"
-      :items="category"
-      :bench="6"
-      width="100%"
-    >
-      <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 }}
-            </v-list-item-title>
-            <v-list-item-subtitle>{{ item.type }}</v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
-      </template>
-    </v-virtual-scroll>
-    <v-dialog v-model="dialog">
-      <v-card>
-        <v-form @submit.prevent="addItem">
-          <v-textarea v-model="jsonString" />
-          <vcs-button type="submit"> Add </vcs-button>
-        </v-form>
-      </v-card>
-    </v-dialog>
-  </v-sheet>
-</template>
-
-<script>
-  import { inject, nextTick, ref } from 'vue';
-  import { VcsButton } from '@vcmap/ui';
-  import { getObjectFromClassRegistry } from '@vcmap/core';
-  import {
-    VSheet,
-    VVirtualScroll,
-    VListItem,
-    VListItemContent,
-    VListItemTitle,
-    VListItemSubtitle,
-    VDialog,
-    VCard,
-    VForm,
-    VTextarea,
-  } from 'vuetify/lib';
-
-  export default {
-    name: 'CategoryComponent',
-    components: {
-      VcsButton,
-      VVirtualScroll,
-      VListItem,
-      VListItemContent,
-      VListItemTitle,
-      VListItemSubtitle,
-      VDialog,
-      VCard,
-      VForm,
-      VTextarea,
-      VSheet,
-    },
-    props: {
-      categoryName: {
-        type: String,
-        required: true,
-      },
-    },
-    setup(props) {
-      const app = inject('vcsApp');
-      const categoryObject = app.categories.getByKey(props.categoryName);
-      const dialog = ref(false);
-      const jsonString = ref('{\n}');
-      const category = ref([]);
-      const downloadLink = ref('');
-      const open = ref(true);
-      const link = ref(null);
-      if (categoryObject) {
-        category.value = [...categoryObject.collection].map((c) => ({
-          name: c.name,
-          type: c.className || 'Object',
-        }));
-      }
-
-      return {
-        dialog,
-        category,
-        jsonString,
-        downloadLink,
-        open,
-        link,
-        async addItem() {
-          try {
-            const config = JSON.parse(jsonString.value);
-            if (categoryObject.classRegistryName) {
-              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',
-            }));
-            jsonString.value = '{\n}';
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.error('invalid JSON');
-          }
-          dialog.value = false;
-        },
-        download() {
-          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();
-            });
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped></style>

package/src/manager/categoryManager/CategoryComponentList.vue

@@ -1,82 +0,0 @@
-<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 {
-    name: 'CategoryComponenList',
-    components: {
-      VcsList,
-    },
-    props: {
-      category: {
-        type: Object,
-        required: true,
-      },
-      windowId: {
-        type: String,
-        required: true,
-      },
-    },
-    setup(props) {
-      /** @type {VcsUiApp} */
-      const app = inject('vcsApp');
-
-      const selection = computed({
-        get() {
-          return props.category.selection;
-        },
-        set(value) {
-          // eslint-disable-next-line vue/no-mutating-props
-          props.category.selection = value;
-        },
-      });
-
-      watch(app.categoryManager.componentIds, () => {
-        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>

package/src/manager/categoryManager/CategoryManager.vue

@@ -1,47 +0,0 @@
-<template>
-  <v-sheet>
-    <v-expansion-panels
-      accordion
-      multiple
-      v-if="categories.length > 0"
-      class="rounded-0"
-    >
-      <category-component
-        v-for="category in categories"
-        :category="category"
-        :key="category.categoryName"
-      />
-    </v-expansion-panels>
-  </v-sheet>
-</template>
-
-<script>
-  import { inject, ref, computed } from 'vue';
-  import { VExpansionPanels, VSheet } from 'vuetify/lib';
-  import CategoryComponent from './CategoryComponent.vue';
-
-  /**
-   * @description
-   * uses a VcsList and renders 'a components Window' based on the "categoryManager"
-   * Uses the provided 'vcsApp'
-   */
-  export default {
-    name: 'CategoryManager',
-    components: {
-      VExpansionPanels,
-      VSheet,
-      CategoryComponent,
-    },
-    setup() {
-      const app = inject('vcsApp');
-      const categoryIds = ref(app.categoryManager.componentIds);
-      const categories = computed(() =>
-        categoryIds.value.map((id) => app.categoryManager.get(id)),
-      );
-
-      return {
-        categories,
-      };
-    },
-  };
-</script>