@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/src/manager/toolbox/ToolboxGroupComponent.vue

@@ -1,128 +0,0 @@
-<template>
-  <div v-if="actions.length > 0">
-    <VcsButton
-      v-if="singleActionButton"
-      :key="singleActionButton.name"
-      :tooltip="singleActionButton.title"
-      :icon="singleActionButton.icon"
-      :active="singleActionButton.active"
-      @click.stop="singleActionButton.callback($event)"
-      v-bind="{...$attrs}"
-    />
-    <VcsButton
-      v-else-if="groupButtons.length > 0"
-      v-bind="{...$attrs}"
-      width="48"
-      :icon="groupIcon"
-      :tooltip="groupTitle"
-      :active="active"
-      @click="$emit('click')"
-    >
-      <v-icon v-text="active ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
-    </VcsButton>
-    <v-toolbar
-      v-if="active"
-      dense
-      absolute
-      :width="width"
-      class="toolbar__secondary rounded-b mx-auto v-sheet mt-12 px-4"
-      :style="{left: `${nudgeLeft}px` }"
-    >
-      <v-toolbar-items class="w-full">
-        <div class="d-flex align-center justify-space-between w-full action-btn-wrap">
-          <VcsButton
-            v-for="(button, index) in groupButtons"
-            :key="`${button.name}-${index}`"
-            :tooltip="button.title"
-            :icon="button.icon"
-            :active="button.active"
-            @click.stop="button.callback($event)"
-            small
-            :width="buttonSize"
-            v-bind="{...$attrs}"
-          />
-        </div>
-      </v-toolbar-items>
-    </v-toolbar>
-  </div>
-</template>
-<style lang="scss" scoped>
-.action-btn-wrap{
-  gap: 8px;
-}
-.v-toolbar.v-sheet {
-  background-color: #ffffffda;
-}
-</style>
-<script>
-
-  import VcsButton from '../../components/buttons/VcsButton.vue';
-  import { validateActions } from '../../components/lists/VcsActionList.vue';
-
-  /**
-   * @description
-   * A component rendering a single action or a group of actions in a dropdown toolbox using {@link VcsButton} and {@link ToolboxButton}.
-   * @vue-prop {Array<VcsAction>} actions - Array of actions
-   * @vue-prop {string} [groupIcon=''] - optional icon for group dropdown button
-   * @vue-prop {string} [groupTitle=''] - optional title for group dropdown button
-   * @vue-prop {boolean} active - boolean flag, whether group is active
-   * @vue-prop {boolean} position - relative x-position of the button within the toolbar
-   * @vue-computed {Array<VcsAction>} singleActionButton - single button without dropdown
-   * @vue-computed {Array<VcsAction>} groupButtons - buttons rendered below group dropdown button
-   * @vue-computed {number} nudgeLeft - offset depending on buttonSize and buttonPadding to render toolbox centered below dropdown button
-   */
-  export default {
-    name: 'ToolboxGroupComponent',
-    components: { VcsButton },
-    props: {
-      actions: {
-        type: Array,
-        required: true,
-        validator: validateActions,
-      },
-      groupIcon: {
-        type: String,
-        required: true,
-      },
-      groupTitle: {
-        type: String,
-        default: '',
-      },
-      active: {
-        type: Boolean,
-        required: true,
-      },
-      position: {
-        type: Number,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        buttonSize: 34,
-        buttonPadding: 8,
-      };
-    },
-    computed: {
-      singleActionButton() {
-        if (this.actions.length === 1) {
-          return this.actions[0];
-        }
-        return undefined;
-      },
-      groupButtons() {
-        if (this.singleActionButton) {
-          return [];
-        }
-        return this.actions;
-      },
-      width() {
-        // XXX can this be solved by CSS to get rid of hardcoded size and padding?
-        return this.groupButtons.length * (this.buttonSize + 2 * this.buttonPadding);
-      },
-      nudgeLeft() {
-        return this.position - this.width / 2;
-      },
-    },
-  };
-</script>

package/src/navigation/mapNavigation.vue

