@3cr/viewer-browser 0.0.196 → 0.0.220

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: []
     });
   });
 });

package/src/{notifications → functions}/__tests__/notification.spec.ts

@@ -1,30 +1,20 @@
-import { describe, expect, it, vi } from "vitest";
-import { useNotification } from "@kyvg/vue3-notification";
-import { handleNotification } from "@/notifications/notification";
+import { useNotification } from '@kyvg/vue3-notification';
+import { handleNotification } from '@/functions/notification';
 import {
   FileManagementActions,
   InteractivityActions,
   NotificationPayload,
   NotificationsActions,
-  SlidersActions,
-} from "@3cr/types-ts";
-const { notify } = useNotification();
+  SlidersActions
+} from '@3cr/types-ts';
 
-vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
-  const mod = (await importOriginal()) as object;
-  return {
-    ...mod,
-    useNotification: vi.fn().mockReturnValue({
-      notify: vi.fn(),
-    }),
-  };
-});
+describe('notification.ts', () => {
+  const { notify } = useNotification();
 
-describe("notification.ts", () => {
   it(`should handleNotification InteractivityActions.in01`, () => {
     const notification: NotificationPayload = {
       Action: InteractivityActions.in01,
-      Code: "S00001",
+      Code: 'S00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
@@ -33,7 +23,7 @@ describe("notification.ts", () => {
   it(`should handleNotification InteractivityActions.in02`, () => {
     const notification: NotificationPayload = {
       Action: InteractivityActions.in02,
-      Code: "S00001",
+      Code: 'S00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
@@ -42,7 +32,7 @@ describe("notification.ts", () => {
   it(`should handleNotification InteractivityActions.in03`, () => {
     const notification: NotificationPayload = {
       Action: InteractivityActions.in03,
-      Code: "S00001",
+      Code: 'S00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
@@ -51,7 +41,7 @@ describe("notification.ts", () => {
   it(`should handleNotification InteractivityActions.in04`, () => {
     const notification: NotificationPayload = {
       Action: InteractivityActions.in04,
-      Code: "S00001",
+      Code: 'S00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
@@ -60,7 +50,7 @@ describe("notification.ts", () => {
   it(`should handleNotification SlidersActions.sl01`, () => {
     const notification: NotificationPayload = {
       Action: SlidersActions.sl01,
-      Code: "S00001",
+      Code: 'S00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalled();
@@ -69,52 +59,52 @@ describe("notification.ts", () => {
   it(`should handleNotification success [MUTED] FileManagementActions.fm01`, () => {
     const notification: NotificationPayload = {
       Action: FileManagementActions.fm01,
-      Code: "S00001",
+      Code: 'S00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no01, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalledWith({
       title: notification.Code,
       text: notification.Action,
-      type: "success",
+      type: 'success'
     });
   });
 
   it(`should handleNotification info [MUTED] FileManagementActions.fm01`, () => {
     const notification: NotificationPayload = {
       Action: FileManagementActions.fm01,
-      Code: "I00001",
+      Code: 'I00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no04, JSON.stringify(notification));
     expect(notify).not.toHaveBeenCalledWith({
       title: notification.Code,
       text: notification.Action,
-      type: "info",
+      type: 'info'
     });
   });
 
   it(`should handleNotification failure FileManagementActions.fm01`, () => {
     const notification: NotificationPayload = {
       Action: FileManagementActions.fm01,
-      Code: "F00001",
+      Code: 'F00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no03, JSON.stringify(notification));
     expect(notify).toHaveBeenCalledWith({
       title: notification.Code,
       text: notification.Action,
-      type: "error",
+      type: 'error'
     });
   });
 
   it(`should handleNotification warning FileManagementActions.fm01`, () => {
     const notification: NotificationPayload = {
       Action: FileManagementActions.fm01,
-      Code: "A00001",
+      Code: 'A00001'
     } as NotificationPayload;
     handleNotification(NotificationsActions.no02, JSON.stringify(notification));
     expect(notify).toHaveBeenCalledWith({
       title: notification.Code,
       text: notification.Action,
-      type: "warn",
+      type: 'warn'
     });
   });
 });

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

@@ -0,0 +1,9 @@
+import { parseAction } from '@/functions/parseAction';
+import { ActionFaker } from '@test/fakers/action.faker';
+
+describe('parseAction tests', () => {
+  it('should parse', () => {
+    const result = parseAction(ActionFaker.randomRaw());
+    expect(typeof result.ActionData).not.toBe('string');
+  });
+});

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

@@ -0,0 +1,11 @@
+import { parseCallToAction } from '@/functions/parseCallToAction';
+import { CallToActionFaker } from '@test/fakers/call-to-action.faker';
+
+describe('parseCallToAction tests', () => {
+  it('should parse', () => {
+    const result = parseCallToAction(CallToActionFaker.randomRaw());
+    result.Actions.forEach((action) => {
+      expect(typeof action.ActionData).not.toBe('string');
+    });
+  });
+});

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

@@ -0,0 +1,15 @@
+import { parseDataOverlay } from '@/functions/parseDataOverlay';
+import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
+
+describe('parseDataOverlay tests', () => {
+  it('should parse', () => {
+    const result = parseDataOverlay(DataOverlayAnnotationFaker.randomRaw());
+    expect(typeof result.CallToAction).not.toBe('string');
+  });
+
+  it('should parse with null', () => {
+    const result = DataOverlayAnnotationFaker.randomRaw();
+    result.CallToAction = null;
+    expect(typeof result.CallToAction).not.toBe('string');
+  });
+});

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

@@ -0,0 +1,9 @@
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import { parseDataOverlayData } from '@/functions/parseDataOverlayData';
+
+describe('parseDataOverlayData tests', () => {
+  it('should parse', () => {
+    const result = parseDataOverlayData(DataOverlayDataFaker.annotationRaw());
+    expect(typeof result.Data).not.toBe('string');
+  });
+});

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

@@ -0,0 +1,10 @@
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import { parseDataOverlayEvent } from '@/functions/parseDataOverlayEvent';
+import { Interactiontype } from '@3cr/types-ts';
+
+describe('parseDataOverlayEvent tests', () => {
+  it('should parse', () => {
+    const result = parseDataOverlayEvent(DataOverlayDataFaker.angleEventRaw(Interactiontype.HOVER_START));
+    expect(typeof result.Data).not.toBe('string');
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Interactiontype } from '@3cr/types-ts';
+import { parseMcadEvent } from '@/functions/parseMcadEvent';
+import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
+
+describe('parseMcadEvent tests', () => {
+  it('should parse', () => {
+    const result = parseMcadEvent(McadObjectInteractionFaker.randomRaw(Interactiontype.HOVER_START));
+    expect(typeof result.Mcad.CallToAction).not.toBe('string');
+  });
+});

package/src/functions/layoutOverlayStyle.ts

@@ -0,0 +1,84 @@
+import { AnchorPoint, PositionData } from '@3cr/types-ts';
+import { isFullscreen } from '@/models/scanState';
+
+export function generateDivStyleForLayout(layout: PositionData, canvas: HTMLCanvasElement) {
+  const padding: string = '0px';
+  const props: Record<string, any> = { position: 'absolute' };
+
+  if (layout.Anchor === AnchorPoint.TOP) {
+    props['left'] = '50%';
+    props['transform'] = 'translateX(-50%)';
+  } else if (layout.Anchor === AnchorPoint.BOTTOM) {
+    props['left'] = '50%';
+    props['transform'] = 'translateX(-50%)';
+  } else if (layout.Anchor === AnchorPoint.LEFT) {
+    props['top'] = '50%';
+    props['transform'] = 'translateY(-50%)';
+  } else if (layout.Anchor === AnchorPoint.RIGHT) {
+    props['top'] = '50%';
+    props['transform'] = 'translateY(-50%)';
+  }
+
+  if (
+    layout.Anchor === AnchorPoint.TOP_LEFT ||
+    layout.Anchor === AnchorPoint.TOP ||
+    layout.Anchor === AnchorPoint.TOP_RIGHT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props['top'] = padding;
+  }
+  if (
+    layout.Anchor === AnchorPoint.LEFT ||
+    layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
+    layout.Anchor === AnchorPoint.TOP_LEFT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props['left'] = padding;
+  }
+  if (
+    layout.Anchor === AnchorPoint.RIGHT ||
+    layout.Anchor === AnchorPoint.TOP_RIGHT ||
+    layout.Anchor === AnchorPoint.BOTTOM_RIGHT
+  ) {
+    props['right'] = padding;
+  }
+  if (
+    layout.Anchor === AnchorPoint.BOTTOM ||
+    layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
+    layout.Anchor === AnchorPoint.BOTTOM_RIGHT
+  ) {
+    props['bottom'] = padding;
+  }
+  if (layout.Anchor === AnchorPoint.TOP_LEFT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-top-left-radius'] = padding;
+  }
+  if (layout.Anchor === AnchorPoint.TOP_RIGHT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-top-right-radius'] = padding;
+  }
+  if (layout.Anchor === AnchorPoint.BOTTOM_LEFT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-bottom-left-radius'] = padding;
+  }
+  if (layout.Anchor === AnchorPoint.BOTTOM_RIGHT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-bottom-right-radius'] = padding;
+  }
+
+  props['width'] = `calc(${layout.MaxSize.X * 100}% - ${padding})`;
+  props['height'] = `calc(${layout.MaxSize.Y * 100}% - ${padding})`;
+
+  if (layout.Anchor === AnchorPoint.CENTER) {
+    const adjustment = !isFullscreen.value ? canvas.clientHeight / 3 : 0;
+    props['width'] = `calc(${layout.MaxSize.X * 100}% - ${adjustment}px - ${padding} - ${padding})`;
+    props['height'] = `calc(${layout.MaxSize.Y * 100}% -  ${padding} -  ${padding})`;
+  }
+
+  if (layout.AspectRatio === 1) {
+    if (layout.MaxSize.X === 1) {
+      props['width'] = `calc(${layout.MaxSize.Y * canvas.clientHeight}px)`;
+    }
+    if (layout.MaxSize.Y === 1) {
+      props['height'] = `calc(${layout.MaxSize.X * canvas.clientWidth}px)`;
+    }
+  }
+
+  return props;
+}