@3cr/viewer-browser 0.0.161 → 0.0.194

package/src/dataLayer/scanState.ts

@@ -3,22 +3,30 @@ import {
   AnchorPoint,
   ColourPresetData,
   CurrentScanState,
+  DataOverlayEvent,
+  InitialDataOverlayState,
   InitialScanState,
   LayoutActions,
+  PositionData,
+  ScanView,
 } from "@3cr/types-ts";
+import { inflateInitialDataOverlayState, inflateInitialScanState, inflateScanState } from "@/helpers/modelHelper";
 import {
-  inflateInitialScanState,
-  inflateScanState,
-} from "@/helpers/modelHelper";
+  CurrentDataOverlayStateUnpatched,
+  DataOverlayEventUnpatched,
+  InitialDataOverlayStateUnpatched,
+  patchCurrentDataOverlay,
+  patchDataOverlayEvent,
+  patchInitialDataOverlay
+} from "@/dataLayer/patchDataOverlay";
 
 export const currentColourPreset = ref<ColourPresetData | undefined>(undefined);
-
 export const transactionStarted = ref<boolean>(false);
 export const scanStateIncoming = ref<string>("");
 export const scanState = ref<CurrentScanState>(inflateScanState());
-export const initialScanState = ref<InitialScanState>(
-  inflateInitialScanState()
-);
+export const dataOverlayEvent = ref<DataOverlayEvent | null>(null);
+export const dataOverlayState = ref<InitialDataOverlayState>(inflateInitialDataOverlayState());
+export const initialScanState = ref<InitialScanState>(inflateInitialScanState());
 export const previousLayout = ref<LayoutActions>(LayoutActions.lo02);
 
 export const huMinMax = ref({
@@ -30,72 +38,77 @@ export const tMinMax = ref({
   min: 0,
   max: 999999,
 });
+
 export const sMinMax = ref({
   min: 0,
   max: 999999,
 });
+
 export const cMinMax = ref({
   min: 0,
   max: 999999,
 });
 
 export const windowSlider = computed({
-  get() {
+  get(): [number, number] {
     return [
       unref(scanState).Display.WindowLower,
       unref(scanState).Display.WindowUpper,
     ];
   },
-  set(value: Array<number>) {
+  set(value: [number, number]): void {
     scanState.value.Display.WindowLower = value[0];
     scanState.value.Display.WindowUpper = value[1];
   },
 });
+
 export const thresholdSlider = computed({
-  get() {
+  get(): [number, number] {
     return [
       Math.trunc(unref(scanState).Display.ThresholdLower),
       Math.trunc(unref(scanState).Display.ThresholdUpper),
     ];
   },
-  set(value: Array<number>) {
+  set(value: [number, number]): void {
     scanState.value.Display.ThresholdLower = value[0];
     scanState.value.Display.ThresholdUpper = value[1];
   },
 });
+
 export const tSlider = computed({
-  get() {
+  get(): [number, number] {
     return [
       Math.trunc(unref(scanState).Slice.TransverseLower),
       Math.trunc(unref(scanState).Slice.TransverseUpper),
     ];
   },
-  set(value: Array<number>) {
+  set(value: [number, number]): void {
     scanState.value.Slice.TransverseLower = value[0];
     scanState.value.Slice.TransverseUpper = value[1];
   },
 });
+
 export const sSlider = computed({
-  get() {
+  get(): [number, number] {
     return [
       Math.trunc(unref(scanState).Slice.SagittalLower),
       Math.trunc(unref(scanState).Slice.SagittalUpper),
     ];
   },
-  set(value: Array<number>) {
+  set(value: [number, number]): void {
     scanState.value.Slice.SagittalLower = value[0];
     scanState.value.Slice.SagittalUpper = value[1];
   },
 });
 
 export const cSlider = computed({
-  get() {
+  get(): [number, number] {
     return [
       Math.trunc(unref(scanState).Slice.CoronalLower),
       Math.trunc(unref(scanState).Slice.CoronalUpper),
     ];
   },
-  set(value: Array<number>) {
+  set(value: [number, number]): void {
     scanState.value.Slice.CoronalLower = value[0];
     scanState.value.Slice.CoronalUpper = value[1];
   },
@@ -111,6 +124,7 @@ export const isLayout2x2 = computed(() => {
     unref(scanState).Layout.PositionData[3].Anchor === AnchorPoint.BOTTOM_RIGHT
   );
 });
+
 export const isLayout1x3 = computed(() => {
   return (
     unref(scanState).Layout.PositionData.length > 1 &&
@@ -121,6 +135,14 @@ export const isLayout1x3 = computed(() => {
   );
 });
 
+export const isFullscreen = computed(() => {
+  return unref(scanState).Layout.PositionData.length === 1;
+});
+
+export const isSessionLoaded = computed(() => {
+  return unref(dataOverlayState).DataOverlay.DataOverlay.length > 0;
+});
+
 export const currentGreyscalePreset = computed(() => {
   for (const preset of unref(initialScanState).GreyscalePresets) {
     if (
@@ -133,29 +155,24 @@ export const currentGreyscalePreset = computed(() => {
           unref(scanState).Display.WindowUpper ===
             unref(initialScanState).HuUpper))
     ) {
-      return preset.Name;
+      return preset;
     }
   }
   return undefined;
 });
 
-export async function setScanStateFromPayload(_: string, message: string) {
+export async function setScanStateFromPayload(message: string) {
   transactionStarted.value = true;
   scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
-
   setScanState(message);
   await nextTick();
   transactionStarted.value = false;
 }
-export async function setInitialScanStateFromPayload(
-  _: string,
-  message: string
-) {
-  transactionStarted.value = true;
 
+export function setInitialScanStateFromPayload(message: string) {
+  transactionStarted.value = true;
   scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
   const obj = JSON.parse(unref(scanStateIncoming)) as InitialScanState;
-
   setScanState(JSON.stringify(obj.DefaultDisplaySettings, null, 2));
   initialScanState.value = obj;
   huMinMax.value.max = obj.HuUpper;
@@ -169,3 +186,65 @@ export async function setInitialScanStateFromPayload(
 export function setScanState(message: string) {
   scanState.value = JSON.parse(message) as CurrentScanState;
 }
+
+export function setInitialDataOverlayState(message: string) {
+  const data = JSON.parse(message) as InitialDataOverlayStateUnpatched;
+  dataOverlayState.value = patchInitialDataOverlay(data);
+}
+
+export function setDataOverlayState(message: string) {
+  const data = JSON.parse(message) as CurrentDataOverlayStateUnpatched;
+  dataOverlayState.value = { Version: '1.1.0', DataOverlay: patchCurrentDataOverlay(data) };
+}
+
+export function setActiveAnnotation(message: string): void {
+  const data = JSON.parse(message) as DataOverlayEventUnpatched;
+  dataOverlayEvent.value = patchDataOverlayEvent(data);
+}
+
+export function getCurrentView(position: PositionData): ScanView {
+  return unref(scanState).Layout.PositionData.length !== 1
+    ? position.DefaultView
+    : unref(scanState).CurrentView;
+}
+
+export function getViewName(view: ScanView): string {
+  switch (view) {
+    case ScanView.Coronal:
+      return "Coronal";
+    case ScanView.Sagittal:
+      return "Sagittal";
+    case ScanView.Transverse:
+      return "Transverse";
+    case ScanView.Volume:
+      return "3D Volume";
+    default:
+      return "";
+  }
+}
+
+export function isHorizontalFlip(view: ScanView): boolean {
+  switch (view) {
+    case ScanView.Coronal:
+      return scanState.value.Orientations.Coronal.HorizontalFlip;
+    case ScanView.Sagittal:
+      return scanState.value.Orientations.Sagittal.HorizontalFlip;
+    case ScanView.Transverse:
+      return scanState.value.Orientations.Transverse.HorizontalFlip;
+    default:
+      return false;
+  }
+}
+
+export function isVerticalFlip(view: ScanView): boolean {
+  switch (view) {
+    case ScanView.Coronal:
+      return scanState.value.Orientations.Coronal.VerticalFlip;
+    case ScanView.Sagittal:
+      return scanState.value.Orientations.Sagittal.VerticalFlip;
+    case ScanView.Transverse:
+      return scanState.value.Orientations.Transverse.VerticalFlip;
+    default:
+      return false;
+  }
+}

package/src/dataLayer/useViewer3cr.ts

@@ -0,0 +1,7 @@
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+
+const viewer3cr = new Viewer3cr();
+
+export function useViewer3cr(): Viewer3cr {
+  return viewer3cr;
+}

package/src/dataLayer/viewer3cr.ts

@@ -0,0 +1,410 @@
+import { FrontEndPayload } from "@3cr/sdk-browser/types/payload";
+import { createInstance, executePayload, registerOnPayloadHandler } from "@3cr/sdk-browser";
+import { unref } from "vue";
+import {
+  AnchorPoint,
+  DataOverlayActions,
+  FileManagementActions,
+  FrontEndInterfaces, InteractivityActions, LayoutActions, NavigationCubeActions, PresetsActions, ScanMovementActions,
+  ScanOrientationActions,
+  ScanView, SlidersActions, ViewSelectionActions
+} from "@3cr/types-ts";
+import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+import { currentColourPreset, previousLayout, transactionStarted } from "@/dataLayer/scanState";
+import { toNumber } from "@/helpers/utils";
+import { EventHandlers } from "@/dataLayer/eventHandlers";
+import { clamp } from "@/dataLayer/clamp";
+
+type InterfaceCallback = (message: string, action: string) => void | Promise<void>;
+
+type ActionCallback = (message: string) => void | Promise<void>;
+
+export const emptyPayload = { Version: "1.1.0" };
+
+export class Viewer3cr {
+  private interfaceCallbacks = new EventHandlers<string, InterfaceCallback>();
+
+  private actionCallbacks = new EventHandlers<string, ActionCallback>();
+
+  async register(canvas: HTMLCanvasElement): Promise<void> {
+    await registerOnPayloadHandler(this.onPayload.bind(this));
+    await createInstance(canvas);
+  }
+
+  addInterfaceHandler(iface: string, callback: InterfaceCallback): void {
+    this.interfaceCallbacks.add(iface, callback);
+  }
+
+  removeInterfaceHandler(iface: string, callback: InterfaceCallback): void {
+    this.interfaceCallbacks.remove(iface, callback);
+  }
+
+  addActionHandler(action: string, callback: ActionCallback): void {
+    this.actionCallbacks.add(action, callback);
+  }
+
+  removeActionHandler(action: string, callback: ActionCallback): void {
+    this.actionCallbacks.remove(action, callback);
+  }
+
+  /**
+   * DO-02: Toggle 2D annotation visibility.
+   * @param id The annotation id.
+   * @param visibility The annotation visibility.
+   */
+  async toggle2dAnnotation(id: string, visibility: boolean): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.data_overlay, DataOverlayActions.do03, {
+      Version: '1.1.0',
+      Id: id,
+      Visibility: visibility
+    });
+  }
+
+  /**
+   * DO-11: Toggle 3D annotation visibility.
+   * @param id The annotation id.
+   * @param visibility The annotation visibility.
+   */
+  async toggle3dAnnotation(id: string, visibility: boolean): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.data_overlay, DataOverlayActions.do11, {
+      Version: '1.1.0',
+      Id: id,
+      Visibility: visibility
+    });
+  }
+
+  /**
+   * FM-01: Load scan.
+   * @param options The load scan options.
+   */
+  async loadScan(options: LoadViewerPayload): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.file_management, FileManagementActions.fm01, options);
+  }
+
+  /**
+   * FM-03: Load previous CurrentScanState values.
+   * @param url The URL to the file.
+   */
+  async loadScanSession(url: string): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.file_management, FileManagementActions.fm03, {
+      Version: '1.1.0',
+      Url: url
+    });
+  }
+
+  /**
+   * FM-05: Load separate data overlay file from external UI.
+   * @param url The URL to the file.
+   */
+  async loadDataOverlay(url: string): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.file_management, FileManagementActions.fm05, {
+      Version: '1.1.0',
+      Url: url
+    });
+  }
+
+  /**
+   * FM-09: Load separate MCAD file from external UI.
+   * @param url The URL to the file.
+   */
+  async loadMcad(url: string): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.file_management, 'fm_09', {
+      Version: '1.1.0',
+      Url: url
+    });
+  }
+
+  /**
+   * SO-01: Rotate 2D view by up to +-XXX degrees.
+   * @param view The 2D view.
+   * @param deg The degrees.
+   */
+  async rotateByDeg(view: ScanView, deg: number) {
+    await this.sendPayload(FrontEndInterfaces.scan_orientation, ScanOrientationActions.so01, {
+      Version: "0.0.1",
+      View: view,
+      Angle: deg,
+    });
+  }
+
+  /**
+   * SO-02: Flip 2D View Horizontally.
+   * @param view The scan view.
+   * @param flipped Whether to enable horizontal flip.
+   */
+  async flipHorizontally(view: ScanView, flipped: boolean): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.scan_orientation, ScanOrientationActions.so02, {
+      Version: "0.0.1",
+      View: view,
+      Flipped: flipped
+    })
+  }
+
+  /**
+   * SO-03: Flip 2D View Vertically.
+   * @param view The scan view.
+   * @param flipped Whether to enable vertical flip.
+   */
+  async flipVertically(view: ScanView, flipped: boolean): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.scan_orientation, ScanOrientationActions.so03, {
+      Version: "0.0.1",
+      View: view,
+      Flipped: flipped
+    });
+  }
+
+  /**
+   * SO-04: Invert Volume Rendering
+   * @param sagittal If the Sagittal axis is inverted.
+   * @param coronal If the Coronal axis is inverted.
+   * @param transverse If the Transverse axis is inverted.
+   */
+  async invertTransform(sagittal: boolean, coronal: boolean, transverse: boolean): Promise<void> {
+    // TODO: Replace so_04 with action type constant
+    await this.sendPayload(FrontEndInterfaces.scan_orientation, 'so_04', {
+      Version: "0.0.1",
+      InvertedSagittal: sagittal,
+      InvertedCoronal: coronal,
+      InvertedTransverse: transverse
+    });
+  }
+
+  async viewSelection(action: ViewSelectionActions) {
+    await this.sendPayload(FrontEndInterfaces.view_selection, action, emptyPayload);
+  }
+
+  async sliderHandler(action: SlidersActions, value: number) {
+    if (unref(transactionStarted)) return;
+    await this.slider(action, value);
+  }
+
+  async scanMovementHandler(action: ScanMovementActions, value: number) {
+    if (unref(transactionStarted)) return;
+    await this.scanMovement(action, value);
+  }
+
+  async layouts(action: LayoutActions) {
+    if (action !== LayoutActions.lo01) previousLayout.value = action;
+    await this.sendPayload(FrontEndInterfaces.layout, action, emptyPayload);
+  }
+
+  async setPreset(action: PresetsActions, preset: any) {
+    await this.sendPayload(FrontEndInterfaces.presets, action, preset);
+    if (action === PresetsActions.pr02) {
+      currentColourPreset.value = preset;
+    }
+  }
+
+  /**
+   * NC-01: Set Navigation Cube Co-ordinates and Size.
+   * @param anchorPoint The anchor point on the screen.
+   * @param x The x-axis offset.
+   * @param y The y-axis offset.
+   * @param width The navigation cube width.
+   * @param height The navigation cube height.
+   */
+  async setNavCubePositionSize(anchorPoint: AnchorPoint, x: number, y: number, width: number, height: number): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.navigation_cube, NavigationCubeActions.nc01, {
+      Version: '0.0.1',
+      AnchorPoint: anchorPoint,
+      Position: { Version: '0.0.1', X: x, Y: y },
+      Size: { Version: '0.0.1', X: width, Y: height }
+    });
+  }
+
+  /**
+   * NC-02: Set Navigation Cube Visibility.
+   * @param visibility If the navigation cube is visible.
+   */
+  async setNavCubeVisibility(visibility: boolean): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.navigation_cube, NavigationCubeActions.nc02, {
+      Version: "0.0.1",
+      Value: visibility,
+    });
+  }
+
+  /**
+   * NC-03: Set Navigation Cube Interactivity.
+   * @param interactivity If the navigation cube is interactive.
+   */
+  async setNavCubeInteractivity(interactivity: boolean): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.navigation_cube, NavigationCubeActions.nc03, {
+      Version: '0.0.1',
+      Value: interactivity
+    });
+  }
+
+  /**
+   * NC-04: Set Navigation Cube Perspective
+   * @param perspective If perspective shift is removed.
+   */
+  async setNavCubePerspective(perspective: boolean): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.navigation_cube, NavigationCubeActions.nc04, {
+      Version: '0.0.1',
+      Value: perspective
+    });
+  }
+
+  /**
+   * NC-05: Set Navigation Cube Colour and Opacity.
+   * All values must be floats between 0 and 255.
+   * @param r Red channel.
+   * @param g Green channel.
+   * @param b Blue channel.
+   * @param a Alpha channel.
+   */
+  async setNavCubeColourOpacity(r: number, g: number, b: number, a: number): Promise<void> {
+    // TODO: Replace nc_05 with action type constant
+    await this.sendPayload(FrontEndInterfaces.navigation_cube, 'nc_05', {
+      Version: '0.0.1',
+      R: clamp(r / 255, 0, 1),
+      G: clamp(g / 255, 0, 1),
+      B: clamp(b / 255, 0, 1),
+      A: clamp(a / 255, 0, 1)
+    });
+  }
+
+  /**
+   * NC-07: Set Navigation Cube Highlight Colour and Opacity.
+   * All values must be floats between 0 and 255.
+   * @param r Red channel.
+   * @param g Green channel.
+   * @param b Blue channel.
+   * @param a Alpha channel.
+   */
+  async setNavCubeHighlightColourOpacity(r: number, g: number, b: number, a: number): Promise<void> {
+    // TODO: Replace nc_07 with action type constant
+    await this.sendPayload(FrontEndInterfaces.navigation_cube, 'nc_07', {
+      Version: '0.0.1',
+      R: clamp(r / 255, 0, 1),
+      G: clamp(g / 255, 0, 1),
+      B: clamp(b / 255, 0, 1),
+      A: clamp(a / 255, 0, 1)
+    });
+  }
+
+  /**
+   * SM-13: Pan the selected view to the left.
+   * @param view The view.
+   * @param value The movement in mm.
+   */
+  async panLeft(view: ScanView, value: number): Promise<void> {
+    // TODO: Replace sm_13 with action type constant
+    await this.sendPayload(FrontEndInterfaces.scan_movement, "sm_13", {
+      Version: "0.0.1",
+      View: view,
+      Movement: value,
+    });
+  }
+
+  /**
+   * SM-14: Pan the selected view to the right.
+   * @param view The view.
+   * @param value The movement in mm.
+   */
+  async panRight(view: ScanView, value: number): Promise<void> {
+    // TODO: Replace sm_14 with action type constant
+    await this.sendPayload(FrontEndInterfaces.scan_movement, "sm_14", {
+      Version: "0.0.1",
+      View: view,
+      Movement: value,
+    });
+  }
+
+  /**
+   * SM-15: Pan the selected view upwards.
+   * @param view The view.
+   * @param value The movement in mm.
+   */
+  async panUp(view: ScanView, value: number): Promise<void> {
+    // TODO: Replace sm_15 with action type constant
+    await this.sendPayload(FrontEndInterfaces.scan_movement, "sm_15", {
+      Version: "0.0.1",
+      View: view,
+      Movement: value,
+    });
+  }
+
+  /**
+   * SM-16: Pan the selected view downwards.
+   * @param view The view.
+   * @param value The movement in mm.
+   */
+  async panDown(view: ScanView, value: number): Promise<void> {
+    // TODO: Replace sm_16 with action type constant
+    await this.sendPayload(FrontEndInterfaces.scan_movement, "sm_16", {
+      Version: "0.0.1",
+      View: view,
+      Movement: value,
+    });
+  }
+
+  /**
+   * SM-17: Zoom In.
+   * @param view The view.
+   * @param value The amount to zoom in.
+   */
+  async zoomIn(view: ScanView, value: number): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.scan_movement, "sm_17", {
+      Version: "0.0.1",
+      View: view,
+      Movement: value
+    });
+  }
+
+  /**
+   * SM-18: Zoom out.
+   * @param view The view.
+   * @param value The amount to zoom out.
+   */
+  async zoomOut(view: ScanView, value: number): Promise<void> {
+    await this.sendPayload(FrontEndInterfaces.scan_movement, "sm_18", {
+      Version: "0.0.1",
+      View: view,
+      Movement: value
+    });
+  }
+
+  /**
+   * IN-01, IN-02: Enable/Disable Unity input interactions.
+   * @param isHovering If the inputs should be enabled.
+   */
+  async hoverOverCanvas(isHovering: boolean) {
+    await this.sendPayload(FrontEndInterfaces.interactivity, InteractivityActions.in01, {
+      Version: "0.0.1",
+      Value: isHovering,
+    });
+    await this.sendPayload(FrontEndInterfaces.interactivity, InteractivityActions.in02, {
+      Version: "0.0.1",
+      Value: isHovering,
+    });
+  }
+
+  private async scanMovement(action: ScanMovementActions, value: number) {
+    await this.sendPayload(FrontEndInterfaces.scan_movement, action, {
+      Version: "0.0.1",
+      Value: toNumber(value),
+    });
+  }
+
+  private async slider(action: SlidersActions, value: number) {
+    await this.sendPayload(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: toNumber(value),
+    });
+  }
+
+  async sendPayload(iface: string, action: string, message: any): Promise<void> {
+    await executePayload({
+      Version: "0.0.1",
+      Interface: iface as any,
+      Action: action as any,
+      Message: JSON.stringify(message),
+    });
+  }
+
+  private async onPayload(payload: FrontEndPayload): Promise<void> {
+    await this.interfaceCallbacks.call(payload.Interface, payload.Message, payload.Action);
+    await this.actionCallbacks.call(payload.Action, payload.Message);
+  }
+}