@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/sliders/DoubleSliderSelector.vue

@@ -1,141 +0,0 @@
-<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, ref, unref, watch } from "vue";
-import { toNumber } from "@vue/shared";
-import { clamp } from "@/dataLayer/clamp";
-
-export interface Props {
-  value: [number, number];
-  loading?: boolean;
-  label?: string;
-  lower?: number;
-  upper?: number;
-  min?: number;
-  max?: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  value: () => [0, 0],
-  loading: false,
-  label: "Test",
-  lower: 0,
-  upper: 100,
-  min: -99999,
-  max: 99999,
-});
-
-const emit = defineEmits<{
-  "update:value": [[number, number]];
-}>();
-
-const showThumb = ref<"always" | boolean>(false);
-const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
-
-const sliderValue = computed({
-  get() {
-    return props.value;
-  },
-  set(value: [number, number]) {
-    const val = value.map(v => clamp(v, props.min, props.max)) as [number, number];
-    emit("update:value", val);
-  },
-});
-
-watch([
-  () => sliderValue.value[0],
-  () => sliderValue.value[1]
-], () => {
-  clearTimeout(unref(showThumbTimeout));
-  showThumb.value = "always";
-  showThumbTimeout.value = setTimeout(() => {
-    showThumb.value = false;
-  }, 1000);
-});
-
-function onUpdate(first: string | number, second: string | number): void {
-  sliderValue.value = [toNumber(first), toNumber(second)];
-}
-
-defineExpose({ sliderValue });
-</script>
-
-<style>
-.double-slider-selector
-  .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 {
-  padding: 0px 8px !important;
-}
-
-.double-slider-selector
-  .v-text-field--outlined.v-input--dense.v-text-field--outlined
-  > .v-input__control
-  > .v-input__slot {
-  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;
-  height: 40px !important;
-}
-</style>

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

@@ -1,104 +0,0 @@
-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],
-    min: 0,
-    max: 100,
-  });
-
-  beforeEach(() => {
-    wrapper = mountVuetify(DoubleSliderSelector, {
-      value: [0, 0],
-      min: 0,
-      max: 100,
-    });
-    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", false);
-  });
-
-  it("should set slider value", async () => {
-    const slider = wrapper.findComponent(".v-range-slider");
-    await slider.setValue([1, 2]);
-  });
-
-  it("should set min text lower than min limits", async () => {
-    wrapper.vm.sliderValue = [-10, 0];
-    await flushPromises();
-
-    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[0, 0]]]);
-  });
-
-  it("should set max text lower than min limits", async () => {
-    wrapper.vm.sliderValue = [-100, -10];
-    await flushPromises();
-
-    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[0, 0]]]);
-  });
-
-  it("should set min text higher than max limits", async () => {
-    wrapper.vm.sliderValue = [9000, 9001];
-    await flushPromises();
-
-    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[100, 100]]]);
-  });
-
-  it("should set max text higher than max limits", async () => {
-    wrapper.vm.sliderValue = [50, 9000];
-    await flushPromises();
-
-    expect(wrapper.emitted()["update:value"]).toStrictEqual([[[50, 100]]]);
-  });
-
-  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

@@ -1,61 +0,0 @@
-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", false);
-  });
-
-  it("should set slider value", async () => {
-    const slider = wrapper.findComponent(".v-slider");
-    await slider.setValue(1);
-  });
-});

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

@@ -1,40 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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/getIconForPreset.ts

@@ -1,11 +0,0 @@
-export function getIconForPreset(presetName: string): string | undefined {
-  if (presetName === "Bone") return "fa:fas fa-bone";
-  if (presetName === "Brain") return "fa:fas fa-brain";
-  if (presetName === "Liver") return "custom:liver_icon";
-  if (presetName === "Lungs") return "fa:fas fa-lungs";
-  if (presetName === "Muscle") return "custom:muscle_icon";
-  if (presetName === "Temporal Bones") return "custom:temporal_bones_icon";
-  if (presetName === "Soft Tissue") return "custom:torso_icon";
-  if (presetName === "Skin") return "custom:skin_icon";
-  return undefined;
-}

