@vcmap/ui 5.1.8 → 5.2.0

package/src/i18n/en.js

@@ -132,10 +132,13 @@ const messages = {
       zoomToAnchor: 'Zoom to anchor',
       noAnchor: 'No flight anchor available yet.',
       invalidDuration: 'The total flight duration must be greater zero!',
+      zoom: 'Zoom to extent',
+      export: 'Export flight',
+      exportPath: 'Export flight path',
     },
     viewpoint: {
       name: 'Name (ID)',
-      viewpointTitle: 'Title',
+      title: 'Title',
       titlePlaceholder: 'Title of viewpoint',
       groundPosition: 'Ground position',
       cameraPosition: 'Camera position',

package/src/manager/collectionManager/CollectionComponent.vue

@@ -21,23 +21,7 @@
       </template>
     </v-expansion-panel-header>
     <v-expansion-panel-content class="pb-1">
-      <vcs-list
-        :items="items.slice(0, limit)"
-        :draggable="draggable"
-        :selectable="selectable"
-        :single-select="singleSelect"
-        v-model="selection"
-        :show-title="false"
-        @item-moved="move"
-      />
-      <v-sheet v-if="items.length > limit" class="ma-2 pl-2">
-        <VcsButton @click="openCollectionComponentList">
-          {{ $t('collectionManager.more') }}
-        </VcsButton>
-      </v-sheet>
-      <v-sheet v-else-if="items.length === 0" class="ma-2 pl-2">
-        {{ $t('collectionManager.empty') }}
-      </v-sheet>
+      <CollectionComponentContent @openList="(id) => $emit('openList', id)" />
     </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
@@ -49,30 +33,31 @@
     VExpansionPanel,
     VExpansionPanelHeader,
     VExpansionPanelContent,
-    VSheet,
   } from 'vuetify/lib';
-  import VcsList, {
-    createSelectionActions,
-  } from '../../components/lists/VcsList.vue';
+  import { createSelectionActions } from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
-  import VcsButton from '../../components/buttons/VcsButton.vue';
-  import { moveItem } from './CollectionComponentList.vue';
+  import CollectionComponentContent from './CollectionComponentContent.vue';
+
+  /**
+   * @typedef {Object} FormSectionOptions
+   * @property {boolean} [expandable]
+   * @property {boolean} [startOpen]
+   * @property {boolean} [disabled]
+   */
 
   /**
    * @description
-   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * Renders content of CollectionComponentClass in an expansion panel using CollectionComponentContent.vue
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
    */
   export default {
     name: 'CollectionComponent',
     components: {
+      CollectionComponentContent,
       VcsActionButtonList,
-      VcsButton,
-      VcsList,
       VExpansionPanel,
       VExpansionPanelHeader,
       VExpansionPanelContent,
-      VSheet,
       VIcon,
     },
     setup(_props, { emit }) {
@@ -91,13 +76,9 @@
 
       return {
         title: collectionComponent.title,
-        items: collectionComponent.items,
         selection: collectionComponent.selection,
-        draggable: collectionComponent.draggable,
         selectable: collectionComponent.selectable,
-        singleSelect: collectionComponent.singleSelect,
         overflowCount: collectionComponent.overflowCount,
-        limit: collectionComponent.limit,
         actions: computed(() => {
           if (
             collectionComponent.selectable.value &&
@@ -107,12 +88,6 @@
           }
           return actions.value;
         }),
-        move({ item, targetIndex }) {
-          moveItem(collectionComponent, item, targetIndex);
-        },
-        openCollectionComponentList() {
-          emit('openList', collectionComponent.id);
-        },
       };
     },
   };
@@ -125,16 +100,4 @@
   .v-icon {
     font-size: 16px;
   }
-  ::v-deep {
-    .v-list {
-      .v-list-item {
-        padding: 4px 8px 4px 28px;
-      }
-      .v-list-item__selected {
-        border-left: solid 4px;
-        border-left-color: var(--v-primary-base);
-        padding-left: 24px !important;
-      }
-    }
-  }
 </style>

package/src/manager/collectionManager/CollectionComponent.vue.d.ts

