@vcmap/ui 5.2.4 → 5.3.1

package/src/navigation/ObliqueRotation.vue

@@ -6,12 +6,14 @@
         icon="$vcsRotateLeft"
         tooltip="navigation.obliqueLeftTooltip"
         elevation="0"
+        :disabled="disabled"
       />
       <OrientationToolsButton
         @click="input(90)"
         icon="$vcsRotateRight"
         tooltip="navigation.obliqueRightTooltip"
         elevation="0"
+        :disabled="disabled"
       />
     </div>
   </div>
@@ -22,6 +24,7 @@
 
   /**
    * @vue-prop {number} value - the current heading
+   * @vue-prop {boolean} disabled - whether ObliqueRotation should be disabled
    * @vue-event {number} input
    */
   export default {
@@ -32,6 +35,11 @@
         type: Number,
         required: true,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     methods: {
       input(rotation) {

package/src/navigation/ObliqueRotation.vue.d.ts

@@ -3,6 +3,11 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
 }, {}, {}, {}, {
     input(rotation: any): void;
 }, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
@@ -10,5 +15,12 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
-}>>, {}>;
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
+}>>, {
+    disabled: boolean;
+}>;
 export default _default;

package/src/navigation/TiltSlider.vue

@@ -4,7 +4,7 @@
     tooltip-position="left"
   >
     <template #activator="{ on, attrs }">
-      <v-card class="w-8" v-on="on" v-bind="attrs">
+      <v-card class="w-8" v-on="on" v-bind="attrs" :disabled="disabled">
         <v-slider
           track-color="base lighten-3"
           v-model="tilt"
@@ -13,6 +13,7 @@
           vertical
           hide-details
           class="vcs-slider"
+          v-bind="{ ...$attrs }"
         />
       </v-card>
     </template>
@@ -77,6 +78,7 @@
   /**
    * @description A vertical slider from 0 to -90. pass value with v-model
    * @vue-prop {number} value
+   * @vue-prop {boolean} disabled - whether tilt slider should be disabled
    * @vue-event {number} input
    */
   export default {
@@ -91,6 +93,11 @@
         type: Number,
         required: true,
       },
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     data() {
       return {

package/src/navigation/TiltSlider.vue.d.ts

@@ -3,6 +3,11 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }, {}, {
     localValue: number;
 }, {
@@ -15,5 +20,12 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
-}>>, {}>;
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+}>;
 export default _default;

package/src/navigation/VcsCompass.vue

@@ -12,7 +12,7 @@
       class="position-absolute pos-a-0 primary--text"
       @click="$event.stopPropagation()"
       @direction-click="$emit('input', $event)"
-      :can-emit="viewMode === '3d' || viewMode === 'oblique'"
+      :can-emit="!disabled && (viewMode === '3d' || viewMode === 'oblique')"
       :hide-ticks="viewMode === 'oblique'"
     />
   </v-sheet>
@@ -29,6 +29,7 @@
    * @vue-prop {OrientationToolsViewMode}  viewMode  - Mode of the map. Defines the behaviour of the compass.
    * @vue-prop {number}                     value     - Number of degrees of the compass rotation.
    * @vue-event {number} input
+   * @vue-prop {boolean} disabled - whether compass should be disabled
    */
   export default {
     name: 'VcsCompass',
@@ -45,6 +46,11 @@
         type: Number,
         default: 0,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const rotationValue = ref(props.value);

package/src/navigation/VcsCompass.vue.d.ts

@@ -7,6 +7,11 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
 }, {
     rotationValue: any;
     compassRotation: import("vue").ComputedRef<number>;
@@ -19,7 +24,13 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
 }>>, {
     value: number;
+    disabled: boolean;
 }>;
 export default _default;

package/src/navigation/VcsZoomButton.vue

@@ -6,12 +6,14 @@
         icon="$vcsPlus"
         tooltip="navigation.zoomInTooltip"
         elevation="0"
+        :disabled="disabled"
       />
       <OrientationToolsButton
         @click="$emit('zoom-out')"
         icon="$vcsMinus"
         tooltip="navigation.zoomOutTooltip"
         elevation="0"
+        :disabled="disabled"
       />
     </div>
   </div>
@@ -24,9 +26,17 @@
    * @description Zoom buttons rendered above each other.
    * @vue-event {void} zoom-in - raised when zoom in is called
    * @vue-event {void} zoom-out - raised when zoom out is called
