@vcmap/ui 5.0.0-rc.17 → 5.0.0-rc.20

package/src/manager/window/WindowComponent.vue

@@ -5,14 +5,18 @@
     @click="clicked"
     @dragstart="dragStart"
     @dragend="dragEnd"
-    :draggable="isDynamic"
+    :draggable="isDraggable"
     :class="{
       'rounded': !isDocked,
-      'marginToTop': isDocked
+      'marginToTop': isDocked,
+      'rounded-br': isDynamicLeft,
+      'rounded-bl': isDynamicRight,
     }"
   >
     <div
       v-if="!windowState.hideHeader"
+      @mousedown="mousedown"
+      @mouseup="isDraggable = false"
       class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
@@ -23,7 +27,7 @@
     </div>
     <v-divider />
     <div
-      class="overflow-x-hidden"
+      class="overflow-x-hidden mb-1"
     >
       <slot />
     </div>
@@ -40,7 +44,7 @@
 
 <script>
   import {
-    computed, inject, provide,
+    computed, inject, provide, ref,
   } from 'vue';
   import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
@@ -86,12 +90,30 @@
 
       const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
       const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
+      const isDockedLeft = computed(() => {
+        return props.slotWindow === WindowSlot.STATIC || props.slotWindow === WindowSlot.DYNAMIC_LEFT;
+      });
+      const isDockedRight = computed(() => props.slotWindow === WindowSlot.DYNAMIC_RIGHT);
+      const isDraggable = ref(false);
       /**
        * @param {PointerEvent} e
        */
       const clicked = (e) => {
         emit('click', e);
       };
+      /**
+       * Sets window as draggable on mousedown on header.
+       * Stops bubbling of header action buttons.
+       * @param {MouseEvent} e
+       */
+      const mousedown = (e) => {
+        if (e.target.closest('button')) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        isDraggable.value = isDynamic.value;
+      };
       /**
        * @type {DragEvent}
        */
