@3cr/viewer-browser 0.0.161 → 0.0.194

package/src/components/sliders/DoubleSliderSelector.vue

@@ -1,9 +1,54 @@
+<template>
+  <v-row class="flex-column double-slider-selector" no-gutters>
+    <v-row no-gutters justify="start">
+      <v-col>
+        <span class="text-caption">{{ label }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="py-2" no-gutters>
+      <v-col>
+        <v-text-field
+          :model-value="sliderValue[0]"
+          @update:modelValue="onUpdate($event, sliderValue[1])"
+          density="compact"
+          hide-details
+          variant="outlined"
+          type="number"
+        />
+      </v-col>
+      <v-spacer />
+      <v-col>
+        <v-text-field
+          :model-value="sliderValue[1]"
+          @update:modelValue="onUpdate(sliderValue[0], $event)"
+          density="compact"
+          hide-details
+          variant="outlined"
+          type="number"
+        />
+      </v-col>
+    </v-row>
+    <v-row class="pb-4" no-gutters>
+      <v-range-slider
+        v-model="sliderValue"
+        :loading="loading"
+        :thumb-label="showThumb"
+        thumb-color="blue"
+        :min="min"
+        :max="max"
+        hide-details
+      />
+    </v-row>
+  </v-row>
+</template>
+
 <script setup lang="ts">
-import { computed, defineEmits, ref, unref, watch } from "vue";
+import { computed, ref, unref, watch } from "vue";
 import { toNumber } from "@vue/shared";
+import { clamp } from "@/dataLayer/clamp";
 
 export interface Props {
-  value: Array<number>;
+  value: [number, number];
   loading?: boolean;
   label?: string;
   lower?: number;
@@ -23,89 +68,39 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  "update:value": [Array<number>];
+  "update:value": [[number, number]];
 }>();
 
-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;
   },
-  set(value: Array<number>) {
-    let val = value;
-    if (val[0] > props.max) val[0] = props.max;
-    if (val[1] > props.max) val[1] = props.max;
-    if (val[0] < props.min) val[0] = props.min;
-    if (val[1] < props.min) val[1] = props.min;
-    console.log(val);
-    console.log(props);
-    emit("update:value", [val[0], val[1]]);
+  set(value: [number, number]) {
+    const val = value.map(v => clamp(v, props.min, props.max)) as [number, number];
+    emit("update:value", val);
   },
 });
-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 }
-);
 
