@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/modal/WebGL3DR.vue

@@ -1,91 +0,0 @@
-<template>
-  <div id="webgl-container">
-    <canvas id="canvas" ref="canvas" width="100%" height="100%" tabindex="-1"></canvas>
-    <div id="overlay" ref="overlay">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { useViewerOptions } from '@/composables/useViewerOptions';
-
-const viewer3cr = useViewer3cr();
-const options = useViewerOptions();
-const canvas = ref<HTMLCanvasElement>();
-const overlay = ref<HTMLDivElement>();
-
-const emit = defineEmits<{
-  instance_loaded: [void];
-}>();
-
-onMounted(async () => {
-  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-    // Mobile device style: fill the whole browser client area with the game canvas:
-    const meta = document.createElement('meta');
-    meta.name = 'viewport';
-    meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
-    document.head.appendChild(meta);
-  }
-
-  if (navigator.storage && navigator.storage.estimate) {
-    const quota = await navigator.storage.estimate();
-    const percentageUsed = (quota.usage! / quota.quota!) * 100;
-    console.log(`You've used ${percentageUsed}% of the available storage.`);
-    const remaining = quota.quota! - quota.usage!;
-    console.log(`You can write up to ${remaining} more bytes.`);
-  }
-
-  overlay.value!.addEventListener('wheel', (e: WheelEvent) => {
-    e.preventDefault();
-    canvas.value!.dispatchEvent(new WheelEvent(e.type, e));
-  });
-
-  injectEventListener('click');
-  injectEventListener('dblclick');
-  injectEventListener('auxclick');
-  injectEventListener('mousedown');
-  injectEventListener('mousemove');
-  injectEventListener('mouseup');
-  injectEventListener('mouseout');
-  injectEventListener('mouseover');
-  injectEventListener('mouseenter');
-  injectEventListener('mouseleave');
-  injectEventListener('contextmenu');
-
-  await viewer3cr.register(canvas.value!);
-
-  if (options.value.OnViewerLoaded) {
-    await options.value.OnViewerLoaded(viewer3cr);
-  }
-
-  emit('instance_loaded');
-});
-
-function injectEventListener(type: keyof HTMLElementEventMap): void {
-  overlay.value!.addEventListener(type, (e: Event) => {
-    e.preventDefault();
-    canvas.value!.dispatchEvent(new MouseEvent(type, e));
-  });
-}
-
-defineExpose({ canvas, overlay });
-</script>
-
-<style scoped lang="scss">
-#webgl-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-#canvas,
-#overlay {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>

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

@@ -1,70 +0,0 @@
-import { DOMWrapper, flushPromises, mount } from '@vue/test-utils';
-import { defaultLoadViewerOptions } from '@/models/loadViewerOptions';
-import CloseViewerModal from '@/components/modal/CloseViewerModal.vue';
-
-class CloseViewerModalHarness {
-  dialog(): DOMWrapper<Element> {
-    return new DOMWrapper(document.querySelector('[data-testid="dialog"]'));
-  }
-
-  cancel() {
-    return this.dialog().findComponent('[data-testid="cancel"]');
-  }
-
-  close() {
-    return this.dialog().findComponent('[data-testid="close"]');
-  }
-
-  save() {
-    return this.dialog().findComponent('[data-testid="save"]');
-  }
-}
-
-describe('CloseViewerModal tests', () => {
-  const harness = new CloseViewerModalHarness();
-
-  it('should open modal', () => {
-    const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mount(CloseViewerModal, { props });
-    expect(wrapper.exists()).toBeTruthy();
-  });
-
-  it('should close modal', async () => {
-    const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mount(CloseViewerModal, { props });
-    expect(wrapper.exists()).toBeTruthy();
-    await wrapper.setProps({ modal: false });
-    expect(wrapper.text()).toBeFalsy();
-  });
-
-  it('should cancel modal', async () => {
-    const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mount(CloseViewerModal, { props });
-    expect(wrapper.exists()).toBeTruthy();
-    await harness.cancel().trigger('click');
-    expect(wrapper.text()).toBeFalsy();
-  });
-
-  it('should close modal without saving', async () => {
-    const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mount(CloseViewerModal, { props });
-    const onExitViewerSpy = vi.spyOn(defaultLoadViewerOptions, 'OnExitViewer');
-    expect(wrapper.exists()).toBeTruthy();
-    await harness.close().trigger('click');
-    expect(onExitViewerSpy).toHaveBeenCalled();
-    expect(wrapper.text()).toBeFalsy();
-  });
-
-  it('should close modal and save session', async () => {
-    const props = { modal: true, options: defaultLoadViewerOptions };
-    const wrapper = mount(CloseViewerModal, { props });
-    const onExitViewerSpy = vi.spyOn(defaultLoadViewerOptions, 'OnExitViewer');
-    const onSaveSessionSpy = vi.spyOn(defaultLoadViewerOptions, 'OnSaveSession');
-    expect(wrapper.exists()).toBeTruthy();
-    await harness.save().trigger('click');
-    await flushPromises();
-    expect(onExitViewerSpy).toHaveBeenCalled();
-    expect(onSaveSessionSpy).toHaveBeenCalled();
-    expect(wrapper.text()).toBeFalsy();
-  });
-});

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

