@vcmap/ui 5.0.0-rc.10

package/plugins/buttonExamples/ButtonExamples.vue

@@ -0,0 +1,190 @@
+<template>
+  <v-card>
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          DISABLED
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="disabled" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          HAS UPDATE
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="update" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          ACTIVE
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="active" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          LOADING
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="loading" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          &ltVcsButton standard/&gt (default)
+        </v-list-item-title>
+        <v-row>
+          <v-col>
+            <v-card>
+              <v-card-title>PRIMARY</v-card-title>
+              <v-card-actions>
+                <VcsButton
+                  @click="toggle"
+                  :active="active"
+                  color="primary"
+                  :disabled="disabled"
+                  :has-update="update"
+                  :icon="loading ? '$vcsProgress' : ''"
+                  tooltip="PRIMARY BUTTON"
+                >
+                  PRIMARY
+                </VcsButton>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+          <v-col>
+            <v-card>
+              <v-card-title>SECONDARY</v-card-title>
+              <v-card-actions>
+                <VcsButton
+                  @click="toggle"
+                  :active="active"
+                  :disabled="disabled"
+                  :has-update="update"
+                  tooltip="SECONDARY BUTTON"
+                >
+                  SECONDARY
+                </VcsButton>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-list-item-content>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          &ltVcsButton large/&gt (e.g. Navbar)
+        </v-list-item-title>
+        <v-row>
+          <v-col>
+            <v-card>
+              <v-card-title>STANDARD</v-card-title>
+              <v-card-actions>
+                <VcsButton
+                  @click="toggle"
+                  :active="active"
+                  :disabled="disabled"
+                  :has-update="update"
+                  :icon="loading ? '$vcsProgress' : '$vcs3d'"
+                  tooltip="ButtonClass large"
+                  large
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+          <v-col>
+            <v-card>
+              <v-card-title>OVERFLOW</v-card-title>
+              <v-card-actions>
+                <VcsActionButtonList
+                  :actions="[
+                    { name: 'Tool 1', title: 'Overflow Button with active state', callback: toggle, active },
+                    { name: 'Tool 2', title: 'Overflow Button without state', callback: toggle },
+                  ]"
+                  :overflow-count="0"
+                  button-class="large"
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-list-item-content>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          &ltVcsButton small/&gt
+        </v-list-item-title>
+        <v-row>
+          <v-col>
+            <v-card>
+              <v-card-title>STANDARD</v-card-title>
+              <v-card-actions>
+                <VcsButton
+                  @click="toggle"
+                  :active="active"
+                  :disabled="disabled"
+                  :icon="loading ? '$vcsProgress' : '$vcsColorSwatch'"
+                  tooltip="ACTION BUTTON"
+                  small
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+          <v-col>
+            <v-card>
+              <v-card-title>OVERFLOW</v-card-title>
+              <v-card-actions>
+                <VcsActionButtonList
+                  :actions="[
+                    { name: 'Action 1', title: 'Overflow Button with active state', callback: toggle, active },
+                    { name: 'Action 2', title: 'Overflow Button without state', callback: toggle },
+                  ]"
+                  :overflow-count="0"
+                  small
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-list-item-content>
+    </v-list-item>
+  </v-card>
+</template>
+<script>
+  import { VcsButton, VcsActionButtonList } from '@vcmap/ui';
+
+  export default {
+    name: 'ButtonExamples',
+    components: { VcsButton, VcsActionButtonList },
+    setup() {
+      return {
+        active: false,
+        disabled: false,
+        update: false,
+        loading: false,
+        toggle() {
+          this.active = !this.active;
+        },
+      };
+    },
+  };
+</script>

package/plugins/buttonExamples/index.js

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

package/plugins/categoryTest/Categories.vue

@@ -0,0 +1,145 @@
+<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

@@ -0,0 +1,114 @@
+<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

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

package/plugins/categoryTest/index.js

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,75 @@
+/* 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;
+      }
+    },
+  };
+}