@vcmap/ui 5.0.1 → 5.1.0-rc.1

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

@@ -0,0 +1,118 @@
+<template>
+  <AbstractConfigEditor
+    @submit="apply"
+    v-bind="{ ...$attrs, ...$props }"
+    :set-config-on-cancel="false"
+  >
+    <v-container class="py-0 px-2">
+      <v-row no-gutters v-if="!multi">
+        <v-col>
+          <VcsLabel html-for="name" required dense>
+            {{ $t('categoryTester.fooEditor.name') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField id="name" clearable dense v-model="localConfig.name" />
+        </v-col>
+      </v-row>
+      <v-row no-gutters v-if="!multi">
+        <v-col>
+          <VcsLabel html-for="title" dense>
+            {{ $t('categoryTester.fooEditor.title') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            id="title"
+            clearable
+            dense
+            v-model="localConfig.title"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel html-for="random" dense>
+            {{ $t('categoryTester.fooEditor.random') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            id="random"
+            clearable
+            dense
+            type="number"
+            v-model.number="localConfig.random"
+            :placeholder="$t('categoryTester.fooEditor.ambiguous')"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </AbstractConfigEditor>
+</template>
+
+<script>
+  import { onMounted, onUnmounted, ref, watch } from 'vue';
+  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { AbstractConfigEditor, VcsLabel, VcsTextField } from '@vcmap/ui';
+
+  export default {
+    name: 'FoobarEditor',
+    components: {
+      AbstractConfigEditor,
+      VcsLabel,
+      VcsTextField,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    props: {
+      multi: {
+        type: Boolean,
+        default: false,
+      },
+      selection: {
+        type: Object,
+        default: undefined,
+      },
+      getConfig: {
+        type: Function,
+        required: true,
+      },
+      setConfig: {
+        type: Function,
+        required: true,
+      },
+    },
+    setup(props) {
+      const localConfig = ref({});
+      let stopWatching = () => {};
+
+      onMounted(async () => {
+        localConfig.value = await props.getConfig();
+      });
+
+      if (props.multi && props.selection) {
+        stopWatching = watch(
+          () => props.selection,
+          async () => {
+            localConfig.value = await props.getConfig();
+          },
+        );
+      }
+
+      onUnmounted(() => stopWatching());
+
+      async function apply() {
+        await props.setConfig(localConfig.value);
+      }
+
+      return {
+        localConfig,
+        apply,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,29 @@
+import { downloadText } from '@vcmap/ui';
+
+export function exportCategoryCallback(app, collectionComponent, category) {
+  const serialized = category.serializeModule(app.dynamicModuleId);
+  serialized.items = serialized.items.filter((i) =>
+    collectionComponent.selection.value.find((s) => s.title === i.name),
+  );
+  downloadText(JSON.stringify(serialized, null, 2), `${category.name}.json`);
+}
+
+export async function importCategoryCallback(app, files) {
+  const promises = files.map((file) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+      reader.onload = (e) => {
+        try {
+          const { name, items } = JSON.parse(e.target.result);
+          app.categories.parseCategoryItems(name, items, app.dynamicModuleId);
+          resolve();
+        } catch (err) {
+          reject(err);
+        }
+      };
+      reader.readAsText(file);
+    });
+  });
+
+  await Promise.all(promises);
+}

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

@@ -52,6 +52,14 @@ export default async function categoryTest() {
           draggable: 'verschiebbar',
           selectable: 'selektierbar',
           singleSelect: 'Einfachauswahl',
+          renamable: 'umbenennbar',
+          removable: 'löschbar',
+          fooEditor: {
+            name: 'Name',
+            title: 'Titel',
+            random: 'Zufallszahl',
+            ambiguous: 'mehrdeutig',
+          },
         },
       },
       en: {
@@ -60,6 +68,14 @@ export default async function categoryTest() {
           draggable: 'draggable',
           selectable: 'selectable',
           singleSelect: 'single select',
+          renamable: 'renamable',
+          removable: 'removable',
+          fooEditor: {
+            name: 'Name',
+            title: 'Title',
+            random: 'Random Nr',
+            ambiguous: 'ambiguous',
+          },
         },
       },
     },

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

@@ -47,7 +47,7 @@
   /**
    * a sample mapping function adding a console log to all list items
    * @param {T} i
-   * @param {CollectionComponent} c
+   * @param {CollectionComponentClass} c
    * @param {VcsListItem} l
    */
   const mappingFunction = (i, c, l) => {
@@ -152,6 +152,7 @@
               id: selected.value,
               title: selected.value,
               collection: app[selected.value],
+              renamable: true,
             },
             owner,
           );

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

@@ -61,12 +61,16 @@ export default async function collectionManagerExample() {
     },
     i18n: {
       de: {
-        select: 'Collection',
-        addFailed: 'Die gewählte Collection wurde bereits hinzugefügt!',
+        collectionManagerExample: {
+          select: 'Collection',
+          addFailed: 'Die gewählte Collection wurde bereits hinzugefügt!',
+        },
       },
       en: {
-        select: 'Collection',
-        addFailed: 'The selected collection is already added!',
+        collectionManagerExample: {
+          select: 'Collection',
+          addFailed: 'The selected collection is already added!',
+        },
       },
     },
     destroy() {

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

@@ -0,0 +1,3 @@
+# Extent Example
+
+This is a show-case plugin demonstrating the usage of the [VcsExtent](../../../src/components/form-inputs-controls/VcsExtent.vue) component.

package/plugins/@vcmap-show-case/extent-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/extent-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.1.0"
+}

package/plugins/@vcmap-show-case/extent-example/src/ExtentExample.vue

@@ -0,0 +1,71 @@
+<template>
+  <VcsFormSection
+    heading="extentExample.title"
+    expandable
+    start-open
+    :header-actions="actions"
+    v-if="localConfig.extent"
+  >
+    <VcsExtent v-model="localConfig.extent" />
+  </VcsFormSection>
+</template>
+
+<script>
+  import { computed, inject, onUnmounted } from 'vue';
+  import {
+    setupExtentComponentActions,
+    VcsFormSection,
+    VcsExtent,
+  } from '@vcmap/ui';
+  import { Extent } from '@vcmap/core';
+
+  export default {
+    name: 'ExtentExample',
+    components: {
+      VcsFormSection,
+      VcsExtent,
+    },
+    props: {
+      value: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      const app = inject('vcsApp');
+      const localConfig = computed({
+        get() {
+          return props.value;
+        },
+        set(value) {
+          emit('input', value);
+        },
+      });
+
+      const extent = computed({
+        get() {
+          return new Extent(localConfig.value.extent);
+        },
+        set(value) {
+          localConfig.value.extent = value.toJSON();
+        },
+      });
+      const { actions, destroy } = setupExtentComponentActions(
+        app,
+        extent,
+        props.disabled,
+      );
+
+      onUnmounted(() => {
+        destroy();
+      });
+
+      return {
+        localConfig,
+        actions,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/extent-example/src/index.js

@@ -0,0 +1,68 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { Extent, VectorLayer } from '@vcmap/core';
+import { ref } from 'vue';
+import packageJSON from '../package.json';
+import ExtentExample from './ExtentExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function extentExample() {
+  const sampleLayerOptions = VectorLayer.getDefaultOptions();
+  sampleLayerOptions.extent = new Extent().toJSON();
+
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Extent Example',
+          title: 'Extent Example Plugin',
+          icon: '$vcsBoundingBox',
+        },
+        {
+          id: 'extent-example',
+          component: ExtentExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Extent Example',
+            headerIcon: '$vcsBoundingBox',
+          },
+          props: {
+            value: ref(sampleLayerOptions),
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
+      this._destroyAction = destroy;
+    },
+    i18n: {
+      de: {
+        extentExample: {
+          title: 'Ausdehnung',
+        },
+      },
+      en: {
+        extentExample: {
+          title: 'Extent',
+        },
+      },
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/flight-component-example/README.md

@@ -0,0 +1,3 @@
+# Flight component example
+
+This is a show-case plugin demonstrating the [flight component](../../../src/components/flight/VcsFlightComponent.vue).

package/plugins/@vcmap-show-case/flight-component-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/flight-component-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/flight-component-example/src/FlightExample.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-sheet>
+    <VcsFlightComponent
+      v-if="hasFlightInstance"
+      :parent-id="$attrs['window-state'].id"
+    />
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton type="submit" variant="filled" @click="log">
+          Log FlightOptions
+        </VcsFormButton>
+        <VcsFormButton @click="reset" icon="$vcsReturn" tooltip="Reset" />
+      </div>
+    </div>
+  </v-sheet>
+</template>
+
+<script>
+  import { VSheet } from 'vuetify/lib';
+  import { provide, ref, shallowRef, nextTick } from 'vue';
+  import { VcsFlightComponent, VcsFormButton } from '@vcmap/ui';
+  import { FlightInstance } from '@vcmap/core';
+
+  export default {
+    name: 'FlightExample',
+    components: {
+      VcsFormButton,
+      VSheet,
+      VcsFlightComponent,
+    },
+    setup() {
+      const defaultFlightOptions = FlightInstance.getDefaultOptions();
+      const flightInstance = shallowRef(
+        new FlightInstance(defaultFlightOptions),
+      );
+      const hasFlightInstance = ref(true);
+      provide('flightInstance', flightInstance);
+
+      return {
+        hasFlightInstance,
+        async reset() {
+          hasFlightInstance.value = false;
+          flightInstance.value = new FlightInstance(defaultFlightOptions);
+          await nextTick();
+          hasFlightInstance.value = true;
+        },
+        log() {
+          console.log(flightInstance.value.toJSON());
+        },
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/flight-component-example/src/index.js

@@ -0,0 +1,42 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import component from './FlightExample.vue';
+
+export default function viewpointExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Flight Example',
+          icon: '$vcsPoi',
+        },
+        {
+          id: 'flight-component-example',
+          state: {
+            headerTitle: 'Flight Example',
+            headerIcon: '$vcsPoi',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'flight-component-example', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue

@@ -224,7 +224,39 @@
               />
             </v-col>
           </v-row>
-          <v-row no-gutters>
+          <v-row no-gutters class="gap-2">
+            <v-col>
+              <VcsFormattedNumber
+                id="formattedNumber"
+                :value="state.numberInput"
+                prefix="X"
+                unit="cm"
+                :fraction-digits="1"
+                :dense="dense"
+              />
+            </v-col>
+            <v-col>
+              <VcsFormattedNumber
+                id="formattedNumber"
+                :value="state.numberInput"
+                prefix="Y"
+                unit="cm"
+                :fraction-digits="1"
+                :dense="dense"
+              />
+            </v-col>
+            <v-col>
+              <VcsFormattedNumber
+                id="formattedNumber"
+                :value="state.numberInput"
+                prefix="Z"
+                unit="cm"
+                :fraction-digits="1"
+                :dense="dense"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters class="gap-2">
             <v-col>
               <VcsTextField
                 id="coordinateX"
@@ -232,18 +264,18 @@
                 type="number"
                 step="10"
                 prefix="X"
-                unit="m"
+                unit="cm"
                 v-model.number="state.numberInput"
               />
             </v-col>
-            <v-col class="px-2">
+            <v-col>
               <VcsTextField
                 id="coordinateY"
                 :dense="dense"
                 type="number"
                 step="10"
                 prefix="Y"
-                unit="m"
+                unit="cm"
                 v-model.number="state.numberInput"
               />
             </v-col>
@@ -253,7 +285,7 @@
                 :dense="dense"
                 type="number"
                 step="10"
-                unit="m"
+                unit="cm"
                 prefix="Z"
                 v-model.number="state.numberInput"
               />
@@ -393,6 +425,47 @@
         </v-container>
       </template>
     </VcsFormSection>
+    <VcsFormSection
+      heading="Disabled form section"
+      expandable
+      start-open
+      :disabled="true"
+      :header-actions="actions"
+      :action-button-list-overflow-count="4"
+    >
+      <template #help>
+        <ol>
+          <li>{{ $t('form-inputs-example.help1') }}:</li>
+          <span>{{ $t('form-inputs-example.help1desc') }}</span>
+          <li>{{ $t('form-inputs-example.help2') }}:</li>
+          <span>{{ $t('form-inputs-example.help2desc') }}</span>
+          <li>{{ $t('form-inputs-example.help3') }}:</li>
+          <span>{{ $t('form-inputs-example.help3desc') }}</span>
+        </ol>
+      </template>
+      <template #default>
+        <v-container class="py-0 px-1">
+          <v-row no-gutters>
+            <v-col class="w-max-half">
+              <VcsLabel html-for="selectInput" :dense="dense" :disabled="true">
+                {{ $t('form-inputs-example.select') }}
+              </VcsLabel>
+            </v-col>
+            <v-col class="w-max-half">
+              <VcsSelect
+                id="selectInput"
+                :items="selectOptions"
+                :dense="dense"
+                :rules="[(v) => v !== 'D' || 'D is not allowed']"
+                v-model="state.selected"
+                :disabled="true"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
+
     <div class="d-flex gap-2 px-2 pt-2 pb-1">
       <div class="d-flex gap-2">
         <VcsFormButton @click="validate()"> Val </VcsFormButton>

package/plugins/@vcmap-show-case/hello-world/src/helloWorld.vue

@@ -49,13 +49,13 @@
       VRow,
       VImg,
     },
-    setup() {
+    setup(props, { emit }) {
       const app = inject('vcsApp');
       const { helloWorld, showHelloWorldBtn } = app.plugins.getByKey(name);
 
       return {
         closeSelf() {
-          app.windowManager.remove(windowId);
+          emit('close');
         },
         helloWorld() {
           // eslint-disable-next-line no-console