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

package/src/application/VcsAttributions.vue

@@ -1,6 +1,10 @@
 <template>
-  <v-list class="px-1">
-    <v-list-item v-for="({key, title, attributions}) in entries" :key="key" class="px-1">
+  <v-list class="px-2">
+    <v-list-item
+      v-for="{ key, title, attributions } in entries"
+      :key="key"
+      class="px-0"
+    >
       <v-list-item-content>
         <v-list-item-title>{{ $t(title) }}</v-list-item-title>
         <v-list-item-subtitle
@@ -8,10 +12,7 @@
           :key="attribution.provider"
           :title="`${$t(attribution.provider)} ${attribution.year}`"
         >
-          <a
-            :href="attribution.url"
-            target="_blank"
-          >
+          <a :href="attribution.url" target="_blank">
             {{ $t(attribution.provider) }} {{ attribution.year }}
           </a>
         </v-list-item-subtitle>
@@ -21,16 +22,29 @@
 </template>
 
 <style lang="scss" scoped>
+  @import '../styles/shades.scss';
 
-  ::v-deep {
-    a:before {
-      content: '\00a9\00a0'
+  .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 >
+<script>
   import {
     VList,
     VListItem,

package/src/application/VcsAttributionsFooter.vue

@@ -1,25 +1,27 @@
 <template>
   <span class="d-inline-block text-truncate mr-10 attribution-wrap">
-    <span v-for="attribution in mergedAttributions" class="attribution-span" :key="attribution.provider">
-      <a
-        :href="attribution.url"
-        target="_blank"
-      >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span></a>
+    <span
+      v-for="attribution in mergedAttributions"
+      class="attribution-span"
+      :key="attribution.provider"
+    >
+      <a :href="attribution.url" target="_blank"
+        >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span>
+      </a>
     </span>
     <VcsButton
       class="d-flex"
-      small
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"
       :active="attributionAction.active"
+      :disabled="attributionAction.disabled"
       @click.stop="attributionAction.callback($event)"
     />
   </span>
 </template>
 
 <style lang="scss" scoped>
-
   .attribution-wrap .vcs-button-wrap {
     position: absolute;
     right: 4px;
@@ -41,11 +43,9 @@
       font-size: inherit;
     }
   }
-
 </style>
 
 <script>
-
   import { computed } from 'vue';
   import { mergeAttributions } from './attributionsHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
@@ -72,7 +72,9 @@
       },
     },
     setup(props) {
-      const mergedAttributions = computed(() => mergeAttributions(props.entries));
+      const mergedAttributions = computed(() =>
+        mergeAttributions(props.entries),
+      );
       return {
         mergedAttributions,
       };

package/src/application/VcsMap.vue

@@ -1,9 +1,15 @@
 <template>
-  <div :id="mapId" @click.right.stop="(e) => { e.preventDefault(); }" />
+  <div
+    :id="mapId"
+    @click.right.stop="
+      (e) => {
+        e.preventDefault();
+      }
+    "
+  />
 </template>
 
 <style lang="scss" scoped>
-
   ::v-deep {
     .mapElement {
       position: absolute;
@@ -30,11 +36,9 @@
       touch-action: none;
     }
   }
-
 </style>
 
-<script >
-
+<script>
   export default {
     name: 'VcsMap',
     props: {

package/src/application/VcsNavbar.vue

@@ -8,25 +8,28 @@
     width="100%"
   >
     <v-container fluid class="pa-0">
-      <v-row no-gutters>
+      <v-row no-gutters class="align-center">
         <v-col>
           <v-toolbar-items>
-            <div class="d-flex align-center">
+            <div class="d-flex">
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
-                large
+                button="VcsToolButton"
               />
               <v-divider
-                v-if="mapActions.length > 0 && (contentActions.length > 0 || toolActions.length > 0)"
+                v-if="
+                  mapActions.length > 0 &&
+                  (contentActions.length > 0 || toolActions.length > 0)
+                "
                 class="mx-2"
                 vertical
                 inset
               />
               <VcsActionButtonList
                 :actions="contentActions"
-                :overflow-count="$vuetify.breakpoint.xs ? 2 : 3"
-                large
+                :overflow-count="$vuetify.breakpoint.xs ? 3 : 4"
+                button="VcsToolButton"
               />
               <v-divider
                 v-if="contentActions.length > 0 && toolActions.length > 0"
@@ -37,15 +40,21 @@
               <VcsActionButtonList
                 :actions="toolActions"
                 v-if="$vuetify.breakpoint.mdAndUp"
-                large
+                button="VcsToolButton"
               />
             </div>
           </v-toolbar-items>
         </v-col>
-        <v-col class="align-center d-flex justify-center">
-          <div class="d-flex">
+        <v-col class="d-flex justify-center">
+          <div class="d-flex align-center">
             <template v-if="!$vuetify.breakpoint.xs">
-              <img v-if="config.logo" class="logo" :src="config.logo" draggable="false" alt="Logo">
+              <img
+                v-if="config.logo"
+                class="logo"
+                :src="config.logo"
+                draggable="false"
+                alt="Logo"
+              />
               <div v-else class="company-logo logo" />
             </template>
             <div v-if="!$vuetify.breakpoint.sm && config.appTitle" class="ml-4">
@@ -55,10 +64,10 @@
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
           <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
-            <div class="d-flex align-center">
+            <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
-                large
+                button="VcsToolButton"
               />
               <v-divider
                 v-if="projectActions.length > 0 && menuActions.length > 0"
@@ -66,15 +75,12 @@
                 inset
                 class="mx-2"
               />
-              <v-menu
-                offset-y
-                v-if="shareActions.length > 0"
-              >
+
+              <v-menu offset-y v-if="shareActions.length > 0">
                 <template #activator="{ on, attrs }">
-                  <VcsButton
+                  <VcsToolButton
                     v-bind="attrs"
                     v-on="on"
-                    large
                     tooltip="navbar.share.tooltip"
                     icon="$vcsShare"
                   />
@@ -85,26 +91,21 @@
                   :show-icon="true"
                 />
               </v-menu>
-              <VcsButton
+              <VcsToolButton
                 class="d-flex"
                 v-if="searchAction"
-                large
                 :key="searchAction.name"
                 :tooltip="searchAction.title"
                 :icon="searchAction.icon"
                 :active="searchAction.active"
                 @click.stop="searchAction.callback($event)"
-                v-bind="{...$attrs}"
+                v-bind="{ ...$attrs }"
               />
-              <v-menu
-                offset-y
-                v-if="menuActions.length > 0"
-              >
+              <v-menu offset-y v-if="menuActions.length > 0">
                 <template #activator="{ on, attrs }">
-                  <VcsButton
+                  <VcsToolButton
                     v-bind="attrs"
                     v-on="on"
-                    large
                     tooltip="navbar.menu.tooltip"
                     icon="$vcsMenu"
                   />
@@ -124,24 +125,37 @@
 </template>
 
 <style lang="scss" scoped>
-  .v-toolbar__items > div{
+  .v-toolbar__items > div {
     gap: 8px;
   }
   .logo {
     max-height: 36px;
     margin: 0 auto;
   }
+  .v-toolbar.v-toolbar--bottom {
+    bottom: 0;
+    position: fixed;
+  }
 </style>
 
 <script>
   import { inject, ref, computed, onUnmounted } from 'vue';
   import {
-    VCol, VContainer, VDivider, VMenu, VRow, VToolbar, VToolbarItems,
+    VCol,
+    VContainer,
+    VDivider,
+    VMenu,
+    VRow,
+    VToolbar,
+    VToolbarItems,
   } from 'vuetify/lib';
-  import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
+  import {
+    ButtonLocation,
+    getActionsByLocation,
+  } from '../manager/navbarManager.js';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
   import VcsActionList from '../components/lists/VcsActionList.vue';
-  import VcsButton from '../components/buttons/VcsButton.vue';
+  import VcsToolButton from '../components/buttons/VcsToolButton.vue';
   import { createSearchButtonAction } from '../actions/actionHelper.js';
 
   export default {
@@ -149,7 +163,7 @@
     components: {
       VcsActionButtonList,
       VcsActionList,
-      VcsButton,
+      VcsToolButton,
       VToolbar,
       VContainer,
       VRow,
@@ -162,12 +176,20 @@
       const app = inject('vcsApp');
 
       const navbarButtonIds = ref(app.navbarManager.componentIds);
-      const buttonComponents = computed(() => navbarButtonIds.value.map(id => app.navbarManager.get(id)));
-      const getActions = location => computed(
-        () => getActionsByLocation(buttonComponents.value, location, [...app.plugins].map(p => p.name)),
+      const buttonComponents = computed(() =>
+        navbarButtonIds.value.map((id) => app.navbarManager.get(id)),
       );
+      const getActions = (location) =>
+        computed(() =>
+          getActionsByLocation(
+            buttonComponents.value,
+            location,
+            [...app.plugins].map((p) => p.name),
+          ),
+        );
 
-      const { searchAction, destroy: destroySearchAction } = createSearchButtonAction(app);
+      const { searchAction, destroy: destroySearchAction } =
+        createSearchButtonAction(app);
 
       onUnmounted(() => {
         destroySearchAction();

package/src/application/VcsSettings.vue

@@ -1,9 +1,6 @@
 <template>
   <v-container class="px-1 py-0">
-    <v-row
-      no-gutters
-      align="center"
-    >
+    <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
           {{ $t('settings.languageSelector') }}
@@ -17,10 +14,7 @@
         />
       </v-col>
     </v-row>
-    <v-row
-      no-gutters
-      align="center"
-    >
+    <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
           {{ $t('settings.theme.title') }}
@@ -42,9 +36,7 @@
 </template>
 
 <script>
-  import {
-    ref, inject, onUnmounted, getCurrentInstance, computed,
-  } from 'vue';
+  import { ref, inject, onUnmounted, getCurrentInstance, computed } from 'vue';
   import { VCol, VContainer, VRow } from 'vuetify/lib';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
@@ -84,7 +76,8 @@
         localLanguage.value = app.locale;
       };
       setLocale();
-      const localeChangedListener = app.localeChanged.addEventListener(setLocale);
+      const localeChangedListener =
+        app.localeChanged.addEventListener(setLocale);
       const addedListener = app.i18n.added.addEventListener(setupI18n);
       const removedListener = app.i18n.removed.addEventListener(setupI18n);
 

package/src/application/attributionsHelper.js

@@ -29,7 +29,7 @@ export function mergeAttributions(entries) {
         if (year) {
           const index = providerObject.years.indexOf(year);
           if (url && index === -1) {
-            if (providerObject.years.every(y => Number(y) < Number(year))) {
+            if (providerObject.years.every((y) => Number(y) < Number(year))) {
               providerObject.url = url;
             }
             if (year) {
@@ -46,7 +46,7 @@ export function mergeAttributions(entries) {
       }
     });
   });
-  return Object.keys(providers).map(provider => ({
+  return Object.keys(providers).map((provider) => ({
     provider,
     years: providers[provider].years.join(', '),
     url: providers[provider].url,
@@ -77,14 +77,19 @@ export function getAttributions(app) {
    */
   function addAttributions(object) {
     const { attributions } = object.properties;
-    if (!attributions) { return; }
+    if (!attributions) {
+      return;
+    }
     const key = `${object.className}_${object.name}`;
-    const idx = entries.value.findIndex(e => e.key === key);
+    const idx = entries.value.findIndex((e) => e.key === key);
     if (idx < 0) {
       entries.value.push({
         key,
-        title: object.properties?.title ?? `${object.className}: ${object.name}`,
-        attributions: Array.isArray(attributions) ? attributions : [attributions],
+        title:
+          object.properties?.title ?? `${object.className}: ${object.name}`,
+        attributions: Array.isArray(attributions)
+          ? attributions
+          : [attributions],
       });
     }
   }
@@ -93,7 +98,9 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
    */
   function removeAttributions(object) {
-    const idx = entries.value.findIndex(e => e.key === `${object.className}_${object.name}`);
+    const idx = entries.value.findIndex(
+      (e) => e.key === `${object.className}_${object.name}`,
+    );
     if (idx >= 0) {
       entries.value.splice(idx, 1);
     }
@@ -104,7 +111,9 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
    */
   function syncAttributions(object) {
-    if (object?.properties?.attributions === undefined) { return; }
+    if (object?.properties?.attributions === undefined) {
+      return;
+    }
     if (object.active || object.loaded) {
       addAttributions(object);
     } else {
@@ -117,7 +126,9 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap} map
    */
   function initAttributions(map) {
-    if (!map) { return; }
+    if (!map) {
+      return;
+    }
     obliqueListener();
     entries.value.splice(0);
     syncAttributions(map);
@@ -128,7 +139,8 @@ export function getAttributions(app) {
     });
     if (map instanceof ObliqueMap) {
       syncAttributions(map.collection);
-      obliqueListener = map.collectionChanged.addEventListener(syncAttributions);
+      obliqueListener =
+        map.collectionChanged.addEventListener(syncAttributions);
     }
   }
 
@@ -142,7 +154,7 @@ export function getAttributions(app) {
   initAttributions(app.maps.activeMap);
 
   const destroy = () => {
-    listeners.forEach(cb => cb());
+    listeners.forEach((cb) => cb());
     obliqueListener();
   };
 

package/src/application/vcsAppWrapper.vue

@@ -29,6 +29,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/callback/activateLayersCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} ActivateLayersOptions
+ * @property {Array<string>} layerNames - layer names to activate
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class ActivateLayersCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ActivateLayersCallback';
+  }
+
+  /**
+   * @param {ActivateLayersOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    this._layerNames = options.layerNames;
+  }
+
+  callback() {
+    this._layerNames
+      .map((n) => this._app.layers.getByKey(n))
+      .filter((l) => l)
+      .forEach((l) => l.activate());
+  }
+
+  /**
+   * @returns {ActivateLayersOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.layerNames = this._layerNames.slice();
+    return config;
+  }
+}
+
+export default ActivateLayersCallback;
+callbackClassRegistry.registerClass(
+  ActivateLayersCallback.className,
+  ActivateLayersCallback,
+);

package/src/callback/applyLayerStyleCallback.js

@@ -0,0 +1,63 @@
+import { FeatureLayer } from '@vcmap/core';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} ApplyLayerStyleOptions
+ * @property {string} styleName - name of the style
+ * @property {string} layerName - name of the layer to apply the style
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class ApplyLayerStyleCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ApplyLayerStyleCallback';
+  }
+
+  /**
+   * @param {ApplyLayerStyleOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._styleName = options.styleName;
+    /**
+     * @type {string}
+     * @private
+     */
+    this._layerName = options.layerName;
+  }
+
+  callback() {
+    const style = this._app.styles.getByKey(this._styleName);
+    const layer = this._app.layers.getByKey(this._layerName);
+    if (style && layer && layer instanceof FeatureLayer) {
+      layer.setStyle(style);
+    }
+  }
+
+  /**
+   * @returns {ApplyLayerStyleOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.styleName = this._styleName;
+    config.layerName = this._layerName;
+    return config;
+  }
+}
+
+export default ApplyLayerStyleCallback;
+callbackClassRegistry.registerClass(
+  ApplyLayerStyleCallback.className,
+  ApplyLayerStyleCallback,
+);

package/src/callback/deactivateLayersCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} DeactivateLayersOptions
+ * @property {Array<string>} layerNames - layer names to deactivate
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class DeactivateLayersCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'DeactivateLayersCallback';
+  }
+
+  /**
+   * @param {DeactivateLayersOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    this._layerNames = options.layerNames;
+  }
+
+  callback() {
+    this._layerNames
+      .map((n) => this._app.layers.getByKey(n))
+      .filter((l) => l)
+      .forEach((l) => l.deactivate());
+  }
+
+  /**
+   * @returns {DeactivateLayersOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.layerNames = this._layerNames.slice();
+    return config;
+  }
+}
+
+export default DeactivateLayersCallback;
+callbackClassRegistry.registerClass(
+  DeactivateLayersCallback.className,
+  DeactivateLayersCallback,
+);