@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/shared/__tests__/KeyboardShortcuts.spec.ts

@@ -0,0 +1,50 @@
+import KeyboardShortcuts from '@/components/shared/KeyboardShortcuts.vue';
+import { mount } from '@vue/test-utils';
+import { VBtn, VDialog, VTextField } from 'vuetify/components';
+import { nextTick } from 'vue';
+
+describe('KeyboardShortcuts', () => {
+  it('should render the dialog correctly', async () => {
+    const wrapper = mount(KeyboardShortcuts);
+    const dialog = wrapper.findComponent(VDialog);
+    expect(dialog.isVisible()).toBe(true);
+  });
+
+  it('should filter items based on search input', async () => {
+    const wrapper = mount(KeyboardShortcuts);
+    await wrapper.setProps({ modelValue: true });
+    const searchInput = wrapper.findComponent(VTextField);
+    expect(searchInput.isVisible()).toBe(true);
+    await searchInput.setValue('display');
+    await nextTick();
+    expect(wrapper.text()).not.toContain('Annotation');
+  });
+
+  it('should close the dialog when the close button is clicked', async () => {
+    const wrapper = mount(KeyboardShortcuts);
+    await wrapper.setProps({ modelValue: true });
+    const closeButton = wrapper.findAllComponents(VBtn)[0];
+    expect(closeButton.exists()).toBe(true);
+    await closeButton.trigger('click');
+    await nextTick();
+    const dialog = wrapper.findComponent(VDialog);
+    expect(dialog.props('modelValue')).toBe(false);
+  });
+
+  // Note: Coverage engine crashing with stackoverflow when triggered
+  // it('should clear the search when the close search button is clicked', async () => {
+  //   const wrapper = mount(KeyboardShortcuts);
+  //   await wrapper.setProps({ modelValue: true });
+  //   const closeSearchButton = wrapper.findAllComponents(VBtn)[1];
+  //   expect(closeSearchButton.exists()).toBe(true);
+  //   const searchInput = wrapper.findComponent(VTextField);
+  //   await searchInput.setValue('test');
+  //   expect(searchInput.props('modelValue')).toBe('test');
+  //   const foundSearchButton = wrapper.findComponentByTestId('close-btn-search');
+  //
+  //   await flushPromises();
+  //   await foundSearchButton.trigger('click');
+  //   await nextTick();
+  //   expect(searchInput.props('modelValue')).toBe('');
+  // });
+});

package/src/components/shared/__tests__/MultiLoginError.spec.ts

@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils';
+import MultiLoginError from '@/components/shared/MultiLoginError.vue';
+import { VDialog, VSnackbar } from 'vuetify/components';
+import { nextTick } from 'vue';
+
+describe('MultiLoginError', () => {
+  it('should render the dialog', () => {
+    const wrapper = mount(MultiLoginError);
+    const dialog = wrapper.findComponent(VDialog);
+    expect(dialog.exists()).toBe(true);
+  });
+
+  it('calls verifyOwnership function', async () => {
+    const wrapper = mount(MultiLoginError);
+    wrapper.vm.verifyOwnership();
+    expect(wrapper.vm.snackbarTest).toBe(true);
+  });
+  it('requestAccess should set snackbar to true', () => {
+    const wrapper = mount(MultiLoginError);
+    wrapper.vm.requestAccess();
+    expect(wrapper.vm.snackbar).toBe(true);
+    const snackbar = wrapper.findAllComponents(VSnackbar)[0];
+    expect(snackbar.exists()).toBe(true);
+    expect(snackbar.isVisible()).toBe(true);
+  });
+  it('snackbar should initially be hidden and display when triggered', async () => {
+    const wrapper = mount(MultiLoginError);
+    expect(wrapper.vm.snackbar).toBe(false);
+    wrapper.vm.snackbar = true;
+    await nextTick();
+    const snackbar = wrapper.findAllComponents(VSnackbar)[0];
+    for (const snack of wrapper.findAllComponents(VSnackbar)) {
+      await snack.setValue(true);
+    }
+    expect(snackbar.exists()).toBe(true);
+    expect(snackbar.isVisible()).toBe(true);
+  });
+  it('should hide the snackbar when the close button is clicked', async () => {
+    const wrapper = mount(MultiLoginError);
+    wrapper.vm.snackbar = true;
+    await nextTick();
+    const snackbar = wrapper.findComponent({ name: 'VSnackbar' });
+    expect(snackbar.isVisible()).toBe(true);
+    const closeButton = wrapper.findComponent('[data-testid="closeSnackbar"]');
+    expect(closeButton.exists()).toBe(true);
+    await closeButton.trigger('click');
+    await nextTick();
+    expect(wrapper.vm.snackbar).toBe(false);
+  });
+});

