@3cr/viewer-browser 0.0.200 → 0.0.246

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/guards/isDataOverlayAngle.ts

@@ -0,0 +1,6 @@
+import { DataOverlayAngle } from '@/types/data-overlay-angle';
+import { DataOverlay } from '@/types/data-overlay';
+
+export function isDataOverlayAngle(markup: DataOverlay): markup is DataOverlayAngle {
+  return 'SegmentAngles' in markup;
+}

package/src/functions/guards/isDataOverlayLength.ts

@@ -0,0 +1,6 @@
+import { DataOverlayLength } from '@/types/data-overlay-length';
+import { DataOverlay } from '@/types/data-overlay';
+
+export function isDataOverlayLength(markup: DataOverlay): markup is DataOverlayLength {
+  return 'SegmentLengths' in markup;
+}

package/src/functions/guards/isDataOverlayPolygon.ts

@@ -0,0 +1,6 @@
+import { DataOverlayPolygon } from '@/types/data-overlay-polygon';
+import { DataOverlay } from '@/types/data-overlay';
+
+export function isDataOverlayPolygon(markup: DataOverlay): markup is DataOverlayPolygon {
+  return 'Area' in markup;
+}

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

package/src/{helpers → functions}/modelHelper.ts

@@ -1,17 +1,22 @@
 import {
-  AnchorPoint, CurrentDataOverlayState,
+  AnchorPoint,
+  CurrentDataOverlayState,
+  CurrentMcadState,
   CurrentScanState,
+  GraphicType,
   InitialDataOverlayState,
+  InitialMcadState,
   InitialScanState,
+  PatientPosition,
   ScanView,
-  ViewInteractiveMode,
+  ViewInteractiveMode
 } from '@3cr/types-ts';
 
 export function inflateScanState(): CurrentScanState {
   return {
     Version: '1.0.0',
     ScanMovement: {
-      Version: '1.1.0',
+      Version: '1.1.0'
     },
     Display: {
       Version: '1.0.0',
@@ -21,7 +26,7 @@ export function inflateScanState(): CurrentScanState {
       WindowLower: 0,
       WindowUpper: 100,
       ThresholdLower: 0,
-      ThresholdUpper: 100,
+      ThresholdUpper: 100
     },
     CurrentView: ScanView.Volume,
     Slice: {
@@ -31,7 +36,7 @@ export function inflateScanState(): CurrentScanState {
       SagittalLower: 0,
       SagittalUpper: 0,
       CoronalLower: 0,
-      CoronalUpper: 0,
+      CoronalUpper: 0
     },
     InteractionSettings: {
       Version: '1.0.0',
@@ -41,7 +46,7 @@ export function inflateScanState(): CurrentScanState {
       CameraRotateSensitivity: 0,
       KeyboardEnabled: true,
       MouseEnabled: true,
-      InteractionMode: ViewInteractiveMode.STATIC,
+      InteractionMode: ViewInteractiveMode.STATIC
     },
     Orientations: {
       Version: '1.0.0',
@@ -51,7 +56,7 @@ export function inflateScanState(): CurrentScanState {
         VerticalFlip: false,
         HorizontalFlip: false,
         Rotation: 0,
-        Slice: 0,
+        Slice: 0
       },
       Sagittal: {
         Version: '1.0.0',
@@ -59,7 +64,7 @@ export function inflateScanState(): CurrentScanState {
         VerticalFlip: false,
         HorizontalFlip: false,
         Rotation: 0,
-        Slice: 0,
+        Slice: 0
       },
       Coronal: {
         Version: '1.0.0',
@@ -67,7 +72,7 @@ export function inflateScanState(): CurrentScanState {
         VerticalFlip: false,
         HorizontalFlip: false,
         Rotation: 0,
-        Slice: 0,
+        Slice: 0
       },
       Volume: {
         Version: '1.1.0',
@@ -83,32 +88,38 @@ export function inflateScanState(): CurrentScanState {
     Layout: {
       Version: '1.0.0',
       SwitchOnViewChange: false,
-      PositionData: [],
+      PositionData: []
+    },
+    Colour: {
+      Version: '1.0.0',
+      ColourGradient: [],
+      AlphaGradient: [],
+      Name: ''
     },
-    Colour: null,
     NavigationCube: {
       Version: '1.0.0',
+      NavCubeGraphicType: GraphicType.BODY_SYMBOL,
       Transform: {
         Version: '1.0.0',
         AnchorPoint: AnchorPoint.DEFAULT,
         Position: {
           Version: '1.0.0',
           X: 0,
-          Y: 0,
+          Y: 0
         },
         Size: {
           Version: '1.0.0',
           X: 0,
-          Y: 0,
-        },
+          Y: 0
+        }
       },
       Visibility: {
         Version: '1.0.0',
-        Value: false,
+        Value: false
       },
       Interactivity: {
         Version: '1.0.0',
-        Value: false,
+        Value: false
       },
       Colour: {
         Version: '1.1.0',
@@ -124,7 +135,7 @@ export function inflateScanState(): CurrentScanState {
         B: 0.8,
         A: 1.0
       }
-    },
+    }
   };
 }
 
@@ -141,8 +152,46 @@ export function inflateInitialScanState(): InitialScanState {
     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: []
   };
 }
 
@@ -159,3 +208,17 @@ export function inflateInitialDataOverlayState(): InitialDataOverlayState {
     DataOverlay: inflateDataOverlayState()
   };
 }
+
+export function inflateInitialMcadObjectState(): InitialMcadState {
+  return {
+    Version: '1.1.0',
+    Models: inflateMcadObjectState()
+  };
+}
+
+export function inflateMcadObjectState(): CurrentMcadState {
+  return {
+    Version: '1.1.0',
+    Models: []
+  };
+}

package/src/functions/notification.ts

@@ -0,0 +1,82 @@
+import { InteractivityActions, NavigationCubeActions, NotificationPayload, NotificationsActions } from '@3cr/types-ts';
+import { useNotification } from '@kyvg/vue3-notification';
+import { t } from '@3cr/translations-ts';
+
+const { notify } = useNotification();
+
+type NotificationType = 'success' | 'info' | 'warn' | 'error';
+
+function getNotificationType(action: NotificationsActions): NotificationType {
+  switch (action) {
+    case NotificationsActions.no01:
+      return 'success';
+
+    case NotificationsActions.no02:
+      return 'error';
+
+    case NotificationsActions.no03:
+      return 'warn';
+
+    default:
+    case NotificationsActions.no04:
+      return 'info';
+  }
+}
+
+function getNotificationTitle(action: NotificationsActions): string {
+  switch (action) {
+    case NotificationsActions.no01:
+      return 'Success';
+
+    case NotificationsActions.no02:
+      return 'Error';
+
+    case NotificationsActions.no03:
+      return 'Warning';
+
+    default:
+    case NotificationsActions.no04:
+      return 'Information';
+  }
+}
+
+function getNotificationText(notification: NotificationPayload): string {
+  return t(notification.Code, {});
+}
+
+function shouldDisplayNotification(action: NotificationsActions, notification: NotificationPayload): boolean {
+  // Hide type specific messages
+  const hiddenTypes = [NotificationsActions.no01, NotificationsActions.no04];
+  if (hiddenTypes.includes(action)) {
+    return false;
+  }
+
+  // Hide all slider actions
+  if (notification.Action.startsWith('sl')) {
+    return false;
+  }
+
+  // Hide action specific messages
+  const hiddenActions = [
+    InteractivityActions.in01,
+    InteractivityActions.in02,
+    InteractivityActions.in03,
+    InteractivityActions.in04,
+    NavigationCubeActions.nc01
+  ] as string[];
+  if (hiddenActions.includes(notification.Action)) {
+    return false;
+  }
+
+  return true;
+}
+
+export async function handleNotification(action: NotificationsActions, message: string) {
+  const notification = JSON.parse(message) as NotificationPayload;
+  if (shouldDisplayNotification(action, notification)) {
+    const title = getNotificationTitle(action);
+    const text = getNotificationText(notification);
+    const type = getNotificationType(action);
+    notify({ title, text, type });
+  }
+}

package/src/functions/parseAction.ts

@@ -0,0 +1,9 @@
+import { Action, ActionRaw } from '@/types/action';
+import { ActionData } from '@/types/action-data';
+
+export function parseAction(data: ActionRaw): Action {
+  return {
+    ...data,
+    ActionData: JSON.parse(data.ActionData) as ActionData
+  };
+}

package/src/functions/parseCallToAction.ts

@@ -0,0 +1,9 @@
+import { CallToAction, CallToActionRaw } from '@/types/call-to-action';
+import { parseAction } from '@/functions/parseAction';
+
+export function parseCallToAction(data: CallToActionRaw): CallToAction {
+  return {
+    ...data,
+    Actions: data.Actions.map((action) => parseAction(action))
+  };
+}

package/src/functions/parseDataOverlay.ts

@@ -0,0 +1,10 @@
+import { DataOverlay, DataOverlayRaw } from '@/types/data-overlay';
+import { parseCallToAction } from '@/functions/parseCallToAction';
+import { CallToActionRaw } from '@/types/call-to-action';
+
+export function parseDataOverlay(data: DataOverlayRaw): DataOverlay {
+  return {
+    ...data,
+    CallToAction: data.CallToAction ? parseCallToAction(JSON.parse(data.CallToAction) as CallToActionRaw) : null
+  };
+}

package/src/functions/parseDataOverlayData.ts

@@ -0,0 +1,10 @@
+import { DataOverlay, DataOverlayRaw } from '@/types/data-overlay';
+import { parseDataOverlay } from '@/functions/parseDataOverlay';
+import { DataOverlayData, DataOverlayDataRaw } from '@/types/data-overlay-data';
+
+export function parseDataOverlayData<T extends DataOverlay>(data: DataOverlayDataRaw): DataOverlayData<T> {
+  return {
+    ...data,
+    Data: parseDataOverlay(JSON.parse(data.Data) as DataOverlayRaw) as T
+  };
+}

package/src/functions/parseDataOverlayEvent.ts

@@ -0,0 +1,17 @@
+import { DataOverlay, DataOverlayRaw } from '@/types/data-overlay';
+import { DataOverlayData, DataOverlayDataRaw } from '@/types/data-overlay-data';
+import { parseDataOverlay } from '@/functions/parseDataOverlay';
+import { DataOverlayInteraction, DataOverlayInteractionRaw } from '@/types/data-overlay-interaction';
+
+type DataOverlayEvent<T extends DataOverlay> = DataOverlayData<DataOverlayInteraction<T>>;
+
+export function parseDataOverlayEvent<T extends DataOverlay>(data: DataOverlayDataRaw): DataOverlayEvent<T> {
+  const interaction = JSON.parse(data.Data) as DataOverlayInteractionRaw<DataOverlayRaw>;
+  return {
+    ...data,
+    Data: {
+      ...interaction,
+      DataOverlay: parseDataOverlay(interaction.DataOverlay) as T
+    }
+  };
+}

package/src/functions/parseMcadEvent.ts

@@ -0,0 +1,10 @@
+import { parseDataOverlay } from '@/functions/parseDataOverlay';
+import { McadObjectInteraction, McadObjectInteractionRaw } from '@/types/mcad-object-interaction';
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+
+export function parseMcadEvent(data: McadObjectInteractionRaw): McadObjectInteraction {
+  return {
+    ...data,
+    Mcad: parseDataOverlay(data.Mcad) as DataOverlayMcad
+  };
+}