@3cr/viewer-browser 0.0.161 → 0.0.194

package/src/components/modal/actions/ZoomAction.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-menu data-testid="menu" v-model="menuState" :close-on-content-click="false">
+    <template #activator="{ props: menu }">
+      <Action
+        v-bind="menu"
+        text="Zoom"
+        icon="search"
+        :variant="variant"
+      />
+    </template>
+    <v-list>
+      <v-list-item data-testid="zoom-in" prepend-icon="zoom_in" @click.stop="zoomIn">
+        <v-list-item-title>Zoom In</v-list-item-title>
+      </v-list-item>
+      <v-list-item data-testid="zoom-out" prepend-icon="zoom_out" @click.stop="zoomOut">
+        <v-list-item-title>Zoom Out</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { ScanView } from "@3cr/types-ts";
+import { computed, ref } from "vue";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+  percentage?: number;
+}
+
+type Emits = {
+  'update:modal': [value: boolean];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'button',
+  percentage: 10
+});
+
+const emit = defineEmits<Emits>();
+
+const viewer3cr = useViewer3cr();
+const menu = ref<boolean>(false);
+
+const menuState = computed({
+  get(): boolean {
+    return menu.value;
+  },
+  set(value: boolean): void {
+    menu.value = value;
+    emit('update:modal', value);
+  }
+});
+
+async function zoomOut(): Promise<void> {
+  await viewer3cr.zoomOut(props.view, props.percentage);
+}
+
+async function zoomIn(): Promise<void> {
+  await viewer3cr.zoomIn(props.view, props.percentage);
+}
+</script>
+
+<style scoped lang="scss">
+.v-list-item {
+  user-select: none;
+}
+</style>

package/src/components/modal/actions/__tests__/Action.spec.ts

@@ -0,0 +1,29 @@
+import { expect, describe, it, vi } from "vitest";
+import { mountVuetify } from "~/helper";
+import Action from "@/components/modal/actions/Action.vue";
+
+describe('Action tests', () => {
+  it('should render as button', async () => {
+    const props = { text: '', icon: '', variant: 'button', onClick: vi.fn() };
+    const wrapper = mountVuetify(Action, props);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    expect(button).toBeTruthy();
+    await button.trigger('click');
+    expect(props.onClick).toHaveBeenCalled();
+  });
+
+  it('should render as menu-item', async () => {
+    const props = { text: '', icon: '', variant: 'menu-item', onClick: vi.fn() };
+    const wrapper = mountVuetify(Action, props);
+    const menuItem = wrapper.findComponent('[data-testid="menu-item"]');
+    expect(menuItem).toBeTruthy();
+    await menuItem.trigger('click');
+    expect(props.onClick).toHaveBeenCalled();
+  });
+
+  it('should render nothing', async () => {
+    const props = { text: '', icon: '', variant: 'invalid', onClick: vi.fn() };
+    const wrapper = mountVuetify(Action, props);
+    expect(wrapper.text()).toBe('');
+  });
+});

package/src/components/modal/actions/__tests__/Flip3dAction.spec.ts

@@ -0,0 +1,48 @@
+import {describe, expect, it, vi} from "vitest";
+import {ScanView} from "@3cr/types-ts";
+import {mountVuetify} from "~/helper";
+import {DOMWrapper} from "@vue/test-utils";
+import Flip3dAction from "@/components/modal/actions/Flip3dAction.vue";
+import {Viewer3cr} from "@/dataLayer/viewer3cr";
+
+describe('Flip3dAction tests', () => {
+  const spy = vi.spyOn(Viewer3cr.prototype, 'invertTransform').mockResolvedValue();
+  const props = { view: ScanView.Volume };
+  const wrapper = mountVuetify(Flip3dAction, props);
+
+  it('should flip sagittal', async () => {
+    const activator = wrapper.findComponent('[data-testid="activator"]');
+    await activator.trigger('click');
+    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
+    const sagittal = menu.findComponent('[data-testid="sagittal"]');
+    await sagittal.trigger('click');
+    expect(spy).toHaveBeenCalledWith(true, false, false);
+    await activator.trigger('click');
+    await sagittal.trigger('click');
+    expect(spy).toHaveBeenCalledWith(false, false, false);
+  });
+
+  it('should flip coronal', async () => {
+    const activator = wrapper.findComponent('[data-testid="activator"]');
+    await activator.trigger('click');
+    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
+    const coronal = menu.findComponent('[data-testid="coronal"]');
+    await coronal.trigger('click');
+    expect(spy).toHaveBeenCalledWith(false, true, false);
+    await activator.trigger('click');
+    await coronal.trigger('click');
+    expect(spy).toHaveBeenCalledWith(false, false, false);
+  });
+
+  it('should flip transverse', async () => {
+    const activator = wrapper.findComponent('[data-testid="activator"]');
+    await activator.trigger('click');
+    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
+    const transverse = menu.findComponent('[data-testid="transverse"]');
+    await transverse.trigger('click');
+    expect(spy).toHaveBeenCalledWith(false, false, true);
+    await activator.trigger('click');
+    await transverse.trigger('click');
+    expect(spy).toHaveBeenCalledWith(false, false, false);
+  });
+});

