@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/modal/ViewerScanView.vue

@@ -1,110 +1,266 @@
 <template>
-  <div :id="`view-${view}`" class="scan-view" ref="container">
-    <v-hover>
-      <template #default="{ isHovering, props }">
-        <v-row v-bind="props" class="flex-nowrap h-100" no-gutters>
-          <v-col style="min-width: 0">
-            <v-row class="flex-column h-100" no-gutters>
-              <v-col class="flex-grow-0">
-                <div class="d-flex pa-2 pl-3 align-center">
-                  <span class="text-white">{{ viewName }}</span>
-                  <v-tooltip v-if="horizontalFlip" location="bottom">
-                    <template #activator="{ props }">
-                      <v-icon v-bind="props" icon="swap_horiz" color="blue-darken-1" class="ml-2" />
-                    </template>
-                    <span>This view has been flipped horizontally</span>
-                  </v-tooltip>
-                  <v-tooltip v-if="verticalFlip" location="bottom">
-                    <template #activator="{ props }">
-                      <v-icon v-bind="props" icon="swap_vert" color="blue-darken-1" class="ml-2" />
-                    </template>
-                    <span>This view has been flipped vertically</span>
-                  </v-tooltip>
-                </div>
-              </v-col>
-              <v-spacer />
-              <v-col class="flex-grow-0">
-                <Transition>
-                  <div v-show="isHovering || active">
-                    <ViewerActionRail :view="view" :element="container!" @modal="onActionModal" />
-                  </div>
-                </Transition>
-              </v-col>
-            </v-row>
-          </v-col>
-          <v-col class="flex-grow-0">
-            <VerticalSliderSelector
-              class="h-100 my-0 pa-2 pr-3"
-              v-if="view === ScanView.Transverse"
-              v-model:value="scanState.Orientations.Transverse.Slice"
-              v-bind="tMinMax"
-            />
-            <VerticalSliderSelector
-              class="h-100 my-0 pa-2 pr-3"
-              v-if="view === ScanView.Coronal"
-              v-model:value="scanState.Orientations.Coronal.Slice"
-              v-bind="cMinMax"
-            />
-            <VerticalSliderSelector
-              class="h-100 my-0 pa-2 pr-3"
-              v-if="view === ScanView.Sagittal"
-              v-model:value="scanState.Orientations.Sagittal.Slice"
-              v-bind="sMinMax"
-            />
-          </v-col>
-        </v-row>
-      </template>
+  <div
+    :id="viewId"
+    class="scan-view"
+    ref="container"
+    @mouseenter="onMouseEnter"
+    @mousedown="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @touchstart="onMouseEnter"
+    @touchmove="onMouseEnter"
+    @touchend="onMouseLeave"
+  >
+    <v-hover #default="{ isHovering, props }">
+      <div v-bind="props" class="d-flex h-100 w-100">
+        <div class="d-flex flex-column flex-fill overflow-hidden">
+          <div class="pa-2">
+            <span class="text-white">{{ name }}</span>
+            <v-tooltip v-if="horizontalFlip" location="bottom">
+              <template #activator="{ props }">
+                <v-icon v-bind="props" icon="swap_horiz" color="blue-darken-1" class="ml-2" />
+              </template>
+              <span>{{ t('texts.flippedHorizontally') }}</span>
+            </v-tooltip>
+            <v-tooltip v-if="verticalFlip" location="bottom">
+              <template #activator="{ props }">
+                <v-icon v-bind="props" icon="swap_vert" color="blue-darken-1" class="ml-2" />
+              </template>
+              <span>{{ t('texts.flippedVertically') }}</span>
+            </v-tooltip>
+          </div>
+          <v-spacer />
+          <div class="pa-2">
+            <Transition>
+              <div v-show="isHovering || isUserInteracting">
+                <ViewerActionRail :view="view" @modal="onActionModal" />
+              </div>
+            </Transition>
+          </div>
+        </div>
+        <div class="d-flex flex-column">
+          <VerticalSliderSelector
+            v-if="view === ScanView.Transverse"
+            class="px-4 my-0"
+            v-model:value="scanState.Orientations.Transverse.Slice"
+            v-bind="tMinMax"
+          />
+          <VerticalSliderSelector
+            v-if="view === ScanView.Coronal"
+            class="px-4 my-0"
+            v-model:value="scanState.Orientations.Coronal.Slice"
+            v-bind="cMinMax"
+          />
+          <VerticalSliderSelector
+            v-if="view === ScanView.Sagittal"
+            class="px-4 my-0"
+            v-model:value="scanState.Orientations.Sagittal.Slice"
+            v-bind="sMinMax"
+          />
+        </div>
+      </div>
     </v-hover>
   </div>
 </template>
 
 <script setup lang="ts">
 import {
-  getViewName,
   isHorizontalFlip,
   isVerticalFlip,
   cMinMax,
   scanState,
   sMinMax,
-  tMinMax
+  tMinMax,
+  isLayout2x2,
+  isLayout1x3,
+  isFullscreen
 } from '@/models/scanState';
 import { ScanView } from '@3cr/types-ts';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useLayout2x2 } from '@/components/modal/layouts/composables/useLayout2x2';
