@3cr/viewer-browser 0.0.86 → 0.0.93

package/src/components/modal/__tests__/mftp-webgl-3dr-modal.spec.ts

@@ -12,7 +12,6 @@ import {
   InteractivityActions,
   NotificationPayload,
   PositionData,
-  PresetsActions,
   ScanMovementActions,
   ScanStateActions,
   ScanView,
@@ -22,12 +21,17 @@ import { flushPromises } from "@vue/test-utils";
 import { PayloadHandler } from "@/dataLayer/payloadHandler";
 import { spyOn } from "@vitest/spy";
 import {
+  cSlider,
   currentGreyscalePreset,
   isLayout1x3,
   isLayout2x2,
   setScanState,
+  sSlider,
+  transactionStarted,
+  tSlider,
 } from "@/dataLayer/scanState";
 import { unref } from "vue";
+import { isDemo } from "@/demo/options";
 
 vi.mock("@3cr/sdk-browser", async (importOriginal) => {
   const mod = (await importOriginal()) as object;
@@ -48,12 +52,10 @@ vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
     }),
   };
 });
-
+let spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
+  (interfaceType: string, actionType: string, message: any) => Promise.resolve()
+);
 describe("MftpWebGL3DRModal.vue", () => {
-  let spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
-    (interfaceType: string, actionType: string, message: any) =>
-      Promise.resolve()
-  );
   let wrapper = shallowMountVuetify(
     MftpWebGL3DRModal,
     {}
@@ -61,6 +63,7 @@ describe("MftpWebGL3DRModal.vue", () => {
   );
 
   beforeEach(() => {
+    transactionStarted.value = false;
     spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
       (interfaceType: string, actionType: string, message: any) =>
         Promise.resolve()
@@ -77,6 +80,7 @@ describe("MftpWebGL3DRModal.vue", () => {
 
   afterEach(() => {
     vi.useRealTimers();
+    isDemo.value = false;
   });
 
   it("inflates", () => {
@@ -84,106 +88,85 @@ describe("MftpWebGL3DRModal.vue", () => {
   });
   describe("watchers", () => {
     it("scanState.value.Display.Brightness", async () => {
-      await testWatcherForDisplay(wrapper, "Brightness", SlidersActions.sl01);
+      await testWatcherForDisplay("Brightness", SlidersActions.sl01);
     });
 
     it("scanState.value.Display.Contrast", async () => {
-      await testWatcherForDisplay(wrapper, "Contrast", SlidersActions.sl02);
+      await testWatcherForDisplay("Contrast", SlidersActions.sl02);
     });
 
     it("scanState.value.Display.Opacity", async () => {
-      await testWatcherForDisplay(wrapper, "Opacity", SlidersActions.sl03);
+      await testWatcherForDisplay("Opacity", SlidersActions.sl03);
     });
 
     it("scanState.value.Display.WindowLower", async () => {
-      await testWatcherForDisplay(wrapper, "WindowLower", SlidersActions.sl04);
+      await testWatcherForDisplay("WindowLower", SlidersActions.sl04);
     });
 
     it("scanState.value.Display.WindowUpper", async () => {
-      await testWatcherForDisplay(wrapper, "WindowUpper", SlidersActions.sl05);
+      await testWatcherForDisplay("WindowUpper", SlidersActions.sl05);
     });
 
     it("scanState.value.Display.ThresholdLower", async () => {
-      await testWatcherForDisplay(
-        wrapper,
-        "ThresholdLower",
-        SlidersActions.sl06
-      );
+      await testWatcherForDisplay("ThresholdLower", SlidersActions.sl06);
     });
 
     it("scanState.value.Display.ThresholdUpper", async () => {
-      await testWatcherForDisplay(
-        wrapper,
-        "ThresholdUpper",
-        SlidersActions.sl07
-      );
+      await testWatcherForDisplay("ThresholdUpper", SlidersActions.sl07);
     });
 
     it("scanState.value.Slice.TransverseLower", async () => {
-      await testWatcherForSlice(
-        wrapper,
-        "TransverseLower",
-        SlidersActions.sl08
-      );
+      await testWatcherForSlice("TransverseLower", SlidersActions.sl08);
     });
 
     it("scanState.value.Orientations.Transverse.Slice", async () => {
-      await testWatcherForOrientation(
-        wrapper,
-        "Transverse",
-        SlidersActions.sl09
-      );
+      await testWatcherForOrientation("Transverse", SlidersActions.sl09);
     });
 
     it("scanState.value.Slice.TransverseUpper", async () => {
-      await testWatcherForSlice(
-        wrapper,
-        "TransverseUpper",
-        SlidersActions.sl10
-      );
+      await testWatcherForSlice("TransverseUpper", SlidersActions.sl10);
     });
 
     it("scanState.value.Slice.SagittalLower", async () => {
-      await testWatcherForSlice(wrapper, "SagittalLower", SlidersActions.sl11);
+      await testWatcherForSlice("SagittalLower", SlidersActions.sl11);
     });
 
     it("scanState.value.Orientations.Sagittal.Slice", async () => {
-      await testWatcherForOrientation(wrapper, "Sagittal", SlidersActions.sl12);
+      await testWatcherForOrientation("Sagittal", SlidersActions.sl12);
     });
 
     it("scanState.value.Slice.SagittalUpper", async () => {
-      await testWatcherForSlice(wrapper, "SagittalUpper", SlidersActions.sl13);
+      await testWatcherForSlice("SagittalUpper", SlidersActions.sl13);
     });
 
     it("scanState.value.Slice.CoronalLower", async () => {
-      await testWatcherForSlice(wrapper, "CoronalLower", SlidersActions.sl14);
+      await testWatcherForSlice("CoronalLower", SlidersActions.sl14);
     });
 
     it("scanState.value.Orientations.Coronal.Slice", async () => {
-      await testWatcherForOrientation(wrapper, "Coronal", SlidersActions.sl15);
+      await testWatcherForOrientation("Coronal", SlidersActions.sl15);
     });
 
     it("scanState.value.Slice.CoronalUpper", async () => {
-      await testWatcherForSlice(wrapper, "CoronalUpper", SlidersActions.sl16);
+      await testWatcherForSlice("CoronalUpper", SlidersActions.sl16);
     });
 
     it("scanState.value.Slice.CoronalUpper transaction disabled", async () => {
-      wrapper.vm.transactionStarted = true;
-      await testWatcherForSlice(wrapper, "CoronalUpper", SlidersActions.sl16);
+      transactionStarted.value = true;
+      await testWatcherForSlice("CoronalUpper", SlidersActions.sl16, true);
     });
 
     it("scanState.value.InteractionSettings.PanSensivitity transaction disabled", async () => {
-      wrapper.vm.transactionStarted = true;
+      transactionStarted.value = true;
       await testWatcherForInteractionSettings(
-        wrapper,
-        "PanSensivitity",
-        ScanMovementActions.sm05
+        "PanSensivitity1",
+        ScanMovementActions.sm05,
+        true
       );
     });
 
     it("scanState.value.InteractionSettings.PanSensivitity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "PanSensivitity",
         ScanMovementActions.sm05
       );
@@ -191,7 +174,6 @@ describe("MftpWebGL3DRModal.vue", () => {
 
     it("scanState.value.InteractionSettings.ZoomSensitivity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "ZoomSensitivity",
         ScanMovementActions.sm08
       );
@@ -199,7 +181,6 @@ describe("MftpWebGL3DRModal.vue", () => {
 
     it("scanState.value.InteractionSettings.RotateSensitivity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "RotateSensitivity",
         ScanMovementActions.sm10
       );
@@ -207,9 +188,8 @@ describe("MftpWebGL3DRModal.vue", () => {
 
     it("scanState.value.InteractionSettings.CameraRotateSensitivity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "CameraRotateSensitivity",
-        ScanMovementActions.sm10
+        ScanMovementActions.sm12
       );
     });
   });
@@ -266,15 +246,15 @@ describe("MftpWebGL3DRModal.vue", () => {
   });
 
   it("tSlider should be set", () => {
-    expect(wrapper.vm.tSlider).toStrictEqual([0, 0]);
+    expect(unref(tSlider)).toStrictEqual([0, 0]);
   });
 
   it("sSlider should be set", () => {
-    expect(wrapper.vm.sSlider).toStrictEqual([0, 0]);
+    expect(unref(sSlider)).toStrictEqual([0, 0]);
   });
 
   it("cSlider should be set", () => {
-    expect(wrapper.vm.cSlider).toStrictEqual([0, 0]);
+    expect(unref(cSlider)).toStrictEqual([0, 0]);
   });
 
   it("windowSlider should  set", async () => {
@@ -402,12 +382,6 @@ describe("MftpWebGL3DRModal.vue", () => {
     expect(unref(isLayout2x2)).toBeFalsy();
   });
 
-  it("should snap", async () => {
-    await wrapper.vm.snap();
-
-    expect(wrapper.emitted()["snap"]).toStrictEqual([[]]);
-  });
-
   it("should getCurrentGreyscalePreset", async () => {
     const initial = inflateInitialScanState();
 
@@ -431,6 +405,12 @@ describe("MftpWebGL3DRModal.vue", () => {
     expect(unref(currentGreyscalePreset)).toBe("testing");
   });
 
+  it("should isDemo execute option", async () => {
+    isDemo.value = true;
+
+    wrapper.vm.closeModal();
+  });
+
   it("should getCurrentGreyscalePreset", async () => {
     const initial = inflateInitialScanState();
 
@@ -501,53 +481,6 @@ describe("MftpWebGL3DRModal.vue", () => {
     );
   });
 
-  it("should layouts", async () => {
-    // vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-    //   (it: string, a: string, m: any) => {
-    //     expect(it).toBe(FrontEndInterfaces.layout);
-    //     expect(a).toBe("lo_02");
-    //     expect(m).toStrictEqual({
-    //       Version: "0.0.1",
-    //     });
-    //     return Promise.resolve();
-    //   }
-    // );
-
-    await wrapper.vm.layouts("lo_02");
-  });
-
-  it("should setPreset", async () => {
-    const action = PresetsActions.pr01;
-    const preset = {};
-
-    // vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-    //   (it: string, a: string, m: any) => {
-    //     expect(it).toBe(FrontEndInterfaces.presets);
-    //     expect(a).toBe(action);
-    //     expect(m).toStrictEqual(preset);
-    //     return Promise.resolve();
-    //   }
-    // );
-
-    await wrapper.vm.setPreset(action, preset);
-  });
-
-  it("should setPreset pr02", async () => {
-    const action = PresetsActions.pr02;
-    const preset = {};
-
-    // vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-    //   (it: string, a: string, m: any) => {
-    //     expect(it).toBe(FrontEndInterfaces.presets);
-    //     expect(a).toBe(action);
-    //     expect(m).toStrictEqual(preset);
-    //     return Promise.resolve();
-    //   }
-    // );
-
-    await wrapper.vm.setPreset(action, preset);
-  });
-
   it("should getCurrentGreyscalePreset", async () => {
     expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
@@ -639,83 +572,102 @@ describe("MftpWebGL3DRModal.vue", () => {
 });
 
 async function testWatcherForDisplay(
-  wrapper: any,
   key: string,
-  action: SlidersActions
+  action: SlidersActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.Display as any)[key] = 60;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.sliders, action, {
-    Version: "0.0.1",
-    Value: (scanState.Display as any)[key],
-  });
-  setScanState(JSON.stringify(scanState));
+  await setScanState(JSON.stringify(scanState));
 
   await flushPromises();
+  if (not) {
+    expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: (scanState.Display as any)[key],
+    });
+  } else {
+    expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: (scanState.Display as any)[key],
+    });
+  }
 }
 
 async function testWatcherForSlice(
-  wrapper: any,
   key: string,
-  action: SlidersActions
+  action: SlidersActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.Slice as any)[key] = 100;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.sliders, action, {
-    Version: "0.0.1",
-    Value: (scanState.Slice as any)[key],
-  });
   setScanState(JSON.stringify(scanState));
 
   await flushPromises();
+
+  if (not) {
+    expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: (scanState.Slice as any)[key],
+    });
+  } else {
+    expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: (scanState.Slice as any)[key],
+    });
+  }
 }
 
 async function testWatcherForOrientation(
-  wrapper: any,
   key: string,
-  action: SlidersActions
+  action: SlidersActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.Orientations as any)[key].Slice = 100;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.sliders, action, {
-    Version: "0.0.1",
-    Value: (scanState.Orientations as any)[key].Slice,
-  });
   setScanState(JSON.stringify(scanState));
 
   await flushPromises();
+  if (not) {
+    expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: (scanState.Orientations as any)[key].Slice,
+    });
+  } else {
+    expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      Version: "0.0.1",
+      Value: (scanState.Orientations as any)[key].Slice,
+    });
+  }
 }
 
 async function testWatcherForInteractionSettings(
-  wrapper: any,
   key: string,
-  action: ScanMovementActions
+  action: ScanMovementActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.InteractionSettings as any)[key] = 100;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.scan_movement, action, {
-    Version: "0.0.1",
-    Value: (scanState.InteractionSettings as any)[key],
-  });
   setScanState(JSON.stringify(scanState));
 
   await flushPromises();
-}
-
-function setupPayloadSpy(
-  wrapper: any,
-  interfaceType: FrontEndInterfaces,
-  actionType: string,
-  message: any
-) {
-  wrapper.vm.sendPayload = (it: FrontEndInterfaces, a: string, m: any) => {
-    console.log(it, a, m);
-    expect(it).toBe(interfaceType);
-    expect(a).toBe(actionType);
-    expect(m).toStrictEqual(message);
-  };
+  if (not) {
+    expect(spy).not.toHaveBeenCalledWith(
+      FrontEndInterfaces.scan_movement,
+      action,
+      {
+        Version: "0.0.1",
+        Value: (scanState.InteractionSettings as any)[key],
+      }
+    );
+  } else {
+    expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.scan_movement, action, {
+      Version: "0.0.1",
+      Value: (scanState.InteractionSettings as any)[key],
+    });
+  }
 }

