@3cr/viewer-browser 0.0.200 → 0.0.220

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);
+    });
+  }
+}

package/src/composables/useScanSliders.ts

@@ -0,0 +1,36 @@
+import { scanState } from '@/models/scanState';
+import { watch, WatchSource } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { SlidersActions } from '@3cr/types-ts';
+
+type WatchScanSliders = {
+  [key in SlidersActions]: WatchSource<number>;
+};
+
+const sliders: WatchScanSliders = {
+  [SlidersActions.sl01]: () => scanState.value.Display.Brightness,
+  [SlidersActions.sl02]: () => scanState.value.Display.Contrast,
+  [SlidersActions.sl03]: () => scanState.value.Display.Opacity,
+  [SlidersActions.sl04]: () => scanState.value.Display.WindowLower,
+  [SlidersActions.sl05]: () => scanState.value.Display.WindowUpper,
+  [SlidersActions.sl06]: () => scanState.value.Display.ThresholdLower,
+  [SlidersActions.sl07]: () => scanState.value.Display.ThresholdUpper,
+  [SlidersActions.sl08]: () => scanState.value.Slice.TransverseLower,
+  [SlidersActions.sl09]: () => scanState.value.Orientations.Transverse.Slice,
+  [SlidersActions.sl10]: () => scanState.value.Slice.TransverseUpper,
+  [SlidersActions.sl11]: () => scanState.value.Slice.SagittalLower,
+  [SlidersActions.sl12]: () => scanState.value.Orientations.Sagittal.Slice,
+  [SlidersActions.sl13]: () => scanState.value.Slice.SagittalUpper,
+  [SlidersActions.sl14]: () => scanState.value.Slice.CoronalLower,
+  [SlidersActions.sl15]: () => scanState.value.Orientations.Coronal.Slice,
+  [SlidersActions.sl16]: () => scanState.value.Slice.CoronalUpper
+};
+
+export function useScanSliders(): void {
+  const viewer3cr = useViewer3cr();
+  for (const slider of Object.keys(sliders) as (keyof WatchScanSliders)[]) {
+    watch(sliders[slider], async (value: number) => {
+      await viewer3cr.sliderHandler(slider, value);
+    });
+  }
+}

package/src/composables/useVersion3cr.ts

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

package/src/composables/useViewer3cr.ts

@@ -0,0 +1,7 @@
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+
+const viewer3cr = new Viewer3crService();
+
+export function useViewer3cr(): Viewer3crService {
+  return viewer3cr;
+}

package/src/composables/useViewerOptions.ts

@@ -0,0 +1,35 @@
+import { ref } from 'vue';
+import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
+import axios from 'axios';
+import { stlResolution } from '@/models/scanState';
+
+const options = ref<LoadViewerOptions>(defaultLoadViewerOptions);
+
+const BASE_STATE_URL = 'https://webgl-3dr.singular.health/demo';
+const ax = axios.create();
+
+export function useViewerOptions() {
+  return options;
+}
+export function mockDemoViewerStlDecimator() {
+  options.value.OnResolveUrls = async (keys: string[]) =>
+    await Promise.all(
+      keys.map(async (key) => {
+        if (key.includes('.stl')) {
+          try {
+            const x = await ax.post(
+              'https://qz7o5n708h.execute-api.ap-southeast-2.amazonaws.com/test/decimate-stl-demo',
+              {
+                S3KeySub: `stl/${key}`,
+                DecimationValue: stlResolution.value / 100
+              }
+            );
+            return x.data.data.Url;
+          } catch (err) {
+            console.error(err);
+          }
+        }
+        return `${BASE_STATE_URL}/stl/${key}`;
+      })
+    );
+}

package/src/{dataLayer → functions}/__tests__/clamp.spec.ts

@@ -1,5 +1,4 @@
-import { describe, expect, it } from 'vitest';
-import { clamp } from '@/dataLayer/clamp';
+import { clamp } from '@/functions/clamp';
 
 describe('clamp tests', () => {
   it('should clamp min', () => {

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

@@ -0,0 +1,325 @@
+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)'
+    });
+  });
+});