+import { useLayout1x3 } from '@/components/modal/layouts/composables/useLayout1x3';
+import { useLayoutFullscreen } from '@/components/modal/layouts/composables/useLayoutFullscreen';
+import { useI18n } from 'vue-i18n';
+import { useViewName } from '@/composables/useViewName';
+import { forceType } from '@/functions/tsHelper';
 
 interface Props {
   view: ScanView;
+  canvas: HTMLCanvasElement;
+  padding?: number;
+  radius?: number;
 }
 
-const props = defineProps<Props>();
+const NONE = { x: 0, y: 0, width: 0, height: 0 };
 
-const active = ref<boolean>(false);
+const props = withDefaults(defineProps<Props>(), {
+  padding: 8,
+  radius: 8
+});
+
+const { t } = useI18n();
+const { activeView, enableMouse, enableKeyboard } = storeToRefs(useViewerStore());
+const { fullscreen } = useLayoutFullscreen(props.canvas, props.padding);
+const { name } = useViewName(props.view);
+const layout2x2 = useLayout2x2(props.canvas, props.padding);
+const layout1x3 = useLayout1x3(props.canvas, props.padding);
+
+const isUserInteracting = ref<boolean>(false);
 const container = ref<HTMLDivElement>();
-const viewName = computed(() => getViewName(props.view));
+
 const horizontalFlip = computed(() => isHorizontalFlip(props.view));
 const verticalFlip = computed(() => isVerticalFlip(props.view));
 
+const viewId = computed(() => {
+  switch (props.view) {
+    case ScanView.Volume:
+      return 'volume';
+    case ScanView.Sagittal:
+      return 'sagittal';
+    case ScanView.Coronal:
+      return 'coronal';
+    case ScanView.Transverse:
+      return 'transverse';
+  }
+});
+/* v8 ignore start -- @Preserve */
+const layout = computed(() => {
+  if (isFullscreen.value) {
+    return { volume: fullscreen, sagittal: fullscreen, transverse: fullscreen, coronal: fullscreen };
+  } else if (isLayout2x2.value) {
+    return layout2x2;
+  } else if (isLayout1x3.value) {
+    return layout1x3;
+  } else {
+    return { volume: NONE, sagittal: NONE, transverse: NONE, coronal: NONE };
+  }
+});
+onMounted(() => {
+  container.value!.addEventListener('wheel', (e: WheelEvent) => {
+    e.preventDefault();
+    props.canvas.dispatchEvent(new WheelEvent(e.type, e));
+  });
+
+  container.value!.addEventListener(
+    'touchstart',
+    (e: TouchEvent) => {
+      props.canvas.dispatchEvent(new TouchEvent(e.type, forceType<TouchEventInit>(e)));
+    },
+    {
+      passive: true
+    }
+  );
+  container.value!.addEventListener(
+    'touchmove',
+    (e: TouchEvent) => {
+      props.canvas.dispatchEvent(new TouchEvent(e.type, forceType<TouchEventInit>(e)));
+    },
+    {
+      passive: true
+    }
+  );
+  container.value!.addEventListener(
+    'touchend',
+    (e: TouchEvent) => {
+      props.canvas.dispatchEvent(new TouchEvent(e.type, forceType<TouchEventInit>(e)));
+    },
+    {
+      passive: true
+    }
+  );
+  container.value!.addEventListener(
+    'touchcancel',
+    (e: TouchEvent) => {
+      props.canvas.dispatchEvent(new TouchEvent(e.type, forceType<TouchEventInit>(e)));
+    },
+    {
+      passive: true
+    }
+  );
+
+  container.value!.addEventListener('mousedown', (e: MouseEvent) => {
+    e.preventDefault();
+    props.canvas.dispatchEvent(new MouseEvent(e.type, e));
+  });
+
+  container.value!.addEventListener('mouseup', (e: MouseEvent) => {
+    e.preventDefault();
+    props.canvas.dispatchEvent(new MouseEvent(e.type, e));
+  });
+
+  container.value!.addEventListener('contextmenu', (e: Event) => {
+    e.preventDefault();
+  });
+});
+/* v8 ignore stop -- @Preserve */
+
 function onActionModal(value: boolean): void {
-  active.value = value;
+  isUserInteracting.value = value;
+}
+
+function onMouseEnter(): void {
+  activeView.value = props.view;
+  enableMouse.value = true;
+  enableKeyboard.value = true;
+}
+
+function onMouseLeave(): void {
+  activeView.value = undefined;
+  enableMouse.value = false;
+  enableKeyboard.value = false;
 }
 </script>
 
 <style scoped lang="scss">