package/src/dataLayer/__tests__/payload-handler.spec.ts

@@ -1,16 +1,24 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { PayloadHandler } from "@/dataLayer/payloadHandler";
-import { Ref, UnwrapRef } from "vue";
+import { emptyPayload, PayloadHandler } from "@/dataLayer/payloadHandler";
+import { Ref, unref, UnwrapRef } from "vue";
 import WebGL3DR from "@/components/WebGL3DR.vue";
 import { spyOn } from "@vitest/spy";
 import {
+  ColourPresetData,
   FrontEndInterfaces,
+  LayoutActions,
+  PresetsActions,
+  ScanMovementActions,
   ScanOrientationActions,
   ScanView,
   SlidersActions,
 } from "@3cr/types-ts";
 import { toNumber } from "@/helpers/utils";
-import { transactionStarted } from "@/dataLayer/scanState";
+import {
+  currentColourPreset,
+  previousLayout,
+  transactionStarted,
+} from "@/dataLayer/scanState";
 
 const sendPayloadFunction = vi.fn();
 const mockWebglInstance = {
@@ -27,6 +35,9 @@ describe("payloadHandler.ts", () => {
   describe("payload functions", () => {
     let instance: PayloadHandler;
     beforeEach(() => {
+      transactionStarted.value = false;
+      previousLayout.value = LayoutActions.lo01;
+      currentColourPreset.value = {} as ColourPresetData;
       vi.resetAllMocks();
       instance = new PayloadHandler(mockWebglInstance);
       console.log(instance);
@@ -94,5 +105,110 @@ describe("payloadHandler.ts", () => {
         Value: toNumber(value),
       });
     });
+
+    it("should scanMovementHandler", async () => {
+      const action = ScanMovementActions.sm05;
+      const value = 100;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.scanMovementHandler(action, value);
+
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.scan_movement,
+        action,
+        {
+          Version: "0.0.1",
+          Value: toNumber(value),
+        }
+      );
+    });
+
+    it("should not scanMovementHandler transactionStarted", async () => {
+      transactionStarted.value = true;
+      const action = ScanMovementActions.sm05;
+      const value = 100;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.scanMovementHandler(action, value);
+
+      expect(spy).not.toHaveBeenCalledWith(
+        FrontEndInterfaces.scan_movement,
+        action,
+        {
+          Version: "0.0.1",
+          Value: toNumber(value),
+        }
+      );
+    });
+
+    it("should layouts", async () => {
+      const action = LayoutActions.lo01;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+
+      await instance.layouts(action);
+
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.layout,
+        action,
+        emptyPayload
+      );
+    });
+
+    it("should set prevLayout", async () => {
+      const action = LayoutActions.lo02;
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+      expect(unref(previousLayout)).not.toBe(LayoutActions.lo02);
+
+      await instance.layouts(action);
+
+      expect(unref(previousLayout)).toBe(LayoutActions.lo02);
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.layout,
+        action,
+        emptyPayload
+      );
+    });
+
+    it("should set setPreset", async () => {
+      const action = PresetsActions.pr01;
+      const data = {
+        asd: "123",
+      };
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+      expect(unref(currentColourPreset)).not.toBe(data);
+
+      await instance.setPreset(action, data);
+
+      expect(unref(currentColourPreset)).not.toBe(data);
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.presets,
+        action,
+        data
+      );
+    });
+
+    it("should set setPreset change colour", async () => {
+      const action = PresetsActions.pr02;
+      const data = {
+        asd: "123",
+      };
+      const spy = spyOn(instance, "sendPayload");
+      expect(spy).not.toHaveBeenCalled();
+      expect(unref(currentColourPreset)).not.toBe(data);
+
+      await instance.setPreset(action, data);
+
+      expect(unref(currentColourPreset)).toStrictEqual(data);
+      expect(spy).toHaveBeenCalledWith(
+        FrontEndInterfaces.presets,
+        action,
+        data
+      );
+    });
   });
 });

