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

package/plugins/@vcmap-show-case/panorama-inspector/src/api.js

@@ -0,0 +1,161 @@
+import {
+  GeometryInstance,
+  Material,
+  MaterialAppearance,
+  Matrix4,
+  Primitive,
+  SphereGeometry,
+  Color,
+  Cartesian3,
+  Globe,
+  ImageryLayer as CesiumImageryLayer,
+  OpenStreetMapImageryProvider,
+} from '@vcmap-cesium/engine';
+import {
+  mercatorToCartesian,
+  PanoramaMap,
+  PanoramaDatasetLayer,
+} from '@vcmap/core';
+import { reactive, ref, computed, watch } from 'vue';
+
+/**
+ * @typedef {Object} ClickedPrimitive
+ * @property {boolean} show
+ * @property {Cartesian3} position
+ * @property {() => void} destroy
+ */
+
+/**
+ * @param {import("@vcmap/core").PanoramaMap} map
+ * @param {ShowClickInteraction} clickedInteraction
+ * @returns {ClickedPrimitive}
+ */
+export function setupClickedPrimitive(map, clickedInteraction) {
+  const position = new Cartesian3();
+  const appearance = new MaterialAppearance({
+    flat: true,
+    material: Material.fromType('Color', { color: Color.ORANGERED }),
+  });
+  const primitive = new Primitive({
+    geometryInstances: [
+      new GeometryInstance({
+        geometry: new SphereGeometry({
+          radius: 0.2,
+        }),
+      }),
+    ],
+    appearance,
+    depthFailAppearance: new MaterialAppearance({
+      translucent: true,
+      material: Material.fromType('Color', {
+        color: Color.LIMEGREEN.withAlpha(0.6),
+      }),
+    }),
+    asynchronous: false,
+    show: false,
+    modelMatrix: Matrix4.IDENTITY,
+  });
+
+  map.getCesiumWidget().scene.primitives.add(primitive);
+  clickedInteraction.clicked.addEventListener((event) => {
+    mercatorToCartesian(event.position, position);
+    primitive.modelMatrix = Matrix4.fromTranslation(position);
+  });
+
+  return {
+    get show() {
+      return primitive.show;
+    },
+    set show(value) {
+      primitive.show = value;
+    },
+    get position() {
+      return position;
+    },
+    destroy() {
+      map.getCesiumWidget().scene.primitives.remove(primitive);
+    },
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").VcsApp} app
+ * @returns {{ action: import("@vcmap/ui").Action, destroy: () => void }}
+ */
+export function createOsmGlobeAction(app) {
+  /** @type {import("@vcmap/core").PanoramaMap} */
+  const map = app.maps.getByType(PanoramaMap.className)[0];
+
+  const action = reactive({
+    name: 'OSM Globe',
+    icon: 'mdi-earth',
+    title: 'Open Street Map Globe',
+    active: false,
+    callback() {
+      if (action.active) {
+        map.getCesiumWidget().scene.globe = undefined;
+        action.active = false;
+      } else {
+        const { scene } = map.getCesiumWidget();
+        scene.globe = new Globe();
+        scene.imageryLayers.add(
+          new CesiumImageryLayer(
+            new OpenStreetMapImageryProvider({ maximumLevel: 18 }),
+          ),
+        );
+        action.active = true;
+      }
+    },
+  });
+
+  return {
+    action,
+    destroy: () => {
+      if (map.initialized) {
+        map.getCesiumWidget().scene.globe = undefined;
+      }
+    },
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").VcsApp} app
+ * @returns {{action: import("@vcmap/ui").VcsAction, destroy(): void}}
+ */
+export function createMapMarkerAction(app) {
+  const hideFootprint = ref(false);
+
+  const hideFootprintWatcher = watch(hideFootprint, () => {
+    for (const layer of app.layers) {
+      if (layer instanceof PanoramaDatasetLayer) {
+        layer.hideInPanorama = hideFootprint.value;
+      }
+    }
+  });
+
+  const layerAdded = app.layers.added.addEventListener((layer) => {
+    if (layer instanceof PanoramaDatasetLayer) {
+      layer.hideInPanorama = hideFootprint.value;
+    }
+  });
+
+  const action = reactive({
+    name: 'Hide Footprint',
+    icon: computed(() => {
+      return hideFootprint.value ? 'mdi-map-marker-off' : 'mdi-map-marker';
+    }),
+    title: 'Hide Footprint',
+    active: computed(() => hideFootprint.value),
+    callback() {
+      hideFootprint.value = !hideFootprint.value;
+    },
+  });
+
+  return {
+    action,
+    destroy() {
+      hideFootprintWatcher();
+      layerAdded();
+    },
+  };
+}

package/plugins/@vcmap-show-case/panorama-inspector/src/index.js

@@ -0,0 +1,57 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { name, version, mapVersion } from '../package.json';
+import PanoramaInspector from './PanoramaInspector.vue';
+import ShowClickInteraction from './showClickInteraction.js';
+
+export default function panoramaInspector() {
+  let destroy;
+  let clickedInteraction;
+  let removeInteraction;
+  let clickedPrimitive;
+
+  return {
+    name,
+    version,
+    mapVersion,
+    get clickedInteraction() {
+      return clickedInteraction;
+    },
+    get clickedPrimitive() {
+      return clickedPrimitive;
+    },
+    async initialize(app) {
+      const { action, destroy: destroyAction } = createToggleAction(
+        {
+          name: 'Panorama Inspector',
+        },
+        {
+          id: 'panorama-inspector',
+          state: {
+            headerTitle: 'panoramaInspector.title',
+          },
+          component: PanoramaInspector,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        app.windowManager,
+        name,
+      );
+      app.navbarManager.add(
+        { id: 'panorama-inspector', action },
+        name,
+        ButtonLocation.MENU,
+      );
+      clickedInteraction = new ShowClickInteraction();
+      removeInteraction =
+        app.maps.eventHandler.addPersistentInteraction(clickedInteraction);
+      destroy = destroyAction;
+    },
+    destroy() {
+      destroy?.();
+      removeInteraction?.();
+      clickedInteraction?.destroy();
+      clickedInteraction = undefined;
+      clickedPrimitive?.destroy();
+      clickedPrimitive = undefined;
+    },
+  };
+}

package/plugins/@vcmap-show-case/panorama-inspector/src/showClickInteraction.js

@@ -0,0 +1,20 @@
+import { AbstractInteraction, EventType, VcsEvent } from '@vcmap/core';
+
+export default class ShowClickInteraction extends AbstractInteraction {
+  constructor() {
+    super(EventType.CLICK);
+
+    this.clicked = new VcsEvent();
+  }
+
+  pipe(event) {
+    if (
+      event.map.className === 'PanoramaMap' &&
+      !event.map.getCesiumWidget().scene.screenSpaceCameraController
+        .enableInputs
+    ) {
+      this.clicked.raiseEvent(event);
+    }
+    return Promise.resolve(event);
+  }
+}

package/plugins/package.json

@@ -20,7 +20,7 @@
     "@vcmap/cesium-filters": "^2.0.0",
     "@vcmap/search-nominatim": "^2.0.0",
     "@vcmap/create-link": "^3.0.0",
-    "@vcmap/module-selector": "^2.0.0",
+    "@vcmap/module-selector": "^3.0.0",
     "@vcmap/line-of-sight": "^1.0.0",
     "@vcmap/layer-slider": "^2.0.0",
     "@vcmap/vcs-solar-balloon": "^2.0.0",

package/src/actions/actionHelper.d.ts

@@ -54,17 +54,6 @@ export function createSearchButtonAction(app: import("../vcsUiApp.js").default):
     searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction> | null>;
     destroy: () => void;
 };
-/**
- * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
- * @param {import("../navigation/overviewMap.js").default} overviewMap
- * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
- * @param {import("../manager/window/windowManager.js").default}  windowManager
- * @returns {{action: VcsAction, destroy: function(): void}}
- */
-export function createOverviewMapAction(overviewMap: import("../navigation/overviewMap.js").default, windowComponent: import("../manager/window/windowManager.js").WindowComponentOptions, windowManager: import("../manager/window/windowManager.js").default): {
-    action: VcsAction;
-    destroy: () => void;
-};
 /**
  * Creates a header less window which will close if anything outside of the window is clicked. The window will open
  * at the clicked position (the actions position) by default, unless the window component already has a position set.
@@ -113,6 +102,22 @@ export function createZoomToFeatureAction(actionOptions: ActionOptions, feature:
  * @param {PointerEvent} [p]
  */
 export function callSafeAction(action: VcsAction, p?: PointerEvent | undefined): void;
+/**
+ * Adds a loading overlay to the application.
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {string|symbol} owner The owner of the loading overlay.
+ * @param {string} id The ID of the loading overlay.
+ * @param {{progress?:import('vue').Ref<number>|undefined, title?:string, text?:string, cancel?:Function,  maxWidth?:number|string, persistent?:boolean}} [options] The options for the loading overlay, passed as props.
+ * @returns {Function} A function to remove the loading overlay.
+ */
+export function addLoadingOverlay(app: import("../vcsUiApp.js").default, owner: string | symbol, id: string, options?: {
+    progress?: import('vue').Ref<number> | undefined;
+    title?: string | undefined;
+    text?: string | undefined;
+    cancel?: Function | undefined;
+    maxWidth?: string | number | undefined;
+    persistent?: boolean | undefined;
+} | undefined): Function;
 export const searchComponentId: "searchId";
 export type ActionOptions = Omit<VcsAction, 'callback'>;
 export type ActionCallback = (p?: PointerEvent) => (void | Promise<void>);

package/src/actions/actionHelper.js

@@ -6,6 +6,7 @@ import {
   Extent,
   MapCollection,
   mercatorProjection,
+  PanoramaMap,
   Viewpoint,
 } from '@vcmap/core';
 import { Feature } from 'ol';
@@ -18,6 +19,7 @@ import {
   getTargetSize,
 } from '../manager/window/windowHelper.js';
 import SearchComponent from '../search/SearchComponent.vue';
+import VcsLoadingOverlay from '../components/plugins/VcsLoadingOverlay.vue';
 
 /**
  * @typedef {Omit<VcsAction, 'callback'>} ActionOptions
@@ -56,6 +58,64 @@ export function getActionFromOptions(options) {
   return options;
 }
 
+/**
+ * @param {import("@vcmap/core").PanoramaMap} map
+ * @param {import("../actions/actionHelper.js").VcsAction} action
+ * @returns {() => void}
+ */
+function setupDisablePanorama(map, action) {
+  const datasetListeners = new Map();
+
+  action.disabled = true;
+  const setupDataset = (dataset) => {
+    datasetListeners.get(dataset.name)?.();
+    if (dataset.active) {
+      action.disabled = false;
+    }
+
+    const listener = dataset.stateChanged.addEventListener(() => {
+      if (!dataset.active) {
+        action.disabled = ![...map.layerCollection].find(
+          (d) => d.active && d.className === 'PanoramaDatasetLayer',
+        );
+      } else if (dataset.active) {
+        action.disabled = false;
+      }
+    });
+
+    datasetListeners.set(dataset.name, () => {
+      listener();
+      action.disabled = ![...map.layerCollection].find(
+        (d) => d.active && d.className === 'PanoramaDatasetLayer',
+      );
+    });
+  };
+
+  let datasetCollectionListeners = [];
+  const setupDatasets = () => {
+    datasetCollectionListeners.forEach((cb) => cb());
+    datasetListeners.forEach((cb) => cb());
+    datasetListeners.clear();
+
+    [...map.layerCollection].forEach(setupDataset);
+
+    datasetCollectionListeners = [
+      map.layerCollection.added.addEventListener(setupDataset),
+      map.layerCollection.removed.addEventListener((removedDataset) => {
+        datasetListeners.get(removedDataset.name)?.();
+        datasetListeners.delete(removedDataset.name);
+      }),
+    ];
+  };
+  setupDatasets();
+
+  return () => {
+    datasetCollectionListeners.forEach((cb) => cb());
+    datasetListeners.forEach((cb) => cb());
+    datasetListeners.clear();
+  };
+}
+
 /**
  * @param {ActionOptions} actionOptions
  * @param {string} mapName
@@ -79,11 +139,23 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
       maps.setActiveMap(mapName);
     },
   });
-  const destroyListener = maps.mapActivated.addEventListener((map) => {
-    action.active = map?.name === mapName;
+
+  const map = maps.getByKey(mapName);
+  let datasetListener;
+  if (map instanceof PanoramaMap) {
+    datasetListener = setupDisablePanorama(map, action);
+  }
+  const destroyListener = maps.mapActivated.addEventListener((activatedMap) => {
+    action.active = activatedMap?.name === mapName;
   });
 
-  return { action, destroy: destroyListener };
+  return {
+    action,
+    destroy() {
+      datasetListener?.();
+      destroyListener();
+    },
+  };
 }
 
 /**
@@ -145,6 +217,64 @@ export function createToggleAction(
 
 export const searchComponentId = 'searchId';
 
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{action: import("vue").UnwrapRef<VcsAction>, destroy: function():void}}
+ */
+function createSearchAction(app) {
+  const windowComponent = {
+    id: searchComponentId,
+    component: SearchComponent,
+    position: { width: 440 },
+    state: { hideHeader: true },
+    slot: WindowSlot.DYNAMIC_RIGHT,
+  };
+  const action = reactive({
+    name: 'search.title',
+    icon: '$vcsSearch',
+    title: 'search.tooltip',
+    active: false,
+    background: false,
+    callback() {
+      if (this.active && !this.background) {
+        app.windowManager.remove(searchComponentId);
+        this.active = false;
+        app.search.clearSearch();
+      } else {
+        app.windowManager.add(windowComponent, vcsAppSymbol);
+      }
+    },
+  });
+  const addedListener = app.windowManager.added.addEventListener(({ id }) => {
+    if (id === searchComponentId) {
+      action.active = true;
+      action.background = false;
+    }
+  });
+  const removedListener = app.windowManager.removed.addEventListener(
+    ({ id }) => {
+      if (id === searchComponentId) {
+        if (app.search.currentResults.value.length) {
+          action.active = true;
+          action.background = true;
+        } else {
+          action.active = false;
+          action.background = false;
+          app.search.clearSearch();
+        }
+      }
+    },
+  );
+
+  return {
+    action,
+    destroy: () => {
+      addedListener();
+      removedListener();
+    },
+  };
+}
+
 /**
  * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
  * @param {import("../vcsUiApp.js").default} app
@@ -156,38 +286,21 @@ export function createSearchButtonAction(app) {
   const uiConfig = app.uiConfig.config;
 
   const determineAction = () => {
-    if (app.windowManager.has(searchComponentId)) {
-      app.windowManager.remove(searchComponentId);
-    }
     if (
       !uiConfig.hideSearch &&
       app.search.size > 0 &&
       searchAction.value === null
     ) {
-      const action = createToggleAction(
-        {
-          name: 'search.title',
-          icon: '$vcsSearch',
-          title: 'search.tooltip',
-        },
-        {
-          id: searchComponentId,
-          component: SearchComponent,
-          state: { hideHeader: true },
-          slot: WindowSlot.DYNAMIC_RIGHT,
-          position: {
-            width: 440,
-          },
-        },
-        app.windowManager,
-        vcsAppSymbol,
-      );
-      destroyAction = action.destroy;
-      searchAction.value = reactive(action.action);
+      const { action, destroy } = createSearchAction(app);
+      destroyAction = destroy;
+      searchAction.value = action;
     } else if (
       (uiConfig.hideSearch || app.search.size === 0) &&
       searchAction.value !== null
     ) {
+      if (app.windowManager.has(searchComponentId)) {
+        app.windowManager.remove(searchComponentId);
+      }
       destroyAction();
       destroyAction = () => {};
       searchAction.value = null;
@@ -210,57 +323,6 @@ export function createSearchButtonAction(app) {
   return { searchAction, destroy };
 }
 
-/**
- * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
- * @param {import("../navigation/overviewMap.js").default} overviewMap
- * @param {import("../manager/window/windowManager.js").WindowComponentOptions} windowComponent
- * @param {import("../manager/window/windowManager.js").default}  windowManager
- * @returns {{action: VcsAction, destroy: function(): void}}
- */
-export function createOverviewMapAction(
-  overviewMap,
-  windowComponent,
-  windowManager,
-) {
-  const { action, destroy } = createToggleAction(
-    {
-      name: 'overviewMapToggle',
-      icon: '$vcsMap',
-      title: 'navigation.overviewMapTooltip',
-    },
-    windowComponent,
-    windowManager,
-    vcsAppSymbol,
-  );
-
-  const listeners = [
-    windowManager.added.addEventListener(({ id }) => {
-      if (id === windowComponent.id) {
-        overviewMap.activate().catch((e) => {
-          getLogger('createOverviewMapAction').error(
-            'failed to activate overview map',
-            e,
-          );
-          windowManager.remove(windowComponent.id);
-        });
-      }
-    }),
-    windowManager.removed.addEventListener(({ id }) => {
-      if (id === windowComponent.id) {
-        overviewMap.deactivate();
-      }
-    }),
-  ];
-
-  const destroyAction = () => {
-    destroy();
-    listeners.forEach((cb) => {
-      cb();
-    });
-  };
-  return { action, destroy: destroyAction };
-}
-
 /**
  * Creates a header less window which will close if anything outside of the window is clicked. The window will open
  * at the clicked position (the actions position) by default, unless the window component already has a position set.
@@ -306,10 +368,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
       width,
       height,
     );
-    const position = {
-      ...fittedPosition,
-      ...windowPositionOptions,
-    };
+    const position = { ...fittedPosition, ...windowPositionOptions };
     const targetSize = getTargetSize(app.maps.target);
     if (contentHeight) {
       if (position.bottom) {
@@ -339,12 +398,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
         clickedWindowPosition = { x: event.x, y: event.y };
         const state = { ...modalComponent?.state, hideHeader: true };
         app.windowManager.add(
-          {
-            position: getPositionOptions(),
-            ...component,
-            id,
-            state,
-          },
+          { position: getPositionOptions(), ...component, id, state },
           owner,
         );
         document.addEventListener('mousedown', handleMouseDown);
@@ -526,3 +580,52 @@ export function callSafeAction(action, p) {
     logError(e);
   }
 }
+
+/**
+ * Adds a loading overlay to the application.
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {string|symbol} owner The owner of the loading overlay.
+ * @param {string} id The ID of the loading overlay.
+ * @param {{progress?:import('vue').Ref<number>|undefined, title?:string, text?:string, cancel?:Function,  maxWidth?:number|string, persistent?:boolean}} [options] The options for the loading overlay, passed as props.
+ * @returns {Function} A function to remove the loading overlay.
+ */
+export function addLoadingOverlay(app, owner, id, options) {
+  check(owner, oneOf(String, Symbol));
+  check(id, String);
+  check(options?.progress?.value, optional(Number));
+  check(
+    options,
+    optional({
+      title: optional(String),
+      text: optional(String),
+      cancel: optional(Function),
+      maxWidth: optional(oneOf(Number, String)),
+      persistent: optional(Boolean),
+    }),
+  );
+
+  const removeWindow = () => {
+    if (app.windowManager.has(id)) {
+      app.windowManager.remove(id);
+    }
+  };
+
+  app.windowManager.add(
+    {
+      component: VcsLoadingOverlay,
+      id,
+      state: { hideHeader: true, styles: { display: 'none !important' } },
+      props: {
+        ...options,
+        cancellable: !!options.cancel,
+        onCancel: () => {
+          options?.cancel?.();
+          removeWindow();
+        },
+      },
+    },
+    owner,
+  );
+
+  return removeWindow;
+}

package/src/actions/flightActions.d.ts

@@ -69,6 +69,16 @@ export function createFlightVisualizationAction(app: import("../vcsUiApp.js").de
     action: import("./actionHelper.js").VcsAction;
     destroy: () => void;
 }>;
+/**
+ *
+ * @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: import("../vcsUiApp.js").default, instance: import("@vcmap/core").FlightInstance): {
+    actions: import("./actionHelper.js").VcsAction[];
+    destroy: () => void;
+};
 /**
  *
  * @param {import("@vcmap/core").FlightInstance} instance