@vcmap/ui 6.1.0-rc.1 → 6.1.0-rc.3

package/src/manager/window/WindowComponent.vue.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
     isDynamic: import("vue").ComputedRef<boolean>;
     isChild: import("vue").ComputedRef<boolean>;
     isDocked: import("vue").ComputedRef<boolean>;
+    isTabletWithOpenToolbar: import("vue").ComputedRef<any>;
     isDynamicLeft: import("vue").ComputedRef<boolean>;
     isDynamicRight: import("vue").ComputedRef<boolean>;
     isDraggable: import("vue").Ref<boolean>;

package/src/manager/window/WindowManager.vue

@@ -1,6 +1,8 @@
 <template>
   <div
-    :class="{ 'win-container-mobile': addMobileClass }"
+    :class="{
+      'win-container-mobile': addMobileClass,
+    }"
     class="window-manager"
   >
     <WindowComponent
@@ -126,13 +128,14 @@
           // do not clip balloons to target
           return windowComponent?.position;
         }
-
         return getPositionAppliedOnTarget(
           windowComponent?.position,
           targetSize.value,
           getPosition(parentComponent),
         );
       };
+      const display = useDisplay();
+
       /**
        * @param {string} id
        * @returns {import("vue").ComputedRef<Object>}
@@ -140,12 +143,14 @@
       const getStyles = (id) =>
         computed(() => {
           const windowComponent = windowManager.get(id);
+          const zIndexOffset = Number(display.sm.value); // add z-Index Offset for Tablet View to keep the windows above the detached Icon
           return {
-            zIndex: windowComponent.zIndex.value,
+            zIndex: windowComponent.zIndex.value + zIndexOffset,
             ...getPosition(windowComponent),
             ...(windowComponent?.state?.styles || {}),
           };
         });
+
       /**
        * @param {string} id
        */
@@ -163,11 +168,15 @@
         const position = getPosition(windowComponent);
         moveWindow(id, translation, windowManager, targetSize.value, position);
       };
-      const display = useDisplay();
+
       const addMobileClass = computed(() => {
         return display.xs.value && componentIds.length > 0;
       });
 
+      const addTabletClass = computed(() => {
+        return display.sm.value && componentIds.length > 0;
+      });
+
       const setTargetSize = () => {
         targetSize.value = getTargetSize(app.maps.target);
       };
@@ -199,6 +208,7 @@
         bringWindowToTop,
         move,
         addMobileClass,
+        addTabletClass,
       };
     },
   };

package/src/manager/window/WindowManager.vue.d.ts

@@ -15,5 +15,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         dy: number;
     }) => void;
     addMobileClass: import("vue").ComputedRef<boolean>;
+    addTabletClass: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/manager/window/windowHelper.d.ts

@@ -10,9 +10,11 @@ export function getTargetSize(target: HTMLElement): DOMRect | null;
  * @param {number} y - client pixel position
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
+ * @param {number} [offsetX=0]
+ * @param {number} [offsetY=0]
  * @returns {import("./windowManager.js").WindowPositionOptions}
  */
-export function getWindowPositionOptions(x: number, y: number, target: HTMLElement, alignment?: number | undefined): import("./windowManager.js").WindowPositionOptions;
+export function getWindowPositionOptions(x: number, y: number, target: HTMLElement, alignment?: number | undefined, offsetX?: number | undefined, offsetY?: number | undefined): import("./windowManager.js").WindowPositionOptions;
 /**
  * Get window position options based on a pixel in the map
  * @param {import("@vcmap-cesium/engine").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
@@ -28,10 +30,12 @@ export function getWindowPositionOptionsFromMapEvent(windowPosition: import("@vc
  * @param {number} y - client pixel position
  * @param {number} width - window width to fit
  * @param {number} height - window height to fit
- *  @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @param {number} [offsetX=0]
+ * @param {number} [offsetY=0]
  * @returns {import("./windowManager.js").WindowPositionOptions}
  */
