@3cr/viewer-browser 0.0.55 → 0.0.57

package/index.ts

@@ -3,6 +3,23 @@ import { ComponentPublicInstance, createApp } from "vue";
 import { registerPlugins } from "./src/plugins";
 import { App as BrowserViewer } from "./src/main";
 
+export type ViewerCallback = () => void;
+export type ViewerAsyncCallback = () => Promise<void>;
+
+// Note: not defining the option will not display the item
+export interface LoadViewerOptions {
+  OnShare?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnScreenshot?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnLoadNewDicomSeries?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnDownloadDicomSeries?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnLoadSavedSession?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnShareToMobile?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnSendTo3rdParty?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnSaveSession?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnClosePopup?: ViewerCallback | ViewerAsyncCallback | undefined;
+  OnExitViewer?: ViewerCallback | ViewerAsyncCallback | undefined;
+}
+
 export interface LoadViewerPayload {
   Url: string;
   DecryptionKey: MftpDecryptionKey;
@@ -12,6 +29,19 @@ export interface MftpDecryptionKey {
   Iv: string;
 }
 
+export const defaultOptions: LoadViewerOptions = {
+  OnClosePopup: () => Promise.resolve(),
+  OnExitViewer: () => Promise.resolve(),
+  OnLoadNewDicomSeries: () => Promise.resolve(),
+  OnDownloadDicomSeries: () => Promise.resolve(),
+  OnLoadSavedSession: () => Promise.resolve(),
+  OnSaveSession: () => Promise.resolve(),
+  OnSendTo3rdParty: () => Promise.resolve(),
+  OnShareToMobile: () => Promise.resolve(),
+  OnShare: () => Promise.resolve(),
+  OnScreenshot: () => Promise.resolve(),
+};
+
 let mountedApp: ComponentPublicInstance | undefined = undefined;
 
 export async function registerViewer(version: string) {
@@ -31,12 +61,13 @@ export async function registerViewer(version: string) {
 
 // TODO: accept callbacks for each function we want the parent to handle
 export async function loadViewer(
-  payload: LoadViewerPayload | undefined = undefined
+  payload: LoadViewerPayload | undefined = undefined,
+  options: LoadViewerOptions = defaultOptions
 ): Promise<void> {
   if (!mountedApp) {
     throw new Error(
       "Please call `registerViewer(version: string, idSelector: string)` first"
     );
   }
-  await (mountedApp as any).loadInstance(payload);
+  await (mountedApp as any).loadInstance(payload, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",
@@ -21,6 +21,7 @@
   "dependencies": {
     "@3cr/sdk-browser": "^1.0.13",
     "@3cr/types-ts": "^1.0.9",
+    "@kyvg/vue3-notification": "^3.2.1",
     "@mdi/font": "6.2.95",
     "@mdi/js": "^7.4.47",
     "roboto-fontface": "*",

package/src/App.vue

@@ -1,62 +1,59 @@
 <template>
-  <v-app style="height: 0; width: 0;">
+  <v-app style="height: 0; width: 0">
     <MftpWebGL3DRModal ref="mftpWebGL3DRModal" :payload="payload" />
   </v-app>
+  <Notifications />
 </template>
 
 <script setup lang="ts">
-
 import MftpWebGL3DRModal from "@/components/modal/MftpWebGL3DRModal.vue";
-import {ref, unref} from "vue";
-import {LoadViewerPayload} from "../index";
+import { ref, unref } from "vue";
+import { defaultOptions, LoadViewerOptions, LoadViewerPayload } from "../index";
+import { Notifications } from "@kyvg/vue3-notification";
 
 const payload = ref<LoadViewerPayload>({
-  Url:"https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl",
-  DecryptionKey:{
-    Iv:"XEloSh+OcO7TG77au6HjPw==",
-    Key:"KUc722X1y4w42M+jCf9a3+6EGz66z7UMWK3m2aMqGxM="
-  }
+  Url: "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl",
+  DecryptionKey: {
+    Iv: "XEloSh+OcO7TG77au6HjPw==",
+    Key: "KUc722X1y4w42M+jCf9a3+6EGz66z7UMWK3m2aMqGxM=",
+  },
 });
+const options = ref<LoadViewerOptions>(defaultOptions);
 
-const mftpWebGL3DRModal = ref<typeof MftpWebGL3DRModal | null>(null)
+const mftpWebGL3DRModal = ref<typeof MftpWebGL3DRModal | null>(null);
 defineExpose({
-  loadInstance
-})
+  loadInstance,
+});
 
-async function loadInstance(payloadIncoming: LoadViewerPayload | undefined = undefined) {
+async function loadInstance(
+  payloadIncoming: LoadViewerPayload | undefined,
+  optionsIncoming: LoadViewerOptions
+) {
   payload.value = payloadIncoming || payload.value;
+  options.value = optionsIncoming;
 
-  unref(mftpWebGL3DRModal)?.alterValue(true)
+  unref(mftpWebGL3DRModal)?.alterValue(true);
 }
 </script>
 <style>
-
-.material-icons-outlined, .material-symbols-outlined {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24;
+.material-icons-outlined,
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
 }
-.material-icons, .material-symbols {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24;
+.material-icons,
+.material-symbols {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
 }
-.material-icons-filled, .material-symbols-filled {
-  font-variation-settings:
-    'FILL' 1,
-    'wght' 300,
-    'GRAD' 0,
-    'opsz' 24 !important;
+.material-icons-filled,
+.material-symbols-filled {
+  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24 !important;
 }
 .overflow-y-scroll {
   overflow-y: scroll;
 }
-.material-icons-outlined, .material-icons  {
-  font-family: 'Material Symbols Outlined' !important;
+.material-icons-outlined,
+.material-icons {
+  font-family: "Material Symbols Outlined" !important;
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
@@ -67,7 +64,7 @@ async function loadInstance(payloadIncoming: LoadViewerPayload | undefined = und
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
 .transparent {

package/src/__tests__/app.spec.ts

@@ -21,7 +21,7 @@ describe("App.vue", () => {
     expect(wrapper).toBeTruthy();
   });
   it("should loadScan", async () => {
-    await wrapper.vm.loadInstance();
+    await wrapper.vm.loadInstance(undefined, {});
     expect(wrapper).toBeTruthy();
   });
 });

package/src/components/loading/LoadingSpinner.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import {ref} from "vue";
-
-const text = ref<string>('Loading Online Viewer')
+export interface Props {
+  text: string;
+}
 
+const props = withDefaults(defineProps<Props>(), {
+  text: "Loading Online Viewer",
+});
 </script>
 
 <template>
@@ -15,7 +18,10 @@ const text = ref<string>('Loading Online Viewer')
         <div class="circle"></div>
       </div>
     </div>
-    <div class="mx-auto text-center white--text text-h3" v-html="text"></div>
+    <div
+      class="mx-auto text-center text-white text-h3"
+      v-html="props.text"
+    ></div>
   </div>
 </template>
 
@@ -50,9 +56,20 @@ const text = ref<string>('Loading Online Viewer')
   --in: 80%;
   --ar: #8799a4;
   --dt: #ffffff;
-  --shadow: drop-shadow(0vmin 0vmin 0.5vmin rgba(0, 0, 0, 0.35)) drop-shadow(0vmin 1vmin 0.5vmin rgba(0, 0, 0, 0.09));
-  --cross: linear-gradient(0deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px)),
-    linear-gradient(90deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px));
+  --shadow: drop-shadow(0vmin 0vmin 0.5vmin rgba(0, 0, 0, 0.35))
+    drop-shadow(0vmin 1vmin 0.5vmin rgba(0, 0, 0, 0.09));
+  --cross: linear-gradient(
+      0deg,
+      #fff0 calc(50% - 2px),
+      #000 calc(50% - 1px) calc(50% + 1px),
+      #fff0 calc(50% + 2px)
+    ),
+    linear-gradient(
+      90deg,
+      #fff0 calc(50% - 2px),
+      #000 calc(50% - 1px) calc(50% + 1px),
+      #fff0 calc(50% + 2px)
+    );
   border: 6vmin solid var(--ar);
   width: var(--in);
   height: var(--in);
@@ -64,7 +81,8 @@ const text = ref<string>('Loading Online Viewer')
   top: 15vmin;
   right: -10vmin;
   animation: spin-bot var(--sp) ease 0s infinite;
-  background-image: var(--cross), radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px));
+  background-image: var(--cross),
+    radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px));
   background-repeat: no-repeat;
   background-size: 3vmin 1vmin, 1vmin 3vmin, 100% 100%;
   background-position: center center;
@@ -76,7 +94,8 @@ const text = ref<string>('Loading Online Viewer')
   top: -2vmin;
   animation: spin-top var(--sp) ease 0s infinite;
   transform: rotate(-45deg);
-  background-image: var(--cross), radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px));
+  background-image: var(--cross),
+    radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px));
   right: -4vmin;
   filter: hue-rotate(10deg) var(--shadow);
   background-size: 1.4vmin 1vmin, 1vmin 1.4vmin, 100% 100%;
