@vcmap/ui 5.0.0-rc.24 → 5.0.0-rc.26

package/src/application/VcsApp.vue

@@ -15,7 +15,6 @@
           draggable="false"
           class="mobile-logo"
         />
-        <div v-else class="company-logo-mobile mobile-logo" />
       </template>
       <VcsButton
         v-if="!$vuetify.breakpoint.smAndUp && $vuetify.breakpoint.mobile"
@@ -24,11 +23,10 @@
         :icon="attributionAction.icon"
         :active="attributionAction.active"
         @click.stop="attributionAction.callback($event)"
-        small
         class="z-index-1 mobile-attribution-btn"
       />
       <VcsMap :map-id="mapId" />
-      <MapNavigation />
+      <MapNavigation v-if="showMapNavigation" />
       <ToolboxManagerComponent />
       <WindowManagerComponent />
       <NotifierComponent />
@@ -71,7 +69,7 @@
   .mobile-attribution-btn {
     position: fixed;
     right: 2px;
-    bottom: 56px;
+    bottom: 36px;
   }
 </style>
 
@@ -83,6 +81,7 @@
     onMounted,
     onUnmounted,
     provide,
+    ref,
     watch,
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
@@ -101,7 +100,7 @@
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
-  import CategoryManager from '../manager/categoryManager/CategoryManager.vue';
+  import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
   import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/vcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
