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

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    v-if="group.action"
+    :class="{ 'vcs-toolbox-action-select-button--active': open }"
+    style="width:fit-content"
+  >
+    <VcsButton
+      :key="group.action.tools[group.action.currentIndex].name"
+      :tooltip="group.action.tools[group.action.currentIndex].title"
+      :icon="group.action.tools[group.action.currentIndex].icon"
+      :active="group.action.active"
+      @click.stop="group.action.callback($event)"
+      v-bind="{...$attrs}"
+      class="vcs-toolbox-action-selected"
+      :min-width="32"
+      :width="32"
+      large
+    />
+    <v-menu
+      v-model="open"
+      @input="$emit('toggle', open)"
+      offset-y
+      :nudge-left="nudgeLeft"
+      z-index="0"
+    >
+      <template #activator="{ on, attrs }">
+        <VcsButton
+          :tooltip="group.action.title"
+          v-bind="attrs"
+          v-on="on"
+          class="vcs-toolbox-action-select"
+          :min-width="16"
+          :width="16"
+          large
+        >
+          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+        </VcsButton>
+      </template>
+
+      <v-toolbar
+        class="vcs-toolbox-2 toolbar__secondary mx-auto v-sheet marginToTop justify-center"
+        :height="40"
+        width="fit-content"
+        color="basic"
+        dense
+      >
+        <v-toolbar-items class="w-full">
+          <div class="d-flex align-center justify-space-between w-full mx-1">
+            <VcsButton
+              v-for="(item, index) in group.action.tools"
+              :key="`${item.name}-${index}`"
+              :tooltip="item.title"
+              :icon="item.icon"
+              @click="group.action.selected(index)"
+              v-bind="{...$attrs}"
+              large
+            />
+          </div>
+        </v-toolbar-items>
+      </v-toolbar>
+    </v-menu>
+  </div>
+</template>
+<style lang="scss">
+.vcs-toolbox-action-selected > .v-btn.vcs-button--large {
+  max-width: 40px;
+}
+
+.vcs-toolbox-action-select > .v-btn.vcs-button--large {
+  max-width: 8px;
+}
+
+.vcs-toolbox-action-select-button--active {
+  //border: 2px solid var(--v-basic-base);
+  border-radius: 5px;
+  background: var(--v-basic-base);
+}
+
+.vcs-toolbox-2 {
+  .v-toolbar__content {
+    padding: 0;
+  }
+}
+
+.marginToTop {
+  margin-top: 3px;
+}
+</style>
+<script>
+  import { ref, computed } from 'vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+
+  /**
+   * @description
+   * A dynamic Toolbox Button rendering a selected item and a dropdown to select an item using {@link https://vuetifyjs.com/en/api/v-menu/|vuetify v-menu} and {@link VcsButton}.
+   * @vue-prop {SelectToolboxComponent} group - A toolbox group of type 'select'.
+   * @vue-computed {number} nudgeLeft - offset of the dropdown toolbar to the left
+   */
+  export default {
+    name: 'ToolboxActionSelect',
+    components: { VcsButton },
+    props: {
+      group: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const open = ref(false);
+
+      /**
+       * v-menu auto prop is not working as expected.
+       * Workaround using hardcoded button sizes and paddings
+       * @type {ComputedRef<number>}
+       */
+      const nudgeLeft = computed(() => {
+        const toolboxBtnWidth = 42 + 8; // with padding
+        const menuBtnWidth = 16;
+        return (props.group.action.tools.length * (toolboxBtnWidth / 2)) + (menuBtnWidth / 2);
+      });
+
+      return {
+        open,
+        nudgeLeft,
+      };
+    },
+  };
+</script>

package/src/manager/toolbox/ToolboxManager.vue

@@ -1,24 +1,36 @@
-<script src="../../vcsUiApp.js"></script>
 <template>
   <v-toolbar
-    v-if="toolboxOpen && actionGroups.length > 0 && $vuetify.breakpoint.mdAndUp"
-    dense
+    v-if="toolboxOpen && orderedGroups.length > 0 && $vuetify.breakpoint.mdAndUp"
     class="vcs-toolbox toolbar__secondary mx-auto v-sheet marginToTop"