@@ -1,17 +1,13 @@
 declare const _default: import("vue").DefineComponent<{}, {
     title: any;
-    items: any;
     selection: any;
-    draggable: any;
     selectable: any;
-    singleSelect: any;
     overflowCount: any;
-    limit: any;
     actions: import("vue").ComputedRef<any>;
-    move({ item, targetIndex }: {
-        item: any;
-        targetIndex: any;
-    }): void;
-    openCollectionComponentList(): void;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;
+export type FormSectionOptions = {
+    expandable?: boolean | undefined;
+    startOpen?: boolean | undefined;
+    disabled?: boolean | undefined;
+};

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-container class="py-0 px-0">
+    <vcs-list
+      :items="items.slice(0, limit)"
+      :draggable="draggable"
+      :selectable="selectable"
+      :single-select="singleSelect"
+      v-model="selection"
+      :show-title="false"
+      @item-moved="move"
+    />
+    <v-sheet v-if="items.length > limit" class="ma-2 pl-2">
+      <VcsButton @click="openCollectionComponentList">
+        {{ $t('collectionManager.more') }}
+      </VcsButton>
+    </v-sheet>
+    <v-sheet v-else-if="items.length === 0" class="ma-2 pl-2">
+      {{ $t('collectionManager.empty') }}
+    </v-sheet>
+  </v-container>
+</template>
+
+<script>
+  import { computed, inject } from 'vue';
+  import { VSheet, VContainer } from 'vuetify/lib';
+  import VcsList, {
+    createSelectionActions,
+  } from '../../components/lists/VcsList.vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { moveItem } from './CollectionComponentList.vue';
+
+  /**
+   * @description
+   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   * @vue-event {string} openList
+   */
+  export default {
+    name: 'CollectionComponent',
+    components: {
+      VcsButton,
+      VcsList,
+      VSheet,
+      VContainer,
+    },
+    setup(_props, { emit }) {
+      /**
+       * @type {CollectionComponentClass}
+       */
+      const collectionComponent = inject('collectionComponent');
+
+      const selectionActions = createSelectionActions(
+        collectionComponent.items,
+        collectionComponent.selection,
+        emit,
+      );
+
+      const actions = collectionComponent.getActions();
+
+      return {
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        overflowCount: collectionComponent.overflowCount,
+        limit: collectionComponent.limit,
+        actions: computed(() => {
+          if (
+            collectionComponent.selectable.value &&
+            !collectionComponent.singleSelect.value
+          ) {
+            return [...selectionActions, ...actions.value];
+          }
+          return actions.value;
+        }),
+        move({ item, targetIndex }) {
+          moveItem(collectionComponent, item, targetIndex);
+        },
+        openCollectionComponentList() {
+          emit('openList', collectionComponent.id);
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep {
+    .v-list {
+      .v-list-item {
+        padding: 4px 8px 4px 28px;
+      }
+      .v-list-item__selected {
+        border-left: solid 4px;
+        border-left-color: var(--v-primary-base);
+        padding-left: 24px !important;
+      }
+    }
+  }
+</style>

package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    title: any;
+    items: any;
+    selection: any;
+    draggable: any;
+    selectable: any;
+    singleSelect: any;
+    overflowCount: any;
+    limit: any;
+    actions: import("vue").ComputedRef<any>;
+    move({ item, targetIndex }: {
+        item: any;
+        targetIndex: any;
+    }): void;
+    openCollectionComponentList(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="v-expansion-panel-header px-2 v-expansion-panel-header--active">
+    <div
+      v-if="!hideHeader"
+      class="v-expansion-panel-header px-2 v-expansion-panel-header--active"
+    >
       <div class="d-flex justify-space-between">
         <div class="d-flex align-center gap-1 pl-2">
           <span>
@@ -69,7 +72,8 @@
    * @description
    * Renders the items of a CollectionComponentClass in a List.
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
-   * @vue-prop {string} showLessButton - Show a `show less button` at the end of the list, which will emit a closeList event
+   * @vue-prop {boolean} showLessButton - Show a `show less button` at the end of the list, which will emit a closeList event
+   * @vue-prop {boolean} hideHeader - Whether to hide the header or not
    */
   export default {
     name: 'CollectionComponentList',
@@ -78,6 +82,10 @@
         type: Boolean,
         default: true,
       },
+      hideHeader: {
+        type: Boolean,
+        default: false,
+      },
     },
     components: {
       VcsButton,

package/src/manager/collectionManager/CollectionComponentList.vue.d.ts

@@ -12,6 +12,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hideHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     title: any;
     items: any;
@@ -32,7 +36,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    hideHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
+    hideHeader: boolean;
     showLessButton: boolean;
 }>;
 export default _default;

package/src/manager/collectionManager/CollectionComponentStandalone.vue

@@ -0,0 +1,91 @@
+<template>
+  <VcsFormSection
+    :heading="title"
+    :header-actions="actions"
+    :action-button-list-overflow-count="overflowCount"
+    v-bind="{ ...$attrs }"
+  >
+    <collection-component-list
+      v-if="componentListView"
+      hide-header
+      @closeList="closeList"
+    />
+    <CollectionComponentContent v-else @openList="openList" />
+  </VcsFormSection>
+</template>
+
+<script>
+  import { computed, getCurrentInstance, inject, ref } from 'vue';
+  import VcsFormSection from '../../components/form-inputs-controls/VcsFormSection.vue';
+  import { createSelectionActions } from '../../components/lists/VcsList.vue';
+  import CollectionComponentList from './CollectionComponentList.vue';
+  import CollectionComponentContent from './CollectionComponentContent.vue';
+
+  /**
+   * @description
+   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
+  export default {
+    name: 'CollectionComponent',
+    components: {
+      CollectionComponentList,
+      CollectionComponentContent,
+      VcsFormSection,
+    },
+    setup(_props, { emit }) {
+      const vm = getCurrentInstance().proxy;
+      /**
+       * @type {CollectionComponentClass}
+       */
+      const collectionComponent = inject('collectionComponent');
+      /**
+       * @type {import("vue").Ref<boolean>}
+       */
+      const componentListView = ref(false);
+
+      const selectionActions = createSelectionActions(
+        collectionComponent.items,
+        collectionComponent.selection,
+        emit,
+      );
+
+      const actions = collectionComponent.getActions();
+
+      const title = computed(() => {
+        if (
+          collectionComponent.selectable &&
+          collectionComponent.selection.length > 0
+        ) {
+          return `${vm.$t(collectionComponent.title.value)} (${
+            collectionComponent.selection.value.length
+          })`;
+        }
+        return collectionComponent.title.value;
+      });
+
+      return {
+        title,
+        overflowCount: collectionComponent.overflowCount,
+        actions: computed(() => {
+          if (
+            collectionComponent.selectable.value &&
+            !collectionComponent.singleSelect.value
+          ) {
+            return [...selectionActions, ...actions.value];
+          }
+          return actions.value;
+        }),
+        componentListView,
+        openList() {
+          componentListView.value = true;
+        },
+        closeList() {
+          componentListView.value = false;
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

package/src/manager/collectionManager/CollectionComponentStandalone.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    title: import("vue").ComputedRef<any>;
+    overflowCount: any;
+    actions: import("vue").ComputedRef<any>;
+    componentListView: import("vue").Ref<boolean>;
+    openList(): void;
+    closeList(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/manager/collectionManager/collectionManager.d.ts

@@ -86,10 +86,10 @@ declare class CollectionManager implements ICollectionManager {
      */
     private _itemFilters;
     /**
-     * @type {Array<{actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
+     * @type {Array<{ownedActions:Array<OwnedAction>,actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
      * @private
      */
-    private _actions;
+    private _itemActions;
     /**
      * @param {string} id
      * @returns {CollectionComponentClass<Object>|undefined}

package/src/manager/collectionManager/collectionManager.js

@@ -78,10 +78,10 @@ class CollectionManager {
      */
     this._itemFilters = [];
     /**
-     * @type {Array<{actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
+     * @type {Array<{ownedActions:Array<OwnedAction>,actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
      * @private
      */
-    this._actions = [];
+    this._itemActions = [];
   }
 
   /**
@@ -163,12 +163,10 @@ class CollectionManager {
       .forEach(({ collectionComponentIds, ...itemFilter }) =>
         collectionComponent.addItemFilter(itemFilter),
       );
-    this._actions
+    this._itemActions
       .filter(filterIds)
-      .forEach(({ actions, owner: actionOwner }) =>
-        collectionComponent.addActions(
-          actions.map(({ action }) => ({ action, actionOwner })),
-        ),
+      .forEach(({ ownedActions }) =>
+        collectionComponent.addActions(ownedActions),
       );
 
     this.added.raiseEvent(collectionComponent);
@@ -342,7 +340,7 @@ class CollectionManager {
     }
 
     if (
-      !this._actions.find(
+      !this._itemActions.find(
         (cached) => cached.actions === actions && cached.owner === owner,
       )
     ) {
@@ -353,8 +351,9 @@ class CollectionManager {
           component.addActions(ownedActions);
         }
       });
-      this._actions.push({
+      this._itemActions.push({
         actions,
+        ownedActions,
         owner,
         collectionComponentIds,
       });
@@ -368,13 +367,16 @@ class CollectionManager {
   removeActions(actions, owner) {
     check(owner, [String, Symbol]);
 
-    const ownedActions = actions.map((action) => ({ action, owner }));
-    [...this._collectionComponents.values()].forEach((collectionComponent) => {
-      collectionComponent.removeActions(ownedActions);
-    });
-    this._actions = this._actions.filter(
-      (cached) => !(cached.actions === actions && cached.owner === owner),
-    );
+    const idx = this._itemActions.findIndex((a) => a.actions === actions);
+    if (idx > -1) {
+      const { collectionComponentIds, ownedActions } = this._itemActions[idx];
+      collectionComponentIds
+        .map((id) => this.get(id))
+        .forEach((collectionComponent) => {
+          collectionComponent.removeActions(ownedActions);
+        });
+      this._itemActions.splice(idx, 1);
+    }
   }
 
   /**
@@ -399,8 +401,8 @@ class CollectionManager {
     this._itemFilters = this._itemFilters.filter((itemFilter) => {
       return itemFilter.owner !== owner;
     });
-    this._actions = this._actions.filter(
-      (ownedAction) => ownedAction.owner !== owner,
+    this._itemActions = this._itemActions.filter(
+      (itemAction) => itemAction.owner !== owner,
     );
   }
 
@@ -422,7 +424,7 @@ class CollectionManager {
     });
     this._itemMappings = [];
     this._itemFilters = [];
-    this._actions = [];
+    this._itemActions = [];
   }
 
   /**

package/src/manager/panel/PanelComponent.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    :id="panelState.id"
+    class="position-absolute panel-component"
+    :class="{
+      'panel-component-left': isLeft,
+      'panel-component-right': isRight,
+      'panel-component-bottom': isBottom,
+      'theme--light': !appIsDark,
+      'theme--dark': appIsDark,
+      resizable: panelState.resizable,
+    }"
+    @mousedown="startResize"
+    @mouseup="stopResize"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import '../../styles/shades.scss';
+
+  .panel-component {
+    padding: 0 4px;
+  }
+  .panel-component.theme--dark::after {
+    content: '';
+    position: absolute;
+    background: map-get($shades, 'black');
+  }
+  .panel-component.theme--light::after {
+    content: '';
+    position: absolute;
+    background: map-get($shades, 'white');
+  }
+
+  .panel-component-left::after {
+    width: 4px;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .panel-component-left.resizable::after {
+    cursor: ew-resize;
+  }
+  .panel-component-right::after {
+    width: 4px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .panel-component-right.resizable::after {
+    cursor: ew-resize;
+  }
+  .panel-component-bottom::after {
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 4px;
+  }
+  .panel-component-bottom.resizable::after {
+    cursor: n-resize;
+  }
+</style>
+
+<script>
+  import { computed, getCurrentInstance } from 'vue';
+  import { PanelLocation } from './panelManager.js';
+
+  export default {
+    name: 'PanelComponent',
+    props: {
+      panelState: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      return {
+        appIsDark: computed(() => {
+          return getCurrentInstance().proxy.$vuetify.theme.dark || !1;
+        }),
+        isLeft: computed(
+          () => props.panelState.location === PanelLocation.LEFT,
+        ),
+        isRight: computed(
+          () => props.panelState.location === PanelLocation.RIGHT,
+        ),
+        isBottom: computed(
+          () => props.panelState.location === PanelLocation.BOTTOM,
+        ),
+        startResize(e) {
+          const { resizable, location } = props.panelState;
+          if (
+            resizable &&
+            ((location === PanelLocation.LEFT &&
+              e.currentTarget.clientWidth - e.offsetX < 4) ||
+              (location === PanelLocation.RIGHT && e.offsetX < 4) ||
+              (location === PanelLocation.BOTTOM && e.offsetY < 4))
+          ) {
+            emit('resize', props.panelState.id);
+          }
+        },
+        stopResize() {
+          emit('resize', undefined);
+        },
+      };
+    },
+  };
+</script>

package/src/manager/panel/PanelComponent.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<{
+    panelState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    appIsDark: import("vue").ComputedRef<any>;
+    isLeft: import("vue").ComputedRef<boolean>;
+    isRight: import("vue").ComputedRef<boolean>;
+    isBottom: import("vue").ComputedRef<boolean>;
+    startResize(e: any): void;
+    stopResize(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    panelState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;