@@ -100,7 +122,16 @@
        * @param {DragEvent} e
        */
       const dragStart = (e) => {
+        if (!isDraggable.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
         startEvent = e;
+        // set mouse cursor to move
+        e.dataTransfer.effectAllowed = 'move';
+        const preventDefaultDragover = dragOverEvent => dragOverEvent.preventDefault();
+        e.target.parentElement.ondragover = preventDefaultDragover;
+        app.maps.target.ondragover = preventDefaultDragover;
       };
       /**
        * @param {DragEvent} endEvent
@@ -112,14 +143,21 @@
         };
         emit('moved', movement);
         startEvent = null;
+        isDraggable.value = false;
+        endEvent.target.parentElement.ondragover = null;
+        app.maps.target.ondragover = null;
       };
 
       return {
         isDynamic,
         isDocked,
+        isDynamicLeft: isDockedLeft,
+        isDynamicRight: isDockedRight,
+        isDraggable,
         clicked,
         dragStart,
         dragEnd,
+        mousedown,
       };
     },
   };

package/src/manager/window/WindowComponentHeader.vue

@@ -18,7 +18,7 @@
       <template v-if="windowState.headerActions?.length > 0">
         <VcsActionButtonList
           :actions="windowState.headerActions"
-          :overflow-count="windowState.headerActionsOverflowCount ?? 3"
+          :overflow-count="windowState.headerActionsOverflow ?? 3"
           small
         />
         <v-divider

package/src/manager/window/windowHelper.js

@@ -70,7 +70,7 @@ export function getWindowPositionOptions(x, y, target, alignment = WindowAlignme
 
 /**
  * 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 {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  * @param {WindowAlignment} [alignment]
  * @returns {WindowPositionOptions}
@@ -121,7 +121,7 @@ export function getFittedWindowPositionOptions(x, y, width, height, target) {
 /**
  * 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 {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
  * @param {number} width
  * @param {number} height
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
@@ -251,15 +251,6 @@ export function moveWindow(id, translation, windowManager, targetSize) {
   if (windowPositionOptions.right !== undefined) {
     windowPositionOptions.right -= translation.dx;
   }
-  // clear size restrictions
-  if (position.maxHeight === WindowPositions.TOP_RIGHT.maxHeight &&
-    slot.value === WindowSlot.DYNAMIC_RIGHT) {
-    windowPositionOptions.maxHeight = 'unset';
-  }
-  if (position.maxWidth === WindowPositions.TOP_LEFT.maxWidth &&
-    slot.value === WindowSlot.DYNAMIC_LEFT) {
-    windowPositionOptions.maxWidth = 'unset';
-  }
   const updatedPosition = updateWindowPosition(position, windowPositionOptions, targetSize);
   windowManager.setWindowPositionOptions(id, updatedPosition);
 }
@@ -320,6 +311,11 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
   if (windowPositionOptions.maxHeight !== undefined) {
     clippedPosition.maxHeight = Math.min(windowPositionOptions.maxHeight, targetHeight);
   }
+  // max width of a top left 2 window (active static window)
+  const topLeft2 = posToNumber(WindowPositions.TOP_LEFT2.left, 'left', targetSize);
+  if (clippedPosition.left === topLeft2) {
+    clippedPosition.maxWidth = Math.min(clippedPosition.maxWidth - topLeft2, targetWidth);
+  }
 
   return clippedPosition;
 }

package/src/manager/window/windowManager.js

@@ -62,16 +62,14 @@ export const WindowPositions = {
   TOP_LEFT: {
     left: '0px',
     top: '0px',
-    maxWidth: '320px',
   },
   TOP_LEFT2: {
-    left: '320px',
+    left: '322px', // 2px space
     top: '0px',
   },
   TOP_RIGHT: {
     right: '0px',
     top: '0px',
-    maxHeight: '70%',
   },
   DETACHED: {
     left: '200px',
@@ -120,7 +118,7 @@ export function isSlotPosition(windowPosition) {
  * @property {string} [headerTitle]
  * @property {string} [headerIcon]
  * @property {Array<VcsAction>} [headerActions]
- * @property {number} [headerActionsOverflowCount]
+ * @property {number} [headerActionsOverflow]
  * @property {string} [infoUrl] An optional url referencing help or further information on the window's content.
  * @property {boolean} [dockable] Auto derived from hidePin, current slot, current position and initial position.
  * @property {Object<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
@@ -206,7 +204,7 @@ export function windowPositionFromOptions(windowPositionOptions, windowPosition
 /**
  * Sets a position on a component. Updates dockable state.
  * @param {WindowComponent} windowComponent
- * @param {WindowComponentOptions} windowPositionOptions
+ * @param {WindowPositionOptions} windowPositionOptions
  */
 function setWindowPosition(windowComponent, windowPositionOptions) {
   const windowPosition = windowPositionFromOptions(windowPositionOptions, windowComponent.position);
@@ -309,9 +307,15 @@ class WindowManager {
       const staticWindow = this._findWindowBySlot(WindowSlot.STATIC);
       const dynamicWindowLeft = this._findWindowBySlot(WindowSlot.DYNAMIC_LEFT);
       if (staticWindow && dynamicWindowLeft) {
-        this.setWindowPositionOptions(dynamicWindowLeft.id, WindowPositions.TOP_LEFT2);
+        this.setWindowPositionOptions(
+          dynamicWindowLeft.id,
+          { ...dynamicWindowLeft.position, ...WindowPositions.TOP_LEFT2 },
+        );
       } else if (!staticWindow && dynamicWindowLeft) {
-        this.setWindowPositionOptions(dynamicWindowLeft.id, WindowPositions.TOP_LEFT);
+        this.setWindowPositionOptions(
+          dynamicWindowLeft.id,
+          { ...dynamicWindowLeft.position, ...WindowPositions.TOP_LEFT },
+        );
       }
     }
   }
@@ -333,18 +337,18 @@ class WindowManager {
    */
   _getPositionOptionsForSlot(slot, position) {
     if (slot === WindowSlot.STATIC) {
-      return WindowPositions.TOP_LEFT;
+      return { ...WindowPositions.TOP_LEFT, maxWidth: '320px' };
     }
     if (slot === WindowSlot.DYNAMIC_LEFT) {
       const windowAtStatic = this._findWindowBySlot(WindowSlot.STATIC);
       if (windowAtStatic) {
-        return WindowPositions.TOP_LEFT2;
+        return { ...position, ...WindowPositions.TOP_LEFT2 };
       } else {
-        return WindowPositions.TOP_LEFT;
+        return { ...position, ...WindowPositions.TOP_LEFT };
       }
     }
     if (slot === WindowSlot.DYNAMIC_RIGHT) {
-      return WindowPositions.TOP_RIGHT;
+      return { ...position, ...WindowPositions.TOP_RIGHT };
     }
     return position || WindowPositions.DETACHED;
   }

package/src/navigation/mapNavCompass.vue

@@ -8,7 +8,7 @@
         d="M4,0,8,13H0Z"
         transform="translate(1)"
         fill="currentColor"
-        @click="emit(0)"
+        @click="emit($event, 0)"
       />
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
@@ -17,7 +17,7 @@
         d="M4,0,8,13H0Z"
         transform="translate(9 58) rotate(180)"
         fill="rgba(88,88,88,0.51)"
-        @click="emit(180)"
+        @click="emit($event, 180)"
       />
     </g>
     <g id="Group_1653" data-name="Group 1653" transform="translate(0 33) rotate(-90)">
@@ -27,7 +27,7 @@
         data-name="Polygon 14"
         d="M4,0,8,13H0Z"
         fill="rgba(88,88,88,0.51)"
-        @click="emit(270)"
+        @click="emit($event, 270)"
       />
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
@@ -36,7 +36,7 @@
         d="M4,0,8,13H0Z"
         transform="translate(8 58) rotate(180)"
         fill="rgba(88,88,88,0.51)"
-        @click="emit(90)"
+        @click="emit($event, 90)"
       />
     </g>
     <g id="Group_1672" data-name="Group 1672" transform="translate(1)" v-if="!hideTicks">
@@ -143,19 +143,25 @@
       },
     },
     methods: {
-      emit(event) {
+      emit(event, dir) {
         if (this.canEmit) {
-          this.$emit('direction-click', event);
+          event.preventDefault();
+          event.stopPropagation();
+          this.$emit('direction-click', dir);
         }
       },
     },
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   svg {
     width: 85%;
     height: 85%;
     margin: 7.5%;
   }
+
+  svg path:hover {
+    fill: var(--v-base-lighten5) !important;
+  }
 </style>

package/src/navigation/mapNavigation.vue

@@ -23,6 +23,14 @@
       <v-row justify="center" v-if="is3D && $vuetify.breakpoint.mdAndUp">
         <TiltSlider v-model="tilt" />
       </v-row>
+      <v-row justify="center">
+        <OrientationToolsButton
+          v-if="homeAction.icon"
+          :icon="homeAction.icon"
+          :tooltip="homeAction.title"
+          @click.stop="homeAction.callback($event)"
+        />
+      </v-row>
       <v-row justify="center">
         <OrientationToolsButton
           :icon="overviewAction.icon"
@@ -36,10 +44,12 @@
 </template>
 
 <script>
-  import { computed, inject, ref, reactive, onUnmounted } from 'vue';
+  import {
+    computed, inject, ref, reactive, onUnmounted,
+  } from 'vue';
   import { ObliqueMap, CesiumMap } from '@vcmap/core';
   import { VContainer, VRow } from 'vuetify/lib';
-  import { createOverviewMapAction } from '../actions/actionHelper.js';
+  import { createGoToViewpointAction, createOverviewMapAction } from '../actions/actionHelper.js';
   import { getWindowComponentOptions } from './overviewMap.js';
   import VcsCompass from './vcsCompass.vue';
   import VcsZoomButton from './vcsZoomButton.vue';
@@ -47,6 +57,53 @@
   import ObliqueRotation from './obliqueRotation.vue';
   import OrientationToolsButton from './orientationToolsButton.vue';
 
+  /**
+   * Creates a go-to viewpoint action from a startingViewpointName defined in a context
+   * @param {VcsUiApp} app
+   * @returns {{action: import("vue").Reactive<{}>, destroy: function():void}}
+   */
+  function setupHomeButton(app) {
+    const initialAction = { icon: undefined, title: undefined, active: undefined, callback: undefined };
+    const action = reactive({ ...initialAction });
+    /**
+     * Gets the starting viewpoint of the last added context, where a startingViewpointName was defined
+     * and sets it on the home button action.
+     */
+    const updateStartingViewpoint = () => {
+      let viewpoint = null;
+      for (let idx = app.contexts.length - 1; idx >= 0; idx--) {
+        const { startingViewpointName } = app.contexts[idx].config;
+        if (startingViewpointName && app.viewpoints.hasKey(startingViewpointName)) {
+          viewpoint = app.viewpoints.getByKey(startingViewpointName);
+          break;
+        }
+      }
+      if (!viewpoint) {
+        Object.assign(action, { ...initialAction });
+      } else {
+        Object.assign(action, createGoToViewpointAction(
+          {
+            name: 'home-action',
+            title: 'navigation.homeButton',
+            icon: '$vcsHomePoint',
+          },
+          viewpoint,
+          app.viewpoints,
+          app.maps,
+        ));
+      }
+    };
+
+    const listener = [
+      app.contextAdded.addEventListener(updateStartingViewpoint),
+      app.contextRemoved.addEventListener(updateStartingViewpoint),
+    ];
+
+    const destroy = () => { listener.forEach(cb => cb()); };
+
+    return { action, destroy };
+  }
+
   /**
    * @enum {string}
    */
@@ -143,11 +200,14 @@
         app.windowManager,
       );
 
