@3cr/viewer-browser 0.0.200 → 0.0.220

package/src/components/views/shared/VisibilityBtn.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-btn size="x-small" :icon="icon" variant="text" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  isVisible: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true
+});
+
+const icon = computed(() => {
+  return props.isVisible ? 'visibility' : 'visibility_off';
+});
+</script>
+
+<style scoped lang="css">
+:deep(.v-icon) {
+  font-size: 20px;
+}
+</style>

package/src/components/views/shared/__tests__/MaskIcon.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import MaskIcon from '@/components/views/shared/MaskIcon.vue';
+
+describe('MaskIcon tests', () => {
+  it('should mount', () => {
+    const props = { data: '0', color: 'white' };
+    const wrapper = mount(MaskIcon, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/shared/__tests__/ObjectColor.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import ObjectColor from '@/components/views/shared/ObjectColor.vue';
+
+describe('ObjectColor tests', () => {
+  it('should mount', () => {
+    const props = { color: 'red' };
+    const wrapper = mount(ObjectColor, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/shared/__tests__/ObjectLabel.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import ObjectLabel from '@/components/views/shared/ObjectLabel.vue';
+
+describe('ObjectLabel tests', () => {
+  it('should mount', () => {
+    const props = { label: 'test' };
+    const wrapper = mount(ObjectLabel, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/shared/__tests__/Opacity.spec.ts

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import Opacity from '@/components/views/shared/Opacity.vue';
+import { VTextField } from 'vuetify/components';
+
+describe('Opacity tests', () => {
+  it('should mount', () => {
+    const props = { modelValue: 50 };
+    const wrapper = mount(Opacity, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should set value', async () => {
+    const wrapper = mount(Opacity);
+    await wrapper.findComponent(VTextField).setValue('100');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[100]]);
+  });
+
+  it('should set native value', async () => {
+    const wrapper = mount(Opacity);
+    await wrapper.find('input').setValue('');
+    await wrapper.find('input').setValue('100');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[0], [100]]);
+  });
+});

package/src/components/views/shared/__tests__/VisibilityBtn.spec.ts

@@ -0,0 +1,11 @@
+import { mount } from '@vue/test-utils';
+import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
+
+describe('VisibilityBtn tests', () => {
+  it('should mount', async () => {
+    const props = { isVisible: true };
+    const wrapper = mount(VisibilityBtn, { props });
+    await wrapper.setProps({ isVisible: false });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/views/types/annotation-tree-view-item-child-action.ts

@@ -0,0 +1,6 @@
+export interface AnnotationTreeViewItemChildAction {
+  title: string;
+  description: string;
+  url: string;
+  isBtn: boolean;
+}

package/src/components/views/types/annotation-tree-view-item-child.ts

@@ -0,0 +1,9 @@
+import { AnnotationTreeViewItemChildAction } from '@/components/views/types/annotation-tree-view-item-child-action';
+
+export interface AnnotationTreeViewItemChild {
+  props: {
+    key: string;
+    value: string;
+    actions: AnnotationTreeViewItemChildAction[];
+  };
+}

package/src/components/views/types/annotation-tree-view-item.ts

@@ -0,0 +1,13 @@
+import { Vector3 } from '@/types/vector3';
+import { Colour } from '@/types/colour';
+import { AnnotationTreeViewItemChild } from '@/components/views/types/annotation-tree-view-item-child';
+
+export interface AnnotationTreeViewItem {
+  id: string;
+  title: string;
+  isVisible: boolean;
+  icon: string;
+  position: Vector3;
+  colour: Colour;
+  children: AnnotationTreeViewItemChild[];
+}

package/src/components/views/types/markup-tree-view-item-child.ts

@@ -0,0 +1,6 @@
+export interface MarkupTreeViewItemChild {
+  props: {
+    key: string;
+    value: string;
+  };
+}

package/src/components/views/types/markup-tree-view-item.ts

@@ -0,0 +1,14 @@
+import { Vector3 } from '@/types/vector3';
+import { MarkupTreeViewItemChild } from '@/components/views/types/markup-tree-view-item-child';
+
+export interface MarkupTreeViewItem {
+  id: string;
+  title: string;
+  description: string;
+  isVisible: boolean;
+  tooltip: string;
+  colour: string;
+  icon: string;
+  position: Vector3;
+  children: MarkupTreeViewItemChild[];
+}

package/src/components/views/types/mcad-object-tree-view-item.ts

@@ -0,0 +1,13 @@
+export interface McadObjectTreeViewItem {
+  id: string;
+  key: string;
+  title: string;
+  description: string;
+  isVisible: boolean;
+  colour: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+}

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

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

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

@@ -0,0 +1,32 @@
+import { defineComponent, ref, PropType, nextTick } from 'vue';
+import { useEventListener } from '@/composables/useEventListener';
+import { mount } from '@vue/test-utils';
+
+describe('useEventListener tests', () => {
+  it('should attach event listener', async () => {
+    const component = defineComponent({
+      template: '<div></div>',
+      props: {
+        callback: {
+          type: Function as PropType<(e: Event) => void>,
+          required: true
+        }
+      },
+      setup(props, context) {
+        const target = ref<EventTarget>(document);
+        useEventListener(target, 'click', props.callback);
+        const swap = () => (target.value = document.body);
+        context.expose({ swap });
+      }
+    });
+
+    const props = { callback: vi.fn() };
+    const wrapper = mount(component, { props });
+    document.dispatchEvent(new MouseEvent('click'));
+    (wrapper.vm as any).swap();
+    await nextTick();
+    document.body.dispatchEvent(new MouseEvent('click'));
+    expect(props.callback).toHaveBeenCalledTimes(2);
+    wrapper.unmount();
+  });
+});

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/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,125 @@
+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 introJs from 'intro.js';
+
+const viewer3cr = useViewer3cr();
+
+const demo = computed<string>(() => {
+  const value = demoType.value;
+  return value.charAt(0).toUpperCase() + value.substring(1);
+});
+
+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() {
+  let scanStateHandle: WatchStopHandle;
+
+  function onStart(this: Tour): void {
+    scanStateHandle = watch(scanState, () => {
+      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 onExit(this: Tour): void {
+    scanStateHandle();
+    setTimeout(() => blurActiveElement(), 500);
+  }
+
+  const tour = introJs
+    .tour()
+    .setOptions(options.value)
+    .onStart(onStart)
+    .onBeforeChange(onBeforeChange)
+    .onChange(onChange)
+    .onExit(onExit);
+
+  const intro = ref<Tour>(tour);
+
+  return { intro };
+}