package/src/components/modal/actions/__tests__/FlipHorizontalAction.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountVuetify } from "~/helper";
+import { ScanView } from "@3cr/types-ts";
+import FlipHorizontalAction from "@/components/modal/actions/FlipHorizontalAction.vue";
+import {Viewer3cr} from "@/dataLayer/viewer3cr";
+
+describe('FlipHorizontalAction tests', () => {
+  const spy = vi.spyOn(Viewer3cr.prototype, 'flipHorizontally').mockResolvedValue();
+  const props = { view: ScanView.Sagittal };
+
+  it('should flip horizontally', async () => {
+    const wrapper = mountVuetify(FlipHorizontalAction, props);
+    const action = wrapper.findComponent('[data-testid="button"]');
+    await action.trigger('click');
+    expect(spy).toHaveBeenCalledWith(props.view, true);
+  });
+});

package/src/components/modal/actions/__tests__/FlipVerticalAction.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountVuetify } from "~/helper";
+import { ScanView } from "@3cr/types-ts";
+import FlipVerticalAction from "@/components/modal/actions/FlipVerticalAction.vue";
+import {Viewer3cr} from "@/dataLayer/viewer3cr";
+
+describe('FlipVerticalAction tests', () => {
+  const spy = vi.spyOn(Viewer3cr.prototype, 'flipVertically').mockResolvedValue();
+  const props = { view: ScanView.Sagittal };
+
+  it('should flip horizontally', async () => {
+    const wrapper = mountVuetify(FlipVerticalAction, props);
+    const action = wrapper.findComponent('[data-testid="button"]');
+    await action.trigger('click');
+    expect(spy).toHaveBeenCalledWith(props.view, true);
+  });
+});

package/src/components/modal/actions/__tests__/FullscreenAction.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it, vi } from "vitest";
+import { mountVuetify } from "~/helper";
+import { CurrentScanState, LayoutActions, ScanView } from "@3cr/types-ts";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import { previousLayout, scanState } from "@/dataLayer/scanState";
+import FullscreenAction from "../FullscreenAction.vue";
+
+describe('FullscreenAction tests', () => {
+  const props = { view: ScanView.Coronal };
+  const layoutsSpy = vi.spyOn(Viewer3cr.prototype, 'layouts').mockResolvedValue();
+  const viewSpy = vi.spyOn(Viewer3cr.prototype, 'viewSelection').mockResolvedValue();
+
+  it('should fullscreen', async () => {
+    const wrapper = mountVuetify(FullscreenAction, props);
+    const button = wrapper.find('[data-testid="button"]');
+    await button.trigger('click');
+    expect(layoutsSpy).toHaveBeenCalledWith(LayoutActions.lo01);
+    expect(viewSpy).toHaveBeenCalledWith(`vs_0${props.view + 1}`);
+  });
+
+  it('should exit fullscreen', async () => {
+    scanState.value = { Layout: { PositionData: [{}] } } as CurrentScanState;
+    const wrapper = mountVuetify(FullscreenAction, props);
+    const button = wrapper.find('[data-testid="button"]');
+    await button.trigger('click');
+    expect(layoutsSpy).toHaveBeenCalledWith(previousLayout.value);
+  });
+});