-    :class="{ 'rounded-b': groupId === null }"
-    :width="width"
+    :class="{ 'rounded-b': !open }"
+    :height="40"
+    width="fit-content"
+    dense
   >
     <v-toolbar-items class="w-full">
-      <div class="d-flex align-center justify-space-between w-full">
-        <ToolboxGroupComponent
-          v-for="(group, idx) in actionGroups"
-          :key="group.id"
-          :group-icon="group.icon"
-          :group-title="group.title"
-          :actions="group.actions"
-          class="px-2"
-          :active="groupId === group.id"
-          :position="getPosition(idx)"
-          @click="toggleGroup(group.id)"
+      <div
+        class="d-flex align-center justify-space-between w-full mx-1"
+        v-for="group in orderedGroups"
+        :key="group.id"
+      >
+        <ToolboxActionGroup
+          v-if="group.type === ToolboxType.GROUP"
+          :group="group"
+          @toggle="(groupOpen) => open = groupOpen"
+        />
+        <ToolboxActionSelect
+          v-else-if="group.type === ToolboxType.SELECT"
+          :group="group"
+          @toggle="(selectOpen) => open = selectOpen"
+        />
+        <VcsButton
+          v-else
+          :tooltip="group.action.title"
+          :icon="group.action.icon"
+          :active="group.action.active"
+          @click.stop="group.action.callback($event)"
+          v-bind="{...$attrs}"
+          large
         />
       </div>
     </v-toolbar-items>
@@ -41,71 +53,95 @@
     &.theme--light.v-toolbar.v-sheet {
       background-color: #ffffffda;
     }
+    &.theme--dark.v-toolbar.v-sheet {
+      background-color: #000000da;
+    }
   }
 
   .marginToTop {
     margin-top: 2px;
   }
+
+  .v-toolbar__items > div{
+    gap: 8px;
+    width: fit-content;
+    display: inline-block;
+  }
 </style>
 
 <script>
+  import { inject, ref, computed, watch, onUnmounted } from 'vue';
+  import { ButtonLocation, vcsAppSymbol } from '@vcmap/ui';
+  import { getComponentsByOrder, ToolboxType } from './toolboxManager.js';
+  import ToolboxActionSelect from './SelectToolboxComponent.vue';
+  import ToolboxActionGroup from './GroupToolboxComponent.vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
 
-import { inject, ref, computed, watch, onUnmounted } from 'vue';
-import ToolboxGroupComponent from './ToolboxGroupComponent.vue';
-import {ButtonLocation, vcsAppSymbol} from '@vcmap/ui';
+  /**
+   * @typedef {Object} ToolboxButtonGroup
+   * @property {string} id
+   * @property {string} type
+   * @property {string} icon
+   * @property {string} title
+   * @property {Array<ButtonComponent>} buttons
+   * @property {string} [selected]
+   * @property {function(index:number):void} [selectCb]
+   */
 
