@3cr/viewer-browser 0.0.61 → 0.0.86

package/src/dataLayer/scanState.ts

@@ -0,0 +1,181 @@
+import { computed, nextTick, ref, unref, watch, WatchSource } from "vue";
+import {
+  AnchorPoint,
+  ColourPresetData,
+  CurrentScanState,
+  InitialScanState,
+  ScanMovementActions,
+} from "@3cr/types-ts";
+import {
+  inflateInitialScanState,
+  inflateScanState,
+} from "@/helpers/modelHelper";
+import { PayloadHandler } from "@/dataLayer/payloadHandler";
+
+export const currentColourPreset = ref<ColourPresetData | undefined>(undefined);
+
+export const transactionStarted = ref<boolean>(false);
+export const scanStateIncoming = ref<string>("");
+export const scanState = ref<CurrentScanState>(inflateScanState());
+export const initialScanState = ref<InitialScanState>(
+  inflateInitialScanState()
+);
+
+export const huMinMax = ref({
+  min: -999999,
+  max: 999999,
+});
+
+export const tMinMax = ref({
+  min: 0,
+  max: 999999,
+});
+export const sMinMax = ref({
+  min: 0,
+  max: 999999,
+});
+export const cMinMax = ref({
+  min: 0,
+  max: 999999,
+});
+
+export const windowSlider = computed({
+  get() {
+    return [
+      unref(scanState).Display.WindowLower,
+      unref(scanState).Display.WindowUpper,
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Display.WindowLower = value[0];
+    scanState.value.Display.WindowUpper = value[1];
+  },
+});
+export const thresholdSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Display.ThresholdLower),
+      Math.trunc(unref(scanState).Display.ThresholdUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Display.ThresholdLower = value[0];
+    scanState.value.Display.ThresholdUpper = value[1];
+  },
+});
+export const tSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Slice.TransverseLower),
+      Math.trunc(unref(scanState).Slice.TransverseUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Slice.TransverseLower = value[0];
+    scanState.value.Slice.TransverseLower = value[1];
+  },
+});
+export const sSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Slice.SagittalLower),
+      Math.trunc(unref(scanState).Slice.SagittalUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Slice.SagittalLower = value[0];
+    scanState.value.Slice.SagittalUpper = value[1];
+  },
+});
+
+export const cSlider = computed({
+  get() {
+    return [
+      Math.trunc(unref(scanState).Slice.CoronalLower),
+      Math.trunc(unref(scanState).Slice.CoronalUpper),
+    ];
+  },
+  set(value: Array<number>) {
+    scanState.value.Slice.CoronalLower = value[0];
+    scanState.value.Slice.CoronalUpper = value[1];
+  },
+});
+
+export const isLayout2x2 = computed(() => {
+  return (
+    unref(scanState).Layout.PositionData.length > 1 &&
+    unref(scanState).Layout.PositionData[0].Anchor === AnchorPoint.TOP_LEFT &&
+    unref(scanState).Layout.PositionData[1].Anchor === AnchorPoint.TOP_RIGHT &&
+    unref(scanState).Layout.PositionData[2].Anchor ===
+      AnchorPoint.BOTTOM_LEFT &&
+    unref(scanState).Layout.PositionData[3].Anchor === AnchorPoint.BOTTOM_RIGHT
+  );
+});
+export const isLayout1x3 = computed(() => {
+  return (
+    unref(scanState).Layout.PositionData.length > 1 &&
+    unref(scanState).Layout.PositionData[0].Anchor === AnchorPoint.CENTER &&
+    unref(scanState).Layout.PositionData[1].Anchor === AnchorPoint.TOP_RIGHT &&
+    unref(scanState).Layout.PositionData[2].Anchor === AnchorPoint.RIGHT &&
+    unref(scanState).Layout.PositionData[3].Anchor === AnchorPoint.BOTTOM_RIGHT
+  );
+});
+
+export const currentGreyscalePreset = computed(() => {
+  for (const preset of unref(initialScanState).GreyscalePresets) {
+    if (
+      (unref(scanState).Display.WindowLower === preset.Lower ||
+        (preset.Lower < unref(initialScanState).HuLower &&
+          unref(scanState).Display.WindowLower ===
+            unref(initialScanState).HuLower)) &&
+      (unref(scanState).Display.WindowUpper === preset.Upper ||
+        (preset.Upper > unref(initialScanState).HuUpper &&
+          unref(scanState).Display.WindowUpper ===
+            unref(initialScanState).HuUpper))
+    ) {
+      return preset.Name;
+    }
+  }
+  return undefined;
+});
+
+export async function setScanStateFromPayload(_: string, message: string) {
+  transactionStarted.value = true;
+  scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
+
+  setScanState(message);
+  await nextTick();
+  transactionStarted.value = false;
+}
+export async function setInitialScanStateFromPayload(
+  _: string,
+  message: string
+) {
+  transactionStarted.value = true;
+
+  scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
+  const obj = JSON.parse(unref(scanStateIncoming)) as InitialScanState;
+
+  setScanState(JSON.stringify(obj.DefaultDisplaySettings, null, 2));
+  initialScanState.value = obj;
+  huMinMax.value.max = obj.HuUpper;
+  huMinMax.value.min = obj.HuLower;
+  sMinMax.value.max = obj.XSlices;
+  cMinMax.value.max = obj.YSlices;
+  tMinMax.value.max = obj.ZSlices;
+  currentColourPreset.value = obj.ColourPresets[0];
+}
+
+export function setScanState(message: string) {
+  scanState.value = JSON.parse(message) as CurrentScanState;
+}
+
+export function generateWatcherForScanMovement(
+  payloadHandler: PayloadHandler,
+  sliderAction: ScanMovementActions,
+  source: WatchSource<number>
+) {
+  watch(source, async (value: number) => {
+    await payloadHandler.scanMovementHandler(sliderAction, value);
+  });
+}

