@3cr/viewer-browser 0.0.53 → 0.0.55

package/src/components/sliders/DoubleSliderSelector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, defineEmits, ref, unref, watch} from 'vue';
+import { computed, defineEmits, ref, unref, watch } from "vue";
 
 export interface Props {
   value: Array<number>;
@@ -12,7 +12,7 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  value: () => ([0, 0]),
+  value: () => [0, 0],
   loading: false,
   label: "Test",
   lower: 0,
@@ -22,38 +22,42 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  'update:value': [Array<number>];
+  "update:value": [Array<number>];
 }>();
 
-const prevValue = ref<Array<number>>([])
-const showThumb = ref<"always" | boolean>(false)
-const showThumbTimeout = ref<number>(0)
+const prevValue = ref<Array<number>>([]);
+const showThumb = ref<"always" | boolean>(false);
+const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
 const sliderValue = computed({
   get() {
-    return props.value
+    return props.value;
   },
   set(value: Array<number>) {
-    emit('update:value', value);
-  }
-})
-
-watch(sliderValue, async (currentValue: Array<number>) => {
-  if (JSON.stringify(unref(prevValue)) !== JSON.stringify(currentValue)) {
-    clearTimeout(unref(showThumbTimeout));
-    showThumb.value = 'always';
-    showThumbTimeout.value = setTimeout(() => {
-      showThumb.value = true;
-    }, 1000);
-  }
-  prevValue.value = currentValue;
-}, {deep: true})
-
+    emit("update:value", value);
+  },
+});
 
+watch(
+  sliderValue,
+  async (currentValue: Array<number>) => {
+    if (JSON.stringify(unref(prevValue)) !== JSON.stringify(currentValue)) {
+      clearTimeout(unref(showThumbTimeout));
+      showThumb.value = "always";
+      showThumbTimeout.value = setTimeout(() => {
+        showThumb.value = true;
+      }, 1000);
+    }
+    prevValue.value = currentValue;
+  },
+  { deep: true }
+);
 </script>
 
 <template>
   <div class="double-slider-selector">
-    <v-card-subtitle class="pb-0 pt-1 text-caption">{{ label }}</v-card-subtitle>
+    <v-card-subtitle class="pb-0 pt-1 text-caption">{{
+      label
+    }}</v-card-subtitle>
     <v-card-actions class="px-2 pb-0">
       <v-text-field
         v-model="sliderValue[0]"
@@ -95,7 +99,9 @@ watch(sliderValue, async (currentValue: Array<number>) => {
   .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
   > .v-input__control
   > .v-input__slot,
-.double-slider-selector .v-text-field.v-text-field--enclosed .v-text-field__details {
+.double-slider-selector
+  .v-text-field.v-text-field--enclosed
+  .v-text-field__details {
   padding: 0px 8px !important;
 }
 

package/src/components/sliders/VerticalSliderSelector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, defineEmits, ref, unref, watch} from 'vue';
+import { computed, defineEmits, ref, unref, watch } from "vue";
 
 export interface Props {
   value: number;
@@ -22,32 +22,35 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  'update:value': [number];
+  "update:value": [number];
 }>();
 
-const prevValue = ref<number>(0)
-const showThumb = ref<"always" | boolean>(true)
-const showThumbTimeout = ref<number>(0)
+const prevValue = ref<number>(0);
+const showThumb = ref<"always" | boolean>(true);
+const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
 const sliderValue = computed({
   get() {
-    return props.value
+    return props.value;
   },
   set(value: number) {
-    emit('update:value', value);
-  }
-})
-
-watch(sliderValue, async (currentValue: number) => {
-  if (JSON.stringify(unref(prevValue)) !== JSON.stringify(currentValue)) {
-    clearTimeout(unref(showThumbTimeout));
-    showThumb.value = 'always';
-    showThumbTimeout.value = setTimeout(() => {
-      showThumb.value = true;
-    }, 1000);
-  }
-  prevValue.value = currentValue;
-}, {deep: true})
+    emit("update:value", value);
+  },
+});
 