+   * @vue-prop {boolean} disabled - whether zoom buttons should be disabled
    */
   export default {
     components: { OrientationToolsButton },
+    props: {
+      disabled: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
+    },
   };
 </script>
 <style lang="scss" scoped>

package/src/navigation/VcsZoomButton.vue.d.ts

@@ -1,2 +1,16 @@
-declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{
+    disabled: {
+        required: false;
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        required: false;
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+}>;
 export default _default;

package/src/navigation/locatorHelper.d.ts

@@ -0,0 +1,9 @@
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{ action: import("../actions/actionHelper.js").VcsAction, destroy: Function }}
+ */
+export function createLocatorAction(app: import("../vcsUiApp.js").default): {
+    action: import("../actions/actionHelper.js").VcsAction;
+    destroy: Function;
+};

package/src/navigation/locatorHelper.js

@@ -0,0 +1,294 @@
+import {
+  markVolatile,
+  maxZIndex,
+  mercatorProjection,
+  Projection,
+  VectorLayer,
+  VectorStyleItem,
+  ensureFeatureAbsolute,
+  CesiumMap,
+} from '@vcmap/core';
+import { Circle, Point } from 'ol/geom';
+import { Feature } from 'ol';
+import { Color } from '@vcmap-cesium/engine';
+import CircleStyle from 'ol/style/Circle';
+import { Fill, Stroke } from 'ol/style';
+import { NotificationType } from '../notifier/notifier.js';
+import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
+
+/**
+ * Request the Color and add opacity
+ * @param {number} opacity
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {string}
+ */
+function getColor(opacity, app) {
+  return Color.fromCssColorString(
+    app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
+  )
+    .withAlpha(opacity)
+    .toCssColorString();
+}
+
+/**
+ * Place a location point and accuracy circle on the map.
+ * @param {import("@vcmap/core").VectorLayer} layer The OpenLayers layer to add the features to.
+ * @param {GeolocationCoordinates} point The point object containing longitude, latitude, and accuracy.
+ * @param {import("../vcsUiApp.js").default} app
+ */
+async function placeLocationInMap(layer, point, app) {
+  layer.removeFeaturesById(['_tooltipLocationPoint']);
+  layer.removeFeaturesById(['_tooltipLocationCircle']);
+
+  const featurePoint = [point.longitude, point.latitude];
+
+  const feature = new Feature({
+    geometry: new Point(Projection.wgs84ToMercator(featurePoint)),
+    olcs_extrudedHeight: 80,
+    olcs_altitudeMode: 'clampToGround',
+  });
+  feature.setId('_tooltipLocationPoint');
+
+  if (app.maps.activeMap instanceof CesiumMap) {
+    await ensureFeatureAbsolute(feature, layer, app.maps.activeMap);
+  }
+
+  const accuracyCircle = new Feature({
+    geometry: new Circle(
+      Projection.wgs84ToMercator([point.longitude, point.latitude]),
+      point.accuracy,
+    ),
+  });
+  accuracyCircle.setId('_tooltipLocationCircle');
+  layer.addFeatures([accuracyCircle, feature]);
+}
+/**
+ * Calculate the Euclidean distance between two coordinates.
+ * @param {GeolocationCoordinates} coord First set of coordinates.
+ * @param {GeolocationCoordinates} prevCoord Second set of coordinates.
+ * @returns {number} The Euclidean distance between the coordinates in meters.
+ */
+function getDistance(coord, prevCoord) {
+  const dx = prevCoord.longitude - coord.longitude;
+  const dy = prevCoord.latitude - coord.latitude;
+  // Approximate distance using Pythagoras' theorem
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+/**
+ * Moves the map view to a specified position, optionally setting a distance.
+ * @param {number|null} distance
+ * @param {GeolocationCoordinates} position
+ * @param {import("../vcsUiApp.js").default} app
+ */
+async function goToLocator(distance, position, app) {
+  const viewpoint = await app.maps.activeMap.getViewpoint();
+  viewpoint.animate = true;
+  viewpoint.cameraPosition = null;
+  viewpoint.groundPosition = [position.longitude, position.latitude];
+  if (viewpoint.pitch >= -30) {
+    viewpoint.pitch = -30;
+  }
+
+  if (distance != null) {
+    viewpoint.distance = distance;
+  }
+  viewpoint.duration = 1;
+  await app.maps.activeMap?.gotoViewpoint(viewpoint);
+}
+
+/**
+ * Handles the success of geolocation, updating the map accordingly.
+ * @param {import("@vcmap/core").VectorLayer} vectorLayer The vector layer on which to place the location.
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {LocatorState} state The state object containing previous and current coordinates.
+ * @param {GeolocationPosition} position The position object containing current coordinates and accuracy.
+ */
+async function handleSuccess(vectorLayer, app, state, position) {
+  if (
+    position.coords.longitude !== state.prevCoordinates?.longitude ||
+    position.coords.latitude !== state.prevCoordinates?.latitude ||
+    position.coords.accuracy !== state.prevCoordinates?.accuracy
+  ) {
+    state.coordinates = position.coords;
+
+    if (state.prevCoordinates === undefined || state.prevCoordinates === null) {
+      await goToLocator(state.coordinates.accuracy, position.coords, app);
+    } else if (getDistance(position.coords, state.prevCoordinates) > 5) {
+      await goToLocator(state.coordinates.accuracy, position.coords, app);
+    }
+    await placeLocationInMap(vectorLayer, state.coordinates, app);
+    state.prevCoordinates = position.coords;
+  }
+}
+
+/**
+ * Handles errors that occur during geolocation, displaying appropriate notifications based on the error code.
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {LocatorState} state The state object.
+ * @param {GeolocationPositionError} error The error object containing information about the geolocation error.
+ */
+function handleError(app, state, error) {
+  if (state.prevCoordinates === undefined || state.prevCoordinates === null) {
+    switch (error.code) {
+      case 1:
+        app.notifier.add({
+          type: NotificationType.ERROR,
+          message: app.vueI18n.t('navigation.locator.errorAccess'),
+        });
+        break;
+      case 2:
+        app.notifier.add({
+          type: NotificationType.ERROR,
+          message: app.vueI18n.t('navigation.locator.errorCurrentPosition'),
+        });
+        break;
+      case 3:
+        app.notifier.add({
+          type: NotificationType.ERROR,
+          message: app.vueI18n.t('navigation.locator.errorConnection'),
+        });
+        break;
+      default:
+        app.notifier.add({
+          type: NotificationType.ERROR,
+          message: app.vueI18n.t('navigation.locator.errorPosition'),
+        });
+        break;
+    }
+  }
+}
+
+const geolocationOptions = {
+  enableHighAccuracy: true,
+  maximumAge: 10000,
+  timeout: 5000,
+};
+
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{ action: import("../actions/actionHelper.js").VcsAction, destroy: Function }}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function createLocatorAction(app) {
+  let primary = getColor(0.4, app);
+
+  let pointColor = getColor(1, app);
+
+  const style = new VectorStyleItem({
+    fill: {
+      color: primary,
+    },
+    stroke: { color: pointColor, width: 2 },
+    image: {
+      fill: {
+        color: pointColor,
+      },
+      color: primary,
+      stroke: { color: pointColor, width: 2 },
+      radius: 5,
+    },
+  });
+  const vectorLayer = new VectorLayer({
+    projection: mercatorProjection.toJSON(),
+    vectorProperties: {
+      classificationType: 'both',
+      allowPicking: false,
+      heightAboveGround: 2,
+      altitudeMode: 'clampToGround',
+    },
+    zIndex: maxZIndex,
+    style,
+  });
+
+  const mapChangedListener = app.maps.mapActivated.addEventListener(
+    async (map) => {
+      if (map instanceof CesiumMap) {
+        const locatorFeature = vectorLayer.getFeatureById(
+          '_tooltipLocationPoint',
+        );
+        if (locatorFeature) {
+          await ensureFeatureAbsolute(locatorFeature, vectorLayer, map);
+        }
+      }
+    },
+  );
+  markVolatile(vectorLayer);
+  app.layers.add(vectorLayer);
+
+  const destroyLayer = () => {
+    vectorLayer.deactivate();
+    app.layers.remove(vectorLayer);
+    vectorLayer.destroy();
+  };
+
+  /**
+   * @typedef {Object} LocatorState
+   * @property {GeolocationCoordinates} coordinates
+   * @property {GeolocationCoordinates} prevCoordinates
+   * @property {Object} id
+   */
+  const state = {
+    coordinates: undefined,
+    prevCoordinates: undefined,
+    id: undefined,
+  };
+
+  const themeListener = app.themeChanged.addEventListener(() => {
+    primary = getColor(0.4, app);
+    pointColor = getColor(1, app);
+    style.fillColor = primary;
+    style.stroke.setColor(pointColor);
+    style.image = new CircleStyle({
+      fill: new Fill({
+        color: pointColor,
+      }),
+      color: primary,
+      stroke: new Stroke({ color: pointColor, width: 2 }),
+      radius: 5,
+    });
+    vectorLayer.forceRedraw();
+  });
+
+  const action = {
+    name: 'alertAction',
+    title: 'Locator',
+    icon: '$vcsCrosshair',
+    active: false,
+    disabled: true,
+    callback() {
+      if (!this.active) {
+        this.active = !this.active;
+        vectorLayer.activate();
+        if (state.prevCoordinates !== undefined) {
+          goToLocator(
+            state.prevCoordinates.accuracy,
+            state.prevCoordinates,
+            app,
+          );
+        }
+        state.id = navigator.geolocation.watchPosition(
+          handleSuccess.bind(null, vectorLayer, app, state),
+          handleError.bind(null, app, state),
+          geolocationOptions,
+        );
+      } else {
+        this.active = !this.active;
+        state.coordinates = null;
+        navigator.geolocation.clearWatch(state.id.value);
+        vectorLayer.deactivate();
+      }
+    },
+  };
+  const destroy = () => {
+    destroyLayer();
+    mapChangedListener();
+    themeListener();
+    style.destroy();
+    state.coordinates = undefined;
+    state.prevCoordinates = undefined;
+    state.id = undefined;
+  };
+  return { action, destroy };
+}

