@vcmap/ui 5.0.1 → 5.1.0-rc.1

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

@@ -0,0 +1,70 @@
+export default ContextMenuManager;
+export type ContextMenuEventHandler = {
+    owner: string | symbol;
+    handler: (arg0: import("@vcmap/core").InteractionEvent) => Promise<Array<import("../../actions/actionHelper.js").VcsAction>> | Array<import("../../actions/actionHelper.js").VcsAction>;
+};
+/**
+ * The context menu manager handles right click events in the current map and displays a
+ * context menu based on registered action providers.
+ * @class
+ */
+declare class ContextMenuManager {
+    /**
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {import("@src/vcsUiApp.js").default}
+     * @private
+     */
+    private _app;
+    /**
+     * @type {ContextMenuInteraction}
+     * @private
+     */
+    private _interaction;
+    /**
+     * @type {Array<ContextMenuEventHandler>}
+     * @private
+     */
+    private _eventHandlers;
+    /**
+     * @type {function():void|null}
+     * @private
+     */
+    private _interactionListener;
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    private _listeners;
+    _ensureInteraction(): void;
+    _setupListeners(): void;
+    /**
+     * @param {import("@vcmap/core").InteractionEvent} event
+     * @private
+     */
+    private _handleRightClick;
+    /**
+     * Adds a handler to the context menu. A handler is called with the interaction event on each right click.
+     * If the handler returns an array of valid actions, said actions will be displayed in the context menu
+     * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<import("../../actions/actionHelper.js").VcsAction>>|Array<import("../../actions/actionHelper.js").VcsAction>} handler
+     * @param {string|symbol} owner
+     */
+    addEventHandler(handler: (arg0: import("@vcmap/core").InteractionEvent) => Promise<Array<import("../../actions/actionHelper.js").VcsAction>> | Array<import("../../actions/actionHelper.js").VcsAction>, owner: string | symbol): void;
+    /**
+     * Remove a single handler
+     * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<import("../../actions/actionHelper.js").VcsAction>>|Array<import("../../actions/actionHelper.js").VcsAction>} handler
+     */
+    removeHandler(handler: (arg0: import("@vcmap/core").InteractionEvent) => Promise<Array<import("../../actions/actionHelper.js").VcsAction>> | Array<import("../../actions/actionHelper.js").VcsAction>): void;
+    /**
+     * Remove all handlers associated with this owner
+     * @param {string|symbol} owner
+     */
+    removeOwner(owner: string | symbol): void;
+    /**
+     * Clear any currently opened context menus
+     */
+    clear(): void;
+    destroy(): void;
+}

package/src/manager/contextMenu/contextMenuManager.js