package/src/dataLayer/patchDataOverlay.ts

@@ -1,101 +0,0 @@
-import {
-  Action,
-  ActionData,
-  CallToAction,
-  CurrentDataOverlayState,
-  DataOverlay,
-  DataOverlayData, DataOverlayEvent,
-  InitialDataOverlayState
-} from "@3cr/types-ts";
-
-export type DataOverlayDataUnpatched = Omit<DataOverlayData, 'Data'> & {
-  Data: string;
-};
-
-export type DataOverlayUnpatched = Omit<DataOverlay, 'CallToAction'> & {
-  CallToAction: string | null;
-};
-
-export type CallToActionUnpatched = Omit<CallToAction, 'Actions'> & {
-  Actions: ActionUnpatched[];
-};
-
-export type ActionUnpatched = Omit<Action, 'ActionData'> & {
-  ActionData: string;
-};
-
-export type CurrentDataOverlayStateUnpatched = Omit<CurrentDataOverlayState, 'DataOverlay'> & {
-  DataOverlay: DataOverlayDataUnpatched[];
-};
-
-export type InitialDataOverlayStateUnpatched = Omit<InitialDataOverlayState, 'DataOverlay'> & {
-  DataOverlay: CurrentDataOverlayStateUnpatched;
-};
-
-export type DataOverlayEventUnpatched = Omit<DataOverlayEvent, 'Annotation'> & {
-  Annotation: DataOverlayUnpatched;
-}
-
-export function patchAction(data: ActionUnpatched) {
-  return {
-    ...data,
-    ActionData: JSON.parse(data.ActionData) as ActionData
-  };
-}
-
-export function patchDataOverlay(data: DataOverlayUnpatched) {
-  return {
-    ...data,
-    CallToAction: data.CallToAction ? JSON.parse(data.CallToAction) as CallToActionUnpatched : null
-  };
-}
-
-export function patchDataOverlayData(data: DataOverlayDataUnpatched) {
-  return {
-    ...data,
-    Data: JSON.parse(data.Data) as DataOverlayUnpatched
-  }
-}
-
-export function patchInitialDataOverlay(data: InitialDataOverlayStateUnpatched): InitialDataOverlayState {
-  return {
-    ...data,
-    DataOverlay: patchCurrentDataOverlay(data.DataOverlay)
-  };
-}
-
-export function patchCurrentDataOverlay(data: CurrentDataOverlayStateUnpatched): CurrentDataOverlayState {
-  return {
-    ...data,
-    DataOverlay: data.DataOverlay.map(overlay => {
-      const patchedDataOverlayData = patchDataOverlayData(overlay);
-      const patchedDataOverlay = patchDataOverlay(patchedDataOverlayData.Data);
-      return {
-        ...patchedDataOverlayData,
-        Data: {
-          ...patchedDataOverlay,
-          CallToAction: patchedDataOverlay.CallToAction ? {
-            Actions: patchedDataOverlay.CallToAction.Actions.map(action => {
-              return patchAction(action);
-            })
-          } : null
-        }
-      };
-    })
-  };
-}
-
-export function patchDataOverlayEvent(data: DataOverlayEventUnpatched): DataOverlayEvent {
-  const patchedDataOverlay = patchDataOverlay(data.Annotation);
-  return {
-    ...data,
-    Annotation: {
-      ...patchedDataOverlay,
-      CallToAction: patchedDataOverlay.CallToAction ? {
-        Actions: patchedDataOverlay.CallToAction.Actions.map(action => {
-          return patchAction(action);
-        })
-      } : null
-    }
-  };
-}

package/src/dataLayer/useViewer3cr.ts

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