@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,336 +0,0 @@
-<template>
-  <v-app>
-    <v-app-bar density="compact">
-      <file-menu v-if="showFileMenu" @close="m_closeDialog = true" />
-      <settings-menu
-        v-model="introJsMenu"
-        v-if="showSettingsMenu"
-        :activator-props="{ disabled: introJsMenuDisabled }"
-        :persistent="introJsMenuDisabled"
-        :no-click-animation="introJsMenuDisabled"
-      />
-      <auto-annotate-btn v-if="showAiMenu" class="mr-2 transparent" />
-      <v-spacer />
-      <div class="font-weight-bold">
-        <span class="text-capitalize">{{ viewerTitle }}</span>
-      </div>
-      <v-spacer />
-      <v-btn
-        v-if="show2x2Layout"
-        class="ma-1 mr-0 pa-1"
-        data-testid="layout-2x2"
-        height="36"
-        style="min-width: 36px !important"
-        :color="isLayout2x2 ? 'primary' : 'default'"
-        @click="viewer3cr.layouts(LayoutActions.lo02)"
-      >
-        <v-icon>grid_view</v-icon>
-        <v-tooltip location="bottom" activator="parent"> Change Layout to 2:2 </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="show1x3Layout"
-        class="ma-1 mr-1 pa-1"
-        data-testid="layout-1x3"
-        height="36"
-        style="min-width: 36px !important"
-        :color="isLayout1x3 ? 'primary' : 'default'"
-        @click="viewer3cr.layouts(LayoutActions.lo03)"
-      >
-        <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 variant="flat" color="red" @click="m_closeDialog = true">Close Viewer</v-btn>
-    </v-app-bar>
-    <ViewerNavigationDrawer v-model:drawer="drawer" @update:expanded="expanded = $event" />
-    <v-main class="motif-background">
-      <LoadingSpinner v-if="scanLoading" text="Rendering your scan in 3D" />
-      <WebGL3DR
-        v-show="!scanLoading"
-        ref="webGl3dr"
-        @instance_loaded="load"
-        @dblclick="viewer3cr.viewSelection(ViewSelectionActions.vs05)"
-        @mouseenter="onMouseEnter"
-        @mouseleave="onMouseLeave"
-      >
-        <div
-          v-for="layout in scanState.Layout.PositionData"
-          :key="getCurrentView(layout)"
-          :style="generateDivStyleForLayout(layout, webGl3dr!.canvas)"
-        >
-          <ViewerScanView class="w-100 h-100" :view="getCurrentView(layout)" />
-        </div>
-      </WebGL3DR>
-      <data-overlay-modal />
-    </v-main>
-    <CloseViewerModal v-model:modal="m_closeDialog" />
-  </v-app>
-</template>
-
-<script setup lang="ts">
-import { generateDivStyleForLayout } from '@/functions/layoutOverlayStyle';
-import {
-  DataOverlaysActions,
-  FileManagementActions,
-  FrontEndInterfaces,
-  GraphicType,
-  LayoutActions,
-  McadActions,
-  NotificationsActions,
-  ScanStateActions,
-  ViewSelectionActions
-} from '@3cr/types-ts';
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { checkIsDemo, demoOptions, demoType, isDemo } from '@/components/demo/options';
-import { handleNotification } from '@/functions/notification';
-import { defaultLoadViewerPayload, LoadViewerPayload } from '@/models/loadViewerPayload';
-import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
-import {
-  getCurrentView,
-  isLayout1x3,
-  isLayout2x2,
-  scanState,
-  setDataOverlayEvent,
-  setDataOverlayState,
-  setInitialDataOverlayState,
-  setInitialMcadState,
-  setInitialScanStateFromPayload,
-  setMcadEvent,
-  setMcadState,
-  setScanStateFromPayload,
-  transactionStarted
-} from '@/models/scanState';
-import { useViewer3cr } from '@/composables/useViewer3cr';
-import { useNavigationCubeObserver } from '@/composables/useNavigationCubeObserver';
-import { mockDemoViewerStlDecimator, useViewerOptions } from '@/composables/useViewerOptions';
-import { useScanMovement } from '@/composables/useScanMovement';
-import { useScanSliders } from '@/composables/useScanSliders';
-import { useIntroJs } from '@/composables/useIntroJs';
-import WebGL3DR from '@/components/modal/WebGL3DR.vue';
-import { DemoType } from '@/types/demo-type';
-
-interface Props {
-  payload?: LoadViewerPayload;
-  options?: LoadViewerOptions;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  payload: () => defaultLoadViewerPayload,
-  options: () => defaultLoadViewerOptions
-});
-
-useScanMovement();
-useScanSliders();
-const viewer3cr = useViewer3cr();
-const opts = useViewerOptions();
-const { intro } = useIntroJs();
-const webGl3dr = ref<typeof WebGL3DR>();
-const observer = ref<ResizeObserver>();
-const drawer = ref<boolean>(false);
-const expanded = ref<number | undefined>();
-const scanLoading = ref<boolean>(true);
-const m_closeDialog = ref<boolean>(false);
-const introJsMenu = ref<boolean>(false);
-const introJsMenuDisabled = ref<boolean>(false);
-
-const demo = computed<string>(() => {
-  switch (demoType.value) {
-    case DemoType.Licence:
-      return 'Licence';
-    default:
-      return 'Patient';
-  }
-});
-
-const showFileMenu = computed(() => opts.value.ShowFileMenu !== false);
-
-const showSettingsMenu = computed(() => opts.value.ShowSettingsMenu !== false);
-
-const showAiMenu = computed(() => opts.value.ShowAiMenu !== false);
-
-const show2x2Layout = computed(() => opts.value.Show2x2Layout !== false);
-
-const show1x3Layout = computed(() => opts.value.Show1x3Layout !== false);
-
-const viewerTitle = computed(() => {
-  return (
-    opts.value.ViewerTitle ??
-    `3DICOM ${isDemo.value ? `${demo.value} DEMO` : 'Patient Viewer'} | Not for Diagnostic Use`
-  );
-});
-
-watch(
-  props,
-  (props) => {
-    checkIsDemo(props.payload);
-    opts.value = isDemo.value ? demoOptions.value : props.options;
-  },
-  { immediate: true }
-);
-
-/* istanbul ignore next -- @preserve */
-watch(
-  () => intro.value.getCurrentStep(),
-  (step) => {
-    const lock = step === 4;
-    introJsMenu.value = lock;
-    introJsMenuDisabled.value = lock;
-    setTimeout(() => {
-      if (intro.value.isActive()) {
-        intro.value.refresh(true);
-      }
-    }, 400);
-  }
-);
-
-/* istanbul ignore next -- @preserve */
-onMounted(() => {
-  viewer3cr.addInterfaceHandler(FrontEndInterfaces.notifications, async (message: string, action: string) => {
-    await handleNotification(action as NotificationsActions, message);
-  });
-
-  viewer3cr.addActionHandler(FileManagementActions.fm02, async (message: string) => {
-    // Set up the scan state
-    setInitialScanStateFromPayload(message);
-    transactionStarted.value = false;
-    scanLoading.value = false;
-    drawer.value = true;
-    await nextTick();
-    if (opts.value.OnScanLoaded) {
-      await opts.value.OnScanLoaded(scanState.value);
-    }
-
-    // Set up the navigation cube
-    observer.value = useNavigationCubeObserver(webGl3dr.value!.canvas);
-    switch (demoType.value) {
-      case DemoType.Licence:
-        await viewer3cr.setNavCubeGraphics(GraphicType.LETTER);
-        break;
-      default:
-        await viewer3cr.setNavCubeGraphics(GraphicType.BODY_SYMBOL);
-        break;
-    }
-
-    // Load the demo data
-    await loadDemoData();
-
-    // Load the tutorial
-    if (opts.value.ShowTutorial !== false) {
-      await intro.value.start();
-      if (!intro.value.isActive() && opts.value.OnInteractionReady) {
-        await opts.value.OnInteractionReady();
-      }
-    }
-  });
-
-  viewer3cr.addActionHandler(
-    FileManagementActions.fm09,
-    async (_1: string, returnChannel: string, returnTo: string) => {
-      if (opts.value.OnResolveUrls) {
-        const keys = JSON.parse(returnChannel) as string[];
-        const urls = await opts.value.OnResolveUrls(keys);
-        await viewer3cr.loadMcadObjects(undefined, urls, returnTo);
-      } else {
-        throw new Error('OnResolveUrls has not been defined in LoadViewerOptions');
-      }
-    }
-  );
-
-  viewer3cr.addActionHandler(ScanStateActions.ss01, async (message: string) => {
-    await setScanStateFromPayload(message);
-  });
-
-  viewer3cr.addActionHandler(ScanStateActions.ss02, (message: string) => {
-    setDataOverlayState(message);
-  });
-
-  viewer3cr.addActionHandler(ScanStateActions.ss03, (message: string) => {
-    setMcadState(message);
-  });
-
-  viewer3cr.addActionHandler(DataOverlaysActions.do01, (message: string) => {
-    setInitialDataOverlayState(message);
-  });
-
-  viewer3cr.addActionHandler(DataOverlaysActions.do02, (message: string) => {
-    setDataOverlayEvent(message);
-  });
-
-  viewer3cr.addActionHandler(DataOverlaysActions.do07, (message: string) => {
-    setDataOverlayEvent(message);
-  });
-
-  viewer3cr.addActionHandler('mu_17', (message: string) => {
-    setDataOverlayEvent(message);
-  });
-
-  viewer3cr.addActionHandler('mu_18', (message: string) => {
-    setDataOverlayEvent(message);
-  });
-
-  viewer3cr.addActionHandler(McadActions.mc01, (message: string) => {
-    setInitialMcadState(message);
-  });
-
-  viewer3cr.addActionHandler(McadActions.mc02, (message: string) => {
-    setMcadEvent(message);
-  });
-});
-
-onBeforeUnmount(() => {
-  if (observer.value) {
-    observer.value.disconnect();
-  }
-});
-
-/* istanbul ignore next -- @preserve */
-async function loadSession(url: string): Promise<void> {
-  if (url.includes('3crs')) {
-    await viewer3cr.loadScanSession({ Url: url });
-  } else if (url.includes('3crds')) {
-    await viewer3cr.setDataOverlaySession({ Url: url });
-  } else if (url.includes('3crms')) {
-    await viewer3cr.loadMcadObjects({ Url: url });
-  } else {
-    throw new Error('Invalid URL type');
-  }
-}
-
-async function load(): Promise<void> {
-  scanLoading.value = true;
-  await viewer3cr.loadScan(props.payload);
-}
-
-async function close(): Promise<void> {
-  if (opts.value.OnExitViewer) {
-    await opts.value.OnExitViewer();
-  }
-}
-
-async function onMouseEnter(): Promise<void> {
-  await viewer3cr.hoverOverCanvas(true);
-}
-
-async function onMouseLeave(): Promise<void> {
-  await viewer3cr.hoverOverCanvas(false);
-}
-
-/* istanbul ignore next -- @preserve */
-async function loadDemoData(): Promise<void> {
-  if (isDemo.value) {
-    const BASE_STATE_URL = 'https://webgl-3dr.singular.health/demo';
-    mockDemoViewerStlDecimator();
-    await viewer3cr.addDataOverlaySession({ Url: `${BASE_STATE_URL}/state/data_overlay.3crds` });
-    await viewer3cr.addDataOverlaySession({ Url: `${BASE_STATE_URL}/state/markups_2.3crds` });
-    // await viewer3cr.loadMcadObjects({ Url: `${BASE_STATE_URL}/state/mcad.3crms` });
-  }
-}
-
-defineExpose({ loadSession, load, close, m_closeDialog });
-</script>
-
-<style>
-.motif-background {
-  background: url("data:image/svg+xml,%3Csvg width='992' height='560' viewBox='15 7 992 560' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='1' width='992' height='567' fill='url(%23paint0_linear_504_579)'/%3E%3Cg filter='url(%23filter0_i_504_579)'%3E%3Cpath d='M567.029 291.5C574.21 421.339 748.15 561 825.931 561H12L12.0001 0C153.713 0 580.363 0 580.363 0C684.258 142 560.918 181 567.029 291.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter1_i_504_579)'%3E%3Cpath d='M435.911 260.5C462.579 433.5 652.034 561 729.815 561H12L12.0001 0C233.678 0 409.954 92.1126 435.911 260.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter2_i_504_579)'%3E%3Ccircle cx='46' cy='521' r='93' fill='%231B2E43' fill-opacity='0.3'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_i_504_579' x='12' y='0' width='858.931' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter1_i_504_579' x='12' y='0' width='762.815' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter2_i_504_579' x='-47' y='428' width='231' height='231' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_504_579' x1='1251.04' y1='696.83' x2='21.486' y2='-10.2783' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230E141D'/%3E%3Cstop offset='1' stop-color='%2323405E'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") !important;
-  background-size: cover !important;
-}
-</style>

