@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/plugins/categoryTest/Categories.vue

@@ -1,145 +0,0 @@
-<template>
-  <div>
-    <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" />
-    </span>
-
-    <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/composition-api';
-  import { VcsButton } from '@vcmap/ui';
-  import Category from './Category.vue';
-
-  export default {
-    name: 'CategoriesComponent',
-    components: {
-      Category,
-      VcsButton,
-    },
-    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 add() {
-          const { value: newCategoryValue } = newCategory;
-          if (newCategoryValue.type === 'AppBackedCategory') {
-            newCategoryValue.name = newCategoryValue.collectionName;
-          }
-          await app.categories.requestCategory(newCategoryValue);
-          newCategory.value = {
-            name: 'new',
-            type: 'category.Category',
-            collectionName: null,
-          };
-          newDialog.value = false;
-        },
-        async upload() {
-          try {
-            const jsonUpload = JSON.parse(uploadString.value);
-            if (!jsonUpload.name) {
-              console.error('must provide name');
-              return;
-            }
-            await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
-            if (jsonUpload?.items?.length > 0) {
-              await app.categories.parseCategoryItems(jsonUpload.name, jsonUpload.items, app.dynamicContextId);
-            }
-            uploadString.value = '';
-            uploadDialog.value = false;
-          } catch (e) {
-            console.error('not a valid JSON');
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped>
-.max-height {
-  max-height: 50%;
-}
-</style>

package/plugins/categoryTest/Category.vue

@@ -1,114 +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 icon="$vcsPlus" @click="dialog = true" />
-        <vcs-button icon="mdi-download" @click="download" />
-        <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" />
-          <v-btn type="submit">Add</v-btn>
-        </v-form>
-      </v-card>
-    </v-dialog>
-  </v-sheet>
-</template>
-
-<script>
-  import { inject, nextTick, ref } from '@vue/composition-api';
-  import { VcsButton } from '@vcmap/ui';
-  import { getObjectFromClassRegistry } from '@vcmap/core';
-
-  export default {
-    name: 'CategoryComponent',
-    components: { VcsButton },
-    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);
-      if (categoryObject) {
-        category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
-      }
-
-      return {
-        dialog,
-        category,
-        jsonString,
-        downloadLink,
-        open,
-        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.serializeForContext(app.dynamicContextId), null, 2);
-          downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
-          if (downloadLink.value) {
-            nextTick(() => {
-              this.$refs.link.click();
-            });
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>

package/plugins/categoryTest/ItemEditor.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: 'ItemEditor',
-  };
-</script>
-
-<style scoped>
-
-</style>

package/plugins/categoryTest/index.js

@@ -1,41 +0,0 @@
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import Categories from './Categories.vue';
-
-/**
- * @returns {VcsPlugin}
- */
-export default async function categoryTest() {
-  return {
-    name: '@vcmap/categoryTest',
-    onVcsAppMounted(app) {
-      const { action, destroy } = createToggleAction(
-        {
-          name: 'Category Editor',
-          icon: '$vcsPen',
-        },
-        {
-          id: 'category-editor',
-          component: Categories,
-          slot: WindowSlot.DETACHED,
-          position: {
-            width: 500,
-          },
-        },
-        app.windowManager,
-        '@vcmap/categoryTest',
-      );
-      app.navbarManager.add(
-        { id: 'category-editor', action },
-        '@vcmap/categoryTest',
-        ButtonLocation.TOOL,
-      );
-      this._destroyAction = destroy;
-    },
-    destroy() {
-      if (this._destroyAction) {
-        this._destroyAction();
-        this._destroyAction = null;
-      }
-    },
-  };
-}

package/plugins/example/index.js

@@ -1,75 +0,0 @@
-/* eslint-disable no-console */
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import mySuperComponent from './mySuperComponent.vue';
-
-/**
- *
- * @param {PluginExampleConfig} config
- * @returns {VcsPlugin}
- */
-export default async function (config) {
-  return {
-    name: '@vcmap/example',
-    initialize(app) {
-      console.log('initialize', app, config);
-    },
-    onVcsAppMounted(app) {
-      console.log('onVcsAppMounted', app, config);
-      // XXX supportedMaps: ['vcs.vcm.maps.Openlayers', 'vcs.vcm.maps.Cesium'],
-      const { action, destroy } = createToggleAction(
-        {
-          name: 'Example',
-          icon: '$vcsPointSelect',
-        },
-        {
-          id: '228',
-          component: mySuperComponent,
-          slot: WindowSlot.DETACHED,
-          position: {
-            width: 1200,
-          },
-        },
-        app.windowManager,
-        '@vcmap/example',
-      );
-      this._destroyAction = destroy;
-      app.navbarManager.add(
-        {
-          action,
-        },
-        '@vcmap/example',
-        ButtonLocation.TOOL,
-      );
-      const buttonComponents = [
-        {
-          id: 'distance3D',
-          action: {
-            name: 'distance3D',
-            title: '3D distance',
-            icon: '$vcs3dDistance',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-        {
-          id: 'area3D',
-          action: {
-            name: 'area3D',
-            title: '3D area',
-            icon: '$vcs3dArea',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-      ];
-      const measurementGroup = app.toolboxManager.requestGroup('measurement');
-      buttonComponents.forEach(c => measurementGroup.buttonManager.add(c, '@vcmap/example'));
-    },
-    destroy() {
-      if (this._destroyAction) {
-        this._destroyAction();
-        this._destroyAction = null;
-      }
-    },
-  };
-}

package/plugins/test/allIconsComponent.vue

@@ -1,34 +0,0 @@
-<template>
-  <v-sheet class="overflow-auto icons-window">
-    <v-list>
-      <v-list-item
-        v-for="icon in icons"
-        :key="icon"
-      >
-        <v-list-item-title>{{ icon }}</v-list-item-title>
-        <v-list-item-icon>
-          <v-icon>{{ icon }}</v-icon>
-        </v-list-item-icon>
-      </v-list-item>
-    </v-list>
-  </v-sheet>
-</template>
-
-<script>
-  import { Icons } from '@vcmap/ui';
-
-  export default {
-    name: 'AllIconsComponent',
-    computed: {
-      icons() {
-        return Object.keys(Icons).map(n => `$${n}`);
-      },
-    },
-  };
-</script>
-
-<style scoped>
-.icons-window {
-  max-height: 600px;
-}
-</style>

package/plugins/test/editor.vue

@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <v-textarea
-      v-model="configString"
-      v-if="!loading"
-    />
-    <v-progress-circular
-      v-else
-    />
-
-    <VcsButton @click="replaceContext">
-      Apply
-    </VcsButton>
-    <VcsButton @click="removeContext">
-      Remove
-    </VcsButton>
-  </div>
-</template>
-
-<script>
-  import { ref, inject } from '@vue/composition-api';
-  import { VcsButton } from '@vcmap/ui';
-  import { Context } from '@vcmap/core';
-
-  const contextId = 'foo';
-
-  export default {
-    name: 'Editor',
-    components: {
-      VcsButton,
-    },
-    setup() {
-      /** @type {VcsUiApp} */
-      const app = inject('vcsApp');
-      const context = app.getContextById(contextId);
-      const configString = ref(JSON.stringify(context ? context.config : {}, null, 2));
-      const loading = ref(false);
-
-      return {
-        configString,
-        loading,
-        async replaceContext() {
-          loading.value = true;
-          const config = JSON.parse(configString.value);
-          config.id = contextId;
-          const newContext = new Context(config);
-          await this.removeContext();
-          await app.addContext(newContext);
-          loading.value = false;
-        },
-        async removeContext() {
-          if (app.getContextById(contextId)) {
-            await app.removeContext(contextId);
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>

package/plugins/test/index.js

@@ -1,116 +0,0 @@
-import VectorSource from 'ol/source/Vector.js';
-import { Feature } from 'ol';
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import { toolboxData } from './toolbox-data.js';
-import editor from './editor.vue';
-import windowManagerExample from './windowManagerExample.vue';
-import AllIconsComponent from './allIconsComponent.vue';
-
-let source;
-
-function getSource() {
-  if (!source) {
-    source = new VectorSource();
-  }
-  return source;
-}
-
-/**
- * @returns {VcsPlugin}
- */
-export default async function () {
-  return {
-    name: '@vcmap/test',
-    onVcsAppMounted(app) {
-      const { action: configEditorAction, destroy: destroyConfigEditorAction } = createToggleAction(
-        {
-          name: 'Config Editor',
-        },
-        {
-          id: 'config-editor',
-          state: {
-            headerTitle: 'Context Editor',
-          },
-          component: editor,
-          slot: WindowSlot.STATIC,
-          position: {
-            width: 500,
-          },
-        },
-        app.windowManager,
-        '@vcmap/test',
-      );
-      const { action: windowAction, destroy: destroyWindowAction } = createToggleAction(
-        {
-          name: 'Windows',
-        },
-        {
-          id: 'windowManagerExample',
-          state: {
-            headerTitle: 'windowManager Example',
-          },
-          component: windowManagerExample,
-          position: {
-            left: '60%',
-            right: '10%',
-            top: '10%',
-          },
-        },
-        app.windowManager,
-        '@vcmap/test',
-      );
-      const { action: iconAction, destroy: destroyIconAction } = createToggleAction(
-        {
-          name: 'Icons',
-        },
-        {
-          id: 'allIcons',
-          state: {
-            headerTitle: 'All Icons',
-          },
-          component: AllIconsComponent,
-        },
-        app.windowManager,
-        '@vcmap/test',
-      );
-      this._destroyActions = [destroyConfigEditorAction, destroyWindowAction, destroyIconAction];
-      const alertAction = {
-        name: 'VC Systems',
-        callback() {
-          getSource().addFeature(new Feature({}));
-          window.alert(`there are ${getSource().getFeatures().length} features ${app.maps.activeMap.name}`);
-        },
-      };
-      app.navbarManager.add(
-        { id: 'config-editor', action: configEditorAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        { id: 'windowManagerExample', action: windowAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        { id: 'allIcons', action: iconAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        { id: 'alert', action: alertAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      toolboxData.forEach(([{ id, icon, title, buttonComponents }, owner]) => {
-        const group = app.toolboxManager.requestGroup(id, icon, title);
-        buttonComponents.forEach(c => group.buttonManager.add(c, owner));
-      });
-    },
-    destroy() {
-      if (this._destroyActions) {
-        this._destroyActions.forEach(cb => cb());
-        this._destroyActions = null;
-      }
-    },
-  };
-}

package/plugins/test/myCustomHeader.vue

@@ -1,19 +0,0 @@
-<template>
-  <div>
-    Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing </span>
-  </div>
-</template>
-
-<script>
-
-  export default {
-    name: 'MyCustomHeader',
-    setup(props, { emit }) {
-      return {
-        clicked: () => {
-          emit('close');
-        },
-      };
-    },
-  };
-</script>