@3cr/viewer-browser 0.0.200 → 0.0.246

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,61 @@
-/**
- * main.ts
- *
- * Bootstraps Vuetify and other plugins then mounts the App`
- */
+import { registerVersion, quit } 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';
+import { getAvailableLanguages, setLanguage } from '@3cr/translations-ts';
 
-// Components
-import App from './App.vue'
+let mountedApp: ComponentPublicInstance | undefined = undefined;
 
-export { App }
+export async function registerViewer(host: Element | string, version: string, language?: string): Promise<void> {
+  await registerVersion(version);
 
-export default App;
+  const languages = await getAvailableLanguages();
+  if (language && languages.includes(language)) {
+    await setLanguage(language);
+  } else {
+    const documentLanguage = document.querySelector('html')?.getAttribute('lang');
+    const defaultLanguage = documentLanguage ?? languages[0];
+    await setLanguage(defaultLanguage);
+  }
 
+  const app = createApp(App);
+  usePlugins(app);
+  mountedApp = app.mount(host);
+
+  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(): Promise<void> {
+  const styleSheet = document.getElementById(injectedStyleId);
+  styleSheet?.remove();
+  await quit();
+}
+
+export async function closeViewer(): Promise<void> {
+  if (!mountedApp) {
+    throw new Error('Please call `registerViewer(version: string)` first');
+  }
+  await (mountedApp as any).close();
+}

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

package/src/models/callbacks.ts

@@ -0,0 +1,4 @@
+/**
+ * A viewer callback that may be synchronous or asynchronous.
+ */
+export type ViewerCallback<Ret = void, Args extends unknown[] = []> = (...args: Args) => Ret | Promise<Ret>;

package/src/models/loadViewerOptions.ts

@@ -0,0 +1,79 @@
+import { ViewerCallback } from '@/models/callbacks';
+import { CurrentDataOverlayState, CurrentMcadState, CurrentScanState } from '@3cr/types-ts';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+
+export interface LoadViewerOptions {
+  ViewerTitle?: string;
+  DisplaySettings?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
+  Annotations?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
+  Markups?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
+  Mcad?: {
+    Show?: boolean;
+    Title?: string;
+    Tooltip?: string;
+    Icon?: string;
+  };
+  OnAutoAnnotate?: ViewerCallback;
+  OnClosePopup?: ViewerCallback;
+  OnDownloadDicomSeries?: ViewerCallback;
+  OnDownloadMcad?: ViewerCallback<void, [string]>;
+  OnEnableCloudStorage?: ViewerCallback;
+  OnErrorClose?: ViewerCallback;
+  OnExitViewer?: ViewerCallback;
+  OnLoadNewDicomSeries?: ViewerCallback;
+  OnLoadSavedSession?: ViewerCallback;
+  OnResolveUrls?: ViewerCallback<string[], [string[]]>;
+  OnSaveSession?: ViewerCallback<void, [CurrentScanState, CurrentDataOverlayState, CurrentMcadState]>;
+  OnScanLoaded?: ViewerCallback<void, [CurrentScanState]>;
+  OnScreenshot?: ViewerCallback;
+  OnSendTo3rdParty?: ViewerCallback;
+  OnShare?: ViewerCallback;
+  OnShareToMobile?: ViewerCallback;
+  OnInteractionReady?: ViewerCallback;
+  OnViewerLoaded?: ViewerCallback<void, [Viewer3crService]>;
+  ShowFileMenu?: boolean;
+  ShowSettingsMenu?: boolean;
+  ShowAiMenu?: boolean;
+  Show2x2Layout?: boolean;
+  Show1x3Layout?: boolean;
+  ShowTutorial?: boolean;
+  ShowResetScan?: boolean;
+  ShowEnableCloudStorage?: boolean;
+  ShowSendTo3rdParty?: boolean;
+  ShowShareToMobile?: boolean;
+  ShowScreenshot?: boolean;
+}
+
+export const defaultLoadViewerOptions: LoadViewerOptions = {
+  OnAutoAnnotate: () => {},
+  OnClosePopup: () => {},
+  OnDownloadDicomSeries: () => {},
+  OnDownloadMcad: () => {},
+  OnEnableCloudStorage: () => {},
+  OnErrorClose: () => {},
+  OnExitViewer: () => {},
+  OnLoadNewDicomSeries: () => {},
+  OnLoadSavedSession: () => {},
+  OnResolveUrls: () => [],
+  OnSaveSession: () => {},
+  OnScanLoaded: () => {},
+  OnScreenshot: () => {},
+  OnSendTo3rdParty: () => {},
+  OnShare: () => {},
+  OnShareToMobile: () => {}
+};

package/src/models/loadViewerPayload.ts

@@ -0,0 +1,17 @@
+export interface LoadViewerPayload {
+  Url: string;
+  DecryptionKey: MftpDecryptionKey;
+}
+
+export interface MftpDecryptionKey {
+  Key: string;
+  Iv: string;
+}
+
+export const defaultLoadViewerPayload: LoadViewerPayload = {
+  Url: 'https://webgl-3dr.singular.health/demo/scans/chest_v6.3vxl',
+  DecryptionKey: {
+    Iv: 'xDt9F6CjVSZElwoS5No77Q==',
+    Key: 'Oc5F5YatHrB0MHRcphh/DlDKUqG5mpbniEm+fWPooag='
+  }
+};