@3cr/viewer-browser 0.0.162 → 0.0.194

package/src/components/modal/__tests__/ViewerNavigationDrawerContent.spec.ts

@@ -0,0 +1,29 @@
+import {describe, it, expect, vi} from "vitest";
+import { mountVuetify } from "~/helper";
+import { demoOptions } from "@/components/demo/options";
+import { isSessionLoaded } from "@/dataLayer/scanState";
+import ViewerNavigationDrawerContent from "../ViewerNavigationDrawerContent.vue";
+import {flushPromises} from "@vue/test-utils";
+
+describe('ViewerNavigationDrawerContent tests', () => {
+  it('should mount', () => {
+    const props = { drawer: false, options: demoOptions.value };
+    const wrapper = mountVuetify(ViewerNavigationDrawerContent, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should expand', async () => {
+    vi.spyOn(isSessionLoaded, 'value', 'get').mockReturnValue(true);
+    const props = { drawer: true, options: demoOptions.value };
+    const wrapper = mountVuetify(ViewerNavigationDrawerContent, props);
+    const panel0 = wrapper.findComponent('[data-testid="panel-0"]');
+    await panel0.trigger('click');
+    await flushPromises();
+    expect(panel0.isVisible()).toBeTruthy();
+
+    const panel1 = wrapper.findComponent('[data-testid="panel-1"]');
+    await panel1.trigger('click')
+    await flushPromises();
+    expect(panel1.isVisible()).toBeTruthy();
+  });
+});

package/src/components/modal/__tests__/ViewerNavigationDrawerFooter.spec.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { mountVuetify } from '~/helper';
+import { demoLicenceOptions, demoPatientOptions } from "@/components/demo/options";
+import { VueWrapper } from "@vue/test-utils";
+import ViewerNavigationDrawerFooter from '@/components/modal/ViewerNavigationDrawerFooter.vue';
+
+async function testFooterItems(wrapper: VueWrapper): Promise<void> {
+  const resetScan = wrapper.findComponent('[data-testid="footer-0"]');
+  await resetScan.trigger('click');
+  expect(resetScan).toBeTruthy();
+
+  const enableCloudStorage = wrapper.findComponent('[data-testid="footer-1"]');
+  await enableCloudStorage.trigger('click');
+  expect(enableCloudStorage).toBeTruthy();
+
+  const sendTo3rdParty = wrapper.findComponent('[data-testid="footer-2"]');
+  await sendTo3rdParty.trigger('click');
+  expect(sendTo3rdParty).toBeTruthy();
+
+  const shareToMobile = wrapper.findComponent('[data-testid="footer-3"]');
+  await shareToMobile.trigger('click');
+  expect(shareToMobile).toBeTruthy();
+}
+
+describe('ViewerNavigationDrawerFooter tests', () => {
+  it('should mount', () => {
+    const props = { options: {}, drawer: false };
+    const wrapper = mountVuetify(ViewerNavigationDrawerFooter, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open patient modals', async () => {
+    const props = { options: demoPatientOptions, drawer: true };
+    const wrapper = mountVuetify(ViewerNavigationDrawerFooter, props);
+    await testFooterItems(wrapper);
+  });
+
+  it('should open licence modals', async () => {
+    const props = { options: demoLicenceOptions, drawer: true };
+    const wrapper = mountVuetify(ViewerNavigationDrawerFooter, props);
+    await testFooterItems(wrapper);
+  });
+});

package/src/components/modal/__tests__/ViewerNavigationDrawerHeader.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, vi, expect } from "vitest";
+import { mountVuetify } from "~/helper";
+import { demoType } from "@/components/demo/options";
+import ViewerNavigationDrawerHeader from "@/components/modal/ViewerNavigationDrawerHeader.vue";
+
+describe('ViewerNavigationDrawerHeader tests', () => {
+  it('should mount', () => {
+    const wrapper = mountVuetify(ViewerNavigationDrawerHeader);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should show collapsed licence logo', () => {
+    const props = { drawer: false };
+    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    expect(wrapper.find('img').exists()).toBeTruthy();
+  });
+
+  it('should show expanded licence logo', () => {
+    const props = { drawer: true };
+    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    expect(wrapper.find('img').exists()).toBeTruthy();
+  });
+
+  it('should show collapsed patient logo', async () => {
+    vi.spyOn(demoType, 'value', 'get').mockReturnValue('patient');
+    const props = { drawer: false };
+    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    expect(wrapper.find('img').exists()).toBeTruthy();
+  });
+
+  it('should show expanded patient logo', async () => {
+    vi.spyOn(demoType, 'value', 'get').mockReturnValue('patient');
+    const props = { drawer: true };
+    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    expect(wrapper.find('img').exists()).toBeTruthy();
+  });
+});

package/src/components/modal/actions/Action.vue

@@ -0,0 +1,40 @@
+<template>
+  <template v-if="variant === 'button'">
+    <v-tooltip location="top">
+      <template #activator="{ props: tooltip }">
+        <v-btn
+          v-bind="mergeProps($attrs, tooltip)"
+          data-testid="button"
+          variant="text"
+          :color="color"
+          :icon="icon" />
+      </template>
+      <span>{{ text }}</span>
+    </v-tooltip>
+  </template>
+  <template v-if="variant == 'menu-item'">
+    <v-list-item v-bind="$attrs" data-testid="menu-item" :prepend-icon="icon">
+      <v-list-item-title>{{ text }}</v-list-item-title>
+    </v-list-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import {mergeProps} from "vue";
+
+interface Props {
+  text: string;
+  icon: string;
+  color?: string;
+  variant?: 'button' | 'menu-item';
+}
+
+withDefaults(defineProps<Props>(), {
+  color: 'white',
+  variant: 'button'
+});
+
+defineOptions({
+  inheritAttrs: false
+});
+</script>

package/src/components/modal/actions/Flip3dAction.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-menu v-model="menuState" data-testid="menu" :close-on-content-click="false">
+    <template #activator="{ props: menu }">
+      <v-tooltip location="top">
+        <template #activator="{ props: tooltip }">
+          <v-btn v-bind="mergeProps(menu, tooltip)"
+                 data-testid="activator"
+                 color="white"
+                 variant="text"
+                 icon="flip"/>
+        </template>
+        <span>Flip</span>
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item data-testid="sagittal" @click="flipSagittal">
+        <v-list-item-title>Flip Sagittal</v-list-item-title>
+      </v-list-item>
+      <v-list-item data-testid="coronal" @click="flipCoronal">
+        <v-list-item-title>Flip Coronal</v-list-item-title>
+      </v-list-item>
+      <v-list-item data-testid="transverse" @click="flipTransverse">
+        <v-list-item-title>Flip Transverse</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import {computed, mergeProps, ref} from "vue";
+import {ScanView} from "@3cr/types-ts";
+import {useViewer3cr} from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+}
+
+type Emits = {
+  'update:modal': [value: boolean];
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const viewer3cr = useViewer3cr();
+const menu = ref<boolean>(false);
+const sagittal = ref<boolean>(false);
+const coronal = ref<boolean>(false);
+const transverse = ref<boolean>(false);
+
+const menuState = computed({
+  get(): boolean {
+    return menu.value;
+  },
+  set(value: boolean): void {
+    menu.value = value;
+    emit('update:modal', value);
+  }
+});
+
+async function flipSagittal(): Promise<void> {
+  const value = !sagittal.value;
+  await viewer3cr.invertTransform(value, coronal.value, transverse.value);
+  sagittal.value = value;
+}
+
+async function flipCoronal(): Promise<void> {
+  const value = !coronal.value;
+  await viewer3cr.invertTransform(sagittal.value, value, transverse.value);
+  coronal.value = value;
+}
+
+async function flipTransverse(): Promise<void> {
+  const value = !transverse.value;
+  await viewer3cr.invertTransform(sagittal.value, coronal.value, value);
+  transverse.value = value;
+}
+</script>

package/src/components/modal/actions/FlipHorizontalAction.vue

@@ -0,0 +1,36 @@
+<template>
+  <Action
+    text="Flip Horizontally"
+    icon="swap_horiz"
+    :variant="variant"
+    @click="flipHorizontal"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { ScanView } from "@3cr/types-ts";
+import { isHorizontalFlip } from "@/dataLayer/scanState";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+const viewer3cr = useViewer3cr();
+
+const horizontal = computed(() => {
+  return isHorizontalFlip(props.view);
+});
+
+async function flipHorizontal(): Promise<void> {
+  const view2d = props.view as ScanView.Sagittal | ScanView.Coronal | ScanView.Transverse;
+  const value = !horizontal.value;
+  await viewer3cr.flipHorizontally(view2d, value);
+}
+</script>

package/src/components/modal/actions/FlipVerticalAction.vue

@@ -0,0 +1,36 @@
+<template>
+  <Action
+    text="Flip Vertically"
+    icon="swap_vert"
+    :variant="variant"
+    @click="flipVertical"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { ScanView } from "@3cr/types-ts";
+import { isVerticalFlip } from "@/dataLayer/scanState";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+const viewer3cr = useViewer3cr();
+
+const vertical = computed(() => {
+  return isVerticalFlip(props.view);
+});
+
+async function flipVertical(): Promise<void> {
+  const view2d = props.view as ScanView.Sagittal | ScanView.Coronal | ScanView.Transverse;
+  const value = !vertical.value;
+  await viewer3cr.flipVertically(view2d, value);
+}
+</script>

package/src/components/modal/actions/FullscreenAction.vue

@@ -0,0 +1,47 @@
+<template>
+  <Action
+    :text="text"
+    :icon="icon"
+    :variant="variant"
+    @click="action"
+  />
+</template>
+
+<script setup lang="ts">
+import { getViewName, isFullscreen, previousLayout } from "@/dataLayer/scanState";
+import { LayoutActions, ScanView, ViewSelectionActions } from "@3cr/types-ts";
+import { computed } from "vue";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+}
+
+const viewer3cr = useViewer3cr();
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+const text = computed(() => {
+  return isFullscreen.value ? 'Exit Fullscreen' : `Make ${getViewName(props.view)} Fullscreen`;
+});
+
+const icon = computed(() => {
+  return isFullscreen.value ? 'fullscreen_exit' : 'fullscreen';
+});
+
+const action = computed(() => {
+  return isFullscreen.value ? exitFullscreen : fullscreen
+});
+
+async function fullscreen(): Promise<void> {
+  await viewer3cr.layouts(LayoutActions.lo01);
+  await viewer3cr.viewSelection(`vs_0${props.view + 1}` as ViewSelectionActions);
+}
+
+async function exitFullscreen(): Promise<void> {
+  await viewer3cr.layouts(previousLayout.value);
+}
+</script>

