@vcmap/ui 5.1.7 → 5.2.0

package/plugins/@vcmap-show-case/panel-tester/src/index.js

@@ -0,0 +1,63 @@
+import { ButtonLocation, createToggleAction } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import panelExample from './PanelExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function panelTester() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Panel Tester',
+        },
+        {
+          id: 'panel-tester',
+          state: {
+            headerTitle: 'panelTester.title',
+          },
+          component: panelExample,
+          position: {
+            height: 200,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'panel-tester', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = [destroy];
+    },
+    i18n: {
+      de: {
+        panelTester: {
+          title: 'Panel Tester',
+        },
+      },
+      en: {
+        panelTester: {
+          title: 'Panel Tester',
+        },
+      },
+    },
+    destroy() {
+      if (this._destroyActions) {
+        this._destroyActions.forEach((cb) => cb());
+        this._destroyActions = null;
+      }
+    },
+  };
+}

package/src/actions/actionHelper.js

@@ -82,7 +82,7 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
     },
   };
   const destroyListener = maps.mapActivated.addEventListener((map) => {
-    action.active = map.name === mapName;
+    action.active = map?.name === mapName;
   });
 
   return { action, destroy: destroyListener };
@@ -178,7 +178,7 @@ export function createSearchButtonAction(app) {
       );
       destroyAction = action.destroy;
       searchAction.value = reactive(action.action);
-    } else if (searchAction.value !== null) {
+    } else if (app.search.size === 0 && searchAction.value !== null) {
       destroyAction();
       destroyAction = () => {};
       searchAction.value = null;

package/src/actions/flightActions.d.ts

@@ -41,17 +41,53 @@ export function createFlightPlayerActions(app: import("../vcsUiApp.js").default,
     destroy: (() => void);
     actions: Array<import("./actionHelper.js").VcsAction>;
 };
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {Array<import("./actionHelper.js").VcsAction>} actions
+ * @returns {(function(): void)}
+ */
+export function setupFlightListItemPlayer(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance, actions: Array<import("./actionHelper.js").VcsAction>): (() => void);
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: function(): void}}
+ */
+export function createZoomToFlightAction(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+};
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @param {import("@vcmap/core").FlightInstance} flightInstance
+ * @param {import("@vcmap/core").FlightInstance} instance
  * @param {boolean} [active=true]
  * @returns {Promise<{action: import("./actionHelper.js").VcsAction, destroy:()=>void}>}
  */
