@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/modal/menus/__tests__/FileMenu.spec.ts

@@ -0,0 +1,110 @@
+import { mount } from '@vue/test-utils';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+import { VBtn, VListItem } from 'vuetify/components';
+import FileMenu from '@/components/modal/menus/FileMenu.vue';
+
+describe('FileMenu tests', () => {
+  const options = useViewerOptions();
+
+  it('should mount', () => {
+    const wrapper = mount(FileMenu);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should call OnLoadNewDicomSeries', async () => {
+    options.value.OnLoadNewDicomSeries = vi.fn();
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('load-new-dicom-series').trigger('click');
+    expect(options.value.OnLoadNewDicomSeries).toHaveBeenCalled();
+  });
+
+  it('should not call OnLoadNewDicomSeries', async () => {
+    options.value.OnLoadNewDicomSeries = undefined;
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    const item = wrapper.findComponentByTestId<VListItem>('load-new-dicom-series');
+    expect(item.exists()).toBeFalsy();
+  });
+
+  it('should call OnDownloadDicomSeries', async () => {
+    options.value.OnDownloadDicomSeries = vi.fn();
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('download-dicom-series').trigger('click');
+    expect(options.value.OnDownloadDicomSeries).toHaveBeenCalled();
+  });
+
+  it('should not call OnDownloadDicomSeries', async () => {
+    options.value.OnDownloadDicomSeries = undefined;
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    const item = wrapper.findComponentByTestId<VListItem>('download-dicom-series');
+    expect(item.exists()).toBeFalsy();
+  });
+
+  it('should call OnLoadSavedSession', async () => {
+    options.value.OnLoadSavedSession = vi.fn();
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('load-saved-session').trigger('click');
+    expect(options.value.OnLoadSavedSession).toHaveBeenCalled();
+  });
+
+  it('should not call OnLoadSavedSession', async () => {
+    options.value.OnLoadSavedSession = undefined;
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    const item = wrapper.findComponentByTestId<VListItem>('load-saved-session');
+    expect(item.exists()).toBeFalsy();
+  });
+
+  it('should call OnSendTo3rdParty', async () => {
+    options.value.OnSendTo3rdParty = vi.fn();
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('send-to-3rd-party').trigger('click');
+    expect(options.value.OnSendTo3rdParty).toHaveBeenCalled();
+  });
+
+  it('should not call OnSendTo3rdParty', async () => {
+    options.value.OnSendTo3rdParty = undefined;
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    const item = wrapper.findComponentByTestId<VListItem>('send-to-3rd-party');
+    expect(item.exists()).toBeFalsy();
+  });
+
+  it('should call OnShareToMobile', async () => {
+    options.value.OnShareToMobile = vi.fn();
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('share-to-mobile').trigger('click');
+    expect(options.value.OnShareToMobile).toHaveBeenCalled();
+  });
+
+  it('should not call OnShareToMobile', async () => {
+    options.value.OnShareToMobile = undefined;
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    const item = wrapper.findComponentByTestId<VListItem>('share-to-mobile');
+    expect(item.exists()).toBeFalsy();
+  });
+
+  it('should call OnClosePopup', async () => {
+    options.value.OnClosePopup = vi.fn();
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('close').trigger('click');
+    expect(options.value.OnClosePopup).toHaveBeenCalled();
+    expect(wrapper.emitted('close')).toEqual([[]]);
+  });
+
+  it('should not call OnClosePopup', async () => {
+    options.value.OnClosePopup = undefined;
+    const wrapper = mount(FileMenu);
+    await wrapper.findComponentByTestId<VBtn>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('close').trigger('click');
+    expect(wrapper.emitted('close')).toEqual([[]]);
+  });
+});

package/src/components/modal/menus/__tests__/SettingsMenu.spec.ts

@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils';
+import { VCard, VMenu } from 'vuetify/components';
+import SettingsMenu from '@/components/modal/menus/SettingsMenu.vue';
+import ValueSelector from '@/components/shared/ValueSelector.vue';
+import { scanState } from '@/models/scanState';
+
+type ValueSelector = InstanceType<typeof ValueSelector>;
+
+describe('SettingsMenu tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(SettingsMenu);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open and close', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponent(VMenu).setValue(false);
+    await wrapper.setProps({ modelValue: false });
+    expect(wrapper.findComponent(VCard).isVisible()).toBeFalsy();
+  });
+
+  it('should set brightness', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('brightness').setValue(1, 'value');
+    expect(scanState.value.Display.Brightness).toBe(1);
+  });
+
+  it('should set contrast', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('contrast').setValue(2, 'value');
+    expect(scanState.value.Display.Contrast).toBe(2);
+  });
+
+  it('should set opacity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('opacity').setValue(3, 'value');
+    expect(scanState.value.Display.Opacity).toBe(3);
+  });
+
+  it('should set pan sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('pan').setValue(4, 'value');
+    expect(scanState.value.InteractionSettings.PanSensivitity).toBe(4);
+  });
+
+  it('should set zoom sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('zoom').setValue(5, 'value');
+    expect(scanState.value.InteractionSettings.ZoomSensitivity).toBe(5);
+  });
+
+  it('should set rotate sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('rotate').setValue(6, 'value');
+    expect(scanState.value.InteractionSettings.RotateSensitivity).toBe(6);
+  });
+
+  it('should set camera rotate sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('camera').setValue(7, 'value');
+    expect(scanState.value.InteractionSettings.CameraRotateSensitivity).toBe(7);
+  });
+});

