@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/src/navigation/{mapNavCompass.vue → MapNavCompass.vue}

@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="58" height="58" viewBox="0 0 58 58">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="58"
+    height="58"
+    viewBox="0 0 58 58"
+  >
     <g id="Group_1654" data-name="Group 1654" transform="translate(24)">
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
@@ -8,7 +13,7 @@
         d="M4,0,8,13H0Z"
         transform="translate(1)"
         fill="currentColor"
-        @click="emit(0)"
+        @click="emit($event, 0)"
       />
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
@@ -17,17 +22,21 @@
         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)">
+    <g
+      id="Group_1653"
+      data-name="Group 1653"
+      transform="translate(0 33) rotate(-90)"
+    >
       <path
         :class="canEmit ? 'cursor-pointer' : ''"
         id="west_arrow"
         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,10 +45,15 @@
         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">
+    <g
+      id="Group_1672"
+      data-name="Group 1672"
+      transform="translate(1)"
+      v-if="!hideTicks"
+    >
       <line
         id="Line_289-2"
         data-name="Line 289"
@@ -126,7 +140,7 @@
 
 <script>
   /**
-   * The compass with ticks along the border
+   * @description The compass with ticks along the border
    * @vue-prop {boolean} [canEmit=true] - whether to emit click events on cardinal direction arrows or not
    * @vue-prop {boolean} [hideTicks=false] - hide ticks on navigation rose
    * @vue-event {HTMLEvent} direction-click - raised when a cardinal direction arrow is clicked
@@ -143,19 +157,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-primary-lighten1) !important;
+  }
 </style>

package/src/navigation/MapNavigation.vue

@@ -0,0 +1,291 @@
+<template>
+  <v-container
+    :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'"
+  >
+    <v-row>
+      <VcsCompass :view-mode="viewMode" v-model="heading" />
+    </v-row>
+    <v-row v-if="isOblique">
+      <ObliqueRotation v-model="heading" />
+    </v-row>
+    <template v-if="$vuetify.breakpoint.mdAndUp">
+      <v-row justify="center">
+        <VcsZoomButton @zoom-out="zoomOut()" @zoom-in="zoomIn()" />
+      </v-row>
+      <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
+          v-if="showOverviewButton"
+          :icon="overviewAction.icon"
+          :tooltip="overviewAction.title"
+          :color="overviewAction.active ? 'primary' : undefined"
+          @click.stop="overviewAction.callback($event)"
+        />
+      </v-row>
+    </template>
+  </v-container>
+</template>
+
+<script>
+  import { computed, inject, ref, reactive, onUnmounted } from 'vue';
+  import { ObliqueMap, CesiumMap } from '@vcmap/core';
+  import { VContainer, VRow } from 'vuetify/lib';
+  import {
+    createGoToViewpointAction,
+    createOverviewMapAction,
+  } from '../actions/actionHelper.js';
+  import {
+    getWindowComponentOptions,
+    overviewMapLayerSymbol,
+  } from './overviewMap.js';
+  import VcsCompass from './VcsCompass.vue';
+  import VcsZoomButton from './VcsZoomButton.vue';
+  import TiltSlider from './TiltSlider.vue';
+  import ObliqueRotation from './ObliqueRotation.vue';
+  import OrientationToolsButton from './OrientationToolsButton.vue';
+
+  /**
+   * @description Creates a go-to viewpoint action from a startingViewpointName defined in a module
+   * @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 module, where a startingViewpointName was defined
+     * and sets it on the home button action.
+     */
+    const updateStartingViewpoint = () => {
+      let viewpoint = null;
+      for (let idx = app.modules.length - 1; idx >= 0; idx--) {
+        const { startingViewpointName } = app.modules[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.moduleAdded.addEventListener(updateStartingViewpoint),
+      app.moduleRemoved.addEventListener(updateStartingViewpoint),
+    ];
+
+    const destroy = () => {
+      listener.forEach((cb) => cb());
+    };
+
+    return { action, destroy };
+  }
+
+  /**
+   * @enum {string}
+   */
+  const OrientationToolsViewMode = {
+    THREE_D: '3d',
+    TWO_D: '2d',
+    OBLIQUE: 'oblique',
+  };
+
+  function getViewModeForMap(map) {
+    if (map instanceof ObliqueMap) {
+      return OrientationToolsViewMode.OBLIQUE;
+    } else if (map instanceof CesiumMap) {
+      return OrientationToolsViewMode.THREE_D;
+    }
+    return OrientationToolsViewMode.TWO_D;
+  }
+
+  /**
+   * @param {VcsMap} map
+   * @param {boolean} [out=false]
+   * @param {number} [zoomFactor]
+   * @returns {Promise<void>}
+   */
+  async function zoom(map, out = false, zoomFactor = 2) {
+    const viewpoint = await map.getViewpoint();
+    if (out) {
+      viewpoint.distance *= zoomFactor;
+    } else {
+      viewpoint.distance /= zoomFactor;
+    }
+    viewpoint.animate = true;
+    viewpoint.duration = 0.5;
+    viewpoint.cameraPosition = null;
+    await map.gotoViewpoint(viewpoint);
+  }
+
+  export default {
+    components: {
+      OrientationToolsButton,
+      ObliqueRotation,
+      TiltSlider,
+      VcsZoomButton,
+      VcsCompass,
+      VContainer,
+      VRow,
+    },
+    setup() {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const viewMode = ref(OrientationToolsViewMode.TWO_D);
+      const headingRef = ref(0);
+      const tiltRef = ref(0);
+
+      const handleRenderEvent = ({ map }) => {
+        viewMode.value = getViewModeForMap(map);
+        const vp = map.getViewpointSync();
+        if (vp) {
+          headingRef.value = vp.heading;
+          tiltRef.value = vp.pitch;
+        }
+      };
+
+      const postRenderHandler =
+        app.maps.postRender.addEventListener(handleRenderEvent);
+      if (app.maps.activeMap) {
+        handleRenderEvent({ map: app.maps.activeMap });
+      }
+      const heading = computed({
+        get() {
+          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();
+          }
+          vp.heading = headingValue;
+          app.maps.activeMap.gotoViewpoint(vp);
+        },
+      });
+
+      const tilt = computed({
+        get() {
+          return tiltRef.value;
+        },
+        set(tiltValue) {
+          const vp = app.maps.activeMap.getViewpointSync(); // XXX make async and debounce
+          vp.pitch = tiltValue;
+          app.maps.activeMap.gotoViewpoint(vp);
+        },
+      });
+
+      const { action: overviewAction, destroy: overviewDestroy } =
+        createOverviewMapAction(
+          app.overviewMap,
+          getWindowComponentOptions(),
+          app.windowManager,
+        );
+      const showOverviewButton = ref(
+        app.overviewMap.map.layerCollection.size > 0,
+      );
+      const overviewMapListeners = [
+        app.overviewMap.map.layerCollection.added.addEventListener(() => {
+          showOverviewButton.value = true;
+        }),
+        app.overviewMap.map.layerCollection.removed.addEventListener(() => {
+          if (
+            [...app.overviewMap.map.layerCollection].filter(
+              (l) => !l[overviewMapLayerSymbol],
+            ).length < 1 &&
+            app.overviewMap.active
+          ) {
+            app.overviewMap.deactivate();
+            showOverviewButton.value = false;
+          }
+        }),
+      ];
+
+      const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
+
+      onUnmounted(() => {
+        if (overviewDestroy) {
+          overviewDestroy();
+        }
+        postRenderHandler();
+        overviewMapListeners.forEach((cb) => cb());
+        homeDestroy();
+      });
+
+      return {
+        viewMode,
+        heading,
+        tilt,
+        is3D: computed(
+          () => viewMode.value === OrientationToolsViewMode.THREE_D,
+        ),
+        isOblique: computed(
+          () => viewMode.value === OrientationToolsViewMode.OBLIQUE,
+        ),
+        zoomIn() {
+          zoom(app.maps.activeMap);
+        }, // debounce?
+        zoomOut() {
+          zoom(app.maps.activeMap, true);
+        },
+        overviewAction: reactive(overviewAction),
+        showOverviewButton,
+        homeAction,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .nav-container {
+    position: absolute;
+    right: 2rem;
+    bottom: 1rem;
+    width: unset;
+    &.mobile {
+      top: 1rem;
+      right: 1rem;
+      bottom: auto;
+    }
+  }
+  .nav-container > {
+    .row {
+      margin-top: 15px;
+      margin-bottom: 0;
+    }
+  }
+</style>

package/src/navigation/ObliqueRotation.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="d-inline-flex rounded vcs-oblique-orientation">
+    <div class="d-inline-flex rounded inner">
+      <OrientationToolsButton
+        @click="input(-90)"
+        icon="$vcsRotateLeft"
+        tooltip="navigation.obliqueLeftTooltip"
+        elevation="0"
+      />
+      <OrientationToolsButton
+        @click="input(90)"
+        icon="$vcsRotateRight"
+        tooltip="navigation.obliqueRightTooltip"
+        elevation="0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import OrientationToolsButton from './OrientationToolsButton.vue';
+
+  /**
+   * @vue-prop {number} value - the current heading
+   * @vue-event {number} input
+   */
+  export default {
+    name: 'ObliqueRotation',
+    components: { OrientationToolsButton },
+    props: {
+      value: {
+        type: Number,
+        required: true,
+      },
+    },
+    methods: {
+      input(rotation) {
+        let currentValue = this.value + rotation;
+        if (currentValue > 360) {
+          currentValue -= 360;
+        } else if (currentValue < 0) {
+          currentValue += 360;
+        }
+        this.$emit('input', currentValue);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .vcs-oblique-orientation {
+    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
+    .inner {
+      box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;
+    }
+    ::v-deep {
+      .btn-orientation-tools {
+        &:first-child {
+          box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 1px -2px,
+            rgba(0, 0, 0, 0.02) -3px 2px 2px 0, rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
+        }
+        &:last-child {
+          box-shadow: rgba(0, 0, 0, 0.02) 1px 4px 1px -2px,
+            rgba(0, 0, 0, 0.02) 1px 2px 1px 0, rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
+        }
+      }
+    }
+  }
+</style>

package/src/navigation/{orientationToolsButton.vue → OrientationToolsButton.vue}

@@ -1,39 +1,40 @@
 <template>
-  <VcsTooltip
-    :tooltip-position="tooltipPosition"
-    :tooltip="tooltip"
-  >
+  <VcsTooltip :tooltip-position="tooltipPosition" :tooltip="tooltip">
     <template #activator="{ on, attrs }">
       <v-card
-        elevation="2"
         class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
         v-bind="{ ...$attrs, ...attrs }"
         v-on="{ ...$listeners, ...on }"
       >
-        <v-icon v-text="icon" size="16" />
+        <v-icon size="16">{{ icon }}</v-icon>
       </v-card>
     </template>
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-.btn-orientation-tools{
-  &:before{
-    background-color: transparent !important;
+  .btn-orientation-tools {
+    &:before {
+      background-color: transparent !important;
+    }
   }
-}
 </style>
 <script>
-  import { VcsTooltip } from '@vcsuite/ui-components';
+  import { VCard, VIcon } from 'vuetify/lib';
+  import VcsTooltip from '../components/notification/VcsTooltip.vue';
 
   /**
-   * A v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card
+   * @description v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card
    * @vue-prop {string} icon
    * @vue-prop {string} tooltip
    * @vue-prop {string} [tooltip-position='left']
    */
   export default {
     name: 'OrientationToolsButton',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VCard,
+      VIcon,
+    },
     props: {
       icon: {
         type: String,

package/src/navigation/{tiltSlider.vue → TiltSlider.vue}

@@ -1,17 +1,12 @@
 <template>
   <VcsTooltip
-    :tooltip="`Camera pitch: ${Math.round(value)}°`"
+    :tooltip="$t('navigation.pitchTooltip', [Math.round(value)])"
     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">
         <v-slider
-          color="secondary"
-          track-color="accent"
+          track-color="base lighten-3"
           v-model="tilt"
           :max="0"
           :min="-90"
@@ -24,33 +19,63 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-  .vcs-slider{
+  @import '../styles/shades.scss';
+  .vcs-slider {
     ::v-deep {
       .v-slider {
         min-height: 48px;
         margin-top: 8px;
         margin-bottom: 8px;
       }
-      .v-slider__thumb{
+      .v-slider__thumb {
         cursor: pointer;
         border-radius: 3px;
         width: 16px;
         height: 4px;
         border: 0;
         left: -8px;
-        &:before{
+        &:before {
           background-color: transparent;
         }
       }
     }
   }
+  .v-application .theme--light.vcs-slider {
+    ::v-deep {
+      .v-slider {
+        .v-slider__track-container {
+          .v-slider__track-fill {
+            background-color: map-get($shades, 'black') !important;
+          }
+        }
+        .v-slider__thumb {
+          background-color: map-get($shades, 'black') !important;
+        }
+      }
+    }
+  }
+  .v-application .theme--dark.vcs-slider {
+    ::v-deep {
+      .v-slider {
+        .v-slider__track-container {
+          .v-slider__track-fill {
+            background-color: map-get($shades, 'white') !important;
+          }
+        }
+        .v-slider__thumb {
+          background-color: map-get($shades, 'white') !important;
+        }
+      }
+    }
+  }
 </style>
 <script>
   import { clamp } from 'ol/math.js';
-  import { VcsTooltip } from '@vcsuite/ui-components';
+  import { VCard, VSlider } from 'vuetify/lib';
+  import VcsTooltip from '../components/notification/VcsTooltip.vue';
 
   /**
-   * A vertical slider from 0 to -90. pass value with v-model
+   * @description A vertical slider from 0 to -90. pass value with v-model
    * @vue-prop {number} value
    * @vue-event {number} input
    */
@@ -58,6 +83,8 @@
     name: 'TiltSlider',
     components: {
       VcsTooltip,
+      VCard,
+      VSlider,
     },
     props: {
       value: {
@@ -90,7 +117,3 @@
     },
   };
 </script>
-
-<style scoped>
-
-</style>

package/src/navigation/VcsCompass.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-sheet
+    :style="{
+      transform: `rotate(${compassRotation}deg)`,
+    }"
+    @click="$emit('input', 0)"
+    class="h-16 w-16 d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
+    elevation="1"
+  >
+    <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'"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { computed, ref } from 'vue';
+
+  import { VSheet } from 'vuetify/lib';
+  import MapNavCompass from './MapNavCompass.vue';
+
+  /**
+   * @description Compass component to be shown on the map.
+   * @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
+   */
+  export default {
+    name: 'VcsCompass',
+    components: {
+      MapNavCompass,
+      VSheet,
+    },
+    props: {
+      viewMode: {
+        type: String,
+        required: true,
+      },
+      value: {
+        type: Number,
+        default: 0,
+      },
+    },
+    setup(props) {
+      const rotationValue = ref(props.value);
+
+      return {
+        rotationValue,
+        compassRotation: computed(() => -1 * rotationValue.value),
+      };
+    },
+    watch: {
+      value(newValue, oldValue) {
+        let diff = newValue - oldValue;
+        if (diff > 180) {
+          diff -= 360;
+        } else if (diff < -180) {
+          diff += 360;
+        }
+        this.rotationValue += diff;
+      },
+    },
+  };
+</script>