@vcmap/ui 5.0.0-rc.21 → 5.0.0-rc.23

package/src/components/tables/VcsTable.vue

@@ -1,108 +1,37 @@
 <template>
-  <v-card>
-    <VcsTreeviewSearchbar
-      v-if="showSearchbar"
-      :placeholder="$t(searchbarPlaceholder)"
-      v-model="search"
-    />
-    <v-data-table
-      dense
-      item-key="key"
-      :headers="translatedHeaders"
-      :items="items"
-      :items-per-page.sync="itemsPerPageRef"
-      :page.sync="page"
-      :search="search"
-      :custom-filter="handleFilter"
-      hide-default-footer
-      class="vcs-table"
-    >
-      <!-- eslint-disable-next-line -->
-      <template #item.key="{ item }">
-        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.key)">
-          {{ $t(item.key) }}
-        </td>
-      </template>
-      <!-- eslint-disable-next-line -->
-      <template #item.value="{ item }">
-        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.value)">
+  <VcsDataTable
+    :items="items"
+    :headers="headers"
+    item-key="key"
+    v-bind="$attrs"
+  >
+    <!-- eslint-disable-next-line -->
+    <template #item.key="{ item }">
+      <td
+        :title="$t(item.key)"
+        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+        :style="{'max-width': headers[0].width }"
+      >
+        {{ $t(item.key) }}
+      </td>
+    </template>
+    <!-- eslint-disable-next-line -->
+    <template #item.value="{ item }">
+      <td
+        :title="$t(item.value)"
+        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+        :style="{'max-width': headers[1].width }"
+      >
+        <span :class="{ 'single-line': !/\s/.test(item.value), 'multi-line': /\s/.test(item.value), }">
           {{ $t(item.value) }}
-        </td>
-      </template>
-      <template #footer>
-        <v-divider />
-        <v-container class="pa-2 vcs-pagination-bar accent" v-if="items.length > itemsPerPageRef">
-          <v-row
-            dense
-            no-gutters
-            align="center"
-            justify="center"
-          >
-            <v-menu offset-y dense>
-              <template #activator="{ on, attrs }">
-                <VcsButton
-                  small
-                  color="primary"
-                  v-bind="attrs"
-                  v-on="on"
-                >
-                  {{ itemsPerPageRef }}
-                  <v-icon>mdi-chevron-down</v-icon>
-                </VcsButton>
-              </template>
-              <v-list>
-                <v-list-item
-                  v-for="(number, index) in itemsPerPageArray"
-                  :key="index"
-                  @click="updateItemsPerPage(number)"
-                  style="min-height: auto; height: 24px; text-align: right;"
-                >
-                  <v-list-item-title>{{ number }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-            <span class="mx-2">{{ $t('components.vcsTable.itemsPerPage') }}</span>
-            <span class="mx-2">
-              {{ itemsFrom }} - {{ itemsTo }} {{ $t('components.vcsTable.ofItems') }} {{ numberOfItems }}
-            </span>
-            <VcsButton
-              small
-              icon="mdi-chevron-left"
-              @click="formerPage"
-              tooltip="components.vcsTable.formerPage"
-              :disabled="page < 2"
-              class="ml-1"
-            />
-            <VcsButton
-              small
-              icon="mdi-chevron-right"
-              @click="nextPage"
-              tooltip="components.vcsTable.nextPage"
-              :disabled="page > numberOfPages - 1"
-              class="ml-1"
-            />
-          </v-row>
-        </v-container>
-      </template>
-    </v-data-table>
-  </v-card>
+        </span>
+      </td>
+    </template>
+  </VcsDataTable>
 </template>
 <script>
-  import { getCurrentInstance, ref, computed } from 'vue';
-  import {
-    VCard,
-    VDivider,
-    VContainer,
-    VDataTable,
-    VList,
-    VListItem,
-    VListItemTitle,
-    VMenu,
-    VIcon,
-    VRow,
-  } from 'vuetify/lib';
-  import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
-  import VcsButton from '../buttons/VcsButton.vue';
+  import { computed } from 'vue';
+  import VcsDataTable from './VcsDataTable.vue';
 
   /**
    * @typedef {Object} TableItem
@@ -131,34 +60,16 @@
   }
 
   /**
-   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table }
+   * @description A table view for feature attributes using VcsDataTable
    * @vue-prop {string} featureId - feature's id
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names
-   * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
-   * @vue-prop {string} [searchbarPlaceholder='Search'] - placeholder for searchbar
    * @vue-computed {Array<TableItem>} items - from attributes derived table items
-   * @vue-computed {Array<TableItem>} filteredItems - array of items with search filter applied on. If search string is empty, same as items array.
-   * @vue-computed {number} numberOfItems - number of filtered items (depending on search).
-   * @vue-computed {number} numberOfPages - number of pages depending on number of items, search and itemsPerPage.
-   * @vue-computed {number} itemsFrom - index of first item shown on current page.
-   * @vue-computed {number} itemsTo - index of last item shown on current page.
    */
   export default {
     name: 'VcsTable',
     components: {
-      VcsButton,
-      VcsTreeviewSearchbar,
-      VCard,
-      VDataTable,
-      VContainer,
-      VDivider,
-      VRow,
-      VMenu,
-      VIcon,
-      VList,
-      VListItem,
-      VListItemTitle,
+      VcsDataTable,
     },
     props: {
       featureId: {
@@ -176,29 +87,8 @@
           { text: 'components.vcsTable.value', value: 'value', width: '160px' },
         ],
       },
-      itemsPerPage: {
-        type: Number,
-        default: 10,
-      },
-      itemsPerPageArray: {
-        type: Array,
-        default: () => [5, 10, 15],
-      },
-      showSearchbar: {
-        type: Boolean,
-        default: true,
-      },
-      searchbarPlaceholder: {
-        type: String,
-        default: 'components.vcsTable.searchbarPlaceholder',
-      },
     },
     setup(props) {
-      const vm = getCurrentInstance().proxy;
-      /**
-       * @type {Ref<UnwrapRef<string>>}
-       */
-      const search = ref('');
       /**
        * @type {ComputedRef<Array<TableItem>>}
        */
@@ -209,128 +99,39 @@
         });
       });
 