package/src/components/navigation/mcad/McadGlobalActions.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-card flat density="compact" color="transparent">
+    <v-card-title class="text-overline">Global Actions</v-card-title>
+    <v-card-text class="d-flex flex-column ga-1">
+      <mcad-global-scan-view-btn />
+      <!--      <mcad-global-visibility-btn :mcads="items" />-->
+      <!--      <mcad-global-opacity-slider :mcads="items" />-->
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+
+interface Props {
+  items: DataOverlayMcad[];
+}
+
+defineProps<Props>();
+</script>

package/src/components/navigation/mcad/McadGlobalOpacitySlider.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-row class="flex-column" no-gutters>
+    <v-row no-gutters>
+      <v-col>
+        <span class="text-caption">Global Opacity</span>
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col class="my-auto" cols="9">
+        <v-slider
+          v-model="opacity"
+          class="pr-4"
+          hide-details
+          min="0"
+          max="100"
+          thumb-color="primary"
+          thumb-size="16"
+          step="1"
+        />
+      </v-col>
+      <v-col class="my-auto" cols="3">
+        <v-text-field
+          v-model="opacity"
+          density="compact"
+          hide-details
+          variant="outlined"
+          type="number"
+          min="0"
+          max="100"
+        >
+          <template #append-inner>
+            <v-icon icon="percent" size="16" />
+          </template>
+        </v-text-field>
+      </v-col>
+    </v-row>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { computed, ref } from 'vue';
+import { ObjectColour } from '@3cr/types-ts';
+import { clamp } from '@/functions/clamp';
+import { useDebounce } from '@/composables/useDebounce';
+
+interface Props {
+  mcads: DataOverlayMcad[];
+}
+
+const props = defineProps<Props>();
+
+const viewer3cr = useViewer3cr();
+const setOpacityDebounce = useDebounce(setOpacity, 500);
+
+const _opacity = ref<number>(100);
+
+const opacity = computed({
+  get(): number {
+    return _opacity.value;
+  },
+  set(value: number): void {
+    const next = clamp(value, 0, 100);
+    _opacity.value = next;
+    setOpacityDebounce(next);
+  }
+});
+
+async function setOpacity(value: number): Promise<void> {
+  const alpha = clamp(value, 0, 100) / 100;
+  for (const mcad of props.mcads) {
+    const message: ObjectColour = {
+      Version: '0.0.0',
+      Id: mcad.Id,
+      Colour: {
+        Version: '0.0.0',
+        R: mcad.Colour.R,
+        G: mcad.Colour.G,
+        B: mcad.Colour.B,
+        A: alpha
+      }
+    };
+    await viewer3cr.setMcadObjectColour(message);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.v-field) {
+  padding-right: 1px !important;
+}
+
+:deep(input) {
+  font-size: 11px;
+  padding: 4px 0 4px 4px;
+  min-height: 0;
+}
+
+:deep(.v-field__append-inner) {
+  padding-top: 4px;
+}
+</style>

package/src/components/navigation/mcad/McadGlobalScanViewBtn.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-btn variant="text" size="small" @click="toggle">
+    <v-icon start :icon="icon" size="20" />
+    <span>{{ visibility ? 'Hide' : 'Show' }} 3D Volume</span>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { ScanView, ViewToggleData } from '@3cr/types-ts';
+import { scanState } from '@/models/scanState';
+
+const viewer3cr = useViewer3cr();
+
+const visibility = computed(() => {
+  return scanState.value.Orientations.Volume.Visibility;
+});
+
+const icon = computed(() => {
+  return visibility.value ? 'visibility' : 'visibility_off';
+});
+
+async function toggle(): Promise<void> {
+  const message: ViewToggleData = { Version: '0.0.0', View: ScanView.Volume, Visibility: !visibility.value };
+  await viewer3cr.viewSelectionToggleView(message);
+}
+</script>

package/src/components/navigation/mcad/McadGlobalVisibilityBtn.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-btn variant="text" size="small" @click="toggle">
+    <v-icon start :icon="icon" size="20" />
+    <span>{{ visibility ? 'Hide' : 'Show' }} all MCADs</span>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+import { ObjectVisibility } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+
+interface Props {
+  mcads: DataOverlayMcad[];
+}
+
+const props = defineProps<Props>();
+
+const viewer3cr = useViewer3cr();
+
+const visibility = computed(() => {
+  return props.mcads.some((mcad) => mcad.Visibility);
+});
+
+const icon = computed(() => {
+  return visibility.value ? 'visibility' : 'visibility_off';
+});
+
+async function toggle(): Promise<void> {
+  for (const mcad of props.mcads) {
+    const message: ObjectVisibility = { Version: '0.0.0', Id: mcad.Id, Visibility: !visibility.value };
+    await viewer3cr.setMcadObjectVisibility(message);
+  }
+}
+
+defineOptions({ inheritAttrs: false });
+</script>

package/src/components/shared/DoubleSliderSelector.vue

@@ -0,0 +1,142 @@
+<template>
+  <v-row class="flex-column" no-gutters>
+    <v-row v-if="label" 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 cols="3">
+        <v-text-field
+          data-testid="lower"
+          :model-value="sliderState[0]"
+          @update:model-value="input[0] = parseInt($event)"
+          @blur="onUpdateLower"
+          @keyup.enter="onUpdateLower"
+          density="compact"
+          hide-details
+          type="number"
+          variant="outlined"
+        />
+      </v-col>
+      <v-spacer />
+      <v-col cols="3">
+        <v-text-field
+          data-testid="upper"
+          :model-value="sliderState[1]"
+          @update:model-value="input[1] = parseInt($event)"
+          @blur="onUpdateHigher"
+          @keyup.enter="onUpdateHigher"
+          density="compact"
+          hide-details
+          type="number"
+          variant="outlined"
+        />
+      </v-col>
+    </v-row>
+    <v-row class="pb-4" no-gutters>
+      <v-range-slider
+        v-model="sliderState"
+        data-testid="slider"
+        :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 { clamp } from '@/functions/clamp';
+
+interface Props {
+  modelValue?: [number, number];
+  loading?: boolean;
+  label?: string;
+  min?: number;
+  max?: number;
+}
+
+type Emits = {
+  'update:modelValue': [[number, number]];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [0, 0],
+  loading: false,
+  label: '',
+  min: -99999,
+  max: 99999
+});
+
+const emit = defineEmits<Emits>();
+
+const _modelValue = ref<[number, number]>(props.modelValue);
+const input = ref<[number, number]>(props.modelValue);
+const showThumb = ref<'always' | boolean>(false);
+const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
+
+const sliderState = computed({
+  get(): [number, number] {
+    return _modelValue.value;
+  },
+  set(value: [number, number]): void {
+    _modelValue.value = value;
+    emit('update:modelValue', value);
+  }
+});
+
+watch(
+  () => props.modelValue,
+  (value: [number, number]) => {
+    _modelValue.value = value;
+  }
+);
+
+watch([() => sliderState.value[0], () => sliderState.value[1]], () => {
+  clearTimeout(unref(showThumbTimeout));
+  showThumb.value = 'always';
+  showThumbTimeout.value = setTimeout(() => {
+    showThumb.value = false;
+  }, 1000);
+});
+
+function onUpdateLower(): void {
+  const higher = sliderState.value[1];
+  const lower = clamp(input.value[0], props.min, higher);
+  sliderState.value = [lower, higher];
+}
+
+function onUpdateHigher(): void {
+  const lower = sliderState.value[0];
+  const higher = clamp(input.value[1], lower, props.max);
+  sliderState.value = [lower, higher];
+}
+
+defineExpose({ sliderState });
+</script>
+
+<style scoped lang="scss">
+:deep(input) {
+  font-size: 14px;
+  padding: 4px 8px;
+  min-height: 0;
+}
+
+:deep(.v-slider-thumb__label-container) {
+  transform: translate(100%, 18px) rotate(180deg) !important;
+}
+
+:deep(.v-slider-thumb__label) {
+  padding: 2px 4px;
+  height: fit-content;
+}
+
+:deep(.v-slider-thumb__label div) {
+  transform: rotate(180deg) !important;
+}
+</style>