@@ -110,6 +109,7 @@
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import NotifierComponent from '../notifier/notifierComponent.vue';
+  import VcsDefaultLogoMobile from '../logo-mobile.svg';
 
   /**
    * You should call this function in the component providing the vcsUiApp to your
@@ -239,7 +239,7 @@
             action: legendAction,
           },
           vcsAppSymbol,
-          ButtonLocation.TOOL,
+          ButtonLocation.CONTENT,
         );
       }
     };
@@ -338,7 +338,10 @@
           headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
         },
-        component: CategoryManager,
+        component: CollectionManager,
+        provides: {
+          collectionManager: app.categoryManager,
+        },
         slot: WindowSlot.STATIC,
       },
       app.windowManager,
@@ -452,6 +455,28 @@
     };
   }
 
+  export function setupMapNavigation(app) {
+    const showMapNavigation = ref(false);
+
+    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());
+      },
+    };
+  }
+
   /**
    * The base component to setup the entire application. To embed the VcsApp, use this component.
    * @vue-prop {string} appId - the id of the app to inject. this will setup listeners on the app to call vcsAppMounted on plugins
@@ -493,6 +518,8 @@
       );
       const { attributionEntries, attributionAction, destroyAttributions } =
         setupAttributions(app);
+      const { showMapNavigation, destroy: destroyMapNavigationListener } =
+        setupMapNavigation(app);
 
       let pluginMountedListener;
       onMounted(() => {
@@ -511,6 +538,7 @@
         destroyComponentsWindow();
         destroyThemingListener();
         destroyAttributions();
+        destroyMapNavigationListener();
       });
 
       return {
@@ -518,10 +546,12 @@
         mobileLogo: computed(
           () =>
             app.uiConfig.config.value.mobileLogo ??
-            app.uiConfig.config.value.logo,
+            app.uiConfig.config.value.logo ??
+            VcsDefaultLogoMobile,
         ),
         attributionEntries,
         attributionAction,
+        showMapNavigation,
       };
     },
   };

package/src/application/VcsAttributions.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-list class="px-1">
+  <v-list class="px-2">
     <v-list-item
       v-for="{ key, title, attributions } in entries"
       :key="key"
-      class="px-1"
+      class="px-0"
     >
       <v-list-item-content>
         <v-list-item-title>{{ $t(title) }}</v-list-item-title>
@@ -22,9 +22,24 @@
 </template>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    a:before {
-      content: '\00a9\00a0';
+  @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>

package/src/application/VcsAttributionsFooter.vue

@@ -11,7 +11,6 @@
     </span>
     <VcsButton
       class="d-flex"
-      small
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"

package/src/application/VcsNavbar.vue

@@ -15,7 +15,7 @@
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
-                large
+                button="VcsToolButton"
               />
               <v-divider
                 v-if="
@@ -28,8 +28,8 @@
               />
               <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"
@@ -40,7 +40,7 @@
               <VcsActionButtonList
                 :actions="toolActions"
                 v-if="$vuetify.breakpoint.mdAndUp"
-                large
+                button="VcsToolButton"
               />
             </div>
           </v-toolbar-items>
@@ -48,16 +48,12 @@
         <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"
-              />
-              <div v-else class="company-logo logo" />
+              <img class="logo" :src="logo" draggable="false" alt="Logo" />
             </template>
-            <div v-if="!$vuetify.breakpoint.sm && config.appTitle" class="ml-4">
+            <div
+              v-if="$vuetify.breakpoint.mdAndUp && config.appTitle"
+              class="ml-4"
+            >
               {{ $t(config.appTitle) }}
             </div>
           </div>
@@ -65,19 +61,22 @@
         <v-col class="align-content-end d-flex justify-end">
           <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
             <div class="d-flex">
-              <VcsActionButtonList :actions="projectActions" large />
+              <VcsActionButtonList
+                :actions="projectActions"
+                button="VcsToolButton"
+              />
               <v-divider
                 v-if="projectActions.length > 0 && menuActions.length > 0"
                 vertical
                 inset
                 class="mx-2"
               />
+
               <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"
                   />
@@ -88,10 +87,9 @@
                   :show-icon="true"
                 />
               </v-menu>
-              <VcsButton
+              <VcsToolButton
                 class="d-flex"
                 v-if="searchAction"
-                large
                 :key="searchAction.name"
                 :tooltip="searchAction.title"
                 :icon="searchAction.icon"
@@ -101,10 +99,9 @@
               />
               <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"
                   />
@@ -131,6 +128,10 @@
     max-height: 36px;
     margin: 0 auto;
   }
+  .v-toolbar.v-toolbar--bottom {
+    bottom: 0;
+    position: fixed;
+  }
 </style>
 
 <script>
@@ -150,15 +151,16 @@
   } 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';
+  import VcsDefaultLogo from '../logo.svg';
 
   export default {
     name: 'VcsNavbar',
     components: {
       VcsActionButtonList,
       VcsActionList,
-      VcsButton,
+      VcsToolButton,
       VToolbar,
       VContainer,
       VRow,
@@ -183,6 +185,10 @@
           ),
         );
 
+      const logo = computed(() => {
+        return app.uiConfig.config.value.logo ?? VcsDefaultLogo;
+      });
+
       const { searchAction, destroy: destroySearchAction } =
         createSearchButtonAction(app);
 
@@ -199,6 +205,7 @@
         searchAction,
         menuActions: getActions(ButtonLocation.MENU),
         config: app.uiConfig.config,
+        logo,
       };
     },
   };

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,
+);

package/src/callback/goToViewpointCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} GoToViewpointOptions
+ * @property {string} viewpoint - name of the viewpoint
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class GoToViewpointCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'GoToViewpointCallback';
+  }
+
+  /**
+   * @param {GoToViewpointOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._viewpoint = options.viewpoint;
+  }
+
+  callback() {
+    const vp = this._app.viewpoints.getByKey(this._viewpoint);
+    if (this._app.maps.activeMap && vp) {
+      this._app.maps.activeMap.gotoViewpoint(vp);
+    }
+  }
+
+  /**
+   * @returns {GoToViewpointOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.viewpoint = this._viewpoint;
+    return config;
+  }
+}
+
+export default GoToViewpointCallback;
+callbackClassRegistry.registerClass(
+  GoToViewpointCallback.className,
+  GoToViewpointCallback,
+);

package/src/callback/vcsCallback.js

@@ -0,0 +1,66 @@
+import { ClassRegistry } from '@vcmap/core';
+
+/**
+ * @type {ClassRegistry<VcsCallback>}
+ */
+export const callbackClassRegistry = new ClassRegistry();
+
+/**
+ * creates instances of VcsCallback classes and executes its callback function
+ * @param {VcsUiApp} app
+ * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ */
+export function executeCallbacks(app, vcsCallbackOptions) {
+  vcsCallbackOptions.forEach((options) =>
+    app.callbackClassRegistry.createFromTypeOptions(options, app)?.callback(),
+  );
+}
+
+/**
+ * @typedef {Object} VcsCallbackOptions
+ * @property {string} type
+ */
+
+/**
+ * @typedef {Object} VcsCallback
+ * @property {function():void} callback
+ */
+
+/**
+ * @class
+ * @abstract
+ */
+class VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'VcsCallback';
+  }
+
+  /**
+   * @param {VcsCallbackOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    /**
+     * @protected
+     * @type {VcsUiApp}
+     */
+    this._app = app;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  callback() {}
+
+  /**
+   * @returns {VcsCallbackOptions}
+   */
+  toJSON() {
+    return {
+      type: this.constructor.className,
+    };
+  }
+}
+
+export default VcsCallback;