package/src/components/modal/actions/NavigationCubeAction.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-row no-gutters align="center">
+    <v-col>
+      <span class="text-caption">3D Navigation Cube</span>
+    </v-col>
+    <v-col cols="4" class="d-flex justify-center">
+      <v-switch
+        :model-value="isEnabled"
+        data-testid="switch"
+        color="primary"
+        density="compact"
+        hide-details
+        @click="setEnabled(!isEnabled)"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { scanState } from "@/dataLayer/scanState";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+const viewer3cr = useViewer3cr();
+
+const isEnabled = computed(() => {
+  return scanState.value.NavigationCube.Interactivity.Value
+});
+
+async function setEnabled(value: boolean): Promise<void> {
+  await viewer3cr.setNavCubeInteractivity(value);
+}
+</script>

package/src/components/modal/actions/PanAction.vue

@@ -0,0 +1,78 @@
+<template>
+  <Action
+    text="Pan"
+    icon="pan_tool"
+    :color="enabled ? 'blue-lighten-1' : 'white'"
+    :variant="variant"
+    @click="togglePan"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ScanView } from "@3cr/types-ts";
+import { useEventListener } from "@/components/modal/composables/useEventListener";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  element: HTMLElement;
+  variant?: 'button' | 'menu-item';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+useEventListener(props.element, 'mousedown', onMouseDown);
+useEventListener(props.element, 'mouseenter', onMouseEnter);
+useEventListener(props.element, 'mouseleave', onMouseLeave);
+useEventListener(window, 'mousemove', onMouseMove);
+useEventListener(window, 'mouseup', onMouseUp);
+
+const viewer3cr = useViewer3cr();
+const enabled = ref<boolean>(false);
+const mouseDown = ref<boolean>(false);
+const prev = ref({ x: 0, y: 0 });
+
+async function togglePan(): Promise<void> {
+  const value = !enabled.value;
+  await viewer3cr.hoverOverCanvas(!value);
+  enabled.value = value;
+}
+
+function onMouseDown(event: Event): void {
+  if (enabled.value) {
+    const { x, y } = event as MouseEvent;
+    prev.value = { x, y };
+    mouseDown.value = true;
+  }
+}
+
+async function onMouseMove(event: Event): Promise<void> {
+  if (enabled.value && mouseDown.value) {
+    const { x, y } = event as MouseEvent;
+    const xDelta = x - prev.value.x;
+    const yDelta = prev.value.y - y; // swapped because in js down is positive
+    await viewer3cr.panRight(props.view, xDelta);
+    await viewer3cr.panUp(props.view, yDelta);
+    prev.value = { x, y };
+  }
+}
+
+async function onMouseEnter(_: Event): Promise<void> {
+  if (enabled.value && !mouseDown.value) {
+    await viewer3cr.hoverOverCanvas(false);
+  }
+}
+
+async function onMouseLeave(_: Event): Promise<void> {
+  if (enabled.value && !mouseDown.value) {
+    await viewer3cr.hoverOverCanvas(true);
+  }
+}
+
+function onMouseUp(_: Event): void {
+  mouseDown.value = false;
+}
+</script>