+watch(
+  sliderValue,
+  async (currentValue: number) => {
+    if (JSON.stringify(unref(prevValue)) !== JSON.stringify(currentValue)) {
+      clearTimeout(unref(showThumbTimeout));
+      showThumb.value = "always";
+      showThumbTimeout.value = setTimeout(() => {
+        showThumb.value = true;
+      }, 1000);
+    }
+    prevValue.value = currentValue;
+  },
+  { deep: true }
+);
 </script>
 
 <template>
@@ -76,7 +79,8 @@ watch(sliderValue, async (currentValue: number) => {
 <style lang="scss">
 .vertical-slider-selector .v-slider-thumb__label {
   width: 40px !important;
-  transform: translateY(-0px) translateX(-32px) translateX(-100%) rotate(-180deg) !important;
+  transform: translateY(-0px) translateX(-32px) translateX(-100%)
+    rotate(-180deg) !important;
   & div {
     transform: rotate(180deg);
   }

package/src/components/sliders/__tests__/double-slider-selector.spec.ts

@@ -0,0 +1,72 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { checkComponentProps, mountVuetify } from "~/helper";
+import DoubleSliderSelector from "@/components/sliders/DoubleSliderSelector.vue";
+import { flushPromises } from "@vue/test-utils";
+
+describe("DoubleSliderSelector.vue", () => {
+  let wrapper = mountVuetify(DoubleSliderSelector, {
+    value: [0, 0],
+  });
+
+  beforeEach(() => {
+    wrapper = mountVuetify(DoubleSliderSelector, {
+      value: [0, 0],
+    });
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should inflate component", () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("should change from props", async () => {
+    await wrapper.setProps({
+      value: [1, 1],
+    });
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual([1, 1]);
+  });
+
+  it("should timeout the thumb", async () => {
+    await wrapper.setProps({
+      value: [1, 1],
+    });
+
+    const slider = wrapper.findComponent(".v-range-slider");
+
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual([1, 1]);
+    await wrapper.setProps({
+      value: [1, 1],
+    });
+
+    vi.advanceTimersByTime(999);
+    checkComponentProps(slider, "thumbLabel", "always");
+    // expect(slider.props()["thumbLabel"] as any).toBe("always");
+    vi.advanceTimersByTime(1);
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual([1, 1]);
+    checkComponentProps(slider, "thumbLabel", true);
+  });
+
+  it("should set slider value", async () => {
+    const slider = wrapper.findComponent(".v-range-slider");
+    await slider.setValue([1, 2]);
+  });
+
+  it("should set min text", async () => {
+    const slider = wrapper.findAllComponents(".v-text-field");
+
+    await slider[0].setValue(10);
+  });
+  it("should set max text", async () => {
+    const slider = wrapper.findAllComponents(".v-text-field");
+
+    await slider[1].setValue(20);
+  });
+});

package/src/components/sliders/__tests__/vertical-slider-selector.spec.ts

@@ -0,0 +1,61 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { checkComponentProps, mountVuetify } from "~/helper";
+import { flushPromises } from "@vue/test-utils";
+import VerticalSliderSelector from "@/components/sliders/VerticalSliderSelector.vue";
+
+describe("VerticalSliderSelector.vue", () => {
+  let wrapper = mountVuetify(VerticalSliderSelector, {
+    value: 0,
+  });
+
+  beforeEach(() => {
+    wrapper = mountVuetify(VerticalSliderSelector, {
+      value: 0,
+    });
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should inflate component", () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("should change from props", async () => {
+    await wrapper.setProps({
+      value: 1,
+    });
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+  });
+
+  it("should timeout the thumb", async () => {
+    await wrapper.setProps({
+      value: 1,
+    });
+
+    const slider = wrapper.findComponent(".v-slider");
+
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+    await wrapper.setProps({
+      value: 1,
+    });
+
+    vi.advanceTimersByTime(999);
+    checkComponentProps(slider, "thumbLabel", "always");
+    // expect(slider.props()["thumbLabel"] as any).toBe("always");
+    vi.advanceTimersByTime(1);
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+    checkComponentProps(slider, "thumbLabel", true);
+  });
+
+  it("should set slider value", async () => {
+    const slider = wrapper.findComponent(".v-slider");
+    await slider.setValue(1);
+  });
+});

package/src/helpers/__tests__/layout-overlay-style.spec.ts

@@ -0,0 +1,288 @@
+import { describe, expect, it } from "vitest";
+import { generateDivStyleForLayout } from "@/helpers/layoutOverlayStyle";
+import { AnchorPoint, ScanView } from "@3cr/types-ts";
+import { flushPromises } from "@vue/test-utils";
+import { spyOn } from "@vitest/spy";
+
+describe("generateDivStyleForLayout", () => {
+  it("should generateDivStyleForLayout AnchorPoint.TOP", () => {
+    expect(
+      generateDivStyleForLayout({
+        Anchor: AnchorPoint.TOP,
+        ActiveView: true,
+        AspectRatio: 0,
+        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",
+      })
+    ).toStrictEqual({
+      height: "calc(100% - 2px)",
+      left: "50%",
+      top: "0px",
+      transform: "translateX(-50%)",
+      width: "calc(100% - 0px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AnchorPoint.BOTTOM", () => {
+    expect(
+      generateDivStyleForLayout({
+        Anchor: AnchorPoint.BOTTOM,
+        ActiveView: true,
+        AspectRatio: 0,
+        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",
+      })
+    ).toStrictEqual({
+      height: "calc(100% - 2px)",
+      left: "50%",
+      bottom: "4px",
+      transform: "translateX(-50%)",
+      width: "calc(100% - 0px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AnchorPoint.LEFT", () => {
+    expect(
+      generateDivStyleForLayout({
+        Anchor: AnchorPoint.LEFT,
+        ActiveView: true,
+        AspectRatio: 0,
+        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",
+      })
+    ).toStrictEqual({
+      height: "calc(100% - 2px)",
+      left: "0px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "calc(100% - 0px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AnchorPoint.RIGHT", () => {
+    expect(
+      generateDivStyleForLayout({
+        Anchor: AnchorPoint.RIGHT,
+        ActiveView: true,
+        AspectRatio: 0,
+        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",
+      })
+    ).toStrictEqual({
+      height: "calc(100% - 2px)",
+      right: "0px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "calc(100% - 0px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AnchorPoint.TOP_LEFT", () => {
+    expect(
+      generateDivStyleForLayout({
+        Anchor: AnchorPoint.TOP_LEFT,
+        ActiveView: true,
+        AspectRatio: 0,
+        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",
+      })
+    ).toStrictEqual({
+      "border-top-left-radius": "0px",
+      height: "calc(100% - 2px)",
+      left: "0px",
+      top: "0px",
+      width: "calc(100% - 0px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AnchorPoint.CENTER", () => {
+    expect(
+      generateDivStyleForLayout({
+        Anchor: AnchorPoint.CENTER,
+        ActiveView: true,
+        AspectRatio: 0,
+        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",
+      })
+    ).toStrictEqual({
+      "border-bottom-left-radius": "0px",
+      "border-bottom-right-radius": "0px",
+      "border-top-left-radius": "0px",
+      "border-top-right-radius": "0px",
+      height: "calc(100% -  2px -  2px)",
+      left: "0px",
+      top: "0px",
+      width: "calc(100% - 0px - 0px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AspectRatio === 1", async () => {
+    spyOn(document, "getElementById").mockReturnValue({
+      id: "unity-canvas",
+      offsetWidth: 1,
+      offsetHeight: 2,
+    } as HTMLElement);
+    await flushPromises();
+    expect(
+      generateDivStyleForLayout({
+        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",
+      })
+    ).toStrictEqual({
+      "border-bottom-left-radius": "0px",
+      "border-bottom-right-radius": "0px",
+      "border-top-left-radius": "0px",
+      "border-top-right-radius": "0px",
+      height: "calc(1px)",
+      left: "0px",
+      top: "0px",
+      width: "calc(2px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AspectRatio === 1", async () => {
+    spyOn(document, "getElementById").mockReturnValue(null);
+    await flushPromises();
+    expect(
+      generateDivStyleForLayout({
+        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",
+      })
+    ).toStrictEqual({
+      "border-bottom-left-radius": "0px",
+      "border-bottom-right-radius": "0px",
+      "border-top-left-radius": "0px",
+      "border-top-right-radius": "0px",
+      height: "calc(0px)",
+      left: "0px",
+      top: "0px",
+      width: "calc(0px)",
+    });
+  });
+
+  it("should generateDivStyleForLayout AspectRatio === 1 | MaxSize === 0", async () => {
+    expect(
+      generateDivStyleForLayout({
+        Anchor: AnchorPoint.CENTER,
+        ActiveView: true,
+        AspectRatio: 1,
+        MaxSize: {
+          Version: "1.0.0",
+          X: 0,
+          Y: 0,
+        },
+        DefaultView: ScanView.Coronal,
+        Priority: 1,
+        Offset: {
+          Version: "1.0.0",
+          X: 1,
+          Y: 1,
+        },
+        Version: "1.0.0",
+      })
+    ).toStrictEqual({
+      "border-bottom-left-radius": "0px",
+      "border-bottom-right-radius": "0px",
+      "border-top-left-radius": "0px",
+      "border-top-right-radius": "0px",
+      height: "calc(0% -  2px -  2px)",
+      left: "0px",
+      top: "0px",
+      width: "calc(0% - 0px - 0px)",
+    });
+  });
+});

package/src/helpers/__tests__/model-helper.spec.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from "vitest";
+import { AnchorPoint, ScanView, ViewInteractiveMode } from "@3cr/types-ts";
+import {
+  inflateInitialScanState,
+  inflateScanState,
+} from "@/helpers/modelHelper";
+
+describe("inflateScanState", () => {
+  it("should inflateScanState", () => {
+    expect(inflateScanState()).toStrictEqual({
+      Version: "1.0.0",
+      Display: {
+        Version: "1.0.0",
+        Brightness: 50,
+        Contrast: 50,
+        Opacity: 50,
+        WindowLower: 0,
+        WindowUpper: 100,
+        ThresholdLower: 0,
+        ThresholdUpper: 100,
+      },
+      CurrentView: ScanView.Volume,
+      Slice: {
+        Version: "1.0.0",
+        TransverseLower: 0,
+        TransverseUpper: 0,
+        SagittalLower: 0,
+        SagittalUpper: 0,
+        CoronalLower: 0,
+        CoronalUpper: 0,
+      },
+      InteractionSettings: {
+        Version: "1.0.0",
+        PanSensivitity: 0,
+        ZoomSensitivity: 0,
+        RotateSensitivity: 0,
+        CameraRotateSensitivity: 0,
+        KeyboardEnabled: true,
+        MouseEnabled: true,
+        InteractionMode: ViewInteractiveMode.STATIC,
+      },
+      Orientations: {
+        Version: "1.0.0",
+        Transverse: {
+          Version: "1.0.0",
+          View: ScanView.Transverse,
+          VFlip: false,
+          HFlip: false,
+          Rotation: 0,
+          Slice: 0,
+        },
+        Sagittal: {
+          Version: "1.0.0",
+          View: ScanView.Transverse,
+          VFlip: false,
+          HFlip: false,
+          Rotation: 0,
+          Slice: 0,
+        },
+        Coronal: {
+          Version: "1.0.0",
+          View: ScanView.Transverse,
+          VFlip: false,
+          HFlip: false,
+          Rotation: 0,
+          Slice: 0,
+        },
+      },
+      Layout: {
+        Version: "1.0.0",
+        SwitchOnViewChange: false,
+        PositionData: [],
+      },
+      NavigationCube: {
+        Version: "1.0.0",
+        Transform: {
+          Version: "1.0.0",
+          AnchorPoint: AnchorPoint.DEFAULT,
+          Position: {
+            Version: "1.0.0",
+            X: 0,
+            Y: 0,
+          },
+          Size: {
+            Version: "1.0.0",
+            X: 0,
+            Y: 0,
+          },
+        },
+        Visibility: {
+          Version: "1.0.0",
+          Value: false,
+        },
+        Interactivity: {
+          Version: "1.0.0",
+          Value: false,
+        },
+      },
+    });
+  });
+});
+
+describe("inflateInitialScanState", () => {
+  it("should inflateInitialScanState", () => {
+    expect(inflateInitialScanState()).toStrictEqual({
+      Version: "1.0.0",
+      XSlices: 0,
+      YSlices: 0,
+      ZSlices: 0,
+      Modality: "CT",
+      HuUpper: 0,
+      HuLower: 0,
+      DefaultDisplaySettings: inflateScanState(),
+      GreyscalePresets: [],
+      ColourPresets: [],
+    });
+  });
+});