@@ -1,11 +0,0 @@
-import { demoOptions } from '@/components/demo/options';
-import { mount } from '@vue/test-utils';
-import ViewerNavigationDrawerContent from '@/components/modal/ViewerNavigationDrawerContent.vue';
-
-describe('ViewerNavigationDrawerContent tests', () => {
-  it('should mount', () => {
-    const props = { drawer: false, options: demoOptions.value };
-    const wrapper = mount(ViewerNavigationDrawerContent, { props });
-    expect(wrapper).toBeTruthy();
-  });
-});

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

@@ -1,46 +0,0 @@
-import { useVersion3cr } from '@/composables/useVersion3cr';
-import { nextTick } from 'vue';
-import { VBtn } from 'vuetify/components';
-import { mount } from '@vue/test-utils';
-import ViewerNavigationDrawerFooter from '@/components/modal/ViewerNavigationDrawerFooter.vue';
-
-describe('ViewerNavigationDrawerFooter tests', () => {
-  beforeEach(() => {
-    const version3cr = useVersion3cr();
-    version3cr.value = '1.0.0';
-  });
-
-  it('should mount', () => {
-    const props = { drawer: false };
-    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should open modals', async () => {
-    const props = { drawer: true };
-    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
-    for (let i = 0; i < 4; ++i) {
-      const id = `[data-testid="footer-${i}"]`;
-      const footerItem = wrapper.find(id);
-      expect(footerItem).toBeTruthy();
-      const button = footerItem.findComponent(VBtn);
-      expect(button).toBeTruthy();
-      await button.trigger('click');
-      await nextTick();
-    }
-  });
-
-  it('should display version', () => {
-    const props = { drawer: true };
-    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
-    const version = wrapper.find('[data-testid="version"]');
-    expect(version.text()).toEqual('Version 1.0.0');
-  });
-
-  it('should display short version', () => {
-    const props = { drawer: false };
-    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
-    const version = wrapper.find('[data-testid="version"]');
-    expect(version.text()).toEqual('1.0.0');
-  });
-});

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

@@ -1,40 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { demoType } from '@/components/demo/options';
-import { nextTick } from 'vue';
-import ViewerNavigationDrawerHeader from '@/components/modal/ViewerNavigationDrawerHeader.vue';
-import { DemoType } from '@/types/demo-type';
-
-describe('ViewerNavigationDrawerHeader tests', () => {
-  it('should mount', () => {
-    const wrapper = mount(ViewerNavigationDrawerHeader);
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should show collapsed licence logo', () => {
-    const props = { drawer: false };
-    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
-    expect(wrapper.find('img').exists()).toBeTruthy();
-  });
-
-  it('should show expanded licence logo', () => {
-    const props = { drawer: true };
-    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
-    expect(wrapper.find('img').exists()).toBeTruthy();
-  });
-
-  it('should show collapsed patient logo', async () => {
-    vi.spyOn(demoType, 'value', 'get').mockReturnValue(DemoType.Patient);
-    const props = { drawer: false };
-    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
-    await nextTick();
-    expect(wrapper.find('img').exists()).toBeTruthy();
-  });
-
-  it('should show expanded patient logo', async () => {
-    vi.spyOn(demoType, 'value', 'get').mockReturnValue(DemoType.Patient);
-    const props = { drawer: true };
-    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
-    await nextTick();
-    expect(wrapper.find('img').exists()).toBeTruthy();
-  });
-});

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