-      /**
-       * @param {any} value
-       * @param {string|undefined} filter
-       * @param {TableItem} item
-       * @returns {boolean}
-       */
-      const handleFilter = (value, filter, item) => {
-        if (filter) {
-          const q = filter.toLocaleLowerCase();
-          return [item.key, item.value].some((i) => {
-            const content = i.toString();
-            const translated = vm.$t(content);
-            return translated.toLowerCase().includes(q) || content.toLowerCase().includes(q);
-          });
-        }
-        return true;
-      };
-
-      /**
-       * @type {ComputedRef<TableItem[]>}
-       */
-      const filteredItems = computed(() => items.value.filter(item => handleFilter(item.value, search.value, item)));
-      const numberOfItems = computed(() => filteredItems.value.length);
-
-      /**
-       * @type {ComputedRef<Array<{text: string, value: string}>>}
-       */
-      const translatedHeaders = computed(() => {
-        return props.headers.map((hd) => {
-          hd.text = vm.$t(hd.text);
-          return hd;
-        });
-      });
-
-      /**
-       * @type {Ref<UnwrapRef<number>>}
-       */
-      const itemsPerPageRef = ref(props.itemsPerPage);
-      const numberOfPages = computed(() => {
-        return Math.ceil(numberOfItems.value / itemsPerPageRef.value);
-      });
-      /**
-       * @type {Ref<UnwrapRef<number>>}
-       */
-      const page = ref(1);
-      const itemsFrom = computed(() => ((page.value - 1) * itemsPerPageRef.value) + 1);
-      const itemsTo = computed(() => {
-        const last = page.value * itemsPerPageRef.value;
-        return last < numberOfItems.value ? last : numberOfItems.value;
-      });
-
       return {
-        search,
-        page,
         items,
-        filteredItems,
-        itemsPerPageRef,
-        itemsFrom,
-        itemsTo,
-        numberOfPages,
-        numberOfItems,
-        nextPage() {
-          if (page.value + 1 <= numberOfPages.value) {
-            page.value += 1;
-          }
-        },
-        formerPage() {
-          if (page.value - 1 >= 1) {
-            page.value -= 1;
-          }
-        },
-        updateItemsPerPage(number) {
-          itemsPerPageRef.value = number;
-        },
-        handleFilter,
-        translatedHeaders,
       };
     },
   };
 </script>
 
 <style lang="scss" scoped>
