@vcmap/ui 5.0.2 → 5.1.0-rc.1

package/src/components/buttons/VcsFormButton.vue.d.ts

@@ -0,0 +1,91 @@
+declare const _default: import("vue").DefineComponent<{
+    variant: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    customClasses: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {}, {}, {
+    classes(): any;
+    hasDefaultSlot(): boolean;
+}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    customClasses: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: string;
+    disabled: boolean;
+    icon: string;
+    hasUpdate: boolean;
+    tooltipProps: Record<string, any>;
+    customClasses: unknown[];
+    variant: string;
+    loading: boolean;
+}>;
+export default _default;

package/src/components/buttons/VcsToolButton.vue

@@ -87,6 +87,7 @@
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
    * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @vue-prop {string[]}                               [customClasses] - CSS classes to customize style
    * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
    * @vue-computed {Object<string, string>}             classes - css classes applied to button, depending on size and state
    * @vue-computed {boolean}                            hasDefaultSlot
@@ -135,6 +136,10 @@
         type: Object,
         default: () => ({}),
       },
+      customClasses: {
+        type: Array,
+        default: () => [],
+      },
     },
     computed: {
       appliedColor() {
@@ -146,6 +151,10 @@
       },
       classes() {
         return {
+          ...this.customClasses.reduce(
+            (acc, cur) => ({ ...acc, [cur]: true }),
+            {},
+          ),
           'vcs-tool-button--active-background':
             this.active && this.background && !this.$attrs.disabled,
         };

package/src/components/buttons/VcsToolButton.vue.d.ts

@@ -0,0 +1,91 @@
+declare const _default: import("vue").DefineComponent<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    customClasses: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {}, {}, {
+    appliedColor(): any;
+    classes(): any;
+    hasDefaultSlot(): boolean;
+    isTextButton(): true | null;
+}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    customClasses: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: string;
+    icon: string;
+    active: boolean;
+    hasUpdate: boolean;
+    background: boolean;
+    color: string;
+    tooltipProps: Record<string, any>;
+    customClasses: unknown[];
+}>;
+export default _default;

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -0,0 +1,329 @@
+<template>
+  <VcsFormSection
+    :heading="title"
+    :expandable="expandable"
+    start-open
+    :header-actions="actions"
+  >
+    <v-container class="py-0 px-0">
+      <v-sheet v-if="items.length < 1" class="ma-2 pl-2">
+        {{ $t('components.flight.noAnchor') }}
+        <VcsButton
+          :icon="addAnchorAction.icon"
+          :tooltip="addAnchorAction.title"
+          @click.stop="addAnchorAction.callback()"
+          class="d-flex justify-center"
+        />
+      </v-sheet>
+      <VcsList
+        v-else
+        :items="items"
+        :draggable="draggable"
+        :show-title="false"
+        @item-moved="move"
+      >
+        <!-- eslint-disable-next-line -->
+        <template #item.append-title="{ item, index }">
+          <VcsTextField
+            v-if="showDuration(index)"
+            v-model.number="item.duration"
+            type="number"
+            unit="s"
+            step="1"
+            :decimals="2"
+            :rules="[durationRule]"
+            no-padding
+            class="ml-auto"
+            style="width: 50px"
+          />
+        </template>
+        <!-- eslint-disable-next-line -->
+        <template #item.intermediate="{ item, index }">
+          <VcsButton
+            :key="`item-intermediate-${index}`"
+            :icon="addAnchorAction.icon"
+            :tooltip="addAnchorAction.title"
+            @click.stop="addAnchorAction.callback(index + 1)"
+            class="d-flex justify-center z-index-99"
+            height="0"
+          />
+        </template>
+      </VcsList>
+    </v-container>
+  </VcsFormSection>
+</template>
+<script>
+  import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
+  import { VContainer, VSheet } from 'vuetify/lib';
+  import {
+    anchorFromViewpoint,
+    anchorToViewpoint,
+    Viewpoint,
+  } from '@vcmap/core';
+  import { Cartesian3 } from '@vcmap-cesium/engine';
+  import { createToggleAction } from '../../actions/actionHelper.js';
+  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsList from '../lists/VcsList.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsButton from '../buttons/VcsButton.vue';
+  import { moveItem } from '../../manager/collectionManager/CollectionComponentList.vue';
+  import CollectionComponentClass from '../../manager/collectionManager/collectionComponentClass.js';
+  import { WindowSlot } from '../../manager/window/windowManager.js';
+  import VcsViewpointEditor from '../viewpoint/VcsViewpointEditor.vue';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  import { createFlightVisualizationAction } from '../../actions/flightActions.js';
+  import { getProvidedFlightInstance } from './composables.js';
+
+  /**
+   * calculate duration between two anchor based on speed and distance
+   * @param {import("@vcmap/core").FlightAnchor} anchor1
+   * @param {import("@vcmap/core").FlightAnchor} anchor2
+   * @param {number} [speed=300] velocity in m/s
+   * @returns {number}
+   */
+  function calculateDuration(anchor1, anchor2, speed = 300) {
+    return (
+      Cartesian3.distance(
+        Cartesian3.fromDegrees(...anchor1.coordinate),
+        Cartesian3.fromDegrees(...anchor2.coordinate),
+      ) / speed || 1
+    );
+  }
+
+  /**
+   * @param {import("@src/vcsUiApp.js").default} app
+   * @param {import("@vcmap/core").IndexedCollection<import("@vcmap/core").FlightAnchor>} collection
+   * @returns {import("../../actions/actionHelper.js").VcsAction}
+   */
+  function createAddAnchorAction(app, collection) {
+    return {
+      name: 'components.flight.addAnchor',
+      title: 'components.flight.addAnchor',
+      icon: '$vcsPlus',
+      callback(index = 0) {
+        const viewpoint = app.maps.activeMap.getViewpointSync();
+        const anchor = anchorFromViewpoint(viewpoint);
+        anchor.title = `Viewpoint ${collection.size + 1}`;
+        if (index > 0) {
+          const prevAnchor = collection.get(index - 1);
+          prevAnchor.duration = calculateDuration(prevAnchor, anchor);
+          if (index < collection.size) {
+            const nextAnchor = collection.get(index);
+            anchor.duration = calculateDuration(anchor, nextAnchor);
+          }
+        }
+        collection.add(anchor, index);
+      },
+    };
+  }
+
+  /**
+   * @param {import("@src/vcsUiApp.js").default} app
+   * @param {import("@vcmap/core").FlightAnchor} item
+   * @param {import("@vcmap/core").IndexedCollection<import("@vcmap/core").FlightAnchor>} collection
+   * @param {string} parentId
+   * @param {string} owner
+   * @returns {{action:import("../../actions/actionHelper.js").VcsAction, destroy: ()=>void}}
+   */
+  function createEditAnchorAction(app, item, collection, parentId, owner) {
+    const { action, destroy } = createToggleAction(
+      {
+        name: 'edit-anchor',
+        icon: '$vcsEdit',
+        title: 'components.flight.editAnchor',
+      },
+      {
+        id: `edit-anchor-${item.name}`,
+        parentId,
+        component: VcsViewpointEditor,
+        slot: WindowSlot.DYNAMIC_CHILD,
+        state: {
+          headerTitle: 'components.flight.editAnchor',
+          headerIcon: '$vcsEdit',
+        },
+        props: {
+          getConfig() {
+            return anchorToViewpoint(item).toJSON();
+          },
+          setConfig(config) {
+            if (config) {
+              const idx = collection.indexOf(item);
+              // avoid shadows by remove
+              collection.remove(item);
+              collection.add(anchorFromViewpoint(new Viewpoint(config)), idx);
+            }
+            return Promise.resolve();
+          },
+          hideAnimate: true,
+          hideName: true,
+        },
+      },
+      app.windowManager,
+      owner,
+    );
+    return { action, destroy };
+  }
+
+  /**
+   * @param {import("@src/vcsUiApp.js").default} app
+   * @param {import("@vcmap/core").FlightAnchor} item
+   * @returns {import("../../actions/actionHelper.js").VcsAction}
+   */
+  function createZoomToAnchorAction(app, item) {
+    return {
+      name: 'components.flight.zoomToAnchor',
+      title: 'components.flight.zoomToAnchor',
+      callback() {
+        const viewpoint = anchorToViewpoint(item);
+        app.maps.activeMap?.gotoViewpoint(viewpoint);
+      },
+    };
+  }
+
+  /**
+   * @param {import("@vcmap/core").FlightAnchor} item
+   * @param {import("@vcmap/core").IndexedCollection<import("@vcmap/core").FlightAnchor>} collection
+   * @returns {import("../../actions/actionHelper.js").VcsAction}
+   */
+  function creatRemoveAnchorAction(item, collection) {
+    return {
+      name: 'components.flight.removeAnchor',
+      title: 'components.flight.removeAnchor',
+      callback() {
+        collection.remove(item);
+      },
+    };
+  }
+
+  export function durationRule(value) {
+    if (Number.isFinite(value) && value > 0) {
+      return true;
+    }
+    return 'components.flight.invalidDuration';
+  }
+
+  /**
+   * @description A component for editing flight anchors.
+   * Requires a flightInstance to be provided via vue-provide.
+   * @vue-prop {string} [expandable=false] - anchors section expandable
+   * @vue-prop {string} [parentId] - id of the window, the VcsFlightComponent is used in
+   * @vue-prop {string} [owner] - owner of the window, e.g. a plugin name
+   */
+  export default {
+    name: 'VcsFlightAnchorsComponent',
+    components: {
+      VcsButton,
+      VcsTextField,
+      VContainer,
+      VSheet,
+      VcsFormSection,
+      VcsList,
+    },
+    props: {
+      expandable: {
+        type: Boolean,
+        default: false,
+      },
+      parentId: {
+        type: String,
+        default: undefined,
+      },
+      owner: {
+        type: [String, Symbol],
+        default: vcsAppSymbol,
+      },
+    },
+    setup({ parentId, owner }) {
+      const app = inject('vcsApp');
+      const flightInstance = getProvidedFlightInstance();
+      const loop = ref(flightInstance.loop);
+      const loopChangedListener =
+        flightInstance.propertyChanged.addEventListener((prop) => {
+          if (prop === 'loop') {
+            loop.value = flightInstance.loop;
+          }
+        });
+
+      let flightVis;
+
+      const collectionComponent = new CollectionComponentClass(
+        {
+          title: 'components.flight.anchors',
+          draggable: true,
+          collection: flightInstance.anchors,
+        },
+        owner,
+      );
+
+      collectionComponent.addItemMapping({
+        mappingFunction: (item, c, listItem) => {
+          const { action: editAction, destroy: editDestroy } =
+            createEditAnchorAction(app, item, c.collection, parentId, owner);
+          listItem.actions = [
+            editAction,
+            createZoomToAnchorAction(app, item),
+            creatRemoveAnchorAction(item, c.collection),
+          ];
+          const localDuration = ref(item.duration);
+          listItem.duration = computed({
+            get() {
+              return localDuration.value;
+            },
+            set(value) {
+              if (Number.isFinite(value) && value > 0) {
+                item.duration = value;
+                localDuration.value = value;
+              }
+            },
+          });
+          const durationListener = item.changed.addEventListener(() => {
+            localDuration.value = item.duration;
+          });
+          listItem.title = item.title ?? item.name;
+          listItem.destroyFunctions.push(editDestroy, durationListener);
+        },
+        owner,
+      });
+
+      onMounted(async () => {
+        flightVis = await createFlightVisualizationAction(app, flightInstance);
+        collectionComponent.addActions([
+          {
+            action: flightVis.action,
+            owner,
+          },
+        ]);
+      });
+
+      onUnmounted(() => {
+        loopChangedListener();
+        flightVis?.destroy();
+        collectionComponent.destroy();
+      });
+
+      const addAnchorAction = createAddAnchorAction(
+        app,
+        collectionComponent.collection,
+      );
+
+      return {
+        addAnchorAction,
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        draggable: collectionComponent.draggable,
+        actions: collectionComponent.getActions(),
+        move({ item, targetIndex }) {
+          moveItem(collectionComponent, item, targetIndex);
+        },
+        durationRule,
+        showDuration(index) {
+          if (collectionComponent.items.value.length - 1 === index) {
+            return loop.value;
+          }
+          return true;
+        },
+      };
+    },
+  };
+</script>
+<style scoped lang="scss"></style>

package/src/components/flight/VcsFlightAnchorsComponent.vue.d.ts

@@ -0,0 +1,45 @@
+export function durationRule(value: any): true | "components.flight.invalidDuration";
+declare const _default: import("vue").DefineComponent<{
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    parentId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    owner: {
+        type: (SymbolConstructor | StringConstructor)[];
+        default: symbol;
+    };
+}, {
+    addAnchorAction: import("../../actions/actionHelper.js").VcsAction;
+    title: import("vue").Ref<string>;
+    items: import("vue").Ref<import("../../manager/collectionManager/collectionComponentClass.js").CollectionComponentListItem[]>;
+    draggable: import("vue").Ref<boolean>;
+    actions: import("vue").ComputedRef<import("../../actions/actionHelper.js").VcsAction[]>;
+    move({ item, targetIndex }: {
+        item: any;
+        targetIndex: any;
+    }): void;
+    durationRule: typeof durationRule;
+    showDuration(index: any): boolean;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    parentId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    owner: {
+        type: (SymbolConstructor | StringConstructor)[];
+        default: symbol;
+    };
+}>>, {
+    parentId: string;
+    owner: string | symbol;
+    expandable: boolean;
+}>;
+export default _default;