package/src/components/modal/actions/__tests__/NavigationCubeAction.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from "vitest";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import { mountVuetify } from "~/helper";
+import { scanState } from "@/dataLayer/scanState";
+import { CurrentScanState } from "@3cr/types-ts";
+import NavigationCubeAction from "@/components/modal/actions/NavigationCubeAction.vue";
+
+describe('NavigationCubeAction tests', () => {
+  const navCubeInteractivitySpy = vi.spyOn(Viewer3cr.prototype, 'setNavCubeInteractivity').mockResolvedValue();
+
+  it('should show navigation cube', async () => {
+    const wrapper = mountVuetify(NavigationCubeAction);
+    const switchCmp = wrapper.findComponent('[data-testid="switch"]');
+    await switchCmp.trigger('click');
+    expect(navCubeInteractivitySpy).toHaveBeenCalledWith(true);
+  });
+
+  it('should hide navigation cube', async () => {
+    scanState.value = { NavigationCube: { Interactivity: { Value: true } } } as CurrentScanState;
+    const wrapper = mountVuetify(NavigationCubeAction);
+    const switchWrapper = wrapper.findComponent('[data-testid="switch"]');
+    await switchWrapper.trigger('click');
+    expect(navCubeInteractivitySpy).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/modal/actions/__tests__/PanAction.spec.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from "vitest";
+import { mountVuetify } from "~/helper";
+import { ScanView } from "@3cr/types-ts";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import PanAction from "@/components/modal/actions/PanAction.vue";
+
+describe('PanAction tests', () => {
+  const spy = vi.spyOn(Viewer3cr.prototype, 'hoverOverCanvas').mockResolvedValue();
+  const element = { addEventListener: vi.fn(), removeEventListener: vi.fn() };
+  const windowAddSpy = vi.spyOn(window, 'addEventListener');
+  // const windowRemoveSpy = vi.spyOn(window, 'removeEventListener');
+
+  it('should setup event listeners', async () => {
+    const props = { view: ScanView.Volume, element };
+    mountVuetify(PanAction, props);
+    expect(element.addEventListener).toHaveBeenCalledWith('mousedown', expect.anything());
+    expect(element.addEventListener).toHaveBeenCalledWith('mouseenter', expect.anything());
+    expect(element.addEventListener).toHaveBeenCalledWith('mouseleave', expect.anything());
+    expect(windowAddSpy).toHaveBeenCalledWith('mousemove', expect.anything());
+    expect(windowAddSpy).toHaveBeenCalledWith('mouseup', expect.anything());
+  });
+
+  it('should disable unity input while active', async () => {
+    const props = { view: ScanView.Volume, element };
+    const wrapper = mountVuetify(PanAction, props);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    await button.trigger('click');
+    expect(spy).toHaveBeenCalledWith(false);
+  });
+
+  it('should call event handlers', async () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const props = { view: ScanView.Volume, element };
+    const wrapper = mountVuetify(PanAction, props);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    await button.trigger('click');
+    element.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0 }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 0, clientY: 0 }));
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 0, clientY: 0 }));
+    element.dispatchEvent(new MouseEvent('mouseenter', { clientX: 0, clientY: 0 }));
+    element.dispatchEvent(new MouseEvent('mouseleave', { clientX: 0, clientY: 0 }));
+    expect(spy).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/modal/actions/__tests__/ResetViewAction.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it, vi } from "vitest";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import { mountVuetify } from "~/helper";
+import { ViewSelectionActions } from "@3cr/types-ts";
+import ResetViewAction from "@/components/modal/actions/ResetViewAction.vue";
+
+describe('ResetViewAction tests', () => {
+  const viewSelectionSpy = vi.spyOn(Viewer3cr.prototype, 'viewSelection').mockResolvedValue();
+
+  it('should reset view', async () => {
+    const wrapper = mountVuetify(ResetViewAction);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    await button.trigger('click');
+    expect(viewSelectionSpy).toHaveBeenCalledWith(ViewSelectionActions.vs06);
+    expect(viewSelectionSpy).toHaveBeenCalledWith(ViewSelectionActions.vs05);
+  });
+});

package/src/components/modal/actions/__tests__/Rotate2dAction.spec.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it, vi } from "vitest";
+import { mountVuetify } from "~/helper";
+import { ScanView } from "@3cr/types-ts";
+import { DOMWrapper } from "@vue/test-utils";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import Rotate2dAction from "@/components/modal/actions/Rotate2dAction.vue";
+
+describe('Rotate2dAction tests', () => {
+  it('should apply rotation', async () => {
+    const props = { view: ScanView.Sagittal };
+    const spy = vi.spyOn(Viewer3cr.prototype, 'rotateByDeg').mockResolvedValue();
+    const wrapper = mountVuetify(Rotate2dAction, props);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    await button.trigger('click');
+
+    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
+    const textField = menu.findComponent('[data-testid="rotation"]');
+    await textField.setValue(10);
+    const rotate = menu.findComponent('[data-testid="rotate"]');
+    await rotate.trigger('click');
+    expect(spy).toHaveBeenCalledWith(props.view, 10);
+  });
+});