-defineExpose({
-  sliderValue,
+watch([
+  () => sliderValue.value[0],
+  () => sliderValue.value[1]
+], () => {
+  clearTimeout(unref(showThumbTimeout));
+  showThumb.value = "always";
+  showThumbTimeout.value = setTimeout(() => {
+    showThumb.value = false;
+  }, 1000);
 });
-</script>
 
-<template>
-  <div class="double-slider-selector">
-    <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
-        :model-value="sliderValue[0]"
-        @update:modelValue="sliderValue = [toNumber($event), sliderValue[1]]"
-        density="compact"
-        class="mt-0 pt-0"
-        hide-details
-        variant="outlined"
-        type="number"
-        style="width: 44px"
-      ></v-text-field>
-      <v-spacer />
-      <v-text-field
-        :model-value="sliderValue[1]"
-        @update:modelValue="sliderValue = [sliderValue[0], toNumber($event)]"
-        density="compact"
-        class="mt-0 pt-0"
-        hide-details
-        variant="outlined"
-        type="number"
-        style="width: 44px"
-      ></v-text-field>
-    </v-card-actions>
+function onUpdate(first: string | number, second: string | number): void {
+  sliderValue.value = [toNumber(first), toNumber(second)];
+}
 
-    <v-range-slider
-      v-model="sliderValue"
-      :loading="loading"
-      :thumb-label="showThumb"
-      thumb-color="blue"
-      :min="min"
-      hide-details
-      :max="max"
-      class="align-center px-2"
-    >
-    </v-range-slider>
-  </div>
-</template>
+defineExpose({ sliderValue });
+</script>
 
 <style>
 .double-slider-selector
@@ -125,6 +120,19 @@ defineExpose({
   min-height: 32px !important;
 }
 
+.double-slider-selector .v-slider-thumb__label {
+  transform: translateX(-50%) rotate(180deg) translateY(-85%) !important;
+  top: calc(var(--v-slider-thumb-size) / 2) !important;
+  bottom: unset !important;
+  font-size: 0.6rem !important;
+  padding: 2px 4px !important;
+  height: 20px !important;
+}
+
+.double-slider-selector .v-slider-thumb__label div {
+  transform: rotate(180deg) !important;
+}
+
 .double-slider-selector .v-slider__thumb-label {
   color: black;
   width: 40px !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, ref, unref, watch } from "vue";
 
 export interface Props {
   value: number;
@@ -25,9 +25,9 @@ const emit = defineEmits<{
   "update:value": [number];
 }>();
 
-const prevValue = ref<number>(0);
 const showThumb = ref<"always" | boolean>(true);
 const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
+
 const sliderValue = computed({
   get() {
     return Math.floor(props.value);
@@ -37,25 +37,17 @@ const sliderValue = computed({
   },
 });
 
-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 }
-);
+watch(() => sliderValue.value, () => {
+  clearTimeout(unref(showThumbTimeout));
+  showThumb.value = "always";
+  showThumbTimeout.value = setTimeout(() => {
+    showThumb.value = false;
+  }, 1000);
+});
 </script>
 
 <template>
   <v-slider
-    style="position: absolute; right: 0px; top: 0; height: calc(100% - 20px)"
     v-model="sliderValue"
     :thumb-label="showThumb"
     :min="min"
@@ -80,6 +72,9 @@ watch(
 
 <style lang="scss">
 .vertical-slider-selector {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
   & .v-input__control {
     min-height: 32px !important;
     height: 100% !important;

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

@@ -55,7 +55,7 @@ describe("DoubleSliderSelector.vue", () => {
     vi.advanceTimersByTime(1);
     await flushPromises();
     expect(wrapper.vm.value).toStrictEqual([1, 1]);
-    checkComponentProps(slider, "thumbLabel", true);
+    checkComponentProps(slider, "thumbLabel", false);
   });
 
   it("should set slider value", async () => {

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

@@ -51,7 +51,7 @@ describe("VerticalSliderSelector.vue", () => {
     vi.advanceTimersByTime(1);
     await flushPromises();
     expect(wrapper.vm.value).toStrictEqual(1);
-    checkComponentProps(slider, "thumbLabel", true);
+    checkComponentProps(slider, "thumbLabel", false);
   });
 
   it("should set slider value", async () => {

package/src/dataLayer/__tests__/clamp.spec.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { clamp } from '@/dataLayer/clamp';
+
+describe('clamp tests', () => {
+  it('should clamp min', () => {
+    expect(clamp(-1, 0, 100)).toEqual(0);
+  });
+
+  it('should clamp max', () => {
+    expect(clamp(101, 0, 100)).toEqual(100);
+  });
+
+  it('should not clamp within range', () => {
+    expect(clamp(50, 0, 100)).toEqual(50);
+  });
+});

package/src/dataLayer/__tests__/eventHandlers.spec.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi} from 'vitest';
+import { EventHandlers } from '@/dataLayer/eventHandlers';
+
+describe('eventHandlers tests', () => {
+  it('should add the same key and handler only once', async () => {
+    const handlers = new EventHandlers();
+    const fn = vi.fn();
+    handlers.add('fn', fn);
+    handlers.add('fn', fn);
+    await handlers.call('fn');
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('should add different handlers', async () => {
+    const handlers = new EventHandlers();
+    const a = vi.fn();
+    const b = vi.fn();
+    handlers.add('fn', a);
+    handlers.add('fn', b);
+    await handlers.call('fn');
+    expect(a).toHaveBeenCalledOnce();
+    expect(b).toHaveBeenCalledOnce();
+  })
+
+  it('should add/remove the same key and handler', () => {
+    const handlers = new EventHandlers();
+    const fn = vi.fn();
+    handlers.add('fn', fn);
+    expect(handlers.remove('fn', fn)).toBeTruthy();
+  });
+
+  it('should not remove handler of different key', () => {
+    const handlers = new EventHandlers();
+    const fn = vi.fn();
+    handlers.add('foo', fn);
+    expect(handlers.remove('bar', vi.fn())).toBeFalsy();
+  });
+});

package/src/dataLayer/__tests__/getIconForPreset.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { getIconForPreset } from '@/dataLayer/getIconForPreset';
+
+describe('getIconForPreset tests', () => {
+  it("should get bone icon", () => {
+    expect(getIconForPreset("Bone")).toBe("fa:fas fa-bone");
+  });
+
+  it("should get brain icon", () => {
+    expect(getIconForPreset("Brain")).toBe("fa:fas fa-brain");
+  });
+
+  it("should get liver icon", () => {
+    expect(getIconForPreset("Liver")).toBe("custom:liver_icon");
+  });
+
+  it("should get lungs icon", () => {
+    expect(getIconForPreset("Lungs")).toBe("fa:fas fa-lungs");
+  });
+
+  it("should get muscle icon", () => {
+    expect(getIconForPreset("Muscle")).toBe("custom:muscle_icon");
+  });
+
+  it("should get temporal bones icon", () => {
+    expect(getIconForPreset("Temporal Bones")).toBe("custom:temporal_bones_icon");
+  });
+
+  it("should get soft tissue icon", () => {
+    expect(getIconForPreset("Soft Tissue")).toBe("custom:torso_icon");
+  });
+
+  it("should get skin icon", () => {
+    expect(getIconForPreset("Skin")).toBe("custom:skin_icon");
+  });
+
+  it("should get undefined icon", () => {
+    expect(getIconForPreset("AKJSDHLKAJSDLJ")).toBe(undefined);
+  });
+});

package/src/dataLayer/__tests__/patchDataOverlay.spec.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+import {
+  DataOverlayEventUnpatched,
+  InitialDataOverlayStateUnpatched,
+  patchDataOverlayEvent,
+  patchInitialDataOverlay
+} from "@/dataLayer/patchDataOverlay";
+
+const unpatchedState: InitialDataOverlayStateUnpatched = {
+  Version: '1.0.0',
+  DataOverlay: {
+    Version: '1.0.0',
+    DataOverlay: [
+      {
+        Version: '1.0.0',
+        Id: '0',
+        DataType: 0,
+        Data: JSON.stringify({
+          Colour2d: { },
+          Colour3d: { },
+          Description: '',
+          Icon2d: '',
+          Id: ',',
+          Inverted: { },
+          Position: { },
+          Size2d: { },
+          Size3d: { },
+          Title: '',
+          Version: '',
+          Visibility2d: false,
+          Visibility3d: false,
+          CallToAction: JSON.stringify({
+            Actions: [
+              {
+                ActionType: 0,
+                ActionData: JSON.stringify({
+                  Description: '',
+                  Url: '',
+                })
+              }
+            ]
+          }),
+        })
+      }
+    ]
+  }
+};
+
+const unpatchedEvent: DataOverlayEventUnpatched = {
+  Version: '1.0.0',
+  Interaction: 0,
+  Annotation: {
+    Colour2d: { } as any,
+    Colour3d: { } as any,
+    Description: '',
+    Icon2d: '',
+    Id: ',',
+    Inverted: { } as any,
+    Position: { } as any,
+    Size2d: { } as any,
+    Size3d: { } as any,
+    Title: '',
+    Version: '',
+    Visibility2d: false,
+    Visibility3d: false,
+    CallToAction: JSON.stringify({
+      Actions: [
+        {
+          ActionType: 0,
+          ActionData: JSON.stringify({
+            Description: '',
+            Url: '',
+          })
+        }
+      ]
+    }),
+  }
+}
+
+describe('patchDataOverlay tests', () => {
+  it('should patch data overlay state', () => {
+    expect(() => patchInitialDataOverlay(unpatchedState)).not.toThrow();
+  });
+
+  it('should patch data overlay event', () => {
+    expect(() => patchDataOverlayEvent(unpatchedEvent)).not.toThrow();
+  });
+});

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

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import { inflateScanState } from "@/helpers/modelHelper";
+import { AnchorPoint, ScanView } from "@3cr/types-ts";
+import {cSlider, getCurrentView, setScanState, sSlider, tSlider} from "@/dataLayer/scanState";
+
+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);
+  });
+});

package/src/dataLayer/__tests__/useViewer3cr.spec.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import { useViewer3cr } from '@/dataLayer/useViewer3cr';
+
+describe('useViewer3cr tests', () => {
+  it('should return same service instance', () => {
+    const a = useViewer3cr();
+    const b = useViewer3cr();
+    expect(a).eq(b);
+  });
+});