@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/composables/useAnnotations.ts

@@ -1,37 +0,0 @@
-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/useIntroJs.ts

@@ -1,142 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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/useNavigationCubeObserver.ts

@@ -1,114 +0,0 @@
-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;
-});
-
-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/composables/useVersion3cr.ts

@@ -1,7 +0,0 @@
-import { ref } from 'vue';
-
-const version = ref<string>('0.0.0');
-
-export function useVersion3cr() {
-  return version;
-}

package/src/functions/__tests__/layoutOverlayStyle.spec.ts

@@ -1,325 +0,0 @@
-import { generateDivStyleForLayout } from '@/functions/layoutOverlayStyle';
-import { AnchorPoint, ScanView } from '@3cr/types-ts';
-import { flushPromises } from '@vue/test-utils';
-import { spyOn } from '@vitest/spy';
-
-describe('generateDivStyleForLayout', () => {
-  const canvas = { clientWidth: 0, clientHeight: 0 } as HTMLCanvasElement;
-
-  it('should generateDivStyleForLayout AnchorPoint.TOP', () => {
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.TOP,
-          ActiveView: true,
-          AspectRatio: 0,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      height: 'calc(100% - 0px)',
-      left: '50%',
-      top: '0px',
-      transform: 'translateX(-50%)',
-      width: 'calc(100% - 0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AnchorPoint.BOTTOM', () => {
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.BOTTOM,
-          ActiveView: true,
-          AspectRatio: 0,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      height: 'calc(100% - 0px)',
-      left: '50%',
-      bottom: '0px',
-      transform: 'translateX(-50%)',
-      width: 'calc(100% - 0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AnchorPoint.LEFT', () => {
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.LEFT,
-          ActiveView: true,
-          AspectRatio: 0,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      height: 'calc(100% - 0px)',
-      left: '0px',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      width: 'calc(100% - 0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AnchorPoint.RIGHT', () => {
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.RIGHT,
-          ActiveView: true,
-          AspectRatio: 0,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      height: 'calc(100% - 0px)',
-      right: '0px',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      width: 'calc(100% - 0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AnchorPoint.TOP_LEFT', () => {
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.TOP_LEFT,
-          ActiveView: true,
-          AspectRatio: 0,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      'border-top-left-radius': '0px',
-      height: 'calc(100% - 0px)',
-      left: '0px',
-      top: '0px',
-      width: 'calc(100% - 0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AnchorPoint.CENTER', () => {
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.CENTER,
-          ActiveView: true,
-          AspectRatio: 0,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      'border-bottom-left-radius': '0px',
-      'border-bottom-right-radius': '0px',
-      'border-top-left-radius': '0px',
-      'border-top-right-radius': '0px',
-      height: 'calc(100% -  0px -  0px)',
-      left: '0px',
-      top: '0px',
-      width: 'calc(100% - 0px - 0px - 0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AspectRatio === 1', async () => {
-    spyOn(document, 'getElementById').mockReturnValue({
-      id: 'unity',
-      offsetWidth: 1,
-      offsetHeight: 2
-    } as HTMLElement);
-    await flushPromises();
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.CENTER,
-          ActiveView: true,
-          AspectRatio: 1,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      'border-bottom-left-radius': '0px',
-      'border-bottom-right-radius': '0px',
-      'border-top-left-radius': '0px',
-      'border-top-right-radius': '0px',
-      height: 'calc(0px)',
-      left: '0px',
-      top: '0px',
-      width: 'calc(0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AspectRatio === 1', async () => {
-    spyOn(document, 'getElementById').mockReturnValue(null);
-    await flushPromises();
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.CENTER,
-          ActiveView: true,
-          AspectRatio: 1,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      'border-bottom-left-radius': '0px',
-      'border-bottom-right-radius': '0px',
-      'border-top-left-radius': '0px',
-      'border-top-right-radius': '0px',
-      height: 'calc(0px)',
-      left: '0px',
-      top: '0px',
-      width: 'calc(0px)'
-    });
-  });
-
-  it('should generateDivStyleForLayout AspectRatio === 1 | MaxSize === 0', async () => {
-    expect(
-      generateDivStyleForLayout(
-        {
-          Anchor: AnchorPoint.CENTER,
-          ActiveView: true,
-          AspectRatio: 1,
-          MaxSize: {
-            Version: '1.0.0',
-            X: 0,
-            Y: 0
-          },
-          DefaultView: ScanView.Coronal,
-          Priority: 1,
-          Offset: {
-            Version: '1.0.0',
-            X: 1,
-            Y: 1
-          },
-          Version: '1.0.0'
-        },
-        canvas
-      )
-    ).toStrictEqual({
-      position: 'absolute',
-      'border-bottom-left-radius': '0px',
-      'border-bottom-right-radius': '0px',
-      'border-top-left-radius': '0px',
-      'border-top-right-radius': '0px',
-      height: 'calc(0% -  0px -  0px)',
-      left: '0px',
-      top: '0px',
-      width: 'calc(0% - 0px - 0px - 0px)'
-    });
-  });
-});