@3cr/viewer-browser 0.0.200 → 0.0.246

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

@@ -0,0 +1,51 @@
+import { describe } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { useIntroJs } from '@/composables/useIntroJs';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { Tour } from 'intro.js/src/packages/tour';
+import { scanState } from '@/models/scanState';
+import { inflateScanState } from '@/functions/modelHelper';
+
+describe('useIntroJs tests', () => {
+  vi.spyOn(Viewer3crService.prototype, 'layouts').mockResolvedValue();
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should start introjs', async () => {
+    const component = defineComponent({
+      template: `
+      <div>
+        <div id="skin-to-bone"></div>
+        <div id="view-0"></div>
+        <div id="view-1"></div>
+        <div id="view-2"></div>
+        <div id="view-3"></div>
+        <div id="settings-card"></div>
+      </div>`,
+      setup(_, context) {
+        const { intro } = useIntroJs();
+        context.expose({ intro });
+      }
+    });
+
+    const wrapper = mount(component);
+    const intro = (wrapper.vm as any).intro as Tour;
+
+    await intro.start();
+    scanState.value = inflateScanState();
+    vi.advanceTimersByTime(1000);
+    for (let i = 0; i < 5; ++i) {
+      await intro.nextStep();
+      vi.advanceTimersByTime(1000);
+    }
+
+    expect(wrapper).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,39 @@
+import { inflateInitialDataOverlayState } from '@/functions/modelHelper';
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import { dataOverlayEvent, dataOverlayState } from '@/models/scanState';
+import { Interactiontype } from '@3cr/types-ts';
+import { useMarkups } from '@/composables/useMarkups';
+
+describe('useMarkups tests', () => {
+  it('should have no markups', () => {
+    const { markups, hasMarkups } = useMarkups();
+    expect(markups.value.length).toBe(0);
+    expect(hasMarkups.value).toBeFalsy();
+  });
+
+  it('should have markups', () => {
+    const dataOverlay = inflateInitialDataOverlayState();
+    dataOverlay.DataOverlay.DataOverlay.push(
+      DataOverlayDataFaker.lengthRaw(),
+      DataOverlayDataFaker.polygonRaw(),
+      DataOverlayDataFaker.angleRaw()
+    );
+    dataOverlayState.value = dataOverlay;
+
+    const { markups } = useMarkups();
+    expect(markups.value.length).toBe(3);
+    expect(typeof markups.value[0].Data).not.toBe('string');
+  });
+
+  it('should have null event', () => {
+    const { markupEvent } = useMarkups();
+    expect(markupEvent.value).toBeNull();
+  });
+
+  it('should have non-null event', () => {
+    dataOverlayEvent.value = DataOverlayDataFaker.polygonEventRaw(Interactiontype.HOVER_START);
+    const { markupEvent } = useMarkups();
+    expect(markupEvent.value).not.toBeNull();
+    expect(typeof markupEvent.value?.DataOverlay).not.toBe('string');
+  });
+});

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

@@ -0,0 +1,36 @@
+import { inflateInitialMcadObjectState } from '@/functions/modelHelper';
+import { mcadObjectEvent, mcadObjectState } from '@/models/scanState';
+import { Interactiontype } from '@3cr/types-ts';
+import { useMcadObjects } from '@/composables/useMcadObjects';
+import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
+import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
+
+describe('useMcadObjects tests', () => {
+  it('should have no mcad objects', () => {
+    const { mcadObjects, hasMcadObjects } = useMcadObjects();
+    expect(mcadObjects.value.length).toBe(0);
+    expect(hasMcadObjects.value).toBeFalsy();
+  });
+
+  it('should have mcad objects', () => {
+    const mcad = inflateInitialMcadObjectState();
+    mcad.Models.Models.push(DataOverlayMcadFaker.randomRaw() as any);
+    mcadObjectState.value = mcad;
+
+    const { mcadObjects } = useMcadObjects();
+    expect(mcadObjects.value.length).toBe(1);
+    expect(typeof mcadObjects.value[0].CallToAction).not.toBe('string');
+  });
+
+  it('should have null event', () => {
+    const { mcadObjectEvent } = useMcadObjects();
+    expect(mcadObjectEvent.value).toBeNull();
+  });
+
+  it('should have non-null event', () => {
+    mcadObjectEvent.value = McadObjectInteractionFaker.randomRaw(Interactiontype.HOVER_START) as any;
+    const { mcadObjectEvent: event } = useMcadObjects();
+    expect(event.value).not.toBeNull();
+    expect(typeof event.value?.Mcad).not.toBe('string');
+  });
+});

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

@@ -0,0 +1,20 @@
+import { useMouse } from '@/composables/useMouse';
+import { defineComponent, onMounted } from 'vue';
+import { mount } from '@vue/test-utils';
+
+describe('useMouse tests', () => {
+  it('should set mouse position', () => {
+    const component = defineComponent({
+      template: '<div></div>',
+      setup() {
+        const { x, y } = useMouse(document);
+        onMounted(() => {
+          document.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 100 }));
+          expect(x.value).toBe(100);
+          expect(y.value).toBe(100);
+        });
+      }
+    });
+    mount(component);
+  });
+});

