@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/src/application/VcsApp.vue

@@ -2,7 +2,10 @@
   <v-container class="fill-height pa-0" absolute fluid>
     <Navbar />
     <v-container class="vcs-main pa-0" :class="{ 'vcs-main-xs': $vuetify.breakpoint.xs }" fluid absolute>
-      <div v-if="$vuetify.breakpoint.smAndDown" class="company-logo-mobile" />
+      <template v-if="$vuetify.breakpoint.smAndDown">
+        <img v-if="mobileLogo" :src="mobileLogo" alt="Logo" class="mobile-logo">
+        <div v-else class="company-logo-mobile mobile-logo" />
+      </template>
       <VcsMap :map-id="mapId" />
       <MapNavigation />
       <ToolboxManagerComponent />
@@ -31,15 +34,27 @@
   bottom: 56px;
 }
 
+.mobile-logo {
+  max-height: 40px;
+  max-width: 70px;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1;
+}
+
 </style>
 
 <script>
   import { v4 as uuid } from 'uuid';
   import {
+    computed,
+    getCurrentInstance,
     onMounted,
     onUnmounted,
     provide,
-  } from '@vue/composition-api';
+    watch,
+  } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
@@ -50,8 +65,275 @@
   import { createMapButtonAction, createToggleAction } from '../actions/actionHelper.js';
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
-  import { WindowSlot } from '../manager/window/windowManager';
+  import { WindowSlot } from '../manager/window/windowManager.js';
+  import ComponentsManager from '../manager/categoryManager/ComponentsManager.vue';
+  import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+  import VcsLegend from '../legend/vcsLegend.vue';
+  import { getLegendEntries } from '../legend/legendHelper.js';
+
+  /**
+   * You should call this function in the component providing the vcsUiApp to your
+   * application in the components mounted hook. This will call VcsAppMounted on all plugins in the app
+   * and add a listener to call. Returns a destroy hook to stop listening to the added event. If you use the VcsApp
+   * component, do not call this function, since the component will do this for you.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupPluginMountedListeners(app) {
+    [...app.plugins].forEach((plugin) => {
+      if (plugin.onVcsAppMounted) {
+        plugin.onVcsAppMounted(app);
+      }
+    });
+
+    return app.plugins.added.addEventListener((plugin) => {
+      if (plugin.onVcsAppMounted) {
+        plugin.onVcsAppMounted(app);
+      }
+    });
+  }
+
+  /**
+   * This helper function will add a map action button based on the default icons
+   * to the apps NavbarManager. Furthermore, all maps on the app are synced for adding and removing.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupMapNavbar(app) {
+    const iconMap = {
+      OpenlayersMap: '$vcs2d',
+      CesiumMap: '$vcs3d',
+      ObliqueMap: '$vcsObliqueView',
+    };
+
+    const mapButtonActionDestroy = {};
+    const setupMap = ({ className, name }) => {
+      if (mapButtonActionDestroy[name]) {
+        mapButtonActionDestroy[name]();
+      }
+      const { action, destroy } = createMapButtonAction(
+        {
+          name,
+          icon: iconMap[className],
+          title: `navbar.maps.${className}`,
+        },
+        name,
+        app.maps,
+      );
+      app.navbarManager.add(
+        {
+          id: `mapButton-${name}`,
+          action,
+        },
+        vcsAppSymbol,
+        ButtonLocation.MAP,
+      );
+      mapButtonActionDestroy[name] = () => {
+        app.navbarManager.remove(`mapButton-${name}`);
+        destroy();
+      };
+    };
+    [...app.maps].forEach(setupMap);
+    const mapAddedListener = app.maps.added.addEventListener(setupMap);
+
+    const mapRemovedListener = app.maps.removed.addEventListener(({ name }) => {
+      if (mapButtonActionDestroy[name]) {
+        mapButtonActionDestroy[name]();
+        delete mapButtonActionDestroy[name];
+      }
+    });
+
+    return () => {
+      mapAddedListener();
+      mapRemovedListener();
+      Object.values(mapButtonActionDestroy).forEach(cb => cb());
+    };
+  }
+
+  /**
+   * This helper function will add a legend action button to the apps NavbarManager TOOL location, if legend entries are available.
+   * Watches number of legend entries.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupLegendWindow(app) {
+    const { entries, destroy } = getLegendEntries(app);
+
+    const { action: legendAction, destroy: legendDestroy } = createToggleAction(
+      {
+        name: 'legendToggle',
+        icon: '$vcsLegend',
+        title: 'legend.tooltip',
+      },
+      {
+        id: 'legend',
+        component: VcsLegend,
+        state: { headerTitle: 'legend.title' },
+        slot: WindowSlot.DYNAMIC_RIGHT,
+        props: { entries },
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+
+    /**
+     * adds or removes the legend button, depending on the number of entries
+     * @param {import("vue").Reactive<{string,LegendEntry}>} newEntries
+     */
+    const handleLegendButton = (newEntries) => {
+      if (Object.keys(newEntries).length > 0) {
+        if (!app.navbarManager.has('legend')) {
+          app.navbarManager.add(
+            {
+              id: 'legend',
+              action: legendAction,
+            },
+            vcsAppSymbol,
+            ButtonLocation.TOOL,
+          );
+        }
+      } else {
+        app.navbarManager.remove('legend');
+        app.windowManager.remove('legend');
+      }
+    };
+    handleLegendButton(entries);
+
+    const stopWatching = watch(
+      entries,
+      handleLegendButton,
+    );
+
+    return () => {
+      destroy();
+      legendDestroy();
+      stopWatching();
+    };
+  }
+
+  /**
+   * This helper function will add a settings action button to the apps NavbarManager MENU location.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupSettingsWindow(app) {
+    const { action: settingsAction, destroy: settingsDestroy } = createToggleAction(
+      {
+        name: 'settings.title',
+        icon: 'mdi-cog',
+        title: 'settings.tooltip',
+      },
+      {
+        id: 'settingsId',
+        component: VcsSettings,
+        state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
+        slot: WindowSlot.DYNAMIC_RIGHT,
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+    app.navbarManager.add(
+      {
+        id: 'settingsToggle',
+        action: settingsAction,
+      },
+      vcsAppSymbol,
+      ButtonLocation.MENU,
+    );
+    return () => {
+      settingsDestroy();
+    };
+  }
+
+  /**
+   * This helper function will add a Components manager button to the navbar. The Components Manager
+   * will only be shown if there is at least one category under management in the categoryManager.
+   * @param {VcsUiApp} app
+   * @returns {function():void}
+   */
+  export function setupComponentsWindow(app) {
+    const { action: componentsManagerAction, destroy: destroyComponentsManagerAction } = createToggleAction(
+      {
+        name: 'components-manager',
+        icon: '$vcsComponents',
+        title: 'components.tooltip',
+      },
+      {
+        id: 'component-manager',
+        state: {
+          headerTitle: 'components.title',
+          headerIcon: '$vcsComponents',
+        },
+        component: ComponentsManager,
+        slot: WindowSlot.STATIC,
+      },
+      app.windowManager,
+      vcsAppSymbol,
+    );
+
+    // only show Components Window if we have at least one managed Category
+    if (app.categoryManager.items.value.length > 0) {
+      app.navbarManager.add(
+        { id: 'component-manager', action: componentsManagerAction },
+        vcsAppSymbol,
+        ButtonLocation.CONTENT,
+      );
+    }
+    watch(app.categoryManager.items.value, () => {
+      if (app.categoryManager.items.value.length > 0) {
+        if (!app.navbarManager.has('component-manager')) {
+          app.navbarManager.add(
+            { id: 'component-manager', action: componentsManagerAction },
+            vcsAppSymbol,
+            ButtonLocation.CONTENT,
+          );
+        }
+      } else {
+        app.windowManager.remove('component-manager');
+        app.navbarManager.remove('component-manager');
+      }
+    });
+
+    return () => {
+      destroyComponentsManagerAction();
+    };
+  }
+
+  /**
+   * This helper sets up a listener to sync the theming relevant keys from the {@see UiConfigObject}
+   * with a given vuetify instance. Use this helper, if you do not use the VcsApp component and wish to evaluate
+   * the theming keys. Returns a function to stop syncing.
+   * @param {VcsUiApp} app
+   * @param {import("vuetify").Framework} vuetify
+   * @returns {function():void} - call to stop syncing
+   */
+  export function setupUiConfigTheming(app, vuetify) {
+    const listeners = [
+      app.uiConfig.added.addEventListener((item) => {
+        if (item.name === 'primaryColor') {
+          vuetify.theme.themes.dark.primary = item.value;
+          vuetify.theme.themes.light.primary = item.value;
+        }
+      }),
+      app.uiConfig.removed.addEventListener((item) => {
+        if (item.name === 'primaryColor') {
+          vuetify.theme.themes.dark.primary = defaultPrimaryColor;
+          vuetify.theme.themes.light.primary = defaultPrimaryColor;
+        }
+      }),
+    ];
 
+    return () => {
+      listeners.forEach((cb) => { cb(); });
+      listeners.splice(0);
+    };
+  }
+
+  /**
+   * 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
+   * @vue-provide
+   */
   export default {
     components: {
       MapNavigation,
@@ -65,137 +347,40 @@
         type: String,
         required: true,
       },
-      app: {
-        type: Boolean,
-        default: true,
-      },
     },
     setup(props) {
       const id = uuid();
       const mapId = `mapCollection-${id}`;
+      /** @type {VcsUiApp} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
 
-      const iconMap = {
-        OpenlayersMap: '$vcs2d',
-        CesiumMap: '$vcs3d',
-        ObliqueMap: '$vcsObliqueView',
-      };
-
-      const mapButtonActionDestroy = {};
-
-      const setupMap = ({ className, name }) => {
-        if (mapButtonActionDestroy[name]) {
-          mapButtonActionDestroy[name]();
-        }
-        const { action, destroy } = createMapButtonAction(
-          {
-            name,
-            icon: iconMap[className],
-            title: `navbar.maps.${className}`,
-          },
-          name,
-          app.maps,
-        );
-        app.navbarManager.add(
-          {
-            id: `mapButton-${name}`,
-            action,
-          },
-          vcsAppSymbol,
-          ButtonLocation.MAP,
-        );
-        mapButtonActionDestroy[name] = () => {
-          app.navbarManager.remove(`mapButton-${name}`);
-          destroy();
-        };
-      };
-
-      [...app.maps].forEach(setupMap);
-      const mapAddedDestroy = app.maps.added.addEventListener(setupMap);
-
-      const mapRemovedDestroy = app.maps.removed.addEventListener(({ name }) => {
-        if (mapButtonActionDestroy[name]) {
-          mapButtonActionDestroy[name]();
-          delete mapButtonActionDestroy[name];
-        }
-      });
-
-      const { action: settingsAction, destroy: settingsDestroy } = createToggleAction(
-        {
-          name: 'settings.title',
-          icon: 'mdi-cog',
-          title: 'settings.tooltip',
-        },
-        {
-          id: 'settingsId',
-          component: VcsSettings,
-          state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
-          slot: WindowSlot.DYNAMIC_RIGHT,
-        },
-        app.windowManager,
-        vcsAppSymbol,
-      );
-      app.navbarManager.add(
-        {
-          id: 'settingsToggle',
-          action: settingsAction,
-        },
-        vcsAppSymbol,
-        ButtonLocation.MENU,
-      );
-
-      let pluginAdded;
-      const pluginRemoved = app.plugins.removed.addEventListener(async (plugin) => {
-        app.windowManager.removeOwner(plugin.name);
-        app.navbarManager.removeOwner(plugin.name);
-        app.toolboxManager.removeOwner(plugin.name);
-      });
+      const mapNavbarListener = setupMapNavbar(app);
+      const legendDestroy = setupLegendWindow(app);
+      const settingsDestroy = setupSettingsWindow(app);
+      const destroyComponentsWindow = setupComponentsWindow(app);
+      const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
 
+      let pluginMountedListener;
       onMounted(() => {
-        pluginAdded = app.plugins.added.addEventListener((plugin) => {
-          app.windowManager.removeOwner(plugin.name);
-          app.navbarManager.removeOwner(plugin.name);
-          app.toolboxManager.removeOwner(plugin.name);
-          if (plugin.onVcsAppMounted) {
-            plugin.onVcsAppMounted(app);
-          }
-        });
-        [...app.plugins].forEach((plugin) => {
-          if (plugin.onVcsAppMounted) {
-            plugin.onVcsAppMounted(app);
-          }
-        });
+        pluginMountedListener = setupPluginMountedListeners(app);
         app.maps.setTarget(mapId);
       });
 
       onUnmounted(() => {
-        if (mapAddedDestroy) {
-          mapAddedDestroy();
-        }
-        if (mapRemovedDestroy) {
-          mapRemovedDestroy();
-        }
-        if (pluginAdded) {
-          pluginAdded();
-        }
-        if (pluginRemoved) {
-          pluginRemoved();
-        }
-        Object.values(mapButtonActionDestroy).forEach(cb => cb());
-
-        if (settingsDestroy) {
-          settingsDestroy();
+        if (pluginMountedListener) {
+          pluginMountedListener();
         }
+        mapNavbarListener();
+        legendDestroy();
+        settingsDestroy();
+        destroyComponentsWindow();
+        destroyThemingListener();
       });
 
       return {
         mapId,
-      };
-    },
-    provide() {
-      return {
-        language: window.navigator.language.split('-')[0],
+        mobileLogo: computed(() => app.uiConfig.config.value.mobileLogo ?? app.uiConfig.config.value.logo),
       };
     },
   };

package/src/application/VcsMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="mapId" />
+  <div :id="mapId" @click.right.stop="(e) => { e.preventDefault(); }" />
 </template>
 
 <style lang="scss" scoped>

package/src/application/VcsSettings.vue

@@ -33,7 +33,7 @@
 <script>
   import {
     ref, inject, onUnmounted, getCurrentInstance, computed,
-  } from '@vue/composition-api';
+  } from 'vue';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 

package/src/application/vcsAppWrapper.vue

@@ -11,6 +11,7 @@
    * This component wraps the {@see VcsApp} component in a
    * v-app tag to ensure vuetify functionality. If you provide your own vuetify app,
    * do NOT use this wrapper, but use {@see VcsApp} directly, since you may only use v-app once.
+   * @vue-prop {string} appId - the app to wrap. will be passed to the VcsApp component
    */
   export default {
     name: 'VcsAppWrapper',

package/src/assets/font/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2009-2011 by Accademia di Belle Arti di Urbino and students of MA course of Visual design. Some rights reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -9,6 +9,7 @@
         <v-checkbox
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
+          class="vcs-checkbox"
           hide-details
           indeterminate-icon="$vcsCheckboxIndeterminate"
           :dense="$attrs.dense!==false"
@@ -28,6 +29,18 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
+.vcs-checkbox {
+  ::v-deep {
+    label.v-label,
+    .v-icon.v-icon{
+      color: inherit;
+    }
+    .v-input--selection-controls__input {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
 .v-input--selection-controls {
   margin: 0;
   padding: 0;

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

@@ -28,7 +28,7 @@
   import {
     onMounted,
     onUnmounted,
-  } from '@vue/composition-api';
+  } from 'vue';
   import { Subject } from 'rxjs';
   import { debounceTime, takeUntil } from 'rxjs/operators';