@3cr/viewer-browser 0.0.196 → 0.0.220

package/src/components/modal/ViewerActionRail.vue

@@ -2,15 +2,16 @@
   <ActionRail
     :actions="viewActions"
     :menu-props="menuProps"
+    :menu-on="menuOn"
     :menu-activator-props="menuActivatorProps"
-    @menu-active="onActionModal($event, view)">
+  >
     <template #visible="{ action }">
       <Component
         :is="action.component"
         :view="view"
         :element="element"
         variant="button"
-        @update:modal="onActionModal($event, view)"
+        @update:modal="onActionModal"
       />
     </template>
     <template #hidden="{ action }">
@@ -19,48 +20,39 @@
         :view="view"
         :element="element"
         variant="menu-item"
-        @update:modal="onActionModal($event, view)"
+        @update:modal="onActionModal"
       />
     </template>
   </ActionRail>
 </template>
 
 <script setup lang="ts">
-import { computed, shallowRef } from "vue";
-import { ScanView } from "@3cr/types-ts";
-import FlipVerticalAction from "@/components/modal/actions/FlipVerticalAction.vue";
-import FlipHorizontalAction from "@/components/modal/actions/FlipHorizontalAction.vue";
-import FullscreenAction from "@/components/modal/actions/FullscreenAction.vue";
-import PanAction from "@/components/modal/actions/PanAction.vue";
-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 "@/dataLayer/useViewer3cr";
+import { computed } from 'vue';
+import { ScanView } from '@3cr/types-ts';
+import FlipVerticalAction from '@/components/modal/actions/FlipVerticalAction.vue';
+import FlipHorizontalAction from '@/components/modal/actions/FlipHorizontalAction.vue';
+import FullscreenAction from '@/components/modal/actions/FullscreenAction.vue';
+import PanAction from '@/components/modal/actions/PanAction.vue';
+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';
+import HideViewAction from '@/components/modal/actions/HideViewAction.vue';
 
 interface Props {
   view: ScanView;
-  element: any;
+  element: EventTarget;
 }
 
 type Emits = {
-  modal: [boolean, number];
+  modal: [boolean];
 };
 
 type ActionItem = {
   component: any;
   width: number;
-  condition: () => boolean;
-}
-
-const menuProps = {
-  closeOnContentClick: false
-};
-
-const menuActivatorProps = {
-  icon: 'more_vert',
-  variant: 'text',
-  color: 'white'
+  condition: boolean;
 };
 
 const props = defineProps<Props>();
@@ -69,55 +61,74 @@ const emit = defineEmits<Emits>();
 
 const viewer3cr = useViewer3cr();
 
+const menuProps = computed(() => ({
+  closeOnContentClick: false
+}));
+
+const menuOn = computed(() => ({
+  'update:modelValue': onActionModal
+}));
+
+const menuActivatorProps = computed(() => ({
+  icon: 'more_vert',
+  variant: 'text',
+  color: 'white'
+}));
+
 const viewActions = computed(() => {
-  return actions.value.filter(action => action.condition());
+  return actions.value.filter((action) => action.condition);
 });
 
