@3cr/viewer-browser 0.0.112 → 0.0.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -22,20 +22,30 @@
       id="close-dialog-prompt"
       data-test="closemodal"
     >
-      <v-card class="pa-1 ma-auto position-relative" max-width="450">
+      <v-card
+        class="pa-1 ma-auto position-relative motif-background"
+        width="600"
+        theme="dark"
+      >
         <v-card-title>Close Viewer?</v-card-title>
         <v-card-text
           >Are you sure you want to close the Online Viewer?</v-card-text
         >
         <v-card-actions>
-          <v-btn variant="text" color="red" @click="m_closeDialog = false">
+          <v-btn
+            variant="tonal"
+            color="secondary"
+            @click="m_closeDialog = false"
+          >
             Cancel
           </v-btn>
           <v-spacer />
-          <v-btn color="primary" @click="closeModal">
+          <v-btn color="red" variant="tonal" @click="closeModal">
             Close without saving
           </v-btn>
-          <v-btn color="primary" @click="closeModal"> Save Session </v-btn>
+          <v-btn color="primary" variant="tonal" @click="closeModal">
+            Save Session
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -84,12 +94,19 @@
                 </template>
                 <v-list-item-title> Load Saved Session </v-list-item-title>
               </v-list-item>
+              <v-list-item @click="executeOption('OnSendTo3rdParty')">
+                <template v-slot:prepend>
+                  <v-icon> send </v-icon>
+                </template>
+                <v-list-item-title>Send to 3rd Party</v-list-item-title>
+              </v-list-item>
               <v-list-item @click="executeOption('OnShare')">
                 <template v-slot:prepend>
                   <v-icon> share </v-icon>
                 </template>
-                <v-list-item-title>Share</v-list-item-title>
+                <v-list-item-title>Share to Mobile / VR</v-list-item-title>
               </v-list-item>
+
               <v-list-item
                 @click="
                   executeOption('OnClosePopup');
@@ -122,18 +139,21 @@
               Settings
             </v-btn>
           </template>
-          <v-card min-width="400" class="pa-4">
+          <v-card width="350" class="pa-4">
             <SliderSelector
               v-model:value="scanState.Display.Brightness"
               label="Adjust Brightness"
+              prepend="percent"
             />
             <SliderSelector
               v-model:value="scanState.Display.Contrast"
               label="Adjust Contrast"
+              prepend="percent"
             />
             <SliderSelector
               v-model:value="scanState.Display.Opacity"
               label="Adjust Opacity"
+              prepend="percent"
             />
             <v-divider class="my-4" />
             <SliderSelector
@@ -141,18 +161,21 @@
               :min="0"
               :max="100"
               label="Pan Sensitivity"
+              prepend="percent"
             />
             <SliderSelector
               v-model:value="scanState.InteractionSettings.ZoomSensitivity"
               :min="0"
               :max="100"
               label="Zoom Sensitivity"
+              prepend="percent"
             />
             <SliderSelector
               v-model:value="scanState.InteractionSettings.RotateSensitivity"
               :min="0"
               :max="100"
               label="Rotate Sensitivity"
+              prepend="percent"
             />
             <SliderSelector
               v-model:value="
@@ -161,6 +184,7 @@
               :min="0"
               :max="100"
               label="Camera Rotate Sensitivity"
+              prepend="percent"
             />
           </v-card>
         </v-menu>
@@ -178,19 +202,25 @@
           style="min-width: 36px !important"
           :color="isLayout2x2 ? 'secondary' : 'primary'"
           @click="payloadHandler.layouts(LayoutActions.lo02)"
-          ><v-icon>grid_view</v-icon></v-btn
-        >
+          ><v-icon>grid_view</v-icon>
+          <v-tooltip location="bottom" activator="parent">
+            Change Layout to 2:2
+          </v-tooltip>
+        </v-btn>
         <v-btn
-          class="ma-1 mr-0 pa-1"
+          class="ma-1 mr-1 pa-1"
           height="36"
           style="min-width: 36px !important"
           :color="isLayout1x3 ? 'secondary' : 'primary'"
           @click="payloadHandler.layouts(LayoutActions.lo03)"
-          ><v-icon style="rotate: -90deg">view_comfy</v-icon></v-btn
+          ><v-icon style="rotate: -90deg">view_comfy</v-icon>
+          <v-tooltip location="bottom" activator="parent">
+            Change Layout to 1:3
+          </v-tooltip></v-btn
         >
         <v-btn class="" variant="flat" color="red" @click="alterValue(false)"
-          >Close Viewer</v-btn
-        >
+          >Close Viewer
+        </v-btn>
       </v-toolbar>
       <v-navigation-drawer
         v-model="drawer"
@@ -235,7 +265,13 @@
         <template v-slot:append>
           <v-divider></v-divider>
           <v-list>