package/src/components/shared/__tests__/NotificationToaster.spec.ts

@@ -0,0 +1,65 @@
+import NotificationToaster from '@/components/shared/NotificationToaster.vue';
+import { mount } from '@vue/test-utils';
+const mockNotify = vi.fn();
+vi.mock('@kyvg/vue3-notification', () => ({
+  useNotification: () => ({
+    notify: mockNotify
+  }),
+  Notifications: {
+    name: 'Notifications'
+  }
+}));
+
+describe('NotificationToaster', () => {
+  it('should pass', async () => {
+    expect(true).toBe(true);
+  });
+  it('displays a success notification with the correct text and icon', () => {
+    const wrapper = mount(NotificationToaster);
+    wrapper.vm.notifySuccess();
+    expect(mockNotify).toHaveBeenCalledWith({
+      type: 'success',
+      text: 'This is a Success message!!',
+      duration: 300000,
+      data: { icon: 'check_circle' }
+    });
+  });
+  it('displays a Error notification with the correct text and icon', () => {
+    const wrapper = mount(NotificationToaster);
+    wrapper.vm.notifyError();
+    expect(mockNotify).toHaveBeenCalledWith({
+      type: 'error',
+      text: 'This is an Error Message!!',
+      duration: 300000,
+      data: { icon: 'error' }
+    });
+  });
+  it('displays a Warning notification with the correct text and icon', () => {
+    const wrapper = mount(NotificationToaster);
+    wrapper.vm.notifyWarning();
+    expect(mockNotify).toHaveBeenCalledWith({
+      type: 'warn',
+      text: 'This is a warning Message!!',
+      duration: 300000,
+      data: { icon: 'warning' }
+    });
+  });
+  it('displays a Info notification with the correct text and icon', () => {
+    const wrapper = mount(NotificationToaster);
+    wrapper.vm.notifyInfo();
+    expect(mockNotify).toHaveBeenCalledWith({
+      type: 'info',
+      text: 'This is an informational message!!',
+      duration: 300000,
+      data: { icon: 'check_circle' }
+    });
+  });
+  it('getButtonColor returns the correct color for each type', () => {
+    const wrapper = mount(NotificationToaster);
+    expect(wrapper.vm.getButtonColor('success')).toBe('rgba(29, 127, 22, 1)');
+    expect(wrapper.vm.getButtonColor('error')).toBe('rgba(202, 52, 74, 1)');
+    expect(wrapper.vm.getButtonColor('warn')).toBe('rgba(166, 103, 2, 1)');
+    expect(wrapper.vm.getButtonColor('info')).toBe('rgba(27, 109, 131, 1)');
+    expect(wrapper.vm.getButtonColor(undefined)).toBe('');
+  });
+});

package/src/components/shared/__tests__/UpdateSnackbar.spec.ts

