@vcmap/ui 6.0.0-rc.1 → 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,7 +7,7 @@
         @click.stop="select(item.value)"
       >
         <v-list-item-title
-          :class="{ 'primary--text': item.value === currentStyleName }"
+          :class="{ 'text-primary': item.value === currentStyleName }"
         >
           {{ $st(item.text) }}
         </v-list-item-title>
@@ -19,12 +19,13 @@
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
   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',
@@ -39,28 +40,43 @@
         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 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() {
-        currentStyleName.value = layer.style.name;
-      }
-      setStyle();
-      // 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(() => {
@@ -88,10 +104,10 @@
       });
 
       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);
       }
 

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

@@ -3,12 +3,12 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
-    layerName: {
-        type: StringConstructor;
+    layerNames: {
+        type: ArrayConstructor;
         required: true;
     };
 }, {
-    currentStyleName: import("vue").Ref<string>;
+    currentStyleName: import("vue").Ref<any>;
     items: import("vue").ComputedRef<{
         text: unknown;
         value: unknown;
@@ -19,8 +19,8 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
-    layerName: {
-        type: StringConstructor;
+    layerNames: {
+        type: ArrayConstructor;
         required: true;
     };
 }>>, {

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,8 +64,8 @@ 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);
@@ -104,12 +101,12 @@ 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 = reactive({
     ...actionOptions,
@@ -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;
@@ -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/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;
@@ -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(

package/src/actions/listActions.d.ts

@@ -1,10 +1,3 @@
-/**
- * Creates an action for renaming an item in a VcsList. Shows VcsTextfield in VcsList.
- * @param {import("../components/lists/VcsList.vue").VcsListItem} item
- * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
- * @returns {import("./actionHelper.js").VcsAction}
- */
-export function createListItemRenameAction(item: import("../components/lists/VcsList.vue").VcsListItem, actionOptions?: Partial<import("./actionHelper.js").ActionOptions> | undefined): import("./actionHelper.js").VcsAction;
 /**
  * Creates an action for renaming an item in a VcsList.
  * @param {import("@vcmap/core").Collection<T>} collection
@@ -13,26 +6,26 @@ export function createListItemRenameAction(item: import("../components/lists/Vcs
  * @template {Object} T
  * @returns {import("./actionHelper.js").VcsAction}
  */
-export function createListItemDeleteAction<T extends Object>(collection: import("@vcmap/core").Collection<T>, item: T, actionOptions?: Partial<import("./actionHelper.js").ActionOptions> | undefined): import("./actionHelper.js").VcsAction;
+export function createListItemDeleteAction<T extends Object>(collection: import("@vcmap/core").Collection<T>, item: T, actionOptions?: Partial<Omit<import("./actionHelper.js").VcsAction, "callback">> | undefined): import("./actionHelper.js").VcsAction;
 /**
  * Creates an action based on a provided selection
- * @param {import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>} selection
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>} selection
  * @param {import("./actionHelper.js").ActionOptions & {callback:import("./actionHelper.js").ActionCallback}} [actionOptions]
  * @returns {{action: import("vue").UnwrapRef<import("./actionHelper.js").VcsAction>, destroy: import("vue").WatchStopHandle}}
  */
-export function createListItemBulkAction(selection: import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>, actionOptions?: (import("./actionHelper.js").ActionOptions & {
+export function createListItemBulkAction(selection: import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>, actionOptions?: (Omit<import("./actionHelper.js").VcsAction, "callback"> & {
     callback: import("./actionHelper.js").ActionCallback;
 }) | undefined): {
     action: import("vue").UnwrapRef<import("./actionHelper.js").VcsAction>;
     destroy: import("vue").WatchStopHandle;
 };
 /**
- * @param {import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>} selection
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>} selection
  * @param {import("./actionHelper.js").ActionCallback} exportCallback
  * @param {string|symbol} owner
  * @returns {{action: import("../manager/collectionManager/collectionManager.js").OwnedAction, destroy: (function(): void)}}
  */
-export function createListExportAction(selection: import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>, exportCallback: import("./actionHelper.js").ActionCallback, owner: string | symbol): {
+export function createListExportAction(selection: import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>, exportCallback: import("./actionHelper.js").ActionCallback, owner: string | symbol): {
     action: import("../manager/collectionManager/collectionManager.js").OwnedAction;
     destroy: (() => void);
 };

package/src/actions/listActions.js

@@ -1,5 +1,5 @@
 import { reactive, watch } from 'vue';
-import { check } from '@vcsuite/check';
+import { check, oneOf, optional } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
 import { parseGeoJSON } from '@vcmap/core';
 import VcsImportComponent from '../components/import/VcsImportComponent.vue';
@@ -8,22 +8,6 @@ import { WindowSlot } from '../manager/window/windowManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { NotificationType } from '../notifier/notifier.js';
 
-/**
- * Creates an action for renaming an item in a VcsList. Shows VcsTextfield in VcsList.
- * @param {import("../components/lists/VcsList.vue").VcsListItem} item
- * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
- * @returns {import("./actionHelper.js").VcsAction}
- */
-export function createListItemRenameAction(item, actionOptions = {}) {
-  return {
-    name: 'list.renameItem',
-    ...actionOptions,
-    callback: () => {
-      item.rename = true;
-    },
-  };
-}
-
 /**
  * Creates an action for renaming an item in a VcsList.
  * @param {import("@vcmap/core").Collection<T>} collection
@@ -50,15 +34,15 @@ export function createListItemDeleteAction(
 
 /**
  * Creates an action based on a provided selection
- * @param {import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>} selection
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>} selection
  * @param {import("./actionHelper.js").ActionOptions & {callback:import("./actionHelper.js").ActionCallback}} [actionOptions]
  * @returns {{action: import("vue").UnwrapRef<import("./actionHelper.js").VcsAction>, destroy: import("vue").WatchStopHandle}}
  */
 export function createListItemBulkAction(selection, actionOptions) {
   check(actionOptions, {
     name: String,
-    icon: [undefined, String],
-    title: [undefined, String],
+    icon: optional(String),
+    title: optional(String),
     callback: Function,
   });
 
@@ -75,7 +59,7 @@ export function createListItemBulkAction(selection, actionOptions) {
 }
 
 /**
- * @param {import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>} selection
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>} selection
  * @param {import("./actionHelper.js").ActionCallback} exportCallback
  * @param {string|symbol} owner
  * @returns {{action: import("../manager/collectionManager/collectionManager.js").OwnedAction, destroy: (function(): void)}}
@@ -218,7 +202,7 @@ export function createListImportAction(
   parentId,
 ) {
   check(importCallback, Function);
-  check(owner, [String, vcsAppSymbol]);
+  check(owner, oneOf(String, vcsAppSymbol));
   check(parentId, String);
 
   const { action, destroy } = createToggleAction(

package/src/actions/stateRefAction.js

@@ -1,5 +1,5 @@
 import { reactive, watch } from 'vue';
-import { check } from '@vcsuite/check';
+import { check, ofEnum } from '@vcsuite/check';
 
 /**
  * @enum {number}
@@ -28,7 +28,7 @@ const stateIconMap = {
  */
 export function createStateRefAction(name, stateRef, callback) {
   check(name, String);
-  check(stateRef?.value, Object.values(StateActionState));
+  check(stateRef?.value, ofEnum(StateActionState));
   check(callback, Function);
 
   const currentState = stateRef.value;