-export function createFlightVisualizationAction(app: import("../vcsUiApp.js").default, flightInstance: import("@vcmap/core").FlightInstance, active?: boolean | undefined): Promise<{
+export function createFlightVisualizationAction(app: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance, active?: boolean | undefined): Promise<{
     action: import("./actionHelper.js").VcsAction;
     destroy: () => void;
 }>;
+/**
+ *
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {boolean} [isPathExport=false] - Set to true to export flight path. Per default flight is exported
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: function(): void}}
+ */
+export function createExportFlightAction(instance: import("@vcmap/core").FlightInstance, isPathExport?: boolean | undefined): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+};
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {File[]} files
+ * @param {string} [moduleId]
+ * @param {(imported:number[]) => void} [importSuccessCb] - An optional success cb providing the indices of app's flight collection for successful imported flight instances
+ * @returns {Promise<boolean>}
+ */
+export function importFlights(app: import("../vcsUiApp.js").default, files: File[], moduleId?: string | undefined, importSuccessCb?: ((imported: number[]) => void) | undefined): Promise<boolean>;
 export type PlayerDirection = string;
 export namespace PlayerDirection {
     let Forward: string;

package/src/actions/flightActions.js

@@ -1,6 +1,15 @@
 import { reactive } from 'vue';
-import { check } from '@vcsuite/check';
-import { createFlightVisualization } from '@vcmap/core';
+import { check, checkMaybe } from '@vcsuite/check';
+import {
+  createFlightVisualization,
+  exportFlightAsGeoJson,
+  exportFlightPathAsGeoJson,
+  FlightInstance,
+  moduleIdSymbol,
+  parseFlightOptionsFromGeoJson,
+} from '@vcmap/core';
+import { NotificationType } from '../notifier/notifier.js';
+import { downloadText } from '../downloadHelper.js';
 
 /**
  * @param {import("../vcsUiApp.js").default} app
@@ -186,19 +195,155 @@ export function createFlightPlayerActions(app, instance) {
   };
 }
 
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {Array<import("./actionHelper.js").VcsAction>} actions
+ * @returns {(function(): void)}
+ */
+export function setupFlightListItemPlayer(app, instance, actions) {
+  function removeAction(action) {
+    const index = actions.findIndex((a) => a.name === action.name);
+    if (index > -1) {
+      actions.splice(index, 1);
+    }
+  }
+
+  let player;
+  const listener = [];
+
+  function setupListener(playAction, stopAction) {
+    listener.forEach((cb) => cb());
+    listener.slice(0);
+    listener.push(
+      player.stateChanged.addEventListener((state) => {
+        if (state === 'stopped') {
+          removeAction(stopAction);
+          playAction.icon = 'mdi-play';
+          playAction.title = 'flight.playTooltip';
+        } else {
+          if (!actions.includes(stopAction)) {
+            actions.push(stopAction);
+          }
+          if (state === 'paused') {
+            playAction.icon = 'mdi-play';
+            playAction.title = 'flight.playTooltip';
+          } else {
+            playAction.icon = 'mdi-pause';
+            playAction.title = 'flight.pauseTooltip';
+          }
+        }
+      }),
+      player.destroyed.addEventListener(() => {
+        player = undefined;
+        removeAction(stopAction);
+        playAction.icon = 'mdi-play';
+      }),
+      instance.anchorsChanged.addEventListener(() => {
+        playAction.disabled = !instance.isValid();
+      }),
+    );
+  }
+
+  const stopAction = {
+    name: 'stop',
+    icon: 'mdi-square',
+    title: 'flight.stopTooltip',
+    callback: () => {
+      player?.stop();
+    },
+  };
+
+  const playAction = reactive({
+    name: 'play',
+    icon: 'mdi-play',
+    title: 'flight.playTooltip',
+    disabled: !instance.isValid(),
+    callback: async () => {
+      if (player) {
+        if (player.state === 'playing') {
+          player.pause();
+        } else {
+          player.play();
+        }
+      } else {
+        player = await app.flights.setPlayerForFlight(instance);
+        setupListener(playAction, stopAction);
+        player?.play();
+      }
+    },
+  });
+
+  if (!actions.includes(playAction)) {
+    actions.push(playAction);
+  }
+
+  const playerChangedListener = app.flights.playerChanged.addEventListener(
+    (flightPlayer) => {
+      if (!player && flightPlayer?.flightInstanceName === instance.name) {
+        player = flightPlayer;
+        setupListener(playAction, stopAction);
+      }
+    },
+  );
+
+  return () => {
+    listener.forEach((cb) => cb());
+    playerChangedListener();
+    if (player) {
+      player.stop();
+      player.destroy();
+      player = undefined;
+    }
+    removeAction(playAction);
+  };
+}
+
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @param {import("@vcmap/core").FlightInstance} flightInstance
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: function(): void}}
+ */
+export function createZoomToFlightAction(app, instance) {
+  let flightVis;
+
+  const action = {
+    name: 'components.flight.zoom',
+    title: 'components.flight.zoom',
+    disabled: !instance.isValid(),
+    async callback() {
+      if (!flightVis) {
+        flightVis = await createFlightVisualization(instance, app);
+      }
+      await flightVis.zoomToExtent();
+    },
+  };
+  const listener = instance.anchorsChanged.addEventListener(() => {
+    action.disabled = !instance.isValid();
+  });
+  return {
+    action,
+    destroy: () => {
+      listener();
+      flightVis.destroy();
+    },
+  };
+}
+
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").FlightInstance} instance
  * @param {boolean} [active=true]
  * @returns {Promise<{action: import("./actionHelper.js").VcsAction, destroy:()=>void}>}
  */
 export async function createFlightVisualizationAction(
   app,
-  flightInstance,
+  instance,
   active = true,
 ) {
-  let flightVis = await createFlightVisualization(flightInstance, app);
+  let flightVis = await createFlightVisualization(instance, app);
 
   const action = reactive({
     name: 'components.flight.hidePath',
@@ -207,7 +352,7 @@ export async function createFlightVisualizationAction(
     active,
     async callback() {
       if (!flightVis) {
-        flightVis = await createFlightVisualization(flightInstance, app);
+        flightVis = await createFlightVisualization(instance, app);
       }
       if (this.active) {
         flightVis.deactivate();
@@ -230,3 +375,109 @@ export async function createFlightVisualizationAction(
 
   return { action, destroy };
 }
+
+/**
+ *
+ * @param {import("@vcmap/core").FlightInstance} instance
+ * @param {boolean} [isPathExport=false] - Set to true to export flight path. Per default flight is exported
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: function(): void}}
+ */
+export function createExportFlightAction(instance, isPathExport = false) {
+  const exportFunction = (i) =>
+    isPathExport ? exportFlightPathAsGeoJson(i) : exportFlightAsGeoJson(i);
+
+  const name = isPathExport
+    ? 'components.flight.exportPath'
+    : 'components.flight.export';
+
+  const action = {
+    name,
+    title: name,
+    disabled: !instance.isValid(),
+    callback() {
+      const text = JSON.stringify(exportFunction(instance), null, 2);
+      downloadText(
+        text,
+        `${instance.properties.title ?? instance.name}${
+          isPathExport ? '-path' : ''
+        }.json`,
+      );
+    },
+  };
+
+  const destroy = instance.anchorsChanged.addEventListener(() => {
+    action.disabled = !instance.isValid();
+  });
+
+  return { action, destroy };
+}
+
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {File[]} files
+ * @param {string} [moduleId]
+ * @param {(imported:number[]) => void} [importSuccessCb] - An optional success cb providing the indices of app's flight collection for successful imported flight instances
+ * @returns {Promise<boolean>}
+ */
+export async function importFlights(app, files, moduleId, importSuccessCb) {
+  checkMaybe(moduleId, String);
+  checkMaybe(importSuccessCb, Function);
+
+  const { vueI18n } = app;
+  const results = await Promise.all(
+    files.map(async (file) => {
+      const text = await file.text();
+      try {
+        return parseFlightOptionsFromGeoJson(JSON.parse(text));
+      } catch (e) {
+        app.notifier.add({
+          type: NotificationType.ERROR,
+          message: vueI18n.t('components.import.failure', {
+            fileName: file.name,
+          }),
+        });
+      }
+      return undefined;
+    }),
+  );
+
+  const flightsToImport = results.filter((f) => f).flat();
+
+  const imported = flightsToImport
+    .map((options) => {
+      const instance = new FlightInstance(options);
+      if (!instance.isValid()) {
+        return null;
+      }
+      if (moduleId) {
+        instance[moduleIdSymbol] = moduleId;
+      }
+      return app.flights.add(instance);
+    })
+    .filter((id) => id != null);
+  const importedDelta = flightsToImport.length - imported.length;
+  if (importedDelta > 0) {
+    app.notifier.add({
+      type: NotificationType.WARNING,
+      message: vueI18n.t('components.import.addFailure', [importedDelta]),
+    });
+    return false;
+  }
+  if (imported.length > 0) {
+    if (importSuccessCb) {
+      importSuccessCb(imported);
+    }
+    app.notifier.add({
+      type: NotificationType.SUCCESS,
+      message: vueI18n.t('components.import.featuresAdded', [imported.length]),
+    });
+  } else {
+    app.notifier.add({
+      type: NotificationType.ERROR,
+      message: vueI18n.t('components.import.nothingAdded'),
+    });
+    return false;
+  }
+  return true;
+}

package/src/application/VcsApp.vue

@@ -1,36 +1,7 @@
 <template>
   <v-container class="fill-height pa-0" absolute fluid>
     <VcsNavbar />
-    <v-container
-      class="vcs-main pa-0"
-      :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }"
-      fluid
-      absolute
-    >
-      <template v-if="$vuetify.breakpoint.xs">
-        <img
-          v-if="mobileLogo"
-          :src="mobileLogo"
-          alt="Logo"
-          draggable="false"
-          class="mobile-logo"
-        />
-      </template>
-      <VcsButton
-        v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
-        :key="attributionAction.name"
-        :tooltip="attributionAction.title"
-        :icon="attributionAction.icon"
-        :active="attributionAction.active"
-        @click.stop="attributionAction.callback($event)"
-        class="z-index-1 mobile-attribution-btn"
-      />
-      <VcsMap :map-id="mapId" />
-      <MapNavigation v-if="showMapNavigation" />
-      <ToolboxManagerComponent />
-      <WindowManagerComponent />
-      <NotifierComponent />
-    </v-container>
+    <VcsContainer :attribution-action="attributionAction" />
     <v-footer
       absolute
       v-if="$vuetify.breakpoint.smAndUp"
@@ -38,7 +9,6 @@
       class="d-flex gap-1 pa-0"
     >
       <VcsPositionDisplay />
-
       <VcsTextPageFooter
         v-if="imprint"
         :text-page="imprint"
@@ -53,7 +23,7 @@
         class="align-wrapper"
         :entries="attributionEntries"
         :attribution-action="attributionAction"
-      ></VcsAttributionsFooter>
+      />
     </v-footer>
   </v-container>
 </template>
@@ -67,61 +37,29 @@
     right: 0;
     margin-right: 4px !important;
   }
-  .vcs-main {
-    position: absolute;
-    top: 48px;
-    left: 0;
-    right: 0;
-    bottom: 22px;
-  }
-
-  .vcs-main-xs {
-    top: 0;
-    bottom: 56px;
-  }
-
-  .mobile-logo {
-    max-height: 40px;
-    max-width: 70px;
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    z-index: 1;
-  }
-
-  .mobile-attribution-btn {
-    position: fixed;
-    right: 2px;
-    bottom: 36px;
-  }
 </style>
 
 <script>
-  import { v4 as uuid } from 'uuid';
   import {
     computed,
     getCurrentInstance,
     onMounted,
     onUnmounted,
     provide,
-    ref,
     watch,
   } from 'vue';
   import { getVcsAppById, moduleIdSymbol } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
   import { getLogger } from '@vcsuite/logger';
-  import WindowManagerComponent from '../manager/window/WindowManager.vue';
-  import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
+  import VcsContainer from './VcsContainer.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
   import { vcsAppSymbol } from '../pluginHelper.js';
-  import VcsMap from './VcsMap.vue';
   import VcsNavbar from './VcsNavbar.vue';
   import {
     createLinkAction,
     createMapButtonAction,
     createToggleAction,
   } from '../actions/actionHelper.js';
-  import MapNavigation from '../navigation/MapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
   import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
@@ -130,10 +68,8 @@
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
-  import VcsButton from '../components/buttons/VcsButton.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
-  import NotifierComponent from '../notifier/NotifierComponent.vue';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
   import VcsPositionDisplay from './VcsPositionDisplay.vue';
 
@@ -560,28 +496,6 @@
     };
   }
 
-  export function setupMapNavigation(app) {
-    const showMapNavigation = ref(false);
-
-    const listeners = [
-      app.maps.added.addEventListener(() => {
-        showMapNavigation.value = true;
-      }),
-      app.maps.removed.addEventListener(() => {
-        if (app.maps.size < 1) {
-          showMapNavigation.value = false;
-        }
-      }),
-    ];
-
-    return {
-      showMapNavigation,
-      destroy: () => {
-        listeners.forEach((cb) => cb());
-      },
-    };
-  }
-
   /**
    * @description The base component to setup the entire application. To embed the VcsApp, use this component.
    * @vue-prop {string} appId - the id of the app to inject. this will setup listeners on the app to call vcsAppMounted on plugins
@@ -589,18 +503,13 @@
    */
   export default {
     components: {
-      VcsButton,
+      VcsContainer,
       VcsPositionDisplay,
       VcsAttributionsFooter,
       VcsTextPageFooter,
-      MapNavigation,
       VcsNavbar,
-      VcsMap,
-      WindowManagerComponent,
-      ToolboxManagerComponent,
       VContainer,
       VFooter,
-      NotifierComponent,
     },
     props: {
       appId: {
@@ -609,8 +518,6 @@
       },
     },
     setup(props) {
-      const id = uuid();
-      const mapId = `mapCollection-${id}`;
       /** @type {import("../vcsUiApp.js").default} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
@@ -626,14 +533,10 @@
       );
       const { attributionEntries, attributionAction, destroyAttributions } =
         setupAttributions(app);
-      const { showMapNavigation, destroy: destroyMapNavigationListener } =
-        setupMapNavigation(app);
 
       let pluginMountedListener;
       onMounted(() => {
         pluginMountedListener = setupPluginMountedListeners(app);
-        app.maps.setTarget(mapId);
-        app.mounted.raiseEvent(mapId);
       });
 
       onUnmounted(() => {
@@ -646,11 +549,9 @@
         destroyComponentsWindow();
         destroyThemingListener();
         destroyAttributions();
-        destroyMapNavigationListener();
       });
 
       return {
-        mapId,
         mobileLogo: computed(
           () =>
             app.uiConfig.config.value.mobileLogo ??
@@ -679,7 +580,6 @@
         }),
         attributionEntries,
         attributionAction,
-        showMapNavigation,
       };
     },
   };

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

@@ -60,17 +60,12 @@ export function setupAttributions(app: import("../vcsUiApp.js").default): {
     attributionAction: import("../actions/actionHelper.js").VcsAction;
     destroyAttributions: () => void;
 };
-export function setupMapNavigation(app: any): {
-    showMapNavigation: import("vue").Ref<boolean>;
-    destroy: () => void;
-};
 declare const _default: import("vue").DefineComponent<{
     appId: {
         type: StringConstructor;
         required: true;
     };
 }, {
-    mapId: string;
     mobileLogo: import("vue").ComputedRef<any>;
     imprint: import("vue").ComputedRef<{
         title: string;
@@ -82,7 +77,6 @@ declare const _default: import("vue").DefineComponent<{
     } | undefined>;
     attributionEntries: import("vue").Ref<import("./attributionsHelper.js").AttributionEntry[]>;
     attributionAction: import("../actions/actionHelper.js").VcsAction;
-    showMapNavigation: 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<{
     appId: {
         type: StringConstructor;