@vcmap/ui 5.0.0-rc.16 → 5.0.0-rc.18

package/plugins/test/toolbox-data.js

@@ -1,4 +1,7 @@
 import { ToolboxType } from '@vcmap/ui';
+import { reactive, shallowRef } from 'vue';
+import { VcsEvent } from '@vcmap/core';
+import VcsContent from './vcsContent.vue';
 
 const dummySelectAction = {
   active: false,
@@ -32,123 +35,177 @@ const dummySelectAction = {
   },
 };
 
+function createDummyTriStateAction(app) {
+  const windowComponent = {
+    id: 'tri-state-example',
+    state: {
+      headerTitle: 'Example Session Toggle',
+    },
+    component: VcsContent,
+  };
+
+  const action = reactive({
+    name: 'tri-state-action',
+    icon: 'mdi-triangle',
+    active: false,
+    background: false,
+    callback() {
+      if (this.active) {
+        if (this.background) {
+          return app.windowManager.add(windowComponent, '@vcmap/test');
+        } else {
+          app.windowManager.remove(windowComponent.id);
+          this.active = false;
+        }
+      } else {
+        this.active = true;
+        return app.windowManager.add(windowComponent, '@vcmap/test');
+      }
+      return null;
+    },
+  });
+
+  const listeners = [
+    app.windowManager.added.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.active = true;
+        action.background = false;
+      }
+    }),
+    app.windowManager.removed.addEventListener(({ id }) => {
+      if (id === windowComponent.id) {
+        action.background = true;
+      }
+    }),
+  ];
+
+  const destroy = () => {
+    if (app.windowManager.has(windowComponent.id)) {
+      app.windowManager.remove(windowComponent.id);
+    }
+    listeners.forEach(cb => cb());
+  };
+
+  return { action, destroy };
+}
+
 // eslint-disable-next-line import/prefer-default-export