package/src/components/{loading → shared}/LoadingSpinner.vue

@@ -4,12 +4,12 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  text: "Loading Online Viewer",
+  text: 'Loading Online Viewer'
 });
 </script>
 
 <template>
-  <div style="height: 100%">
+  <div class="w-100 h-100">
     <div id="spinner">
       <div class="content">
         <div class="circle"></div>
@@ -20,12 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
     </div>
     <div
       class="mx-auto text-center text-white text-h3"
-      style="
-        position: absolute;
-        bottom: 10%;
-        left: 50%;
-        transform: translateX(-50%);
-      "
+      style="position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%)"
       v-html="props.text"
     ></div>
   </div>
@@ -62,20 +57,9 @@ const props = withDefaults(defineProps<Props>(), {
   --in: 80%;
   --ar: #8799a4;
   --dt: #ffffff;
-  --shadow: drop-shadow(0vmin 0vmin 0.5vmin rgba(0, 0, 0, 0.35))
-    drop-shadow(0vmin 1vmin 0.5vmin rgba(0, 0, 0, 0.09));
-  --cross: linear-gradient(
-      0deg,
-      #fff0 calc(50% - 2px),
-      #000 calc(50% - 1px) calc(50% + 1px),
-      #fff0 calc(50% + 2px)
-    ),
-    linear-gradient(
-      90deg,
-      #fff0 calc(50% - 2px),
-      #000 calc(50% - 1px) calc(50% + 1px),
-      #fff0 calc(50% + 2px)
-    );
+  --shadow: drop-shadow(0vmin 0vmin 0.5vmin rgba(0, 0, 0, 0.35)) drop-shadow(0vmin 1vmin 0.5vmin rgba(0, 0, 0, 0.09));
+  --cross: linear-gradient(0deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px)),
+    linear-gradient(90deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px));
   border: 6vmin solid var(--ar);
   width: var(--in);
   height: var(--in);