package/src/components/modal/actions/__tests__/Slice3dAction.spec.ts

@@ -0,0 +1,14 @@
+import {describe, expect, it} from "vitest";
+import {mountVuetify} from "~/helper";
+import Slice3dAction from "@/components/modal/actions/Slice3dAction.vue";
+import {DOMWrapper} from "@vue/test-utils";
+
+describe('Slice3dAction tests', () => {
+  it('should open slice menu', async () => {
+    const wrapper = mountVuetify(Slice3dAction);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    await button.trigger('click');
+    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
+    expect(menu.exists()).toBeTruthy();
+  });
+});

package/src/components/modal/actions/__tests__/ZoomAction.spec.ts

@@ -0,0 +1,34 @@
+import {describe, expect, it, vi} from "vitest";
+import { ScanView } from "@3cr/types-ts";
+import { mountVuetify } from "~/helper";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import ZoomAction from "@/components/modal/actions/ZoomAction.vue";
+import {DOMWrapper} from "@vue/test-utils";
+
+describe('ZoomAction tests', () => {
+  const props = { view: ScanView.Sagittal, percentage: 25 };
+  const zoomInSpy = vi.spyOn(Viewer3cr.prototype, 'zoomIn');
+  const zoomOutSpy = vi.spyOn(Viewer3cr.prototype, 'zoomOut');
+
+  it('should zoom in', async () => {
+    const wrapper = mountVuetify(ZoomAction, props);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    await button.trigger('click');
+
+    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
+    const zoomIn = menu.findComponent('[data-testid="zoom-in"]');
+    await zoomIn.trigger('click');
+    expect(zoomInSpy).toHaveBeenCalledWith(props.view, props.percentage);
+  });
+
+  it('should zoom out', async () => {
+    const wrapper = mountVuetify(ZoomAction, props);
+    const button = wrapper.findComponent('[data-testid="button"]');
+    await button.trigger('click');
+
+    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
+    const zoomOut = menu.findComponent('[data-testid="zoom-out"]');
+    await zoomOut.trigger('click');
+    expect(zoomOutSpy).toHaveBeenCalledWith(props.view, props.percentage);
+  });
+});

package/src/components/modal/composables/__tests__/useNavigationCubeObserver.spec.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from 'vitest';
+import { useNavigationCubeObserver } from "@/components/modal/composables/useNavigationCubeObserver";
+import { isFullscreen, isLayout1x3, isLayout2x2, scanState } from "@/dataLayer/scanState";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import { AnchorPoint, CurrentScanState, ScanView } from "@3cr/types-ts";
+import { flushPromises } from "@vue/test-utils";
+
+function setupMocks(state: CurrentScanState, fullscreen: boolean, layout1x3: boolean, layout2x2: boolean): void {
+  vi.spyOn(scanState, 'value', 'get').mockReturnValue(state);
+  vi.spyOn(isFullscreen, 'value', 'get').mockReturnValue(fullscreen);
+  vi.spyOn(isLayout1x3, 'value', 'get').mockReturnValue(layout1x3);
+  vi.spyOn(isLayout2x2, 'value', 'get').mockReturnValue(layout2x2);
+}
+
+describe('useNavigationCubeObserver tests', () => {
+  vi.spyOn(ResizeObserver.prototype, 'observe').mockReturnValue()
+  vi.spyOn(ResizeObserver.prototype, 'unobserve').mockReturnValue();
+
+  const canvas = { clientWidth: 100, clientHeight: 100 } as HTMLCanvasElement;
+  const fullscreen2d = { CurrentView: ScanView.Sagittal, NavigationCube: { Interactivity: { Value: true } } } as CurrentScanState;
+  const fullscreen3d = { CurrentView: ScanView.Volume, NavigationCube: { Interactivity: { Value: true } } } as CurrentScanState;
+
+  const visibilitySpy = vi.spyOn(Viewer3cr.prototype, 'setNavCubeVisibility');
+  const positionSizeSpy = vi.spyOn(Viewer3cr.prototype, 'setNavCubePositionSize');
+
+  it('should update on 3d fullscreen changes', async () => {
+    setupMocks(fullscreen3d, true, false, false);
+    useNavigationCubeObserver(canvas);
+    await flushPromises();
+    expect(visibilitySpy).toBeCalledWith(true);
+    expect(positionSizeSpy).toBeCalledWith(AnchorPoint.TOP_LEFT, 90, 90, 10, 10);
+  });
+
+  it('should update on 2d fullscreen changes', async () => {
+    setupMocks(fullscreen2d, true, false, false);
+    useNavigationCubeObserver(canvas);
+    await flushPromises();
+    expect(visibilitySpy).toBeCalledWith(false);
+  });
+
+  it('should update on 1x3 layout changes', async () => {
+    setupMocks(fullscreen3d, false, true, false);
+    useNavigationCubeObserver(canvas);
+    await flushPromises();
+    expect(visibilitySpy).toBeCalledWith(true);
+    expect(positionSizeSpy).toBeCalledWith(AnchorPoint.TOP_LEFT, 56, 90, 10, 10);
+  });
+
+  it('should update on 2x2 layout changes', async () => {
+    setupMocks(fullscreen3d, false, false, true);
+    useNavigationCubeObserver(canvas);
+    await flushPromises();
+    expect(visibilitySpy).toBeCalledWith(true);
+    expect(positionSizeSpy).toBeCalledWith(AnchorPoint.TOP_LEFT, 40, 40, 10, 10);
+  });
+});

