@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/composables.d.ts

@@ -0,0 +1,26 @@
+/**
+ * returns a computed which is true, if the provided attributes contain one or more
+ * padding classes
+ * @param {Object} attrs all the Attributes of the component
+ * @returns {import("vue").ComputedRef<boolean>}
+ */
+export function usePadding(attrs: Object): import("vue").ComputedRef<boolean>;
+/**
+ * returns only the slotNames which are not excluded as a computed.
+ * @param {import("vue").Slots} slots
+ * @param {Array<string>} exclude
+ * @returns {Array<string>}
+ */
+export function getForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): Array<string>;
+/**
+ * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
+ * @param {import("vue").ComputedRef<string|undefined>} tooltip
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent: import("vue").ComputedRef<HTMLElement | undefined>, tooltip: import("vue").ComputedRef<string | undefined>, title: import("vue").ComputedRef<string | undefined>): import("vue").ComputedRef<string>;
+/**
+ * Returns a globally unique vcs component id string
+ * @returns {string}
+ */
+export function useComponentId(): string;

package/src/components/composables.js

@@ -0,0 +1,133 @@
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
+
+/**
+ * returns a computed which is true, if the provided attributes contain one or more
+ * padding classes
+ * @param {Object} attrs all the Attributes of the component
+ * @returns {import("vue").ComputedRef<boolean>}
+ */
+export function usePadding(attrs) {
+  return computed(() => {
+    if (attrs.class) {
+      const classes = attrs.class.split(' ');
+      return classes.some((c) => {
+        return /^p[tblrsexyac]-.*/.test(c);
+      });
+    }
+    return false;
+  });
+}
+
+/**
+ * returns only the slotNames which are not excluded as a computed.
+ * @param {import("vue").Slots} slots
+ * @param {Array<string>} exclude
+ * @returns {Array<string>}
+ */
+export function getForwardSlots(slots, exclude = []) {
+  return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
+}
+
+let intersectionObserver = null;
+/** @type {WeakMap<WeakKey<HTMLElement>, import("vue").ComputedRef<boolean>>} */
+const observedTargets = new WeakMap();
+
+/**
+ * if the visibility of the element changes, the computed ref will be set.
+ * @param {HTMLElement} elem
+ * @param {import("vue").ComputedRef<boolean>} visible
+ * @returns {() => void}}
+ */
+function registerTargetWithIntersectionObserver(elem, visible) {
+  if (!intersectionObserver) {
+    intersectionObserver = new IntersectionObserver((targets) => {
+      targets.forEach((target) => {
+        const visibilityRef = observedTargets.get(target.target);
+        if (visibilityRef) {
+          visibilityRef.value = target.isIntersecting;
+        }
+      });
+    });
+  }
+  intersectionObserver.observe(elem);
+  observedTargets.set(elem, visible);
+  return () => {
+    intersectionObserver.unobserve(elem);
+    observedTargets.delete(elem);
+  };
+}
+
+/**
+ * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
+ * @param {import("vue").ComputedRef<string|undefined>} tooltip
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent, tooltip, title) {
+  const offsetWidth = ref(0);
+  const scrollWidth = ref(0);
+  const visible = ref(false);
+  let observerListener = () => {};
+  watch(visible, () => {
+    if (visible.value && parent.value) {
+      offsetWidth.value = parent.value.offsetWidth;
+      scrollWidth.value = parent.value.scrollWidth;
+    } else {
+      offsetWidth.value = 0;
+      scrollWidth.value = 0;
+    }
+  });
+  watch(
+    parent,
+    () => {
+      observerListener();
+      visible.value = false;
+      const elem = parent.value;
+      if (elem) {
+        if (elem.checkVisibility()) {
+          visible.value = true;
+        } else {
+          observerListener = registerTargetWithIntersectionObserver(
+            elem,
+            visible,
+          );
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(title, async () => {
+    if (visible.value) {
+      await nextTick(() => {
+        offsetWidth.value = parent.value.offsetWidth;
+        scrollWidth.value = parent.value.scrollWidth;
+      });
+    }
+  });
+
+  onUnmounted(() => {
+    observerListener();
+  });
+
+  return computed(() => {
+    if (tooltip.value) {
+      return tooltip.value;
+    }
+    if (title.value && offsetWidth.value < scrollWidth.value) {
+      return title.value;
+    }
+    return '';
+  });
+}
+
+let componentIdCounter = 0;
+
+/**
+ * Returns a globally unique vcs component id string
+ * @returns {string}
+ */
+export function useComponentId() {
+  componentIdCounter += 1;
+  return `vcs-${componentIdCounter}`;
+}

