@vcmap/ui 6.1.0-rc.5 → 6.1.0-rc.7

package/src/manager/window/WindowManager.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
-    :class="{
-      'win-container-mobile': addMobileClass,
-    }"
-    class="window-manager"
-  >
+  <div class="window-manager" :class="{ oblique: isOblique, mobile: xs }">
     <WindowComponent
       v-for="id in componentIds"
       :key="id"
@@ -13,6 +8,9 @@
       :z-index="getComponent(id).zIndex"
       @moved="move(id, $event)"
       @mousedown="bringWindowToTop(id)"
+      @touchstart="onTouchStart($event)"
+      @touchmove="onTouchMove($event)"
+      @touchend="onTouchEnd($event, id)"
       :style="getStyles(id).value"
       :class="getState(id).classes"
       :is-on-top="isOnTop(id)"
@@ -39,30 +37,50 @@
 </template>
 
 <style scoped lang="scss">
-  .win-container-mobile {
+  .mobile > div:not(#window-component--searchId) {
     position: fixed;
-    bottom: 56px;
     left: 0;
     right: 0;
     z-index: 2;
     display: contents;
+    width: 100% !important;
+    max-width: 100% !important;
+    inset: unset !important;
+    border-radius: 0 !important;
+    overflow: auto;
+    bottom: 0 !important;
+    max-height: 50% !important;
   }
-  .win-container-mobile > {
-    div {
-      width: 100% !important;
-      max-width: 100% !important;
-      inset: unset !important;
-      border-radius: 0 !important;
-      overflow: auto;
-      bottom: 0 !important;
-      max-height: 50% !important;
+  .mobile > div {
+    transition: transform 0.4s ease;
+  }
+
+  .mobile > #window-component--searchId {
+    position: fixed !important;
+    top: calc(var(--v-vcs-font-size) * 5 + 28px) !important;
+    left: 5px !important;
+    right: calc(var(--v-vcs-font-size) * 5 + 2px) !important;
+    z-index: 2;
+    border-radius: 4px !important;
+    width: inherit !important;
+    padding-right: 1px !important;
+    .py-1 {
+      padding: 0px !important;
     }
   }
+  .mobile > #window-component--searchId > div > div {
+    border-radius: 4px !important;
+  }
+
+  .oblique > #window-component--searchId {
+    right: calc(var(--v-vcs-font-size) * 6.25 + 2px) !important;
+  }
 </style>
 
 <script>
-  import { computed, inject, onUnmounted, ref } from 'vue';
+  import { computed, inject, onUnmounted, ref, watch } from 'vue';
   import { useDisplay } from 'vuetify';
+  import { ObliqueMap } from '@vcmap/core';
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
   import BalloonComponent from '../../featureInfo/BalloonComponent.vue';
@@ -71,6 +89,8 @@
     getTargetSize,
     moveWindow,
   } from './windowHelper.js';
+  import { mobileMenuListId } from '../../application/VcsNavbarMobile.vue';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description WindowManager rendering all registered WindowComponents
@@ -81,9 +101,14 @@
     setup() {
       const app = inject('vcsApp');
       /** @type {WindowManager} */
-      const { windowManager } = app;
+      const { windowManager, toolboxManager } = app;
       const { componentIds } = windowManager;
       const targetSize = ref(null);
+      const touchStartY = ref(0);
+      const touchCurrentY = ref(0);
+      const isTouching = ref(false);
+      const fontSize = useFontSize();
+      const { sm } = useDisplay();
       /**
        * @param {string} id
        * @returns {WindowState}
@@ -128,14 +153,28 @@
           // do not clip balloons to target
           return windowComponent?.position;
         }
+        // reduce target size for Tablet View to compensate for the toolbar not overlapping
+        const size = structuredClone(targetSize.value);
+        if (toolboxManager.open.value && sm.value && size) {
+          size.height -= fontSize.value * 3 + 6;
+        }
+
         return getPositionAppliedOnTarget(
           windowComponent?.position,
-          targetSize.value,
+          size,
           getPosition(parentComponent),
         );
       };
       const display = useDisplay();
 
+      const addMobileClass = computed(() => {
+        return display.xs.value && componentIds.length > 0;
+      });
+
+      const addTabletClass = computed(() => {
+        return display.sm.value && componentIds.length > 0;
+      });
+
       /**
        * @param {string} id
        * @returns {import("vue").ComputedRef<Object>}
@@ -143,14 +182,22 @@
       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
+          const zIndexOffset =
+            Number(display.sm.value) || Number(display.xs.value); // add z-Index Offset for Tablet View to keep the windows above the detached Icon
           return {
-            zIndex: windowComponent.zIndex.value + zIndexOffset,
+            zIndex: `${windowComponent.zIndex.value + zIndexOffset} !important`,
             ...getPosition(windowComponent),
             ...(windowComponent?.state?.styles || {}),
           };
         });
 
+      const isOblique = ref(false);
+      // fix search width to oblique map
+      const mobileSearchObliqueListener =
+        app.maps.mapActivated.addEventListener((map) => {
+          isOblique.value = map instanceof ObliqueMap;
+        });
+
       /**
        * @param {string} id
        */
@@ -169,14 +216,6 @@
         moveWindow(id, translation, windowManager, targetSize.value, position);
       };
 