package/src/components/modal/actions/ResetViewAction.vue

@@ -0,0 +1,29 @@
+<template>
+  <Action
+    text="Reset Views to Default"
+    icon="home"
+    :variant="variant"
+    @click="reset"
+  />
+</template>
+
+<script setup lang="ts">
+import { ScanView, ViewSelectionActions } from "@3cr/types-ts";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+const viewer3cr = useViewer3cr();
+
+async function reset(): Promise<void> {
+  await viewer3cr.viewSelection(ViewSelectionActions.vs06);
+  await viewer3cr.viewSelection(ViewSelectionActions.vs05);
+}
+</script>

package/src/components/modal/actions/Rotate2dAction.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-menu
+    data-testid="menu"
+    v-model="menuState"
+    location="top"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ props: menu }">
+      <Action
+        v-bind="menu"
+        :text="`Rotate ${getViewName(view)} View`"
+        icon="360"
+        :variant="variant"
+      />
+    </template>
+    <v-card>
+      <v-card-title class="text-body-1">
+        <span>Rotate {{ getViewName(view) }} View</span>
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          data-testid="rotation"
+          v-model="rotationDeg"
+          type="number"
+          variant="outlined"
+          suffix="deg"
+          hide-details
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn data-testid="rotate" color="primary" @click="rotate">
+          Rotate
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { getViewName } from "@/dataLayer/scanState";
+import { computed, ref } from "vue";
+import { ScanView } from "@3cr/types-ts";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+}
+
+type Emits = {
+  'update:modal': [value: boolean];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+const emit = defineEmits<Emits>();
+
+const viewer3cr = useViewer3cr();
+const menu = ref<boolean>(false);
+const rotationDeg = ref<number>(0);
+
+const menuState = computed({
+  get(): boolean {
+    return menu.value;
+  },
+  set(value: boolean): void {
+    menu.value = value;
+    emit('update:modal', value);
+  }
+});
+
+async function rotate(): Promise<void> {
+  await viewer3cr.rotateByDeg(props.view, rotationDeg.value);
+}
+</script>

package/src/components/modal/actions/Slice3dAction.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-menu
+    v-model="menuState"
+    data-testid="menu"
+    :close-on-content-click="false"
+    location="end"
+  >
+    <template #activator="{ props }">
+      <Action
+        v-bind="props"
+        text="Slice the 3D Volume"
+        icon="cut"
+        :variant="variant"
+      />
+    </template>
+    <v-card min-width="400" class="pb-2">
+      <v-card-title>Slice into the 3D Volume</v-card-title>
+      <v-card-text>
+        <DoubleSliderSelector
+          v-model:value="tSlider"
+          label="Transverse"
+          v-bind="tMinMax"
+        />
+        <DoubleSliderSelector
+          v-model:value="sSlider"
+          label="Sagittal"
+          v-bind="sMinMax"
+        />
+        <DoubleSliderSelector
+          v-model:value="cSlider"
+          label="Coronal"
+          v-bind="cMinMax"
+        />
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import {cMinMax, cSlider, sMinMax, sSlider, tMinMax, tSlider} from "@/dataLayer/scanState";
+import DoubleSliderSelector from "@/components/sliders/DoubleSliderSelector.vue";
+import {ScanView} from "@3cr/types-ts";
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+}
+
+type Emits = {
+  'update:modal': [value: boolean];
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+const emit = defineEmits<Emits>();
+
+const menu = ref<boolean>(false);
+
+const menuState = computed({
+  get(): boolean {
+    return menu.value;
+  },
+  set(value: boolean): void {
+    menu.value = value;
+    emit('update:modal', value);
+  }
+});
+</script>