@3cr/viewer-browser 0.0.200 → 0.0.246

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,36 @@
+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)'
+    });
+  });
+});

package/src/{helpers/__tests__/model-helper.spec.ts → functions/__tests__/modelHelper.spec.ts}

@@ -1,47 +1,48 @@
-import { describe, expect, it } from "vitest";
-import { AnchorPoint, ScanView, ViewInteractiveMode } from "@3cr/types-ts";
-import {
-  inflateInitialScanState,
-  inflateScanState,
-} from "@/helpers/modelHelper";
+import { AnchorPoint, PatientPosition, ScanView, ViewInteractiveMode } from '@3cr/types-ts';
+import { inflateInitialScanState, inflateScanState } from '@/functions/modelHelper';
 
-describe("inflateScanState", () => {
-  it("should inflateScanState", () => {
+describe('model helper tests', () => {
+  it('should inflateScanState', () => {
     expect(inflateScanState()).toStrictEqual({
-      Version: "1.0.0",
+      Version: '1.0.0',
       ScanMovement: {
-        Version: '1.1.0',
+        Version: '1.1.0'
       },
       Display: {
-        Version: "1.0.0",
+        Version: '1.0.0',
         Brightness: 50,
         Contrast: 50,
         Opacity: 50,
         WindowLower: 0,
         WindowUpper: 100,
         ThresholdLower: 0,
-        ThresholdUpper: 100,
+        ThresholdUpper: 100
+      },
+      Colour: {
+        AlphaGradient: [],
+        ColourGradient: [],
+        Name: '',
+        Version: '1.0.0'
       },
-      Colour: null,
       CurrentView: ScanView.Volume,
       Slice: {
-        Version: "1.0.0",
+        Version: '1.0.0',
         TransverseLower: 0,
         TransverseUpper: 0,
         SagittalLower: 0,
         SagittalUpper: 0,
         CoronalLower: 0,
-        CoronalUpper: 0,
+        CoronalUpper: 0
       },
       InteractionSettings: {
-        Version: "1.0.0",
+        Version: '1.0.0',
         PanSensivitity: 0,
         ZoomSensitivity: 0,
         RotateSensitivity: 0,
         CameraRotateSensitivity: 0,
         KeyboardEnabled: true,
         MouseEnabled: true,
-        InteractionMode: ViewInteractiveMode.STATIC,
+        InteractionMode: ViewInteractiveMode.STATIC
       },
       Orientations: {
         Version: '1.0.0',
@@ -51,7 +52,7 @@ describe("inflateScanState", () => {
           VerticalFlip: false,
           HorizontalFlip: false,
           Rotation: 0,
-          Slice: 0,
+          Slice: 0
         },
         Sagittal: {
           Version: '1.0.0',
@@ -59,7 +60,7 @@ describe("inflateScanState", () => {
           VerticalFlip: false,
           HorizontalFlip: false,
           Rotation: 0,
-          Slice: 0,
+          Slice: 0
         },
         Coronal: {
           Version: '1.0.0',
@@ -67,7 +68,7 @@ describe("inflateScanState", () => {
           VerticalFlip: false,
           HorizontalFlip: false,
           Rotation: 0,
-          Slice: 0,
+          Slice: 0
         },
         Volume: {
           Version: '1.1.0',
@@ -81,33 +82,33 @@ describe("inflateScanState", () => {
         }
       },
       Layout: {
-        Version: "1.0.0",
+        Version: '1.0.0',
         SwitchOnViewChange: false,
-        PositionData: [],
+        PositionData: []
       },
       NavigationCube: {
-        Version: "1.0.0",
+        Version: '1.0.0',
         Transform: {
-          Version: "1.0.0",
+          Version: '1.0.0',
           AnchorPoint: AnchorPoint.DEFAULT,
           Position: {
-            Version: "1.0.0",
+            Version: '1.0.0',
             X: 0,
-            Y: 0,
+            Y: 0
           },
           Size: {
-            Version: "1.0.0",
+            Version: '1.0.0',
             X: 0,
-            Y: 0,
-          },
+            Y: 0
+          }
         },
         Visibility: {
-          Version: "1.0.0",
-          Value: false,
+          Version: '1.0.0',
+          Value: false
         },
         Interactivity: {
-          Version: "1.0.0",
-          Value: false,
+          Version: '1.0.0',
+          Value: false
         },
         Colour: {
           Version: '1.1.0',
@@ -123,27 +124,63 @@ describe("inflateScanState", () => {
           B: 0.8,
           A: 1.0
         }
-      },
+      }
     });
   });
-});
 
-describe("inflateInitialScanState", () => {
-  it("should inflateInitialScanState", () => {
+  it('should inflateInitialScanState', () => {
     expect(inflateInitialScanState()).toStrictEqual({
-      Version: "1.0.0",
+      Version: '1.0.0',
       XSlices: 0,
       YSlices: 0,
       ZSlices: 0,
       XSpacing: 0,
       YSpacing: 0,
       ZSpacing: 0,
-      Modality: "CT",
+      Modality: 'CT',
       HuUpper: 0,
       HuLower: 0,
       DefaultDisplaySettings: inflateScanState(),
+      ImageDirectionX: {
+        Version: '1.2.1',
+        X: 0,
+        Y: 0,
+        Z: 0
+      },
+      ImageDirectionY: {
+        Version: '1.2.1',
+        X: 0,
+        Y: 0,
+        Z: 0
+      },
+      ImageDirectionZ: {
+        Version: '1.2.1',
+        X: 0,
+        Y: 0,
+        Z: 0
+      },
+      ImageOrientationX: {
+        Version: '1.2.1',
+        X: 0,
+        Y: 0,
+        Z: 0
+      },
+      ImageOrientationY: {
+        Version: '1.2.1',
+        X: 0,
+        Y: 0,
+        Z: 0
+      },
+      ImageOrigin: {
+        Version: '1.2.1',
+        X: 0,
+        Y: 0,
+        Z: 0
+      },
+      PatientPosition: PatientPosition.LFS,
+      Tilt: 0,
       GreyscalePresets: [],
-      ColourPresets: [],
+      ColourPresets: []
     });
   });
 });