@vcmap/ui 5.0.0-rc.10

package/src/navigation/tiltSlider.vue

@@ -0,0 +1,96 @@
+<template>
+  <VcsTooltip
+    :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-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 '../components/notification/VcsTooltip.vue';
+
+  /**
+   * 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="navigation.zoomInTooltip"
+    />
+    <OrientationToolsButton
+      @click="$emit('zoom-out')"
+      icon="$vcsMinus"
+      tooltip="navigation.zoomOutTooltip"
+    />
+  </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,11 @@
+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,25 @@
+:root {
+  --vcs-primary-logo: url('../assets/logo.svg');
+  --vcs-mobile-logo: url('../assets/logo-mobile.svg');
+}
+
+.company-logo {
+  background-image: var(--vcs-primary-logo);
+  height: 36px;
+  width: 151px;
+  margin: 0 auto;
+}
+.company-logo-mobile {
+  background-image: var(--vcs-mobile-logo);
+  height: 40px;
+  width: 70px;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1;
+}
+
+// Dev-Only!
+.bg-dev.theme--light.v-application {
+  background-color: var(--v-primary-base);
+}

package/src/styles/_typography.scss

@@ -0,0 +1,42 @@
+.v-application {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  div,
+  span,
+  button,
+  input,
+  .caption,
+  .tooltip,
+  p {
+    &:not(.v-icon) {
+      font-family: 'Titillium Web', sans-serif !important;
+    }
+  }
+
+  h1 {
+    font-size: 16px;
+  }
+
+  h2 {
+    font-size: 14px;
+  }
+
+  h3 {
+    font-size: 12px;
+    font-weight: normal;
+  }
+
+  h4 {
+    font-size: 12px;
+    font-weight: normal;
+    color: rgba(#222222, 0.5);
+  }
+
+  .text--disabled {
+    color: rgba(0, 0, 0, 0.38) !important;
+  }
+}

package/src/styles/main.scss

@@ -0,0 +1,12 @@
+@import './utils/all';
+
+@import './theming';
+@import './typography';
+@import './variables';
+@import './vcsFont';
+@import './vcsGrid';
+
+html.vcs-ui {
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+}

package/src/styles/utils/_all.scss

@@ -0,0 +1,12 @@
+@import './border';
+@import './cursor';
+@import './display';
+@import './fade-in';
+@import './transform';
+@import './position';
+@import './size';
+@import './slide-in';
+@import './spacing';
+@import './text';
+@import './transition';
+@import './z-index';

package/src/styles/utils/_border.scss

@@ -0,0 +1,7 @@
+.border-1--primary {
+  border: 1px solid var(--v-primary-base);
+}
+
+.border-2--primary {
+  border: 2px solid var(--v-primary-base);
+}

package/src/styles/utils/_cursor.scss

@@ -0,0 +1,15 @@
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed !important;
+}
+
+.user-select-none {
+  user-select: none;
+}

package/src/styles/utils/_display.scss

@@ -0,0 +1,3 @@
+.d-contents {
+  display: contents;
+}

package/src/styles/utils/_fade-in.scss

@@ -0,0 +1,8 @@
+.fade-in-100-ease-enter-active,
+.fade-in-100-ease-leave-active {
+  transition: opacity 0.1s ease;
+}
+.fade-in-100-ease-enter,
+.fade-in-100-ease-leave-to {
+  opacity: 0;
+}

package/src/styles/utils/_position.scss

@@ -0,0 +1,38 @@
+.position-absolute {
+  position: absolute;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.pos-a-0 {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.pos-t-0 {
+  top: 0;
+}
+
+.pos-t-11 {
+  top: 44px;
+}
+
+.pos-r-0 {
+  right: 0;
+}
+
+.pos-r-1 {
+  right: 4px;
+}
+
+.pos-r-8 {
+  right: 32px;
+}
+
+.pos-b-4 {
+  bottom: 16px;
+}

package/src/styles/utils/_size.scss

@@ -0,0 +1,79 @@
+.w-full {
+  width: 100%;
+}
+
+.w-half {
+  width: 50%;
+}
+
+.w-max-half {
+  max-width: 50% !important;
+}
+
+.w-max-unset {
+  max-width: unset !important;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-3 {
+  height: 12px;
+}
+
+.h-6 {
+  height: 24px;
+}
+
+.h-8 {
+  height: 32px;
+}
+
+.h-8 {
+  height: 32px;
+}
+
+.h-10 {
+  height: 40px;
+}
+
+.h-10\.5 {
+  height: 42px;
+}
+
+.h-12 {
+  height: 48px;
+}
+
+.h-16 {
+  height: 64px;
+}
+
+.w-3 {
+  width: 12px;
+}
+
+.w-4 {
+  width: 16px;
+}
+
+.w-8 {
+  width: 32px;
+}
+
+.w-16 {
+  width: 64px;
+}
+
+.w-12 {
+  width: 48px;
+}
+
+.w-13 {
+  width: 52px;
+}
+
+.w-max-16 {
+  max-width: 64px !important;
+}

package/src/styles/utils/_slide-in.scss

@@ -0,0 +1,26 @@
+.slide-from-left-300-ease-enter-active,
+.slide-from-left-300-ease-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-from-left-300-ease-enter,
+.slide-from-left-300-ease-leave-to {
+  transform: translateX(-120%);
+}
+
+.slide-from-top-200-ease-enter-active,
+.slide-from-top-200-ease-leave-active {
+  transition: transform 0.2s ease;
+}
+.slide-from-top-200-ease-enter,
+.slide-from-top-200-ease-leave-to {
+  transform: translateY(-120%);
+}
+
+.slide-from-top-300-ease-enter-active,
+.slide-from-top-300-ease-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-from-top-300-ease-enter,
+.slide-from-top-300-ease-leave-to {
+  transform: translateY(-120%);
+}

package/src/styles/utils/_spacing.scss

@@ -0,0 +1,11 @@
+.-mt-2 {
+  margin-top: -8px;
+}
+.-mx-2 {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+.-mx-3 {
+  margin-left: -12px;
+  margin-right: -12px;
+}