-export function getFittedWindowPositionOptions(x: number, y: number, width: number, height: number, target: HTMLElement): import("./windowManager.js").WindowPositionOptions;
+export function getFittedWindowPositionOptions(x: number, y: number, width: number, height: number, target: HTMLElement, offsetX?: number | undefined, offsetY?: number | undefined): import("./windowManager.js").WindowPositionOptions;
 /**
  * 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.

package/src/manager/window/windowHelper.js

@@ -49,6 +49,8 @@ export function getTargetSize(target) {
  * @param {number} y - client pixel position
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
+ * @param {number} [offsetX=0]
+ * @param {number} [offsetY=0]
  * @returns {import("./windowManager.js").WindowPositionOptions}
  */
 export function getWindowPositionOptions(
@@ -56,6 +58,8 @@ export function getWindowPositionOptions(
   y,
   target,
   alignment = WindowAlignment.TOP_LEFT,
+  offsetX = 0,
+  offsetY = 0,
 ) {
   const targetSize = getTargetSize(target);
   if (!targetSize) {
@@ -64,13 +68,19 @@ export function getWindowPositionOptions(
 
   const { left, top, width, height } = targetSize;
   if (alignment === WindowAlignment.TOP_LEFT) {
-    return { left: x - left, top: y - top };
+    return { left: x - left + offsetX, top: y - top - offsetY };
   } else if (alignment === WindowAlignment.TOP_RIGHT) {
-    return { right: left + width - x, top: y - top };
+    return { right: left + width - x + offsetX, top: y - top - offsetY };
   } else if (alignment === WindowAlignment.BOTTOM_LEFT) {
-    return { left: x - left, bottom: height + top - y };
+    return {
+      left: x - left + offsetX,
+      bottom: height + top - y - offsetY,
+    };
   }
-  return { right: left + width - x, bottom: height + top - y };
+  return {
+    right: left + width - x + offsetX,
+    bottom: height + top - y - offsetY,
+  };
 }
 
 /**
@@ -106,18 +116,28 @@ export function getWindowPositionOptionsFromMapEvent(
  * @param {number} y - client pixel position
  * @param {number} width - window width to fit
  * @param {number} height - window height to fit
- *  @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ * @param {number} [offsetX=0]
+ * @param {number} [offsetY=0]
  * @returns {import("./windowManager.js").WindowPositionOptions}
  */
-export function getFittedWindowPositionOptions(x, y, width, height, target) {
+export function getFittedWindowPositionOptions(
+  x,
+  y,
+  width,
+  height,
+  target,
+  offsetX = 0,
+  offsetY = 0,
+) {
   const targetSize = getTargetSize(target);
   if (!targetSize) {
     return { left: x, top: y };
   }
 
-  const { width: parentWidth, height: parentHeight } = targetSize;
-  const bottom = y + height > parentHeight;
-  const right = x + width > parentWidth;
+  const { left, top, width: parentWidth, height: parentHeight } = targetSize;
+  const bottom = y - top + height > parentHeight && y - top > parentHeight / 2;
+  const right = x - left + width > parentWidth && x - left > parentWidth / 2;
   let alignment = WindowAlignment.TOP_LEFT;
   if (bottom) {
     if (right) {
@@ -128,7 +148,7 @@ export function getFittedWindowPositionOptions(x, y, width, height, target) {
   } else if (right) {
     alignment = WindowAlignment.TOP_RIGHT;
   }
-  return getWindowPositionOptions(x, y, target, alignment);
+  return getWindowPositionOptions(x, y, target, alignment, offsetX, offsetY);
 }
 
 /**

package/src/navigation/MapNavigation.vue

@@ -25,7 +25,7 @@
         ></OrientationToolsButton>
       </v-row>
     </template>
-    <template v-if="mdAndUp">
+    <template v-if="smAndUp">
       <v-row justify="center">
         <VcsZoomButton
           @zoom-out="zoomOut()"
@@ -33,7 +33,7 @@
           :disabled="movementApiCallsDisabled"
         />
       </v-row>
-      <v-row justify="center" v-if="is3D && mdAndUp">
+      <v-row justify="center" v-if="is3D && smAndUp">
         <TiltSlider v-model="tilt" :disabled="movementApiCallsDisabled" />
       </v-row>
       <v-row v-if="!hideRotationButton && is3D" justify="center">
@@ -187,7 +187,7 @@
     return {
       action,
       destroy: () => {
-        stopRotation();
+        stopRotation?.();
         rotationListener();
       },
     };
@@ -401,11 +401,11 @@
         removeMovementDisabledListener();
       });
 
-      const { xs, mdAndUp, mobile } = useDisplay();
+      const { xs, mobile, smAndUp } = useDisplay();
 
       return {
         xs,
-        mdAndUp,
+        smAndUp,
         mobile,
         viewMode,
         heading,

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

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{}, {
     xs: import("vue").Ref<boolean>;
-    mdAndUp: import("vue").Ref<boolean>;
+    smAndUp: import("vue").Ref<boolean>;
     mobile: import("vue").ComputedRef<boolean>;
     viewMode: import("vue").Ref<string>;
     heading: import("vue").WritableComputedRef<number>;

package/src/navigation/overviewMap.d.ts

@@ -2,6 +2,7 @@
  * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
  */
 export function getWindowComponentOptions(): import("../manager/window/windowManager.js").WindowComponentOptions;
+export const overviewMapWindowId: "overview-map-container";
 export const overviewMapLayerSymbol: unique symbol;
 export default OverviewMap;
 /**
@@ -53,6 +54,12 @@ declare class OverviewMap {
      * @type {VectorStyleItem}
      */
     obliqueSelectedStyle: VectorStyleItem;
+    /**
+     * A factor by which to multiply the distance of the viewpoint of the overviewMap.
+     * @type {number}
+     * @private
+     */
+    private _scaleFactor;
     /**
      * A factor by witch to multiply the resolution when zooming to a single oblique image.
      * @type {number}

package/src/navigation/overviewMap.js

@@ -30,6 +30,7 @@ import {
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
 
+export const overviewMapWindowId = 'overview-map-container';
 export const overviewMapLayerSymbol = Symbol('overviewMapLayerSymbol');
 
 /**
@@ -40,7 +41,7 @@ export function getWindowComponentOptions() {
     component: VcsMap,
     props: { mapId: 'overview-map-container' },
     slot: WindowSlot.DETACHED,
-    id: 'overview-map-container',
+    id: overviewMapWindowId,
     state: {
       hideHeader: true,
       classes: ['overview-map'],
@@ -157,6 +158,13 @@ class OverviewMap {
       },
     });
 
+    /**
+     * A factor by which to multiply the distance of the viewpoint of the overviewMap.
+     * @type {number}
+     * @private
+     */
+    this._scaleFactor = 1;
+
     /**
      * A factor by witch to multiply the resolution when zooming to a single oblique image.
      * @type {number}
@@ -262,13 +270,17 @@ class OverviewMap {
       () => [
         this._app.uiConfig.config.hideMapNavigation,
         this._app.uiConfig.config.overviewMapActiveOnStartup,
+        this._app.uiConfig.config.overviewMapScaleFactor,
       ],
-      async ([hide, activeOnStartup]) => {
+      async ([hide, activeOnStartup, scaleFactor]) => {
         if (activeOnStartup && !hide && !this._active) {
           await this.activate();
         } else if (hide && this._active) {
           await this.deactivate();
         }
+        if (scaleFactor) {
+          this._scaleFactor = scaleFactor;
+        }
       },
     );
   }
@@ -350,7 +362,7 @@ class OverviewMap {
    * @returns {Promise<void>}
    */
   async activate() {
-    if (!this._app.windowManager.has('overview-map-container')) {
+    if (!this._app.windowManager.has(overviewMapWindowId)) {
       this._app.windowManager.add(getWindowComponentOptions(), vcsAppSymbol);
     }
     await this._activate();
@@ -360,7 +372,7 @@ class OverviewMap {
    * closes window and clears all listeners
    */
   deactivate() {
-    this._app.windowManager.remove('overview-map-container');
+    this._app.windowManager.remove(overviewMapWindowId);
     this._clearListeners();
     if (this._mapActivatedListener) {
       this._mapActivatedListener();
@@ -482,6 +494,7 @@ class OverviewMap {
 
         const vp = Viewpoint.createViewpointFromExtent(extent);
         vp.distance /= this._obliqueResolutionFactor;
+        vp.distance *= this._scaleFactor;
         this._map.gotoViewpoint(vp);
       }
     }
@@ -632,6 +645,7 @@ class OverviewMap {
       viewpoint.groundPosition = null;
       viewpoint.distance = distance * 4;
     }
+    viewpoint.distance *= this._scaleFactor;
     this._map.gotoViewpoint(viewpoint);
   }
 

package/src/pluginHelper.d.ts

@@ -15,6 +15,13 @@ export function getPluginAssetUrl(app: import("@src/vcsUiApp.js").default, plugi
  * @returns {boolean}
  */
 export function isValidPackageName(name: string): boolean;
+/**
+ * joins pathname and moduleUrl.
+ * @param {string} pathname will remove filenames with extension or add a trailing slash if missing
+ * @param {string} module relative url to the module
+ * @returns {string}
+ */
+export function getModuleUrl(pathname: string, module: string): string;
 /**
  * @param {string} name
  * @param {T} config

package/src/pluginHelper.js

@@ -82,6 +82,23 @@ export function isValidPackageName(name) {
   );
 }
 
+/**
+ * joins pathname and moduleUrl.
+ * @param {string} pathname will remove filenames with extension or add a trailing slash if missing
+ * @param {string} module relative url to the module
+ * @returns {string}
+ */
+export function getModuleUrl(pathname, module) {
+  const pathNameParts = pathname.split('/');
+  if (pathNameParts.at(-1).includes('.')) {
+    pathNameParts.pop();
+  } else if (pathNameParts.at(-1) === '') {
+    pathNameParts.pop();
+  }
+  const pathName = pathNameParts.join('/');
+  return `${pathName}/${module}`;
+}
+
 /**
  * @param {string} name
  * @param {T} config
@@ -93,10 +110,7 @@ export async function loadPlugin(name, config) {
   let module = config.entry;
 
   if (!/^(https?:\/\/|\/)/.test(module)) {
-    module = `${window.location.origin}${window.location.pathname.replace(
-      /\/?$/,
-      '/',
-    )}${module}`;
+    module = `${window.location.origin}${getModuleUrl(window.location.pathname, module)}`;
   } else if (module === '_dev') {
     module = `/${name}.js`;
   } else if (module === 'http://localhost/_test') {

package/src/search/ResultItem.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     hasActions: import("vue").ComputedRef<boolean>;
-    marked: import("vue").ComputedRef<any>;
+    marked: import("vue").ComputedRef<string>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: StringConstructor;

package/src/search/markText.d.ts

@@ -4,7 +4,7 @@
  * @returns {string}
  */
 export function markText(text: string, query: string): string;
-export type Block = {
+export type BlockIndices = {
     start: number;
     end: number;
 };

package/src/search/markText.js

@@ -1,12 +1,12 @@
 /**
- * @typedef {Object} Block
+ * @typedef {Object} BlockIndices
  * @property {number} start
  * @property {number} end
  */
 
 /**
- * @param {Block[]} blocks
- * @param {Block} candidate
+ * @param {BlockIndices[]} blocks
+ * @param {BlockIndices} candidate
  * @returns {boolean}
  */
 function isBlockWithinBlocks(blocks, candidate) {
@@ -18,7 +18,7 @@ function isBlockWithinBlocks(blocks, candidate) {
 /**
  * @param {string} text
  * @param {RegExp} partial
- * @param {Block[]} blocks
+ * @param {BlockIndices[]} blocks
  */
 function addPartialBlocks(text, partial, blocks) {
   let match;

package/src/search/search.js

@@ -318,7 +318,7 @@ class Search extends IndexedCollection {
       this._app.featureInfo.selectedFeature?.[vcsLayerName] ===
       this._resultLayer.name
     ) {
-      this._app.featureInfo.clear();
+      this._app.featureInfo.clearSelection();
     }
   }
 

package/src/state.d.ts

@@ -4,14 +4,16 @@
 export function createEmptyState(): AppState;
 /**
  * @param {UrlViewpointState} state
+ * @param {string} moduleId
  * @returns {import("@vcmap/core").ViewpointOptions|null}
  */
-export function parseUrlProjectedViewpointState(state: UrlViewpointState): import("@vcmap/core").ViewpointOptions | null;
+export function parseUrlProjectedViewpointState(state: UrlViewpointState, moduleId: string): import("@vcmap/core").ViewpointOptions | null;
 /**
  * @param {UrlExtentState} state
+ * @param {string} moduleId
  * @returns {import("@vcmap/core").ViewpointOptions|null}
  */
-export function parseUrlExtentState(state: UrlExtentState): import("@vcmap/core").ViewpointOptions | null;
+export function parseUrlExtentState(state: UrlExtentState, moduleId: string): import("@vcmap/core").ViewpointOptions | null;
 /**
  * @param {(URL)=} url
  * @returns {AppState}

package/src/state.js

@@ -61,7 +61,7 @@ import {
 
 /**
  * @typedef {AppState} CachedAppState
- * @property {() => import("@vcmap/core").Viewpoint?} [getViewpoint]
+ * @property {(string) => import("@vcmap/core").Viewpoint?} [getViewpoint]
  */
 
 /**
@@ -104,66 +104,87 @@ function parseUrlViewpointState(state) {
     roll: state[5],
   });
 
-  return vp.isValid() ? vp.toJSON() : null;
+  if (vp.isValid()) {
+    return vp.toJSON();
+  } else {
+    getLogger('StateManagement').warning(
+      'The provided viewpoint options are not valid. Viewpoint will be ignored.',
+    );
+    return null;
+  }
 }
 
 /**
  * @param {UrlViewpointState} state
+ * @param {string} moduleId
  * @returns {import("@vcmap/core").ViewpointOptions|null}
  */
-export function parseUrlProjectedViewpointState(state) {
+export function parseUrlProjectedViewpointState(state, moduleId) {
   const projection = getDefaultProjection();
   const projectionCode = parseInt(projection.epsg.split(':')[1], 10);
 
-  let cameraPosition = state[0];
-  let groundPosition = state[1];
-  if (state[6] && state[6] === projectionCode) {
-    if (cameraPosition) {
+  if (state[6] === projectionCode) {
+    let cameraPosition;
+    let groundPosition;
+    if (state[0]) {
       // (cameraPosition instanceof Coordinate)
       cameraPosition = Projection.transform(
         wgs84Projection,
         projection,
-        cameraPosition,
+        state[0],
       );
     }
-    if (groundPosition) {
+    if (state[1]) {
       groundPosition = Projection.transform(
         wgs84Projection,
         projection,
-        groundPosition,
+        state[1],
       );
     }
+    return parseUrlViewpointState([
+      cameraPosition,
+      groundPosition,
+      ...state.slice(2),
+    ]);
+  } else {
+    getLogger('StateManagement').warning(
+      `The provided viewpoint epsg code (${state[6]}) does not equal epsg code (${projectionCode}) of module '${moduleId}' and therefore can not be handled. Camera and ground position will be ignored.`,
+    );
+    return null;
   }
-
-  const vp = new Viewpoint({
-    cameraPosition: cameraPosition ?? undefined,
-    groundPosition: groundPosition ?? undefined,
-    distance: state[2] > 0 ? state[2] : undefined,
-    heading: state[3],
-    pitch: state[4],
-    roll: state[5],
-  });
-  vp.animate = false;
-  return vp.isValid() ? vp.toJSON() : null;
 }
 
 /**
  * @param {UrlExtentState} state
+ * @param {string} moduleId
  * @returns {import("@vcmap/core").ViewpointOptions|null}
  */
-export function parseUrlExtentState(state) {
+export function parseUrlExtentState(state, moduleId) {
   const projection = getDefaultProjection();
   const projectionCode = parseInt(projection.epsg.split(':')[1], 10);
   const extentOptions = { coordinates: state[0] };
-  if (projectionCode === state[1]) {
+  if (!state[1]) {
+    extentOptions.projection = wgs84Projection;
+  } else if (state[1] && state[1] === projectionCode) {
     extentOptions.projection = projection;
   } else {
-    extentOptions.projection = wgs84Projection;
+    getLogger('StateManagement').warning(
+      `The provided extent epsg code (${state[6]}) does not equal epsg code (${projectionCode}) of module '${moduleId}' and therefore can not be handled. The provided extent will be ignored.`,
+    );
+    return null;
   }
   const extent = new Extent(extentOptions);
-  const vp = Viewpoint.createViewpointFromExtent(extent);
-  vp.animate = false;
-  return vp.isValid() ? vp.toJSON() : null;
+
+  if (extent.isValid()) {
+    const vp = Viewpoint.createViewpointFromExtent(extent);
+    vp.animate = false;
+    return vp.toJSON();
+  } else {
+    getLogger('StateManagement').warning(
+      'The provided extent options are not valid. Extent will be ignored.',
+    );
+    return null;
+  }
 }
 
 /**
@@ -215,10 +236,12 @@ function writeUrlPluginState(state) {
 function parseUrlAppState(urlState) {
   const state = createEmptyState();
   if (Array.isArray(urlState[0])) {
-    if (urlState[0][0].length === 4) {
-      state.getViewpoint = () => parseUrlExtentState(urlState[0]);
-    } else if (urlState[0].length === 7) {
-      state.getViewpoint = () => parseUrlProjectedViewpointState(urlState[0]);
+    if (Array.isArray(urlState[0][0]) && urlState[0][0].length === 4) {
+      state.getViewpoint = (moduleId) =>
+        parseUrlExtentState(urlState[0], moduleId);
+    } else if (urlState[0][6]) {
+      state.getViewpoint = (moduleId) =>
+        parseUrlProjectedViewpointState(urlState[0], moduleId);
     } else {
       state.activeViewpoint = parseUrlViewpointState(urlState[0]);
     }