@3cr/viewer-browser 0.0.139 → 0.0.141

package/package.json

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

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -28,13 +28,13 @@
         width="600"
         theme="dark"
       >
-        <v-card-title>Close Viewer?</v-card-title>
-        <v-card-text
+        <v-card-title class="text-center">Close Viewer?</v-card-title>
+        <v-card-text class="text-center mb-2"
           >Are you sure you want to close the Online Viewer?</v-card-text
         >
         <v-card-actions>
           <v-btn
-            variant="tonal"
+            variant="flat"
             color="secondary"
             @click="m_closeDialog = false"
           >
@@ -43,7 +43,7 @@
           <v-spacer />
           <v-btn
             color="red"
-            variant="tonal"
+            variant="flat"
             @click="closeModal"
             v-if="showOption('OnSaveSession')"
           >
@@ -51,13 +51,13 @@
           </v-btn>
           <v-btn
             color="primary"
-            variant="tonal"
+            variant="flat"
             @click="closeModalSave"
             v-if="showOption('OnSaveSession')"
           >
             Save Session
           </v-btn>
-          <v-btn color="primary" variant="tonal" @click="closeModal" v-else>
+          <v-btn color="flat" variant="tonal" @click="closeModal" v-else>
             Close Viewer
           </v-btn>
         </v-card-actions>
@@ -500,21 +500,24 @@
 
       <v-btn
         height="84"
+        color="grey"
+        variant="flat"
         width="20"
         min-width="20"
-        class="my-auto rounded-bl-0 rounded-tl-0 pa-0 slide-item-card"
+        class="my-auto rounded-bl-0 rounded-tl-0 pa-0"
         style="
           border-bottom-left-radius: 0 !important;
           border-top-left-radius: 0 !important;
           position: absolute;
           top: 50%;
-          z-index: 1000;
+          opacity: 0.7;
+          z-index: 100000;
           transform: translateY(-50%);
         "
         :style="drawerCollapsed ? 'left: 68px' : 'left: 300px'"
         @click="drawerCollapsed = !drawerCollapsed"
       >