package/src/dataLayer/payloadHandler.ts

@@ -2,16 +2,23 @@ import { Ref, unref, UnwrapRef } from "vue";
 import WebGL3DR from "@/components/WebGL3DR.vue";
 import {
   FrontEndInterfaces,
+  InteractivityActions,
+  LayoutActions,
+  PresetsActions,
   ScanMovementActions,
   ScanOrientationActions,
   ScanView,
   SlidersActions,
   ViewSelectionActions,
 } from "@3cr/types-ts";
-import { transactionStarted } from "@/dataLayer/scanState";
+import {
+  currentColourPreset,
+  previousLayout,
+  transactionStarted,
+} from "@/dataLayer/scanState";
 import { toNumber } from "@/helpers/utils";
 
-const emptyPayload = { Version: "1.1.0" };
+export const emptyPayload = { Version: "1.1.0" };
 
 export class PayloadHandler {
   private readonly instance: Ref<UnwrapRef<typeof WebGL3DR | null>>;
@@ -57,6 +64,36 @@ export class PayloadHandler {
     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;
+    }
+  }
+
+  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, {

package/src/dataLayer/scanState.ts

@@ -1,16 +1,15 @@
-import { computed, nextTick, ref, unref, watch, WatchSource } from "vue";
+import { computed, nextTick, ref, unref } from "vue";
 import {
   AnchorPoint,
   ColourPresetData,
   CurrentScanState,
   InitialScanState,
-  ScanMovementActions,
+  LayoutActions,
 } from "@3cr/types-ts";
 import {
   inflateInitialScanState,
   inflateScanState,
 } from "@/helpers/modelHelper";
-import { PayloadHandler } from "@/dataLayer/payloadHandler";
 
 export const currentColourPreset = ref<ColourPresetData | undefined>(undefined);
 
@@ -20,6 +19,7 @@ export const scanState = ref<CurrentScanState>(inflateScanState());
 export const initialScanState = ref<InitialScanState>(
   inflateInitialScanState()
 );
+export const previousLayout = ref<LayoutActions>(LayoutActions.lo02);
 
 export const huMinMax = ref({
   min: -999999,
@@ -169,13 +169,3 @@ export async function setInitialScanStateFromPayload(
 export function setScanState(message: string) {
   scanState.value = JSON.parse(message) as CurrentScanState;
 }
-
-export function generateWatcherForScanMovement(
-  payloadHandler: PayloadHandler,
-  sliderAction: ScanMovementActions,
-  source: WatchSource<number>
-) {
-  watch(source, async (value: number) => {
-    await payloadHandler.scanMovementHandler(sliderAction, value);
-  });
-}