@3cr/viewer-browser 0.0.200 → 0.0.246

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

@@ -1,17 +1,16 @@
-import { describe, expect, it, vi } from "vitest";
-import { mountVuetify } from "~/helper";
-import { CurrentScanState, LayoutActions, ScanView } from "@3cr/types-ts";
-import { Viewer3cr } from "@/dataLayer/viewer3cr";
-import { previousLayout, scanState } from "@/dataLayer/scanState";
-import FullscreenAction from "../FullscreenAction.vue";
+import { CurrentScanState, LayoutActions, ScanView } from '@3cr/types-ts';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { previousLayout, scanState } from '@/models/scanState';
+import FullscreenAction from '../FullscreenAction.vue';
+import { mount } from '@vue/test-utils';
 
 describe('FullscreenAction tests', () => {
   const props = { view: ScanView.Coronal };
-  const layoutsSpy = vi.spyOn(Viewer3cr.prototype, 'layouts').mockResolvedValue();
-  const viewSpy = vi.spyOn(Viewer3cr.prototype, 'viewSelection').mockResolvedValue();
+  const layoutsSpy = vi.spyOn(Viewer3crService.prototype, 'layouts').mockResolvedValue();
+  const viewSpy = vi.spyOn(Viewer3crService.prototype, 'viewSelection').mockResolvedValue();
 
   it('should fullscreen', async () => {
-    const wrapper = mountVuetify(FullscreenAction, props);
+    const wrapper = mount(FullscreenAction, { props });
     const button = wrapper.find('[data-testid="button"]');
     await button.trigger('click');
     expect(layoutsSpy).toHaveBeenCalledWith(LayoutActions.lo01);
@@ -20,7 +19,7 @@ describe('FullscreenAction tests', () => {
 
   it('should exit fullscreen', async () => {
     scanState.value = { Layout: { PositionData: [{}] } } as CurrentScanState;
-    const wrapper = mountVuetify(FullscreenAction, props);
+    const wrapper = mount(FullscreenAction, { props });
     const button = wrapper.find('[data-testid="button"]');
     await button.trigger('click');
     expect(layoutsSpy).toHaveBeenCalledWith(previousLayout.value);

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

@@ -1,24 +1,24 @@
-import { describe, expect, it, vi } from "vitest";
-import { Viewer3cr } from "@/dataLayer/viewer3cr";
-import { mountVuetify } from "~/helper";
-import { scanState } from "@/dataLayer/scanState";
-import { CurrentScanState } from "@3cr/types-ts";
-import NavigationCubeAction from "@/components/modal/actions/NavigationCubeAction.vue";
+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(Viewer3cr.prototype, 'setNavCubeInteractivity').mockResolvedValue();
+  const navCubeInteractivitySpy = vi.spyOn(Viewer3crService.prototype, 'setNavCubeInteractivity').mockResolvedValue();
 
   it('should show navigation cube', async () => {
-    const wrapper = mountVuetify(NavigationCubeAction);
-    const switchCmp = wrapper.findComponent('[data-testid="switch"]');
+    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 = mountVuetify(NavigationCubeAction);
-    const switchWrapper = wrapper.findComponent('[data-testid="switch"]');
+    const wrapper = mount(NavigationCubeAction);
+    const switchWrapper = wrapper.findComponent(VCheckbox);
     await switchWrapper.trigger('click');
     expect(navCubeInteractivitySpy).toHaveBeenCalledWith(false);
   });

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

@@ -1,18 +1,17 @@
-import { describe, expect, it, vi } from "vitest";
-import { mountVuetify } from "~/helper";
-import { ScanView } from "@3cr/types-ts";
-import { Viewer3cr } from "@/dataLayer/viewer3cr";
-import PanAction from "@/components/modal/actions/PanAction.vue";
+import { ScanView } from '@3cr/types-ts';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { mount } from '@vue/test-utils';
+import PanAction from '@/components/modal/actions/PanAction.vue';
 
 describe('PanAction tests', () => {
-  const spy = vi.spyOn(Viewer3cr.prototype, 'hoverOverCanvas').mockResolvedValue();
-  const element = { addEventListener: vi.fn(), removeEventListener: vi.fn() };
+  const spy = vi.spyOn(Viewer3crService.prototype, 'hoverOverCanvas').mockResolvedValue();
+  const element = { addEventListener: vi.fn(), removeEventListener: vi.fn() } as unknown as HTMLElement;
   const windowAddSpy = vi.spyOn(window, 'addEventListener');
   // const windowRemoveSpy = vi.spyOn(window, 'removeEventListener');
 
   it('should setup event listeners', async () => {
     const props = { view: ScanView.Volume, element };
-    mountVuetify(PanAction, props);
+    mount(PanAction, { props });
     expect(element.addEventListener).toHaveBeenCalledWith('mousedown', expect.anything());
     expect(element.addEventListener).toHaveBeenCalledWith('mouseenter', expect.anything());
     expect(element.addEventListener).toHaveBeenCalledWith('mouseleave', expect.anything());
@@ -22,7 +21,7 @@ describe('PanAction tests', () => {
 
   it('should disable unity input while active', async () => {
     const props = { view: ScanView.Volume, element };
-    const wrapper = mountVuetify(PanAction, props);
+    const wrapper = mount(PanAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(false);
@@ -32,7 +31,7 @@ describe('PanAction tests', () => {
     const element = document.createElement('div');
     document.body.appendChild(element);
     const props = { view: ScanView.Volume, element };
-    const wrapper = mountVuetify(PanAction, props);
+    const wrapper = mount(PanAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
     element.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0 }));

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

@@ -1,14 +1,14 @@
-import { describe, expect, it, vi } from "vitest";
-import { Viewer3cr } from "@/dataLayer/viewer3cr";
-import { mountVuetify } from "~/helper";
-import { ViewSelectionActions } from "@3cr/types-ts";
-import ResetViewAction from "@/components/modal/actions/ResetViewAction.vue";
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { ScanView, ViewSelectionActions } from '@3cr/types-ts';
+import { mount } from '@vue/test-utils';
+import ResetViewAction from '@/components/modal/actions/ResetViewAction.vue';
 
 describe('ResetViewAction tests', () => {
-  const viewSelectionSpy = vi.spyOn(Viewer3cr.prototype, 'viewSelection').mockResolvedValue();
+  const viewSelectionSpy = vi.spyOn(Viewer3crService.prototype, 'viewSelection').mockResolvedValue();
 
   it('should reset view', async () => {
-    const wrapper = mountVuetify(ResetViewAction);
+    const props = { view: ScanView.Volume };
+    const wrapper = mount(ResetViewAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
     expect(viewSelectionSpy).toHaveBeenCalledWith(ViewSelectionActions.vs06);

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

@@ -1,15 +1,13 @@
-import { describe, expect, it, vi } from "vitest";
-import { mountVuetify } from "~/helper";
-import { ScanView } from "@3cr/types-ts";
-import { DOMWrapper } from "@vue/test-utils";
-import { Viewer3cr } from "@/dataLayer/viewer3cr";
-import Rotate2dAction from "@/components/modal/actions/Rotate2dAction.vue";
+import { ScanView } from '@3cr/types-ts';
+import { DOMWrapper, mount } from '@vue/test-utils';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import Rotate2dAction from '@/components/modal/actions/Rotate2dAction.vue';
 
 describe('Rotate2dAction tests', () => {
   it('should apply rotation', async () => {
     const props = { view: ScanView.Sagittal };
-    const spy = vi.spyOn(Viewer3cr.prototype, 'rotateByDeg').mockResolvedValue();
-    const wrapper = mountVuetify(Rotate2dAction, props);
+    const spy = vi.spyOn(Viewer3crService.prototype, 'rotateByDeg').mockResolvedValue();
+    const wrapper = mount(Rotate2dAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
 

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

@@ -1,14 +1,32 @@
-import {describe, expect, it} from "vitest";
-import {mountVuetify} from "~/helper";
-import Slice3dAction from "@/components/modal/actions/Slice3dAction.vue";
-import {DOMWrapper} from "@vue/test-utils";
+import { DOMWrapper, flushPromises, mount } from '@vue/test-utils';
+import { ScanView } from '@3cr/types-ts';
+import Slice3dAction from '@/components/modal/actions/Slice3dAction.vue';
+import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
+import { cSlider, sSlider, tSlider } from '@/models/scanState';
 
 describe('Slice3dAction tests', () => {
   it('should open slice menu', async () => {
-    const wrapper = mountVuetify(Slice3dAction);
+    const props = { view: ScanView.Volume };
+    const wrapper = mount(Slice3dAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
     expect(menu.exists()).toBeTruthy();
   });
+
+  it('should set double-slider-selector model', async () => {
+    const props = { view: ScanView.Volume };
+    const wrapper = mount(Slice3dAction, { props });
+    await wrapper.findByTestId('button').trigger('click');
+
+    const sliders = wrapper.findAllComponents(DoubleSliderSelector);
+    for (const slider of sliders) {
+      await slider.setValue([40, 60]);
+      await flushPromises();
+    }
+
+    expect(tSlider.value).toEqual([40, 60]);
+    expect(sSlider.value).toEqual([40, 60]);
+    expect(cSlider.value).toEqual([40, 60]);
+  });
 });

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

@@ -1,17 +1,15 @@
-import {describe, expect, it, vi} from "vitest";
-import { ScanView } from "@3cr/types-ts";
-import { mountVuetify } from "~/helper";
-import { Viewer3cr } from "@/dataLayer/viewer3cr";
-import ZoomAction from "@/components/modal/actions/ZoomAction.vue";
-import {DOMWrapper} from "@vue/test-utils";
+import { ScanView } from '@3cr/types-ts';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { DOMWrapper, mount } from '@vue/test-utils';
+import ZoomAction from '@/components/modal/actions/ZoomAction.vue';
 
 describe('ZoomAction tests', () => {
   const props = { view: ScanView.Sagittal, percentage: 25 };
-  const zoomInSpy = vi.spyOn(Viewer3cr.prototype, 'zoomIn');
-  const zoomOutSpy = vi.spyOn(Viewer3cr.prototype, 'zoomOut');
+  const zoomInSpy = vi.spyOn(Viewer3crService.prototype, 'zoomIn');
+  const zoomOutSpy = vi.spyOn(Viewer3crService.prototype, 'zoomOut');
 
   it('should zoom in', async () => {
-    const wrapper = mountVuetify(ZoomAction, props);
+    const wrapper = mount(ZoomAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
 
@@ -22,7 +20,7 @@ describe('ZoomAction tests', () => {
   });
 
   it('should zoom out', async () => {
-    const wrapper = mountVuetify(ZoomAction, props);
+    const wrapper = mount(ZoomAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
 

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

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

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

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

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

@@ -0,0 +1,106 @@
+<template>
+  <v-menu v-model="menuState" :close-on-content-click="false">
+    <template #activator="{ props }">
+      <v-btn v-bind="mergeProps(props, activatorProps)" color="primary" prepend-icon="settings" variant="flat">
+        Settings
+      </v-btn>
+    </template>
+    <v-card id="settings-card" width="350" class="pa-4">
+      <ValueSelector
+        v-model:value="scanState.Display.Brightness"
+        data-testid="brightness"
+        label="Adjust Brightness"
+        prepend="percent"
+      />
+      <ValueSelector
+        v-model:value="scanState.Display.Contrast"
+        data-testid="contrast"
+        label="Adjust Contrast"
+        prepend="percent"
+      />
+      <ValueSelector
+        v-model:value="scanState.Display.Opacity"
+        data-testid="opacity"
+        label="Adjust Opacity"
+        prepend="percent"
+      />
+      <v-divider class="my-4" />
+      <ValueSelector
+        v-model:value="scanState.InteractionSettings.PanSensivitity"
+        data-testid="pan"
+        :min="0"
+        :max="100"
+        label="Pan Sensitivity"
+        prepend="percent"
+      />
+      <ValueSelector
+        v-model:value="scanState.InteractionSettings.ZoomSensitivity"
+        data-testid="zoom"
+        :min="0"
+        :max="100"
+        label="Zoom Sensitivity"
+        prepend="percent"
+      />
+      <ValueSelector
+        v-model:value="scanState.InteractionSettings.RotateSensitivity"
+        data-testid="rotate"
+        :min="0"
+        :max="100"
+        label="Rotate Sensitivity"
+        prepend="percent"
+      />
+      <ValueSelector
+        v-model:value="scanState.InteractionSettings.CameraRotateSensitivity"
+        data-testid="camera"
+        :min="0"
+        :max="100"
+        label="Camera Rotate Sensitivity"
+        prepend="percent"
+      />
+      <v-divider class="my-4" />
+      <NavigationCubeAction />
+      <v-divider class="my-4" v-if="isDemo" />
+      <ValueSelector
+        v-if="isDemo"
+        v-model:value="stlResolution"
+        data-testid="stl_resolution"
+        :min="1"
+        :max="25"
+        :step="1"
+        label="STL Resolution (max 25%)"
+        prepend="percent"
+      />
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { scanState, stlResolution } from '@/models/scanState';
+import { computed, mergeProps } from 'vue';
+import { isDemo } from '@/components/demo/options';
+
+interface Props {
+  modelValue?: boolean;
+  activatorProps?: Record<string, unknown>;
+}
+
+type Emits = {
+  'update:modelValue': [boolean];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  activatorProps: () => ({})
+});
+
+const emit = defineEmits<Emits>();
+
+const menuState = computed({
+  get(): boolean {
+    return props.modelValue;
+  },
+  set(value: boolean): void {
+    emit('update:modelValue', value);
+  }
+});
+</script>