-::v-deep{
-  .vcs-table {
-    td {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &.overflow-max-width{
-        max-width: 160px;
-      }
-      &.v-data-table__mobile-row{
-        justify-content: left;
-        height: 27px;
-        min-height: auto;
-      }
-    }
-    th.sortable{
-      padding: 0 8px;
-      span{
-        vertical-align: middle;
-        padding: 0 4px 0 0;
-      }
-    }
-  }
-  .v-data-table__mobile-row__cell{
-    td.vcs-table.overflow-max-width{
+
+.single-line {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.multi-line {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  height: auto;
+  max-height: 96px;
+}
+
+.noBorder {
+  border-bottom: none !important;
+}
+
+::v-deep {
+  .v-data-table__mobile-row__cell {
+    td.vcs-table.overflow-max-width {
       max-width: 260px;
     }
   }
-  .v-btn.vcs-button--small{
-    height: 100% !important;
-    display: block;
-  }
-}
-.vcs-pagination-bar{
-  .vcs-button-wrap{
-    height: 25px;
-    border: 1px solid lightgrey;
-    padding: 0 4px;
-    background-color: var(--v-basic-base);
-    border-radius: 4px;
-  }
 }
 </style>

package/src/contentTree/contentTreeCollection.js

@@ -306,7 +306,7 @@ export function createContentTreeCollection(app) {
 
   const overrideCollection = makeOverrideCollection(
     collection,
-    () => app.dynamicContextId,
+    () => app.dynamicModuleId,
     null,
     config => getObjectFromClassRegistry(app.contentTreeClassRegistry, config, app),
     ContentTreeItem,

package/src/contentTree/layerContentTreeItem.js

@@ -122,6 +122,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
         },
         {
           component,
+          position: {
+            width: 200,
+          },
           props: reactive({
             availableStyles: availableStyles.slice(),
             layerName: this._layerName,

package/src/downloadHelper.js

@@ -0,0 +1,49 @@
+import { hasSameOrigin } 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)) {
+    link.target = '_blank';
+  }
+  link.click();
+  link.remove();
+}
+
+/**
+ * Download a blob
+ * @param {Blob} blob
+ * @param {string} fileName
+ */
+export function downloadBlob(blob, fileName) {
+  downloadURI(URL.createObjectURL(blob), fileName);
+}
+
+/**
+ * Download a text as UTF-8
+ * @param {string} text
+ * @param {string} fileName
+ */
+export function downloadText(text, fileName) {
+  downloadURI(`data:text/plain;charset=utf-8,${encodeURIComponent(text)}`, fileName);
+}
+
+/**
+ * Download a canvas as an image
+ * @param {HTMLCanvasElement} canvas
+ * @param {string} fileName
+ * @param {string=} mimeType
+ */
+export function downloadCanvas(canvas, fileName, mimeType) {
+  canvas.toBlob((blob) => {
+    downloadBlob(blob, fileName);
+  }, mimeType);
+}

package/src/featureInfo/AddressBalloonComponent.vue

@@ -8,7 +8,7 @@
           tile
           size="40"
         >
-          <v-icon size="20" color="secondary">
+          <v-icon size="20">
             $vcsHomePoint
           </v-icon>
         </v-list-item-avatar>

package/src/featureInfo/BalloonComponent.vue

@@ -1,23 +1,25 @@
 <template>
   <v-card
-    class="mx-auto mb-1 elevation-0"
+    class="mx-auto elevation-0"
     max-width="400"
     v-if="position"
   >
     <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
-      <v-list-item class="px-2 pr-1 align-start">
+      <v-list-item class="px-2 align-center">
         <v-list-item-avatar
           tile
-          size="20"
-          class="mr-2 align-self-start"
+          size="16"
+          class="mr-2"
         >
           <v-icon color="primary">
             $vcsInfo
           </v-icon>
         </v-list-item-avatar>
-        <v-list-item-content class="py-2 pr-1 align-self-start">
-          <v-list-item-title class="text-h6">
-            {{ $t(balloonTitle) }}
+        <v-list-item-content class="pr-1">
+          <v-list-item-title>
+            <h3 class="font-weight-bold">
+              {{ $t(balloonTitle) }}
+            </h3>
           </v-list-item-title>
           <v-list-item-subtitle v-if="balloonSubtitle">
             {{ $t(balloonSubtitle) }}
@@ -28,15 +30,16 @@
           small
           icon="mdi-close-thick"
           tooltip="components.close"
+          class="d-flex"
         />
       </v-list-item>
     </slot>
 
     <v-divider />
 
-    <v-card class="overflow-y-auto py-2 elevation-0" max-height="250">
+    <v-card class="overflow-y-auto py-2 elevation-0" max-height="250" color="transparent">
       <slot :attrs="{...$props, ...$attrs}">
-        <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`">
+        <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`" color="transparent">
           <v-list-item class="px-2">
             <v-list-item-content>
               <v-list-item-title>
@@ -150,6 +153,8 @@
 </script>
 
 <style lang="scss">
+@import '../styles/shades.scss';
+
   .balloon {
     z-index: 0 !important;
   }
@@ -159,18 +164,19 @@
   .balloon:after {
     content: "";
     position: absolute;
-    bottom: -20px;
+    bottom: -12px;
     left: 40px;
-    border-width: 20px 20px 0;
+    border-width: 12px 10px 0;
     border-style: solid;
     display: block;
     width: 0;
+    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
   }
-  .v-sheet.theme--light.balloon:after{
-    border-color: #FFFFFF transparent;
+  .theme--light .balloon:after {
+    border-color: map-get($shades, 'white') transparent;
   }
-  .v-sheet.theme--dark.balloon:after{
-    border-color: #1E1E1E transparent;
+  .theme--dark .balloon:after {
+    border-color: map-get($shades, 'black') transparent;
   }
   .balloon .v-list-item .v-list-item__title,
   .balloon .v-list-item .v-list-item__subtitle {

package/src/featureInfo/abstractFeatureInfoView.js

@@ -217,7 +217,7 @@ class AbstractFeatureInfoView extends VcsObject {
   }
 
   /**
-   * window options, configured in a context, used only internally by AbstractFeatureInfoView or subclass
+   * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
    * @type {WindowComponentOptions|Object}
    * @readonly
    */

package/src/featureInfo/featureInfo.js

@@ -33,7 +33,7 @@ import TableFeatureInfoView from './tableFeatureInfoView.js';
 import IframeFeatureInfoView from './iframeFeatureInfoView.js';
 import AddressBalloonFeatureInfoView from './addressBalloonFeatureInfoView.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
-import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
 
 /** @typedef {import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} FeatureType */
@@ -126,6 +126,7 @@ export function createFeatureInfoSession(app) {
 
 /**
  * @param {VcsUiApp} app
+ * @returns {function():void}
  */
 function setupFeatureInfoTool(app) {
   /** @type {FeatureInfoSession|null} */
@@ -153,6 +154,9 @@ function setupFeatureInfoTool(app) {
     },
   };
 
+  if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
+    action.callback();
+  }
   app.toolboxManager.add(
     {
       id: 'featureInfo',
@@ -161,6 +165,13 @@ function setupFeatureInfoTool(app) {
     },
     vcsAppSymbol,
   );
+
+  return () => {
+    if (session) {
+      session.stop();
+    }
+    app.toolboxManager.remove('featureInfo');
+  };
 }
 
 /**
@@ -200,7 +211,7 @@ class FeatureInfo {
      */
     this._collection = makeOverrideCollection(
       new Collection(),
-      () => this._app.dynamicContextId,
+      () => this._app.dynamicModuleId,
       null,
       config => getObjectFromClassRegistry(this._featureInfoClassRegistry, config),
       AbstractFeatureInfoView,
@@ -266,8 +277,12 @@ class FeatureInfo {
           this.clear();
         }
       }),
-      this._app.contextAdded.addEventListener(() => this.clear()),
-      this._app.contextRemoved.addEventListener(() => this.clear()),
+      this._app.moduleAdded.addEventListener(() => {
+        this.clear();
+        this._destroyFeatureInfoTool();
+        this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
+      }),
+      this._app.moduleRemoved.addEventListener(() => this.clear()),
     ];
     /**
      * A vector layer to render provided features on
@@ -275,8 +290,11 @@ class FeatureInfo {
      * @private
      */
     this._scratchLayer = null;
-
-    setupFeatureInfoTool(this._app);
+    /**
+     * @type {function():void}
+     * @private
+     */
+    this._destroyFeatureInfoTool = setupFeatureInfoTool(this._app);
   }
 
   /**
@@ -386,7 +404,7 @@ class FeatureInfo {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor,
+            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
           ),
         });
         this._clearHighlightingCb = () => this._scratchLayer.featureVisibility.unHighlight([featureId]);
@@ -396,7 +414,7 @@ class FeatureInfo {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor,
+            this._app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
           ),
         });
         this._clearHighlightingCb = () => layer.featureVisibility.unHighlight([featureId]);
@@ -458,7 +476,7 @@ class FeatureInfo {
   destroy() {
     this._clearInternal();
     this._featureChanged.destroy();
-    this._app.toolboxManager.remove('featureInfo');
+    this._destroyFeatureInfoTool();
     if (this._scratchLayer) {
       this._app.layers.remove(this._scratchLayer);
       this._scratchLayer.destroy();

package/src/featureInfo/tableFeatureInfoView.js

@@ -77,6 +77,10 @@ class TableFeatureInfoView extends AbstractFeatureInfoView {
       itemsPerPageArray: this.itemsPerPageArray,
       showSearchbar: this.showSearchbar,
       searchbarPlaceholder: this.searchbarPlaceholder,
+      headers: [
+        { text: 'components.vcsTable.key', value: 'key', width: '128px' },
+        { text: 'components.vcsTable.value', value: 'value', width: '192px' },
+      ],
     };
   }