+      const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
+
       onUnmounted(() => {
         if (destroy) {
           destroy();
         }
         postRenderHandler();
+        homeDestroy();
       });
 
       return {
@@ -159,6 +219,7 @@
         zoomIn() { zoom(app.maps.activeMap); }, // debounce?
         zoomOut() { zoom(app.maps.activeMap, true); },
         overviewAction: reactive(action),
+        homeAction,
       };
     },
   };
@@ -168,7 +229,7 @@
   .nav-container {
     position: absolute;
     right: 2rem;
-    bottom: 2rem;
+    bottom: 1rem;
     width: unset;
     &.mobile{
       top: 1rem;
@@ -178,7 +239,8 @@
   }
   .nav-container > {
     .row {
-      margin-bottom: 15px;
+      margin-top: 15px;
+      margin-bottom: 0;
     }
   }
 </style>

package/src/navigation/orientationToolsButton.vue

@@ -5,7 +5,7 @@
   >
     <template #activator="{ on, attrs }">
       <v-card
-        elevation="2"
+        elevation="0"
         class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
         v-bind="{ ...$attrs, ...attrs }"
         v-on="{ ...$listeners, ...on }"

package/src/navigation/overviewMap.js

@@ -14,9 +14,10 @@ import {
 } from '@vcmap/core';
 import Point from 'ol/geom/Point.js';
 import Feature from 'ol/Feature.js';
-import { Math as CesiumMath, Color } from '@vcmap/cesium';
+import { Math as CesiumMath, Color } from '@vcmap-cesium/engine';
 import { unByKey } from 'ol/Observable.js';
 import VectorSource from 'ol/source/Vector.js';
+import { Icon } from 'ol/style.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
 import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
@@ -34,16 +35,29 @@ export function getWindowComponentOptions() {
     id: 'overview-map-container',
     state: {
       hideHeader: true,
+      classes: ['overview-map'],
     },
     position: {
       right: '100px',
       bottom: '25px',
-      width: '272px',
-      height: '223px',
+      width: '300px',
+      height: '240px',
     },
   };
 }
 
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+function getCameraIcon(color) {
+  return {
+    src: `data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg id='cam' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81.06 49.47'%3E%3Cdefs%3E%3ClinearGradient id='1' x1='40.53' y1='48.97' x2='40.53' y2='.25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='${encodeURIComponent(color)}'/%3E%3Cstop offset='.46' stop-color='${encodeURIComponent(color)}' stop-opacity='.60'/%3E%3Cstop offset='.65' stop-color='${encodeURIComponent(color)}' stop-opacity='.40'/%3E%3Cstop offset='.83' stop-color='${encodeURIComponent(color)}' stop-opacity='.20'/%3E%3Cstop offset='.89' stop-color='${encodeURIComponent(color)}' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='transparent' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='2' x1='40.53' y1='49.37' x2='40.53' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.24' stop-color='${encodeURIComponent(color)}'/%3E%3Cstop offset='.38' stop-color='${encodeURIComponent(color)}' stop-opacity='.93'/%3E%3Cstop offset='.57' stop-color='${encodeURIComponent(color)}' stop-opacity='.70'/%3E%3Cstop offset='.78' stop-color='${encodeURIComponent(color)}' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='transparent' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='40.53 48.97 80.53 .25 .53 .25 40.53 48.97' fill='url(%231)' stroke='url(%232)' stroke-miterlimit='10' stroke-width='.5px'/%3E%3Ccircle cx='40.53' cy='42.97' r='6' fill='${encodeURIComponent(color)}' stroke='%23fff' stroke-miterlimit='10'/%3E%3C/svg%3E`,
+    scale: 0.5,
+    color,
+  };
+}
+
 /**
  * A 2D OverviewMap for cesium, openlayers and oblique map.
  * Baselayers are added to the OverviewMap using `showInOverviewMap` flag within the properties bag of a layer configuration.
@@ -151,10 +165,7 @@ class OverviewMap {
      * @type {import("@vcmap/core").VectorStyleItem}
      */
     this.cameraIconStyle = new VectorStyleItem({
-      image: {
-        src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAYAAADxJz2MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMzhlODgyYy00ZGYzLTZkNGMtYWZhYy1hYTkwOTI3MjRiYjEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEYxRkE1MDlENjRDMTFFNTlGRjhFMzM3RTA3MDJFMDciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEYxRkE1MDhENjRDMTFFNTlGRjhFMzM3RTA3MDJFMDciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OGJiODg5ODItZGM0Zi0xNjQyLWEyZDYtODJkZTcxMGNhNjkwIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzY5MTdhNjAtZDYzYy0xMWU1LThjNTgt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',
-        anchor: [0.5, 1],
-      },
+      image: getCameraIcon(defaultPrimaryColor),
     });
 
     /**
@@ -220,12 +231,12 @@ class OverviewMap {
       }),
       this._app.uiConfig.added.addEventListener((item) => {
         if (item?.name === 'primaryColor') {
-          this._setObliqueColor(item.value);
+          this._updatePrimaryColor(item.value);
         }
       }),
       this._app.uiConfig.removed.addEventListener((item) => {
         if (item?.name === 'primaryColor') {
-          this._setObliqueColor(defaultPrimaryColor);
+          this._updatePrimaryColor(defaultPrimaryColor);
         }
       }),
     ];
@@ -267,12 +278,16 @@ class OverviewMap {
    * @param {string} color
    * @private
    */