package/src/demo/DemoPatientModal.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface Props {
+  modal: boolean;
+  isModalOpen: boolean;
+}
+
+const emit = defineEmits<{
+  "update:modal": [value: boolean];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false,
+  isModalOpen: true,
+});
+
+const modalState = computed({
+  get() {
+    return props.modal;
+  },
+  set(value) {
+    emit("update:modal", value);
+  },
+});
+function openUrl(url: string) {
+  window.open(url, "_self");
+}
+</script>
+
+<template>
+  <v-dialog v-model:model-value="modalState">
+    <v-card class="pa-1 ma-auto position-relative" max-width="450">
+      <v-card-title>Purchase 3Dicom Viewer</v-card-title>
+      <v-card-text> Thank you for trying 3Dicom Online Viewer! </v-card-text>
+      <v-card-text>
+        This instance of the Online Viewer is a Demo instance. If you would like
+        to see your scans in 3D, please choose a plan for 3DICOM
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          color="error"
+          @click="modalState = false"
+          :disabled="!isModalOpen"
+        >
+          Continue with Viewer
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          variant="tonal"
+          color="success"
+          @click="openUrl('https://3dicomviewer.com/pricing')"
+        >
+          Select a Plan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

package/src/demo/options.ts

@@ -0,0 +1,93 @@
+import { computed, ref, unref } from "vue";
+import { LoadViewerOptions } from "@/models/LoadViewerOptions";
+import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+
+export function checkIsDemo(payload: LoadViewerPayload) {
+  isDemo.value =
+    payload.Url ===
+    "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl";
+}
+
+export const isDemo = ref<boolean>(false);
+export const m_demo = ref<boolean>(false);
+export const m_demoPatient = ref<boolean>(false);
+export const demoLicenceOptions: 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;
+  },
+};
+
+export const demoPatientOptions: LoadViewerOptions = {
+  OnClosePopup: () => Promise.resolve(),
+  OnExitViewer: () => {
+    m_demoPatient.value = true;
+  },
+  OnLoadNewDicomSeries: () => {
+    m_demoPatient.value = true;
+  },
+  OnDownloadDicomSeries: () => {
+    m_demoPatient.value = true;
+  },
+  OnLoadSavedSession: () => {
+    m_demoPatient.value = true;
+  },
+  OnSaveSession: () => {
+    m_demoPatient.value = true;
+  },
+  OnSendTo3rdParty: () => {
+    m_demoPatient.value = true;
+  },
+  OnShareToMobile: () => {
+    m_demoPatient.value = true;
+  },
+  OnShare: () => {
+    m_demoPatient.value = true;
+  },
+  OnScreenshot: () => {
+    m_demoPatient.value = true;
+  },
+};
+
+export const demoType = computed(() => {
+  const urlParams = new URLSearchParams(window.location.search);
+  return (urlParams.get("demoType") || "licence").toLowerCase();
+});
+
+export function executeDemoOption(key: keyof LoadViewerOptions) {
+  if (unref(demoType) === "licence") {
+    const functionToExecute = demoLicenceOptions[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  } else if (unref(demoType) === "patient") {
+    const functionToExecute = demoPatientOptions[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  }
+}

package/src/models/Callbacks.ts

@@ -0,0 +1,2 @@
+export type ViewerCallback = () => void;
+export type ViewerAsyncCallback = () => Promise<void>;

package/src/models/LoadViewerOptions.ts

@@ -0,0 +1,27 @@
+import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
+
+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 const defaultLoadViewerOptions: 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(),
+};

package/src/models/LoadViewerPayload.ts

@@ -0,0 +1,8 @@
+export interface LoadViewerPayload {
+  Url: string;
+  DecryptionKey: MftpDecryptionKey;
+}
+export interface MftpDecryptionKey {
+  Key: string;
+  Iv: string;
+}

package/src/notifications/notification.ts

@@ -0,0 +1,48 @@
+import {
+  InteractivityActions,
+  NotificationPayload,
+  NotificationsActions,
+} from "@3cr/types-ts";
+import { useNotification } from "@kyvg/vue3-notification";
+const { notify } = useNotification();
+
+export async function handleNotification(action: string, message: string) {
+  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,
+  });
+}

package/vitest.config.mts

@@ -21,6 +21,7 @@ export default mergeConfig(viteConfig, defineConfig({
       reporter: ['html'],
       include: ['src/**/*', 'index.ts'],
       exclude: [
+        'src/demo/**',
         'coverage/**',
         'dist/**',
         'scripts/**',