-            <v-tooltip right v-for="(item, index) in footerItems" :key="index">
+            <v-tooltip
+              right
+              v-for="(item, index) in footerItems.filter((x) =>
+                x.conditional()
+              )"
+              :key="index"
+            >
               <template #activator="{ props }">
                 <v-list-item
                   class="px-2"
@@ -271,7 +307,7 @@
                   </v-list-item-title>
                 </v-list-item>
               </template>
-              {{ item.text }}
+              {{ item.tooltip }}
             </v-tooltip>
           </v-list>
         </template>
@@ -317,6 +353,9 @@
                 >&nbsp;&nbsp;{{ miniMenu[0].text }}</span
               >
               <v-spacer />
+              <v-tooltip location="right" activator="parent">
+                {{ miniMenu[0].tooltip }}
+              </v-tooltip>
             </v-expansion-panel-title>
             <v-expansion-panel-text class="px-0">
               <DoubleSliderSelector
@@ -444,7 +483,7 @@
         >
           <div
             class="bordered-event-window"
-            v-for="layout in scanState.Layout.PositionData"
+            v-for="(layout, index) in scanState.Layout.PositionData"
             :key="layout.Anchor"
             :style="{
               ...generateDivStyleForLayout(layout),
@@ -458,7 +497,12 @@
             <v-hover>
               <template v-slot:default="{ isHovering, props }">
                 <div style="width: 100%; height: 100%" v-bind="props">
-                  <div class="buttons-in-view" v-show="isHovering">
+                  <div
+                    class="buttons-in-view"
+                    v-show="
+                      isHovering || menu || menus.filter((x) => x).length > 0
+                    "
+                  >
                     <div v-if="scanState.Layout.PositionData.length !== 1">
                       <v-btn
                         color="transparent"
@@ -493,9 +537,7 @@
                         Exit Fullscreen View
                       </v-tooltip>
                     </div>
-                    <div
-                      v-if="getCurrentActiveView(layout) === ScanView.Volume"
-                    >
+                    <div>
                       <v-btn
                         color="transparent"
                         :icon="true"
@@ -521,22 +563,23 @@
                       v-if="getCurrentActiveView(layout) === ScanView.Volume"
                     >
                       <v-menu
+                        v-model="menu"
                         :close-on-content-click="false"
-                        :close-on-click="true"
+                        location="end"
                       >
                         <template v-slot:activator="{ props }">
-                          <div v-bind="{ ...props }">
-                            <v-btn color="transparent" :icon="true">
-                              <v-icon color="white">cut</v-icon>
-                            </v-btn>
-                            <v-tooltip
-                              target="cursor"
-                              location="top"
-                              activator="parent"
-                            >
-                              Slice the 3D Volume
-                            </v-tooltip>
-                          </div>
+                          <v-tooltip location="top">
+                            <template v-slot:activator="{ props: tooltip }">
+                              <v-btn
+                                v-bind="mergeProps(props, tooltip)"
+                                color="transparent"
+                                :icon="true"
+                              >
+                                <v-icon color="white">cut</v-icon>
+                              </v-btn>
+                            </template>
+                            Slice the 3D Volume
+                          </v-tooltip>
                         </template>
                         <v-card min-width="400" class="pb-2">
                           <v-card-title>Slice into the 3D Volume</v-card-title>
@@ -562,6 +605,7 @@
                       v-if="getCurrentActiveView(layout) !== ScanView.Volume"
                     >
                       <v-menu
+                        v-model="menus[index]"
                         :close-on-content-click="false"
                         :close-on-click="true"
                         offset-overflow
@@ -572,8 +616,7 @@
                             <template #activator="{ props: ttprops }">
                               <v-btn
                                 v-bind="{ ...props, ...ttprops }"
-                                icon
-                                class="icon transparent"
+                                :icon="true"
                               >
                                 <v-icon color="white">360</v-icon>
                               </v-btn>
@@ -691,12 +734,20 @@ import {
   SlidersActions,
   ViewSelectionActions,
 } from "@3cr/types-ts";