package/src/{components/modal/composables → composables}/__tests__/useNavigationCubeObserver.spec.ts

@@ -1,9 +1,8 @@
-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";
+import { useNavigationCubeObserver } from '@/composables/useNavigationCubeObserver';
+import { isFullscreen, isLayout1x3, isLayout2x2, scanState } from '@/models/scanState';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+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);
@@ -13,15 +12,21 @@ function setupMocks(state: CurrentScanState, fullscreen: boolean, layout1x3: boo
 }
 
 describe('useNavigationCubeObserver tests', () => {
-  vi.spyOn(ResizeObserver.prototype, 'observe').mockReturnValue()
+  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');
+  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(Viewer3crService.prototype, 'setNavCubeVisibility');
+  const positionSizeSpy = vi.spyOn(Viewer3crService.prototype, 'setNavCubePositionSize');
 
   it('should update on 3d fullscreen changes', async () => {
     setupMocks(fullscreen3d, true, false, false);

package/src/{dataLayer → composables}/__tests__/useViewer3cr.spec.ts

@@ -1,5 +1,4 @@
-import { describe, expect, it } from 'vitest';
-import { useViewer3cr } from '@/dataLayer/useViewer3cr';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 describe('useViewer3cr tests', () => {
   it('should return same service instance', () => {

package/src/composables/useAnnotations.ts

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import { dataOverlayEvent, dataOverlayState } from '@/models/scanState';
+import { parseDataOverlayData } from '@/functions/parseDataOverlayData';
+import { DataOverlayDataRaw, DataOverlayData } from '@/types/data-overlay-data';
+import { DataOverlayAnnotation } from '@/types/data-overlay-annotation';
+import { DataOverlayType } from '@3cr/types-ts';
+import { DataOverlayInteraction } from '@/types/data-overlay-interaction';
+import { parseDataOverlayEvent } from '@/functions/parseDataOverlayEvent';
+
+function isAnnotation(data: DataOverlayDataRaw): boolean {
+  return data.DataType === DataOverlayType.Annotation;
+}
+
+function toAnnotation(data: DataOverlayDataRaw): DataOverlayData<DataOverlayAnnotation> {
+  return parseDataOverlayData<DataOverlayAnnotation>(data);
+}
+
+function toAnnotationEvent(data: DataOverlayDataRaw): DataOverlayInteraction<DataOverlayAnnotation> {
+  return parseDataOverlayEvent<DataOverlayAnnotation>(data).Data;
+}
+
+const annotations = computed(() => {
+  return dataOverlayState.value.DataOverlay.DataOverlay.filter(isAnnotation).map(toAnnotation);
+});
+
+const hasAnnotations = computed(() => {
+  return annotations.value.length > 0;
+});
+
+const annotationEvent = computed(() => {
+  const value = dataOverlayEvent.value;
+  return value && isAnnotation(value) ? toAnnotationEvent(value) : null;
+});
+
+export function useAnnotations() {
+  return { annotations, hasAnnotations, annotationEvent };
+}

package/src/composables/useDebounce.ts

@@ -0,0 +1,11 @@
+export type Debouncable<Args extends unknown[]> = (...args: Args) => any;
+
+export type Debounced<Args extends unknown[]> = (...args: Args) => void;
+
+export function useDebounce<Args extends unknown[]>(callback: Debouncable<Args>, delay: number): Debounced<Args> {
+  let timeout: NodeJS.Timeout;
+  return function (...args: Args): void {
+    clearTimeout(timeout);
+    timeout = setTimeout(callback, delay, ...args);
+  };
+}

package/src/composables/useEventListener.ts

@@ -0,0 +1,25 @@
+import { onBeforeUnmount, onMounted, Ref, unref, watch } from 'vue';
+
+type Target = Ref<EventTarget> | 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);
+    }
+  );
+
+  onBeforeUnmount(() => {
+    unref(target).removeEventListener(event, wrapper);
+  });
+}

package/src/composables/useIntroJs.ts

@@ -0,0 +1,142 @@
+import { TourOptions } from 'intro.js/src/packages/tour/option';
+import { Tour } from 'intro.js/src/packages/tour';
+import { demoType } from '@/components/demo/options';
+import { computed, nextTick, ref, watch, WatchStopHandle } from 'vue';
+import { ScanView } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { isFullscreen, previousLayout, scanState } from '@/models/scanState';
+import { DemoType } from '@/types/demo-type';
+import introJs from 'intro.js';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+
+const demo = computed<string>(() => {
+  switch (demoType.value) {
+    case DemoType.Licence:
+      return 'Licence';
+    default:
+      return 'Patient';
+  }
+});
+
+const options = computed<Partial<TourOptions>>(() => ({
+  exitOnOverlayClick: false,
+  keyboardNavigation: false,
+  dontShowAgain: true,
+  steps: [
+    {
+      title: 'Take the Viewer Tour',
+      intro:
+        `Welcome to the ${demo.value} Online DICOM Viewer.` +
+        '<br/><br/>Take the short interative tour to better visualize your medical images in 2D and 3D.',
+      position: 'floating'
+    },
+    {
+      title: 'Density Slider',
+      intro:
+        'Move the <em>lower density slider</em> to the right to hide softer tissue like skin and view internal organs.' +
+        '<br/><br/>For more precise control, change the numbers in the boxes above or use the <em>Fine Adjustment</em> slider below.',
+      element: '#skin-to-bone',
+      position: 'right'
+    },
+    {
+      title: '3D Viewing Controls',
+      intro:
+        'With your cursor placed in the 3D view, <b>scroll to zoom</b> & <b>click and drag to rotate</b>.' +
+        '<br/><br/>You can also view the 3D view in full screen, reset the view, and cut into the 3D model from each side using the <em>3D slicing tool</em>.',
+      element: `#view-${ScanView.Volume}`
+    },
+    {
+      title: '2D Viewing Controls',
+      intro:
+        'With your mouse in the 2D views, <b>scroll to navigate through the 2D images</b>, and use <b>Shift + Arrows to Pan and Zoom</b>.' +
+        '<br/><br/>Use the icons to <em>Fullscreen</em>, <em>Reset</em>, <em>Rotate</em>, and <em>Flip</em> each individual 2D view.',
+      element: `#view-${ScanView.Sagittal}`
+    },
+    {
+      title: 'Global settings',
+      intro:
+        'Accurately change the <b>brightness</b>, <b>contrast</b>, and <b>opacity</b> to enhance the appearance of your medical images.' +
+        '<br/><br/>Adjust the sensitivity of mouse and keyboard inputs to suit your preferences.',
+      element: '#settings-card',
+      position: 'right'
+    },
+    {
+      title: 'Stay Tuned for Updates',
+      intro:
+        '<img src="https://c.tenor.com/S4Sz_yvlLn4AAAAC/cats-cat.gif" alt="cat" width="260" height="260">' +
+        '<br/>Us working hard on new features',
+      position: 'floating'
+    }
+  ]
+}));
+
+function blurActiveElement(): void {
+  (document.activeElement as HTMLElement | null)?.blur();
+}
+
+export function useIntroJs() {
+  const viewer3cr = useViewer3cr();
+  const viewerOptions = useViewerOptions();
+
+  let scanStateHandle: WatchStopHandle;
+
+  function onStart(this: Tour): void {
+    scanStateHandle = watch(scanState, () => {
+      if (this.isActive()) {
+        this.refresh(true);
+      }
+    });
+  }
+
+  function onBeforeChange(this: Tour, el: HTMLElement, step: number, direction: 'forward' | 'backward'): boolean {
+    // If the user has enabled full-screen, turn it off for steps 2 and 3
+    /* istanbul ignore next: does not work with jsdom -- @preserve */
+    if (isFullscreen.value && (step === 2 || step === 3)) {
+      viewer3cr
+        .layouts(previousLayout.value)
+        .then(() => nextTick())
+        .then(() => this.refresh(true))
+        .then(() => (direction === 'forward' ? this.nextStep() : this.previousStep()));
+      return false;
+    }
+
+    // Only show Don't Show Again on last step
+    const introjsDontShowAgain = document.querySelector('.introjs-dontShowAgain') as HTMLElement | null;
+    if (introjsDontShowAgain) {
+      const lastStep = this.getSteps().length - 1;
+      introjsDontShowAgain.style.display = step !== lastStep ? 'none' : 'block';
+    }
+
+    return true;
+  }
+
+  function onChange(): void {
+    setTimeout(() => blurActiveElement(), 500);
+  }
+
+  /* istanbul ignore next: does not work with jsdom -- @preserve */
+  function onBeforeExit(this: Tour): boolean {
+    scanStateHandle();
+    setTimeout(() => blurActiveElement(), 500);
+    return true;
+  }
+
+  async function onExit(this: Tour): Promise<void> {
+    if (viewerOptions.value.OnInteractionReady) {
+      await viewerOptions.value.OnInteractionReady();
+    }
+  }
+
+  const tour = introJs
+    .tour()
+    .setOptions(options.value)
+    .onStart(onStart)
+    .onBeforeChange(onBeforeChange)
+    .onChange(onChange)
+    .onBeforeExit(onBeforeExit)
+    .onExit(onExit);
+
+  const intro = ref<Tour>(tour);
+
+  return { intro };
+}

package/src/composables/useMarkups.ts

@@ -0,0 +1,41 @@
+import { DataOverlayType } from '@3cr/types-ts';
+import { parseDataOverlayData } from '@/functions/parseDataOverlayData';
+import { computed } from 'vue';
+import { dataOverlayEvent, dataOverlayState } from '@/models/scanState';
+import { DataOverlayData, DataOverlayDataRaw } from '@/types/data-overlay-data';
+import { DataOverlayMarkup } from '@/types/data-overlay-markup';
+import { DataOverlayInteraction } from '@/types/data-overlay-interaction';
+import { parseDataOverlayEvent } from '@/functions/parseDataOverlayEvent';
+
+function isMarkup(data: DataOverlayDataRaw): boolean {
+  return (
+    data.DataType === DataOverlayType.Length ||
+    data.DataType === DataOverlayType.Polygon ||
+    data.DataType === DataOverlayType.Angle
+  );
+}
+
+function toMarkup(data: DataOverlayDataRaw): DataOverlayData<DataOverlayMarkup> {
+  return parseDataOverlayData<DataOverlayMarkup>(data);
+}
+
+function toMarkupEvent(data: DataOverlayDataRaw): DataOverlayInteraction<DataOverlayMarkup> {
+  return parseDataOverlayEvent<DataOverlayMarkup>(data).Data;
+}
+
+const markups = computed(() => {
+  return dataOverlayState.value.DataOverlay.DataOverlay.filter(isMarkup).map(toMarkup);
+});
+
+const hasMarkups = computed(() => {
+  return markups.value.length > 0;
+});
+
+const markupEvent = computed(() => {
+  const value = dataOverlayEvent.value;
+  return value && isMarkup(value) ? toMarkupEvent(value) : null;
+});
+
+export function useMarkups() {
+  return { markups, hasMarkups, markupEvent };
+}

package/src/composables/useMcadObjects.ts

@@ -0,0 +1,32 @@
+import { computed } from 'vue';
+import { mcadObjectState } from '@/models/scanState';
+import { mcadObjectEvent as mcadEvent } from '@/models/scanState';
+import { McadObjectInteraction, McadObjectInteractionRaw } from '@/types/mcad-object-interaction';
+import { parseMcadEvent } from '@/functions/parseMcadEvent';
+import { DataOverlayMcad, DataOverlayMcadRaw } from '@/types/data-overlay-mcad';
+import { parseDataOverlay } from '@/functions/parseDataOverlay';
+
+function toMcadObject(data: DataOverlayMcadRaw): DataOverlayMcad {
+  return parseDataOverlay(data) as DataOverlayMcad;
+}
+
+function toMcadObjectEvent(data: McadObjectInteractionRaw): McadObjectInteraction {
+  return parseMcadEvent(data);
+}
+
+const mcadObjects = computed(() => {
+  return mcadObjectState.value.Models.Models.map(toMcadObject);
+});
+
+const hasMcadObjects = computed(() => {
+  return mcadObjects.value.length > 0;
+});
+
+const mcadObjectEvent = computed(() => {
+  const value = mcadEvent.value;
+  return value ? toMcadObjectEvent(value) : null;
+});
+
+export function useMcadObjects() {
+  return { mcadObjects, hasMcadObjects, mcadObjectEvent };
+}

package/src/composables/useMouse.ts

@@ -0,0 +1,14 @@
+import { ref } from 'vue';
+import { useEventListener } from '@/composables/useEventListener';
+
+export function useMouse(target: EventTarget) {
+  const x = ref<number>(0);
+  const y = ref<number>(0);
+
+  useEventListener(target, 'mousemove', (e: MouseEvent) => {
+    x.value = e.x;
+    y.value = e.y;
+  });
+
+  return { x, y };
+}

package/src/{components/modal/composables → composables}/useNavigationCubeObserver.ts

@@ -1,7 +1,7 @@
-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";
+import { isFullscreen, isLayout1x3, isLayout2x2, scanState } from '@/models/scanState';
+import { AnchorPoint, ScanView } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { ComputedRef, WatchStopHandle, computed, watch } from 'vue';
 
 const isNavigationCubeEnabled = computed(() => {
   return scanState.value.NavigationCube.Interactivity.Value;
@@ -40,7 +40,7 @@ export function useNavigationCubeObserver(canvas: HTMLCanvasElement): ResizeObse
   async function onLayout1x3(): Promise<void> {
     const [width, height] = getCanvasDimensions(canvas);
     const navCubeSize = getNavigationCubeSize(canvas);
-    const xOffset = Math.floor(width - (height / 3) - navCubeSize);
+    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);
@@ -49,19 +49,23 @@ export function useNavigationCubeObserver(canvas: HTMLCanvasElement): ResizeObse
   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);
+    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 });
+    return watch(
+      ref,
+      async (value: boolean) => {
+        if (value) {
+          refresh = callback;
+          await refresh();
+        }
+      },
+      { immediate: true }
+    );
   }
 
   function enable(): void {
@@ -69,21 +73,23 @@ export function useNavigationCubeObserver(canvas: HTMLCanvasElement): ResizeObse
       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();
-        }
-      }));
+      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.forEach((handle) => handle());
       handles = [];
       observer.unobserve(canvas);
       await viewer3cr.setNavCubeVisibility(false);