-      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);
       };
@@ -184,11 +223,112 @@
       const setTargetDestroy =
         app.maps.mapActivated.addEventListener(setTargetSize);
 
+      let exclusiveWindowListener;
+
+      /**
+       * Sets up an exclusive window listener for mobile view.
+       * When a new window is added, it removes all other windows except the search window.
+       * The search window is placed at the top of the page and allows opening of one other window, e.g. for displaying feature information.
+       */
+      function setupExclusiveWindowListener() {
+        if (display.xs.value) {
+          exclusiveWindowListener = app.windowManager.added.addEventListener(
+            (e) => {
+              componentIds
+                .filter((id) => id !== e.id)
+                .forEach((id) => {
+                  if (id !== 'searchId') {
+                    app.windowManager.remove(id);
+                  } else if (
+                    id === 'searchId' &&
+                    componentIds.includes('Content')
+                  ) {
+                    app.windowManager.remove('searchId');
+                  }
+                });
+            },
+          );
+        } else {
+          exclusiveWindowListener?.();
+        }
+      }
+
+      setupExclusiveWindowListener();
+
+      watch(display.xs, () => {
+        setupExclusiveWindowListener();
+        if (componentIds.includes(mobileMenuListId)) {
+          windowManager.remove(mobileMenuListId);
+        }
+      });
+
       onUnmounted(() => {
         window.removeEventListener('resize', setTargetSize);
+        exclusiveWindowListener?.();
         setTargetDestroy();
+        mobileSearchObliqueListener();
       });
 
+      /**
+       * Handles the touch start event for mobile view.
+       * Initializes the touch start position and sets the isTouching flag.
+       * Only starts the drag if the touch starts within the first 50 pixels of the window.
+       * @param {TouchEvent} event - The touch start event.
+       */
+      const onTouchStart = (event) => {
+        if (!addMobileClass.value) return; // Only on mobile view
+        const windowElement = event.currentTarget;
+        // Get the Y-coordinate of the drag start relative to the window's top
+        const touchStartYRelativeToWindow =
+          event.touches[0].clientY - windowElement.getBoundingClientRect().top;
+        // Only start drag if the starting position is within the first 50 pixels of the window
+        if (touchStartYRelativeToWindow > 50) return;
+        touchStartY.value = event.touches[0].clientY;
+        touchCurrentY.value = touchStartY.value;
+        isTouching.value = true;
+      };
+
+      /**
+       * Handles the touch move event for mobile view.
+       * Adjusts the window position during drag based on the touch movement.
+       * @param {TouchEvent} event - The touch move event.
+       */
+      const onTouchMove = (event) => {
+        if (!isTouching.value) return;
+        touchCurrentY.value = event.touches[0].clientY;
+
+        // Adjust the window position during drag
+        const deltaY = touchCurrentY.value - touchStartY.value;
+        const windowElement = event.currentTarget;
+        if (windowElement) {
+          windowElement.style.transform = `translateY(${Math.max(0, deltaY)}px)`;
+        }
+      };
+
+      /**
+       * Handles the touch end event for mobile view.
+       * Resets the isTouching flag and checks if the window should be closed based on the drag distance.
+       * @param {TouchEvent} event - The touch end event.
+       * @param {string} id - The ID of the window component.
+       */
+      const onTouchEnd = (event, id) => {
+        if (!isTouching.value) return;
+        isTouching.value = false;
+
+        const deltaY = touchCurrentY.value - touchStartY.value;
+        const windowElement = event.currentTarget;
+
+        if (windowElement) {
+          // reset the transform style so it opens fully again if the window is not fully closed
+          windowElement.style.transform = '';
+
+          // Close if dragged down far enough 1/3 of the window height
+          if (deltaY > windowElement.offsetHeight / 3) {
+            windowManager.remove(id);
+          }
+        }
+      };
+
       return {
         componentIds,
         getComponent: (id) => windowManager.get(id).component,
@@ -209,6 +349,11 @@
         move,
         addMobileClass,
         addTabletClass,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        isOblique,
+        xs: display.xs,
       };
     },
   };

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