package/src/navigation/overviewMap.d.ts

@@ -35,17 +35,17 @@ declare class OverviewMap {
      */
     private _cachedViewpoint;
     /**
-     * @type {import("@vcmap/core").VectorLayer}
+     * @type {import("@vcmap/core").VectorLayer | null}
      * @private
      */
     private _obliqueTileLayer;
     /**
-     * @type {import("@vcmap/core").VectorLayer}
+     * @type {import("@vcmap/core").VectorLayer | null}
      * @private
      */
     private _obliqueImageLayer;
     /**
-     * @type {import("@vcmap/core").VectorLayer}
+     * @type {import("@vcmap/core").VectorLayer | null}
      * @private
      */
     private _obliqueSelectedImageLayer;
@@ -60,12 +60,12 @@ declare class OverviewMap {
      */
     private _obliqueResolutionFactor;
     /**
-     * @type {import("@vcmap/core").ObliqueViewDirection}
+     * @type {import("@vcmap/core").ObliqueViewDirection | null}
      * @private
      */
     private _obliqueViewDirection;
     /**
-     * @type {import("@vcmap/core").VectorLayer}
+     * @type {import("@vcmap/core").VectorLayer | null}
      * @private
      */
     private _cameraIconLayer;
@@ -80,29 +80,29 @@ declare class OverviewMap {
      */
     minimumHeight: number;
     /**
-     * Handles the events from the overview map. Available after first activation.
-     * @type {EventHandler|null}
+     * Handles the events from the overview map.
+     * @type {EventHandler}
      * @private
      */
     private _eventHandler;
     /**
-     * An event, available after first activation, which is triggered whenever the overview map is clicked.
-     * Is passed a {@link InteractionEvent} as its only argument
-     * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>|null}
+     *
+     * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>}
      * @private
      */
     private _mapClicked;
     /**
-     * @type {Function}
+     * @type {function():void}
+     * @private
      */
-    _mapPointerListener: Function;
+    private _mapPointerListener;
     /**
      * @type {Array<function():void>}
      * @private
      */
     private _listeners;
     /**
-     * @type {function():void}
+     * @type {null | function():void}
      * @private
      */
     private _mapActivatedListener;
@@ -124,17 +124,15 @@ declare class OverviewMap {
      */
     get eventHandler(): EventHandler | null;
     /**
-     * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>|null}
+     * An event which is triggered whenever the overview map is clicked.
+     * Is passed a {@link InteractionEvent} as its only argument
+     * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>}
      */
-    get mapClicked(): import("@vcmap/core/dist/src/vcsEvent.js").default<import("@vcmap/core").InteractionEvent> | null;
+    get mapClicked(): import("@vcmap/core/dist/src/vcsEvent.js").default<import("@vcmap/core").InteractionEvent>;
     /**
      * @private
      */
     private _updatePrimaryColor;
-    /**
-     * @private
-     */
-    private _setupMapInteraction;
     /**
      * activates the overview map and initializes handlers for current active map
      * @private
@@ -182,7 +180,10 @@ declare class OverviewMap {
      * @private
      */
     private _addNavigationListener;
-    _setupCameraIconLayer(): void;
+    /**
+     * @private
+     */
+    private _setupCameraIconLayer;
     /**
      * Adds and maintains the view and camera feature
      * @private