@vcmap/ui 5.0.2 → 5.1.0-rc.2

package/src/components/flight/VcsFlightComponent.vue

@@ -0,0 +1,284 @@
+<template>
+  <v-sheet>
+    <VcsFormSection
+      :heading="heading"
+      :expandable="expandable"
+      start-open
+      v-if="
+        !(
+          hideGeneral ||
+          (hideName &&
+            hideTitle &&
+            hideInterpolation &&
+            hideDuration &&
+            hideLoop)
+        )
+      "
+    >
+      <v-container class="py-0 px-1">
+        <v-row no-gutters v-if="!hideName">
+          <v-col cols="6">
+            <VcsLabel html-for="name" dense required>
+              {{ $t('components.flight.name') }}
+            </VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField id="name" dense clearable v-model="name" />
+          </v-col>
+        </v-row>
+        <v-row no-gutters v-if="!hideTitle">
+          <v-col cols="6">
+            <VcsLabel html-for="title" dense>
+              {{ $t('components.flight.title') }}
+            </VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField
+              id="title"
+              dense
+              clearable
+              :placeholder="$t('components.flight.titlePlaceholder')"
+              v-model="title"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters v-if="!hideInterpolation">
+          <v-col cols="6">
+            <VcsLabel html-for="interpolation" dense>
+              {{ $t('components.flight.interpolation') }}
+            </VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsSelect
+              id="title"
+              dense
+              :items="[
+                { value: 'spline', text: 'components.flight.spline' },
+                { value: 'linear', text: 'components.flight.linear' },
+              ]"
+              v-model="interpolation"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters v-if="!hideDuration">
+          <v-col cols="6">
+            <VcsLabel html-for="duration" dense>
+              {{ $t('components.flight.duration') }}
+            </VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField
+              id="duration"
+              v-model.number="duration"
+              type="number"
+              unit="s"
+              step="1"
+              :decimals="2"
+              :rules="[durationRule]"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters v-if="!hideLoop">
+          <v-col cols="6">
+            <VcsCheckbox
+              id="animate"
+              label="components.flight.loop"
+              dense
+              v-model="loop"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFlightAnchorsComponent
+      :parent-id="parentId"
+      :owner="owner"
+      :expandable="expandable"
+    />
+    <v-divider class="mt-4" />
+    <VcsFlightPlayer :disabled="disablePlayer" />
+  </v-sheet>
+</template>
+
+<script>
+  import { computed, onUnmounted, ref, inject } from 'vue';
+  import { VSheet, VContainer, VRow, VCol, VDivider } from 'vuetify/lib';
+  import { getSplineAndTimesForInstance } from '@vcmap/core';
+  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsSelect from '../form-inputs-controls/VcsSelect.vue';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import VcsFlightAnchorsComponent, {
+    durationRule,
+  } from './VcsFlightAnchorsComponent.vue';
+  import VcsFlightPlayer from './VcsFlightPlayer.vue';
+  import { vcsAppSymbol } from '../../pluginHelper.js';
+  import {
+    getProvidedFlightInstance,
+    setupFlightAnchorEditingListener,
+  } from './composables.js';
+
+  /**
+   * @param {import("@vcmap/core").FlightInstance} instance
+   * @returns {number}
+   */
+  function getFlightDuration(instance) {
+    if (instance.isValid()) {
+      const { times } = getSplineAndTimesForInstance(instance);
+      return times.at(-1);
+    }
+    return 0;
+  }
+
+  /**
+   * @description A component to model @vcmap/core/FlightInstanceOptions.
+   * Requires a flightInstance to be provided via vue-provide.
+   * If a reset functionality is required use shallowRef to provide the flightInstance.
+   * @vue-prop {string} heading - Title of flight settings.
+   * @vue-prop {boolean} [expandable] - Expandable sections.
+   * @vue-prop {boolean} hideName - Hide name input.
+   * @vue-prop {boolean} hideTitle - Hide title input.
+   * @vue-prop {boolean} hideInterpolation - Hide select interpolation input.
+   * @vue-prop {boolean} hideLoop - Hide loop input.
+   * @vue-prop {boolean} hideGeneral - Hide all general settings (name, title, animate).
+   * @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: 'VcsFlightComponent',
+    components: {
+      VcsFlightPlayer,
+      VcsFlightAnchorsComponent,
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+      VDivider,
+      VcsFormSection,
+      VcsLabel,
+      VcsTextField,
+      VcsSelect,
+      VcsCheckbox,
+    },
+    props: {
+      heading: {
+        type: String,
+        default: 'components.flight.general',
+      },
+      expandable: {
+        type: Boolean,
+        default: false,
+      },
+      hideName: {
+        type: Boolean,
+        default: false,
+      },
+      hideTitle: {
+        type: Boolean,
+        default: false,
+      },
+      hideInterpolation: {
+        type: Boolean,
+        default: false,
+      },
+      hideDuration: {
+        type: Boolean,
+        default: false,
+      },
+      hideLoop: {
+        type: Boolean,
+        default: false,
+      },
+      hideGeneral: {
+        type: Boolean,
+        default: false,
+      },
+      parentId: {
+        type: String,
+        default: undefined,
+      },
+      owner: {
+        type: [String, Symbol],
+        default: vcsAppSymbol,
+      },
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const flightInstance = getProvidedFlightInstance();
+      const flightDuration = ref(getFlightDuration(flightInstance));
+      const disablePlayer = ref(!(flightDuration.value > 0));
+      const flightDurationListener = [
+        flightInstance.anchorsChanged.addEventListener(() => {
+          flightDuration.value = getFlightDuration(flightInstance);
+          disablePlayer.value = !(flightDuration.value > 0);
+        }),
+        flightInstance.propertyChanged.addEventListener((prop) => {
+          if (prop === 'loop') {
+            flightDuration.value = getFlightDuration(flightInstance);
+          }
+        }),
+      ];
+      const editingListener = setupFlightAnchorEditingListener(
+        app.windowManager,
+        disablePlayer,
+      );
+
+      onUnmounted(() => {
+        flightDurationListener.forEach((cb) => cb());
+        editingListener();
+      });
+
+      return {
+        name: flightInstance.name,
+        title: computed({
+          get() {
+            return flightInstance?.properties?.title;
+          },
+          set(value) {
+            if (flightInstance.properties) {
+              flightInstance.properties.title = value;
+            } else {
+              flightInstance.properties = { title: value };
+            }
+          },
+        }),
+        interpolation: computed({
+          get() {
+            return flightInstance?.interpolation;
+          },
+          set(value) {
+            flightInstance.interpolation = value;
+          },
+        }),
+        duration: computed({
+          get() {
+            return flightDuration.value;
+          },
+          set(value) {
+            if (
+              Number.isFinite(value) &&
+              value > 0 &&
+              flightDuration.value > 0
+            ) {
+              const factor = value / flightDuration.value;
+              [...flightInstance.anchors].forEach((anchor) => {
+                anchor.duration *= factor;
+              });
+            }
+          },
+        }),
+        durationRule,
+        loop: computed({
+          get() {
+            return flightInstance?.loop;
+          },
+          set(value) {
+            flightInstance.loop = !!value;
+          },
+        }),
+        disablePlayer,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,104 @@
+declare const _default: import("vue").DefineComponent<{
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideName: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideInterpolation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideDuration: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLoop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideGeneral: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    parentId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    owner: {
+        type: (SymbolConstructor | StringConstructor)[];
+        default: symbol;
+    };
+}, {
+    name: string;
+    title: import("vue").WritableComputedRef<unknown>;
+    interpolation: import("vue").WritableComputedRef<import("@vcmap/core").FlightInterpolation>;
+    duration: import("vue").WritableComputedRef<number>;
+    durationRule: typeof durationRule;
+    loop: import("vue").WritableComputedRef<boolean>;
+    disablePlayer: import("vue").Ref<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideName: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideInterpolation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideDuration: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLoop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideGeneral: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    parentId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    owner: {
+        type: (SymbolConstructor | StringConstructor)[];
+        default: symbol;
+    };
+}>>, {
+    parentId: string;
+    owner: string | symbol;
+    heading: string;
+    expandable: boolean;
+    hideName: boolean;
+    hideTitle: boolean;
+    hideGeneral: boolean;
+    hideInterpolation: boolean;
+    hideDuration: boolean;
+    hideLoop: boolean;
+}>;
+export default _default;
+import { durationRule } from './VcsFlightAnchorsComponent.vue';

package/src/components/flight/VcsFlightEditor.vue

@@ -0,0 +1,77 @@
+<template>
+  <AbstractConfigEditor
+    @submit="apply"
+    @cancel="cancel"
+    @reset="reset"
+    v-bind="{ ...$attrs, ...$props }"
+  >
+    <VcsFlightComponent
+      :parent-id="$attrs['window-state'].id"
+      v-bind="{ ...$attrs, ...$props }"
+    />
+  </AbstractConfigEditor>
+</template>
+
+<script>
+  import { onUnmounted, provide } from 'vue';
+  import { FlightInstance } from '@vcmap/core';
+  import deepEqual from 'fast-deep-equal';
+  import AbstractConfigEditor from '../plugins/AbstractConfigEditor.vue';
+  import VcsFlightComponent from './VcsFlightComponent.vue';
+
+  /**
+   * An editor component for viewpoints using AbstractConfigEditor and VcsFlightComponent
+   * @vue-prop {() => import("@vcmap/core").FlightInstance} getProvidedFlightInstance
+   * @vue-prop {(instance: import("@vcmap/core).FlightInstance) => Promise<void>} setFlightInstance
+   */
+  export default {
+    name: 'VcsFlightEditor',
+    components: {
+      AbstractConfigEditor,
+      VcsFlightComponent,
+    },
+    props: {
+      getFlightInstance: {
+        type: Function,
+        required: true,
+      },
+      setFlightInstance: {
+        type: Function,
+        required: true,
+      },
+      resetFlightInstance: {
+        type: Function,
+        default: () => {},
+      },
+    },
+    setup(props, { emit }) {
+      const flightInstance = props.getFlightInstance();
+      let cancel = false;
+
+      const originalConfig = flightInstance.toJSON();
+      provide('flightInstance', flightInstance);
+
+      onUnmounted(() => {
+        if (!cancel && !deepEqual(originalConfig, flightInstance.toJSON())) {
+          props.setFlightInstance(flightInstance);
+        }
+      });
+
+      return {
+        async apply() {
+          emit('close');
+        },
+        async cancel() {
+          await props.resetFlightInstance(new FlightInstance(originalConfig));
+          cancel = true;
+          emit('close');
+        },
+        async reset() {
+          await props.resetFlightInstance(new FlightInstance(originalConfig));
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<{
+    getFlightInstance: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    setFlightInstance: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    resetFlightInstance: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+}, {
+    apply(): Promise<void>;
+    cancel(): Promise<void>;
+    reset(): Promise<void>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    getFlightInstance: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    setFlightInstance: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    resetFlightInstance: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+}>>, {
+    resetFlightInstance: Function;
+}>;
+export default _default;

package/src/components/flight/VcsFlightPlayer.vue

@@ -0,0 +1,124 @@
+<template>
+  <v-container class="py-0 px-1">
+    <VcsLabel>{{ $t('flight.player') }}</VcsLabel>
+    <VcsSlider
+      v-if="clock"
+      type="number"
+      v-model="clock.currentTime"
+      @change="setTime"
+      :step="0"
+      :min="clock.startTime"
+      :max="clock.endTime"
+      track-fill-color="primary"
+      :disabled="!isCurrentPlayer || disabled"
+    />
+    <div class="d-flex px-1 align-center justify-space-between">
+      <span>{{ clockTime(clock.currentTime) }}</span>
+      <VcsButton
+        class="d-flex"
+        v-for="(btn, index) in actions"
+        :key="`${btn.name}-${index}`"
+        :tooltip="btn.title"
+        :icon="btn.icon"
+        :active="btn.active"
+        :disabled="btn.disabled || disabled"
+        :has-update="btn.hasUpdate"
+        :background="btn.background"
+        @click.stop="btn.callback($event)"
+        v-bind="{ ...$attrs }"
+        v-on="{ ...$listeners, ...btn.listeners }"
+      />
+      <span>{{ clockTime(clock.endTime) }}</span>
+    </div>
+  </v-container>
+</template>
+<script>
+  import { inject, onMounted, onUnmounted, ref } from 'vue';
+  import { VContainer } from 'vuetify/lib';
+  import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsButton from '../buttons/VcsButton.vue';
+  import { createFlightPlayerActions } from '../../actions/flightActions.js';
+  import { getProvidedFlightInstance } from './composables.js';
+
+  function getDefaultClock() {
+    return {
+      startTime: 0,
+      endTime: 0,
+      currentTime: 0,
+      times: [],
+    };
+  }
+
+  /**
+   * @description A component for editing flight anchors.
+   * Requires a flightInstance to be provided via vue-provide.
+   */
+  export default {
+    name: 'VcsFlightPlayer',
+    components: {
+      VcsLabel,
+      VcsButton,
+      VContainer,
+      VcsSlider,
+    },
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const flightInstance = getProvidedFlightInstance();
+      const clock = ref(getDefaultClock());
+      const isCurrentPlayer = ref(true);
+      let flightInstancePlayer;
+
+      const { actions, destroy } = createFlightPlayerActions(
+        app,
+        flightInstance,
+      );
+
+      const playerChangedListener = app.flights.playerChanged.addEventListener(
+        (player) => {
+          if (player?.flightInstanceName === flightInstance.name) {
+            isCurrentPlayer.value = true;
+            flightInstancePlayer = player;
+            clock.value = player.clock;
+          } else {
+            isCurrentPlayer.value = false;
+            flightInstancePlayer = undefined;
+            clock.value = getDefaultClock();
+          }
+        },
+      );
+
+      onMounted(async () => {
+        flightInstancePlayer =
+          await app.flights.setPlayerForFlight(flightInstance);
+        clock.value = flightInstancePlayer.clock;
+      });
+
+      onUnmounted(() => {
+        destroy();
+        playerChangedListener();
+      });
+
+      return {
+        clock,
+        actions,
+        isCurrentPlayer,
+        clockTime(seconds) {
+          const mins = Math.floor(seconds / 60);
+          const secs = Math.floor(seconds % 60);
+          return `${mins}:${secs < 10 ? 0 : ''}${secs}`;
+        },
+        setTime(seconds) {
+          flightInstancePlayer?.goToTime(seconds);
+        },
+      };
+    },
+  };
+</script>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    clock: import("vue").Ref<{
+        startTime: number;
+        endTime: number;
+        currentTime: number;
+        times: never[];
+    }>;
+    actions: import("../../actions/actionHelper.js").VcsAction[];
+    isCurrentPlayer: import("vue").Ref<boolean>;
+    clockTime(seconds: any): string;
+    setTime(seconds: any): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+}>;
+export default _default;

package/src/components/flight/composables.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Unwraps the FlightInstance, if a shallowRef is provided
+ * @returns {import("@vcmap/core").FlightInstance}
+ */
+export function getProvidedFlightInstance(): import("@vcmap/core").FlightInstance;
+/**
+ * @param {import("../../manager/window/windowManager.js").default} windowManager
+ * @param {import("vue").Ref<boolean>} disabled
+ * @returns {(function(): void)}
+ */
+export function setupFlightAnchorEditingListener(windowManager: import("../../manager/window/windowManager.js").default, disabled: import("vue").Ref<boolean>): (() => void);

package/src/components/flight/composables.js

@@ -0,0 +1,39 @@
+import { inject, isRef, unref } from 'vue';
+import VcsViewpointEditor from '../viewpoint/VcsViewpointEditor.vue';
+
+/**
+ * Unwraps the FlightInstance, if a shallowRef is provided
+ * @returns {import("@vcmap/core").FlightInstance}
+ */
+export function getProvidedFlightInstance() {
+  const injected = inject('flightInstance');
+  if (isRef(injected)) {
+    return unref(injected);
+  }
+  return injected;
+}
+
+/**
+ * @param {import("../../manager/window/windowManager.js").default} windowManager
+ * @param {import("vue").Ref<boolean>} disabled
+ * @returns {(function(): void)}
+ */
+export function setupFlightAnchorEditingListener(windowManager, disabled) {
+  const editingAnchors = new Set();
+  const anchorEditorListeners = [
+    windowManager.added.addEventListener((added) => {
+      if (added.component === VcsViewpointEditor) {
+        editingAnchors.add(added.id);
+      }
+    }),
+    windowManager.removed.addEventListener((removed) => {
+      if (editingAnchors.has(removed.id)) {
+        editingAnchors.delete(removed.id);
+      }
+      disabled.value = editingAnchors.size > 0;
+    }),
+  ];
+  return () => {
+    anchorEditorListeners.forEach((cb) => cb());
+  };
+}