@vcmap/ui 5.1.8 → 5.2.1

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

@@ -60,17 +60,12 @@ export function setupAttributions(app: import("../vcsUiApp.js").default): {
     attributionAction: import("../actions/actionHelper.js").VcsAction;
     destroyAttributions: () => void;
 };
-export function setupMapNavigation(app: any): {
-    showMapNavigation: import("vue").Ref<boolean>;
-    destroy: () => void;
-};
 declare const _default: import("vue").DefineComponent<{
     appId: {
         type: StringConstructor;
         required: true;
     };
 }, {
-    mapId: string;
     mobileLogo: import("vue").ComputedRef<any>;
     imprint: import("vue").ComputedRef<{
         title: string;
@@ -82,7 +77,6 @@ declare const _default: import("vue").DefineComponent<{
     } | undefined>;
     attributionEntries: import("vue").Ref<import("./attributionsHelper.js").AttributionEntry[]>;
     attributionAction: import("../actions/actionHelper.js").VcsAction;
-    showMapNavigation: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     appId: {
         type: StringConstructor;

package/src/application/VcsContainer.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-container
+    class="vcs-container pa-0"
+    :class="{ 'vcs-container-xs': $vuetify.breakpoint.xs }"
+    fluid
+    absolute
+  >
+    <template v-if="$vuetify.breakpoint.xs">
+      <img
+        v-if="mobileLogo"
+        :src="mobileLogo"
+        alt="Logo"
+        draggable="false"
+        class="mobile-logo"
+      />
+    </template>
+    <VcsButton
+      v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
+      :key="attributionAction.name"
+      :tooltip="attributionAction.title"
+      :icon="attributionAction.icon"
+      :active="attributionAction.active"
+      @click.stop="attributionAction.callback($event)"
+      class="z-index-1 mobile-attribution-btn"
+    />
+    <PanelManagerComponent />
+    <ToolboxManagerComponent />
+    <WindowManagerComponent />
+    <NotifierComponent />
+  </v-container>
+</template>
+
+<style scoped lang="scss">
+  .vcs-container {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    right: 0;
+    bottom: 22px;
+  }
+
+  .vcs-container-xs {
+    top: 0;
+    bottom: 56px;
+  }
+
+  .mobile-logo {
+    max-height: 40px;
+    max-width: 70px;
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    z-index: 1;
+  }
+
+  .mobile-attribution-btn {
+    position: fixed;
+    right: 2px;
+    bottom: 36px;
+  }
+</style>
+
+<script>
+  import { computed, inject } from 'vue';
+  import { VContainer } from 'vuetify/lib';
+  import PanelManagerComponent from '../manager/panel/PanelManagerComponent.vue';
+  import WindowManagerComponent from '../manager/window/WindowManager.vue';
+  import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+  import NotifierComponent from '../notifier/NotifierComponent.vue';
+  import VcsDefaultLogoMobile from '../logo-mobile.svg';
+
+  /**
+   * @description The main container with map canvas
+   * @vue-prop {VcsAction} attributionAction
+   */
+  export default {
+    components: {
+      VcsButton,
+      PanelManagerComponent,
+      WindowManagerComponent,
+      ToolboxManagerComponent,
+      VContainer,
+      NotifierComponent,
+    },
+    props: {
+      attributionAction: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      const app = inject('vcsApp');
+
+      return {
+        mobileLogo: computed(
+          () =>
+            app.uiConfig.config.value.mobileLogo ??
+            app.uiConfig.config.value.logo ??
+            VcsDefaultLogoMobile,
+        ),
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    attributionAction: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    mobileLogo: 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<{
+    attributionAction: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/application/VcsMainMap.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <VcsMap :map-id="mapId" />
+    <MapNavigation v-if="showMapNavigation" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
+
+<script>
+  import { inject, onMounted, onUnmounted, ref } from 'vue';
+  import { v4 as uuid } from 'uuid';
+  import MapNavigation from '../navigation/MapNavigation.vue';
+  import VcsMap from './VcsMap.vue';
+
+  export function setupMapNavigation(app) {
+    const showMapNavigation = ref(app.maps.size < 1);
+
+    const listeners = [
+      app.maps.added.addEventListener(() => {
+        showMapNavigation.value = true;
+      }),
+      app.maps.removed.addEventListener(() => {
+        if (app.maps.size < 1) {
+          showMapNavigation.value = false;
+        }
+      }),
+    ];
+
+    return {
+      showMapNavigation,
+      destroy: () => {
+        listeners.forEach((cb) => cb());
+      },
+    };
+  }
+
+  /**
+   * @description Wrapper component for a VcsMap providing the map element.
+   * @vue-prop {string} mapId - The id of the map, which is rendered in the map element's canvas
+   */
+  export default {
+    name: 'VcsMainMap',
+    components: { MapNavigation, VcsMap },
+    setup() {
+      const app = inject('vcsApp');
+      const id = uuid();
+      const mapId = `mapCollection-${id}`;
+
+      const { showMapNavigation, destroy: destroyMapNavigationListener } =
+        setupMapNavigation(app);
+
+      onMounted(() => {
+        app.maps.setTarget(mapId);
+        app.mounted.raiseEvent(mapId);
+      });
+
+      onUnmounted(() => {
+        destroyMapNavigationListener();
+      });
+
+      return {
+        mapId,
+        showMapNavigation,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,9 @@
+export function setupMapNavigation(app: any): {
+    showMapNavigation: import("vue").Ref<boolean>;
+    destroy: () => void;
+};
+declare const _default: import("vue").DefineComponent<{}, {
+    mapId: string;
+    showMapNavigation: import("vue").Ref<boolean>;
+}, {}, {}, {}, 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/markdownHelper.d.ts

@@ -3,3 +3,10 @@
  * @returns {string}
  */
 export function parseAndSanitizeMarkdown(content: string): string;
+/**
+ * Replaces template strings by provided attributes, e.g. {{myAttribute}}
+ * @param {string|string[]} template
+ * @param {Record<string, unknown>} attributes
+ * @returns {string}
+ */
+export function replaceAttributes(template: string | string[], attributes: Record<string, unknown>): string;

package/src/application/markdownHelper.js

@@ -5,7 +5,63 @@ 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));
 }
+
+/**
+ * @param {Record<string, unknown>} parent
+ * @param {(string|number)[]} keys
+ * @returns {undefined|T}
+ * @template {*} T
+ */
+function findRecursive(parent, keys) {
+  if (keys.length === 1) {
+    return parent[keys[0]];
+  } else {
+    const nextKey = keys.shift();
+    const nextParent = parent[nextKey];
+    if (nextParent) {
+      return findRecursive(nextParent, keys);
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Replaces template strings by provided attributes, e.g. {{myAttribute}}
+ * @param {string|string[]} template
+ * @param {Record<string, unknown>} attributes
+ * @returns {string}
+ */
+export function replaceAttributes(template, attributes) {
+  const templateString = Array.isArray(template)
+    ? template.join('\n')
+    : template;
+  return templateString.replace(/\{\{([^}]+)}}/g, (p, value) => {
+    const keys = value.trim().split('.');
+
+    for (let i = 0; i < keys.length; i++) {
+      let key = keys[i];
+      if (typeof key === 'string') {
+        const indices = [];
+        let arrayIndex = /\[["']?([^\]]+)["']?]$/.exec(key);
+        while (arrayIndex != null) {
+          let bracketKey = arrayIndex[1];
+          if (/^\d+$/.test(bracketKey)) {
+            bracketKey = Number(bracketKey);
+          }
+          indices.push(bracketKey);
+          key = key.substring(0, arrayIndex.index);
+          arrayIndex = /\[["']?([^\]]+)["']?]$/.exec(key);
+        }
+
+        if (indices.length > 0) {
+          keys.splice(i, 1, key, ...indices);
+        }
+      }
+    }
+
+    return findRecursive(attributes, keys) ?? '';
+  });
+}

package/src/components/form-inputs-controls/VcsRadioGrid.vue

@@ -16,42 +16,22 @@
           v-bind="{ ...$attrs, ...attrs }"
           v-on="{ ...$listeners, ...on }"
         >
-          <v-row no-gutters class="justify-center">
-            <v-col
-              v-for="(item, idx) in items"
-              :key="idx"
-              cols="1"
-              class="mx-2"
-            >
-              <v-row no-gutters>
-                <v-col>
-                  <div
-                    class="d-flex justify-center label-wrapper pt-1"
-                    :class="$attrs.disabled ? 'disabled' : ''"
-                  >
-                    <slot name="label" :value="item[itemValue]" :src="item.src">
-                      <img
-                        :src="item.src"
-                        :alt="item[itemValue]"
-                        class="image"
-                      />
-                    </slot>
-                  </div>
-                </v-col>
-              </v-row>
-              <v-row no-gutters>
-                <v-col>
-                  <v-radio
-                    :value="item[itemValue]"
-                    :ripple="false"
-                    class="ma-0"
-                    :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
-                    :dense="isDense"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
+          <div class="d-flex gap-1 px-2 pt-2 pb-1 justify-center">
+            <div v-for="(item, idx) in items" :key="idx">
+              <div class="pt-1 pb-0" :class="$attrs.disabled ? 'disabled' : ''">
+                <slot name="label" :value="item[itemValue]" :src="item.src">
+                  <img :src="item.src" :alt="item[itemValue]" class="image" />
+                </slot>
+              </div>
+              <v-radio
+                :value="item[itemValue]"
+                :ripple="false"
+                class="ma-0 justify-center"
+                :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
+                :dense="isDense"
+              />
+            </div>
+          </div>
         </v-radio-group>
       </v-container>
     </template>
@@ -60,12 +40,22 @@
 
 <script>
   import { computed, ref } from 'vue';
-  import { VContainer, VRow, VCol, VRadioGroup, VRadio } from 'vuetify/lib';
+  import { VContainer, VRadioGroup, VRadio } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import { useErrorSync } from './composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify radio group} which places icons or raster src files above the radio buttons as labels and arranges them in a grid.
+   * Use figure and figcaption for labeled radio icons:
+   * @example
+   * <VcsRadioGrid v-model="model" items="items" >
+   *    <template #label="{ src, value }">
+   *       <figure>
+   *          <v-icon size="24" class="d-flex justify-center">{{src}}</v-icon>
+   *          <figcaption class="d-flex justify-center">{{ value }}</figcaption>
+   *       </figure>
+   *    </template>
+   * </VcsRadioGrid>
    * @vue-prop {{value: string, src: string}[]} items - The items to be displayed in the grid. The src is the path to the raster image.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
    * @vue-prop {string} itemValue - The key of the provided item objects that contains the value.
@@ -75,8 +65,6 @@
     name: 'VcsRadioGrid',
     components: {
       VContainer,
-      VRow,
-      VCol,
       VRadioGroup,
       VRadio,
       VcsTooltip,
@@ -166,9 +154,6 @@
     height: auto;
     width: auto;
   }
-  .label-wrapper {
-    width: 24px;
-  }
   .disabled {
     opacity: 0.3;
   }

package/src/contentTree/LayerTree.vue

@@ -19,6 +19,7 @@
   import { VSheet } from 'vuetify/lib';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
+  const openStateMapSymbol = Symbol('openStateMap');
   /**
    * @description
    * Implements Treeview and shows content tree
@@ -35,23 +36,48 @@
     setup(props) {
       const app = inject('vcsApp');
       const open = app.contentTree.getTreeOpenStateRef(props.windowState.id);
-
-      const initOpen = app.contentTree
-        .getChildrenForSubTree(props.windowState.id)
-        .filter((i) => i.initOpen)
-        .map((i) => i.name);
-
       const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
 
+      function getWithVisibleChildren(item) {
+        return [
+          item.name,
+          ...item.visibleChildren.map((c) => getWithVisibleChildren(c)).flat(),
+        ];
+      }
+
+      if (!app.contentTree[openStateMapSymbol]) {
+        app.contentTree[openStateMapSymbol] = new Map();
+      }
+      /**
+       * @type {Map<string, string[]>}
+       */
+      const openStateMap = app.contentTree[openStateMapSymbol];
       // watch for new visible children, which should start init open
-      watch(tree, (value, oldValue) => {
-        const changed = value
-          .filter(
-            ({ name }) =>
-              !oldValue.find((o) => o.name === name) && initOpen.includes(name),
-          )
-          .map(({ name }) => name);
-        open.value.push(...changed);
+      watch(
+        tree,
+        (value, oldValue) => {
+          if (openStateMap.has(app.maps.activeMap?.name)) {
+            open.value = openStateMap.get(app.maps.activeMap?.name);
+          } else {
+            const items = [...app.contentTree]
+              .filter((i) => i.initOpen && i.getTreeViewItem().visible)
+              .map(({ name }) => name);
+            const oldValues = oldValue
+              ? oldValue.map(getWithVisibleChildren).flat()
+              : [];
+            const changed = items.filter(
+              (name) => !oldValues.includes(name) && !open.value.includes(name),
+            );
+            open.value.push(...changed);
+          }
+        },
+        { immediate: true },
+      );
+
+      watch(open, () => {
+        if (app.maps.activeMap) {
+          openStateMap.set(app.maps.activeMap.name, [...open.value]);
+        }
       });
 
       return {

package/src/downloadHelper.d.ts

@@ -2,8 +2,6 @@
  * Download a blob
  * @param {string} uri
  * @param {string} fileName
- * @api
- * @export
  */
 export function downloadURI(uri: string, fileName: string): void;
 /**

package/src/downloadHelper.js

@@ -1,17 +1,15 @@
-import { hasSameOrigin } from '@vcmap/core';
+import { isSameOrigin } from '@vcmap/core';
 
 /**
  * Download a blob
  * @param {string} uri
  * @param {string} fileName
- * @api
- * @export
  */
 export function downloadURI(uri, fileName) {
   const link = document.createElement('a');
   link.download = fileName;
   link.href = uri;
-  if (!hasSameOrigin(uri)) {
+  if (!isSameOrigin(uri)) {
     link.target = '_blank';
   }
   link.click();

package/src/featureInfo/BalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mx-auto elevation-0" max-width="400" v-if="position">
+  <v-card class="mx-auto elevation-0" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-2 align-center">
         <v-list-item-avatar tile size="16" class="mr-2">
@@ -28,7 +28,7 @@
 
     <v-card
       class="overflow-y-auto py-2 elevation-0"
-      max-height="250"
+      :max-height="maxHeight"
       color="transparent"
     >
       <slot :attrs="{ ...$props, ...$attrs }">
@@ -56,7 +56,7 @@
   </v-card>
 </template>
 <script>
-  import { inject, onMounted, onUnmounted, watch } from 'vue';
+  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
   import {
     VCard,
     VDivider,
@@ -68,6 +68,10 @@
     VListItemSubtitle,
     VListItemTitle,
   } from 'vuetify/lib';
+  import {
+    getTargetSize,
+    posToNumber,
+  } from '../manager/window/windowHelper.js';
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
@@ -127,6 +131,28 @@
     setup(props, { attrs }) {
       const app = inject('vcsApp');
       const windowId = attrs['window-state'].id;
+      function getMaxHeight() {
+        if (app.windowManager.get(windowId)?.position?.maxHeight) {
+          return (
+            posToNumber(
+              app.windowManager.get(windowId).position.maxHeight,
+              'maxHeight',
+              getTargetSize(app.maps.target),
+            ) - 49 // 44px header offset with padding 5px
+          );
+        }
+        if (app.windowManager.get(windowId)?.position?.height) {
+          return (
+            posToNumber(
+              app.windowManager.get(windowId).position.height,
+              'height',
+              getTargetSize(app.maps.target),
+            ) - 49 // 44px header offset with padding 5px
+          );
+        }
+        return 250;
+      }
+      const maxHeight = ref(getMaxHeight());
 
       let balloonPositionListener = null;
       const destroyListener = () => {
@@ -152,6 +178,7 @@
             windowId,
             props.position,
           );
+          maxHeight.value = getMaxHeight();
         },
       );
 
@@ -168,6 +195,7 @@
         close,
         getTag,
         getTagOptions,
+        maxHeight,
       };
     },
   };

package/src/featureInfo/BalloonComponent.vue.d.ts

@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     close: () => void;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
+    maxHeight: import("vue").Ref<number>;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     featureId: {
         type: StringConstructor;

package/src/featureInfo/IframeComponent.vue

@@ -0,0 +1,55 @@
+<template>
+  <iframe :src="src" :title="title" :style="{ height, width }" />
+</template>
+<script>
+  import { inject } from 'vue';
+  import {
+    getTargetSize,
+    posToNumber,
+  } from '../manager/window/windowHelper.js';
+
+  /**
+   * @description An iframe component
+   * @vue-prop {string} src - Specifies the address of the document to embed in the <iframe>
+   * @vue-prop {string} [title] - optional title for the <iframe>
+   */
+  export default {
+    name: 'IframeComponent',
+    props: {
+      src: {
+        type: String,
+        required: true,
+      },
+      title: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup(props, { attrs }) {
+      const app = inject('vcsApp');
+      let { height, width } = app.windowManager.get(
+        attrs['window-state'].id,
+      ).position;
+
+      // set iframe size to absolute px values
+      if (app.maps.target) {
+        const targetSize = getTargetSize(app.maps.target);
+        const heightNumber = posToNumber(height, 'height', targetSize);
+        if (heightNumber) {
+          height = `${heightNumber - 36}px`; // 32px header height + 4px margin
+        }
+        const widthNumber = posToNumber(width, 'width', targetSize);
+        if (widthNumber) {
+          width = `${widthNumber}px`;
+        }
+      }
+
+      return {
+        height,
+        width,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/featureInfo/IframeComponent.vue.d.ts

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