@vcmap/ui 6.2.0-rc.1 → 6.2.0-rc.3

package/src/actions/flightActions.js

@@ -1,16 +1,21 @@
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { check, maybe, ofEnum } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
 import {
   createFlightVisualization,
+  createFlightMovie,
   exportFlightAsGeoJson,
   exportFlightPathAsGeoJson,
   FlightInstance,
   moduleIdSymbol,
   parseFlightOptionsFromGeoJson,
+  createFlightPlayer,
+  LayerState,
 } from '@vcmap/core';
 import { NotificationType } from '../notifier/notifier.js';
-import { downloadText } from '../downloadHelper.js';
+import { downloadBlob, downloadText } from '../downloadHelper.js';
+import { addLoadingOverlay, callSafeAction } from './actionHelper.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
 
 /**
  * @param {import("../vcsUiApp.js").default} app
@@ -97,10 +102,7 @@ export function createPlayAction(app, instance) {
 /**
  * @enum {string}
  */
-export const PlayerDirection = {
-  Forward: 'forward',
-  Backward: 'backward',
-};
+export const PlayerDirection = { Forward: 'forward', Backward: 'backward' };
 
 /**
  * @param {import("../vcsUiApp.js").default} app
@@ -365,18 +367,32 @@ export async function createFlightVisualizationAction(
   instance,
   active = true,
 ) {
-  let flightVis = await createFlightVisualization(instance, app);
+  let flightVis;
+  let flightVisListener;
+  let flightVisStateListener;
 
   const action = reactive({
     name: 'components.flight.hidePath',
     title: 'components.flight.hidePath',
     icon: '$vcsEye',
-    active,
+    active: false,
     async callback() {
       if (!flightVis) {
         flightVis = await createFlightVisualization(instance, app);
+        flightVisListener?.();
+        flightVisListener = flightVis.destroyed.addEventListener(() => {
+          flightVis = undefined;
+          flightVisListener?.();
+          flightVisStateListener?.();
+        });
+        flightVisStateListener?.();
+        flightVisStateListener = flightVis.stateChanged.addEventListener(
+          (state) => {
+            action.active = state === LayerState.ACTIVE;
+          },
+        );
       }
-      if (this.active) {
+      if (flightVis.state === LayerState.ACTIVE) {
         flightVis.deactivate();
       } else {
         flightVis.activate().catch(() => {
@@ -384,22 +400,102 @@ export async function createFlightVisualizationAction(
           this.active = false;
         });
       }
-      this.active = !this.active;
+      this.active = flightVis.state === LayerState.ACTIVE;
     },
   });
 
   if (active) {
-    await flightVis.activate();
+    callSafeAction(action);
   }
 
   const destroy = () => {
-    flightVis.deactivate();
-    flightVis.destroy();
+    flightVis?.deactivate?.();
+    flightVis?.destroy?.();
   };
 
   return { action, destroy };
 }
 
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{actions: import("./actionHelper.js").VcsAction[], destroy: function(): void}}
+ */
+export function createFlightMovieActions(app, instance) {
+  const progress = ref(0);
+
+  function updateProgress(playerClock) {
+    const duration = playerClock.endTime - playerClock.startTime;
+    const currentTime = playerClock.currentTime - playerClock.startTime;
+    progress.value = currentTime / duration;
+  }
+
+  async function recordFlight(options = {}) {
+    let player;
+    let flightVis;
+    let playerListener = () => {};
+    let removeLoadingOverlay = () => {};
+    try {
+      flightVis = await createFlightVisualization(instance, app);
+      if (flightVis.state === LayerState.ACTIVE) {
+        flightVis.deactivate();
+      }
+      player = await createFlightPlayer(instance, app);
+      playerListener = player.clock.changed.addEventListener(updateProgress);
+      const { start, cancel } = createFlightMovie(app, player, options);
+      removeLoadingOverlay = addLoadingOverlay(
+        app,
+        vcsAppSymbol,
+        'flight-recording',
+        {
+          progress,
+          title: 'components.flight.record.inProgress',
+          cancellable: true,
+          cancel,
+        },
+      );
+      const blob = await start();
+      removeLoadingOverlay?.();
+      app.notifier.add({
+        type: NotificationType.SUCCESS,
+        message: app.vueI18n.t('components.flight.record.success'),
+      });
+      const title = instance.properties?.title || 'flight';
+      downloadBlob(blob, `${title}.webm`);
+    } catch (e) {
+      getLogger('flightActions').error('Error while creating flight movie', e);
+    } finally {
+      player?.destroy();
+      flightVis?.destroy();
+      playerListener?.();
+      removeLoadingOverlay?.();
+    }
+  }
+
+  const actions = [
+    reactive({
+      name: 'components.flight.record.standard',
+      callback: recordFlight,
+    }),
+    reactive({
+      name: 'components.flight.record.high',
+      callback: recordFlight.bind(null, {
+        fps: 60,
+        highDefinition: true,
+      }),
+    }),
+  ];
+
+  const destroy = instance.anchorsChanged.addEventListener(() => {
+    actions.forEach((action) => {
+      action.disabled = !instance.isValid();
+    });
+  });
+
+  return { actions, destroy };
+}
+
 /**
  *
  * @param {import("@vcmap/core").FlightInstance} instance

package/src/application/VcsApp.vue

@@ -170,11 +170,14 @@
       OpenlayersMap: '$vcs2d',
       CesiumMap: '$vcs3d',
       ObliqueMap: '$vcsObliqueView',
+      PanoramaMap: 'mdi-panorama-variant-outline',
     };
+
     const mapBtnWeight = {
       OpenlayersMap: 3,
       CesiumMap: 2,
       ObliqueMap: 1,
+      PanoramaMap: 0,
     };
 
     const mapButtonActionDestroy = {};
@@ -322,6 +325,14 @@
           vcsAppSymbol,
         );
       }
+
+      if (
+        app.uiConfig.config.autoCloseLegend &&
+        newValue.length === 0 &&
+        app.windowManager.has(legendComponentId)
+      ) {
+        app.windowManager.remove(legendComponentId);
+      }
       currentEntryLength = newValue.length;
     });
 

package/src/application/VcsApp.vue.d.ts

@@ -398,6 +398,10 @@ declare const _default: import("vue").DefineComponent<{
          * - open the legend window, if new layer has a config
          */
         readonly openLegendOnAdd?: boolean | undefined;