package/src/components/{form-inputs-controls → extent}/VcsExtent.vue

@@ -1,17 +1,16 @@
 <template>
-  <v-container class="py-0 px-1">
-    <v-row no-gutters v-if="value.projection">
+  <v-container class="py-0 px-1 vcs-extent">
+    <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
-        <VcsLabel html-for="projection" dense>
+        <VcsLabel :html-for="`${cid}-projection`">
           {{ $t('components.extent.projection') }}
         </VcsLabel>
       </v-col>
       <v-col>
         <VcsTextField
-          id="projection"
+          :id="`${cid}-projection`"
           disabled
-          dense
-          :value="value.projection.epsg"
+          :model-value="modelValue.projection.epsg"
         />
       </v-col>
     </v-row>
@@ -24,9 +23,9 @@
         [(v) => checkInput(v, max[1])],
       ]"
     >
-      <template #prepend="{ prefixes }">
+      <template #prepend>
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`" dense>
+          <VcsLabel>
             {{ $t('components.extent.min') }}
           </VcsLabel>
         </v-col>
@@ -41,9 +40,9 @@
         [(v) => checkInput(min[1], v)],
       ]"
     >
-      <template #prepend="{ prefixes }">
+      <template #prepend>
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`" dense>
+          <VcsLabel>
             {{ $t('components.extent.max') }}
           </VcsLabel>
         </v-col>
@@ -53,12 +52,14 @@
 </template>
 
 <script>
-  import { computed } from 'vue';
-  import { VCol, VContainer, VRow } from 'vuetify/lib';
+  import { computed, toRaw } from 'vue';
+  import { VCol, VContainer, VRow } from 'vuetify/components';
   import { Extent } from '@vcmap/core';
-  import VcsLabel from './VcsLabel.vue';
-  import VcsTextField from './VcsTextField.vue';
-  import VcsCoordinate from './VcsCoordinate.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
+  import { useProxiedComplexModel } from '../modelHelper.js';
+  import { useComponentId } from '../composables.js';
 
   function checkInput(min, max) {
     return min < max || 'components.extent.invalid';
@@ -66,12 +67,13 @@
 
   /**
    * An input for modelling @vcmap/core ExtentOptions
-   * @vue-prop {import("@vcmap/core").ExtentOptions} value - the extent options to be modeled.
-   * @vue-prop {boolean} disabled - Disable coordinate input.
+   * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+   * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
    * @vue-prop {number} [firstCols=4] - Property to set the column distribution. Default is 4 (one-third/two-third). Use 6 for half-half.
    */
   export default {
     name: 'VcsExtent',
+    inheritAttrs: false,
     components: {
       VcsCoordinate,
       VContainer,
@@ -81,9 +83,9 @@
       VcsTextField,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
-        required: true,
+        default: () => new Extent().toJSON(),
       },
       disabled: {
         type: Boolean,
@@ -94,26 +96,32 @@
         default: 4,
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+
       const getCoordinate = (start, end = 4) =>
         computed({
           get() {
-            return props.value.coordinates.slice(start, end);
+            return localValue.value.coordinates.slice(start, end);
           },
           set(value) {
-            const clone = structuredClone(props.value);
+            const clone = structuredClone(toRaw(localValue.value));
             clone.coordinates[start] = value[0];
             clone.coordinates[end - 1] = value[1];
             if (Extent.validateOptions(clone)) {
-              emit('input', clone);
+              localValue.value = clone;
             }
           },
         });
 
+      const cid = useComponentId();
+
       return {
         min: getCoordinate(0, 2),
         max: getCoordinate(2),
         checkInput,
+        cid,
       };
     },
   };

package/src/components/{form-inputs-controls → extent}/VcsExtent.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
-        required: true;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
     };
     disabled: {
         type: BooleanConstructor;
@@ -15,10 +15,11 @@ declare const _default: import("vue").DefineComponent<{
     min: import("vue").WritableComputedRef<any>;
     max: import("vue").WritableComputedRef<any>;
     checkInput: typeof checkInput;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    cid: string;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
-        required: true;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
     };
     disabled: {
         type: BooleanConstructor;
@@ -28,9 +29,12 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
+    modelValue: Record<string, any>;
     firstCols: number;
-}>;
+}, {}>;
 export default _default;
 declare function checkInput(min: any, max: any): true | "components.extent.invalid";