@@ -16,5 +16,10 @@ declare const _default: import("vue").DefineComponent<{}, {
     }) => void;
     addMobileClass: import("vue").ComputedRef<boolean>;
     addTabletClass: import("vue").ComputedRef<boolean>;
+    onTouchStart: (event: TouchEvent) => void;
+    onTouchMove: (event: TouchEvent) => void;
+    onTouchEnd: (event: TouchEvent, id: string) => void;
+    isOblique: import("vue").Ref<boolean>;
+    xs: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/navigation/MapNavigation.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container
-    :class="xs ? 'nav-container mobile' : 'nav-container'"
+    :class="
+      xs || mobileLandscape ? 'nav-container mobile no-zoom ' : 'nav-container'
+    "
     class="map-navigation"
   >
     <v-row>
@@ -25,7 +27,7 @@
         ></OrientationToolsButton>
       </v-row>
     </template>
-    <template v-if="smAndUp">
+    <template v-if="smAndUp && !mobileLandscape">
       <v-row justify="center">
         <VcsZoomButton
           @zoom-out="zoomOut()"
@@ -33,7 +35,7 @@
           :disabled="movementApiCallsDisabled"
         />
       </v-row>
-      <v-row justify="center" v-if="is3D && smAndUp">
+      <v-row justify="center" v-if="is3D">
         <TiltSlider v-model="tilt" :disabled="movementApiCallsDisabled" />
       </v-row>
       <v-row v-if="!hideRotationButton && is3D" justify="center">
@@ -45,15 +47,17 @@
           :disabled="rotationAction.disabled"
         />
       </v-row>
-      <v-row justify="center">
-        <OrientationToolsButton
-          v-if="homeAction.icon"
-          :icon="homeAction.icon"
-          :tooltip="homeAction.title"
-          @click.stop="homeAction.callback($event)"
-          :disabled="movementApiCallsDisabled"
-        />
-      </v-row>
+    </template>
+    <v-row justify="center">
+      <OrientationToolsButton
+        v-if="homeAction.icon"
+        :icon="homeAction.icon"
+        :tooltip="homeAction.title"
+        @click.stop="homeAction.callback($event)"
+        :disabled="movementApiCallsDisabled"
+      />
+    </v-row>
+    <template v-if="smAndUp && !mobileLandscape">
       <v-row justify="center">
         <OrientationToolsButton
           v-if="showOverviewButton"
@@ -90,6 +94,7 @@
   import TiltSlider from './TiltSlider.vue';
   import ObliqueRotation from './ObliqueRotation.vue';
   import OrientationToolsButton from './OrientationToolsButton.vue';
