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

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,13 +35,13 @@ 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);
 }
 

package/src/manager/toolbox/ToolboxManager.vue

@@ -49,7 +49,7 @@
 
 <script>
 
-import { inject, ref, computed, watch, onUnmounted } from '@vue/composition-api';
+import { inject, ref, computed, watch, onUnmounted } from 'vue';
 import ToolboxGroupComponent from './ToolboxGroupComponent.vue';
 import {ButtonLocation, vcsAppSymbol} from '@vcmap/ui';
 
@@ -143,7 +143,7 @@ export default {
       actionGroups,
       width,
       getPosition,
-      groupId: null,
+      groupId: ref(null),
       toggleGroup(groupId) {
         if (this.groupId === groupId) {
           this.groupId = null;

package/src/manager/toolbox/toolboxManager.js

@@ -1,9 +1,8 @@
 /* eslint-disable import/prefer-default-export */
 import { VcsEvent } from '@vcmap/core';
-import { reactive } from '@vue/composition-api';
 import { check, checkMaybe } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
-import { ButtonManager } from '../buttonManager.js';
+import ButtonManager from '../buttonManager.js';
 
 /**
  * @typedef ToolboxGroupComponentOptions
@@ -24,6 +23,11 @@ import { ButtonManager } from '../buttonManager.js';
  * @type {Array<ToolboxGroupComponentOptions>}
  */
 const defaultGroups = [
+  {
+    id: 'featureInfo',
+    icon: '$vcsInfo',
+    title: 'Feature Info',
+  },
   {
     id: 'select',
     icon: '$vcsPen',
@@ -70,7 +74,7 @@ export class ToolboxManager {
      * reactive ordered array of ids,
      * @type {Array<string>}
      */
-    this.componentIds = reactive([]);
+    this.componentIds = [];
 
     /**
      * @type {Map<string, ToolboxGroupComponent>}

package/src/manager/window/WindowComponent.vue

@@ -41,7 +41,7 @@
 <script>
   import {
     onMounted, onUnmounted, computed, ref, nextTick,
-  } from '@vue/composition-api';
+  } from 'vue';
   import { fromEvent } from 'rxjs';
   import { switchMap, take, map, tap } from 'rxjs/operators';
   import { WindowSlot } from './windowManager.js';

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="$vuetify.breakpoint.xs ? 'win-container-mobile' : 'unset'">
+  <div
+    :class="$vuetify.breakpoint.xs ? 'win-container-mobile' : 'unset'"
+  >
     <WindowComponent
       v-for="(id, zIndex) in componentIds"
       :key="id"
@@ -46,7 +48,7 @@
 </style>
 
 <script>
-  import { inject } from '@vue/composition-api';
+  import { inject, ref } from 'vue';
 
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
@@ -109,7 +111,7 @@
       };
 
       return {
-        componentIds,
+        componentIds: ref(componentIds),
         getComponent: id => windowManager.get(id).component,
         getHeaderComponent: id => windowManager.get(id).headerComponent || WindowComponentHeader,
         getStyles,

package/src/manager/window/windowManager.js

@@ -1,4 +1,4 @@
-import { reactive, ref } from '@vue/composition-api';
+import { reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
@@ -72,8 +72,8 @@ export const WindowPositions = {
 /**
  * @typedef WindowComponentOptions
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
- * @property {VueComponent} component Main Component which is shown below the header.
- * @property {VueComponent} [headerComponent] Replaces the Header Component.
+ * @property {import("vue").Component} component Main Component which is shown below the header.
+ * @property {import("vue").Component} [headerComponent] Replaces the Header Component.
  * @property {WindowPositionOptions} [position] Will be ignored if WindowSlot !== DETACHED, can be given otherwise or default will be used
  * @property {WindowState} [state]
  * @property {WindowSlot} [slot] If WindowSlot is not detached the position will be ignored
@@ -94,8 +94,8 @@ export const WindowPositions = {
 /**
  * @typedef WindowComponent
  * @property {string} id
- * @property {VueComponent} component
- * @property {VueComponent} [headerComponent]
+ * @property {import("vue").Component} component
+ * @property {import("vue").Component} [headerComponent]
  * @property {WindowPosition} position
  * @property {WindowState} state
  * @property {Ref<UnwrapRef<WindowSlot>>} slot
@@ -150,20 +150,124 @@ export function windowPositionFromOptions(windowPositionOptions, windowPosition
   return Object.assign(windowPosition, result);
 }
 
+/**
+ * @enum {number}
+ * @property {number} TOP_LEFT
+ * @property {number} TOP_RIGHT
+ * @property {number} BOTTOM_LEFT
+ * @property {number} BOTTOM_RIGHT
+ */
+export const WindowAlignment = {
+  TOP_LEFT: 1,
+  TOP_RIGHT: 2,
+  BOTTOM_LEFT: 3,
+  BOTTOM_RIGHT: 4,
+};
+
+/**
+ * @returns {HTMLElement|null}
+ */
+function getActiveMapElement() {
+  const mapElements = document.getElementsByClassName('mapElement');
+  for (let i = 0; i < mapElements.length; i++) {
+    const element = mapElements.item(i);
+    if (element.style.display !== 'none') {
+      return element;
+    }
+  }
+  return null;
+}
+
 /**
  * WindowPositionOptions from client position relative to a HTMLElement
- * @param {number} x
- * @param {number} y
- * @param {string|HTMLElement} [element='mapElement']
+ * @param {number} x - client pixel position
+ * @param {number} y - client pixel position
+ * @param {HTMLElement} [element='mapElement'] - the element. if none is provided, the currently active mapElement will be taken
+ * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
  * @returns {WindowPositionOptions}
  */
-export function getWindowPositionOptions(x, y, element = 'mapElement') {
-  let mapElement = element;
-  if (typeof mapElement === 'string') {
-    mapElement = document.getElementsByClassName(element).item(0);
+export function getWindowPositionOptions(x, y, element, alignment = WindowAlignment.TOP_LEFT) {
+  const mapElement = element ?? getActiveMapElement();
+  if (!mapElement) {
+    return { left: x, top: y };
   }
+
+  const { left, top, width, height } = mapElement.getBoundingClientRect();
+  if (alignment === WindowAlignment.TOP_LEFT) {
+    return { left: x - left, top: y - top };
+  } else if (alignment === WindowAlignment.TOP_RIGHT) {
+    return { right: (left + width) - x, top: y - top };
+  } else if (alignment === WindowAlignment.BOTTOM_LEFT) {
+    return { left: x - left, bottom: (height + top) - y };
+  }
+  return { right: (left + width) - x, bottom: (height + top) - y };
+}
+
+/**
+ * Get window position options based on a pixel in the map
+ * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {WindowAlignment} [alignment]
+ * @returns {WindowPositionOptions}
+ */
+export function getWindowPositionOptionsFromMapEvent(windowPosition, alignment) {
+  const mapElement = getActiveMapElement();
+  if (!mapElement) {
+    return { left: windowPosition.x, top: windowPosition.y };
+  }
+
+  const { left, top } = mapElement.getBoundingClientRect();
+  return getWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, mapElement, alignment);
+}
+
+
+/**
+ * Fits a window aligned top left so it fits into the parent. this will change the alignment to be bottom or right depending
+ * on if the window would not fit into the parent.
+ * @param {number} x - client pixel position
+ * @param {number} y - client pixel position
+ * @param {number} width - window width to fit
+ * @param {number} height - window height to fit
+ * @param {HTMLElement} [element='mapElement'] - the element. if none is provided, the currently active mapElement will be taken
+ * @returns {WindowPositionOptions}
+ */
+export function getFittedWindowPositionOptions(x, y, width, height, element) {
+  const mapElement = element ?? getActiveMapElement();
+  if (!mapElement) {
+    return { left: x, top: y };
+  }
+
+  const { width: parentWidth, height: parentHeight } = mapElement.getBoundingClientRect();
+  const bottom = y + height > parentHeight;
+  const right = x + width > parentWidth;
+  let alignment = WindowAlignment.TOP_LEFT;
+  if (bottom) {
+    if (right) {
+      alignment = WindowAlignment.BOTTOM_RIGHT;
+    } else {
+      alignment = WindowAlignment.BOTTOM_LEFT;
+    }
+  } else if (right) {
+    alignment = WindowAlignment.TOP_RIGHT;
+  }
+  return getWindowPositionOptions(x, y, mapElement, alignment);
+}
+
+/**
+ * Fits a window aligned top left so it fits into currently active map. this will change the alignment to be bottom or right depending
+ * on if the window would not fit into active map element.
+ * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {number} width
+ * @param {number} height
+ * @returns {WindowPositionOptions}
+ */
+export function getFittedWindowPositionOptionsFromMapEvent(windowPosition, width, height) {
+  const mapElement = getActiveMapElement();
+  if (!mapElement) {
+    return { left: windowPosition.x, top: windowPosition.y };
+  }
+
   const { left, top } = mapElement.getBoundingClientRect();
-  return { left: x - left, top: y - top };
+  return getFittedWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, width, height, mapElement);
 }
 
 /**
@@ -185,7 +289,7 @@ export class WindowManager {
      * reactive ordered array of ids,
      * @type {Array<string>}
      */
-    this.componentIds = reactive([]);
+    this.componentIds = [];
 
     /**
      * @type {Map<string, WindowComponent>}

package/src/navigation/mapNavigation.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import { computed, inject, ref, onUnmounted } from '@vue/composition-api';
+  import { computed, inject, ref, reactive, onUnmounted } from 'vue';
   import { ObliqueMap, CesiumMap, OpenlayersMap } from '@vcmap/core';
   import { unByKey } from 'ol/Observable.js';
   import { createOverviewMapAction } from '../actions/actionHelper.js';
@@ -119,7 +119,7 @@
       VcsCompass,
     },
     setup() {
-      /** @type {VcsApp} */
+      /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       const viewMode = ref(OrientationToolsViewMode.TWO_D);
       const headingRef = ref(0);
@@ -179,9 +179,7 @@
         isOblique: computed(() => viewMode.value === OrientationToolsViewMode.OBLIQUE),
         zoomIn() { zoom(app.maps.activeMap); }, // debounce?
         zoomOut() { zoom(app.maps.activeMap, true); },
-        left: () => {},
-        right: () => {},
-        overviewAction: ref(action),
+        overviewAction: reactive(action),
       };
     },
   };

package/src/navigation/overviewMap.js

@@ -20,7 +20,7 @@ import { unByKey } from 'ol/Observable.js';
 import VectorSource from 'ol/source/Vector.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
-import { vuetify } from '../vuePlugins/vuetify.js';
+import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
 
@@ -99,8 +99,8 @@ class OverviewMap {
      */
     this._obliqueSelectedImageLayer = null;
 
-    const { primary, accent } = vuetify.userPreset.theme.themes.light;
-    const fillColor = Color.fromCssColorString(accent);
+    const primary = app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor;
+    const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
      * @type {VectorStyleItem}
@@ -199,7 +199,7 @@ class OverviewMap {
      * @type {Array<function():void>}
      * @private
      */
-    this._layerCollectionListener = [
+    this._collectionListeners = [
       this._app.maps.layerCollection.added.addEventListener((layer) => {
         if (layer.properties.showInOverviewMap) {
           const clone = deserializeLayer(this._app, layer.toJSON());
@@ -219,6 +219,16 @@ class OverviewMap {
           this._map.layerCollection.remove(clone);
         }
       }),
+      this._app.uiConfig.added.addEventListener((item) => {
+        if (item?.name === 'primaryColor') {
+          this._setObliqueColor(item.value);
+        }
+      }),
+      this._app.uiConfig.removed.addEventListener((item) => {
+        if (item?.name === 'primaryColor') {
+          this._setObliqueColor(defaultPrimaryColor);
+        }
+      }),
     ];
   }
 
@@ -254,6 +264,18 @@ class OverviewMap {
     return this._mapClicked;
   }
 
+  /**
+   * @param {string} color
+   * @private
+   */
+  _setObliqueColor(color) {
+    this.obliqueUnselectedStyle?.stroke?.setColor(color);
+    this.obliqueSelectedStyle?.stroke?.setColor(color);
+    this._obliqueTileLayer?.forceRedraw?.();
+    this._obliqueImageLayer?.forceRedraw?.();
+    this._obliqueSelectedImageLayer?.forceRedraw?.();
+  }
+
   /**
    * @private
    */
@@ -574,7 +596,8 @@ class OverviewMap {
 
   destroy() {
     this._clearListeners();
-    this._layerCollectionListener.forEach(cb => cb());
+    this._collectionListeners.forEach(cb => cb());
+    this._collectionListeners = [];
     if (this._mapPointerListener) {
       this._mapPointerListener();
       this._mapPointerListener = null;

package/src/navigation/vcsCompass.vue

@@ -28,7 +28,7 @@
 
 
 <script>
-  import { computed, onUnmounted, ref } from '@vue/composition-api';
+  import { computed, onUnmounted, ref } from 'vue';
 
   import { fromEvent, merge, of, Subject } from 'rxjs';
   import { takeUntil, tap } from 'rxjs/operators';

package/src/setup.js

@@ -1,11 +1,9 @@
 import Vue from 'vue';
-import VueCompositionAPI from '@vue/composition-api';
 
 // eslint-disable-next-line no-unused-vars
 import * as core from '@vcmap/core';
 // pull in entire core for vcsClassRegistry
 
 Vue.config.productionTip = false;
-Vue.use(VueCompositionAPI);
 
 window.CESIUM_BASE_URL = '/node_modules/@vcmap/cesium/Source/';