@vcmap/ui 5.0.2 → 5.1.0-rc.2

package/src/application/VcsAttributionsFooter.vue.d.ts

@@ -0,0 +1,26 @@
+declare const _default: import("vue").DefineComponent<{
+    entries: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    attributionAction: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    mergedAttributions: import("vue").ComputedRef<{
+        provider: string;
+        years: string;
+        url: URL;
+    }[]>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    entries: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    attributionAction: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/application/VcsMap.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    mapId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    mapId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/application/VcsNavbar.vue.d.ts

@@ -0,0 +1,45 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    mapActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    contentActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    toolActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    projectActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    shareActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    searchAction: import("vue").Ref<{
+        /**
+         * - reactive and translatable name rendered in overflow
+         */
+        name: string;
+        /**
+         * - reactive and translatable title rendered as tooltip
+         */
+        title?: string | undefined;
+        /**
+         * - icon rendered on the button. If no icon provided, item is rendered in overflow
+         */
+        icon?: string | undefined;
+        /**
+         * - callback function is triggered when the button is clicked
+         */
+        callback: import("../actions/actionHelper.js").ActionCallback;
+        /**
+         * - optional state of button. If active, button is rendered in primary color
+         */
+        active?: boolean | undefined;
+        /**
+         * - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
+         */
+        hasUpdate?: boolean | undefined;
+        /**
+         * - optional background state. If active and background, button is rendered in primary color outlined
+         */
+        background?: boolean | undefined;
+        /**
+         * - optional flag to indicate that the action is disabled
+         */
+        disabled?: boolean | undefined;
+    } | null>;
+    menuActions: import("vue").ComputedRef<import("../actions/actionHelper.js").VcsAction[]>;
+    config: any;
+    logo: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/application/VcsPositionDisplay.vue

@@ -0,0 +1,208 @@
+<template>
+  <span
+    class="d-flex gap-1 px-1"
+    :class="{ 'vcs-position-display': positionDisplayAction.active }"
+  >
+    <VcsButton
+      :tooltip="positionDisplayAction.title"
+      :icon="positionDisplayAction.icon"
+      @click.stop="positionDisplayAction.callback($event)"
+      :custom-classes="customClasses"
+    >
+    </VcsButton>
+    <template
+      v-if="positionDisplayAction.active && transformedPosition.length > 0"
+    >
+      <VcsFormattedNumber
+        prefix="x:"
+        :value="transformedPosition[0]"
+        :fraction-digits="fractionDigits"
+      />
+      <VcsFormattedNumber
+        no-padding
+        prefix="y:"
+        :value="transformedPosition[1]"
+        :fraction-digits="fractionDigits"
+      />
+      <VcsFormattedNumber
+        v-if="transformedPosition[2]"
+        prefix="z:"
+        :value="transformedPosition[2]"
+      />
+    </template>
+    <v-menu
+      :nudge-top="46"
+      :nudge-left="80"
+      v-if="positionDisplayAction.active"
+    >
+      <template #activator="{ on, attrs }">
+        <VcsButton
+          v-bind="attrs"
+          v-on="on"
+          tooltip="footer.positionDisplay.projection"
+          icon="mdi-chevron-down"
+          :custom-classes="customClasses"
+        />
+      </template>
+      <v-list dense>
+        <v-list-item-group v-model="selectedEPSG" color="primary" mandatory>
+          <v-list-item v-for="(item, i) in items" :key="i" :value="item.value">
+            <v-list-item-content>
+              <v-list-item-title>{{ $t(item.text) }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-menu>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  @import '../styles/shades.scss';
+
+  .vcs-position-display {
+    height: 22px;
+    background-color: var(--v-primary-base);
+    span {
+      color: map-get($shades, 'white');
+    }
+
+    ::v-deep {
+      .vcs-formatted-number,
+      .vcs-formatted-number span {
+        font-size: unset;
+        line-height: unset;
+      }
+      .vcs-formatted-number-dense {
+        line-height: unset;
+      }
+    }
+  }
+</style>
+<script>
+  import { computed, inject, onUnmounted, reactive, ref } from 'vue';
+  import {
+    getDefaultProjection,
+    mercatorProjection,
+    wgs84Projection,
+  } from '@vcmap/core';
+  import {
+    VMenu,
+    VList,
+    VListItemGroup,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+  } from 'vuetify/lib';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+  import VcsFormattedNumber from '../components/form-output/VcsFormattedNumber.vue';
+  import PositionDisplayInteraction from './positionDisplayInteraction.js';
+
+  /**
+   * @description Activates an interaction to display the mouse click or mouse move position, depending on the uiConfig property 'positionDisplayEventType'
+   * @vue-computed {string[]} customClasses - changes button color depending on state
+   * @vue-computed {import("ol").Coordinate} transformedPosition - position in selected projection
+   * @vue-computed {number} fractionDigits - number of digits depending on selected projection
+   */
+  export default {
+    name: 'VcsPositionDisplay',
+    components: {
+      VcsFormattedNumber,
+      VcsButton,
+      VMenu,
+      VList,
+      VListItemGroup,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const move =
+        app.uiConfig.getByKey('positionDisplayEventType')?.value === 'move';
+
+      const position = ref([]);
+
+      const interaction = new PositionDisplayInteraction({ position, move });
+      app.maps.eventHandler.addPersistentInteraction(interaction);
+
+      const defaultProjection = getDefaultProjection();
+
+      const projections = {
+        [defaultProjection.epsg]: defaultProjection,
+        [wgs84Projection.epsg]: wgs84Projection,
+      };
+      const selectedEPSG = ref(defaultProjection.epsg);
+
+      function getProjectionItems() {
+        return Object.keys(projections).map((epsg) => {
+          return {
+            text: projections[epsg].alias || epsg,
+            value: epsg,
+          };
+        });
+      }
+
+      const items = ref(getProjectionItems());
+
+      function setMove() {
+        interaction.setMove(
+          app.uiConfig.getByKey('positionDisplayEventType')?.value === 'move',
+        );
+      }
+
+      const listener = [
+        app.moduleAdded.addEventListener(() => {
+          const newDefaultProjection = getDefaultProjection();
+          projections[newDefaultProjection.epsg] = newDefaultProjection;
+          selectedEPSG.value = newDefaultProjection.epsg;
+          items.value = getProjectionItems();
+          setMove();
+        }),
+        app.moduleRemoved.addEventListener(setMove),
+      ];
+
+      onUnmounted(() => {
+        listener.forEach((cb) => cb());
+      });
+
+      const positionDisplayAction = reactive({
+        name: 'position',
+        title: 'footer.positionDisplay.title',
+        icon: '$vcsAxis',
+        active: false,
+        callback() {
+          this.active = !this.active;
+          interaction.setActive(this.active);
+        },
+      });
+
+      const customClasses = computed(() => {
+        return positionDisplayAction.active ? ['primary'] : [];
+      });
+
+      const transformedPosition = computed(() => {
+        if (position.value.length > 0) {
+          return mercatorProjection.transformTo(
+            projections[selectedEPSG.value],
+            position.value,
+          );
+        }
+        return [];
+      });
+
+      const fractionDigits = computed(() => {
+        return selectedEPSG.value === wgs84Projection.epsg ? 6 : 2;
+      });
+
+      return {
+        positionDisplayAction,
+        transformedPosition,
+        fractionDigits,
+        selectedEPSG,
+        items,
+        customClasses,
+      };
+    },
+  };
+</script>

package/src/application/VcsPositionDisplay.vue.d.ts

@@ -0,0 +1,18 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    positionDisplayAction: {
+        name: string;
+        title: string;
+        icon: string;
+        active: boolean;
+        callback: () => void;
+    };
+    transformedPosition: import("vue").ComputedRef<import("ol/coordinate.js").Coordinate>;
+    fractionDigits: import("vue").ComputedRef<2 | 6>;
+    selectedEPSG: import("vue").Ref<string>;
+    items: import("vue").Ref<{
+        text: any;
+        value: string;
+    }[]>;
+    customClasses: import("vue").ComputedRef<string[]>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/application/VcsSettings.vue.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    language: import("vue").WritableComputedRef<string>;
+    languages: import("vue").Ref<never[]>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/src/application/VcsTextPage.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-sheet>
+    <v-container>
+      <div v-html="markedHtml"></div>
+    </v-container>
+  </v-sheet>
+</template>
+
+<style lang="scss" scoped>
+  @import '../styles/shades.scss';
+
+  .theme--light {
+    a {
+      color: map-get($shades, 'black');
+    }
+  }
+  .theme--dark {
+    a {
+      color: map-get($shades, 'white');
+    }
+  }
+  a {
+    &:hover {
+      color: var(--v-primary-base);
+    }
+    &:before {
+      content: '\00a9';
+    }
+  }
+</style>
+
+<script>
+  import { computed, getCurrentInstance } from 'vue';
+  import { VContainer, VSheet } from 'vuetify/lib';
+  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+
+  /**
+   * @description Is a component to render and sanitize a String
+   * @vue-prop {string} content - The markdown content to be rendered. Is translatable and will be sanitized.
+   */
+  export default {
+    name: 'VcsTextPage',
+    components: {
+      VSheet,
+      VContainer,
+    },
+    props: {
+      content: {
+        type: String,
+        default: () => '',
+      },
+    },
+    setup(props) {
+      const vm = getCurrentInstance().proxy;
+      const markedHtml = computed(() => {
+        const translatedContent = vm.$t(props.content);
+        return parseAndSanitizeMarkdown(translatedContent);
+      });
+
+      return {
+        markedHtml,
+      };
+    },
+  };
+</script>

package/src/application/VcsTextPage.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import("vue").DefineComponent<{
+    content: {
+        type: StringConstructor;
+        default: () => "";
+    };
+}, {
+    markedHtml: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        default: () => "";
+    };
+}>>, {
+    content: string;
+}>;
+export default _default;

package/src/application/VcsTextPageFooter.vue

@@ -0,0 +1,89 @@
+<template>
+  <span class="d-inline-block text-truncate mr-10 setmargin">
+    <span v-if="textPage.url" class="imprint-span imprint button">
+      <a :href="textPage.url" class="link" target="_blank"
+        >{{ $t(textPage.title) }} <span></span>
+      </a>
+    </span>
+
+    <span
+      v-else
+      class="imprint-span imprint button link"
+      @click="addTextPage()"
+      >{{ $t(textPage.title) }}</span
+    >
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .button {
+    cursor: pointer !important;
+  }
+  .setmargin {
+    margin-right: 2px !important;
+  }
+  .imprint {
+    margin-left: 2px;
+  }
+  .link {
+    text-decoration: underline;
+  }
+  .imprint-span {
+    font-size: smaller;
+
+    &:first-child::before {
+      content: '';
+    }
+    span {
+      font-size: inherit;
+    }
+  }
+</style>
+
+<script>
+  import { inject } from 'vue';
+  import VcsTextPage from './VcsTextPage.vue';
+  import { vcsAppSymbol } from '../pluginHelper.js';
+  import { WindowSlot } from '../manager/window/windowManager.js';
+
+  export default {
+    name: 'VcsTextPageFooter',
+    components: {},
+    props: {
+      textPage: {
+        type: Object,
+        required: true,
+      },
+      windowId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const app = inject('vcsApp');
+      const { content } = props.textPage;
+
+      function addTextPage() {
+        app.windowManager.add(
+          {
+            id: props.windowId,
+            component: VcsTextPage,
+            state: {
+              headerTitle: props.textPage.title,
+            },
+            slot: WindowSlot.DYNAMIC_RIGHT,
+            position: {
+              width: 600,
+            },
+            props: { content },
+          },
+          vcsAppSymbol,
+        );
+      }
+
+      return {
+        addTextPage,
+      };
+    },
+  };
+</script>

package/src/application/VcsTextPageFooter.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: import("vue").DefineComponent<{
+    textPage: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    windowId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    addTextPage: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    textPage: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    windowId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/application/attributionsHelper.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @typedef {Object} Attribution.Options
+ * @property {string} provider - name of the data provider
+ * @property {number} [year] - year of dataset
+ * @property {URL} url - link to data provider
+ */
+/**
+ * @typedef {Object} AttributionEntry
+ * @property {string} key - name of the VcsObject the attribution applies to
+ * @property {string} title - title of the VcsObject the attribution applies to
+ * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ */
+/**
+ * merges attribution entries of same providers
+ * @param {Array<AttributionEntry>} entries
+ * @returns {Array<{provider: string, years: string, url: URL}>}
+ */
+export function mergeAttributions(entries: Array<AttributionEntry>): Array<{
+    provider: string;
+    years: string;
+    url: URL;
+}>;
+/**
+ * Gets attributions of all active maps, layers and oblique collections and returns an array of entries.
+ * Each entry is defined by a key derived from the object's className and name, and it's associated attributions.
+ * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
+ * Returns a destroy function to clear listeners.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
+ */
+export function getAttributions(app: import("../vcsUiApp.js").default): {
+    entries: import("vue").Ref<Array<AttributionEntry>>;
+    destroy: () => void;
+};
+export namespace Attribution {
+    type Options = {
+        /**
+         * - name of the data provider
+         */
+        provider: string;
+        /**
+         * - year of dataset
+         */
+        year?: number | undefined;
+        /**
+         * - link to data provider
+         */
+        url: URL;
+    };
+}
+export type AttributionEntry = {
+    /**
+     * - name of the VcsObject the attribution applies to
+     */
+    key: string;
+    /**
+     * - title of the VcsObject the attribution applies to
+     */
+    title: string;
+    /**
+     * - attributions of a map, layer or oblique collection
+     */
+    attributions: Attribution.Options | Array<Attribution.Options>;
+};

package/src/application/attributionsHelper.js

@@ -58,7 +58,7 @@ export function mergeAttributions(entries) {
  * Each entry is defined by a key derived from the object's className and name, and it's associated attributions.
  * Listens to state changes of maps, layers and oblique collections and synchronizes the entries array correspondingly.
  * Returns a destroy function to clear listeners.
- * @param {import("ui").VcsUiApp} app
+ * @param {import("../vcsUiApp.js").default} app
  * @returns {{entries: import("vue").Ref<Array<AttributionEntry>>, destroy: function():void}}
  */
 export function getAttributions(app) {

package/src/application/markdownHelper.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {string} content
+ * @returns {string}
+ */
+export function parseAndSanitizeMarkdown(content: string): string;

package/src/application/markdownHelper.js

@@ -0,0 +1,11 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+/**
+ * @param {string} content
+ * @returns {string}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function parseAndSanitizeMarkdown(content) {
+  return DOMPurify.sanitize(marked(content));
+}

package/src/application/positionDisplayInteraction.d.ts

@@ -0,0 +1,42 @@
+export default PositionDisplayInteraction;
+export type PositionDisplayInteractionOptions = {
+    position: import("vue").Ref<import("ol/coordinate.js").Coordinate>;
+    /**
+     * - whether to be active on move or not
+     */
+    move: boolean | null;
+};
+/**
+ * @typedef {Object} PositionDisplayInteractionOptions
+ * @property {import("vue").Ref<import("ol/coordinate.js").Coordinate>} position
+ * @property {?boolean} move - whether to be active on move or not
+ */
+/**
+ * @class
+ * @extends {import("@vcmap/core").AbstractInteraction}
+ */
+declare class PositionDisplayInteraction {
+    /**
+     * @param {PositionDisplayInteractionOptions} options
+     */
+    constructor(options: PositionDisplayInteractionOptions);
+    /**
+     * @type {import("vue").Ref<import("ol/coordinate.js").Coordinate>}
+     */
+    position: import("vue").Ref<import("ol/coordinate.js").Coordinate>;
+    /**
+     * @type {boolean}
+     */
+    _move: boolean;
+    _defaultActive: number;
+    get move(): boolean;
+    /**
+     * @param {boolean} move
+     */
+    setMove(move: boolean): void;
+    /**
+     * @param {import("@vcmap/core").InteractionEvent} event
+     * @returns {Promise<import("@vcmap/core").InteractionEvent>}
+     */
+    pipe(event: import("@vcmap/core").InteractionEvent): Promise<import("@vcmap/core").InteractionEvent>;
+}