@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/src/manager/contextMenu/contextMenuManager.js

@@ -0,0 +1,220 @@
+import { CesiumMap, BaseOLMap } from '@vcmap/core';
+import { unByKey } from 'ol/Observable.js';
+import { check } from '@vcsuite/check';
+import ContextMenuInteraction from './contextMenuInteraction.js';
+import { vcsAppSymbol } from '../../pluginHelper.js';
+import { validateAction } from '../../components/lists/VcsActionList.vue';
+import { WindowSlot } from '../window/windowManager.js';
+import { getFittedWindowPositionOptionsFromMapEvent } from '../window/windowHelper.js';
+import ContextMenuComponent, {
+  contextMenuWindowId,
+} from './ContextMenuComponent.vue';
+import { sortByOwner } from '../navbarManager.js';
+
+/**
+ * @typedef {Object} ContextMenuEventHandler
+ * @property {string|symbol} owner
+ * @property {function(import("@vcmap/core").InteractionEvent):Promise<Array<VcsAction>>|Array<VcsAction>} handler
+ */
+
+/**
+ * @param {import("@vcmap/core").VcsMap} map
+ * @param {function():void} clear
+ * @returns {function():void} - returns stop listener function.
+ */
+function setupViewpointChanged(map, clear) {
+  const currentViewpoint = map.getViewpointSync();
+  const postRenderHandler = () => {
+    if (!currentViewpoint.equals(map.getViewpointSync(), 0.001)) {
+      clear();
+    }
+  };
+
+  if (map instanceof CesiumMap) {
+    return map.getScene().postRender.addEventListener(postRenderHandler);
+  } else if (map instanceof BaseOLMap) {
+    const key = map.olMap.on('postrender', postRenderHandler);
+    return () => {
+      unByKey(key);
+    };
+  }
+  return () => {};
+}
+
+/**
+ * The context menu manager handles right click events in the current map and displays a
+ * context menu based on registered action providers.
+ * @class
+ */
+class ContextMenuManager {
+  /**
+   * @param {VcsUiApp} app
+   */
+  constructor(app) {
+    /**
+     * @type {VcsUiApp}
+     * @private
+     */
+    this._app = app;
+    /**
+     * @type {ContextMenuInteraction}
+     * @private
+     */
+    this._interaction = new ContextMenuInteraction(
+      this._handleRightClick.bind(this),
+      async () => {
+        this.clear();
+      },
+    );
+    /**
+     * @type {Array<ContextMenuEventHandler>}
+     * @private
+     */
+    this._eventHandlers = [];
+    /**
+     * @type {function():void|null}
+     * @private
+     */
+    this._interactionListener = null;
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [];
+  }
+
+  _ensureInteraction() {
+    if (!this._interactionListener) {
+      this._interactionListener =
+        this._app.maps.eventHandler.addPersistentInteraction(this._interaction);
+    }
+  }
+
+  _setupListeners() {
+    const clear = this.clear.bind(this);
+    this._listeners = [
+      this._app.layers.stateChanged.addEventListener(clear),
+      this._app.maps.mapActivated.addEventListener(clear),
+      setupViewpointChanged(this._app.maps.activeMap, clear),
+    ];
+  }
+
+  /**
+   * @param {import("@vcmap/core").InteractionEvent} event
+   * @private
+   */
+  async _handleRightClick(event) {
+    this.clear();
+    const actionArrays = await Promise.all(
+      this._eventHandlers.map(({ handler }) => handler(event)),
+    );
+    const actions = actionArrays
+      .filter((i) => Array.isArray(i))
+      .flatMap((i) => i)
+      .filter(validateAction);
+
+    if (actions.length > 0) {
+      const position = getFittedWindowPositionOptionsFromMapEvent(
+        event.windowPosition,
+        320,
+        actions.length * 32,
+        this._app.maps.target,
+      );
+      if (position.left) {
+        // ensure we nudge the window, so it does not trigger the default right click.
+        position.left += 1;
+      } else {
+        position.right += 1;
+      }
+      position.maxWidth = 320;
+      position.width = -1; // unset width magic. dont touch.
+
+      this._app.windowManager.add(
+        {
+          id: contextMenuWindowId,
+          component: ContextMenuComponent,
+          state: {
+            hideHeader: true,
+          },
+          props: {
+            actions,
+            showIcon: true,
+          },
+          position,
+          slow: WindowSlot.DETACHED,
+        },
+        vcsAppSymbol,
+      );
+
+      this._setupListeners();
+    }
+  }
+
+  /**
+   * 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 {string|symbol} owner
+   */
+  addEventHandler(handler, owner) {
+    check(handler, Function);
+    check(owner, [String, vcsAppSymbol]);
+
+    this._ensureInteraction();
+    this._eventHandlers.push({ owner, handler });
+    const order = [...this._app.plugins].map((p) => p.name);
+    this._eventHandlers.sort((a, b) => {
+      return sortByOwner(a.owner, b.owner, order);
+    });
+  }
+
+  /**
+   * Remove a single handler
+   * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<VcsAction>>|Array<VcsAction>} handler
+   */
+  removeHandler(handler) {
+    this._eventHandlers = this._eventHandlers.filter(
+      ({ handler: itemHandler }) => itemHandler !== handler,
+    );
+    if (this._eventHandlers.length === 0 && this._interactionListener) {
+      this._interactionListener();
+      this._interactionListener = null;
+    }
+  }
+
+  /**
+   * Remove all handlers associated with this owner
+   * @param {string|symbol} owner
+   */
+  removeOwner(owner) {
+    this._eventHandlers = this._eventHandlers.filter(
+      ({ owner: handlerOwner }) => handlerOwner !== owner,
+    );
+    if (this._eventHandlers.length === 0 && this._interactionListener) {
+      this._interactionListener();
+      this._interactionListener = null;
+    }
+  }
+
+  /**
+   * Clear any currently opened context menus
+   */
+  clear() {
+    this._listeners.forEach((cb) => {
+      cb();
+    });
+    this._listeners = [];
+    this._app.windowManager.remove(contextMenuWindowId);
+  }
+
+  destroy() {
+    this._interaction.destroy();
+    if (this._interactionListener) {
+      this._interactionListener();
+      this._interactionListener = null;
+    }
+    this._eventHandlers = [];
+  }
+}
+
+export default ContextMenuManager;