@@ -96,9 +102,13 @@ export function useNavigationCubeObserver(canvas: HTMLCanvasElement): ResizeObse
     }
   });
 
-  watch(isNavigationCubeEnabled, (value: boolean) => {
-    value ? enable() : disable();
-  }, { immediate: true });
+  watch(
+    isNavigationCubeEnabled,
+    (value: boolean) => {
+      value ? enable() : disable();
+    },
+    { immediate: true }
+  );
 
   return observer;
 }

package/src/composables/useScanMovement.ts

@@ -0,0 +1,25 @@
+import { ScanMovementActions } from '@3cr/types-ts';
+import { watch, WatchSource } from 'vue';
+import { scanState } from '@/models/scanState';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+
+type WatchScanMovement = {
+  [key in ScanMovementActions]: WatchSource<number>;
+};
+
+// @ts-ignore
+const movements: WatchScanMovement = {
+  [ScanMovementActions.sm05]: () => scanState.value.InteractionSettings.PanSensivitity,
+  [ScanMovementActions.sm08]: () => scanState.value.InteractionSettings.ZoomSensitivity,
+  [ScanMovementActions.sm10]: () => scanState.value.InteractionSettings.RotateSensitivity,
+  [ScanMovementActions.sm12]: () => scanState.value.InteractionSettings.CameraRotateSensitivity
+};
+
+export function useScanMovement(): void {
+  const viewer3cr = useViewer3cr();
+  for (const movement of Object.keys(movements) as (keyof WatchScanMovement)[]) {
+    watch(movements[movement], async (value: number) => {
+      await viewer3cr.scanMovementHandler(movement, value);
+    });
+  }
+}