-import { defineEmits, nextTick, ref, unref, watch, WatchSource } from "vue";
+import {
+  defineEmits,
+  mergeProps,
+  nextTick,
+  ref,
+  unref,
+  watch,
+  WatchSource,
+} from "vue";
 
 import {
   checkIsDemo,
   demoType,
-  executeDemoOption,
+  getDemoOption,
   isDemo,
   m_demo,
   m_demoPatient,
@@ -732,6 +783,7 @@ import {
   windowSlider,
 } from "@/dataLayer/scanState";
 import { getIconForPreset } from "@/dataLayer/iconData";
+import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
 
 export interface Props {
   payload?: LoadViewerPayload;
@@ -755,6 +807,8 @@ const props = withDefaults(defineProps<Props>(), {
 const web_gl = ref<typeof WebGL3DR | null>(null);
 const payloadHandler = new PayloadHandler(web_gl);
 const value = ref<boolean>(false);
+const menu = ref<boolean>(false);
+const menus = ref<Array<boolean>>([false, false, false, false]);
 const drawer = ref<boolean>(true);
 const drawerCollapsed = ref<boolean>(true);
 const scanLoading = ref<boolean>(true);
@@ -763,30 +817,39 @@ const openPanels = ref<number>(0);
 const footerItems = ref([
   {
     text: "Reset Scan",
+    tooltip: "Resets your scan to original position and settings in all views",
     icon: "refresh",
     color: "red",
     click: async () => {
       await payloadHandler.viewSelection(ViewSelectionActions.vs05);
       await payloadHandler.viewSelection(ViewSelectionActions.vs06);
     },
+    conditional: () => true,
   },
   {
     text: "Send to 3rd Party",
+    tooltip:
+      "Securely share your loaded scan with 3rd parties via email with option to anonymise",
     icon: "send",
     color: "blue",
     click: async () => executeOption("OnSendTo3rdParty"),
+    conditional: () => getOption("OnSendTo3rdParty") !== undefined,
   },
   {
     text: "Share to Mobile / VR",
+    tooltip:
+      "Share your loaded scan with the 3Dicom Mobile and VR applications to download within 7 days",
     icon: "share",
     color: "yellow",
     click: async () => executeOption("OnShareToMobile"),
+    conditional: () => getOption("OnShareToMobile") !== undefined,
   },
   {
     text: "Screenshot View",
     icon: "screenshot_region",
     color: "green",
     click: async () => executeOption("OnScreenshot"),
+    conditional: () => getOption("OnScreenshot") !== undefined,
   },
 ]);
 const miniMenu = ref([
@@ -794,22 +857,26 @@ const miniMenu = ref([
     icon: "display_settings",
     text: "Tissue Density",
     tooltip:
-      "Tissue Density - Change the view of density within the scan, allowing you to see through a certain density of particles",
+      "Change the range of visible anatomy in the scan by only showing areas with certain density of tissue",
   },
 ]);
 const rotationDeg = ref<number>(0);
 const stateOverlay = ref<boolean>(false);
 const m_closeDialog = ref<boolean>(false);
 
-function executeOption(key: keyof LoadViewerOptions) {
+function getOption(
+  key: keyof LoadViewerOptions
+): ViewerCallback | ViewerAsyncCallback | undefined {
   if (unref(isDemo)) {
-    executeDemoOption(key);
+    return getDemoOption(key);
   } else {
-    const functionToExecute = unref(props.options)[key];
-    console.log("executeOption", key, functionToExecute);
-    if (functionToExecute !== undefined) {
-      functionToExecute();
-    }
+    return unref(props.options)[key];
+  }
+}
+function executeOption(key: keyof LoadViewerOptions) {
+  const functionToExecute = getOption(key);
+  if (functionToExecute !== undefined) {
+    functionToExecute();
   }
 }
 

package/src/components/selectors/ValueSelector.vue

@@ -49,7 +49,7 @@ defineExpose({
           {{ label }}
         </span>
       </v-col>
-      <v-col cols="6">
+      <v-col cols="4">
         <v-text-field
           :model-value="sliderValue"
           @update:modelValue="sliderValue = toNumber($event)"
@@ -60,7 +60,7 @@ defineExpose({
           variant="outlined"
           density="compact"
           type="number"
-          :append-icon="prepend"
+          :append-inner-icon="prepend"
         ></v-text-field>
       </v-col>
     </v-row>
@@ -88,4 +88,8 @@ defineExpose({
 .single-slider-selector .v-slider__thumb-label {
   color: black;
 }
+.single-slider-selector {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
 </style>

package/src/demo/options.ts

@@ -1,6 +1,7 @@
 import { computed, ref, unref } from "vue";
 import { LoadViewerOptions } from "@/models/LoadViewerOptions";
 import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
 
 export function checkIsDemo(payload: LoadViewerPayload) {
   isDemo.value =
@@ -37,9 +38,7 @@ export const demoLicenceOptions: LoadViewerOptions = {
   OnShare: () => {
     m_demo.value = true;
   },
-  OnScreenshot: () => {
-    m_demo.value = true;
-  },
+  OnScreenshot: undefined,
 };
 
 export const demoPatientOptions: LoadViewerOptions = {
@@ -68,9 +67,7 @@ export const demoPatientOptions: LoadViewerOptions = {
   OnShare: () => {
     m_demoPatient.value = true;
   },
-  OnScreenshot: () => {
-    m_demoPatient.value = true;
-  },
+  OnScreenshot: undefined,
 };
 
 export const demoType = computed(() => {
@@ -91,3 +88,12 @@ export function executeDemoOption(key: keyof LoadViewerOptions) {
     }
   }
 }
+export function getDemoOption(
+  key: keyof LoadViewerOptions
+): ViewerCallback | ViewerAsyncCallback | undefined {
+  if (unref(demoType) === "licence") {
+    return demoLicenceOptions[key];
+  } else if (unref(demoType) === "patient") {
+    return demoPatientOptions[key];
+  }
+}