package/src/manager/navbarManager.js

@@ -1,20 +1,20 @@
 import { check } from '@vcsuite/check';
-import { ButtonManager } from './buttonManager.js';
+import ButtonManager, { sortByWeight } from './buttonManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 
 export const locationSymbol = Symbol('location');
 
 /**
  * sorts by owner and optionally plugin order
- * @param {ButtonComponent} a
- * @param {ButtonComponent} b
+ * @param {string | symbol} ownerA
+ * @param {string | symbol} ownerB
  * @param {string[]} [order] order of owners to sort by
  * @returns {number}
  */
-function sortByOwner(a, b, order = []) {
+export function sortByOwner(ownerA, ownerB, order = []) {
   const sorted = [vcsAppSymbol, ...order];
-  const indexA = sorted.indexOf(a.owner);
-  const indexB = sorted.indexOf(b.owner);
+  const indexA = sorted.indexOf(ownerA);
+  const indexB = sorted.indexOf(ownerB);
 
   if (indexA === indexB) {
     return 0;
@@ -35,19 +35,31 @@ function sortByOwner(a, b, order = []) {
  * @param {Array<ButtonComponent>} buttonComponents
  * @param {ButtonLocation} location Button render position
  * @param {string[]} [order] optional order to sort by (plugin names)
- * @param {function(a: ButtonComponent, b: ButtonComponent, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
+ * @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>}
  */
-export function getActionsByLocation(buttonComponents, location, order = [], compareFn = sortByOwner) {
+export function getActionsByLocation(
+  buttonComponents,
+  location,
+  order = [],
+  compareFn = (a, b) =>
+    sortByWeight(a.weight, b.weight) || sortByOwner(a.owner, b.owner, order),
+) {
   return [...buttonComponents]
-    .filter(b => b[locationSymbol] === location)
-    .sort((a, b) => compareFn(a, b, order))
-    .map(b => b.action);
+    .filter((b) => b[locationSymbol] === location)
+    .sort(compareFn)
+    .map((b) => b.action);
 }
 
 /**
  * Possible render positions of buttons in navbar from left to right
- * @enum
+ * @enum {number}
+ * @property {number} MAP - map buttons (2D, 3D, oblique)
+ * @property {number} CONTENT - content buttons (tree, category component view)
+ * @property {number} TOOL - tool buttons (toolbox, legend)
+ * @property {number} PROJECT - project buttons (project selector)
+ * @property {number} SHARE - share buttons rendered in dropdown menu (create link, print)
+ * @property {number} MENU - menu buttons rendered in dropdown menu (settings)
  */
 export const ButtonLocation = {
   MAP: 0,
@@ -63,7 +75,7 @@ export const ButtonLocation = {
  * @description Manages a set of Map Buttons in the Navbar
  * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
  */
-export class NavbarManager extends ButtonManager {
+class NavbarManager extends ButtonManager {
   /**
    * adds a buttonComponent
    * @param {ButtonComponentOptions} buttonComponentOptions
@@ -78,4 +90,26 @@ export class NavbarManager extends ButtonManager {
     buttonComponent[locationSymbol] = location;
     return 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, active = undefined) {
+    check(id, String);
+    if (this.has(id)) {
+      const { action } = this.get(id);
+      if (active !== undefined) {
+        if (action?.active !== active) {
+          action.callback();
+        }
+      } else if (action) {
+        action.callback();
+      }
+    }
+  }
 }
+
+export default NavbarManager;

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-if="orderedButtons.length > 0">
+    <v-menu
+      v-model="open"
+      @input="$emit('toggle', open)"
+      offset-y
+      :nudge-left="nudgeLeft"
+      z-index="0"
+    >
+      <template #activator="{ on, attrs }">
+        <VcsToolButton
+          class="vcs-toolbox-toggle-button"
+          width="48"
+          :icon="group.icon"
+          :disabled="group.disabled"
+          :tooltip="group.title"
+          :active="open || hasActiveAction"
+          :color="hasActiveAction ? 'primary' : ''"
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+        </VcsToolButton>
+      </template>
+
+      <v-toolbar
+        id="vcs-toolbox-toolbar--secondary"
+        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop"
+        :height="40"
+        width="fit-content"
+        dense
+      >
+        <v-toolbar-items class="w-full">
+          <div class="d-flex align-center justify-space-between w-full mx-1">
+            <VcsToolButton
+              v-for="{ id, action } in orderedButtons"
+              :key="id"
+              :tooltip="action.title"
+              :icon="action.icon"
+              :disabled="action.disabled"
+              :active="action.active"
+              @click="action.callback($event)"
+              v-bind="{ ...$attrs }"
+            />
+          </div>
+        </v-toolbar-items>
+      </v-toolbar>
+    </v-menu>
+  </div>
+</template>
+<style lang="scss">
+  .vcs-toolbox-2 {
+    .v-toolbar__content {
+      padding: 0;
+    }
+  }
+
+  .marginToTop {
+    margin-top: 3px;
+  }
+</style>
+<script>
+  import { computed, ref } from 'vue';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
+  import { getComponentsByOrder } from './toolboxManager.js';
+
+  /**
+   * @description
+   * A Toolbox Button rendering a menu dropdown with actions using {@link https://vuetifyjs.com/en/api/v-menu/|vuetify v-menu} and {@link VcsButton}.
+   * The button is rendered in primary color if at least one action is active.
+   * The button is rendered in basic color if menu is open and no action is active.
+   * @vue-prop {GroupToolboxComponent} group - A toolbox group of type 'group'.
+   * @vue-computed {Array<ButtonComponent>} buttons - Buttons of the group.
+   * @vue-computed {Array<ButtonComponent>} orderedButtons - Buttons of the group sorted by owner.
+   * @vue-computed {boolean} hasActiveAction - Whether the group has an active action.
+   * @vue-computed {number} nudgeLeft - offset of the dropdown toolbar to the left
+   */
+  export default {
+    name: 'ToolboxActionGroup',
+    components: {
+      VcsToolButton,
+      VMenu,
+      VIcon,
+      VToolbar,
+      VToolbarItems,
+    },
+    props: {
+      group: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const open = ref(false);
+
+      const buttons = computed(() => {
+        const { buttonManager } = props.group;
+        const buttonIds = ref(buttonManager.componentIds);
+        return buttonIds.value.map((id) => buttonManager.get(id));
+      });
+      const orderedButtons = computed(() =>
+        getComponentsByOrder(buttons.value),
+      );
+      const hasActiveAction = computed(() =>
+        orderedButtons.value.some((a) => a.action.active),
+      );
+
+      /**
+       * v-menu auto prop is not working as expected.
+       * Workaround using hardcoded button sizes and paddings
+       * @type {ComputedRef<number>}
+       */
+      const nudgeLeft = computed(() => {
+        const toolboxBtnWidth = 42 + 8; // with padding
+        const menuBtnWidth = 48;
+        return buttons.value.length * (toolboxBtnWidth / 2) - menuBtnWidth / 2;
+      });
+
+      return {
+        open,
+        orderedButtons,
+        nudgeLeft,
+        hasActiveAction,
+      };
+    },
+  };
+</script>

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    v-if="group.action"
+    :class="{ 'vcs-toolbox-action-select-button--active': open }"
+    style="width: fit-content"
+  >
+    <VcsToolButton
+      :key="group.action.tools[group.action.currentIndex].name"
+      :tooltip="group.action.tools[group.action.currentIndex].title"
+      :icon="group.action.tools[group.action.currentIndex].icon"
+      :active="group.action.active"
+      :disabled="group.action.disabled"
+      @click.stop="group.action.callback($event)"
+      v-bind="{ ...$attrs }"
+      class="vcs-toolbox-action-selected"
+      :min-width="32"
+      :width="32"
+    />
+    <v-menu
+      v-model="open"
+      @input="$emit('toggle', open)"
+      offset-y
+      :nudge-left="nudgeLeft"
+      z-index="0"
+    >
+      <template #activator="{ on, attrs }">
+        <VcsToolButton
+          :tooltip="group.action.title"
+          :disabled="group.action.disabled"
+          v-bind="attrs"
+          v-on="on"
+          class="vcs-toolbox-action-select"
+          :min-width="16"
+          :width="16"
+        >
+          <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+        </VcsToolButton>
+      </template>
+
+      <v-toolbar
+        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop justify-center"
+        :height="40"
+        width="fit-content"
+        dense
+      >
+        <v-toolbar-items class="w-full">
+          <div class="d-flex align-center justify-space-between w-full mx-1">
+            <VcsToolButton
+              v-for="(item, index) in group.action.tools"
+              :key="`${item.name}-${index}`"
+              :tooltip="item.title"
+              :icon="item.icon"
+              :disabled="item.disabled"
+              @click="group.action.selected(index)"
+              v-bind="{ ...$attrs }"
+            />
+          </div>
+        </v-toolbar-items>
+      </v-toolbar>
+    </v-menu>
+  </div>
+</template>
+<style lang="scss">
+  @import '../../styles/shades.scss';
+
+  .vcs-toolbox-action-selected > .v-btn.vcs-button--large {
+    max-width: 40px;
+  }
+
+  .vcs-toolbox-action-select > .v-btn.vcs-button--large {
+    max-width: 8px;
+  }
+
+  .vcs-toolbox-action-select-button--active {
+    //border: 2px solid var(--v-shades-base);
+    border-radius: 4px;
+  }
+  .theme--light .vcs-toolbox-action-select-button--active {
+    background: map-get($shades, 'white');
+  }
+  .theme--dark .vcs-toolbox-action-select-button--active {
+    background: map-get($shades, 'black');
+  }
+
+  .vcs-toolbox-2 {
+    .v-toolbar__content {
+      padding: 0;
+    }
+  }
+
+  .marginToTop {
+    margin-top: 3px;
+  }
+</style>
+<script>
+  import { ref, computed } from 'vue';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
+
+  /**
+   * @description
+   * A dynamic Toolbox Button rendering a selected item and a dropdown to select an item using {@link https://vuetifyjs.com/en/api/v-menu/|vuetify v-menu} and {@link VcsButton}.
+   * @vue-prop {SelectToolboxComponent} group - A toolbox group of type 'select'.
+   * @vue-computed {number} nudgeLeft - offset of the dropdown toolbar to the left
+   */
+  export default {
+    name: 'ToolboxActionSelect',
+    components: {
+      VcsToolButton,
+      VMenu,
+      VIcon,
+      VToolbar,
+      VToolbarItems,
+    },
+    props: {
+      group: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const open = ref(false);
+
+      /**
+       * v-menu auto prop is not working as expected.
+       * Workaround using hardcoded button sizes and paddings
+       * @type {ComputedRef<number>}
+       */
+      const nudgeLeft = computed(() => {
+        const toolboxBtnWidth = 42 + 8; // with padding
+        const menuBtnWidth = 16;
+        return (
+          props.group.action.tools.length * (toolboxBtnWidth / 2) +
+          menuBtnWidth / 2
+        );
+      });
+
+      return {
+        open,
+        nudgeLeft,
+      };
+    },
+  };
+</script>