@@ -88,7 +107,8 @@ const text = ref<string>('Loading Online Viewer')
   left: -13vmin;
   transform: rotate(175deg);
   animation: spin-left var(--sp) ease calc(var(--sp) / 4) infinite;
-  background-image: var(--cross), radial-gradient(var(--dt) 9vmin, #fff0 calc(9vmin + 1px));
+  background-image: var(--cross),
+    radial-gradient(var(--dt) 9vmin, #fff0 calc(9vmin + 1px));
   filter: hue-rotate(20deg) var(--shadow);
   background-size: 5vmin 1vmin, 1vmin 5vmin, 100% 100%;
 }
@@ -98,8 +118,10 @@ const text = ref<string>('Loading Online Viewer')
   top: 35vmin;
   left: -6vmin;
   transform: rotate(-280deg);
-  animation: spin-last var(--sp) ease calc(calc(calc(var(--sp) / 4) + var(--sp)) * -1) infinite;
-  background-image: var(--cross), radial-gradient(var(--dt) 2.5vmin, #fff0 calc(2.5vmin + 1px));
+  animation: spin-last var(--sp) ease
+    calc(calc(calc(var(--sp) / 4) + var(--sp)) * -1) infinite;
+  background-image: var(--cross),
+    radial-gradient(var(--dt) 2.5vmin, #fff0 calc(2.5vmin + 1px));
   filter: hue-rotate(30deg) var(--shadow);
   background-size: 2vmin 1vmin, 1vmin 2vmin, 100% 100%;
 }

package/src/components/modal/DemoModal.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface Props {
+  modal: boolean;
+}
+
+const emit = defineEmits<{
+  "update:modal": [value: boolean];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false,
+});
+
+const modalState = computed({
+  get() {
+    return props.modal;
+  },
+  set(value) {
+    emit("update:modal", value);
+  },
+});
+</script>
+
+<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-text>
+        This instance of 3Dicom Online Viewer is a Demo instance.
+      </v-card-text>
+      <v-card-text>
+        Please contact us if you would like to integrate this viewer into your
+        platform
+      </v-card-text>
+      <v-card-text> support@singular.health </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" @click="modalState = false"> Thanks! </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,5 +1,6 @@
 <!-- /* c8 ignore start */ -->
 <template>
+  <DemoModal v-model:modal="m_demo" />
   <v-dialog
     id="cr-viewer"
     class="pa-0 ma-0 overflow-y-auto overflow-x-hidden"
@@ -11,7 +12,7 @@
     @input="alterValue"
   >
     <v-dialog
-      v-model="m_closeDialog"
+      v-model:model-value="m_closeDialog"
       id="close-dialog-prompt"
       data-test="closemodal"
     >
@@ -59,41 +60,36 @@
           </template>
           <v-card class="">
             <v-list>
-              <v-list-item disabled>
+              <v-list-item @click="executeOption('OnLoadNewDicomSeries')">
                 <template v-slot:prepend>
                   <v-icon> upload </v-icon>
                 </template>
-                <v-list-item-title
-                  >Load New DICOM Series&nbsp;<v-chip x-small color="success"
-                    >Coming Soon</v-chip
-                  ></v-list-item-title
-                >
+                <v-list-item-title>Load New DICOM Series</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="executeOption('OnDownloadDicomSeries')">
+                <template v-slot:prepend>
+                  <v-icon> download </v-icon>
+                </template>
+                <v-list-item-title>Download DICOM Series</v-list-item-title>
               </v-list-item>
-              <!--                <v-list-item @click="downloadDcm">-->
-              <!--                  <v-list-item-icon><v-icon> download </v-icon></v-list-item-icon>-->
-              <!--                  <v-list-item-title>Download DICOM Series</v-list-item-title>-->
-              <!--                </v-list-item>-->
-              <v-list-item disabled>
+              <v-list-item @click="executeOption('OnLoadSavedSession')">
                 <template v-slot:prepend>
                   <v-icon> sync </v-icon>
                 </template>
-                <v-list-item-title
-                  >Load Saved Session&nbsp;<v-chip x-small color="success"
-                    >Coming Soon</v-chip
-                  ></v-list-item-title
-                >
+                <v-list-item-title> Load Saved Session </v-list-item-title>
               </v-list-item>
-              <v-list-item disabled>
+              <v-list-item @click="executeOption('OnShare')">
                 <template v-slot:prepend>
                   <v-icon> share </v-icon>
                 </template>
-                <v-list-item-title
-                  >Share&nbsp;<v-chip x-small color="success"
-                    >Coming Soon</v-chip
-                  ></v-list-item-title
-                >
+                <v-list-item-title>Share</v-list-item-title>
               </v-list-item>
-              <v-list-item @click="alterValue(false)">
+              <v-list-item
+                @click="
+                  executeOption('OnClosePopup');
+                  alterValue(false);
+                "
+              >
                 <template v-slot:prepend>
                   <v-icon> close </v-icon>
                 </template>
@@ -164,7 +160,9 @@
         </v-menu>
 
         <v-spacer />
-        <div class="font-weight-bold">Not for Diagnostic Use</div>
+        <div class="font-weight-bold">
+          <span v-if="isDemo">[DEMO]&nbsp;</span>Not for Diagnostic Use
+        </div>
         <v-spacer />
         <v-btn
           class="ma-1 mr-0 pa-1"
@@ -427,6 +425,7 @@
           :class="!(instanceLoaded && !scanLoading) && 'no-pointer-events'"
           v-if="value"
           ref="web_gl"
+          id="webgl-container"
           @on_payload="handleOnPayload"
           @instance_loaded="load"
           @hover="hoverOverCanvas"
@@ -442,6 +441,7 @@
                   ? 'grab !important'
                   : 'default',
             }"
