@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

package/src/manager/panel/PanelComponent.vue

@@ -18,20 +18,13 @@
 </template>
 
 <style scoped lang="scss">
-  @import '../../styles/shades.scss';
-
   .panel-component {
     padding: 0 4px;
   }
-  .panel-component.theme--dark::after {
-    content: '';
-    position: absolute;
-    background: map-get($shades, 'black');
-  }
-  .panel-component.theme--light::after {
+  .panel-component::after {
     content: '';
     position: absolute;
-    background: map-get($shades, 'white');
+    background: rgb(var(--v-theme-surface-light));
   }
 
   .panel-component-left::after {

package/src/manager/panel/PanelManagerComponent.vue

@@ -143,17 +143,21 @@
               ((panelFrameRef.value.offsetTop + e.y) /
                 panelFrameRef.value.parentElement.offsetHeight) *
               100;
-            setPanelPosition(panel, { height: `${Math.round(100 - height)}%` });
+            setPanelPosition(panelManager, panel, {
+              height: `${Math.round(100 - height)}%`,
+            });
           } else {
             const width =
               ((panelFrameRef.value.offsetLeft + e.x) /
                 panelFrameRef.value.parentElement.offsetWidth) *
               100;
             if (panel[panelLocationSymbol] === PanelLocation.LEFT) {
-              setPanelPosition(panel, { width: `${width}%` });
+              setPanelPosition(panelManager, panel, { width: `${width}%` });
               resizeKey = 'left';
             } else if (panel[panelLocationSymbol] === PanelLocation.RIGHT) {
-              setPanelPosition(panel, { width: `${Math.round(100 - width)}%` });
+              setPanelPosition(panelManager, panel, {
+                width: `${Math.round(100 - width)}%`,
+              });
               resizeKey = 'right';
             }
           }

package/src/manager/panel/panelHelper.js

@@ -239,7 +239,7 @@ export function updatePanelSizes(
       },
       targetSize,
     );
-    setPanelPosition(leftPanel, updatedLeft);
+    setPanelPosition(panelManager, leftPanel, updatedLeft);
   }
   if (panelManager.hasLocation(PanelLocation.RIGHT) && resizeKey !== 'left') {
     const updatedRight = handleSidePanel(
@@ -252,7 +252,7 @@ export function updatePanelSizes(
       },
       targetSize,
     );
-    setPanelPosition(rightPanel, updatedRight);
+    setPanelPosition(panelManager, rightPanel, updatedRight);
   }
 
   const main = percentageFromPanelOptions(
@@ -267,6 +267,6 @@ export function updatePanelSizes(
     return acc;
   }, {});
   if (Object.keys(toUpdate).length > 0) {
-    setPanelPosition(mainPanel, toUpdate);
+    setPanelPosition(panelManager, mainPanel, toUpdate);
   }
 }

package/src/manager/panel/panelManager.d.ts

@@ -30,10 +30,11 @@
  */
 export function getPanelPosition(panelComponent: Partial<PanelComponent>): PanelPosition | undefined;
 /**
+ * @param {PanelManager} panelManager
  * @param {PanelComponent} panelComponent
  * @param {Partial<PanelPosition>} panelPosition
  */
-export function setPanelPosition(panelComponent: PanelComponent, panelPosition: Partial<PanelPosition>): void;
+export function setPanelPosition(panelManager: PanelManager, panelComponent: PanelComponent, panelPosition: Partial<PanelPosition>): void;
 export const panelLocationSymbol: unique symbol;
 export const panelPositionSymbol: unique symbol;
 /**
@@ -249,6 +250,13 @@ declare class PanelManager implements IPanelManager {
      * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
      */
     removed: import("@vcmap/core").VcsEvent<PanelComponent>;