-#view-0 {
+@use '@/assets/palette' as p;
+
+#volume {
   cursor: grab;
+  left: calc(v-bind('layout.volume.x') * 1px);
+  top: calc(v-bind('layout.volume.y') * 1px);
+  width: calc(v-bind('layout.volume.width') * 1px);
+  height: calc(v-bind('layout.volume.height') * 1px);
+}
+
+#transverse {
+  left: calc(v-bind('layout.transverse.x') * 1px);
+  top: calc(v-bind('layout.transverse.y') * 1px);
+  width: calc(v-bind('layout.transverse.width') * 1px);
+  height: calc(v-bind('layout.transverse.height') * 1px);
+}
+
+#sagittal {
+  left: calc(v-bind('layout.sagittal.x') * 1px);
+  top: calc(v-bind('layout.sagittal.y') * 1px);
+  width: calc(v-bind('layout.sagittal.width') * 1px);
+  height: calc(v-bind('layout.sagittal.height') * 1px);
+}
+
+#coronal {
+  left: calc(v-bind('layout.coronal.x') * 1px);
+  top: calc(v-bind('layout.coronal.y') * 1px);
+  width: calc(v-bind('layout.coronal.width') * 1px);
+  height: calc(v-bind('layout.coronal.height') * 1px);
 }
 
 .scan-view {
-  border: 1px rgba(128, 128, 128, 0.56) solid;
-  transition: border 0.5s;
+  border: transparent 2px dashed;
+  border-radius: calc(v-bind('radius') * 1px);
+  position: absolute;
+  transition:
+    border 0.5s linear,
+    box-shadow 0.5s linear;
 }
 
 .scan-view:hover {
-  border: 1px dashed rgb(0, 152, 253);
+  border: map-get(p.$minsk, 500) 2px dashed;
+  box-shadow: 0 0 8px 1px map-get(p.$minsk, 500);
 }
 
 .v-enter-active,
 .v-leave-active {
-  transition: opacity 0.5s ease;
+  transition: opacity 0.5s linear;
 }
 
 .v-enter-from,

package/src/components/modal/__tests__/{MftpWebGL3DRModal.spec.ts → Viewer3cr.spec.ts}

@@ -1,12 +1,5 @@
 import { inflateInitialScanState, inflateScanState } from '@/functions/modelHelper';
