@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/src/manager/contextMenu/contextMenuManager.js

@@ -0,0 +1,197 @@
+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 { getFittedWindowPositionOptionsFromMapEvent, WindowSlot } from '../window/windowManager.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);
+      if (position.left) { // ensure we nudge the window, so it does not trigger the default right click.
+        position.left += 1;
+      } else {
+        position.right += 1;
+      }
+
+      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 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,19 @@ 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(ownerA:string, ownerB:string, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
  * @returns {Array<VcsAction>}
  */
 export function getActionsByLocation(buttonComponents, location, order = [], compareFn = sortByOwner) {
   return [...buttonComponents]
     .filter(b => b[locationSymbol] === location)
-    .sort((a, b) => compareFn(a, b, order))
+    .sort((a, b) => compareFn(a.owner, b.owner, order))
     .map(b => b.action);
 }
 
 /**
  * Possible render positions of buttons in navbar from left to right
- * @enum
+ * @enum {number}
  */
 export const ButtonLocation = {
   MAP: 0,

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -0,0 +1,118 @@
+<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 }">
+        <VcsButton
+          class="vcs-toolbox-toogle-button"
+          width="48"
+          :icon="group.icon"
+          :tooltip="group.title"
+          :active="open || hasActiveAction"
+          :color="hasActiveAction ? 'primary' : 'basic'"
+          v-bind="attrs"
+          v-on="on"
+          large
+        >
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+        </VcsButton>
+      </template>
+
+      <v-toolbar
+        id="vcs-toolbox-toolbar--secondary"
+        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop"
+        :height="40"
+        width="fit-content"
+        color="basic"
+        dense
+      >
+        <v-toolbar-items class="w-full">
+          <div class="d-flex align-center justify-space-between w-full mx-1">
+            <VcsButton
+              v-for="({id, action}) in orderedButtons"
+              :key="id"
+              :tooltip="action.title"
+              :icon="action.icon"
+              :active="action.active"
+              @click="action.callback($event)"
+              v-bind="{...$attrs}"
+              large
+            />
+          </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 VcsButton from '../../components/buttons/VcsButton.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: { VcsButton },
+    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,128 @@
+<template>
+  <div
+    v-if="group.action"
+    :class="{ 'vcs-toolbox-action-select-button--active': open }"
+    style="width:fit-content"
+  >
+    <VcsButton
+      :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"
+      @click.stop="group.action.callback($event)"
+      v-bind="{...$attrs}"
+      class="vcs-toolbox-action-selected"
+      :min-width="32"
+      :width="32"
+      large
+    />
+    <v-menu
+      v-model="open"
+      @input="$emit('toggle', open)"
+      offset-y
+      :nudge-left="nudgeLeft"
+      z-index="0"
+    >
+      <template #activator="{ on, attrs }">
+        <VcsButton
+          :tooltip="group.action.title"
+          v-bind="attrs"
+          v-on="on"
+          class="vcs-toolbox-action-select"
+          :min-width="16"
+          :width="16"
+          large
+        >
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+        </VcsButton>
+      </template>
+
+      <v-toolbar
+        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop justify-center"
+        :height="40"
+        width="fit-content"
+        color="basic"
+        dense
+      >
+        <v-toolbar-items class="w-full">
+          <div class="d-flex align-center justify-space-between w-full mx-1">
+            <VcsButton
+              v-for="(item, index) in group.action.tools"
+              :key="`${item.name}-${index}`"
+              :tooltip="item.title"
+              :icon="item.icon"
+              @click="group.action.selected(index)"
+              v-bind="{...$attrs}"
+              large
+            />
+          </div>
+        </v-toolbar-items>
+      </v-toolbar>
+    </v-menu>
+  </div>
+</template>
+<style lang="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-basic-base);
+  border-radius: 5px;
+  background: var(--v-basic-base);
+}
+
+.vcs-toolbox-2 {
+  .v-toolbar__content {
+    padding: 0;
+  }
+}
+
+.marginToTop {
+  margin-top: 3px;
+}
+</style>
+<script>
+  import { ref, computed } from 'vue';
+  import VcsButton from '../../components/buttons/VcsButton.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: { VcsButton },
+    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>