+    /**
+     * @type {import("@vcmap/core").VcsEvent<{panelId: string, panelPosition: PanelPosition}>}
+     */
+    positionChanged: import("@vcmap/core").VcsEvent<{
+        panelId: string;
+        panelPosition: PanelPosition;
+    }>;
     /**
      * reactive ordered array of ids,
      * @type {import("vue").UnwrapRef<string[]>}

package/src/manager/panel/panelManager.js

@@ -114,10 +114,11 @@ export function getPanelPosition(panelComponent) {
 }
 
 /**
+ * @param {PanelManager} panelManager
  * @param {PanelComponent} panelComponent
  * @param {Partial<PanelPosition>} panelPosition
  */
-export function setPanelPosition(panelComponent, panelPosition) {
+export function setPanelPosition(panelManager, panelComponent, panelPosition) {
   const position = getPanelPosition(panelComponent);
   const toUpdate = Object.keys(panelPosition).reduce((acc, key) => {
     if (position?.[key] !== panelPosition[key]) {
@@ -126,7 +127,14 @@ export function setPanelPosition(panelComponent, panelPosition) {
     return acc;
   }, {});
   if (Object.keys(toUpdate).length > 0) {
-    Object.assign(panelComponent[panelPositionSymbol], panelPosition);
+    const newPosition = Object.assign(
+      panelComponent[panelPositionSymbol],
+      panelPosition,
+    );
+    panelManager.positionChanged.raiseEvent({
+      panelId: panelComponent.id,
+      panelPosition: newPosition,
+    });
   }
 }
 
@@ -149,6 +157,10 @@ class PanelManager {
      * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
      */
     this.removed = new VcsEvent();
+    /**
+     * @type {import("@vcmap/core").VcsEvent<{panelId: string, panelPosition: PanelPosition}>}
+     */
+    this.positionChanged = new VcsEvent();
     /**
      * reactive ordered array of ids,
      * @type {import("vue").UnwrapRef<string[]>}
@@ -266,7 +278,7 @@ class PanelManager {
           return acc;
         }, {});
       if (Object.keys(toUpdate).length > 0) {
-        setPanelPosition(panelComponent, toUpdate);
+        setPanelPosition(this, panelComponent, toUpdate);
       }
     }
   }

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -13,7 +13,7 @@
           :icon="group.icon"
           :disabled="group.disabled"
           :tooltip="group.title"
-          :active="open || hasActiveAction"
+          :active="hasActiveAction"
           :color="hasActiveAction ? 'primary' : ''"
           v-bind="props"
         >
@@ -22,12 +22,11 @@
       </template>
 
       <v-toolbar
-        id="vcs-toolbox-toolbar--secondary"
-        class="mx-auto marginToTop px-1 rounded-b opacity-80 px-1"
-        :height="40"
+        class="vcs-toolbox-toolbar--secondary mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
+        :height="toolboxHeight"
       >
         <v-toolbar-items class="w-100">
-          <div class="d-flex align-center justify-space-between w-100">
+          <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="{ id, action } in orderedButtons"
               :key="id"
@@ -54,6 +53,7 @@
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description
@@ -94,10 +94,16 @@
         orderedButtons.value.some((a) => a.action.active),
       );
 
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
+
       return {
         open,
         orderedButtons,
         hasActiveAction,
+        toolboxHeight,
       };
     },
   };

package/src/manager/toolbox/GroupToolboxComponent.vue.d.ts

@@ -7,6 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     open: import("vue").Ref<boolean>;
     orderedButtons: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
     hasActiveAction: import("vue").ComputedRef<boolean>;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -28,7 +28,7 @@
           :tooltip="group.action.title"
           :disabled="group.action.disabled"
           v-bind="props"
-          class="vcs-toolbox-action-select"
+          class="vcs-toolbox-action-select px-0"
           :min-width="16"
           :width="16"
         >
@@ -37,12 +37,12 @@
       </template>
 
       <v-toolbar
-        class="vcs-toolbox-2 mx-auto marginToTop rounded-b opacity-80 px-1"
-        :height="40"
+        class="vcs-toolbox-2 mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
+        :height="toolboxHeight"
         dense
       >
         <v-toolbar-items class="w-100">
-          <div class="d-flex align-center justify-space-between w-100">
+          <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="(item, index) in group.action.tools"
               :key="`${item.name}-${index}`"
@@ -64,9 +64,10 @@
   }
 </style>
 <script>
-  import { ref } from 'vue';
+  import { ref, computed } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description
@@ -90,9 +91,13 @@
     },
     setup() {
       const open = ref(false);
-
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
       return {
         open,
+        toolboxHeight,
       };
     },
   };

package/src/manager/toolbox/SelectToolboxComponent.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     open: import("vue").Ref<boolean>;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;

package/src/manager/toolbox/{ToolboxManager.vue → ToolboxManagerComponent.vue}

@@ -1,14 +1,13 @@
 <template>
   <v-toolbar
     v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
-    class="vcs-toolbox mx-auto marginToTop opacity-80"
+    class="vcs-toolbox mx-auto elevation-4 opacity-80"
     :class="{
       'rounded-b': !open,
     }"
-    :height="40"
+    :height="toolboxHeight"
     :style="{ zIndex }"
     @click.stop="bringToTop"
-    style="width: fit-content"
   >
     <v-toolbar-items class="w-100 px-4 gc-1">
       <div
@@ -42,8 +41,9 @@
 </template>
 
 <style lang="scss" scoped>
-  .marginToTop {
+  .vcs-toolbox {
     margin-top: 2px;
+    width: fit-content;
   }
 </style>
 
@@ -61,6 +61,7 @@
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
   import { ButtonLocation } from '../navbarManager.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @typedef {Object} ToolboxButtonGroup
@@ -84,7 +85,7 @@
    * @vue-computed {Array<ToolboxButtonGroup>} orderedGroups - Array of group components sorted by owner
    */
   export default {
-    name: 'VcsToolboxManager',
+    name: 'ToolboxManagerComponent',
     components: {
       ToolboxActionSelect,
       ToolboxActionGroup,
@@ -163,12 +164,12 @@
       }
       handleToolboxButton();
 
-      const stopWatching = watch(groups, () => handleToolboxButton());
+      watch(groups, () => handleToolboxButton());
 
       onUnmounted(() => {
-        stopWatching();
         nameChangeListener();
         app.windowManager.removeExternalIdFromZIndex('toolbox');
+        app.navbarManager.remove('toolbox');
       });
 
       watch(toolboxOpen, () => {
@@ -183,6 +184,10 @@
       };
 
       const { mdAndUp } = useDisplay();
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
       return {
         mdAndUp,
         toolboxOpen,
@@ -200,6 +205,7 @@
             bringToTop();
           }
         },
+        toolboxHeight,
       };
     },
   };

package/src/manager/toolbox/{ToolboxManager.vue.d.ts → ToolboxManagerComponent.vue.d.ts}

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     open: import("vue").Ref<boolean>;
     bringToTop: () => void;
     openGroup(group: any): void;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 export type ToolboxButtonGroup = {

package/src/manager/window/WindowComponent.vue

@@ -9,8 +9,8 @@
     :class="{
       rounded: !isDocked,
       marginToTop: isDocked || !isChild,
-      'rounded-br': isDynamicLeft,
-      'rounded-bl': isDynamicRight,
+      'rounded-be': isDynamicLeft,
+      'rounded-bs': isDynamicRight,
     }"
   >
     <div
@@ -89,17 +89,21 @@
       });
 
       const isChild = computed(() => !!props.windowState.parentId);