-        <v-icon>{{
+        <v-icon color="black">{{
           drawerCollapsed ? "chevron_right" : "chevron_left"
         }}</v-icon>
       </v-btn>
@@ -1053,6 +1056,7 @@ async function i_fileManagement(action: string, message: string) {
     scanLoading.value = false;
     drawerCollapsed.value = false;
     await payloadHandler.hoverOverCanvas(false);
+    await payloadHandler.setNavCubeVisibility(false);
   }
 }
 

package/src/dataLayer/payloadHandler.ts

@@ -4,6 +4,7 @@ import {
   FrontEndInterfaces,
   InteractivityActions,
   LayoutActions,
+  NavigationCubeActions,
   PresetsActions,
   ScanMovementActions,
   ScanOrientationActions,
@@ -76,6 +77,17 @@ export class PayloadHandler {
     }
   }
 
+  async setNavCubeVisibility(visibility: any) {
+    await this.sendPayload(
+      FrontEndInterfaces.navigation_cube,
+      NavigationCubeActions.nc02,
+      {
+        Version: "0.0.1",
+        Value: visibility,
+      }
+    );
+  }
+
   async hoverOverCanvas(isHovering: boolean) {
     await this.sendPayload(
       FrontEndInterfaces.interactivity,

package/src/demo/DemoModal.vue

@@ -26,7 +26,7 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card class="pa-1 ma-auto position-relative" max-width="450">
-      <v-card-title>Demo Instance</v-card-title>
+      <v-card-title class="font-weight-bold">Demo Instance</v-card-title>
       <v-card-text>
         This instance of 3Dicom Online Viewer is a Demo instance.
       </v-card-text>

package/src/demo/licence/DemoLicenceInfoModal.vue

@@ -37,7 +37,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">{{
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{
         demoLicenceTitle
       }}</v-card-title>
       <v-card-text
@@ -47,11 +47,7 @@ const modalState = computed({
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
-        <v-btn
-          color="error"
-          @click="modalState = false"
-          :disabled="!isModalOpen"
-        >
+        <v-btn color="red" @click="modalState = false" :disabled="!isModalOpen">
           Continue with Demo
         </v-btn>
         <v-spacer />

package/src/demo/licence/DemoLicenceSendToPartyModal.vue

@@ -47,8 +47,8 @@ function isValid() {
       max-width="680"
       min-width="450"
     >
-      <v-card-title class="text-center mb-4 mt-2">
-        Download 3Dicom Mobile
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
+        Send Scan to a 3rd Party
       </v-card-title>
       <v-card-text>
         <v-text-field
@@ -116,7 +116,7 @@ function isValid() {
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -140,7 +140,9 @@ function isValid() {
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2"> Scan shared </v-card-title>
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
+        Scan shared
+      </v-card-title>
       <v-card-text class="text-justify">
         Congratulations, you have sent your scan to a 3rd party.
       </v-card-text>
@@ -153,7 +155,7 @@ function isValid() {
         please select below
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"

package/src/demo/licence/DemoLicenceShareToMobileModal.vue

@@ -32,7 +32,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Download 3Dicom Mobile
       </v-card-title>
       <v-card-text class="text-justify">
@@ -50,7 +50,7 @@ const modalState = computed({
         />
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -73,7 +73,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Load your scan
       </v-card-title>
       <v-card-text class="text-justify">
@@ -83,7 +83,7 @@ const modalState = computed({
         Tomography (PET) scans.
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"

package/src/demo/options.ts

@@ -1,4 +1,4 @@
-import { computed, ref, unref } from "vue";
+import { computed, ref, unref, watch } from "vue";
 import { LoadViewerOptions } from "@/models/LoadViewerOptions";
 import { LoadViewerPayload } from "@/models/LoadViewerPayload";
 import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
@@ -81,6 +81,11 @@ export const demoPatientOptions: LoadViewerOptions = {
       "Should you have any further questions or enquiries, please get in touch by emailing support@singular.health",
     ];
     m_demoPatient.value = true;
+    watch(m_demoPatient, () => {
+      if (!m_demoPatient) {
+        window.close();
+      }
+    });
   },
   OnLoadNewDicomSeries: () => {
     demoPatientTitle.value =
@@ -95,7 +100,8 @@ export const demoPatientOptions: LoadViewerOptions = {
     demoPatientTitle.value =
       "3Dicom Patient enables on-demand download of DICOM series";
     demoPatientSubtitles.value = [
-      "3Dicom Patient enables you to store your medical imaging and related files / reports online or share them temporarily between devices. DICOM files can be downloaded to your device for local storage and providing to 3rd parties via CD/USB.",
+      "3Dicom Patient enables you to store your medical imaging and related files / reports online or share them temporarily between devices. ",
+      "DICOM files can be downloaded to your device for local storage and providing to 3rd parties via CD/USB.",
       "Purchase 3Dicom Patient to gain control over your DICOM file storage.",
     ];
     m_demoPatient.value = true;
@@ -128,9 +134,14 @@ export const demoPatientOptions: LoadViewerOptions = {
   OnScreenshot: undefined,
 };
 
+const optionalTypes = ["licence", "patient"];
+
 export const demoType = computed(() => {
   const urlParams = new URLSearchParams(window.location.search);
-  return (urlParams.get("demoType") || "licence").toLowerCase();
+  let type = (urlParams.get("demoType") || "licence").toLowerCase();
+
+  if (type === "license") type = optionalTypes[0];
+  return optionalTypes.includes(type) ? type : optionalTypes[0];
 });
 
 export function executeDemoOption(key: keyof LoadViewerOptions) {

package/src/demo/patient/DemoPatientInfoModal.vue

@@ -37,7 +37,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">{{
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{
         demoPatientTitle
       }}</v-card-title>
       <v-card-text
@@ -47,11 +47,7 @@ const modalState = computed({
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
-        <v-btn
-          color="error"
-          @click="modalState = false"
-          :disabled="!isModalOpen"
-        >
+        <v-btn color="red" @click="modalState = false" :disabled="!isModalOpen">
           Continue with Demo
         </v-btn>
         <v-spacer />

package/src/demo/patient/DemoPatientSendToPartyModal.vue

@@ -47,8 +47,8 @@ function isValid() {
       max-width="680"
       min-width="450"
     >
-      <v-card-title class="text-center mb-4 mt-2">
-        Download 3Dicom Mobile
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
+        Send Scan to a 3rd Party
       </v-card-title>
       <v-card-text>
         <v-text-field
@@ -116,7 +116,7 @@ function isValid() {
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -140,7 +140,9 @@ function isValid() {
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2"> Scan shared </v-card-title>
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
+        Scan shared
+      </v-card-title>
       <v-card-text class="text-justify">
         Congratulations, you have sent your scan to a 3rd party.
       </v-card-text>
@@ -153,7 +155,7 @@ function isValid() {
         please select below
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"

package/src/demo/patient/DemoPatientShareToMobileModal.vue

@@ -32,7 +32,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Download 3Dicom Mobile
       </v-card-title>
       <v-card-text class="text-justify">
@@ -50,7 +50,7 @@ const modalState = computed({
         />
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="modalState = false">
+        <v-btn color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
@@ -73,7 +73,7 @@ const modalState = computed({
       theme="dark"
       max-width="680"
     >
-      <v-card-title class="text-center mb-4 mt-2">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">
         Load your scan
       </v-card-title>
       <v-card-text class="text-justify">
@@ -83,7 +83,7 @@ const modalState = computed({
         Tomography (PET) scans.
       </v-card-text>
       <v-card-actions>
-        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
           variant="flat"