@@ -1,205 +0,0 @@
-<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>
-    <v-row justify="center" v-if="$vuetify.breakpoint.mdAndUp">
-      <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" v-if="$vuetify.breakpoint.mdAndUp">
-      <OrientationToolsButton
-        :icon="overviewAction.icon"
-        :tooltip="overviewAction.title"
-        :color="overviewAction.active ? 'primary' : undefined"
-        @click.stop="overviewAction.callback($event)"
-      />
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-  import { computed, inject, ref, onUnmounted } from '@vue/composition-api';
-  import { ObliqueMap, CesiumMap, OpenlayersMap } from '@vcmap/core';
-  import { unByKey } from 'ol/Observable.js';
-  import { createOverviewMapAction } from '../actions/actionHelper.js';
-  import { getWindowComponentOptions } 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';
-
-  /**
-   * @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 {Ref<number>} headingRef
-   * @param {Ref<number>} tiltRef
-   * @returns {function():void}
-   */
-  function mapPostRender(map, headingRef, tiltRef) {
-    const handler = () => {
-      const vp = map.getViewPointSync();
-      if (vp) {
-        headingRef.value = vp.heading;
-        tiltRef.value = vp.pitch;
-      }
-    };
-
-    if (map instanceof CesiumMap) {
-      return map.getScene().postRender.addEventListener(handler);
-    } else if (map instanceof ObliqueMap || map instanceof OpenlayersMap) {
-      const key = map.olMap.on('postrender', handler);
-      return () => {
-        unByKey(key);
-      };
-    }
-    return () => {};
-  }
-
-  /**
-   * @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,
-    },
-    setup() {
-      /** @type {VcsApp} */
-      const app = inject('vcsApp');
-      const viewMode = ref(OrientationToolsViewMode.TWO_D);
-      const headingRef = ref(0);
-      const tiltRef = ref(0);
-
-      let postRenderHandler = () => {};
-
-      const setActiveMap = (map) => {
-        viewMode.value = getViewModeForMap(map);
-        postRenderHandler();
-        postRenderHandler = mapPostRender(map, headingRef, tiltRef);
-      };
-
-      app.maps.mapActivated.addEventListener(setActiveMap);
-      setActiveMap(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, destroy } = createOverviewMapAction(
-        app.overviewMap,
-        getWindowComponentOptions(),
-        app.windowManager,
-      );
-
-      onUnmounted(() => {
-        if (destroy) {
-          destroy();
-        }
-      });
-
-      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); },
-        left: () => {},
-        right: () => {},
-        overviewAction: ref(action),
-      };
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .nav-container {
-    position: absolute;
-    right: 2rem;
-    bottom: 2rem;
-    width: unset;
-    &.mobile{
-      top: 1rem;
-      right: 1rem;
-      bottom: auto;
-    }
-  }
-  .nav-container > {
-    .row {
-      margin-bottom: 15px;
-    }
-  }
-</style>

package/src/navigation/obliqueRotation.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="d-inline-flex">
-    <OrientationToolsButton
-      @click="input(-90)"
-      icon="mdi-undo"
-      tooltip="Rotate view left"
-    />
-    <OrientationToolsButton
-      @click="input(90)"
-      icon="mdi-redo"
-      tooltip="Rotate view right"
-    />
-  </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 scoped>
-
-</style>

package/src/navigation/vcsCompass.vue

@@ -1,144 +0,0 @@
-<template>
-  <v-sheet
-    ref="compassRef"
-    :style="{
-      transform: `rotate(${compassRotation}deg)`,
-      cursor,
-    }"
-    @mousedown="trackMouse"
-    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"
-      @direction-click="$emit('input', $event)"
-      :can-emit="viewMode === '3d' || viewMode === 'oblique'"
-      :hide-ticks="viewMode === 'oblique'"
-    />
-  </v-sheet>
-</template>
-
-
-<script>
-  import { computed, onUnmounted, ref } from '@vue/composition-api';
-
-  import { fromEvent, merge, of, Subject } from 'rxjs';
-  import { takeUntil, tap } from 'rxjs/operators';
-
-  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,
-    },
-    props: {
-      viewMode: {
-        type: String,
-        required: true,
-      },
-      value: {
-        type: Number,
-        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';
-      });
-
-      const rotationValue = ref(props.value);
-
-      onUnmounted(() => {
-        destroy$.next();
-        destroy$.unsubscribe();
-      });
-
-      return {
-        trackMouse,
-        compassRef,
-        cursor,
-        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>

package/src/navigation/vcsZoomButton.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <OrientationToolsButton
-      @click="$emit('zoom-in')"
-      icon="$vcsPlus"
-      tooltip="Zoom in"
-    />
-    <OrientationToolsButton
-      @click="$emit('zoom-out')"
-      icon="$vcsMinus"
-      tooltip="Zoom out"
-    />
-  </div>
-</template>
-
-<script>
-  import OrientationToolsButton from './orientationToolsButton.vue';
-
-  /**
-   * 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
-   */
-  export default {
-    components: { OrientationToolsButton },
-  };
-</script>

package/start.js

@@ -1,3 +0,0 @@
-import { initApp } from '@vcmap/ui';
-
-initApp('#app', 'map.config.json');