package/src/components/modal/composables/useEventListener.ts

@@ -0,0 +1,22 @@
+import { isRef, onBeforeUnmount, onMounted, Ref, unref, watch } from 'vue';
+
+type Target = Ref<EventTarget> | EventTarget;
+type EventType = keyof HTMLElementEventMap;
+type Handler = (e: Event) => void | Promise<void>;
+
+export function useEventListener(target: Target, event: EventType, handler: Handler) {
+  if (isRef(target)) {
+    watch(target, (value, oldValue) => {
+      oldValue?.removeEventListener(event, handler);
+      value?.addEventListener(event, handler);
+    });
+  } else {
+    onMounted(() => {
+      target.addEventListener(event, handler);
+    });
+  }
+
+  onBeforeUnmount(() => {
+    unref(target)?.removeEventListener(event, handler);
+  });
+}

package/src/components/modal/composables/useNavigationCubeObserver.ts

@@ -0,0 +1,104 @@
+import { isFullscreen, isLayout1x3, isLayout2x2, scanState } from "@/dataLayer/scanState";
+import { AnchorPoint, ScanView } from "@3cr/types-ts";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { ComputedRef, WatchStopHandle, computed, watch } from "vue";
+
+const isNavigationCubeEnabled = computed(() => {
+  return scanState.value.NavigationCube.Interactivity.Value;
+});
+
+function getCanvasDimensions(canvas: HTMLCanvasElement): [number, number] {
+  const width = canvas.clientWidth * window.devicePixelRatio;
+  const height = canvas.clientHeight * window.devicePixelRatio;
+  return [width, height];
+}
+
+function getNavigationCubeSize(canvas: HTMLCanvasElement): number {
+  const [width] = getCanvasDimensions(canvas);
+  return Math.floor(width * 0.1);
+}
+
+export function useNavigationCubeObserver(canvas: HTMLCanvasElement): ResizeObserver {
+  const viewer3cr = useViewer3cr();
+
+  let refresh: (() => Promise<void>) | undefined;
+  let handles: WatchStopHandle[] = [];
+
+  async function onFullscreen(): Promise<void> {
+    const [width, height] = getCanvasDimensions(canvas);
+    const navCubeSize = getNavigationCubeSize(canvas);
+    if (scanState.value.CurrentView === ScanView.Volume) {
+      const xOffset = width - navCubeSize;
+      const yOffset = height - navCubeSize;
+      await viewer3cr.setNavCubeVisibility(true);
+      await viewer3cr.setNavCubePositionSize(AnchorPoint.TOP_LEFT, xOffset, yOffset, navCubeSize, navCubeSize);
+    } else {
+      await viewer3cr.setNavCubeVisibility(false);
+    }
+  }
+
+  async function onLayout1x3(): Promise<void> {
+    const [width, height] = getCanvasDimensions(canvas);
+    const navCubeSize = getNavigationCubeSize(canvas);
+    const xOffset = Math.floor(width - (height / 3) - navCubeSize);
+    const yOffset = height - navCubeSize;
+    await viewer3cr.setNavCubeVisibility(true);
+    await viewer3cr.setNavCubePositionSize(AnchorPoint.TOP_LEFT, xOffset, yOffset, navCubeSize, navCubeSize);
+  }
+
+  async function onLayout2x2(): Promise<void> {
+    const [width, height] = getCanvasDimensions(canvas);
+    const navCubeSize = getNavigationCubeSize(canvas);
+    const xOffset = Math.floor((width / 2) - navCubeSize);
+    const yOffset = Math.floor((height / 2) - navCubeSize);
+    await viewer3cr.setNavCubeVisibility(true);
+    await viewer3cr.setNavCubePositionSize(AnchorPoint.TOP_LEFT, xOffset, yOffset, navCubeSize, navCubeSize);
+  }
+
+  function createWatch(ref: ComputedRef<boolean>, callback: () => Promise<void>): WatchStopHandle {
+    return watch(ref, async (value: boolean) => {
+      if (value) {
+        refresh = callback;
+        await refresh();
+      }
+    }, { immediate: true });
+  }
+
+  function enable(): void {
+    if (handles.length === 0) {
+      handles.push(createWatch(isFullscreen, onFullscreen));
+      handles.push(createWatch(isLayout1x3, onLayout1x3));
+      handles.push(createWatch(isLayout2x2, onLayout2x2));
+      handles.push(watch([
+        () => scanState.value.CurrentView,
+        () => scanState.value.NavigationCube.Interactivity.Value
+      ], async () => {
+        if (refresh) {
+          await refresh();
+        }
+      }));
+      observer.observe(canvas);
+    }
+  }
+
+  async function disable(): Promise<void> {
+    if (handles.length > 0) {
+      handles.forEach(handle => handle());
+      handles = [];
+      observer.unobserve(canvas);
+      await viewer3cr.setNavCubeVisibility(false);
+    }
+  }
+
+  const observer = new ResizeObserver(async () => {
+    if (refresh) {
+      await refresh();
+    }
+  });
+
+  watch(isNavigationCubeEnabled, (value: boolean) => {
+    value ? enable() : disable();
+  }, { immediate: true });
+
+  return observer;
+}