package/src/components/modal/ViewerNavigationDrawerContent.vue

@@ -1,168 +0,0 @@
-<template>
-  <v-expansion-panels
-    :model-value="expanded"
-    class="bg-transparent text-white"
-    variant="accordion"
-    flat
-    tile
-    @update:model-value="onUpdate"
-  >
-    <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>
-          <v-tooltip location="right" activator="parent">
-            {{ item.tooltip }}
-          </v-tooltip>
-        </v-expansion-panel-title>
-        <v-expansion-panel-text class="px-0">
-          <Component v-bind="item.props" :is="item.component" />
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-    </template>
-  </v-expansion-panels>
-</template>
-
-<script setup lang="ts">
-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;
-}
-
-type Emits = {
-  'update:drawer': [boolean];
-  'update:expanded': [number | undefined];
-};
-
-interface SettingsItem {
-  icon: string;
-  text: string;
-  tooltip: string;
-  component: ComponentInstance<any>;
-  visible: boolean;
-  props: Record<string, any>;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  drawer: false
-});
-
-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 = computed<SettingsItem[]>(() => [
-  {
-    icon: options.value.DisplaySettings?.Icon ?? 'display_settings',
-    text: options.value.DisplaySettings?.Title ?? 'Display Settings',
-    tooltip:
-      options.value.DisplaySettings?.Tooltip ??
-      'Change the range of visible anatomy in the scan by only showing areas with certain density of tissue',
-    component: ViewerDisplaySettings,
-    visible: showDisplaySettings.value,
-    props: {
-      class: 'pa-4'
-    }
-  },
-  {
-    icon: options.value.Annotations?.Icon ?? 'draw',
-    text: options.value.Annotations?.Title ?? 'Annotations',
-    tooltip: options.value.Annotations?.Tooltip ?? 'Display annotations on your scans',
-    component: AnnotationTreeView,
-    visible: !!showAnnotations.value,
-    props: {
-      items: annotations.value
-    }
-  },
-  {
-    icon: options.value.Markups?.Icon ?? 'design_services',
-    text: options.value.Markups?.Title ?? 'Markups',
-    tooltip: options.value.Markups?.Tooltip ?? 'Display markups on your scans',
-    component: Markups,
-    visible: !!showMarkups.value,
-    props: {
-      items: markups.value
-    }
-  },
-  {
-    icon: options.value.Mcad?.Icon ?? 'deployed_code',
-    text: options.value.Mcad?.Title ?? 'MCAD',
-    tooltip: options.value.Mcad?.Tooltip ?? 'Display MCAD objects on your scans',
-    component: McadObjects,
-    visible: !!showMcadObjects.value,
-    props: {
-      items: mcadObjects.value
-    }
-  }
-]);
-
-const showDisplaySettings = computed(() => {
-  return options.value.DisplaySettings?.Show !== false;
-});
-
-const showAnnotations = computed(() => {
-  const opts = options.value;
-  return opts.Annotations?.Show !== false && opts.OnLoadSavedSession && hasAnnotations.value;
-});
-
-const showMarkups = computed(() => {
-  const opts = options.value;
-  return opts.Markups?.Show !== false && opts.OnLoadSavedSession && hasMarkups.value;
-});
-
-const showMcadObjects = computed(() => {
-  const opts = options.value;
-  return opts.Mcad?.Show !== false && opts.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;
-  previous.value = value;
-  expanded.value = value;
-  emit('update:expanded', expanded.value);
-  if (!props.drawer && value !== undefined) {
-    emit('update:drawer', true);
-  }
-}
-</script>
-
-<style scoped lang="css">
-:deep(.v-expansion-panel-title) {
-  padding: 12px 16px;
-  justify-content: center;
-}
-
-:deep(.v-expansion-panel-text__wrapper) {
-  padding: 0;
-}
-</style>

package/src/components/modal/ViewerNavigationDrawerFooter.vue

@@ -1,131 +0,0 @@
-<template>
-  <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>
-            <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 { computed } 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 {
-  drawer?: boolean;
-  disabled?: boolean;
-}
-
-interface FooterItem {
-  text: string;
-  iconProps: Record<string, any>;
-  visible: boolean;
-  click: () => void | Promise<void>;
-}
-
-withDefaults(defineProps<Props>(), {
-  drawer: false,
-  disabled: false
-});
-
-const viewer3cr = useViewer3cr();
-const version3cr = useVersion3cr();
-const options = useViewerOptions();
-
-const showReset = computed(() => options.value.ShowResetScan !== false);
-
-const showEnableCloudStorage = computed(() => {
-  const opts = options.value;
-  return opts.ShowEnableCloudStorage !== false && !!opts.OnEnableCloudStorage;
-});
-
-const showSendTo3rdParty = computed(() => {
-  const opts = options.value;
-  return opts.ShowSendTo3rdParty !== false && !!opts.OnSendTo3rdParty;
-});
-
-const showShareToMobile = computed(() => {
-  const opts = options.value;
-  return opts.ShowShareToMobile !== false && !!opts.OnShareToMobile;
-});
-
-const showScreenshot = computed(() => {
-  const opts = options.value;
-  return opts.ShowScreenshot !== false && !!opts.OnScreenshot;
-});
-
-const footerItems = computed<FooterItem[]>(() => [
-  {
-    text: 'Reset Scan',
-    iconProps: { icon: 'refresh', color: 'red' },
-    visible: showReset.value,
-    click: async () => {
-      currentColourPreset.value = initialScanState.value.ColourPresets[0];
-      await viewer3cr.viewSelection(ViewSelectionActions.vs05);
-      await viewer3cr.viewSelection(ViewSelectionActions.vs06);
-    }
-  },
-  {
-    text: 'Enable Cloud Storage',
-    iconProps: { icon: 'cloud', color: 'blue' },
-    visible: showEnableCloudStorage.value,
-    click: async () => {
-      await options.value.OnEnableCloudStorage!();
-    }
-  },
-  {
-    text: 'Send to 3rd Party',
-    iconProps: { icon: 'send', color: 'green' },
-    visible: showSendTo3rdParty.value,
-    click: async () => {
-      await options.value.OnSendTo3rdParty!();
-    }
-  },
-  {
-    text: 'Share to Mobile / VR',
-    iconProps: { icon: 'share', color: 'yellow' },
-    visible: showShareToMobile.value,
-    click: async () => {
-      await options.value.OnShareToMobile!();
-    }
-  },
-  {
-    text: 'Screenshot View',
-    iconProps: { icon: 'screenshot_region', color: 'green' },
-    visible: showScreenshot.value,
-    click: async () => {
-      await options.value.OnScreenshot!();
-    }
-  }
-]);
-</script>
-
-<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,33 +0,0 @@
-<template>
-  <div
-    v-if="!isDemo || demoType === 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'">
-    <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 } from '@/types/demo-type';
-
-interface Props {
-  drawer?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-  drawer: false
-});
-</script>
-
-<style scoped lang="scss">
-.v-img {
-  opacity: 0.9;
-}
-</style>