+            :data-box-internal="layout.DefaultView"
           >
             <v-hover>
               <template v-slot:default="{ isHovering, props }">
@@ -632,10 +632,7 @@
       </div>
 
       <LoadingSpinner v-if="!instanceLoaded" />
-      <LoadingSpinner
-        v-if="scanLoading"
-        text="Rendering your scan in <span class='sub-type'>3DICOM</span>"
-      />
+      <LoadingSpinner v-if="scanLoading" text="Rendering your scan in 3D" />
       <v-textarea
         v-if="stateOverlay"
         style="
@@ -683,11 +680,18 @@ import {
   InitialScanState,
   PositionData,
   ScanView,
+  InteractivityActions,
+  NotificationsActions,
+  NotificationPayload,
 } from "@3cr/types-ts";
 
 import { toNumber } from "@/helpers/utils";
 import { computed, ref, unref, watch, defineEmits, nextTick } from "vue";
-import { LoadViewerPayload } from "../../../index";
+import {
+  defaultOptions,
+  LoadViewerOptions,
+  LoadViewerPayload,
+} from "../../../index";
 
 const emit = defineEmits<{
   instanceLoaded: [void];
@@ -696,6 +700,7 @@ const emit = defineEmits<{
 
 export interface Props {
   payload?: LoadViewerPayload;
+  options?: LoadViewerOptions;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -706,7 +711,55 @@ const props = withDefaults(defineProps<Props>(), {
       Key: "OWjSMiL/ewUV1V6fGybhKcTyiysTPsIMp2DjdVoOUGI=",
     },
   }),
+  options: () => defaultOptions,
 });