@@ -3,11 +3,11 @@ import { VAlert, VBtn, VSnackbar } from 'vuetify/components';
 import UpdateSnackbar from '../UpdateSnackbar.vue';
 
 const registration: any = {
-  addEventListener: vi.fn().mockImplementation((e, callback) => {
+  addEventListener: vi.fn().mockImplementation((e: any, callback: any) => {
     callback();
   }),
   installing: {
-    addEventListener: vi.fn().mockImplementation((e, callback) => {
+    addEventListener: vi.fn().mockImplementation((e: any, callback: any) => {
       callback();
     })
   },
@@ -29,7 +29,7 @@ const navigatorWithoutInstalling: any = {
   serviceWorker: {
     getRegistration() {
       return {
-        addEventListener: vi.fn().mockImplementation((e, callback) => {
+        addEventListener: vi.fn().mockImplementation((e: any, callback: any) => {
           callback();
         })
       };
@@ -41,11 +41,11 @@ const navigatorWithoutWaiting: any = {
   serviceWorker: {
     getRegistration() {
       return {
-        addEventListener: vi.fn().mockImplementation((e, callback) => {
+        addEventListener: vi.fn().mockImplementation((e: any, callback: any) => {
           callback();
         }),
         installing: {
-          addEventListener: vi.fn().mockImplementation((e, callback) => {
+          addEventListener: vi.fn().mockImplementation((e: any, callback: any) => {
             callback();
           })
         }
@@ -96,14 +96,14 @@ describe('UpdateSnackbar tests', () => {
     vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigatorWithoutInstalling);
     const wrapper = mount(UpdateSnackbar);
     await flushPromises();
-    expect(wrapper.findComponent(VBtn).text()).toBe('Installing');
+    expect(wrapper.findComponent(VBtn).text()).toBe('labels.installing');
   });
 
   it('should ignore update if waiting not found', async () => {
     vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigatorWithoutWaiting);
     const wrapper = mount(UpdateSnackbar);
     await flushPromises();
-    expect(wrapper.findComponent(VBtn).text()).toBe('Installing');
+    expect(wrapper.findComponent(VBtn).text()).toBe('labels.installing');
   });
 
   it('should apply update on user confirmation', async () => {

package/src/components/shared/__tests__/ValueSelector.spec.ts

@@ -32,6 +32,12 @@ describe('ValueSelector.vue', () => {
     expect(wrapper.emitted('update:value')).toStrictEqual([[100]]);
   });
 
+  it('should set text higher than max limits', async () => {
+    (wrapper.vm as any).sliderValue = '9000';
+    await flushPromises();
+    expect(wrapper.emitted('update:value')).toStrictEqual([[100]]);
+  });
+
   it('should set text', async () => {
     const slider = wrapper.findAllComponents('.v-text-field');
     await slider[0].setValue(10);

package/src/composables/__tests__/useDebounce.spec.ts

@@ -0,0 +1,17 @@
+import { useDebounce } from '@/composables/useDebounce';
+
+describe('useDebounce', () => {
+  it('should call the callback after the specified delay', async () => {
+    const callback = vi.fn();
+    const debounce = useDebounce(callback, 200);
+
+    debounce('test1');
+    debounce('test2');
+    debounce('test3');
+
+    expect(callback).not.toHaveBeenCalled();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    expect(callback).toHaveBeenCalledOnce();
+    expect(callback).toHaveBeenCalledWith('test3');
+  });
+});

package/src/composables/__tests__/useMovingAverage.spec.ts

@@ -0,0 +1,40 @@
+// import { useMovingAverage } from '@/composables/useMovingAverage';
+// describe('useMovingAverage', () => {
+//   it('should calculate the correct average with fewer than "count" values', () => {
+//     const { average, next } = useMovingAverage(3);
+//     next(5);
+//     expect(average.value).toBe(5);
+//     next(10);
+//     expect(average.value).toBe(7.5);
+//   });
+//   it('should calculate the correct average with exactly "count" values', () => {
+//     const { average, next } = useMovingAverage(3);
+//     next(5);
+//     next(10);
+//     next(15);
+//     expect(average.value).toBe(10);
+//   });
+//
+//   it('should maintain only "count" values and calculate the correct moving average', () => {
+//     const { average, next } = useMovingAverage(3);
+//
+//     next(5);
+//     next(10);
+//     next(15);
+//     next(20);
+//     expect(average.value).toBe(15);
+//   });
+//
+//   it('should handle an empty state correctly', () => {
+//     const { average } = useMovingAverage(3);
+//     expect(average.value).toBeNaN();
+//   });
+// });
+
+//TODO: Discuss w/ Ana, this composable does not exist
+
+describe('TODO: useMovingAverage', () => {
+  it('TODO: should pass as blank file', () => {
+    expect(true).toBeTruthy();
+  });
+});

package/src/composables/__tests__/useNavigationCube.spec.ts

@@ -0,0 +1,79 @@
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { isVisible, navCubeBoundingBox, useNavigationCube } from '@/composables/useNavigationCube';
+import { fullscreenView, isFullscreen, isLayout1x3, isLayout2x2 } from '@/models/scanState';
+import { ScanView } from '@3cr/types-ts';
+import { flushPromises } from '@vue/test-utils';
+import { MockInstance } from '@vitest/spy';
+
+describe('useNavigationCube tests', () => {
+  const viewer3cr = useViewer3cr();
+  const canvas = document.createElement('canvas'); // jsdom does not implement bounds
+  canvas.getBoundingClientRect = vi.fn(() => ({ x: 0, y: 0, width: 100, height: 100 }) as DOMRect);
+
+  let setNavCubeVisibilitySpy: MockInstance;
+  let setNavCubePositionSizeSpy: MockInstance;
+
+  beforeEach(() => {
+    setNavCubeVisibilitySpy = vi.spyOn(viewer3cr, 'setNavCubeVisibility');
+    setNavCubePositionSizeSpy = vi.spyOn(viewer3cr, 'setNavCubePositionSize');
+  });
+
+  afterEach(() => {
+    setNavCubeVisibilitySpy.mockRestore();
+    setNavCubePositionSizeSpy.mockRestore();
+  });
+
+  it('should position correctly for 2x2', async () => {
+    vi.spyOn(isLayout2x2, 'value', 'get').mockReturnValue(true);
+    vi.spyOn(isFullscreen, 'value', 'get').mockReturnValue(false);
+
+    useNavigationCube(canvas);
+    await flushPromises();
+
+    expect(isVisible.value).toBe(true);
+    expect(navCubeBoundingBox.value).toEqual({ x: 40, y: 40, width: 10, height: 10 });
+    expect(setNavCubePositionSizeSpy).toHaveBeenCalled();
+  });
+
+  it('should position correctly for 1x3', async () => {
+    vi.spyOn(isLayout1x3, 'value', 'get').mockReturnValue(true);
+    vi.spyOn(isFullscreen, 'value', 'get').mockReturnValue(false);
+
+    useNavigationCube(canvas);
+    await flushPromises();
+
+    expect(isVisible.value).toBe(true);
+    expect(navCubeBoundingBox.value).toEqual({ x: 56, y: 90, width: 10, height: 10 });
+    expect(setNavCubePositionSizeSpy).toHaveBeenCalled();
+  });
+
+  it('should position correctly for 2d fullscreen', async () => {
+    vi.spyOn(isFullscreen, 'value', 'get').mockReturnValue(true);
+    vi.spyOn(fullscreenView, 'value', 'get').mockReturnValue(ScanView.Sagittal);
+
+    useNavigationCube(canvas);
+    await flushPromises();
+    isVisible.value = false;
+    await flushPromises();
+    isVisible.value = true;
+    await flushPromises();
+
+    expect(setNavCubeVisibilitySpy).toHaveBeenCalled();
+  });
+
+  it('should position correctly for 3d fullscreen', async () => {
+    vi.spyOn(isFullscreen, 'value', 'get').mockReturnValue(true);
+    vi.spyOn(fullscreenView, 'value', 'get').mockReturnValue(ScanView.Volume);
+
+    useNavigationCube(canvas);
+    await flushPromises();
+    isVisible.value = false;
+    await flushPromises();
+    isVisible.value = true;
+    await flushPromises();
+
+    expect(isVisible.value).toBe(true);
+    expect(navCubeBoundingBox.value).toEqual({ x: 90, y: 90, width: 10, height: 10 });
+    expect(setNavCubeVisibilitySpy).toHaveBeenCalled();
+  });
+});

package/src/{functions/__tests__/notification.spec.ts → composables/__tests__/useNotificationHandler.spec.ts}

@@ -1,5 +1,4 @@
 import { useNotification } from '@kyvg/vue3-notification';
-import { handleNotification } from '@/functions/notification';
 import {
   FileManagementActions,
   InteractivityActions,
@@ -7,16 +6,18 @@ import {
   NotificationsActions,
   SlidersActions
 } from '@3cr/types-ts';
+import { useNotificationHandler } from '@/composables/useNotificationHandler';
 
-describe('notification.ts', () => {
+describe('useNotificationHandler tests', () => {
   const { notify } = useNotification();
+  const { handler, announce } = useNotificationHandler();
 
   it(`should handleNotification InteractivityActions.in01`, () => {
     const notification: NotificationPayload = {
       Action: InteractivityActions.in01,
       Code: 'S00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no01, JSON.stringify(notification));
+    handler(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
   });
 
@@ -25,7 +26,7 @@ describe('notification.ts', () => {
       Action: InteractivityActions.in02,
       Code: 'S00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no01, JSON.stringify(notification));
+    handler(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
   });
 
@@ -34,7 +35,7 @@ describe('notification.ts', () => {
       Action: InteractivityActions.in03,
       Code: 'S00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no01, JSON.stringify(notification));
+    handler(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
   });
 
@@ -43,7 +44,7 @@ describe('notification.ts', () => {
       Action: InteractivityActions.in04,
       Code: 'S00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no01, JSON.stringify(notification));
+    handler(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
   });
 
@@ -52,7 +53,7 @@ describe('notification.ts', () => {
       Action: SlidersActions.sl01,
       Code: 'S00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no01, JSON.stringify(notification));
+    handler(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
   });
 
@@ -61,7 +62,7 @@ describe('notification.ts', () => {
       Action: FileManagementActions.fm01,
       Code: 'S00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no01, JSON.stringify(notification));
+    handler(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalledWith({
       title: notification.Code,
       text: notification.Action,
@@ -74,7 +75,7 @@ describe('notification.ts', () => {
       Action: FileManagementActions.fm01,
       Code: 'I00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no04, JSON.stringify(notification));
+    handler(NotificationsActions.no04, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalledWith({
       title: notification.Code,
       text: notification.Action,
@@ -87,11 +88,11 @@ describe('notification.ts', () => {
       Action: FileManagementActions.fm01,
       Code: 'F00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no03, JSON.stringify(notification));
+    handler(NotificationsActions.no03, JSON.stringify(notification));
     expect(notify).toHaveBeenCalledWith({
-      title: notification.Code,
-      text: notification.Action,
-      type: 'error'
+      title: 'enums.notificationType.warning',
+      text: notification.Code,
+      type: 'warn'
     });
   });
 
@@ -100,11 +101,67 @@ describe('notification.ts', () => {
       Action: FileManagementActions.fm01,
       Code: 'A00001'
     } as NotificationPayload;
-    handleNotification(NotificationsActions.no02, JSON.stringify(notification));
+    handler(NotificationsActions.no02, JSON.stringify(notification));
     expect(notify).toHaveBeenCalledWith({
-      title: notification.Code,
-      text: notification.Action,
-      type: 'warn'
+      title: 'enums.notificationType.error',
+      text: notification.Code,
+      type: 'error'
+    });
+  });
+
+  it(`should handleNotification slider mute FileManagementActions.fm01`, () => {
+    vi.mocked(notify).mockClear();
+    const notification: NotificationPayload = {
+      Action: SlidersActions.sl01,
+      Code: 'A00001'
+    } as NotificationPayload;
+    handler(NotificationsActions.no02, JSON.stringify(notification));
+    expect(notify).not.toHaveBeenCalledWith({
+      title: 'enums.notificationType.error',
+      text: notification.Code,
+      type: 'error'
+    });
+  });
+
+  it(`should handleNotification success FileManagementActions.fm01`, () => {
+    vi.mocked(notify).mockClear();
+    const notification: NotificationPayload = {
+      Action: FileManagementActions.fm01,
+      Code: 'S00001'
+    } as NotificationPayload;
+    announce(NotificationsActions.no01, notification);
+    expect(notify).toHaveBeenCalledWith({
+      title: 'enums.notificationType.success',
+      text: notification.Code,
+      type: 'success'
+    });
+  });
+
+  it(`should handleNotification info FileManagementActions.fm01`, () => {
+    vi.mocked(notify).mockClear();
+    const notification: NotificationPayload = {
+      Action: FileManagementActions.fm01,
+      Code: 'I00001'
+    } as NotificationPayload;
+    announce(NotificationsActions.no04, notification);
+    expect(notify).toHaveBeenCalledWith({
+      title: 'enums.notificationType.info',
+      text: notification.Code,
+      type: 'info'
+    });
+  });
+
+  it(`should handleNotification default FileManagementActions.fm01`, () => {
+    vi.mocked(notify).mockClear();
+    const notification: NotificationPayload = {
+      Action: FileManagementActions.fm01,
+      Code: 'I00001'
+    } as NotificationPayload;
+    announce(0 as unknown as NotificationsActions, notification);
+    expect(notify).toHaveBeenCalledWith({
+      title: 'enums.notificationType.info',
+      text: notification.Code,
+      type: 'info'
     });
   });
 });

package/src/composables/__tests__/useToolGroup.spec.ts

@@ -0,0 +1,41 @@
+import { useToolGroup } from '@/composables/useToolGroup';
+import { ref } from 'vue';
+import { ViewerTool } from '@/types/viewer-tool';
+
+describe('useToolGroup', () => {
+  const createTool = (_name: string): ViewerTool => ({
+    isActive: ref(false)
+  });
+
+  it('should only allow one tool to be active at a time', () => {
+    const tool1 = createTool('Tool1');
+    const tool2 = createTool('Tool2');
+    const tool3 = createTool('Tool3');
+
+    const { activeTool, activeIndex, toggleTool } = useToolGroup(tool1, tool2, tool3);
+    expect(activeTool.value).toBeNull();
+    expect(activeIndex.value).toBeNull();
+    toggleTool(tool1);
+    expect(activeTool.value).toBe(tool1);
+    expect(activeIndex.value).toBe(0);
+    expect(tool1.isActive.value).toBe(true);
+    expect(tool2.isActive.value).toBe(false);
+    expect(tool3.isActive.value).toBe(false);
+
+    toggleTool(tool2);
+    expect(activeTool.value).toBe(tool2);
+    expect(activeIndex.value).toBe(1);
+    expect(tool1.isActive.value).toBe(false);
+    expect(tool2.isActive.value).toBe(true);
+    expect(tool3.isActive.value).toBe(false);
+
+    toggleTool(tool2);
+    expect(activeTool.value).toBeNull();
+    expect(activeIndex.value).toBeNull();
+    expect(tool2.isActive.value).toBe(false);
+
+    toggleTool(tool3);
+    expect(activeTool.value).toBe(tool3);
+    expect(activeIndex.value).toBe(2);
+  });
+});

package/src/composables/__tests__/useViewName.spec.ts

@@ -0,0 +1,29 @@
+import { ScanView } from '@3cr/types-ts';
+import { useViewName } from '@/composables/useViewName';
+
+describe('useViewName tests', () => {
+  it('should get name for coronal', () => {
+    const { name } = useViewName(ScanView.Coronal);
+    expect(name.value).toBe('enums.scanView.coronal');
+  });
+
+  it('should get name for sagittal', () => {
+    const { name } = useViewName(ScanView.Sagittal);
+    expect(name.value).toBe('enums.scanView.sagittal');
+  });
+
+  it('should get name for transverse', () => {
+    const { name } = useViewName(ScanView.Transverse);
+    expect(name.value).toBe('enums.scanView.transverse');
+  });
+
+  it('should get name for volume', () => {
+    const { name } = useViewName(ScanView.Volume);
+    expect(name.value).toBe('enums.scanView.volume');
+  });
+
+  it('should get empty string for unknown', () => {
+    const { name } = useViewName(-1 as ScanView);
+    expect(name.value).toBe('');
+  });
+});

package/src/composables/useBoundingBox.ts

@@ -0,0 +1,32 @@
+import { MaybeRef, ref, unref } from 'vue';
+import { useResizeObserver } from '@/composables/useResizeObserver';
+
+export function useBoundingBox(element: MaybeRef<Element | null | undefined>) {
+  const x = ref<number>(0);
+  const y = ref<number>(0);
+  const width = ref<number>(0);
+  const height = ref<number>(0);
+
+  useResizeObserver(element, onResize);
+
+  function onResize(): void {
+    const el = unref(element);
+    if (el) {
+      const { x, y, width, height } = el.getBoundingClientRect();
+      setBoundingBox(x, y, width, height);
+    } else {
+      setBoundingBox(0, 0, 0, 0);
+    }
+  }
+
+  function setBoundingBox(x_: number, y_: number, width_: number, height_: number): void {
+    x.value = x_;
+    y.value = y_;
+    width.value = width_;
+    height.value = height_;
+  }
+
+  onResize();
+
+  return { x, y, width, height };
+}

package/src/composables/useEventListener.ts

@@ -1,24 +1,22 @@
-import { onBeforeUnmount, onMounted, Ref, unref, watch } from 'vue';
+import { MaybeRef, onBeforeUnmount, unref, watch } from 'vue';
 
-type Target = Ref<EventTarget> | EventTarget;
+type Target = MaybeRef<EventTarget>;
 type EventType = keyof HTMLElementEventMap;
 type Handler<T extends Event> = (event: T) => void | Promise<void>;
 
 export function useEventListener<T extends Event>(target: Target, event: EventType, handler: Handler<T>) {
   const wrapper = (e: Event) => handler(e as T);
 
-  onMounted(() => {
-    unref(target).addEventListener(event, wrapper);
-  });
-
   watch(
     () => unref(target),
     (next, prev) => {
-      prev.removeEventListener(event, wrapper);
-      next.addEventListener(event, wrapper);
-    }
+      prev?.removeEventListener(event, wrapper);
+      next?.addEventListener(event, wrapper);
+    },
+    { immediate: true }
   );
 
+  // TODO: Fix onBeforeUnmount is called when there is no active component instance to be associated with
   onBeforeUnmount(() => {
     unref(target).removeEventListener(event, wrapper);
   });