-  _setObliqueColor(color) {
+  _updatePrimaryColor(color) {
     this.obliqueUnselectedStyle?.stroke?.setColor(color);
     this.obliqueSelectedStyle?.stroke?.setColor(color);
     this._obliqueTileLayer?.forceRedraw?.();
     this._obliqueImageLayer?.forceRedraw?.();
     this._obliqueSelectedImageLayer?.forceRedraw?.();
+    const rotation = this.cameraIconStyle.image.getRotation();
+    this.cameraIconStyle.image = new Icon(getCameraIcon(color));
+    this.cameraIconStyle.image.setRotation(rotation);
+    this._cameraIconLayer?.getFeatureById('cameraFeature')?.setStyle(this.cameraIconStyle.style);
   }
 
   /**
@@ -299,6 +314,7 @@ class OverviewMap {
     }
     await this._map.activate();
     this.map.setTarget('overview-map-container');
+    this._map.target?.firstChild?.classList?.add('overviewMapElement');
     if (!this._active) {
       this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
         this._clearListeners();

package/src/navigation/vcsCompass.vue

@@ -1,11 +1,9 @@
 <template>
   <v-sheet
-    ref="compassRef"
     :style="{
       transform: `rotate(${compassRotation}deg)`,
-      cursor,
     }"
-    @mousedown="trackMouse"
+    @click="$emit('input', 0)"
     class="
         h-16 w-16
         d-flex flex-column justify-center align-center
@@ -19,6 +17,7 @@
     <span>N</span>
     <MapNavCompass
       class="position-absolute pos-a-0 primary--text"
+      @click="$event.stopPropagation()"
       @direction-click="$emit('input', $event)"
       :can-emit="viewMode === '3d' || viewMode === 'oblique'"
       :hide-ticks="viewMode === 'oblique'"
@@ -28,10 +27,7 @@
 
 
 <script>
-  import { computed, onUnmounted, ref } from 'vue';
-
-  import { fromEvent, merge, of, Subject } from 'rxjs';
-  import { takeUntil, tap } from 'rxjs/operators';
+  import { computed, ref } from 'vue';
 
   import { VSheet } from 'vuetify/lib';
   import MapNavCompass from './mapNavCompass.vue';
@@ -58,75 +54,10 @@
         default: 0,
       },
     },
-    setup(props, context) {
-      const destroy$ = new Subject();
-      const grabbing = ref();
-      const compassRef = ref();
-
-      const mouseAngle = ({ referenceEl, event }) => {
-        const { left, width, top, height } = referenceEl.getBoundingClientRect();
-        const boxCenter = [left + width / 2, top + height / 2];
-        const angle = Math.atan2(event.pageX - boxCenter[0], -(event.pageY - boxCenter[1])) * (180 / Math.PI);
-
-        if (angle < 0) {
-          return 360 + angle;
-        }
-
-        return angle;
-      };
-
-      const trackMouse = (e) => {
-        if (props.viewMode === '3d') {
-          document.body.style.cursor = 'grabbing';
-          const timeout = setTimeout(() => {
-            grabbing.value = true;
-          }, 200);
-
-          const finish = () => {
-            clearTimeout(timeout);
-            document.body.style.cursor = 'unset';
-            grabbing.value = false;
-          };
-
-          merge(
-            of(e),
-            fromEvent(document.body, 'mousemove'),
-          ).pipe(
-            tap((event) => {
-              if (grabbing.value) {
-                const rotation = mouseAngle({ event, referenceEl: compassRef.value.$el });
-                context.emit('input', -1 * rotation);
-              }
-            }),
-            takeUntil(fromEvent(document.body, 'mouseup').pipe(
-              tap(() => finish()),
-            )),
-            takeUntil(fromEvent(document.body, 'mouseleave').pipe(
-              tap(() => finish()),
-            )),
-            takeUntil(destroy$),
-          ).subscribe();
-        }
-      };
-
-      const cursor = computed(() => {
-        if (props.viewMode === '3d') {
-          return grabbing.value ? 'grabbing' : 'grab';
-        }
-        return 'auto';
-      });
-
+    setup(props) {
       const rotationValue = ref(props.value);
 
-      onUnmounted(() => {
-        destroy$.next();
-        destroy$.unsubscribe();
-      });
-
       return {
-        trackMouse,
-        compassRef,
-        cursor,
         rotationValue,
         compassRotation: computed(() => -1 * rotationValue.value),
       };

package/src/setup.js

@@ -6,4 +6,4 @@ import * as core from '@vcmap/core';
 
 Vue.config.productionTip = false;
 
-window.CESIUM_BASE_URL = '/node_modules/@vcmap/cesium/Build/CesiumUnminified/';
+window.CESIUM_BASE_URL = '/node_modules/@vcmap-cesium/engine/Build/';

package/src/vuePlugins/vuetify.js

@@ -1,7 +1,7 @@
 import '@mdi/font/css/materialdesignicons.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
-import Icons from '../icons/+all.js';
+import Icons from '../components/icons/+all.js';
 
 Vue.use(Vuetify);