+        /**
+         * - automatically close the legend window, if no layer has a config
+         */
+        readonly autoCloseLegend?: boolean | undefined;
         /**
          * - can be used to apply a scale factor to the overviewMap
          */

package/src/application/VcsContainer.vue.d.ts

@@ -310,6 +310,10 @@ declare const _default: import("vue").DefineComponent<{
          * - open the legend window, if new layer has a config
          */
         readonly openLegendOnAdd?: boolean | undefined;
+        /**
+         * - automatically close the legend window, if no layer has a config
+         */
+        readonly autoCloseLegend?: boolean | undefined;
         /**
          * - can be used to apply a scale factor to the overviewMap
          */

package/src/application/VcsMainMap.vue

@@ -2,14 +2,23 @@
   <div class="vcs-main-map">
     <VcsMap :map-id="mapId" />
     <MapNavigation v-if="showMapNavigation" />
+    <div
+      :id="overviewMapContainerId"
+      class="overviewmap-container"
+      :class="xs || mobileLandscape ? 'mobile' : ''"
+      :style="{ display: overviewMapState ? 'block' : 'none' }"
+    />
   </div>
 </template>
 
 <script>
   import { inject, onMounted, onUnmounted, ref, computed } from 'vue';
   import { v4 as uuid } from 'uuid';
-  import MapNavigation from '../navigation/MapNavigation.vue';
+  import { useDisplay } from 'vuetify';
   import VcsMap from './VcsMap.vue';
+  import MapNavigation from '../navigation/MapNavigation.vue';
+  import { overviewMapContainerId } from '../navigation/overviewMap.js';
+  import { isMobileLandscape } from '../vuePlugins/vuetify.js';
 
   export function setupMapNavigation(app) {
     const mapSize = ref(app.maps.size);
@@ -48,6 +57,9 @@
       const id = uuid();
       const mapId = `mapCollection-${id}`;
 
+      const mobileLandscape = isMobileLandscape();
+      const { xs } = useDisplay();
+
       const { showMapNavigation, destroy: destroyMapNavigationListener } =
         setupMapNavigation(app);
 
@@ -63,9 +75,35 @@
       return {
         mapId,
         showMapNavigation,
+        overviewMapContainerId,
+        overviewMapState: app.overviewMap.currentState,
+        mobileLandscape,
+        xs,
       };
     },
   };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .overviewmap-container {
+    position: absolute;
+    right: 100px;
+    bottom: 25px;
+    width: 300px;
+    height: 240px;
+    background: rgb(var(--v-theme-surface));
+    border: 3px solid rgb(var(--v-theme-surface));
+    border-radius: 3px;
+    &.mobile {
+      width: 100%;
+      right: 0px;
+      bottom: 0px;
+      border-radius: 0px;
+    }
+  }
+
+  :deep(.overviewMapElement) {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/application/VcsMainMap.vue.d.ts

@@ -5,5 +5,9 @@ export function setupMapNavigation(app: any): {
 declare const _default: import("vue").DefineComponent<{}, {
     mapId: string;
     showMapNavigation: import("vue").ComputedRef<boolean>;
+    overviewMapContainerId: string;
+    overviewMapState: any;
+    mobileLandscape: import("vue").ComputedRef<boolean>;
+    xs: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsMap.vue

@@ -36,15 +36,6 @@
     overflow: hidden; /* Fix for iFrame content */
   }
 
-  :deep(.overviewMapElement) {
-    position: absolute;
-    top: 3px;
-    bottom: 3px;
-    left: 3px;
-    right: 3px;
-    overflow: hidden; /* Fix for iFrame content */
-  }
-
   :deep(.cesium-widget),
   :deep(.cesium-widget canvas) {
     width: 100%;

package/src/application/VcsNavbar.vue

@@ -14,7 +14,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="mapActions"
-                :overflow-count="smAndDown ? 2 : 3"
+                :overflow-count="smAndDown ? 2 : 4"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -104,6 +104,7 @@
                   :tooltip="searchAction.title"
                   :icon="searchAction.icon"
                   :active="searchAction.active"
+                  :background="searchAction.background"
                   @click.stop="searchAction.callback($event)"
                   v-bind="{ ...$attrs }"
                 />

package/src/callback/activateMapCallback.d.ts

@@ -0,0 +1,30 @@
+export default ActivateMapCallback;
+export type ActivateMapCallbackOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    mapName: string;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { mapName: string }} ActivateMapCallbackOptions
+ * @property {string} mapName
+ */
+/**
+ * Callback to activate a map by name using the app's map collection.
+ * @class
+ * @extends VcsCallback
+ */
+declare class ActivateMapCallback extends VcsCallback {
+    /**
+     * @param {ActivateMapCallbackOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ActivateMapCallbackOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _mapName;
+    /**
+     * @returns {ActivateMapCallbackOptions}
+     */
+    toJSON(): ActivateMapCallbackOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/activateMapCallback.js

@@ -0,0 +1,63 @@
+import { getLogger } from '@vcsuite/logger';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { mapName: string }} ActivateMapCallbackOptions
+ * @property {string} mapName
+ */
+
+/**
+ * Callback to activate a map by name using the app's map collection.
+ * @class
+ * @extends VcsCallback
+ */
+class ActivateMapCallback extends VcsCallback {
+  /**
+   * @param {ActivateMapCallbackOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._mapName = options.mapName;
+  }
+
+  /**
+   * Activates the map with the given name.
+   */
+  callback() {
+    if (this._mapName) {
+      this._app.maps.setActiveMap(this._mapName).catch((error) => {
+        getLogger(ActivateMapCallback.className).error(
+          `Failed to activate map "${this._mapName}":`,
+          error,
+        );
+      });
+    }
+  }
+
+  /**
+   * @returns {ActivateMapCallbackOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.mapName = this._mapName;
+    return config;
+  }
+
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ActivateMapCallback';
+  }
+}
+
+callbackClassRegistry.registerClass(
+  ActivateMapCallback.className,
+  ActivateMapCallback,
+);
+export default ActivateMapCallback;

package/src/callback/activateOverviewMapCallback.d.ts

@@ -0,0 +1,7 @@
+export default ActivateOverviewMapCallback;
+/**
+ * Callback to activate the overview map using its API.
+ */
+declare class ActivateOverviewMapCallback extends VcsCallback {
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/activateOverviewMapCallback.js

@@ -0,0 +1,26 @@
+import { getLogger } from '@vcsuite/logger';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * Callback to activate the overview map using its API.
+ */
+class ActivateOverviewMapCallback extends VcsCallback {
+  static get className() {
+    return 'ActivateOverviewMapCallback';
+  }
+
+  callback() {
+    this._app.overviewMap.activate().catch((error) => {
+      getLogger(ActivateOverviewMapCallback.className).error(
+        'Failed to activate overview map:',
+        error,
+      );
+    });
+  }
+}
+
+callbackClassRegistry.registerClass(
+  ActivateOverviewMapCallback.className,
+  ActivateOverviewMapCallback,
+);
+export default ActivateOverviewMapCallback;

package/src/callback/deactivateOverviewMapCallback.d.ts

@@ -0,0 +1,7 @@
+export default DeactivateOverviewMapCallback;
+/**
+ * Callback to deactivate the overview map using its API.
+ */
+declare class DeactivateOverviewMapCallback extends VcsCallback {
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/deactivateOverviewMapCallback.js

@@ -0,0 +1,20 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * Callback to deactivate the overview map using its API.
+ */
+class DeactivateOverviewMapCallback extends VcsCallback {
+  static get className() {
+    return 'DeactivateOverviewMapCallback';
+  }
+
+  callback() {
+    this._app.overviewMap.deactivate();
+  }
+}
+
+callbackClassRegistry.registerClass(
+  DeactivateOverviewMapCallback.className,
+  DeactivateOverviewMapCallback,
+);
+export default DeactivateOverviewMapCallback;

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -58,6 +58,7 @@
     </v-container>
   </VcsFormSection>
 </template>
+
 <script>
   import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
   import { VContainer, VSheet, VSpacer } from 'vuetify/components';

package/src/components/flight/VcsFlightPlayer.vue

@@ -1,6 +1,15 @@
 <template>
   <v-container class="py-0 px-1 vcs-flight-player">
-    <VcsLabel html-for="player">{{ $t('flight.player') }}</VcsLabel>
+    <v-row no-gutters class="d-flex align-center">
+      <VcsLabel html-for="player">{{ $t('flight.player') }}</VcsLabel>
+      <v-row class="d-flex justify-end px-1 gc-2" no-gutters>
+        <VcsActionButtonList
+          overflow-icon="$vcsShare"
+          :actions="recordingActions"
+          :disabled="!isCurrentPlayer || disabled"
+        />
+      </v-row>
+    </v-row>
     <VcsSlider
       v-if="clock"
       type="number"
@@ -32,22 +41,22 @@
     </div>
   </v-container>
 </template>
+
 <script>
   import { inject, onMounted, onUnmounted, ref } from 'vue';
-  import { VContainer } from 'vuetify/components';
+  import { VContainer, VRow } from 'vuetify/components';
   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 VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import {
+    createFlightMovieActions,
+    createFlightPlayerActions,
+  } from '../../actions/flightActions.js';
   import { getProvidedFlightInstance } from './composables.js';
 
   function getDefaultClock() {
-    return {
-      startTime: 0,
-      endTime: 0,
-      currentTime: 0,
-      times: [],
-    };
+    return { startTime: 0, endTime: 0, currentTime: 0, times: [] };
   }
 
   /**
@@ -70,18 +79,18 @@
   export default {
     name: 'VcsFlightPlayer',
     components: {
-      VcsLabel,
-      VcsButton,
       VContainer,
+      VRow,
+      VcsActionButtonList,
+      VcsButton,
+      VcsLabel,
       VcsSlider,
     },
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
+    props: { disabled: { type: Boolean, default: false } },
     setup() {
+      /**
+       * @type {import("../../vcsUiApp.js").default}
+       */
       const app = inject('vcsApp');
       const flightInstance = getProvidedFlightInstance();
       const clock = ref(getDefaultClock());
@@ -113,6 +122,9 @@
         }
       }
 
+      const { actions: recordingActions, destroy: destroyRecordingActions } =
+        createFlightMovieActions(app, flightInstance);
+
       onMounted(async () => {
         flightInstancePlayer =
           await app.flights.setPlayerForFlight(flightInstance);
@@ -129,12 +141,14 @@
       onUnmounted(() => {
         destroy();
         playerChangedListener();
+        destroyRecordingActions();
       });
 
       return {
         clock,
         actions,
         isCurrentPlayer,
+        recordingActions,
         clockTime(seconds) {
           const mins = Math.floor(seconds / 60);
           const secs = Math.floor(seconds % 60);

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

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
     isCurrentPlayer: import("vue").Ref<boolean>;
+    recordingActions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
     clockTime(seconds: any): string;
     setTime(seconds: any): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/components/lists/VcsGroupedList.vue

@@ -150,9 +150,10 @@
     />
     <v-expansion-panels
       variant="accordion"
+      flat
       multiple
       v-model="localOpenedGroups"
-      class="rounded-0"
+      class="rounded-0 panels"
     >
       <vcs-expansion-panel
         v-for="(group, i) in groups"
@@ -176,4 +177,11 @@
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .panels .vcs-expansion-panel:not(:last-child) {
+    border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
+  }
+  :deep(.v-list-item-title) > span {
+    font-weight: bold;
+  }
+</style>

package/src/components/lists/VcsTreeNode.vue

@@ -307,6 +307,9 @@
     &.chevron-btn {
       margin-left: 4px;
       margin-right: 8px;
+      > span > i {
+        font-size: calc(var(--v-icon-size-multiplier) * 1.25em);
+      }
     }
   }
   // remove hover shadow over button