@@ -1,26 +0,0 @@
-<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-checkbox :model-value="isEnabled" color="primary" density="compact" hide-details @click="toggleVisibility" />
-    </v-col>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { scanState } from '@/models/scanState';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-
-const viewer3cr = useViewer3cr();
-
-const isEnabled = computed(() => {
-  return scanState.value.NavigationCube.Interactivity.Value;
-});
-
-async function toggleVisibility(): Promise<void> {
-  await viewer3cr.setNavCubeInteractivity(!isEnabled.value);
-}
-</script>

package/src/components/modal/actions/__tests__/NavigationCubeAction.spec.ts

@@ -1,25 +0,0 @@
-import { Viewer3crService } from '@/services/viewer-3cr.service';
-import { scanState } from '@/models/scanState';
-import { CurrentScanState } from '@3cr/types-ts';
-import { VCheckbox } from 'vuetify/components';
-import { mount } from '@vue/test-utils';
-import NavigationCubeAction from '@/components/modal/actions/NavigationCubeAction.vue';
-
-describe('NavigationCubeAction tests', () => {
-  const navCubeInteractivitySpy = vi.spyOn(Viewer3crService.prototype, 'setNavCubeInteractivity').mockResolvedValue();
-
-  it('should show navigation cube', async () => {
-    const wrapper = mount(NavigationCubeAction);
-    const switchCmp = wrapper.findComponent(VCheckbox);
-    await switchCmp.trigger('click');
-    expect(navCubeInteractivitySpy).toHaveBeenCalledWith(true);
-  });
-
-  it('should hide navigation cube', async () => {
-    scanState.value = { NavigationCube: { Interactivity: { Value: true } } } as CurrentScanState;
-    const wrapper = mount(NavigationCubeAction);
-    const switchWrapper = wrapper.findComponent(VCheckbox);
-    await switchWrapper.trigger('click');
-    expect(navCubeInteractivitySpy).toHaveBeenCalledWith(false);
-  });
-});

package/src/components/modal/buttons/AutoAnnotateBtn.vue

