@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/modal/Viewer3crWebGL.vue

@@ -0,0 +1,65 @@
+<template>
+  <canvas id="canvas" ref="canvas" width="100%" height="100%"></canvas>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { InteractivityState } from '@3cr/types-ts';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useNavigationCube } from '@/composables/useNavigationCube';
+
+type Emits = {
+  loaded: [void];
+};
+
+const emit = defineEmits<Emits>();
+
+const viewer3cr = useViewer3cr();
+const { enableMouse, enableKeyboard, options } = storeToRefs(useViewerStore());
+
+const canvas = ref<HTMLCanvasElement>();
+useNavigationCube(canvas);
+
+/* v8 ignore start -- @preserve */
+watch(enableMouse, async (value: boolean) => {
+  const message: InteractivityState = { Version: '0.0.0', Value: value };
+  await viewer3cr.setMouseInput({ message });
+});
+
+watch(enableKeyboard, async (value: boolean) => {
+  const message: InteractivityState = { Version: '0.0.0', Value: value };
+  await viewer3cr.setKeyboardInput({ message });
+});
+/* v8 ignore stop -- @preserve */
+
+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.`);
+  }
+
+  await viewer3cr.register(canvas.value!);
+  /* v8 ignore start -- @preserve */
+  if (options.value.onViewerLoaded) {
+    await options.value.onViewerLoaded(viewer3cr);
+  }
+  /* v8 ignore stop -- @preserve */
+
+  emit('loaded');
+});
+
+defineExpose({ canvas });
+</script>

package/src/components/modal/ViewerActionRail.vue

@@ -6,22 +6,10 @@
     :menu-activator-props="menuActivatorProps"
   >
     <template #visible="{ action }">
-      <Component
-        :is="action.component"
-        :view="view"
-        :element="element"
-        variant="button"
-        @update:modal="onActionModal"
-      />
+      <Component :is="action.component" :view="view" variant="button" @update:modal="onActionModal" />
     </template>
     <template #hidden="{ action }">
-      <Component
-        :is="action.component"
-        :view="view"
-        :element="element"
-        variant="menu-item"
-        @update:modal="onActionModal"
-      />
+      <Component :is="action.component" :view="view" variant="menu-item" @update:modal="onActionModal" />
     </template>
   </ActionRail>
 </template>
@@ -37,11 +25,9 @@ import ResetViewAction from '@/components/modal/actions/ResetViewAction.vue';
 import Rotate2dAction from '@/components/modal/actions/Rotate2dAction.vue';
 import Slice3dAction from '@/components/modal/actions/Slice3dAction.vue';
 import ZoomAction from '@/components/modal/actions/ZoomAction.vue';
-import { useViewer3cr } from '@/composables/useViewer3cr';
 
 interface Props {
   view: ScanView;
-  element: EventTarget;
 }
 
 type Emits = {
@@ -58,8 +44,6 @@ const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
-const viewer3cr = useViewer3cr();
-
 const menuProps = computed(() => ({
   closeOnContentClick: false
 }));
@@ -81,48 +65,47 @@ const viewActions = computed(() => {
 const actions = computed<ActionItem[]>(() => [
   {
     component: FullscreenAction,
-    width: 48,
+    width: 52,
     condition: true
   },
   {
     component: ResetViewAction,
-    width: 48,
+    width: 52,
     condition: true
   },
   {
     component: PanAction,
-    width: 48,
+    width: 52,
     condition: true
   },
   {
     component: ZoomAction,
-    width: 48,
+    width: 52,
     condition: true
   },
   {
     component: Slice3dAction,
-    width: 48,
+    width: 52,
     condition: props.view === ScanView.Volume
   },
   {
     component: Rotate2dAction,
-    width: 48,
+    width: 52,
     condition: props.view !== ScanView.Volume
   },
   {
     component: FlipHorizontalAction,
-    width: 48,
+    width: 52,
     condition: props.view !== ScanView.Volume
   },
   {
     component: FlipVerticalAction,
-    width: 48,
+    width: 52,
     condition: props.view !== ScanView.Volume
   }
 ]);
 
 async function onActionModal(value: boolean): Promise<void> {
-  await viewer3cr.hoverOverCanvas(!value); // disable unity inputs when interacting with modals
   emit('modal', value);
 }
 </script>

package/src/components/modal/ViewerMain.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="h-100">
+    <v-row class="h-100" no-gutters>
+      <v-col>
+        <div class="wrapper">
+          <Viewer3crWebGL ref="webgl" class="webgl" :class="[isMobile && 'mobile-view']" @loaded="onLoaded" />
+          <LayoutFullscreenClipPath v-if="isReady && isFullscreen" :canvas="webgl!.canvas!" />
+          <Layout2x2ClipPath v-else-if="isReady && isLayout2x2" :canvas="webgl!.canvas!" />
+          <Layout1x3ClipPath v-else-if="isReady && isLayout1x3" :canvas="webgl!.canvas!" />
+          <template v-if="isReady">
+            <template v-for="layout in scanState.Layout.PositionData" :key="getCurrentView(layout)">
+              <ViewerScanView :canvas="webgl!.canvas!" :view="getCurrentView(layout)" />
+            </template>
+          </template>
+          <mcad-floating v-if="activeDrawer === 'design'" />
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { getCurrentView, isFullscreen, isLayout1x3, isLayout2x2, scanState } from '@/models/scanState';
+import Viewer3crWebGL from '@/components/modal/Viewer3crWebGL.vue';
+import McadFloating from '@/components/navigation/mcad/McadFloating.vue';
+import { storeToRefs } from 'pinia';
+import { useDrawerStore } from '@/stores/drawer.store';
+
+type Emits = {
+  loaded: [void];
+};
+
+const emit = defineEmits<Emits>();
+const { activeDrawer } = storeToRefs(useDrawerStore());
+
+const loaded = ref<boolean>(false);
+const webgl = ref<InstanceType<typeof Viewer3crWebGL>>();
+
+const isReady = computed(() => {
+  return loaded.value && !!webgl.value?.canvas;
+});
+const isMobile = computed(() => {
+  return window.mobileCheck();
+});
+
+const layout = computed(() => {
+  if (isFullscreen.value) {
+    return 'url(#layout-fullscreen)';
+  } else if (isLayout2x2.value) {
+    return 'url(#layout-2x2)';
+  } else if (isLayout1x3.value) {
+    return 'url(#layout-1x3)';
+  } else {
+    return 'none';
+  }
+});
+
+function onLoaded(): void {
+  loaded.value = true;
+  emit('loaded');
+}
+</script>
+
+<style scoped lang="scss">
+.webgl {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.webgl:not(.mobile-view) {
+  clip-path: v-bind('layout');
+}
+
+.wrapper {
+  background-color: rgb(var(--v-theme-surface));
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/modal/ViewerNavigationDrawer.vue

@@ -1,92 +1,293 @@
 <template>
-  <v-navigation-drawer
-    class="motif-background"
-    theme="dark"
-    :model-value="true"
-    :rail="!drawer"
-    rail-width="72"
-    width="350"
-    permanent
-    touchless
-  >
+  <v-navigation-drawer :border="drawer ? 1 : 0" color="background" permanent rail rail-width="80">
     <template #prepend>
-      <ViewerNavigationDrawerHeader :drawer="drawer" />
-    </template>
-    <template #default>
-      <ViewerNavigationDrawerContent v-model:drawer="drawer" @update:expanded="emit('update:expanded', $event)" />
-    </template>
-    <template #append>
-      <v-divider />
-      <ViewerNavigationDrawerFooter :drawer="drawer" />
+      <div class="d-flex justify-center">
+        <v-hover>
+          <template #default="{ isHovering, props: hover }">
+            <v-tooltip open-delay="1000" location="right">
+              <template #activator="{ props: tooltip }">
+                <v-btn
+                  data-testid="nav-btn"
+                  v-bind="mergeProps(hover, tooltip)"
+                  :icon="true"
+                  variant="text"
+                  color="minsk_500"
+                  size="large"
+                  @click="close"
+                >
+                  <v-img
+                    v-if="!isHovering"
+                    src="@/assets/logos/3dicom/colour/colour_single.svg"
+                    width="40"
+                    height="40"
+                  />
+                  <v-icon v-else icon="west" />
+                </v-btn>
+              </template>
+              <span>{{ t('labels.backToPortal') }}</span>
+            </v-tooltip>
+          </template>
+        </v-hover>
+      </div>
     </template>
+    <v-list
+      data-testid="nav-list"
+      :selected="[activeDrawer]"
+      class="d-flex flex-column h-100"
+      density="compact"
+      nav
+      @update:selected="activeDrawer = $event[0]"
+    >
+      <template v-for="item in items" :key="item.value">
+        <template v-if="item.visible">
+          <v-tooltip open-delay="1000" location="right">
+            <template #activator="{ props }">
+              <v-list-item
+                v-bind="props"
+                class="mx-auto py-0"
+                width="42px"
+                :data-testid="`listitem-${item.value}`"
+                min-height="30px"
+                color="primary"
+                :prepend-icon="item.icon"
+                :value="item.value"
+                @click="item.listItemProps.onClick"
+              />
+              <div class="text-center text-xs-semibold mb-4" :data-testid="`title-${item.value}`">{{ item.title }}</div>
+            </template>
+            <span>{{ item.tooltip }}</span
+            ><span class="pl-2">{{ item.tooltipShortcut }}</span>
+          </v-tooltip>
+        </template>
+      </template>
+      <v-spacer />
+      <HelpMenu />
+    </v-list>
   </v-navigation-drawer>
-  <v-btn
-    data-testid="toggle"
-    height="84"
-    color="grey"
-    variant="flat"
-    width="20"
-    min-width="20"
-    class="toggle"
-    :style="!drawer ? 'left: 72px' : 'left: 350px'"
-    @click="drawer = !drawer"
+  <v-navigation-drawer
+    :border="0"
+    color="background"
+    :model-value="drawer"
+    :width="width"
+    :elevation="canDrag ? 4 : 0"
+    style="min-width: 264px; max-width: 512px"
+    permanent
+    class="resizable-drawer"
   >
-    <v-icon color="black">
-      {{ !drawer ? 'chevron_right' : 'chevron_left' }}
-    </v-icon>
-  </v-btn>
+    <v-fade-transition hide-on-leave>
+      <template v-for="item in items" :key="item.value">
+        <template v-if="activeDrawer == item.value">
+          <Component v-bind="item.props" :is="item.component" />
+        </template>
+      </template>
+    </v-fade-transition>
+  </v-navigation-drawer>
+  <history-modal v-model="recentDropdown.modal" />
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { ComponentInstance, computed, mergeProps, onMounted, ref, watch } from 'vue';
+import DisplayPanel from '@/components/navigation/display/DisplayPanel.vue';
+import AnnotationPanel from '@/components/navigation/annotation/AnnotationPanel.vue';
+import MeasurementPanel from '@/components/navigation/measurement/MeasurementPanel.vue';
+import McadPanel from '@/components/navigation/mcad/McadPanel.vue';
+import { useDataOverlayStore } from '@/stores/data-overlay.store';
+import { useMcadStore } from '@/stores/mcad.store';
+import { useViewerStore } from '@/stores/viewer.store';
+import { storeToRefs } from 'pinia';
+import { defaultHotkeys, defineHotkeys, Hotkeys, HotkeyScope, resetScope } from '@/functions/HotkeyScope';
+import interact from 'interactjs';
+import { useDemoStore } from '@/stores/demo.store';
+import { useI18n } from 'vue-i18n';
+import { useDrawerStore } from '@/stores/drawer.store';
+import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
+
+onMounted(() => {
+  defaultHotkeys({
+    [Hotkeys.ALT_D]: async () => {
+      activeDrawer.value = 'display';
+    },
+    [Hotkeys.ALT_H]: async () => {
+      activeDrawer.value = 'home';
+    },
+    [Hotkeys.ALT_A]: async () => {
+      activeDrawer.value = 'annotation';
+    },
+    [Hotkeys.ALT_M]: async () => {
+      activeDrawer.value = 'measure';
+    },
+    [Hotkeys.ALT_E]: async () => {
+      activeDrawer.value = 'design';
+    },
+    [Hotkeys.ALT_F]: async () => {
+      activeDrawer.value = 'history';
+    }
+  });
+});
 
-interface Props {
-  drawer?: boolean;
+interface NavigationDrawerItem {
+  icon: string;
+  title: string;
+  tooltip: string;
+  tooltipShortcut: string;
+  value: string;
+  visible: boolean;
+  component: ComponentInstance<any>;
+  props: Record<string, any>;
+  listItemProps: Record<string, any>;
 }
 
 type Emits = {
-  'update:drawer': [boolean];
-  'update:expanded': [number | undefined];
+  close: [void];
 };
 
-const props = withDefaults(defineProps<Props>(), {
-  drawer: false
-});
-
 const emit = defineEmits<Emits>();
 
-const _drawer = ref<boolean>(props.drawer);
+const { t } = useI18n();
+const { annotations, measurements } = storeToRefs(useDataOverlayStore());
+const { recentDropdown } = storeToRefs(useDemoStore());
+const { activeDrawer } = storeToRefs(useDrawerStore());
+const { mcads } = storeToRefs(useMcadStore());
+const { options } = storeToRefs(useViewerStore());
+
+const width = ref<number>(264);
+
+const drawer = computed(() => {
+  return !!activeDrawer.value && !!items.value.find((x) => activeDrawer.value === x.value)?.component;
+});
 
-const drawer = computed({
-  get(): boolean {
-    return _drawer.value;
+const items = computed<NavigationDrawerItem[]>(() => [
+  {
+    value: 'home',
+    icon: options.value.home?.icon ?? 'home',
+    tooltip: options.value.home?.title ?? t('labels.home'),
+    tooltipShortcut: translateTooltipShortcut(SHORTCUT_TEXT.altH),
+    title: options.value.home?.title ?? t('labels.home'),
+    visible: true,
+    component: undefined,
+    props: {},
+    listItemProps: {}
+  },
+  {
+    value: 'display',
+    icon: options.value.display?.icon ?? 'visibility',
+    tooltip: options.value.display?.title ?? t('labels.display'),
+    tooltipShortcut: translateTooltipShortcut(SHORTCUT_TEXT.altD),
+    title: options.value.display?.title ?? t('labels.display'),
+    visible: options.value.display?.visible ?? true,
+    component: DisplayPanel,
+    props: {},
+    listItemProps: {}
+  },
+  {
+    value: 'annotation',
+    icon: options.value.annotations?.icon ?? 'stylus_note',
+    tooltip: options.value.annotations?.title ?? t('labels.annotation'),
+    tooltipShortcut: translateTooltipShortcut(SHORTCUT_TEXT.altA),
+    title: options.value.annotations?.title ?? t('labels.annotation'),
+    visible: options.value.annotations?.visible ?? true,
+    component: AnnotationPanel,
+    props: {
+      items: annotations.value
+    },
+    listItemProps: {}
+  },
+  {
+    value: 'measure',
+    icon: options.value.measure?.icon ?? 'design_services',
+    tooltip: options.value.measure?.title ?? t('labels.measure'),
+    tooltipShortcut: translateTooltipShortcut(SHORTCUT_TEXT.altM),
+    title: options.value.measure?.title ?? t('labels.measure'),
+    visible: options.value.measure?.visible ?? true,
+    component: MeasurementPanel,
+    props: {
+      items: measurements.value
+    },
+    listItemProps: {}
   },
-  set(value: boolean): void {
-    _drawer.value = value;
-    emit('update:drawer', value);
+  {
+    value: 'design',
+    icon: options.value.design?.icon ?? 'view_in_ar',
+    tooltip: options.value.design?.title ?? t('labels.design'),
+    tooltipShortcut: translateTooltipShortcut(SHORTCUT_TEXT.altE),
+    title: options.value.design?.title ?? t('labels.design'),
+    visible: options.value.design?.visible ?? true,
+    component: McadPanel,
+    listItemProps: {},
+    props: {
+      items: mcads.value
+    }
+  },
+  {
+    value: 'history',
+    icon: options.value.history?.icon ?? 'history',
+    tooltip: options.value.history?.title ?? t('labels.history'),
+    tooltipShortcut: translateTooltipShortcut(SHORTCUT_TEXT.altF),
+    title: options.value.history?.title ?? t('labels.history'),
+    visible: (options.value.history?.visible ?? true) && !!options.value.onRecentDropdown,
+    component: undefined,
+    props: {},
+    listItemProps: {
+      onClick: () => {
+        options.value.onRecentDropdown!(0, 0);
+      }
+    }
+  }
+]);
+
+const canDrag = computed(() => activeDrawer.value === 'mcad');
+
+watch(activeDrawer, () => {
+  width.value = 264;
+  interact('.resizable-drawer').resizable({
+    edges: { top: false, left: false, bottom: false, right: canDrag.value },
+    listeners: {
+      /* v8 ignore next 3 */
+      move: function (event) {
+        width.value = Math.min(Math.max(event.rect.width, 264), 512);
+      }
+    }
+  });
+});
+
+// Some issue with coverage not recognising the watch for drawer.
+/* v8 ignore start */
+watch(drawer, (isOpen: boolean) => {
+  if (isOpen) {
+    defineHotkeys(HotkeyScope.PRIMARY, {
+      [Hotkeys.ALT_D]: async () => {
+        activeDrawer.value = 'display';
+      },
+      [Hotkeys.ALT_H]: async () => {
+        activeDrawer.value = 'home';
+      },
+      [Hotkeys.ALT_A]: async () => {
+        activeDrawer.value = 'annotations';
+      },
+      [Hotkeys.ALT_M]: async () => {
+        activeDrawer.value = 'measure';
+      },
+      [Hotkeys.ALT_E]: async () => {
+        activeDrawer.value = 'design';
+      },
+      [Hotkeys.ALT_F]: async () => {
+        activeDrawer.value = 'history';
+      }
+    });
+  } else {
+    resetScope(HotkeyScope.PRIMARY);
   }
 });
+/* v8 ignore start */
 
-watch(
-  () => props.drawer,
-  (value: boolean) => {
-    drawer.value = value;
+async function close(): Promise<void> {
+  if (options.value.onExit) {
+    await options.value.onExit();
   }
-);
+  emit('close');
+}
 
-defineExpose({ drawer });
+defineExpose({
+  drawer
+});
 </script>
-
-<style scoped>
-.toggle {
-  border-bottom-left-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-  padding: 0;
-  position: absolute;
-  top: 50%;
-  opacity: 0.7;
-  z-index: 1;
-  transform: translateY(-50%);
-  transition: 0.25s left;
-}
-</style>