@vcmap/ui 5.0.0-rc.6

package/src/navigation/mapNavigation.vue

@@ -0,0 +1,176 @@
+<template>
+  <v-container class="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">
+      <VcsZoomButton
+        @zoom-out="zoomOut()"
+        @zoom-in="zoomIn()"
+      />
+    </v-row>
+    <v-row v-if="is3D" justify="center">
+      <TiltSlider v-model="tilt" />
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+  import { computed, inject, ref } from '@vue/composition-api';
+  import { ObliqueMap, CesiumMap, OpenlayersMap } from '@vcmap/core';
+  import { unByKey } from 'ol/Observable.js';
+  import VcsCompass from './vcsCompass.vue';
+  import VcsZoomButton from './vcsZoomButton.vue';
+  import TiltSlider from './tiltSlider.vue';
+  import ObliqueRotation from './obliqueRotation.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: {
+      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);
+        },
+      });
+
+      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: () => {},
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .nav-container {
+    position: absolute;
+    right: 2rem;
+    bottom: 2rem;
+    width: unset;
+  }
+
+  .nav-container > {
+    .row {
+      margin-bottom: 15px;
+    }
+  }
+</style>

package/src/navigation/obliqueRotation.vue

@@ -0,0 +1,48 @@
+<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/orientationToolsButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <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-card>
+    </template>
+  </VcsTooltip>
+</template>
+<style lang="scss" scoped>
+.btn-orientation-tools{
+  &:before{
+    background-color: transparent !important;
+  }
+}
+</style>
+<script>
+  import { VcsTooltip } from '@vcsuite/ui-components';
+
+  /**
+   * A 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 },
+    props: {
+      icon: {
+        type: String,
+        required: true,
+      },
+      tooltip: {
+        type: String,
+        required: true,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'left',
+      },
+    },
+  };
+</script>

package/src/navigation/tiltSlider.vue

@@ -0,0 +1,96 @@
+<template>
+  <VcsTooltip
+    :tooltip="`Camera pitch: ${Math.round(value)}°`"
+    tooltip-position="left"
+  >
+    <template #activator="{ on, attrs }">
+      <v-card
+        class="w-8"
+        v-on="on"
+        v-bind="attrs"
+      >
+        <v-slider
+          color="secondary"
+          track-color="accent"
+          v-model="tilt"
+          :max="0"
+          :min="-90"
+          vertical
+          hide-details
+          class="vcs-slider"
+        />
+      </v-card>
+    </template>
+  </VcsTooltip>
+</template>
+<style lang="scss" scoped>
+  .vcs-slider{
+    ::v-deep {
+      .v-slider {
+        min-height: 48px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+      .v-slider__thumb{
+        cursor: pointer;
+        border-radius: 3px;
+        width: 16px;
+        height: 4px;
+        border: 0;
+        left: -8px;
+        &:before{
+          background-color: transparent;
+        }
+      }
+    }
+  }
+</style>
+<script>
+  import { clamp } from 'ol/math.js';
+  import { VcsTooltip } from '@vcsuite/ui-components';
+
+  /**
+   * A vertical slider from 0 to -90. pass value with v-model
+   * @vue-prop {number} value
+   * @vue-event {number} input
+   */
+  export default {
+    name: 'TiltSlider',
+    components: {
+      VcsTooltip,
+    },
+    props: {
+      value: {
+        type: Number,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        localValue: Math.round(this.value),
+      };
+    },
+    watch: {
+      value() {
+        this.localValue = clamp(Math.round(this.value), -90, 0);
+      },
+    },
+    computed: {
+      tilt: {
+        get() {
+          return this.localValue;
+        },
+        set(value) {
+          if (value !== this.localValue) {
+            this.localValue = value;
+            this.$emit('input', value);
+          }
+        },
+      },
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/navigation/vcsCompass.vue

@@ -0,0 +1,144 @@
+<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

@@ -0,0 +1,27 @@
+<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/src/pluginHelper.js

@@ -0,0 +1,106 @@
+import { check } from '@vcsuite/check';
+import { getLogger as getLoggerByName } from '@vcsuite/logger';
+
+/**
+ * @returns {Logger}
+ */
+function getLogger() {
+  return getLoggerByName('plugin-helpers');
+}
+
+/**
+ * @type {symbol}
+ */
+export const vcsAppSymbol = Symbol('vcsApp');
+
+/**
+ * @type {symbol}
+ * @private
+ */
+export const pluginFactorySymbol = Symbol('pluginFactory');
+
+/**
+ * validates the name according to package name pattern
+ * @param {string} name
+ * @returns {boolean}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function isValidPackageName(name) {
+  check(name, String);
+
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
+}
+
+/**
+ * @param {VcsUiApp} app
+ * @param {string} name
+ * @param {PluginConfig} config
+ * @param {string} [registry='https://plugins.virtualcitymap.de/']
+ * @returns {Promise<VcsPlugin|null>}
+ */
+export async function loadPlugin(app, name, config, registry = 'https://plugins.virtualcitymap.de/') {
+  let module = config.entry;
+
+  if (!module) {
+    module = `${registry.replace(/\/?$/, '')}/${name}/${config.version || '*'}/index.js`;
+  } else if (!/^(https?:\/\/|\/)/.test(module)) {
+    module = `${window.location.origin}${window.location.pathname.replace(/\/?$/, '/')}${module}`;
+  } else if (module === '_dev') {
+    module = `/${name}.js`;
+  }
+
+  // if (!context.security.isTrustedUrl(module)) { XXX missing pipeline security
+  //   getLogger().warning(`suppressed loading of insecure plugin ${module}`);
+  //   return Promise.resolve();
+  // }
+
+  try {
+    let plugin;
+    if (window.VcsPluginLoaderFunction) { // TODO PluginLoaderfunction needs to be documented.
+      plugin = await window.VcsPluginLoaderFunction(name, module);
+    } else {
+      plugin = await import(/* @vite-ignore */ module);
+    }
+    if (plugin.default == null || typeof plugin.default !== 'function') {
+      getLogger().error(`plugin ${name} does not provide a default exported function`);
+      return null;
+    }
+    const pluginInstance = await plugin.default(config);
+
+    if (!pluginInstance.name) {
+      getLogger().error(`plugin ${name} does not expose a name`);
+      if (pluginInstance.destroy) {
+        pluginInstance.destroy();
+      }
+      return null;
+    }
+    pluginInstance[pluginFactorySymbol] = plugin.default;
+    return pluginInstance;
+  } catch (err) {
+    getLogger().error(`failed to load plugin ${name}`);
+    getLogger().error(err);
+  }
+  return null;
+}
+
+/**
+ * @param {VcsPlugin} plugin
+ * @returns {Object}
+ */
+export function serializePlugin(plugin) {
+  const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
+  if (plugin[pluginFactorySymbol]) {
+    serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
+  }
+  return serializedPlugin;
+}
+
+/**
+ * @param {Object} serializedPlugin
+ * @returns {Promise<VcsPlugin>}
+ */
+export async function deserializePlugin(serializedPlugin) {
+  const reincarnation = await serializedPlugin[pluginFactorySymbol](serializedPlugin);
+  reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
+  return reincarnation;
+}

package/src/setup.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import VueCompositionAPI from '@vue/composition-api';
+// eslint-disable-next-line no-unused-vars
+import * as core from '@vcmap/core'; // pull in entire core for vcsClassRegistry
+
+Vue.config.productionTip = false;
+
+Vue.use(VueCompositionAPI);
+
+window.CESIUM_BASE_URL = '/node_modules/@vcmap/cesium/Source/';

package/src/styles/_theming.scss

@@ -0,0 +1,15 @@
+:root {
+  --vcs-primary-logo: url('../assets/logo.svg');
+}
+
+.company-logo {
+  background-image: var(--vcs-primary-logo);
+  height: 36px;
+  width: 151px;
+  margin: 0 auto;
+}
+
+// Dev-Only!
+.bg-dev.theme--light.v-application {
+  background-color: var(--v-primary-base);
+}