@@ -14,7 +14,7 @@ import { sortByOwner } from '../navbarManager.js';
 /**
  * @typedef {Object} ContextMenuEventHandler
  * @property {string|symbol} owner
- * @property {function(import("@vcmap/core").InteractionEvent):Promise<Array<VcsAction>>|Array<VcsAction>} handler
+ * @property {function(import("@vcmap/core").InteractionEvent):Promise<Array<import("../../actions/actionHelper.js").VcsAction>>|Array<import("../../actions/actionHelper.js").VcsAction>} handler
  */
 
 /**
@@ -48,11 +48,11 @@ function setupViewpointChanged(map, clear) {
  */
 class ContextMenuManager {
   /**
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(app) {
     /**
-     * @type {VcsUiApp}
+     * @type {import("@src/vcsUiApp.js").default}
      * @private
      */
     this._app = app;
@@ -153,7 +153,7 @@ class ContextMenuManager {
   /**
    * Adds a handler to the context menu. A handler is called with the interaction event on each right click.
    * If the handler returns an array of valid actions, said actions will be displayed in the context menu
-   * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<VcsAction>>|Array<VcsAction>} handler
+   * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<import("../../actions/actionHelper.js").VcsAction>>|Array<import("../../actions/actionHelper.js").VcsAction>} handler
    * @param {string|symbol} owner
    */
   addEventHandler(handler, owner) {
@@ -170,7 +170,7 @@ class ContextMenuManager {
 
   /**
    * Remove a single handler
-   * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<VcsAction>>|Array<VcsAction>} handler
+   * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<import("../../actions/actionHelper.js").VcsAction>>|Array<import("../../actions/actionHelper.js").VcsAction>} handler
    */
   removeHandler(handler) {
     this._eventHandlers = this._eventHandlers.filter(

package/src/manager/navbarManager.d.ts

@@ -0,0 +1,60 @@
+/**
+ * sorts by owner and optionally plugin order
+ * @param {string | symbol} ownerA
+ * @param {string | symbol} ownerB
+ * @param {string[]} [order] order of owners to sort by
+ * @returns {number}
+ */
+export function sortByOwner(ownerA: string | symbol, ownerB: string | symbol, order?: string[] | undefined): number;
+/**
+ * filters actions by button location and returns actions (optionally sorted)
+ * @param {Array<import("./buttonManager.js").ButtonComponent>} buttonComponents
+ * @param {ButtonLocation} location Button render position
+ * @param {string[]} [order] optional order to sort by (plugin names)
+ * @param {function(import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
+ * @returns {Array<import("../actions/actionHelper.js").VcsAction>}
+ */
+export function getActionsByLocation(buttonComponents: Array<import("./buttonManager.js").ButtonComponent>, location: ButtonLocation, order?: string[] | undefined, compareFn?: ((arg0: import("./buttonManager.js").ButtonComponent, arg1: import("./buttonManager.js").ButtonComponent) => number) | undefined): Array<import("../actions/actionHelper.js").VcsAction>;
+export const locationSymbol: unique symbol;
+/**
+ * *
+ */
+export type ButtonLocation = number;
+export namespace ButtonLocation {
+    let MAP: number;
+    let CONTENT: number;
+    let TOOL: number;
+    let PROJECT: number;
+    let SHARE: number;
+    let MENU: number;
+}
+export default NavbarManager;
+export type INavbarManager = import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponentOptions>;
+/**
+ * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
+ */
+/**
+ * @class NavbarManager
+ * @description Manages a set of Map Buttons in the Navbar
+ * @implements {INavbarManager}
+ */
+declare class NavbarManager extends ButtonManager implements INavbarManager {
+    /**
+     * adds a buttonComponent
+     * @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
+     * @param {string|symbol} owner pluginName or vcsAppSymbol
+     * @param {ButtonLocation} location Button render position
+     * @throws {Error} if a buttonComponent with the same ID has already been added
+     * @returns {import("./buttonManager.js").ButtonComponent}
+     */
+    // @ts-ignore
+add(buttonComponentOptions: import("./buttonManager.js").ButtonComponentOptions, owner: string | symbol, location: ButtonLocation): import("./buttonManager.js").ButtonComponent;
+    /**
+     * Toggles a button of provided id by executing its callback.
+     * Use active flag to force a state to be applied.
+     * @param {string} id
+     * @param {boolean} [active]
+     */
+    toggle(id: string, active?: boolean | undefined): void;
+}
+import ButtonManager from './buttonManager.js';

package/src/manager/navbarManager.js

@@ -32,11 +32,11 @@ export function sortByOwner(ownerA, ownerB, order = []) {
 
 /**
  * filters actions by button location and returns actions (optionally sorted)
- * @param {Array<ButtonComponent>} buttonComponents
+ * @param {Array<import("./buttonManager.js").ButtonComponent>} buttonComponents
  * @param {ButtonLocation} location Button render position
  * @param {string[]} [order] optional order to sort by (plugin names)
- * @param {function(buttonA:ButtonComponent, buttonB:ButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
- * @returns {Array<VcsAction>}
+ * @param {function(import("./buttonManager.js").ButtonComponent, import("./buttonManager.js").ButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
+ * @returns {Array<import("../actions/actionHelper.js").VcsAction>}
  */
 export function getActionsByLocation(
   buttonComponents,
@@ -70,19 +70,23 @@ export const ButtonLocation = {
   MENU: 5,
 };
 
+/**
+ * @typedef {import("../vcsUiApp.js").VcsComponentManager<import("./buttonManager.js").ButtonComponent,import("./buttonManager.js").ButtonComponentOptions>} INavbarManager
+ */
+
 /**
  * @class NavbarManager
  * @description Manages a set of Map Buttons in the Navbar
- * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
+ * @implements {INavbarManager}
  */
 class NavbarManager extends ButtonManager {
   /**
    * adds a buttonComponent
-   * @param {ButtonComponentOptions} buttonComponentOptions
+   * @param {import("./buttonManager.js").ButtonComponentOptions} buttonComponentOptions
    * @param {string|symbol} owner pluginName or vcsAppSymbol
    * @param {ButtonLocation} location Button render position
    * @throws {Error} if a buttonComponent with the same ID has already been added
-   * @returns {ButtonComponent}
+   * @returns {import("./buttonManager.js").ButtonComponent}
    */
   add(buttonComponentOptions, owner, location) {
     check(location, Object.values(ButtonLocation));

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

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{
+    group: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    open: import("vue").Ref<boolean>;
+    orderedButtons: import("vue").ComputedRef<(import("../buttonManager.js").ButtonComponent | import("./toolboxManager.js").ToolboxComponent)[]>;
+    nudgeLeft: ComputedRef<number>;
+    hasActiveAction: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    group: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -10,6 +10,7 @@
       :icon="group.action.tools[group.action.currentIndex].icon"
       :active="group.action.active"
       :disabled="group.action.disabled"
+      :background="group.action.background"
       @click.stop="group.action.callback($event)"
       v-bind="{ ...$attrs }"
       class="vcs-toolbox-action-selected"

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

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<{
+    group: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    open: import("vue").Ref<boolean>;
+    nudgeLeft: ComputedRef<number>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    group: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/manager/toolbox/ToolboxManager.vue

@@ -3,8 +3,11 @@
     v-if="
       toolboxOpen && orderedGroups.length > 0 && $vuetify.breakpoint.mdAndUp
     "
-    class="vcs-toolbox toolbar__secondary mx-auto v-sheet marginToTop"
-    :class="{ 'rounded-b': !open }"
+    class="vcs-toolbox mx-auto v-sheet marginToTop"
+    :class="{
+      'rounded-b': !open,
+      toolbar__secondary: !isDefaultToolbox,
+    }"
     :height="40"
     width="fit-content"
     dense
@@ -46,7 +49,14 @@
     top: 0;
     left: 0;
     right: 0;
-
+    &.vcs-toolbox.theme {
+      &--light {
+        background-color: var(--v-primary-lighten3) !important;
+      }
+      &--dark {
+        background-color: var(--v-primary-darken4) !important;
+      }
+    }
     &.v-toolbar {
       ::v-deep .v-toolbar__content {
         padding: 0;
@@ -68,7 +78,11 @@
   import { inject, ref, computed, watch, onUnmounted } from 'vue';
   import { ButtonLocation, vcsAppSymbol } from '@vcmap/ui';
   import { VToolbar, VToolbarItems } from 'vuetify/lib';
-  import { getComponentsByOrder, ToolboxType } from './toolboxManager.js';
+  import {
+    defaultToolboxName,
+    getComponentsByOrder,
+    ToolboxType,
+  } from './toolboxManager.js';
   import ToolboxActionSelect from './SelectToolboxComponent.vue';
   import ToolboxActionGroup from './GroupToolboxComponent.vue';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
@@ -79,9 +93,9 @@
    * @property {string} type
    * @property {string} icon
    * @property {string} title
-   * @property {Array<ButtonComponent>} buttons
+   * @property {Array<import("../buttonManager.js").ButtonComponent>} buttons
    * @property {string} [selected]
-   * @property {function(index:number):void} [selectCb]
+   * @property {function(number):void} [selectCb]
    */
 
   /**
@@ -113,6 +127,12 @@
         );
       });
 
+      const toolboxName = ref(app.toolboxManager.toolboxName);
+      const nameChangeListener =
+        app.toolboxManager.toolboxNameChanged.addEventListener((name) => {
+          toolboxName.value = name;
+        });
+
       /**
        * To be rendered in Toolbox components must meet certain conditions:
        * - SingleToolboxComponent: no further conditions
@@ -129,7 +149,9 @@
         );
       }
       const orderedGroups = computed(() =>
-        getComponentsByOrder(groups.value).filter(filterFunc),
+        getComponentsByOrder(groups.value)
+          .filter((comp) => comp.toolboxNames.includes(toolboxName.value))
+          .filter(filterFunc),
       );
 
       const toolboxOpen = ref(true);
@@ -166,11 +188,15 @@
 
       onUnmounted(() => {
         stopWatching();
+        nameChangeListener();
       });
 
       return {
         toolboxOpen,
         orderedGroups,
+        isDefaultToolbox: computed(
+          () => toolboxName.value === defaultToolboxName,
+        ),
         ToolboxType,
         open: ref(false),
       };

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

@@ -0,0 +1,21 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    toolboxOpen: import("vue").Ref<boolean>;
+    orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js").ButtonComponent | import("./toolboxManager.js").ToolboxComponent)[]>;
+    isDefaultToolbox: import("vue").ComputedRef<boolean>;
+    ToolboxType: {
+        SINGLE: number;
+        SELECT: number;
+        GROUP: number;
+    };
+    open: 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<{}>>, {}>;
+export default _default;
+export type ToolboxButtonGroup = {
+    id: string;
+    type: string;
+    icon: string;
+    title: string;
+    buttons: Array<import("../buttonManager.js").ButtonComponent>;
+    selected?: string | undefined;
+    selectCb?: ((arg0: number) => void) | undefined;
+};

package/src/manager/toolbox/toolboxManager.d.ts

@@ -0,0 +1,177 @@
+/**
+ * returns ToolboxComponents sorted by owner (or other sort function)
+ * @param {Array<ToolboxComponent|import("../buttonManager.js").ButtonComponent>} components
+ * @param {string[]} [order] optional order to sort by (plugin names)
+ * @param {function(ownerA:string, ownerB:string, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
+ * @returns {Array<ToolboxComponent|import("../buttonManager.js").ButtonComponent>}
+ */
+export function getComponentsByOrder(components: Array<ToolboxComponent | import("../buttonManager.js").ButtonComponent>, order?: string[] | undefined, compareFn?: typeof sortByOwner): Array<ToolboxComponent | import("../buttonManager.js").ButtonComponent>;
+/**
+ * Adds default groups for a toolboxManager.
+ * Once requested, group id, icon and title are defined and cannot be changed or overwritten.
+ * @param {ToolboxManager} toolboxManager
+ * @param {Array<ToolboxComponentOptions>} groups
+ */
+export function setupDefaultGroups(toolboxManager: ToolboxManager, groups?: Array<ToolboxComponentOptions>): void;
+/**
+ * Possible group types. Define behaviour of group:
+ */
+export type ToolboxType = number;
+export namespace ToolboxType {
+    let SINGLE: number;
+    let SELECT: number;
+    let GROUP: number;
+}
+/**
+ * The default toolbox name
+ * @type {symbol}
+ */
+export const defaultToolboxName: symbol;
+export default ToolboxManager;
+export type ToolboxComponentOptions = {
+    /**
+     * - Optional ID, If not provided an uuid will be generated.
+     */
+    id?: string | undefined;
+    /**
+     * - Group type, defining the behaviour of the group
+     */
+    type: ToolboxType;
+    /**
+     * - optional specific toolboxes to render this component in.
+     */
+    toolboxNames?: (string | symbol)[] | undefined;
+};
+export type SingleToolboxComponentOptions = ToolboxComponentOptions & {
+    action: import("../../actions/actionHelper.js").VcsAction;
+};
+export type SelectToolboxComponentOptions = ToolboxComponentOptions & {
+    action: ToolboxSelectAction;
+};
+export type GroupToolboxComponentOptions = ToolboxComponentOptions & {
+    icon: string;
+    title?: string;
+    disabled?: boolean;
+};
+export type ToolboxComponent = {
+    id: string;
+    /**
+     * - Group type, defining the behaviour of the group
+     */
+    type: ToolboxType;
+    owner: string | symbol;
+    toolboxNames: (string | symbol)[];
+};
+export type SingleToolboxComponent = ToolboxComponent & {
+    action: import("vue").UnwrapRef<import("../../actions/actionHelper.js").VcsAction>;
+};
+export type GroupToolboxComponent = ToolboxComponent & {
+    icon: string;
+    title?: string;
+    buttonManager: ButtonManager;
+    disabled?: boolean;
+};
+export type SelectToolboxComponent = ToolboxComponent & {
+    action: import("vue").UnwrapRef<ToolboxSelectAction>;
+};
+export type ToolboxSelectAction = import("../../actions/actionHelper.js").VcsAction & {
+    selected: (arg0: number) => void;
+    tools: ToolboxSelectItem[];
+    currentIndex: number;
+};
+export type ToolboxSelectItem = {
+    name: string;
+    title?: string | undefined;
+    icon: string;
+    disabled?: boolean | undefined;
+};
+export type IToolboxManager = import("../../vcsUiApp.js").VcsComponentManager<ToolboxComponent, ToolboxComponentOptions>;
+/**
+ * sorts by owner and optionally plugin order
+ * If both components are owned by vcsApp, defaultOrder is used to compare
+ * @param {ToolboxComponent|import("../buttonManager.js").ButtonComponent} compA
+ * @param {ToolboxComponent|import("../buttonManager.js").ButtonComponent} compB
+ * @param {string[]} [order] order of owners to sort by
+ * @returns {number}
+ */
+declare function sortByOwner(compA: ToolboxComponent | import("../buttonManager.js").ButtonComponent, compB: ToolboxComponent | import("../buttonManager.js").ButtonComponent, order?: string[] | undefined): number;
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<ToolboxComponent,ToolboxComponentOptions>} IToolboxManager
+ */
+/**
+ * @class ToolboxManager
+ * @description Manages a set of Toolbox Components
+ * @implements {IToolboxManager}
+ */
+declare class ToolboxManager implements IToolboxManager {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ToolboxComponent>}
+     */
+    added: import("@vcmap/core").VcsEvent<ToolboxComponent>;
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ToolboxComponent>}
+     */
+    removed: import("@vcmap/core").VcsEvent<ToolboxComponent>;
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    componentIds: Array<string>;
+    /**
+     * @type {Map<string, ToolboxComponent>}
+     * @private
+     */
+    private _toolboxGroups;
+    /**
+     * @type {symbol|string}
+     * @private
+     */
+    private _toolboxName;
+    /**
+     * @type {VcsEvent<string>}
+     */
+    toolboxNameChanged: VcsEvent<string>;
+    set toolboxName(arg: string | symbol);
+    get toolboxName(): string | symbol;
+    setDefaultToolboxName(): void;
+    /**
+     * @param {string} id
+     * @returns {ToolboxComponent}
+     */
+    get(id: string): ToolboxComponent;
+    /**
+     * @param {string} id
+     * @returns {boolean}
+     */
+    has(id: string): boolean;
+    /**
+     * removes a ToolboxComponent, Component will not be rendered anymore and will be destroyed.
+     * Add ToolboxComponent again to show the component again
+     * @param {string} id
+     */
+    remove(id: string): void;
+    /**
+     * adds a ToolboxComponent
+     * @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
+     * @param {string|symbol} owner pluginName or vcsAppSymbol
+     * @throws {Error} if a toolboxComponent with the same ID has already been added
+     * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
+     */
+    // @ts-ignore
+add(toolboxComponentOptions: SingleToolboxComponentOptions | SelectToolboxComponentOptions | GroupToolboxComponentOptions, owner: string | symbol): SingleToolboxComponent | SelectToolboxComponent | import("vue").ShallowReactive<GroupToolboxComponent>;
+    /**
+     * removes all {@link ToolboxComponent}s of a specific owner and fires removed Events
+     * @param {string|vcsAppSymbol} owner
+     */
+    removeOwner(owner: string | symbol): void;
+    /**
+     * removes all toolboxComponents and fires removed Events
+     */
+    clear(): void;
+    /**
+     * destroys the ToolboxManager;
+     */
+    destroy(): void;
+}
+import ButtonManager from '../buttonManager.js';
+import { VcsEvent } from '@vcmap/core';