@@ -1,197 +0,0 @@
-<template>
-  <div>
-    <v-menu :close-on-content-click="false" v-if="opts.OnAutoAnnotate">
-      <template #activator="{ props }">
-        <v-btn v-bind="props" data-testid="menu" class="mx-2" color="primary" prepend-icon="psychology" variant="flat">
-          AI
-        </v-btn>
-      </template>
-      <v-list>
-        <v-list-item
-          data-testid="auto_annotate"
-          v-if="opts.OnAutoAnnotate"
-          @click="autoAnnotate()"
-          :disabled="done"
-          prepend-icon="flash_auto"
-          :append-icon="done ? 'check' : undefined"
-        >
-          <v-list-item-title>Auto Annotate</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-    <v-dialog v-model:model-value="loading">
-      <template #default>
-        <v-card :title="`Annotiva AI: ${type}`" max-width="450" class="mx-auto">
-          <div class="prompt">
-            <div style="font-size: 6px; top: 30px; left: 40px">
-              <div class="cog" style="--cog-colour: #5a93ed"></div>
-              <div
-                class="cog anti-clockwise"
-                style="--cog-colour: #2955da; margin-top: 2.25em; margin-left: -3.375em"
-              ></div>
-              <div class="cog" style="--cog-colour: #bad3f8; margin-top: 5.625em; margin-left: -1.125em"></div>
-            </div>
-            <v-card-text class="ml-10" style="font-size: 16px">
-              {{ text }}
-            </v-card-text>
-          </div>
-        </v-card>
-      </template>
-    </v-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useViewerOptions } from '@/composables/useViewerOptions';
-import { ref } from 'vue';
-
-const opts = useViewerOptions();
-const loading = ref<boolean>(false);
-const done = ref<boolean>(false);
-const text = ref<string>('');
-const type = ref<string>('');
-
-async function autoAnnotate() {
-  type.value = 'Auto Annotate';
-  text.value = getRandomItemFromList(loaderTexts);
-  loading.value = true;
-  await opts.value!.OnAutoAnnotate!();
-  setTimeout(() => {
-    loading.value = false;
-    done.value = true;
-  }, 4000);
-}
-
-function getRandomItemFromList(list: Array<string>) {
-  const randomIndex = Math.floor(Math.random() * list.length);
-  return list[randomIndex];
-}
-
-const loaderTexts = [
-  "AI: Analyzing X-rays faster than you can say 'supercalifragilisticexpialidocious'!",
-  'Just a moment, our AI is putting on its lab coat.',
-  'Scanning pixels like Sherlock scans clues.',
-  'Our AI is channeling its inner doctor.',
-  'Hang tight, our AI is donning its stethoscope.',
-  "Analyzing with AI precision – because guessing isn't an option!",
-  'Our AI is checking the scan like a detective at a crime scene.',
-  'Crunching data like a pro! Results on the way.',
-  'AI is on it, decoding your scan like a mystery novel.',
-  'Our AI is in deep thought... about your health!',
-  'Letting our AI take a close look at those pixels.',
-  'Your scan is getting the AI treatment.',
-  'Analyzing like a champ! Our AI is almost there.',
-  'Hold tight! Our AI is putting on its thinking cap.',
-  'AI is hard at work, diagnosing like a pro!',
-  'Our AI is busy solving the puzzle of your scan.',
-  'AI is processing... and sipping virtual coffee.',
-  "Your scan is in good hands – AI's hands.",
-  'Just a sec, our AI is perfecting the diagnosis.',
-  'Scanning... AI style.',
-  'AI is reading your scan like an open book.',
-  'Give us a moment, our AI is analyzing every detail.',
-  'Our AI is double-checking for good measure.',
-  'AI: Making sense of pixels and patterns.',
-  'AI is decoding your scan, Sherlock style.',
-  'Processing with precision – AI is on it.',
-  'Our AI is diving deep into the data.',
-  'AI is dissecting the details for an accurate diagnosis.',
-  'Hold on, our AI is piecing together the puzzle.',
-  'AI is at the helm, navigating your scan results.',
-  'Analyzing with AI magic – results coming up!',
-  'Our AI is untangling the mysteries of your scan.',
-  "Processing... AI's putting its brain to work.",
-  'Your scan + our AI = accurate results.',
-  'AI is fine-tuning the analysis for perfection.',
-  'Letting our AI do the heavy lifting – almost done!',
-  'AI is reading the scan like a pro.',
-  'Our AI is on a mission – accurate results ahead.',
-  'Analyzing with AI expertise – hang tight!',
-  'AI is taking a closer look – results are on the way.'
-];
-</script>
-<style>
-.prompt {
-  margin-left: 20px;
-  margin-right: 20px;
-  padding: 20px;
-  text-align: center;
-  color: black;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-  z-index: 100;
-  position: relative;
-}
-
-.prompt::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 16px;
-  padding: 3px;
-  background: linear-gradient(to right, #6fb3f2, #4e51f5);
-
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-}
-
-div.cog {
-  nfont-size: 25px;
-  border-radius: 0.25em;
-  border: solid 0.55em var(--cog-colour, #eee);
-  display: inline-block;
-  padding: 1.125em;
-  position: absolute;
-  top: inherit;
-  left: inherit;
-  -webkit-animation: rotate var(--cog-speed, 3s) linear infinite;
-  -moz-animation: rotate var(--cog-speed, 3s) linear infinite;
-  animation: rotate var(--cog-speed, 3s) linear infinite;
-}
-
-div.cog.anti-clockwise {
-  -webkit-animation-direction: reverse;
-  -moz-animation-direction: reverse;
-  animation-direction: reverse;
-}
-
-div.cog::before {
-  border: solid 0.55em var(--cog-colour, #eee);
-  padding: 1.125em;
-  position: absolute;
-  content: '';
-  transform: translate(-1.675em, -1.675em) rotate(45deg);
-  border-radius: 0.25em;
-}
-
-div.cog::after {
-  content: '';
-  position: absolute;
-  border: solid 1em var(--cog-colour, #eee);
-  padding: 0.375em;
-  border-radius: 1.8125em;
-  transform: translate(-1.375em, -1.375em);
-  filter: brightness(87.5%);
-}
-
-@-moz-keyframes rotate {
-  100% {
-    -moz-transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-</style>

package/src/components/modal/buttons/__tests__/AutoAnnotateBtn.spec.ts

@@ -1,28 +0,0 @@
-import { describe } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { useViewerOptions } from '@/composables/useViewerOptions';
-import { VBtn } from 'vuetify/components';
-import AutoAnnotateBtn from '@/components/modal/buttons/AutoAnnotateBtn.vue';
-
-describe('AutoAnnotateBtn tests', () => {
-  const options = useViewerOptions();
-
-  it('should mount', () => {
-    const wrapper = mount(AutoAnnotateBtn);
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should call OnAutoAnnotate', async () => {
-    options.value.OnAutoAnnotate = vi.fn();
-    const wrapper = mount(AutoAnnotateBtn);
-    await wrapper.findComponent(VBtn).trigger('click');
-    expect(options.value.OnAutoAnnotate).toHaveBeenCalled();
-  });
-
-  it('should not call OnAutoAnnotate', () => {
-    options.value.OnAutoAnnotate = undefined;
-    const wrapper = mount(AutoAnnotateBtn);
-    const button = wrapper.findComponent(VBtn);
-    expect(button.exists()).toBeFalsy();
-  });
-});

package/src/components/modal/menus/FileMenu.vue

@@ -1,73 +0,0 @@
-<template>
-  <v-menu :close-on-content-click="false">
-    <template #activator="{ props }">
-      <v-btn v-bind="props" data-testid="menu" class="mr-2" color="primary" prepend-icon="description" variant="flat">
-        File
-      </v-btn>
-    </template>
-    <v-list>
-      <v-list-item
-        data-testid="load-new-dicom-series"
-        v-if="opts.OnLoadNewDicomSeries"
-        @click="opts.OnLoadNewDicomSeries()"
-        prepend-icon="upload"
-      >
-        <v-list-item-title>Load New DICOM Series</v-list-item-title>
-      </v-list-item>
-      <v-list-item
-        data-testid="download-dicom-series"
-        v-if="opts.OnDownloadDicomSeries"
-        @click="opts.OnDownloadDicomSeries()"
-        prepend-icon="download"
-      >
-        <v-list-item-title>Download DICOM Series</v-list-item-title>
-      </v-list-item>
-      <v-list-item
-        data-testid="load-saved-session"
-        v-if="opts.OnLoadSavedSession"
-        @click="opts.OnLoadSavedSession()"
-        prepend-icon="sync"
-      >
-        <v-list-item-title>Load Saved Session</v-list-item-title>
-      </v-list-item>
-      <v-list-item
-        data-testid="send-to-3rd-party"
-        v-if="opts.OnSendTo3rdParty"
-        @click="opts.OnSendTo3rdParty()"
-        prepend-icon="send"
-      >
-        <v-list-item-title>Send to 3rd Party</v-list-item-title>
-      </v-list-item>
-      <v-list-item
-        data-testid="share-to-mobile"
-        v-if="opts.OnShareToMobile"
-        @click="opts.OnShareToMobile()"
-        prepend-icon="share"
-      >
-        <v-list-item-title>Share to Mobile / VR</v-list-item-title>
-      </v-list-item>
-      <v-list-item data-testid="close" @click="close" prepend-icon="close">
-        <v-list-item-title>Close Viewer</v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-<script setup lang="ts">
-import { useViewerOptions } from '@/composables/useViewerOptions';
-
-type Emits = {
-  close: [void];
-};
-
-const emit = defineEmits<Emits>();
-
-const opts = useViewerOptions();
-
-async function close(): Promise<void> {
-  if (opts.value.OnClosePopup) {
-    await opts.value.OnClosePopup();
-  }
-  emit('close');
-}
-</script>