@vcmap/ui 5.1.2 → 5.1.4

package/src/manager/collectionManager/collectionComponentClass.js

@@ -24,6 +24,9 @@ import { sortByOwner } from '../navbarManager.js';
  * @property {boolean} [singleSelect=false]
  * @property {number} [overflowCount=2] - number of header action buttons rendered until overflow
  * @property {number} [limit=10] - limit number of items in rendered list (more items are rendered in extra window)
+ * @property {string} [removeTitle="list.deleteItem"]
+ * @property {string} [bulkRemoveTitle="list.delete"]
+ * @property {string} [renameTitle="list.renameItem"]
  */
 
 /**
@@ -188,6 +191,23 @@ class CollectionComponentClass {
      */
     this.selection = ref([]);
 
+    /**
+     *
+     * @type {{ removeTitle: string, bulkRemoveTitle: string, renameTitle: string }}
+     * @private
+     */
+    this._actionTitles = {
+      removeTitle: options.removeTitle ?? 'list.deleteItem',
+      bulkRemoveTitle: options.bulkRemoveTitle ?? 'list.delete',
+      renameTitle: options.renameTitle ?? 'list.renameItem',
+    };
+
+    /**
+     * @tyep {() => void}
+     * @private
+     */
+    this._removeBulkDeleteAction = () => {};
+
     this._resetWatchers = [
       watch(this.renamable, () => this.reset()),
       watch([this.removable, this.selectable], () => {
@@ -293,7 +313,7 @@ class CollectionComponentClass {
    */
   _addBulkDeleteAction() {
     const { action, destroy } = createListItemBulkAction(this.selection, {
-      name: 'list.delete',
+      name: this._actionTitles.bulkRemoveTitle,
       callback: () => {
         [...this.selection.value].forEach((listItem) => {
           this._collection.remove(this._collection.getByKey(listItem.name));
@@ -301,26 +321,16 @@ class CollectionComponentClass {
       },
     });
     this._destroyBulkDelete = destroy;
-    this.addActions([
-      {
-        action,
-        owner: this._owner,
-        weight: 100,
-      },
-    ]);
-  }
+    const ownedAction = {
+      action,
+      owner: this._owner,
+      weight: 100,
+    };
+    this.addActions([ownedAction]);
 
-  /**
-   * @private
-   */
-  _removeBulkDeleteAction() {
-    this._destroyBulkDelete();
-    const action = this._actions.value.find(
-      (a) => a.action.name === 'list.delete',
-    );
-    if (action) {
-      this.removeActions([action]);
-    }
+    this._removeBulkDeleteAction = () => {
+      this.removeActions([ownedAction]);
+    };
   }
 
   /**
@@ -349,12 +359,20 @@ class CollectionComponentClass {
       destroyFunctions: [],
     };
     if (this.renamable.value) {
-      listItem.actions.push(createListItemRenameAction(listItem));
+      listItem.actions.push(
+        createListItemRenameAction(listItem, {
+          name: this._actionTitles.renameTitle,
+        }),
+      );
       listItem.titleChanged = (newTitle) =>
         titleChanged(item, listItem, newTitle);
     }
     if (this.removable.value) {
-      listItem.actions.push(createListItemDeleteAction(this._collection, item));
+      listItem.actions.push(
+        createListItemDeleteAction(this._collection, item, {
+          name: this._actionTitles.removeTitle,
+        }),
+      );
     }
     this._itemMappings.forEach((itemMapping) => {
       if (

package/src/manager/collectionManager/editorCollectionComponentClass.d.ts

@@ -18,12 +18,16 @@ export function makeEditorCollectionComponentClass<T extends Object | import("@v
  *   editor: EditorWindowComponentOptions|function(T):EditorWindowComponentOptions|undefined,
  *   multiEditor?: EditorWindowComponentOptions,
  *   predicate?: import("./collectionManager.js").PredicateFunction<T>,
- *   selectionBased?: boolean
+ *   selectionBased?: boolean,
+ *   editTitle?: string,
+ *   bulkEditTitle?: string
  * }} EditingOptions
  * @property {EditorWindowComponentOptions|function(T)|undefined} editor
  * @property {EditorWindowComponentOptions} [multiEditor]
  * @property {import("./collectionManager.js").PredicateFunction<T>} [predicate=()=>true] - Optional predicate function for editor
  * @property {boolean} [selectionBased=true] - If true, editor windows are coupled to selection and editor windows are exclusive
+ * @property {string} [editTitle="list.editItem"]
+ * @property {string} [bulkEditTitle="list.edit"]
  * @template {Object} T
  */
 /**
@@ -49,6 +53,8 @@ export type EditingOptions<T extends Object> = {
     multiEditor?: EditorWindowComponentOptions;
     predicate?: import("./collectionManager.js").PredicateFunction<T>;
     selectionBased?: boolean;
+    editTitle?: string;
+    bulkEditTitle?: string;
 };
 export type EditorCollectionComponentClass<T extends Object> = import("./collectionComponentClass.js").default<T> & {
     getEditorWindowId: (arg0: T) => string;

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -13,12 +13,16 @@ import { createListEditAction } from '../../actions/listActions.js';
  *   editor: EditorWindowComponentOptions|function(T):EditorWindowComponentOptions|undefined,
  *   multiEditor?: EditorWindowComponentOptions,
  *   predicate?: import("./collectionManager.js").PredicateFunction<T>,
- *   selectionBased?: boolean
+ *   selectionBased?: boolean,
+ *   editTitle?: string,
+ *   bulkEditTitle?: string
  * }} EditingOptions
  * @property {EditorWindowComponentOptions|function(T)|undefined} editor
  * @property {EditorWindowComponentOptions} [multiEditor]
  * @property {import("./collectionManager.js").PredicateFunction<T>} [predicate=()=>true] - Optional predicate function for editor
  * @property {boolean} [selectionBased=true] - If true, editor windows are coupled to selection and editor windows are exclusive
+ * @property {string} [editTitle="list.editItem"]
+ * @property {string} [bulkEditTitle="list.edit"]
  * @template {Object} T
  */
 
@@ -236,7 +240,7 @@ export function makeEditorCollectionComponentClass(
       });
 
       const editItemAction = {
-        name: 'list.editItem',
+        name: editingOptions.editTitle ?? 'list.editItem',
         async callback() {
           if (selectionBased) {
             closeEditorWindows();
@@ -263,6 +267,7 @@ export function makeEditorCollectionComponentClass(
       app.windowManager,
       editorCollectionComponent.owner,
       getMultiEditorWindowId(),
+      editingOptions.bulkEditTitle,
     );
 
     editorCollectionComponent.addActions([

package/src/manager/contextMenu/contextMenuManager.d.ts

@@ -38,6 +38,16 @@ declare class ContextMenuManager {
      * @private
      */
     private _listeners;
+    /**
+     * An event called when the context menu is closed
+     * @type {VcsEvent<void>}
+     */
+    closed: VcsEvent<void>;
+    /**
+     * @type {() => void}
+     * @private
+     */
+    private _closedListener;
     _ensureInteraction(): void;
     _setupListeners(): void;
     /**
@@ -68,3 +78,4 @@ declare class ContextMenuManager {
     clear(): void;
     destroy(): void;
 }
+import { VcsEvent } from '@vcmap/core';

package/src/manager/contextMenu/contextMenuManager.js

@@ -1,4 +1,4 @@
-import { CesiumMap, BaseOLMap } from '@vcmap/core';
+import { CesiumMap, BaseOLMap, VcsEvent } from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
 import { check } from '@vcsuite/check';
 import ContextMenuInteraction from './contextMenuInteraction.js';
@@ -81,6 +81,24 @@ class ContextMenuManager {
      * @private
      */
     this._listeners = [];
+
+    /**
+     * An event called when the context menu is closed
+     * @type {VcsEvent<void>}
+     */
+    this.closed = new VcsEvent();
+
+    /**
+     * @type {() => void}
+     * @private
+     */
+    this._closedListener = this._app.windowManager.removed.addEventListener(
+      (window) => {
+        if (window.id === contextMenuWindowId) {
+          this.closed.raiseEvent();
+        }
+      },
+    );
   }
 
   _ensureInteraction() {
@@ -208,12 +226,15 @@ class ContextMenuManager {
   }
 
   destroy() {
+    this.clear();
     this._interaction.destroy();
     if (this._interactionListener) {
       this._interactionListener();
       this._interactionListener = null;
     }
     this._eventHandlers = [];
+    this._closedListener();
+    this.closed.destroy();
   }
 }
 

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -11,7 +11,7 @@
       :active="group.action.active"
       :disabled="group.action.disabled"
       :background="group.action.background"
-      @click.stop="group.action.callback($event)"
+      @click="group.action.callback($event)"
       v-bind="{ ...$attrs }"
       class="vcs-toolbox-action-selected"
       :min-width="32"

package/src/manager/toolbox/ToolboxManager.vue

@@ -9,6 +9,8 @@
       toolbar__secondary: !isDefaultToolbox,
     }"
     :height="40"
+    :style="{ zIndex }"
+    @click.stop="bringToTop"
     width="fit-content"
     dense
   >
@@ -21,12 +23,12 @@
         <ToolboxActionGroup
           v-if="group.type === ToolboxType.GROUP"
           :group="group"
-          @toggle="(groupOpen) => (open = groupOpen)"
+          @toggle="openGroup"
         />
         <ToolboxActionSelect
           v-else-if="group.type === ToolboxType.SELECT"
           :group="group"
-          @toggle="(selectOpen) => (open = selectOpen)"
+          @toggle="openGroup"
         />
         <VcsToolButton
           v-else
@@ -35,7 +37,7 @@
           :active="group.action.active"
           :background="group.action.background"
           :disabled="group.action.disabled"
-          @click.stop="group.action.callback($event)"
+          @click="group.action.callback($event)"
           v-bind="{ ...$attrs }"
         />
       </div>
@@ -133,6 +135,11 @@
           toolboxName.value = name;
         });
 
+      const zIndex = app.windowManager.addExternalIdToZIndex(
+        'toolbox',
+        vcsAppSymbol,
+      );
+
       /**
        * To be rendered in Toolbox components must meet certain conditions:
        * - SingleToolboxComponent: no further conditions
@@ -189,16 +196,36 @@
       onUnmounted(() => {
         stopWatching();
         nameChangeListener();
+        app.windowManager.removeExternalIdFromZIndex('toolbox');
+      });
+
+      watch(toolboxOpen, () => {
+        if (toolboxOpen.value) {
+          app.windowManager.bringWindowToTop('toolbox');
+        }
       });
 
+      const open = ref(false);
+      const bringToTop = () => {
+        app.windowManager.bringWindowToTop('toolbox');
+      };
+
       return {
         toolboxOpen,
         orderedGroups,
+        zIndex,
         isDefaultToolbox: computed(
           () => toolboxName.value === defaultToolboxName,
         ),
         ToolboxType,
-        open: ref(false),
+        open,
+        bringToTop,
+        openGroup(group) {
+          open.value = group;
+          if (open.value) {
+            bringToTop();
+          }
+        },
       };
     },
   };

package/src/manager/toolbox/ToolboxManager.vue.d.ts

@@ -1,6 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {
     toolboxOpen: import("vue").Ref<boolean>;
     orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js").ButtonComponent | import("./toolboxManager.js").ToolboxComponent)[]>;
+    zIndex: any;
     isDefaultToolbox: import("vue").ComputedRef<boolean>;
     ToolboxType: {
         SINGLE: number;
@@ -8,6 +9,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         GROUP: number;
     };
     open: import("vue").Ref<boolean>;
+    bringToTop: () => void;
+    openGroup(group: any): void;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;
 export type ToolboxButtonGroup = {

package/src/manager/window/WindowManager.vue

@@ -97,7 +97,7 @@
        * @returns {boolean}
        */
       const isOnTop = (id) => {
-        return windowManager.get(id)?.zIndex.value === componentIds.length - 1;
+        return windowManager.get(id)?.zIndex.value === windowManager.maxZIndex;
       };
       /**
        * @param {WindowComponent} windowComponent

package/src/manager/window/windowManager.d.ts

@@ -302,8 +302,15 @@ declare class WindowManager implements IWindowManager {
     /**
      * reactive ordered array of ids, defining the zIndex of a component
      * @type {import("vue").Ref<Array<string>>}
+     * @private
+     */
+    private _zIndices;
+    /**
+     * Map of <id, owner> for external zIndexIds
+     * @type {Map<string, string>}
+     * @private
      */
-    _zIndices: import("vue").Ref<Array<string>>;
+    private _externalZIndexIds;
     /**
      * @type {Map<string, WindowComponent>}
      * @private
@@ -314,6 +321,14 @@ declare class WindowManager implements IWindowManager {
      * @private
      */
     private _windowPositionsCache;
+    /**
+     * @type {number}
+     */
+    get maxZIndex(): number;
+    /**
+     * @return {string[]}
+     */
+    get externalZIndexIds(): string[];
     /**
      * @param {string} id
      * @returns {WindowComponent}
@@ -411,6 +426,20 @@ declare class WindowManager implements IWindowManager {
      * @param {string|vcsAppSymbol} owner
      */
     removeOwner(owner: string | symbol): void;
+    /**
+     * Adds a string id to the z index handling of windows. The returned computed
+     * will give you the current z index of the id. Use bringToTop with the id to bring it
+     * to the top, just like a window.
+     * @param {string} id
+     * @param {string|vcsAppSymbol} owner
+     * @return {import("vue").ComputedRef<number>}
+     */
+    addExternalIdToZIndex(id: string, owner: string | symbol): import("vue").ComputedRef<number>;
+    /**
+     * Removes an external z index id
+     * @param {string} id
+     */
+    removeExternalIdFromZIndex(id: string): void;
     /**
      * removes all windowComponents and fires removed Events
      */

package/src/manager/window/windowManager.js

@@ -269,14 +269,23 @@ class WindowManager {
     /**
      * reactive ordered array of ids, defining the zIndex of a component
      * @type {import("vue").Ref<Array<string>>}
+     * @private
      */
     this._zIndices = ref([]);
 
+    /**
+     * Map of <id, owner> for external zIndexIds
+     * @type {Map<string, string>}
+     * @private
+     */
+    this._externalZIndexIds = new Map();
+
     /**
      * @type {Map<string, WindowComponent>}
      * @private
      */
     this._windowComponents = new Map();
+
     /**
      * @type {Map<string, WindowPosition>}
      * @private
@@ -284,6 +293,20 @@ class WindowManager {
     this._windowPositionsCache = new Map();
   }
 
+  /**
+   * @type {number}
+   */
+  get maxZIndex() {
+    return this._zIndices.value.length - 1;
+  }
+
+  /**
+   * @return {string[]}
+   */
+  get externalZIndexIds() {
+    return [...this._externalZIndexIds.keys()];
+  }
+
   /**
    * @param {string} id
    * @returns {WindowComponent}
@@ -515,7 +538,11 @@ class WindowManager {
   add(windowComponentOptions, owner) {
     check(owner, [String, vcsAppSymbol]);
 
-    if (windowComponentOptions.id && this.has(windowComponentOptions.id)) {
+    if (
+      windowComponentOptions.id &&
+      (this.has(windowComponentOptions.id) ||
+        this._externalZIndexIds.has(windowComponentOptions.id))
+    ) {
       throw new Error(
         `A window with id ${windowComponentOptions.id} has already been registered.`,
       );
@@ -569,6 +596,7 @@ class WindowManager {
     const position = reactive(windowPosition);
     const initialPosition = { ...windowPositionOptions };
     const zIndex = computed(() => this._zIndices.value.indexOf(id));
+
     /**
      * @type {WindowComponent}
      */
@@ -627,7 +655,7 @@ class WindowManager {
    * @param {string} id
    */
   bringWindowToTop(id) {
-    if (this.has(id)) {
+    if (this.has(id) || this._externalZIndexIds.has(id)) {
       const index = this._zIndices.value.indexOf(id);
       if (index >= 0 && index !== this._zIndices.value.length - 1) {
         this._zIndices.value.push(id);
@@ -675,6 +703,47 @@ class WindowManager {
         this.remove(id);
       }
     });
+    this._externalZIndexIds.forEach((externalOwner, id) => {
+      if (externalOwner === owner) {
+        this.removeExternalIdFromZIndex(id);
+      }
+    });
+  }
+
+  /**
+   * Adds a string id to the z index handling of windows. The returned computed
+   * will give you the current z index of the id. Use bringToTop with the id to bring it
+   * to the top, just like a window.
+   * @param {string} id
+   * @param {string|vcsAppSymbol} owner
+   * @return {import("vue").ComputedRef<number>}
+   */
+  addExternalIdToZIndex(id, owner) {
+    check(id, String);
+    check(owner, [String, vcsAppSymbol]);
+
+    if (this.has(id)) {
+      throw new Error(`Id ${id} already belongs to a window id`);
+    }
+
+    if (this._externalZIndexIds.has(id)) {
+      throw new Error(`Id ${id} is already added`);
+    }
+    this._externalZIndexIds.set(id, owner);
+    this._zIndices.value.push(id);
+    return computed(() => this._zIndices.value.indexOf(id));
+  }
+
+  /**
+   * Removes an external z index id
+   * @param {string} id
+   */
+  removeExternalIdFromZIndex(id) {
+    this._externalZIndexIds.delete(id);
+    const index = this._zIndices.value.indexOf(id);
+    if (index > -1) {
+      this._zIndices.value.splice(index, 1);
+    }
   }
 
   /**

package/src/navigation/MapNavigation.vue

@@ -64,7 +64,9 @@
     } else {
       listener = app.maps.mapActivated.addEventListener((map) => {
         defaultViewpoint = map.getViewpointSync();
-        listener();
+        if (defaultViewpoint?.isValid()) {
+          listener();
+        }
       });
     }
 
@@ -88,9 +90,10 @@
       title: 'navigation.homeButton',
       icon: '$vcsHomePoint',
       async callback() {
-        await app.maps.activeMap?.gotoViewpoint(
-          getStartingViewpoint() || defaultViewpoint,
-        );
+        const vp = getStartingViewpoint() || defaultViewpoint;
+        if (app.maps.activeMap && vp?.isValid()) {
+          await app.maps.activeMap.gotoViewpoint(vp);
+        }
       },
     });
 

package/src/navigation/overviewMap.js

@@ -11,6 +11,7 @@ import {
   Extent,
   Viewpoint,
   deserializeLayer,
+  maxZIndex,
 } from '@vcmap/core';
 import Point from 'ol/geom/Point.js';
 import Feature from 'ol/Feature.js';
@@ -454,23 +455,25 @@ class OverviewMap {
    * @private
    */
   _obliqueImageChange(image) {
-    const { source } = this._obliqueImageLayer;
-    if (this._obliqueViewDirection !== image.viewDirection) {
-      this._obliqueViewDirection = image.viewDirection;
-      source.changed();
-    }
-    const activeFeature = source.getFeatureById(image.name);
-    if (activeFeature) {
-      this._obliqueSelectedImageLayer.removeAllFeatures();
-      this._obliqueSelectedImageLayer.addFeatures([activeFeature]);
-      const extent = new Extent({
-        coordinates: activeFeature.getGeometry().getExtent(),
-        projection: mercatorProjection.toJSON(),
-      });
-
-      const vp = Viewpoint.createViewpointFromExtent(extent);
-      vp.distance /= this._obliqueResolutionFactor;
-      this._map.gotoViewpoint(vp);
+    if (image) {
+      const { source } = this._obliqueImageLayer;
+      if (this._obliqueViewDirection !== image.viewDirection) {
+        this._obliqueViewDirection = image.viewDirection;
+        source.changed();
+      }
+      const activeFeature = source.getFeatureById(image.name);
+      if (activeFeature) {
+        this._obliqueSelectedImageLayer.removeAllFeatures();
+        this._obliqueSelectedImageLayer.addFeatures([activeFeature]);
+        const extent = new Extent({
+          coordinates: activeFeature.getGeometry().getExtent(),
+          projection: mercatorProjection.toJSON(),
+        });
+
+        const vp = Viewpoint.createViewpointFromExtent(extent);
+        vp.distance /= this._obliqueResolutionFactor;
+        this._map.gotoViewpoint(vp);
+      }
     }
   }
 
@@ -492,7 +495,7 @@ class OverviewMap {
     this._obliqueTileLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: obliqueTileStyle,
-      zIndex: 1,
+      zIndex: maxZIndex - 3,
     });
     this._obliqueTileLayer[overviewMapLayerSymbol] = true;
 
@@ -507,11 +510,13 @@ class OverviewMap {
     this._obliqueImageLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: obliqueImageStyle,
+      zIndex: maxZIndex - 2,
     });
     this._obliqueImageLayer[overviewMapLayerSymbol] = true;
     this._obliqueSelectedImageLayer = new VectorLayer({
       projection: mercatorProjection.toJSON(),
       style: this.obliqueSelectedStyle,
+      zIndex: maxZIndex - 1,
     });
     this._obliqueSelectedImageLayer[overviewMapLayerSymbol] = true;
     this._map.layerCollection.add(this._obliqueImageLayer);
@@ -539,7 +544,7 @@ class OverviewMap {
     if (!this._cameraIconLayer) {
       this._cameraIconLayer = new VectorLayer({
         projection: mercatorProjection.toJSON(),
-        zIndex: 50,
+        zIndex: maxZIndex,
       });
       this._cameraIconLayer[overviewMapLayerSymbol] = true;
       this._map.layerCollection.add(this._cameraIconLayer);

package/dist/assets/index-cc59d4fd.js

@@ -1 +0,0 @@
-import{initAppFromAppConfig as p}from"./ui.a843ac.js";p("#app","app.config.json");