-export const toolboxData = [
-  [
-    {
-      id: 'singleSelect',
-      type: ToolboxType.SINGLE,
-      action: {
-        name: 'select',
-        title: 'single select',
-        icon: '$vcsPointSelect',
-        active: false,
-        callback() { this.active = !this.active; },
+export function getToolboxData(app) {
+  const { action: triStateAction, destroy } = createDummyTriStateAction(app);
+
+  const toolboxData = [
+    [
+      {
+        id: 'singleSelect',
+        type: ToolboxType.SINGLE,
+        action: {
+          name: 'select',
+          title: 'single select',
+          icon: '$vcsPointSelect',
+          active: false,
+          callback() { this.active = !this.active; },
+        },
       },
-    },
-    '@vcmap/test',
-  ],
-  [
-    {
-      id: 'multiSelect',
-      type: ToolboxType.SELECT,
-      action: {
-        name: 'multiSelect',
-        title: 'multi select',
-        ...dummySelectAction,
-        tools: [
-          {
-            name: 'pen',
-            title: 'Item 1',
-            icon: '$vcsPen',
-          },
-          {
-            name: 'object',
-            title: 'Item 2',
-            icon: '$vcsObjectSelect',
-          },
-        ],
+      '@vcmap/test',
+    ],
+    [
+      {
+        id: 'multiSelect',
+        type: ToolboxType.SELECT,
+        action: {
+          name: 'multiSelect',
+          title: 'multi select',
+          ...dummySelectAction,
+          tools: [
+            {
+              name: 'pen',
+              title: 'Item 1',
+              icon: '$vcsPen',
+            },
+            {
+              name: 'object',
+              title: 'Item 2',
+              icon: '$vcsObjectSelect',
+            },
+          ],
+        },
       },
-    },
-    '@vcmap/test',
-  ],
-  [
-    {
-      id: 'measurement',
-      type: ToolboxType.SELECT,
-      action: {
-        name: 'measurement',
-        title: 'measurement',
-        ...dummySelectAction,
-        tools: [
-          {
-            name: 'distance',
-            title: '2D distance',
-            icon: '$vcs2dDistance',
-          },
-          {
-            name: 'area',
-            title: '2D area',
-            icon: '$vcs2dArea',
-          },
+      '@vcmap/test',
+    ],
+    [
+      {
+        id: 'measurement',
+        type: ToolboxType.SELECT,
+        action: {
+          name: 'measurement',
+          title: 'measurement',
+          ...dummySelectAction,
+          tools: [
+            {
+              name: 'distance',
+              title: '2D distance',
+              icon: '$vcs2dDistance',
+            },
+            {
+              name: 'area',
+              title: '2D area',
+              icon: '$vcs2dArea',
+            },
+            {
+              name: 'distance3D',
+              title: '3D distance',
+              icon: '$vcs3dDistance',
+            },
+            {
+              name: 'area3D',
+              title: '3D area',
+              icon: '$vcs3dArea',
+            },
+          ],
+        },
+      },
+      '@vcmap/test',
+    ],
+    [
+      {
+        id: 'toggle',
+        type: ToolboxType.SINGLE,
+        action: triStateAction,
+      },
+      '@vcmap/test',
+    ],
+    [
+      {
+        id: 'flight',
+        type: ToolboxType.GROUP,
+        icon: '$vcsVideoRecorder',
+        title: 'flight',
+        buttonComponents: [
           {
-            name: 'distance3D',
-            title: '3D distance',
-            icon: '$vcs3dDistance',
+            id: 'flight',
+            action: {
+              name: 'flight',
+              title: 'add flight',
+              icon: 'mdi-camera-plus',
+              active: false,
+              callback() { this.active = !this.active; },
+            },
           },
           {
-            name: 'area3D',
-            title: '3D area',
-            icon: '$vcs3dArea',
+            id: 'export',
+            action: {
+              name: 'export',
+              title: 'export flight',
+              icon: '$vcsExportFlight',
+              active: false,
+              callback() { this.active = !this.active; },
+            },
           },
         ],
       },
-    },
-    '@vcmap/test',
-  ],
-  [
-    {
-      id: 'toggle',
-      type: ToolboxType.SINGLE,
-      action: {
-        name: 'split',
-        title: 'split view',
-        icon: '$vcsSplitView',
-        active: false,
-        callback() { this.active = !this.active; },
-      },
-    },
-    '@vcmap/test',
-  ],
-  [
-    {
-      id: 'flight',
-      type: ToolboxType.GROUP,
-      icon: '$vcsVideoRecorder',
-      title: 'flight',
-      buttonComponents: [
-        {
-          id: 'flight',
-          action: {
-            name: 'flight',
-            title: 'add flight',
-            icon: 'mdi-camera-plus',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-        {
-          id: 'export',
-          action: {
-            name: 'export',
-            title: 'export flight',
-            icon: '$vcsExportFlight',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-      ],
-    },
-    '@vcmap/test',
-  ],
-];
+      '@vcmap/test',
+    ],
+  ];
+
+  return { toolboxData, destroy };
+}

package/plugins/test/vcsContent.vue

@@ -18,7 +18,7 @@
 
   export default {
     name: 'VcsContent',
-    components: [VSheet],
+    components: { VSheet },
     setup() {
       return { };
     },

package/plugins/test/windowManagerExample.vue

@@ -88,7 +88,7 @@
         {
           id: 'position1',
           state: {
-            headerTitle: 'Example position1',
+            headerTitle: 'Example position1 relative',
           },
           component: VcsContent,
           position: {
@@ -101,15 +101,17 @@
         {
           id: 'position2',
           state: {
-            hideHeader: true,
-            headerTitle: 'Example position2',
+            hideHeader: false,
+            headerTitle: 'Example position2 absolute',
           },
           component: EmptyComponent,
           position: {
-            left: '35%',
-            right: '35%',
-            top: '40%',
-            bottom: '20%',
+            left: '200px',
+            top: '300px',
+            minHeight: '250px',
+            maxHeight: '500px',
+            minWidth: '400px',
+            maxWidth: '1000px',
           },
         },
       ];

package/src/actions/actionHelper.js

@@ -1,10 +1,13 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
-import { Collection, Extent, MapCollection, mercatorProjection, Viewpoint } from '@vcmap/core';
+import {
+  Collection, Extent, MapCollection, mercatorProjection, Viewpoint,
+} from '@vcmap/core';
 import { Feature } from 'ol';
 import { reactive, ref } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { getWindowPositionOptions, WindowSlot } from '../manager/window/windowManager.js';
+import { WindowSlot } from '../manager/window/windowManager.js';
+import { getWindowPositionOptions } from '../manager/window/windowHelper.js';
 import SearchComponent from '../search/searchComponent.vue';
 
 /**
@@ -189,11 +192,11 @@ export function createOverviewMapAction(overviewMap, windowComponent, windowMana
  * at the clicked position (the actions position) by default, unless the window component already has a position set.
  * @param {ActionOptions} actionOptions
  * @param {WindowComponentOptions} modalComponent
- * @param {WindowManager}  windowManager
+ * @param {VcsUiApp}  app
  * @param {string|symbol} owner
  * @returns {{action: VcsAction, destroy: Function}}
  */
-export function createModalAction(actionOptions, modalComponent, windowManager, owner) {
+export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -216,7 +219,7 @@ export function createModalAction(actionOptions, modalComponent, windowManager,
         left: 0,
         right: 0,
       });
-      elem.onclick = () => { windowManager.remove(id); };
+      elem.onclick = () => { app.windowManager.remove(id); };
       document.body.appendChild(elem);
     }
   };
@@ -235,20 +238,20 @@ export function createModalAction(actionOptions, modalComponent, windowManager,
       if (!this.active) {
         this.active = true;
         const { left, top, width } = event.currentTarget.getBoundingClientRect();
-        const position = getWindowPositionOptions(left + width, top);
+        const position = getWindowPositionOptions(left + width, top, app.maps.target);
         const state = { ...modalComponent?.state, hideHeader: true };
-        windowManager.add({ position, ...modalComponent, id, state }, owner);
-        addModal(windowManager.componentIds.length - 2);
+        app.windowManager.add({ position, ...modalComponent, id, state }, owner);
+        addModal(app.windowManager.componentIds.length - 2);
       } else {
         this.active = false;
-        windowManager.remove(id);
+        app.windowManager.remove(id);
       }
       return null;
     },
   };
 
   const listeners = [
-    windowManager.removed.addEventListener(({ id: windowId }) => {
+    app.windowManager.removed.addEventListener(({ id: windowId }) => {
       if (windowId === id) {
         action.active = false;
         removeModal();

package/src/application/VcsApp.vue

@@ -85,7 +85,7 @@
   import MapNavigation from '../navigation/mapNavigation.vue';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
-  import ComponentsManager from '../manager/categoryManager/ComponentsManager.vue';
+  import CategoryManager from '../manager/categoryManager/CategoryManager.vue';
   import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/vcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
@@ -276,56 +276,54 @@
   }
 
   /**
-   * This helper function will add a Components manager button to the navbar. The Components Manager
+   * This helper function will add a category manager button to the navbar. The category 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(
+  export function setupCategoryManagerWindow(app) {
+    const id = 'category-manager';
+    const { action: categoryManagerAction, destroy } = createToggleAction(
       {
-        name: 'components-manager',
+        name: id,
         icon: '$vcsComponents',
-        title: 'components.tooltip',
+        title: 'categoryManager.tooltip',
       },
       {
-        id: 'component-manager',
+        id,
         state: {
-          headerTitle: 'components.title',
+          headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
         },
-        component: ComponentsManager,
+        component: CategoryManager,
         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')) {
+    const setupCategories = () => {
+      if (app.categoryManager.componentIds.length > 0) {
+        if (!app.navbarManager.has(id)) {
           app.navbarManager.add(
-            { id: 'component-manager', action: componentsManagerAction },
+            { id, action: categoryManagerAction },
             vcsAppSymbol,
             ButtonLocation.CONTENT,
           );
         }
       } else {
-        app.windowManager.remove('component-manager');
-        app.navbarManager.remove('component-manager');
+        app.windowManager.remove(id);
+        app.navbarManager.remove(id);
       }
-    });
+    };
+    const addedListener = app.categoryManager.added.addEventListener(setupCategories);
+    const removedListener = app.categoryManager.removed.addEventListener(setupCategories);
+    setupCategories();
 
     return () => {
-      destroyComponentsManagerAction();
+      destroy();
+      addedListener();
+      removedListener();
     };
   }
 
@@ -432,7 +430,7 @@
       const mapNavbarListener = setupMapNavbar(app);
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
-      const destroyComponentsWindow = setupComponentsWindow(app);
+      const destroyComponentsWindow = setupCategoryManagerWindow(app);
       const destroyThemingListener = setupUiConfigTheming(app, getCurrentInstance().proxy.$vuetify);
       const { attributionEntries, attributionAction, destroyAttributions } = setupAttributions(app);
 
@@ -440,6 +438,7 @@
       onMounted(() => {
         pluginMountedListener = setupPluginMountedListeners(app);
         app.maps.setTarget(mapId);
+        app.mounted.raiseEvent(mapId);
       });
 
       onUnmounted(() => {

package/src/application/VcsNavbar.vue

@@ -76,7 +76,7 @@
                     v-bind="attrs"
                     v-on="on"
                     large
-                    tooltip="Share current view of the map."
+                    tooltip="navbar.share.tooltip"
                     icon="$vcsShare"
                   />
                 </template>

package/src/components/buttons/VcsButton.vue

@@ -85,8 +85,14 @@
         padding: 0;
         position: relative;
 
-        &.vcs-button--active-disabled{
+        &.vcs-button--active-background {
           border: 2px solid var(--v-primary-base);
+          color: var(--v-secondary-base);
+          background-color: var(--v-accent-darken1) !important;
+        }
+
+        &.v-btn--disabled {
+          background-color: transparent !important;
         }
       }
     }
@@ -102,6 +108,7 @@
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}.
    * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
    * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
+   * @vue-prop {boolean}                                background - When applied with active the button shows an active-background state implying that a tool is active, but running in background, e.g. windowComponent closed.
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
@@ -135,6 +142,10 @@
         type: String,
         default: undefined,
       },
+      background: {
+        type: Boolean,
+        default: false,
+      },
       hasUpdate: {
         type: Boolean,
         default: false,
@@ -175,7 +186,7 @@
           'font-weight-bold': this.isStandard,
           'text-capitalize': this.isStandard,
           'vcs-button--large': this.isLarge,
-          'vcs-button--active-disabled': this.active && this.$attrs.disabled,
+          'vcs-button--active-background': this.active && this.background && !this.$attrs.disabled,
         };
       },
       hasDefaultSlot() {
@@ -192,7 +203,7 @@
       },
       isOutlined() {
         if (this.isStandard) {
-          return this.active || this.$attrs.disabled;
+          return this.active || this.background;
         }
         return false;
       },

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

@@ -7,6 +7,7 @@
     <template #activator="{ on, attrs }">
       <span v-on="on">
         <v-checkbox
+          :input-value="$attrs.value"
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
           class="vcs-checkbox"

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

@@ -1,11 +1,12 @@
 <template>
   <section class="vcs-form-section">
-    <slot name="header">
+    <slot name="header" :heading="heading" :actions="actions">
       <article class="pa-2 accent">
         <div class="form-section-header d-flex justify-space-between align-center">
           <strong class="caption">{{ $t(heading) }}</strong>
           <VcsActionButtonList
             :actions="actions"
+            :overflow-count="actionButtonListOverflowCount"
             small
           />
         </div>
@@ -30,7 +31,7 @@
 
 
 <script>
-  import { computed, ref } from 'vue';
+  import { computed, reactive } from 'vue';
   import { VAlert } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
 
@@ -42,6 +43,7 @@
    * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
    * @vue-prop {string} heading - Title of the section to be displayed, will be translated.
    * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
+   * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
    * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
    * @vue-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
    */
@@ -60,19 +62,25 @@
         type: Array,
         default: () => ([]),
       },
+      actionButtonListOverflowCount: {
+        type: Number,
+        required: false,
+        default: undefined,
+      },
       helpText: {
         type: String,
         default: undefined,
       },
     },
     setup(props, { slots }) {
-      const showHelp = ref(false);
-      const helpAction = {
+      const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
+        active: false,
         icon: 'mdi-help-circle',
-        callback: () => { showHelp.value = !showHelp.value; },
-      };
+        callback() { this.active = !this.active; },
+      });
+      const showHelp = computed(() => helpAction.active);
       /**
        * @type {ComputedRef<VcsAction>}
        */

package/src/components/lists/VcsActionList.vue

@@ -52,6 +52,7 @@
    * @property {string} [icon] - icon rendered on the button. If no icon provided, item is rendered in overflow
    * @property {Function} callback - callback function is triggered when the button is clicked
    * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
+   * @property {boolean} [background=false] - optional background state. If active and background, button is rendered in primary color outlined
    */
 
   /**
@@ -64,6 +65,7 @@
     icon: [undefined, String],
     callback: Function,
     active: [undefined, Boolean],
+    background: [undefined, Boolean],
   };
 
   /**