-import {
-  AnchorPoint,
-  FrontEndInterfaces,
-  LayoutActions,
-  PositionData,
-  ScanMovementActions,
-  SlidersActions
-} from '@3cr/types-ts';
+import { AnchorPoint, FrontEndInterfaces, PositionData, ScanMovementActions, SlidersActions } from '@3cr/types-ts';
 import { flushPromises, mount } from '@vue/test-utils';
 import { spyOn } from '@vitest/spy';
 import {
@@ -22,36 +15,52 @@ import {
   tSlider,
   windowSlider
 } from '@/models/scanState';
-import { defineComponent, onMounted, ref, unref } from 'vue';
-import { isDemo } from '@/components/demo/options';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
-import MftpWebGL3DRModal from '../MftpWebGL3DRModal.vue';
-import { VBtn, VDialog } from 'vuetify/components';
+import { defineComponent, ref, unref } from 'vue';
+import { Viewer3crServiceImpl } from '@/services/viewer-3cr.service';
+import { VDialog } from 'vuetify/components';
+import Viewer3cr from '@/components/modal/Viewer3cr.vue';
 import SettingsMenu from '@/components/modal/menus/SettingsMenu.vue';
-
-let spy = spyOn(Viewer3crService.prototype, 'sendPayload').mockResolvedValue();
+import { useDemoStore } from '@/stores/demo.store';
+import { createPinia, setActivePinia, storeToRefs } from 'pinia';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { MockInstance } from '@vitest/spy';
+import ViewerNavigationDrawer from '@/components/modal/ViewerNavigationDrawer.vue';
+import ViewerAppBar from '@/components/modal/app-bars/ViewerAppBar.vue';
+import DemoNotificationNavigationDrawer from '@/components/demo/DemoNotificationNavigationDrawer.vue';
+import ViewerIntro from '@/components/intro/ViewerIntro.vue';
+import ViewerTour from '@/components/intro/ViewerTour.vue';
+import WhatsNewModal from '@/components/modal/modal/WhatsNewModal.vue';
+import { ViewerPayload } from '@3cr/viewer-types-ts';
+import { useViewerStore } from '@/stores/viewer.store';
+import { createTestingPinia } from '@pinia/testing';
+
+let spy: MockInstance;
 
 const app = defineComponent({
-  template: '<v-app><MftpWebGL3DRModal ref="webgl"></MftpWebGL3DRModal></v-app>',
-  components: { MftpWebGL3DRModal },
+  template: '<v-app><Viewer3cr ref="webgl"></Viewer3cr></v-app>',
+  components: { Viewer3cr },
   setup() {
-    const webgl = ref<typeof MftpWebGL3DRModal>();
-    onMounted(() => webgl.value!.alterValue(true));
+    const webgl = ref<typeof Viewer3cr>();
     return { webgl };
   }
 });
 
-describe('MftpWebGL3DRModal tests', () => {
-  let wrapper = mount(app, { global: { stubs: ['WebGL3DR'] } });
+describe('Viewer3cr tests', () => {
+  const viewer3cr = useViewer3cr() as Viewer3crServiceImpl;
+  const { isDemo } = storeToRefs(useDemoStore());
+
+  let wrapper = mount(app, { global: { stubs: ['Viewer3crWebGL'] } });
+  spy = spyOn(viewer3cr, 'sendPayload').mockResolvedValue();
 
   beforeEach(() => {
     transactionStarted.value = false;
-    spy = spyOn(Viewer3crService.prototype, 'sendPayload').mockResolvedValue();
-    wrapper = mount(app, { global: { stubs: ['WebGL3DR'] } });
+    spy = spyOn(viewer3cr, 'sendPayload').mockResolvedValue();
+    wrapper = mount(app, { global: { stubs: ['Viewer3crWebGL'] } });
   });
 
   afterEach(() => {
     isDemo.value = false;
+    vi.clearAllMocks();
     wrapper.unmount();
   });
 
@@ -284,26 +293,102 @@ describe('MftpWebGL3DRModal tests', () => {
     expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
-  it('should v-model modals', async () => {
-    const wrapper = mount(MftpWebGL3DRModal);
-    const modals = wrapper.findAllComponents(VDialog);
-    for (const modal of modals) {
-      await modal.setValue(false);
-    }
+  it('should close dialog', async () => {
+    const wrapper = mount(Viewer3cr);
+    expect(wrapper.vm.m_closeDialog).toBe(false);
+    wrapper.findComponent(ViewerNavigationDrawer).vm.$emit('close');
+    expect(wrapper.vm.m_closeDialog).toBe(true);
+  });
+
+  it('should close dialog appbar', async () => {
+    const wrapper = mount(Viewer3cr);
+    expect(wrapper.vm.m_closeDialog).toBe(false);
+    wrapper.findComponent(ViewerAppBar).vm.$emit('close');
+    expect(wrapper.vm.m_closeDialog).toBe(true);
+  });
+
+  it('should ViewerIntro emit start', async () => {
+    const wrapper = mount(Viewer3cr);
+    expect(wrapper.vm.tourActive).toBe(false);
+    wrapper.findComponent(ViewerIntro).vm.$emit('start');
+    await flushPromises();
+    expect(wrapper.vm.tourActive).toBe(true);
+  });
+
+  it('should ViewerIntro set value', async () => {
+    const wrapper = mount(Viewer3cr);
+    expect(wrapper.vm.introActive).toBe(false);
+    await wrapper.findComponent(ViewerIntro).setValue(true);
+    expect(wrapper.vm.introActive).toBe(true);
+  });
+
+  it('should ViewerTour set value', async () => {
+    const wrapper = mount(Viewer3cr);
+    expect(wrapper.vm.tourActive).toBe(false);
+    await wrapper.findComponent(ViewerTour).setValue(true);
+    expect(wrapper.vm.tourActive).toBe(true);
   });
 
-  it('should set 2x2 view', async () => {
-    vi.spyOn(Viewer3crService.prototype, 'layouts').mockImplementation(vi.fn());
+  it('should ViewerTour set value', async () => {
+    const wrapper = mount(Viewer3cr);
+    expect(wrapper.vm.whatsNewActive).toBe(false);
+    await wrapper.findComponent(WhatsNewModal).setValue(true);
+    expect(wrapper.vm.whatsNewActive).toBe(true);
+  });
+
+  it('should set whatsNewActive through watcher', async () => {
+    const { demoOptions } = storeToRefs(useDemoStore());
+    const { options } = storeToRefs(useViewerStore());
+    const wrapper = mount(Viewer3cr, {
+      props: {
+        payload: {
+          Url: 'https://webgl-3dr.singular.health/not-demo'
+        } as ViewerPayload
+      }
+    });
     await flushPromises();
-    await wrapper.findComponent(VDialog).findComponentByTestId<VBtn>('layout-2x2').trigger('click');
-    expect(Viewer3crService.prototype.layouts).toHaveBeenCalledWith(LayoutActions.lo02);
+    expect(wrapper.vm.whatsNewActive).toBe(false);
+    await wrapper.findComponent(ViewerTour).setValue(true);
+    await wrapper.findComponent(ViewerTour).setValue(false);
+    expect(wrapper.vm.whatsNewActive).toBe(true);
+
+    expect(options.value).not.toStrictEqual(demoOptions.value);
   });
 
-  it('should set 1x3 view', async () => {
-    vi.spyOn(Viewer3crService.prototype, 'layouts').mockImplementation(vi.fn());
+  it('should setValue', async () => {
+    setActivePinia(createPinia());
+
+    const wrapper = mount(Viewer3cr, {
+      plugins: [createTestingPinia({ createSpy: vi.fn })]
+    });
+
+    const { notificationDropdown, isDemo } = storeToRefs(useDemoStore());
+    isDemo.value = true;
+    await wrapper.setProps({
+      payload: {
+        Url: 'https://webgl-3dr.singular.health/demo-1'
+      } as ViewerPayload
+    });
     await flushPromises();
-    await wrapper.findComponentByTestId('layout-1x3').trigger('click');
-    expect(Viewer3crService.prototype.layouts).toHaveBeenCalledWith(LayoutActions.lo03);
+    expect(notificationDropdown.value).toStrictEqual({
+      modal: false,
+      x: 0,
+      y: 0
+    });
+    await wrapper.findComponent(DemoNotificationNavigationDrawer).setValue(true);
+    expect(notificationDropdown.value).toStrictEqual({
+      modal: true,
+      x: 0,
+      y: 0
+    });
+  });
+
+  it('should v-model modals', async () => {
+    const wrapper = mount(Viewer3cr);
+    const modals = wrapper.findAllComponents(VDialog);
+    for (const modal of modals) {
+      await modal.setValue(false);
+    }
   });
 
   it('should set settings-menu model', async () => {
@@ -320,13 +405,17 @@ async function testWatcherForDisplay(key: string, action: SlidersActions, not: b
 
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: '0.0.1',
-      Value: (scanState.Display as any)[key]
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.Display as any)[key]
+      }
     });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: '0.0.1',
-      Value: (scanState.Display as any)[key]
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.Display as any)[key]
+      }
     });
   }
 }
@@ -341,13 +430,17 @@ async function testWatcherForSlice(key: string, action: SlidersActions, not: boo
 
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: '0.0.1',
-      Value: (scanState.Slice as any)[key]
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.Slice as any)[key]
+      }
     });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: '0.0.1',
-      Value: (scanState.Slice as any)[key]
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.Slice as any)[key]
+      }
     });
   }
 }
@@ -361,13 +454,17 @@ async function testWatcherForOrientation(key: string, action: SlidersActions, no
   await flushPromises();
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: '0.0.1',
-      Value: (scanState.Orientations as any)[key].Slice
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.Orientations as any)[key].Slice
+      }
     });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: '0.0.1',
-      Value: (scanState.Orientations as any)[key].Slice
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.Orientations as any)[key].Slice
+      }
     });
   }
 }
@@ -381,13 +478,17 @@ async function testWatcherForInteractionSettings(key: string, action: ScanMoveme
   await flushPromises();
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.scan_movement, action, {
-      Version: '0.0.1',
-      Value: (scanState.InteractionSettings as any)[key]
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.InteractionSettings as any)[key]
+      }
     });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.scan_movement, action, {
-      Version: '0.0.1',
-      Value: (scanState.InteractionSettings as any)[key]
+      message: {
+        Version: '0.0.1',
+        Value: (scanState.InteractionSettings as any)[key]
+      }
     });
   }
 }