package/src/components/selectors/ValueSelector.vue

@@ -1,6 +1,31 @@
+<template>
+  <div class="single-slider-selector">
+    <v-row no-gutters align="center" justify="space-between">
+      <v-col>
+        <span class="text-caption">
+          {{ label }}
+        </span>
+      </v-col>
+      <v-col cols="4">
+        <v-text-field
+          :model-value="sliderValue"
+          @update:modelValue="sliderValue = toNumber($event)"
+          class="mt-0 pt-0"
+          hide-details
+          variant="outlined"
+          density="compact"
+          type="number"
+          :append-inner-icon="prepend"
+        ></v-text-field>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { computed, defineEmits } from "vue";
+import { computed } from "vue";
 import { toNumber } from "@/helpers/utils";
+import { clamp } from "@/dataLayer/clamp";
 
 export interface Props {
   value: number;
@@ -21,52 +46,24 @@ const props = withDefaults(defineProps<Props>(), {
   step: 1,
   prepend: "",
 });
+
 const emit = defineEmits<{
   "update:value": [number];
 }>();
+
 const sliderValue = computed({
   get() {
     return Math.floor(props.value);
   },
   set(value: number) {
-    let val = value;
-    if (value > props.max) val = props.max;
-    if (value < props.min) val = props.min;
+    const val = clamp(value, props.min, props.max);
     emit("update:value", val);
   },
 });
 
-defineExpose({
-  sliderValue,
-});
+defineExpose({ sliderValue });
 </script>
 
-<template>
-  <div class="single-slider-selector">
-    <v-row no-gutters align="center" justify="space-between">
-      <v-col>
-        <span class="text-caption">
-          {{ label }}
-        </span>
-      </v-col>
-      <v-col cols="4">
-        <v-text-field
-          :model-value="sliderValue"
-          @update:modelValue="sliderValue = toNumber($event)"
-          outlined
-          dense
-          class="mt-0 pt-0"
-          hide-details
-          variant="outlined"
-          density="compact"
-          type="number"
-          :append-inner-icon="prepend"
-        ></v-text-field>
-      </v-col>
-    </v-row>
-  </div>
-</template>
-
 <style>
 .single-slider-selector
   .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)

package/src/components/selectors/__tests__/value-selector.spec.ts

@@ -13,7 +13,7 @@ describe("ValueSelector.vue", () => {
 
   beforeEach(() => {
     wrapper = mountVuetify(ValueSelector, {
-      value: [0, 0],
+      value: 0,
       min: 0,
       max: 100,
     });