+  import { isMobileLandscape } from '../vuePlugins/vuetify.js';
 
   /**
    * @description Creates a go-to viewpoint action from a startingViewpointName defined in a module. If no startingViewpointName is defined, uses default map view as fallback.
@@ -280,6 +285,7 @@
       const viewMode = ref(OrientationToolsViewMode.TWO_D);
       const headingRef = ref(0);
       const tiltRef = ref(0);
+      const mobileLandscape = isMobileLandscape();
 
       const handleRenderEvent = ({ map }) => {
         viewMode.value = getViewModeForMap(map);
@@ -306,13 +312,10 @@
           return headingRef.value;
         },
         async set(headingValue) {
-          let vp;
-          if (viewMode.value === OrientationToolsViewMode.OBLIQUE) {
-            vp = await app.maps.activeMap.getViewpoint();
-          } else {
-            vp = app.maps.activeMap.getViewpointSync();
-          }
+          const vp = await app.maps.activeMap.getViewpoint();
+          delete vp.cameraPosition;
           vp.heading = headingValue;
+          vp.animate = true;
           app.maps.activeMap.gotoViewpoint(vp);
         },
       });
@@ -430,6 +433,7 @@
         homeAction,
         rotationAction,
         movementApiCallsDisabled,
+        mobileLandscape,
       };
     },
   };
@@ -445,7 +449,8 @@
     width: unset;
     padding: 12px;
     &.mobile {
-      top: 1rem;
+      // same height as mobile Icon
+      padding-top: 0px;
       right: 1rem;
       bottom: auto;
     }
@@ -456,4 +461,7 @@
       margin-bottom: 0;
     }
   }
+  .no-zoom {
+    touch-action: none; /* Disable gestures like pinch and double-tap zoom */
+  }
 </style>

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

@@ -83,5 +83,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     homeAction: any;
     rotationAction: any;
     movementApiCallsDisabled: import("vue").Ref<boolean>;
+    mobileLandscape: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/search/ResultsComponent.vue

@@ -1,6 +1,7 @@
 <template>
   <v-list
-    class="ma-0 overflow-y-auto vcs-search-results results-component"
+    class="ma-0 overflow-y-auto results-component"
+    :class="xs ? 'vcs-search-results-mobile' : 'vcs-search-results'"
     v-model:selected="highlighted"
   >
     <ResultItem
@@ -8,10 +9,10 @@
       :query="query"
       class="cursor-pointer"
       :class="{
-        'vcs-search-result-border': index < items.length - 1,
+        'vcs-search-result-border': index < renderingItems.length - 1,
         selected: index === selectedIndex,
       }"
-      v-for="(item, index) in items"
+      v-for="(item, index) in renderingItems"
       :key="index"
       :value="item.value"
     />
@@ -21,6 +22,7 @@
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
   import { VList } from 'vuetify/components';
+  import { useDisplay } from 'vuetify';
   import ResultItem from './ResultItem.vue';
 
   /**
@@ -48,6 +50,10 @@
         type: Number,
         default: -1,
       },
+      showSelectedOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const items = computed(() => {
@@ -75,25 +81,43 @@
         },
       );
 
+      const { xs } = useDisplay();
+
+      const highlighted = computed({
+        get() {
+          return selectedRef.value;
+        },
+        set(value) {
+          selectedRef.value = value;
+          const [index] = value;
+          if (index >= 0) {
+            const item = items.value[index];
+            item.clicked();
+          }
+        },
+      });
+
       onUnmounted(() => {
         selectedListener();
       });
 
+      // Dynamically filter items based on showSelectedOnly
+      const renderingItems = computed(() => {
+        if (props.showSelectedOnly) {
+          const index = selectedRef.value[0];
+          if (index !== undefined && index !== null) {
+            return [items.value[index]];
+          } else {
+            return [];
+          }
+        }
+        return items.value;
+      });
+
       return {
-        items,
-        highlighted: computed({
-          get() {
-            return selectedRef.value;
-          },
-          set(value) {
-            selectedRef.value = value;
-            const [index] = value;
-            if (index >= 0) {
-              const item = items.value[index];
-              item.clicked();
-            }
-          },
-        }),
+        renderingItems,
+        highlighted,
+        xs,
       };
     },
   };
@@ -103,6 +127,9 @@
   .vcs-search-results {
     max-height: 400px;
   }
+  .vcs-search-results-mobile {
+    max-height: 300px;
+  }
   .vcs-search-result-border {
     border-bottom: thin solid;
     border-color: rgb(var(--v-theme-base-lighten-2));

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

@@ -11,9 +11,14 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    showSelectedOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
-    items: import("vue").ComputedRef<any[]>;
+    renderingItems: import("vue").ComputedRef<any[]>;
     highlighted: import("vue").WritableComputedRef<never[]>;
+    xs: import("vue").Ref<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: StringConstructor;
@@ -27,8 +32,13 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    showSelectedOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     query: string;
     selectedIndex: number;
+    showSelectedOnly: boolean;
 }, {}>;
 export default _default;