@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/actions/StyleSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet v-if="items" class="pt-1 pb-0 px-0">
+  <v-sheet v-if="items" class="pt-1 pb-0 px-0 style-selector">
     <v-list>
       <v-list-item
         v-for="(item, index) in items"
@@ -7,46 +7,25 @@
         @click.stop="select(item.value)"
       >
         <v-list-item-title
-          :class="{ 'primary--text': item.value === currentStyleName }"
+          :class="{ 'text-primary': item.value === currentStyleName }"
         >
-          {{ $t(item.text) }}
+          {{ $st(item.text) }}
         </v-list-item-title>
       </v-list-item>
     </v-list>
-    <v-list v-if="currentStyleLegend.length > 0">
-      <v-list-item
-        v-for="(entry, index) in currentStyleLegend"
-        :key="`style-legend-${index}`"
-        dense
-      >
-        <v-list-item-icon>
-          <v-chip :color="entry.color" />
-        </v-list-item-icon>
-        <v-list-item-content>
-          {{ $t(entry.title) }}
-        </v-list-item-content>
-      </v-list-item>
-    </v-list>
   </v-sheet>
 </template>
 
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
-  import {
-    VChip,
-    VList,
-    VListItem,
-    VListItemContent,
-    VListItemIcon,
-    VListItemTitle,
-    VSheet,
-  } from 'vuetify/lib';
+  import { VList, VListItem, VListItemTitle, VSheet } from 'vuetify/components';
+  import { FeatureLayer } from '@vcmap/core';
 
   /**
    * @description Modal listing available styles.
    * On selection style is set to provided layer.
    * @vue-prop {Array<string>} availableStyles - Name of available styles
-   * @vue-prop {string} layerName              - Name of a layer, the style shall be applied to on selection
+   * @vue-prop {Array<string>} layerNames      - Name of layers, the style shall be applied to on selection
    */
   export default {
     name: 'StyleSelector',
@@ -54,42 +33,50 @@
       VSheet,
       VList,
       VListItem,
-      VListItemIcon,
       VListItemTitle,
-      VChip,
-      VListItemContent,
     },
     props: {
       availableStyles: {
         type: Array,
         default: () => [],
       },
-      layerName: {
-        type: String,
+      layerNames: {
+        type: Array,
         required: true,
       },
     },
     setup(props, { attrs }) {
       /** @type {import("@src/vcsUiApp.js").default} */
       const app = inject('vcsApp');
-      /** @type {import("@vcmap/core").FeatureLayer} */
-      const layer = app.layers.getByKey(props.layerName);
-      const currentStyleName = ref(layer.style.name || layer.defaultStyle.name);
-      const currentStyleLegend = ref([]);
-      const defaultStyle = layer.defaultStyle.name;
+      /** @type {import("@vcmap/core").FeatureLayer[]} */
+      const layers = props.layerNames
+        .map((name) => app.layers.getByKey(name))
+        .filter((layer) => layer instanceof FeatureLayer);
 
-      function setStyle(styleItem) {
-        currentStyleName.value = layer.style.name;
-        if (styleItem.legend) {
-          currentStyleLegend.value = styleItem.legend;
-        }
-      }
-      setStyle(layer.style);
-      // TODO error handling if layer is missing or not a feature layer
-      const styleChangedListener =
-        layer.styleChanged.addEventListener(setStyle);
+      const currentStyleName = ref();
+      const setCurrentStyle = () => {
+        let styleName = null;
+        layers.forEach((layer) => {
+          const layerStyle = layer?.style?.name || layer?.defaultStyle?.name;
+          if (styleName === null) {
+            styleName = layerStyle;
+          }
+          if (styleName !== layerStyle) {
+            styleName = '';
+          }
+        });
+        currentStyleName.value = styleName;
+      };
+
+      setCurrentStyle();
+      const defaultStyle =
+        layers.length === 1 ? layers[0]?.defaultStyle?.name : null;
+
+      const styleChangedListener = layers.map((layer) =>
+        layer.styleChanged.addEventListener(setCurrentStyle),
+      );
       onUnmounted(() => {
-        styleChangedListener();
+        styleChangedListener.forEach((cb) => cb());
       });
 
       const items = computed(() => {
@@ -117,16 +104,15 @@
       });
 
       function select(styleName) {
-        const style = app.styles.hasKey(styleName)
-          ? app.styles.getByKey(styleName)
-          : layer.defaultStyle;
-        layer.setStyle(style);
+        const style = app.styles.getByKey(styleName);
+        layers.forEach((layer) => {
+          layer.setStyle(style || layer.defaultStyle);
+        });
         app.windowManager.remove(attrs['window-state'].id);
       }
 
       return {
         currentStyleName,
-        currentStyleLegend,
         items,
         select,
       };

package/src/actions/StyleSelector.vue.d.ts

@@ -3,25 +3,27 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
-    layerName: {
-        type: StringConstructor;
+    layerNames: {
+        type: ArrayConstructor;
         required: true;
     };
 }, {
-    currentStyleName: import("vue").Ref<string>;
-    currentStyleLegend: import("vue").Ref<never[]>;
-    items: import("vue").ComputedRef<any>;
+    currentStyleName: import("vue").Ref<any>;
+    items: import("vue").ComputedRef<{
+        text: unknown;
+        value: unknown;
+    }[]>;
     select: (styleName: any) => void;
-}, {}, {}, {}, 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<{
     availableStyles: {
         type: ArrayConstructor;
         default: () => never[];
     };
-    layerName: {
-        type: StringConstructor;
+    layerNames: {
+        type: ArrayConstructor;
         required: true;
     };
 }>>, {
     availableStyles: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/actions/actionHelper.d.ts

@@ -1,11 +1,8 @@
 /**
- * @typedef {Object} ActionOptions
- * @property {string} name
- * @property {string} [title]
- * @property {string} [icon]
+ * @typedef {Omit<VcsAction, 'callback'>} ActionOptions
  */
 /**
- * @typedef {function(PointerEvent): void | Promise<void>} ActionCallback
+ * @typedef {(p?: PointerEvent) => (void | Promise<void>)} ActionCallback
  */
 /**
  * @typedef {Object} VcsAction
@@ -110,12 +107,8 @@ export function getViewpointFromFeature(feature: import("ol").Feature): Viewpoin
  * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
  */
 export function createZoomToFeatureAction(actionOptions: ActionOptions, feature: import("ol").Feature, mapCollection: import("@vcmap/core").MapCollection): VcsAction | null;
-export type ActionOptions = {
-    name: string;
-    title?: string | undefined;
-    icon?: string | undefined;
-};
-export type ActionCallback = (arg0: PointerEvent) => void | Promise<void>;
+export type ActionOptions = Omit<VcsAction, 'callback'>;
+export type ActionCallback = (p?: PointerEvent) => (void | Promise<void>);
 export type VcsAction = {
     /**
      * - reactive and translatable name rendered in overflow

package/src/actions/actionHelper.js

@@ -1,5 +1,5 @@
 import { v4 as uuid } from 'uuid';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf, optional } from '@vcsuite/check';
 import {
   Collection,
   Extent,
@@ -19,14 +19,11 @@ import {
 import SearchComponent from '../search/SearchComponent.vue';
 
 /**
- * @typedef {Object} ActionOptions
- * @property {string} name
- * @property {string} [title]
- * @property {string} [icon]
+ * @typedef {Omit<VcsAction, 'callback'>} ActionOptions
  */
 
 /**
- * @typedef {function(PointerEvent): void | Promise<void>} ActionCallback
+ * @typedef {(p?: PointerEvent) => (void | Promise<void>)} ActionCallback
  */
 
 /**
@@ -48,8 +45,8 @@ import SearchComponent from '../search/SearchComponent.vue';
  */
 export function getActionFromOptions(options) {
   check(options.name, String);
-  checkMaybe(options.title, String);
-  checkMaybe(options.icon, String);
+  check(options.title, maybe(String));
+  check(options.icon, maybe(String));
   check(options.callback, Function);
   options.active = parseBoolean(options.active, false);
   options.hasUpdate = parseBoolean(options.hasUpdate, false);
@@ -67,20 +64,20 @@ export function getActionFromOptions(options) {
 export function createMapButtonAction(actionOptions, mapName, maps) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
   check(mapName, String);
   check(maps, MapCollection);
 
   const active = maps.activeMap?.name === mapName;
-  const action = {
+  const action = reactive({
     ...actionOptions,
     active,
     callback() {
       maps.setActiveMap(mapName);
     },
-  };
+  });
   const destroyListener = maps.mapActivated.addEventListener((map) => {
     action.active = map?.name === mapName;
   });
@@ -104,14 +101,14 @@ export function createToggleAction(
 ) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
-    hasUpdate: [undefined, Boolean],
+    icon: optional(String),
+    title: optional(String),
+    hasUpdate: optional(Boolean),
   });
   check(windowComponent, { id: String });
-  check(owner, [String, vcsAppSymbol]);
+  check(owner, oneOf(String, vcsAppSymbol));
 
-  const action = {
+  const action = reactive({
     ...actionOptions,
     active: windowManager.has(windowComponent.id),
     callback() {
@@ -122,7 +119,7 @@ export function createToggleAction(
       }
       return null;
     },
-  };
+  });
 
   const listeners = [
     windowManager.added.addEventListener(({ id }) => {
@@ -153,11 +150,17 @@ export function createToggleAction(
 export function createSearchButtonAction(app) {
   let destroyAction = () => {};
   const searchAction = ref(null);
+  const uiConfig = app.uiConfig.config;
+
   const determineAction = () => {
     if (app.windowManager.has('searchId')) {
       app.windowManager.remove('searchId');
     }
-    if (app.search.size > 0 && searchAction.value === null) {
+    if (
+      !uiConfig.hideSearch &&
+      app.search.size > 0 &&
+      searchAction.value === null
+    ) {
       const action = createToggleAction(
         {
           name: 'search.title',
@@ -178,7 +181,10 @@ export function createSearchButtonAction(app) {
       );
       destroyAction = action.destroy;
       searchAction.value = reactive(action.action);
-    } else if (app.search.size === 0 && searchAction.value !== null) {
+    } else if (
+      (uiConfig.hideSearch || app.search.size === 0) &&
+      searchAction.value !== null
+    ) {
       destroyAction();
       destroyAction = () => {};
       searchAction.value = null;
@@ -186,6 +192,8 @@ export function createSearchButtonAction(app) {
   };
   determineAction();
   const listeners = [
+    app.uiConfig.added.addEventListener(determineAction),
+    app.uiConfig.removed.addEventListener(determineAction),
     app.search.added.addEventListener(determineAction),
     app.search.removed.addEventListener(determineAction),
   ];
@@ -256,10 +264,10 @@ export function createOverviewMapAction(
 export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
-  check(owner, [String, vcsAppSymbol]);
+  check(owner, oneOf(String, vcsAppSymbol));
 
   const id = uuid();
   const { position: windowPositionOptions, ...component } = modalComponent;
@@ -277,7 +285,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     }
   };
 
-  const action = {
+  const action = reactive({
     ...actionOptions,
     active: false,
     callback(event) {
@@ -306,7 +314,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
       }
       return null;
     },
-  };
+  });
 
   const listeners = [
     app.windowManager.removed.addEventListener(({ id: windowId }) => {
@@ -334,10 +342,10 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
 export function createLinkAction(actionOptions, url) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
-  check(url, [String, Function]);
+  check(url, oneOf(String, Function));
 
   return {
     ...actionOptions,
@@ -369,10 +377,10 @@ export function createGoToViewpointAction(
 ) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
-  check(viewpoint, [Viewpoint, String]);
+  check(viewpoint, oneOf(Viewpoint, String));
   check(viewpointCollection, Collection);
   check(mapCollection, MapCollection);
 
@@ -422,8 +430,8 @@ export function createZoomToFeatureAction(
 ) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
   });
   check(feature, Feature);
   check(mapCollection, MapCollection);

package/src/actions/extentActions.d.ts

@@ -29,10 +29,9 @@ export function createExtentFeatureAction(app: import("@src/vcsUiApp.js").defaul
 /**
  * @param {import("@src/vcsUiApp.js").default} app
  * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>|import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
- * @param {boolean} disabled
  * @returns {{ actions: Array<import("./actionHelper.js").VcsAction>, destroy: () => void, layer: import("@vcmap/core").VectorLayer, featureId: string }}
  */
-export function setupExtentComponentActions(app: import("@src/vcsUiApp.js").default, extent: import("vue").ComputedRef<import("@vcmap/core").Extent> | import("vue").Ref<import("@vcmap/core").Extent> | import("vue").WritableComputedRef<import("@vcmap/core").Extent>, disabled: boolean): {
+export function setupExtentComponentActions(app: import("@src/vcsUiApp.js").default, extent: import("vue").ComputedRef<import("@vcmap/core").Extent> | import("vue").Ref<import("@vcmap/core").Extent> | import("vue").WritableComputedRef<import("@vcmap/core").Extent>): {
     actions: Array<import("./actionHelper.js").VcsAction>;
     destroy: () => void;
     layer: import("@vcmap/core").VectorLayer;

package/src/actions/extentActions.js

@@ -11,6 +11,7 @@ import {
   startEditGeometrySession,
   VectorLayer,
   Viewpoint,
+  wgs84Projection,
 } from '@vcmap/core';
 import { reactive, ref, watch, nextTick } from 'vue';
 import { Feature } from 'ol';
@@ -270,7 +271,14 @@ function setupVertexAction(
  * @param {string} featureId
  */
 function syncExtentFeature(extent, layer, featureId) {
-  const extentGeometry = fromExtent(extent.value.extent);
+  const extentCoords = [...extent.value.extent];
+  // clamp coords for visualization, because at the pole Cesium has issues
+  if (extent.value.projection.epsg === wgs84Projection.epsg) {
+    extentCoords[1] = Math.max(-89, extentCoords[1]);
+    extentCoords[3] = Math.min(89, extentCoords[3]);
+  }
+
+  const extentGeometry = fromExtent(extentCoords);
   extentGeometry.transform(
     extent.value.projection.proj,
     mercatorProjection.proj,
@@ -280,18 +288,21 @@ function syncExtentFeature(extent, layer, featureId) {
     c.push(0);
   });
   coordinates[0].pop();
-  const geometry = new Polygon(coordinates, 'XYZ');
-  geometry.set('_vcsGeomType', GeometryType.BBox);
-  layer.getFeatureById(featureId).setGeometry(geometry);
+  if (layer.getFeatureById(featureId).getGeometry()) {
+    layer.getFeatureById(featureId).getGeometry().setCoordinates(coordinates);
+  } else {
+    const geometry = new Polygon(coordinates, 'XYZ');
+    geometry.set('_vcsGeomType', GeometryType.BBox);
+    layer.getFeatureById(featureId).setGeometry(geometry);
+  }
 }
 
 /**
  * @param {import("@src/vcsUiApp.js").default} app
  * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>|import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
- * @param {boolean} disabled
  * @returns {{ actions: Array<import("./actionHelper.js").VcsAction>, destroy: () => void, layer: import("@vcmap/core").VectorLayer, featureId: string }}
  */
-export function setupExtentComponentActions(app, extent, disabled) {
+export function setupExtentComponentActions(app, extent) {
   const layer = new VectorLayer({
     projection: mercatorProjection.toJSON(),
     zIndex: maxZIndex - 1,
@@ -320,9 +331,9 @@ export function setupExtentComponentActions(app, extent, disabled) {
   );
 
   const { action: showExtentAction, destroy: destroyShowExtent } =
-    createLayerToggleAction(layer, disabled);
+    createLayerToggleAction(layer, false);
   const { action: createExtentAction, destroy: destroyCreateExtent } =
-    createExtentFeatureAction(app, layer, extent, featureId, disabled);
+    createExtentFeatureAction(app, layer, extent, featureId, false);
   const zoomToExtentAction = createZoomToExtentAction(app, extent);
   zoomToExtentAction.title = 'components.extent.zoom';
   const { action: translateAction, destroy: destroyTranslate } =

package/src/actions/flightActions.js

@@ -1,5 +1,5 @@
 import { reactive } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum } from '@vcsuite/check';
 import {
   createFlightVisualization,
   exportFlightAsGeoJson,
@@ -36,33 +36,54 @@ export function createPlayAction(app, instance) {
       } else {
         player = await app.flights.setPlayerForFlight(instance);
         if (player) {
-          stateListener = player.stateChanged.addEventListener((state) => {
-            if (state === 'stopped') {
-              action.icon = '$vcsPlayCircle';
-              action.title = 'flight.playTooltip';
-            } else if (state === 'paused') {
-              action.icon = '$vcsPlayCircle';
-              action.title = 'flight.playTooltip';
-            } else {
-              action.icon = 'mdi-pause';
-              action.title = 'flight.pauseTooltip';
-            }
-          });
-          destroyListener = player.destroyed.addEventListener(() => {
-            player = null;
-            action.icon = '$vcsPlayCircle';
-            stateListener();
-            destroyListener();
-          });
           player.play();
         }
       }
     },
   });
 
+  function updateAction(state) {
+    if (state === 'stopped' || state === 'paused') {
+      action.icon = '$vcsPlayCircle';
+      action.title = 'flight.playTooltip';
+    } else {
+      action.icon = 'mdi-pause';
+      action.title = 'flight.pauseTooltip';
+    }
+  }
+
+  function destroyPlayer() {
+    player = undefined;
+    updateAction('stopped');
+    stateListener?.();
+    destroyListener?.();
+  }
+
+  function checkPlayer(_player) {
+    if (_player?.flightInstanceName === instance.name) {
+      player = _player;
+      updateAction(player.state);
+      stateListener = player.stateChanged.addEventListener((state) => {
+        updateAction(state);
+      });
+      destroyListener = player.destroyed.addEventListener(() => {
+        destroyPlayer();
+      });
+    } else {
+      destroyPlayer();
+    }
+  }
+  const playerListener = app.flights.playerChanged.addEventListener(
+    (_player) => {
+      checkPlayer(_player);
+    },
+  );
+  checkPlayer(app.flights.player);
+
   return {
     action,
     destroy: () => {
+      playerListener();
       if (player) {
         player.stop();
         player.destroy();
@@ -87,7 +108,7 @@ export const PlayerDirection = {
  * @returns {{action: import("./actionHelper.js").VcsAction, destroy: () => void}}
  */
 export function createStepAction(app, instance, direction) {
-  check(direction, Object.values(PlayerDirection));
+  check(direction, ofEnum(PlayerDirection));
 
   let player;
   const action = reactive({
@@ -123,7 +144,7 @@ export function createStepAction(app, instance, direction) {
  * @returns {{ action: import("./actionHelper.js").VcsAction & { listeners:Object<string,()=>void>, destroy: () => void }}}
  */
 export function createFastAction(app, instance, direction) {
-  check(direction, Object.values(PlayerDirection));
+  check(direction, ofEnum(PlayerDirection));
 
   let player;
   const sign = direction === PlayerDirection.Forward ? 1 : -1;
@@ -141,7 +162,7 @@ export function createFastAction(app, instance, direction) {
     player?.pause();
   }
 
-  const action = {
+  const action = reactive({
     name: `fast-${direction}`,
     icon,
     title: `flight.${direction}FastTooltip`,
@@ -158,7 +179,7 @@ export function createFastAction(app, instance, direction) {
         }
       },
     },
-  };
+  });
 
   const playerChangedListener = app.flights.playerChanged.addEventListener(
     (activePlayer) => {
@@ -245,14 +266,14 @@ export function setupFlightListItemPlayer(app, instance, actions) {
     );
   }
 
-  const stopAction = {
+  const stopAction = reactive({
     name: 'stop',
     icon: 'mdi-square',
     title: 'flight.stopTooltip',
     callback: () => {
       player?.stop();
     },
-  };
+  });
 
   const playAction = reactive({
     name: 'play',
@@ -308,7 +329,7 @@ export function setupFlightListItemPlayer(app, instance, actions) {
 export function createZoomToFlightAction(app, instance) {
   let flightVis;
 
-  const action = {
+  const action = reactive({
     name: 'components.flight.zoom',
     title: 'components.flight.zoom',
     disabled: !instance.isValid(),
@@ -318,7 +339,7 @@ export function createZoomToFlightAction(app, instance) {
       }
       await flightVis.zoomToExtent();
     },
-  };
+  });
   const listener = instance.anchorsChanged.addEventListener(() => {
     action.disabled = !instance.isValid();
   });
@@ -390,7 +411,7 @@ export function createExportFlightAction(instance, isPathExport = false) {
     ? 'components.flight.exportPath'
     : 'components.flight.export';
 
-  const action = {
+  const action = reactive({
     name,
     title: name,
     disabled: !instance.isValid(),
@@ -403,7 +424,7 @@ export function createExportFlightAction(instance, isPathExport = false) {
         }.json`,
       );
     },
-  };
+  });
 
   const destroy = instance.anchorsChanged.addEventListener(() => {
     action.disabled = !instance.isValid();
@@ -421,8 +442,8 @@ export function createExportFlightAction(instance, isPathExport = false) {
  * @returns {Promise<boolean>}
  */
 export async function importFlights(app, files, moduleId, importSuccessCb) {
-  checkMaybe(moduleId, String);
-  checkMaybe(importSuccessCb, Function);
+  check(moduleId, maybe(String));
+  check(importSuccessCb, maybe(Function));
 
   const { vueI18n } = app;
   const results = await Promise.all(