package/src/components/extent/VcsExtentEditor.vue

@@ -0,0 +1,80 @@
+<template>
+  <VcsFormSection
+    class="vcs-extent-editor"
+    :heading="heading"
+    :header-actions="actions"
+    :action-button-list-overflow-count="2"
+    :disabled="disabled"
+    expandable
+    start-open
+    v-bind="$attrs"
+  >
+    <VcsExtent v-model="localValue" />
+  </VcsFormSection>
+</template>
+
+<script>
+  import { computed, inject, onUnmounted } from 'vue';
+  import { Extent } from '@vcmap/core';
+  import { useProxiedComplexModel } from '../modelHelper.js';
+  import { setupExtentComponentActions } from '../../actions/extentActions.js';
+  import VcsExtent from './VcsExtent.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
+
+  /**
+   * A VcsFormSection with actions to draw and edit an extent
+   * Uses VcsExtent for editing the extent options via input field
+   * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+   * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
+   * @vue-prop {string} [heading='component.extent.title] - Header of the form section
+   */
+  export default {
+    name: 'VcsExtentEditor',
+    inheritAttrs: false,
+    components: {
+      VcsFormSection,
+      VcsExtent,
+    },
+    props: {
+      modelValue: {
+        type: Object,
+        default: () => new Extent().toJSON(),
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      heading: {
+        type: String,
+        default: 'components.extent.title',
+      },
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+      const app = inject('vcsApp');
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+
+      const extent = computed({
+        get() {
+          return new Extent(localValue.value);
+        },
+        set(value) {
+          localValue.value = value.toJSON();
+        },
+      });
+
+      const { actions, destroy } = setupExtentComponentActions(app, extent);
+
+      onUnmounted(() => {
+        destroy();
+      });
+
+      return {
+        localValue,
+        actions,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/extent/VcsExtentEditor.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: ObjectConstructor;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    localValue: import("vue").Ref<any>;
+    actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: ObjectConstructor;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: Record<string, any>;
+    heading: string;
+}, {}>;
+export default _default;

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-flight-anchors-component"
     :heading="title"
     :expandable="expandable"
     start-open
@@ -7,13 +8,14 @@
   >
     <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"
-        />
+        <p>{{ $t('components.flight.noAnchor') }}</p>
+        <div class="d-flex justify-center">
+          <VcsButton
+            :icon="addAnchorAction.icon"
+            :tooltip="addAnchorAction.title"
+            @click.stop="addAnchorAction.callback()"
+          />
+        </div>
       </v-sheet>
       <VcsList
         v-else
@@ -22,31 +24,35 @@
         :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 #item.title="{ item, index }">
+          <div class="d-flex align-center">
+            <span>{{ $st(item.title) }}</span>
+            <v-spacer />
+            <div class="duration-input">
+              <VcsTextField
+                v-if="showDuration(index)"
+                v-model.number="item.duration"
+                :hide-spin-buttons="true"
+                type="number"
+                unit="s"
+                step="1"
+                :decimals="2"
+                :rules="[durationRule]"
+                no-padding
+                class="ml-auto"
+              />
+            </div>
+          </div>
         </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 #item.intermediate="{ index }">
+          <div class="d-flex justify-center h-0">
+            <VcsButton
+              :icon="addAnchorAction.icon"
+              :tooltip="addAnchorAction.title"
+              @click.stop="addAnchorAction.callback(index + 1)"
+              class="z-index-99 mx-auto add-in-button"
+            />
+          </div>
         </template>
       </VcsList>
     </v-container>
@@ -54,7 +60,7 @@
 </template>
 <script>
   import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/lib';
+  import { VContainer, VSheet, VSpacer } from 'vuetify/components';
   import {
     anchorFromViewpoint,
     anchorToViewpoint,
@@ -62,7 +68,7 @@
   } from '@vcmap/core';
   import { Cartesian3 } from '@vcmap-cesium/engine';
   import { createToggleAction } from '../../actions/actionHelper.js';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsList from '../lists/VcsList.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsButton from '../buttons/VcsButton.vue';
@@ -196,7 +202,8 @@
   }
 
   export function durationRule(value) {
-    if (Number.isFinite(value) && value > 0) {
+    const v = Number.parseFloat(value);
+    if (Number.isFinite(v) && v > 0) {
       return true;
     }
     return 'components.flight.invalidDuration';
@@ -216,6 +223,7 @@
       VcsTextField,
       VContainer,
       VSheet,
+      VSpacer,
       VcsFormSection,
       VcsList,
     },
@@ -241,6 +249,14 @@
         flightInstance.propertyChanged.addEventListener((prop) => {
           if (prop === 'loop') {
             loop.value = flightInstance.loop;
+            // update last anchor's duration
+            const lastAnchor = flightInstance.anchors.get(
+              flightInstance.anchors.size - 1,
+            );
+            lastAnchor.duration = calculateDuration(
+              lastAnchor,
+              flightInstance.anchors.get(0),
+            );
           }
         });
 
@@ -326,4 +342,21 @@
     },
   };
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  :deep(.v-list-item) {
+    padding: 0 8px 0 16px;
+  }
+  :deep(.v-list) {
+    overflow: visible;
+  }
+  .duration-input {
+    width: 60px;
+  }
+  .z-index-99 {
+    z-index: 99 !important;
+  }
+  .add-in-button {
+    min-height: 0 !important;
+    margin-top: -8px;
+  }
+</style>

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

@@ -13,18 +13,18 @@ declare const _default: import("vue").DefineComponent<{
         default: symbol;
     };
 }, {
-    addAnchorAction: import("../../actions/actionHelper.js").VcsAction;
+    addAnchorAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;
     title: import("vue").Ref<string>;
-    items: import("vue").Ref<import("../../manager/collectionManager/collectionComponentClass.js").CollectionComponentListItem[]>;
+    items: import("vue").Ref<import("../../manager/collectionManager/collectionComponentClass.js", { with: { "resolution-mode": "import" } }).CollectionComponentListItem[]>;
     draggable: import("vue").Ref<boolean>;
-    actions: import("vue").ComputedRef<import("../../actions/actionHelper.js").VcsAction[]>;
+    actions: import("vue").ComputedRef<import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).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<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     expandable: {
         type: BooleanConstructor;
         default: boolean;
@@ -38,8 +38,8 @@ declare const _default: import("vue").DefineComponent<{
         default: symbol;
     };
 }>>, {
-    parentId: string;
     owner: string | symbol;
+    parentId: string;
     expandable: boolean;
-}>;
+}, {}>;
 export default _default;