@3cr/viewer-browser 0.0.200 → 0.0.220

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

@@ -1,17 +1,21 @@
 import {
-  AnchorPoint, CurrentDataOverlayState,
+  AnchorPoint,
+  CurrentDataOverlayState,
+  CurrentMcadState,
   CurrentScanState,
   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 +25,7 @@ export function inflateScanState(): CurrentScanState {
       WindowLower: 0,
       WindowUpper: 100,
       ThresholdLower: 0,
-      ThresholdUpper: 100,
+      ThresholdUpper: 100
     },
     CurrentView: ScanView.Volume,
     Slice: {
@@ -31,7 +35,7 @@ export function inflateScanState(): CurrentScanState {
       SagittalLower: 0,
       SagittalUpper: 0,
       CoronalLower: 0,
-      CoronalUpper: 0,
+      CoronalUpper: 0
     },
     InteractionSettings: {
       Version: '1.0.0',
@@ -41,7 +45,7 @@ export function inflateScanState(): CurrentScanState {
       CameraRotateSensitivity: 0,
       KeyboardEnabled: true,
       MouseEnabled: true,
-      InteractionMode: ViewInteractiveMode.STATIC,
+      InteractionMode: ViewInteractiveMode.STATIC
     },
     Orientations: {
       Version: '1.0.0',
@@ -51,7 +55,7 @@ export function inflateScanState(): CurrentScanState {
         VerticalFlip: false,
         HorizontalFlip: false,
         Rotation: 0,
-        Slice: 0,
+        Slice: 0
       },
       Sagittal: {
         Version: '1.0.0',
@@ -59,7 +63,7 @@ export function inflateScanState(): CurrentScanState {
         VerticalFlip: false,
         HorizontalFlip: false,
         Rotation: 0,
-        Slice: 0,
+        Slice: 0
       },
       Coronal: {
         Version: '1.0.0',
@@ -67,7 +71,7 @@ export function inflateScanState(): CurrentScanState {
         VerticalFlip: false,
         HorizontalFlip: false,
         Rotation: 0,
-        Slice: 0,
+        Slice: 0
       },
       Volume: {
         Version: '1.1.0',
@@ -83,9 +87,14 @@ 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',
       Transform: {
@@ -94,21 +103,21 @@ export function inflateScanState(): CurrentScanState {
         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 +133,7 @@ export function inflateScanState(): CurrentScanState {
         B: 0.8,
         A: 1.0
       }
-    },
+    }
   };
 }
 
@@ -141,8 +150,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 +206,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/{notifications → functions}/notification.ts

@@ -1,10 +1,5 @@
-import {
-  InteractivityActions,
-  NavigationCubeActions,
-  NotificationPayload,
-  NotificationsActions,
-} from "@3cr/types-ts";
-import { useNotification } from "@kyvg/vue3-notification";
+import { InteractivityActions, NavigationCubeActions, NotificationPayload, NotificationsActions } from '@3cr/types-ts';
+import { useNotification } from '@kyvg/vue3-notification';
 const { notify } = useNotification();
 
 export async function handleNotification(action: NotificationsActions, message: string) {
@@ -19,32 +14,35 @@ export async function handleNotification(action: NotificationsActions, message:
       return;
     default:
   }
-  if (notification.Action.startsWith("sl")) return;
 
-  let type = "success";
+  if (notification.Action.startsWith('sl')) {
+    return;
+  }
+
+  let type = 'success';
   switch (action) {
     // Muting no01
     case NotificationsActions.no01:
-      type = "success";
+      type = 'success';
       return;
 
     case NotificationsActions.no02:
-      type = "warn";
+      type = 'error';
       break;
 
     case NotificationsActions.no03:
-      type = "error";
+      type = 'warn';
       break;
 
     // Muting no04
     case NotificationsActions.no04:
-      type = "info";
+      type = 'info';
       return;
   }
 
   notify({
     title: notification.Code,
     text: notification.Action,
-    type,
+    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
+  };
+}

package/src/functions/rgbaToCss.ts

@@ -0,0 +1,13 @@
+import { clamp } from '@/functions/clamp';
+
+export function rgbaNormalizedToCss(r: number, g: number, b: number, a: number): string {
+  return rgbaBytesToCss(r * 255, g * 255, b * 255, a);
+}
+
+export function rgbaBytesToCss(r: number, g: number, b: number, a: number): string {
+  r = Math.round(clamp(r, 0, 255));
+  g = Math.round(clamp(g, 0, 255));
+  b = Math.round(clamp(b, 0, 255));
+  a = clamp(a, 0, 1);
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}

package/src/main.ts

@@ -1,13 +1,52 @@
-/**
- * main.ts
- *
- * Bootstraps Vuetify and other plugins then mounts the App`
- */
+import { registerVersion } from '@3cr/sdk-browser';
+import { ComponentPublicInstance, createApp } from 'vue';
+import { usePlugins } from '@/plugins/usePlugins';
+import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
+import { LoadViewerPayload } from '@/models/loadViewerPayload';
+import { injectedStyleId } from './config';
+import { useVersion3cr } from '@/composables/useVersion3cr';
+import App from '@/App.vue';
 
-// Components
-import App from './App.vue'
+let mountedApp: ComponentPublicInstance | undefined = undefined;
 
-export { App }
+let modalId = `__modal_set__`;
 
-export default App;
+export async function registerViewer(version: string) {
+  const newElement = document.createElement('div');
+  newElement.style.width = '0';
+  newElement.style.height = '0';
+  newElement.id = modalId;
+  document.body.appendChild(newElement);
 
+  const app = createApp(App);
+  usePlugins(app);
+  mountedApp = app.mount(newElement);
+  await registerVersion(version);
+
+  const version3cr = useVersion3cr();
+  version3cr.value = version;
+}
+
+export async function loadViewer(
+  payload: LoadViewerPayload | undefined = undefined,
+  options: LoadViewerOptions = defaultLoadViewerOptions
+): Promise<void> {
+  if (!mountedApp) {
+    throw new Error('Please call `registerViewer(version: string)` first');
+  }
+  await (mountedApp as any).loadInstance(payload, options);
+}
+
+export async function loadSession(url: string): Promise<void> {
+  if (!mountedApp) {
+    throw new Error('Please call `registerViewer(version: string)` first');
+  }
+  await (mountedApp as any).loadSession(url);
+}
+
+export async function ejectViewer() {
+  const modal = document.getElementById(modalId);
+  const styleSheet = document.getElementById(injectedStyleId);
+  modal?.remove();
+  styleSheet?.remove();
+}

package/src/{dataLayer → models}/__tests__/eventHandlers.spec.ts

@@ -1,5 +1,4 @@
-import { describe, expect, it, vi} from 'vitest';
-import { EventHandlers } from '@/dataLayer/eventHandlers';
+import { EventHandlers } from '@/models/eventHandlers';
 
 describe('eventHandlers tests', () => {
   it('should add the same key and handler only once', async () => {
@@ -20,7 +19,7 @@ describe('eventHandlers tests', () => {
     await handlers.call('fn');
     expect(a).toHaveBeenCalledOnce();
     expect(b).toHaveBeenCalledOnce();
-  })
+  });
 
   it('should add/remove the same key and handler', () => {
     const handlers = new EventHandlers();

package/src/models/__tests__/loadViewerOptions.spec.ts

@@ -0,0 +1,72 @@
+import { defaultLoadViewerOptions } from '@/models/loadViewerOptions';
+import { CurrentDataOverlayState, CurrentMcadState, CurrentScanState } from '@3cr/types-ts';
+
+describe('loadViewerOptions tests', () => {
+  it('should call default OnAutoAnnotate', () => {
+    expect(() => defaultLoadViewerOptions.OnAutoAnnotate!()).not.toThrow();
+  });
+
+  it('should call default OnClosePopup', () => {
+    expect(() => defaultLoadViewerOptions.OnClosePopup!()).not.toThrow();
+  });
+
+  it('should call default OnDownloadDicomSeries', () => {
+    expect(() => defaultLoadViewerOptions.OnDownloadDicomSeries!()).not.toThrow();
+  });
+
+  it('should call default OnDownloadMcad', () => {
+    expect(() => defaultLoadViewerOptions.OnDownloadMcad!('1')).not.toThrow();
+  });
+
+  it('should call default OnEnableCloudStorage', () => {
+    expect(() => defaultLoadViewerOptions.OnEnableCloudStorage!()).not.toThrow();
+  });
+
+  it('should call default OnErrorClose', () => {
+    expect(() => defaultLoadViewerOptions.OnErrorClose!()).not.toThrow();
+  });
+
+  it('should call default OnExitViewer', () => {
+    expect(() => defaultLoadViewerOptions.OnExitViewer!()).not.toThrow();
+  });
+
+  it('should call default OnLoadNewDicomSeries', () => {
+    expect(() => defaultLoadViewerOptions.OnLoadNewDicomSeries!()).not.toThrow();
+  });
+
+  it('should call default OnLoadSavedSession', () => {
+    expect(() => defaultLoadViewerOptions.OnLoadSavedSession!()).not.toThrow();
+  });
+
+  it('should call default OnResolveKeys', () => {
+    expect(() => defaultLoadViewerOptions.OnResolveUrls!(['1'])).not.toThrow();
+  });
+
+  it('should call default OnSaveSession', () => {
+    const scanState = {} as CurrentScanState;
+    const dataOverlayState = {} as CurrentDataOverlayState;
+    const mcadState = {} as CurrentMcadState;
+    expect(() => defaultLoadViewerOptions.OnSaveSession!(scanState, dataOverlayState, mcadState)).not.toThrow();
+  });
+
+  it('should call default OnScanLoaded', () => {
+    const scanState = {} as CurrentScanState;
+    expect(() => defaultLoadViewerOptions.OnScanLoaded!(scanState)).not.toThrow();
+  });
+
+  it('should call default OnScreenshot', () => {
+    expect(() => defaultLoadViewerOptions.OnScreenshot!()).not.toThrow();
+  });
+
+  it('should call default OnSendTo3rdParty', () => {
+    expect(() => defaultLoadViewerOptions.OnSendTo3rdParty!()).not.toThrow();
+  });
+
+  it('should call default OnShare', () => {
+    expect(() => defaultLoadViewerOptions.OnShare!()).not.toThrow();
+  });
+
+  it('should call default OnShareToMobile', () => {
+    expect(() => defaultLoadViewerOptions.OnShareToMobile!()).not.toThrow();
+  });
+});

package/src/models/__tests__/loadViewerPayload.spec.ts

@@ -0,0 +1,10 @@
+import { defaultLoadViewerPayload } from '@/models/loadViewerPayload';
+
+describe('loadViewerOptions tests', () => {
+  it('should exist', () => {
+    expect(defaultLoadViewerPayload.Url).toBeTruthy();
+    expect(defaultLoadViewerPayload.DecryptionKey).toBeTruthy();
+    expect(defaultLoadViewerPayload.DecryptionKey.Iv).toBeTruthy();
+    expect(defaultLoadViewerPayload.DecryptionKey.Key).toBeTruthy();
+  });
+});

package/src/models/__tests__/scanState.spec.ts

@@ -0,0 +1,190 @@
+import {
+  inflateDataOverlayState,
+  inflateInitialDataOverlayState,
+  inflateInitialMcadObjectState,
+  inflateInitialScanState,
+  inflateMcadObjectState,
+  inflateScanState
+} from '@/functions/modelHelper';
+import { AnchorPoint, Interactiontype, ScanView } from '@3cr/types-ts';
+import {
+  cSlider,
+  getCurrentView,
+  getViewName,
+  setDataOverlayEvent,
+  setDataOverlayState,
+  setInitialDataOverlayState,
+  setInitialMcadState,
+  setInitialScanStateFromPayload,
+  setMcadEvent,
+  setMcadState,
+  setScanState,
+  setScanStateFromPayload,
+  sSlider,
+  thresholdSlider,
+  tSlider,
+  windowSlider
+} from '@/models/scanState';
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
+
+describe('scanState tests', () => {
+  it('should getCurrentView Sagittal', () => {
+    expect(
+      getCurrentView({
+        Anchor: AnchorPoint.CENTER,
+        ActiveView: true,
+        AspectRatio: 1,
+        MaxSize: {
+          Version: '0.0.1',
+          X: 1,
+          Y: 1
+        },
+        DefaultView: ScanView.Coronal,
+        Priority: 1,
+        Version: '0.0.1',
+        Offset: {
+          Version: '0.0.1',
+          X: 1,
+          Y: 1
+        }
+      })
+    ).toBe(3);
+  });
+
+  it('should getCurrentView Sagittal', () => {
+    const initalState = inflateScanState();
+    initalState.Layout.PositionData = [
+      {
+        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'
+      }
+    ];
+    setScanState(JSON.stringify(initalState));
+
+    expect(
+      getCurrentView({
+        Anchor: AnchorPoint.CENTER,
+        ActiveView: true,
+        AspectRatio: 1,
+        MaxSize: {
+          Version: '0.0.1',
+          X: 1,
+          Y: 1
+        },
+        DefaultView: ScanView.Coronal,
+        Priority: 1,
+        Version: '0.0.1',
+        Offset: {
+          Version: '0.0.1',
+          X: 1,
+          Y: 1
+        }
+      })
+    ).toBe(0);
+  });
+
+  it('should get/set sagittal slider', () => {
+    sSlider.value = [0, 100];
+    expect(sSlider.value[0]).toBe(0);
+    expect(sSlider.value[1]).toBe(100);
+  });
+
+  it('should get/set coronal slider', () => {
+    cSlider.value = [0, 100];
+    expect(cSlider.value[0]).toBe(0);
+    expect(cSlider.value[1]).toBe(100);
+  });
+
+  it('should get/set transverse slider', () => {
+    tSlider.value = [0, 100];
+    expect(tSlider.value[0]).toBe(0);
+    expect(tSlider.value[1]).toBe(100);
+  });
+
+  it('should set window slider', () => {
+    expect(windowSlider.value).toStrictEqual([0, 100]);
+  });
+
+  it('should set threshold slider', () => {
+    expect(thresholdSlider.value).toStrictEqual([0, 100]);
+  });
+
+  describe('set states', () => {
+    it('should set initial scan state', () => {
+      const payload = JSON.stringify(inflateInitialScanState());
+      expect(() => setInitialScanStateFromPayload(payload)).not.toThrow();
+    });
+
+    it('should set current scan state', () => {
+      const payload = JSON.stringify(inflateScanState());
+      expect(() => setScanStateFromPayload(payload)).not.toThrow();
+    });
+
+    it('should set initial data overlay state', () => {
+      const payload = JSON.stringify(inflateInitialDataOverlayState());
+      expect(() => setInitialDataOverlayState(payload)).not.toThrow();
+    });
+
+    it('should set current data overlay state', () => {
+      const payload = JSON.stringify(inflateDataOverlayState());
+      expect(() => setDataOverlayState(payload)).not.toThrow();
+    });
+
+    it('should set data overlay event', () => {
+      const payload = JSON.stringify(DataOverlayDataFaker.annotationEventRaw(Interactiontype.HOVER_START));
+      expect(() => setDataOverlayEvent(payload)).not.toThrow();
+    });
+
+    it('should set initial mcad state', () => {
+      const payload = JSON.stringify(inflateInitialMcadObjectState());
+      expect(() => setInitialMcadState(payload)).not.toThrow();
+    });
+
+    it('should set current data overlay state', () => {
+      const payload = JSON.stringify(inflateMcadObjectState());
+      expect(() => setMcadState(payload)).not.toThrow();
+    });
+
+    it('should set data overlay event', () => {
+      const payload = JSON.stringify(McadObjectInteractionFaker.randomRaw(Interactiontype.HOVER_START));
+      expect(() => setMcadEvent(payload)).not.toThrow();
+    });
+  });
+
+  describe('getViewName tests', () => {
+    it('should get name for coronal', () => {
+      expect(getViewName(ScanView.Coronal)).toBe('Coronal');
+    });
+
+    it('should get name for sagittal', () => {
+      expect(getViewName(ScanView.Sagittal)).toBe('Sagittal');
+    });
+
+    it('should get name for transverse', () => {
+      expect(getViewName(ScanView.Transverse)).toBe('Transverse');
+    });
+
+    it('should get name for volume', () => {
+      expect(getViewName(ScanView.Volume)).toBe('3D Volume');
+    });
+
+    it('should get empty string for unknown', () => {
+      expect(getViewName(-1 as ScanView)).toBe('');
+    });
+  });
+});