+const isDemo = ref<boolean>(false);
+let m_demo = ref<boolean>(false);
+
+const demoOptions: LoadViewerOptions = {
+  OnClosePopup: () => Promise.resolve(),
+  OnExitViewer: () => {
+    m_demo.value = true;
+  },
+  OnLoadNewDicomSeries: () => {
+    m_demo.value = true;
+  },
+  OnDownloadDicomSeries: () => {
+    m_demo.value = true;
+  },
+  OnLoadSavedSession: () => {
+    m_demo.value = true;
+  },
+  OnSaveSession: () => {
+    m_demo.value = true;
+  },
+  OnSendTo3rdParty: () => {
+    m_demo.value = true;
+  },
+  OnShareToMobile: () => {
+    m_demo.value = true;
+  },
+  OnShare: () => {
+    m_demo.value = true;
+  },
+  OnScreenshot: () => {
+    m_demo.value = true;
+  },
+};
+
+function executeOption(key: keyof LoadViewerOptions) {
+  if (unref(isDemo)) {
+    const functionToExecute = demoOptions[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  } else {
+    const functionToExecute = unref(props.options)[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  }
+}
 
 const emptyPayload = { Version: "1.1.0" };
 
@@ -735,21 +788,19 @@ const footerItems = ref([
     text: "Send to 3rd Party",
     icon: "send",
     color: "blue",
-    click: async () => alterValue(false),
+    click: async () => executeOption("OnSendTo3rdParty"),
   },
   {
     text: "Share to Mobile / VR",
     icon: "share",
     color: "yellow",
-    click: async () => alterValue(false),
+    click: async () => executeOption("OnShareToMobile"),
   },
   {
     text: "Screenshot View",
     icon: "screenshot_region",
     color: "green",
-    click: async () => {
-      await snap();
-    },
+    click: async () => executeOption("OnScreenshot"),
   },
 ]);
 
@@ -1021,11 +1072,16 @@ async function sliderHandler(action: string, value: number) {
 function closeModal() {
   m_closeDialog.value = false;
   value.value = false;
+  executeOption("OnExitViewer");
 }
 function alterValue(val: boolean) {
   if (!val) {
     m_closeDialog.value = true;
     return;
+  } else {
+    isDemo.value =
+      props.payload.Url ===
+      "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl";
   }
 
   value.value = val;
@@ -1118,21 +1174,50 @@ async function i_fileManagement(action: string, message: string) {
   drawerCollapsed.value = false;
   await hoverOverCanvas(false);
 }
+
+import { useNotification } from "@kyvg/vue3-notification";
+
+const { notify } = useNotification();
+
 async function i_notifications(action: string, message: string) {
-  // const obj = JSON.parse(message);
-  // console.log(obj);
-  //{\"Version\":\"1.0.0\",\"Interface\":\"interactivity\",\"Action\":\"in_01\",\"Code\":\"0000\",\"Description\":\"\"}"
-  // if (obj.Description) {
-  //   if (action === NotificationActions.no01) {
-  //     await NotificationService.Instantiate().notificationSuccess(obj.Description);
-  //   }
-  //   if (action === NotificationActions.no02) {
-  //     await NotificationService.Instantiate().notificationError(obj.Description);
-  //   }
-  //   if (action === NotificationActions.no03) {
-  //     await NotificationService.Instantiate().notificationWarning(obj.Description);
-  //   }
-  // }
+  const notification = JSON.parse(message) as NotificationPayload;
+
+  switch (notification.Action) {
+    case InteractivityActions.in01:
+    case InteractivityActions.in02:
+    case InteractivityActions.in03:
+    case InteractivityActions.in04:
+      return;
+    default:
+  }
+  if (notification.Action.startsWith("sl")) return;
+
+  let type = "success";
+  switch (action) {
+    // Muting no01
+    case NotificationsActions.no01:
+      type = "success";
+      return;
+
+    case NotificationsActions.no02:
+      type = "warn";
+      break;
+
+    case NotificationsActions.no03:
+      type = "error";
+      break;
+
+    // Muting no04
+    case NotificationsActions.no04:
+      type = "info";
+      return;
+  }
+
+  notify({
+    title: notification.Code,
+    text: notification.Action,
+    type,
+  });
 }
 const isLayout2x2 = computed(() => {
   return (

package/src/plugins/index.ts

@@ -5,11 +5,13 @@
  */
 
 // Plugins
-import vuetify from './vuetify'
+import vuetify from "./vuetify";
 
 // Types
-import type { App } from 'vue'
+import type { App } from "vue";
+import Notifications from "@kyvg/vue3-notification";
 
-export function registerPlugins (app: App) {
-  app.use(vuetify)
+export function registerPlugins(app: App) {
+  app.use(vuetify);
+  app.use(Notifications);
 }