-/**
- * @typedef {Object} ActionGroup
- * @property {string} id
- * @property {string} icon
- * @property {string} title
- * @property {Array<VcsAction>} actions
- */
+  /**
+   * @description ToolboxManager component rendering toolbox different kind of Toolbox buttons:
+   * - Single toggle button
+   * - Select drop down button to select an item, selected button is rendered besides
+   * - Group drop down button showing a group of toggle buttons
+   * Watches for changes in toolbox components.
+   * Adds Toolbox button in Navbar, if components are available or removes it otherwise.
+   * @vue-computed {Array<ToolboxButtonGroup>} groups - Array of group components
+   * @vue-computed {Array<ToolboxButtonGroup>} orderedGroups - Array of group components sorted by owner
+   */
+  export default {
+    name: 'VcsToolboxManager',
+    components: {
+      ToolboxActionSelect,
+      ToolboxActionGroup,
+      VcsButton,
+    },
+    setup() {
+      const app = inject('vcsApp');
 
-/**
- * @description ToolboxManager component rendering toolbox using {@link ToolboxGroupComponent}.
- * @vue-computed {Array<ActionGroup>} actionGroups - Array of group components
- * @vue-computed {number} width - width of toolbox depending on number of groups
- */
-export default {
-  name: 'VcsToolboxManager',
-  components: {
-    ToolboxGroupComponent,
-  },
-  setup() {
-    const app = inject('vcsApp');
+      const toolboxComponentIds = ref(app.toolboxManager.componentIds);
+      const groups = computed(() => {
+        return toolboxComponentIds.value.map(id => app.toolboxManager.get(id));
+      });
 
-    const toolboxComponentIds = ref(app.toolboxManager.componentIds);
-    const actionGroups = computed(() => {
-      const groups = toolboxComponentIds.value.map(id => app.toolboxManager.get(id));
-      return groups
-        .map((g) => {
-          const buttonIds = ref(g.buttonManager.componentIds);
-          return {
-            id: g.id,
-            icon: g.icon,
-            title: g.title,
-            actions: buttonIds.value.map(id => g.buttonManager.get(id).action),
-          };
-        })
-        .filter(g => g.actions.length > 0);
-    });
+      /**
+       * To be rendered in Toolbox components must meet certain conditions:
+       * - SingleToolboxComponent: no further conditions
+       * - SelectToolboxComponent: must have at least two tools
+       * - GroupToolboxComponent: must have at least one member (button)
+       * @param {SingleToolboxComponent|SelectToolboxComponent|GroupToolboxComponent} c
+       * @returns {boolean}
+       */
+      function filterFunc(c) {
+        return c.type === ToolboxType.SINGLE ||
+          c?.action?.tools?.length > 1 ||
+          c.buttonManager?.componentIds?.length > 0;
+      }
+      const orderedGroups = computed(() => getComponentsByOrder(groups.value).filter(filterFunc));
 
-    const toolboxOpen = ref(true);
-    const toolboxToggleAction = {
-      name: 'toolboxToggleAction',
-      icon: '$vcsTools',
-      title: 'Toolbox',
-      active: true,
-      callback() {
-        this.active = !this.active;
-        toolboxOpen.value = this.active;
-      },
-    };
+      const toolboxOpen = ref(true);
+      const toolboxToggleAction = {
+        name: 'toolboxToggleAction',
+        icon: '$vcsTools',
+        title: 'Toolbox',
+        active: true,
+        callback() {
+          this.active = !this.active;
+          toolboxOpen.value = this.active;
+        },
+      };
 
-    const stopWatching = watch([actionGroups],
-      ([actionGroups]) => {
-        if (actionGroups.length > 0) {
+      function handleToolboxButton() {
+        if (groups.value.length > 0) {
           if (!app.navbarManager.has('toolbox')) {
             app.navbarManager.add(
               {
@@ -120,39 +156,20 @@ export default {
           app.navbarManager.remove('toolbox');
         }
       }
-    );
-
-    onUnmounted(() => {
-      stopWatching();
-    });
+      handleToolboxButton();
 
-    // XXX can this solved by CSS to get rid of the hardcoded size and padding?
-    const buttonSize = 54;
-    const buttonPadding = 8;
-    const size = buttonSize + (2 * buttonPadding);
-    const width = computed(() => actionGroups.value.length * size);
+      const stopWatching = watch(groups, () => handleToolboxButton());
 
-    /**
-     * calculates relative x-position of a button from the left edge of toolbar
-     * @param {number} idx
-     * @returns {number}
-     */
-    const getPosition = (idx) => (size * (idx + 1)) - (size / 2);
+      onUnmounted(() => {
+        stopWatching();
+      });
 
-    return {
-      toolboxOpen,
-      actionGroups,
-      width,
-      getPosition,
-      groupId: ref(null),
-      toggleGroup(groupId) {
-        if (this.groupId === groupId) {
-          this.groupId = null;
-        } else {
-          this.groupId = groupId;
-        }
-      },
-    };
-  },
-};
+      return {
+        toolboxOpen,
+        orderedGroups,
+        ToolboxType,
+        open: ref(false),
+      };
+    },
+  };
 </script>