-const actions = shallowRef<ActionItem[]>([
+const actions = computed<ActionItem[]>(() => [
   {
     component: FullscreenAction,
     width: 48,
-    condition: () => true,
+    condition: true
   },
   {
     component: ResetViewAction,
     width: 48,
-    condition: () => true,
+    condition: true
   },
   {
     component: PanAction,
     width: 48,
-    condition: () => true,
+    condition: true
+  },
+  {
+    component: HideViewAction,
+    width: 48,
+    condition: true
   },
   {
     component: ZoomAction,
     width: 48,
-    condition: () => true,
+    condition: true
   },
   {
     component: Slice3dAction,
     width: 48,
-    condition: () => props.view === ScanView.Volume,
+    condition: props.view === ScanView.Volume
   },
   {
     component: Rotate2dAction,
     width: 48,
-    condition: () => props.view !== ScanView.Volume,
+    condition: props.view !== ScanView.Volume
   },
   {
     component: FlipHorizontalAction,
     width: 48,
-    condition: () => props.view !== ScanView.Volume,
+    condition: props.view !== ScanView.Volume
   },
   {
     component: FlipVerticalAction,
     width: 48,
-    condition: () => props.view !== ScanView.Volume,
+    condition: props.view !== ScanView.Volume
   }
 ]);
 
-async function onActionModal(value: boolean, view: ScanView): Promise<void> {
+async function onActionModal(value: boolean): Promise<void> {
   await viewer3cr.hoverOverCanvas(!value); // disable unity inputs when interacting with modals
-  emit('modal', value, view);
+  emit('modal', value);
 }
 </script>

package/src/components/modal/ViewerNavigationDrawer.vue

@@ -1,6 +1,7 @@
 <template>
   <v-navigation-drawer
     class="motif-background"
+    theme="dark"
     :model-value="true"
     :rail="!drawer"
     rail-width="72"
@@ -12,11 +13,11 @@
       <ViewerNavigationDrawerHeader :drawer="drawer" />
     </template>
     <template #default>
-      <ViewerNavigationDrawerContent v-model:drawer="drawer" :options="options" @update:expanded="emit('update:expanded', $event)" />
+      <ViewerNavigationDrawerContent v-model:drawer="drawer" @update:expanded="emit('update:expanded', $event)" />
     </template>
     <template #append>
       <v-divider />
-      <ViewerNavigationDrawerFooter :drawer="drawer" :options="options" />
+      <ViewerNavigationDrawerFooter :drawer="drawer" />
     </template>
   </v-navigation-drawer>
   <v-btn
@@ -31,17 +32,15 @@
     @click="drawer = !drawer"
   >
     <v-icon color="black">
-      {{ !drawer ? "chevron_right" : "chevron_left" }}
+      {{ !drawer ? 'chevron_right' : 'chevron_left' }}
     </v-icon>
   </v-btn>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { LoadViewerOptions } from "@/models/LoadViewerOptions";
 
 interface Props {
-  options: LoadViewerOptions;
   drawer?: boolean;
 }
 
@@ -68,9 +67,12 @@ const drawer = computed({
   }
 });
 
-watch(() => props.drawer, (value: boolean) => {
-  drawer.value = value;
-});
+watch(
+  () => props.drawer,
+  (value: boolean) => {
+    drawer.value = value;
+  }
+);
 
 defineExpose({ drawer });
 </script>

package/src/components/modal/ViewerNavigationDrawerContent.vue

@@ -7,8 +7,8 @@
     tile
     @update:model-value="onUpdate"
   >
-    <template v-for="(item, index) in items" :key="item">
-      <v-expansion-panel v-if="item.visible()" :data-testid="`panel-${index}`" class="bg-transparent text-white px-0">
+    <template v-for="(item, index) in items" :key="index">
+      <v-expansion-panel v-if="item.visible" :data-testid="`panel-${index}`" class="bg-transparent text-white px-0">
         <v-expansion-panel-title :hide-actions="!drawer" class="font-weight-bold">
           <v-icon :start="drawer" :icon="item.icon" />
           <span v-show="drawer">{{ item.text }}</span>
@@ -25,15 +25,18 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentInstance, computed, ref, shallowRef, watch } from "vue";
-import { LoadViewerOptions } from "@/models/LoadViewerOptions";
-import { isSessionLoaded } from "@/dataLayer/scanState";
-import ViewerDisplaySettings from "@/components/modal/ViewerDisplaySettings.vue";
-import ViewerAnnotations from "@/components/modal/ViewerAnnotations.vue";
+import { ComponentInstance, computed, ref, watch } from 'vue';
+import ViewerDisplaySettings from '@/components/views/DisplaySettings.vue';
+import AnnotationTreeView from '@/components/views/AnnotationTreeView.vue';
+import McadObjects from '@/components/views/McadObjectTreeView.vue';
+import Markups from '@/components/views/MarkupTreeView.vue';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+import { useAnnotations } from '@/composables/useAnnotations';
+import { useMarkups } from '@/composables/useMarkups';
+import { useMcadObjects } from '@/composables/useMcadObjects';
 
 interface Props {
   drawer?: boolean;
-  options: LoadViewerOptions
 }
 
 type Emits = {
@@ -46,7 +49,7 @@ interface SettingsItem {
   text: string;
   tooltip: string;
   component: ComponentInstance<any>;
-  visible: () => boolean;
+  visible: boolean;
   props: Record<string, any>;
 }
 
@@ -56,42 +59,82 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const options = useViewerOptions();
+const { annotations, hasAnnotations } = useAnnotations();
+const { markups, hasMarkups } = useMarkups();
+const { mcadObjects, hasMcadObjects } = useMcadObjects();
 const previous = ref<number | undefined>(0);
 const expanded = ref<number | undefined>(0);
 
-const items = shallowRef<SettingsItem[]>([
+const items = computed<SettingsItem[]>(() => [
   {
-    icon: "display_settings",
-    text: "Display Settings",
-    tooltip: "Change the range of visible anatomy in the scan by only showing areas with certain density of tissue",
+    icon: 'display_settings',
+    text: 'Display Settings',
+    tooltip: 'Change the range of visible anatomy in the scan by only showing areas with certain density of tissue',
     component: ViewerDisplaySettings,
-    visible: () => true,
-    props: {}
+    visible: true,
+    props: {
+      class: 'pa-4'
+    }
   },
   {
-    icon: "draw",
-    text: "Annotations",
-    tooltip: "Display annotations on your scans",
-    component: ViewerAnnotations,
-    visible: () => !!showAnnotations.value,
-    props: {}
+    icon: 'draw',
+    text: 'Annotations',
+    tooltip: 'Display annotations on your scans',
+    component: AnnotationTreeView,
+    visible: !!showAnnotations.value,
+    props: {
+      items: annotations.value
+    }
   },
+  {
+    icon: 'design_services',
+    text: 'Markups',
+    tooltip: 'Display markups on your scans',
+    component: Markups,
+    visible: !!showMarkups.value,
+    props: {
+      items: markups.value
+    }
+  },
+  {
+    icon: 'deployed_code',
+    text: 'MCAD',
+    tooltip: 'Display MCAD objects on your scans',
+    component: McadObjects,
+    visible: !!showMcadObjects.value,
+    props: {
+      items: mcadObjects.value
+    }
+  }
 ]);
 
 const showAnnotations = computed(() => {
-  return props.options.OnLoadSavedSession && isSessionLoaded.value;
+  return options.value.OnLoadSavedSession && hasAnnotations.value;
 });
 
-watch(() => props.drawer, (value: boolean) => {
-  if (value) {
-    expanded.value = previous.value;
-    emit('update:expanded', expanded.value);
-  } else {
-    previous.value = expanded.value;
-    expanded.value = undefined;
-    emit('update:expanded', expanded.value);
-  }
-}, { immediate: true });
+const showMarkups = computed(() => {
+  return options.value.OnLoadSavedSession && hasMarkups.value;
+});
+
+const showMcadObjects = computed(() => {
+  return options.value.OnLoadSavedSession && hasMcadObjects.value;
+});
+
+watch(
+  () => props.drawer,
+  (value: boolean) => {
+    if (value) {
+      expanded.value = previous.value;
+      emit('update:expanded', expanded.value);
+    } else {
+      previous.value = expanded.value;
+      expanded.value = undefined;
+      emit('update:expanded', expanded.value);
+    }
+  },
+  { immediate: true }
+);
 
 function onUpdate(event: unknown): void {
   const value = event as number | undefined;
@@ -99,28 +142,18 @@ function onUpdate(event: unknown): void {
   expanded.value = value;
   emit('update:expanded', expanded.value);
   if (!props.drawer && value !== undefined) {
-    emit('update:drawer', true)
+    emit('update:drawer', true);
   }
 }
 </script>
 
-<style scoped>
-.v-expansion-panel-content__wrap {
-  padding: 0 8px 4px;
-  flex: 1 1 auto;
-  max-width: 100%;
-}
-
-.v-expansion-panel--active > .v-expansion-panel-header {
-  min-height: 48px;
-}
-
-.v-expansion-panel--active:not(:first-child),
-.v-expansion-panel--active + .v-expansion-panel {
-  margin-top: 0;
+<style scoped lang="css">
+:deep(.v-expansion-panel-title) {
+  padding: 12px 16px;
+  justify-content: center;
 }
 
-.v-expansion-panel-text__wrapper {
-  padding: 8px 8px 16px;
+:deep(.v-expansion-panel-text__wrapper) {
+  padding: 0;
 }
 </style>

package/src/components/modal/ViewerNavigationDrawerFooter.vue

@@ -1,111 +1,108 @@
 <template>
-  <v-list>
-    <template v-for="(item, index) of footerItems" :key="item">
-      <v-tooltip location="right">
-        <template #activator="{ props }">
-          <v-list-item
-            v-if="item.visible()"
-            v-bind="props"
-            :data-testid="`footer-${index}`"
-            class="px-6"
-            target="_blank"
-            :disabled="disabled"
-            @click="item.click()"
-          >
-            <template v-slot:prepend>
-              <v-icon v-bind="item.iconProps" />
+  <div>
+    <div class="pa-1 d-flex flex-wrap justify-space-between" :class="drawer ? 'flex-row' : 'flex-col'">
+      <template v-for="(item, index) of footerItems" :key="index">
+        <div v-if="item.visible()" class="ma-auto" :data-testid="`footer-${index}`">
+          <v-tooltip :location="drawer ? 'top' : 'right'">
+            <template #activator="{ props }">
+              <v-btn v-bind="props" variant="text" size="36" :icon="true" :disabled="disabled" @click="item.click()">
+                <v-icon size="24" v-bind="item.iconProps" />
+              </v-btn>
             </template>
-            <v-list-item-title v-if="drawer" class="text-white">
-              <span>{{ item.text }}</span>
-            </v-list-item-title>
-          </v-list-item>
-        </template>
-        <span>{{ item.tooltip }}</span>
-      </v-tooltip>
-    </template>
-  </v-list>
+            <span>{{ item.text }}</span>
+          </v-tooltip>
+        </div>
+      </template>
+    </div>
+    <v-divider />
+    <div class="d-flex justify-center">
+      <span class="version px-2 py-1" data-testid="version">{{ drawer ? 'Version' : '' }} {{ version3cr }}</span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { currentColourPreset, initialScanState } from "@/dataLayer/scanState";
-import { ViewSelectionActions } from "@3cr/types-ts";
-import { LoadViewerOptions } from "@/models/LoadViewerOptions";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { ref } from 'vue';
+import { currentColourPreset, initialScanState } from '@/models/scanState';
+import { ViewSelectionActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+import { useVersion3cr } from '@/composables/useVersion3cr';
 
 interface Props {
-  options: LoadViewerOptions;
   drawer?: boolean;
   disabled?: boolean;
 }
 
 interface FooterItem {
   text: string;
-  tooltip: string;
   iconProps: Record<string, any>;
   visible: () => boolean;
   click: () => void | Promise<void>;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   drawer: false,
   disabled: false
 });
 
 const viewer3cr = useViewer3cr();
+const version3cr = useVersion3cr();
+const options = useViewerOptions();
 const footerItems = ref<FooterItem[]>([
   {
-    text: "Reset Scan",
-    tooltip: "Resets your scan to original position and settings in all views",
-    iconProps: { icon: "refresh", color: "red" },
+    text: 'Reset Scan',
+    iconProps: { icon: 'refresh', color: 'red' },
     visible: () => true,
     click: async () => {
       currentColourPreset.value = initialScanState.value.ColourPresets[0];
       await viewer3cr.viewSelection(ViewSelectionActions.vs05);
       await viewer3cr.viewSelection(ViewSelectionActions.vs06);
-    },
+    }
   },
   {
-    text: "Enable Cloud Storage",
-    tooltip: "Securely store your medical records in the cloud",
-    iconProps: { icon: "cloud", color: "blue" },
-    visible: () => !!props.options.OnEnableCloudStorage,
+    text: 'Enable Cloud Storage',
+    iconProps: { icon: 'cloud', color: 'blue' },
+    visible: () => !!options.value.OnEnableCloudStorage,
     click: async () => {
-      await props.options.OnEnableCloudStorage!();
+      await options.value.OnEnableCloudStorage!();
     }
   },
   {
-    text: "Send to 3rd Party",
-    tooltip: "Securely share your loaded scan with 3rd parties via email with option to anonymise",
-    iconProps: { icon: "send", color: "green" },
-    visible: () => !!props.options.OnSendTo3rdParty,
+    text: 'Send to 3rd Party',
+    iconProps: { icon: 'send', color: 'green' },
+    visible: () => !!options.value.OnSendTo3rdParty,
     click: async () => {
-      await props.options.OnSendTo3rdParty!();
+      await options.value.OnSendTo3rdParty!();
     }
   },
   {
-    text: "Share to Mobile / VR",
-    tooltip: "Share your loaded scan with the 3Dicom Mobile and VR applications to download within 7 days",
-    iconProps: { icon: "share", color: "yellow" },
-    visible: () => !!props.options.OnShareToMobile,
+    text: 'Share to Mobile / VR',
+    iconProps: { icon: 'share', color: 'yellow' },
+    visible: () => !!options.value.OnShareToMobile,
     click: async () => {
-      await props.options.OnShareToMobile!();
+      await options.value.OnShareToMobile!();
     }
   },
   {
-    text: "Screenshot View",
-    tooltip: 'Take a screenshot',
-    iconProps: { icon: "screenshot_region", color: "green" },
-    visible: () => !!props.options.OnScreenshot,
+    text: 'Screenshot View',
+    iconProps: { icon: 'screenshot_region', color: 'green' },
+    visible: () => !!options.value.OnScreenshot,
     click: async () => {
-      await props.options.OnScreenshot!();
+      await options.value.OnScreenshot!();
     }
-  },
+  }
 ]);
 </script>
 
-<style scoped>
-.v-icon {
-  opacity: 1;
+<style scoped lang="css">
+.version {
+  font-size: 9px;
+  font-weight: 300;
+  letter-spacing: 0.1666666667em;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 </style>

package/src/components/modal/ViewerNavigationDrawerHeader.vue

@@ -1,57 +1,16 @@
 <template>
-  <div
-    v-if="!isDemo || demoType === 'patient'"
-    class="d-flex align-center pb-1"
-    :class="!drawer ? 'py-2' : 'pa-2'"
-  >
-    <v-img
-      v-if="drawer"
-      src="../../assets/images/dark/3dicom-logo.svg"
-      height="64"
-      alt="logo"
-      style="opacity: 0.9"
-    />
-    <v-img
-      v-else
-      src="../../assets/images/dark/3DICOM.png"
-      height="48"
-      alt="logo"
-      style="opacity: 0.9"
-    />
+  <div v-if="!isDemo || demoType === 'patient'" class="d-flex align-center pb-1" :class="!drawer ? 'py-2' : 'pa-2'">
+    <v-img v-if="drawer" src="@/assets/logos/3dicom/white.svg" height="64" alt="logo" />
+    <v-img v-else src="@/assets/logos/3dicom/white-mini.svg" height="48" alt="logo" />
   </div>
-  <div
-    v-else
-    class="d-flex align-center pb-1"
-    :class="!drawer ? 'py-2' : 'pa-2'"
-  >
-    <!-- TODO: Image probably needs to be cropped (1500 x 1500) -->
-    <v-img
-      v-if="drawer"
-      src="../../assets/images/dark/demo-logo.svg"
-      width="100%"
-      height="64"
-      :cover="true"
-      alt="logo"
-      style="opacity: 0.9"
-    />
-    <v-img
-      v-else
-      src="../../assets/images/dark/demo-icon-small.png"
-      height="48"
-      alt="logo"
-      style="opacity: 0.9"
-    />
-  </div>
-  <div
-    class="text-center mx-auto text-white sub-type"
-    :style="!drawer ? 'font-size: 100%' : 'font-size: 140%'"
-  >
-    Online Viewer
+  <div v-else class="d-flex align-center pb-1" :class="!drawer ? 'py-2' : 'pa-2'">
+    <v-img v-if="drawer" src="@/assets/images/dark/demo-logo.svg" width="100%" height="64" :cover="true" alt="logo" />
+    <v-img v-else src="@/assets/images/dark/demo-icon-small.png" height="48" alt="logo" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { demoType, isDemo } from "@/components/demo/options";
+import { demoType, isDemo } from '@/components/demo/options';
 
 interface Props {
   drawer?: boolean;
@@ -61,3 +20,9 @@ withDefaults(defineProps<Props>(), {
   drawer: false
 });
 </script>
+
+<style scoped lang="scss">
+.v-img {
+  opacity: 0.9;
+}
+</style>