@@ -87,10 +71,12 @@ const props = withDefaults(defineProps<Props>(), {
   top: 15vmin;
   right: -10vmin;
   animation: spin-bot var(--sp) ease 0s infinite;
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px));
+  background-image: var(--cross), radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px));
   background-repeat: no-repeat;
-  background-size: 3vmin 1vmin, 1vmin 3vmin, 100% 100%;
+  background-size:
+    3vmin 1vmin,
+    1vmin 3vmin,
+    100% 100%;
   background-position: center center;
   filter: var(--shadow);
 }
@@ -100,11 +86,13 @@ const props = withDefaults(defineProps<Props>(), {
   top: -2vmin;
   animation: spin-top var(--sp) ease 0s infinite;
   transform: rotate(-45deg);
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px));
+  background-image: var(--cross), radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px));
   right: -4vmin;
   filter: hue-rotate(10deg) var(--shadow);
-  background-size: 1.4vmin 1vmin, 1vmin 1.4vmin, 100% 100%;
+  background-size:
+    1.4vmin 1vmin,
+    1vmin 1.4vmin,
+    100% 100%;
 }
 
 .circle:nth-child(3) {
@@ -113,10 +101,12 @@ const props = withDefaults(defineProps<Props>(), {
   left: -13vmin;
   transform: rotate(175deg);
   animation: spin-left var(--sp) ease calc(var(--sp) / 4) infinite;
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 9vmin, #fff0 calc(9vmin + 1px));
+  background-image: var(--cross), radial-gradient(var(--dt) 9vmin, #fff0 calc(9vmin + 1px));
   filter: hue-rotate(20deg) var(--shadow);
-  background-size: 5vmin 1vmin, 1vmin 5vmin, 100% 100%;
+  background-size:
+    5vmin 1vmin,
+    1vmin 5vmin,
+    100% 100%;
 }
 
 .circle:nth-child(4) {
@@ -124,12 +114,13 @@ const props = withDefaults(defineProps<Props>(), {
   top: 35vmin;
   left: -6vmin;
   transform: rotate(-280deg);
-  animation: spin-last var(--sp) ease
-    calc(calc(calc(var(--sp) / 4) + var(--sp)) * -1) infinite;
-  background-image: var(--cross),
-    radial-gradient(var(--dt) 2.5vmin, #fff0 calc(2.5vmin + 1px));
+  animation: spin-last var(--sp) ease calc(calc(calc(var(--sp) / 4) + var(--sp)) * -1) infinite;
+  background-image: var(--cross), radial-gradient(var(--dt) 2.5vmin, #fff0 calc(2.5vmin + 1px));
   filter: hue-rotate(30deg) var(--shadow);
-  background-size: 2vmin 1vmin, 1vmin 2vmin, 100% 100%;
+  background-size:
+    2vmin 1vmin,
+    1vmin 2vmin,
+    100% 100%;
 }
 
 @keyframes spin-all {