-      const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
-      const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
+      const isDynamic = computed(
+        () => props.slotWindow.value !== WindowSlot.STATIC,
+      );
+      const isDocked = computed(
+        () => props.slotWindow.value !== WindowSlot.DETACHED,
+      );
       const isDockedLeft = computed(() => {
         return (
-          props.slotWindow === WindowSlot.STATIC ||
-          props.slotWindow === WindowSlot.DYNAMIC_LEFT ||
-          props.slotWindow === WindowSlot.DYNAMIC_CHILD
+          props.slotWindow.value === WindowSlot.STATIC ||
+          props.slotWindow.value === WindowSlot.DYNAMIC_LEFT ||
+          props.slotWindow.value === WindowSlot.DYNAMIC_CHILD
         );
       });
       const isDockedRight = computed(
-        () => props.slotWindow === WindowSlot.DYNAMIC_RIGHT,
+        () => props.slotWindow.value === WindowSlot.DYNAMIC_RIGHT,
       );
       const isDraggable = ref(false);
       /**

package/src/manager/window/WindowComponentHeader.vue

@@ -2,21 +2,25 @@
   <div
     class="d-flex justify-space-between align-center window-component-header"
   >
-    <h3 class="d-flex align-center">
+    <h3 class="d-flex align-center flex-grow-1">
       <v-icon
         v-if="windowState.headerIcon"
         class="mr-1"
-        :class="{ 'primary--text': isOnTop }"
-        size="16"
+        :class="{ 'text-primary': isOnTop }"
+        :size="iconSize"
       >
         {{ windowState.headerIcon }}
       </v-icon>
       <span
-        class="d-inline-block user-select-none font-weight-bold"
-        :class="{ 'primary--text': isOnTop }"
+        ref="headerRef"
+        class="d-inline-block user-select-none font-weight-bold vcs-window-header-title"
+        :class="{ 'text-primary': isOnTop }"
       >
         {{ translatedHeaderTitle }}
       </span>
+      <v-tooltip v-if="headerTooltip" activator="parent">
+        {{ $st(headerTooltip) }}
+      </v-tooltip>
     </h3>
     <div class="d-flex justify-space-between align-center">
       <template v-if="windowState.headerActions?.length > 0">
@@ -52,10 +56,10 @@
 
 <style lang="scss" scoped>
   .window-component-header {
-    max-height: 16px;
+    max-height: calc(var(--v-vcs-font-size) * 2 - 10px);
 
     h3 {
-      line-height: 16px;
+      line-height: calc(var(--v-vcs-font-size) * 2 - 10px);
     }
     .v-divider--vertical.v-divider--inset {
       margin-top: 2px;
@@ -64,14 +68,23 @@
   .user-select-none {
     user-select: none;
   }
+  .vcs-window-header-title {
+    width: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
 </style>
 
 <script>
-  import { VIcon, VDivider } from 'vuetify/components';
-  import { computed, getCurrentInstance } from 'vue';
+  import { VIcon, VDivider, VTooltip } from 'vuetify/components';
+  import { computed, getCurrentInstance, ref } from 'vue';
+  import { createEllipseTooltip } from '../../components/composables.js';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import { createLinkAction } from '../../actions/actionHelper.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description Default window component header with drag functionality close action and further optional window actions.
@@ -88,6 +101,7 @@
       VcsButton,
       VIcon,
       VDivider,
+      VTooltip,
     },
     inheritAttrs: false,
     props: {
@@ -124,6 +138,8 @@
           : vm.$st(props.windowState.headerTitle),
       );
 
+      const headerRef = ref(null);
+
       const infoAction =
         props.windowState.infoUrl || props.windowState.infoUrlCallback
           ? createLinkAction(
@@ -136,11 +152,19 @@
             )
           : undefined;
 
+      const iconSize = useIconSize();
       return {
         pin,
         close,
         isDockable,
         translatedHeaderTitle,
+        headerRef,
+        iconSize,
+        headerTooltip: createEllipseTooltip(
+          computed(() => headerRef.value),
+          computed(() => undefined),
+          translatedHeaderTitle,
+        ),
         infoAction,
       };
     },

package/src/manager/window/WindowComponentHeader.vue.d.ts

@@ -17,6 +17,9 @@ declare const _default: import("vue").DefineComponent<{
     close: () => void;
     isDockable: import("vue").ComputedRef<any>;
     translatedHeaderTitle: import("vue").ComputedRef<any>;
+    headerRef: import("vue").Ref<null>;
+    iconSize: import("vue").ComputedRef<number>;
+    headerTooltip: import("vue").ComputedRef<string>;
     infoAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction | undefined;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {

package/src/manager/window/WindowManager.vue

@@ -160,9 +160,9 @@
         const position = getPosition(windowComponent);
         moveWindow(id, translation, windowManager, targetSize.value, position);
       };
-
+      const display = useDisplay();
       const addMobileClass = computed(() => {
-        return useDisplay().xs.value && componentIds.length > 0;
+        return display.xs.value && componentIds.length > 0;
       });
 
       const setTargetSize = () => {

package/src/manager/window/windowManager.d.ts

@@ -15,15 +15,15 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  * @typedef {{
  *   id?: string,
  *   parentId?: string,
- *   component: import("vue").Component<T, unknown, unknown>,
- *   headerComponent?: import("vue").Component<T, unknown, unknown>,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
- * @template {Object} [T=Object]
+ * @template [T=any]
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
  * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.
@@ -129,11 +129,11 @@ export namespace WindowPositions {
     export { DETACHED_1 as DETACHED };
 }
 export default WindowManager;
-export type WindowComponentOptions<T extends Object = Object> = {
+export type WindowComponentOptions<T = any> = {
     id?: string;
     parentId?: string;
-    component: import("vue").Component<T, unknown, unknown>;
-    headerComponent?: import("vue").Component<T, unknown, unknown>;
+    component: import("vue").Component<T>;
+    headerComponent?: import("vue").Component<T>;
     state?: Partial<WindowState>;
     position?: Partial<WindowPositionOptions>;
     slot?: WindowSlot;

package/src/manager/window/windowManager.js

@@ -105,15 +105,15 @@ export function isSlotPosition(windowPosition) {
  * @typedef {{
  *   id?: string,
  *   parentId?: string,
- *   component: import("vue").Component<T, unknown, unknown>,
- *   headerComponent?: import("vue").Component<T, unknown, unknown>,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
- * @template {Object} [T=Object]
+ * @template [T=any]
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
  * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.

package/src/navigation/MapNavigation.vue

@@ -249,6 +249,25 @@
       const showOverviewButton = ref(
         app.overviewMap.map.layerCollection.size > 0,
       );
+
+      const handleOverviewMapActiveOnStartup = (item) => {
+        if (
+          item &&
+          item.name === 'overviewMapActiveOnStartup' &&
+          showOverviewButton.value &&
+          item.value &&
+          !overviewAction.active
+        ) {
+          overviewAction.callback();
+        }
+      };
+      handleOverviewMapActiveOnStartup(
+        app.uiConfig.getByKey('overviewMapActiveOnStartup'),
+      );
+      const uiConfigListener = app.uiConfig.added.addEventListener(
+        handleOverviewMapActiveOnStartup,
+      );
+
       // Locator
       const { action: locatorAction, destroy: destroyLocator } =
         createLocatorAction(app);
@@ -286,6 +305,7 @@
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
       onUnmounted(() => {
+        uiConfigListener();
         if (overviewDestroy) {
           overviewDestroy();
         }

package/src/navigation/OrientationToolsButton.vue

@@ -18,7 +18,7 @@
 <script>
   import { VCard, VIcon, VTooltip } from 'vuetify/components';
   import { computed } from 'vue';
-  import { useFontSize } from '../vuePlugins/vuetify.js';
+  import { useFontSize, useIconSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card
@@ -50,9 +50,7 @@
     setup() {
       const fontSize = useFontSize();
 
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
-      });
+      const iconSize = useIconSize();
       const height = computed(() => {
         return fontSize.value * 2.5;
       });

package/src/navigation/TiltSlider.vue

@@ -65,7 +65,7 @@
 <script>
   import { computed, defineComponent } from 'vue';
   import { VCard, VSlider, VTooltip } from 'vuetify/components';
-  import { useFontSize, useItemHeight } from '../vuePlugins/vuetify.js';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
   import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default defineComponent({
@@ -87,15 +87,13 @@
       },
     },
     setup(props, { emit }) {
-      const itemHeight = useItemHeight();
-
+      const fontSize = useFontSize();
       const trackSize = computed(() => {
-        return Math.floor(itemHeight.value / 12);
+        return Math.floor((fontSize.value + 3) / 6);
       });
       const tickSize = computed(() => {
         return trackSize.value * 2;
       });
-      const fontSize = useFontSize();
       const minWidth = computed(() => {
         return fontSize.value * 2.5;
       });