@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/demo/fileReader.ts

@@ -0,0 +1,47 @@
+export type OnFileCallback = (file: File, path: string) => Promise<void>;
+
+export async function traverseDirectoryTreeWrapper(fileList: DataTransferItemList, onFileCallback: OnFileCallback) {
+  for (const dtItem of fileList) {
+    if (dtItem) {
+      await traverseDirectoryTree(dtItem.webkitGetAsEntry(), onFileCallback);
+    }
+  }
+}
+async function traverseDirectoryTree(item: FileSystemEntry | null, onFileCallback: OnFileCallback, path: string = '') {
+  if (item?.isFile) {
+    const fileItem = item as FileSystemFileEntry;
+    await getFileEntriesFromReader(fileItem, onFileCallback, path);
+  } else if (item?.isDirectory) {
+    const directoryItem = item as FileSystemDirectoryEntry;
+    const directoryReader = directoryItem.createReader();
+    let entries: Array<FileSystemEntry> = [];
+    let lastAdditions = 0;
+    do {
+      const entrySet = await getDirectoryEntriesFromReader(directoryReader);
+      lastAdditions = entrySet.length;
+      entries = entries.concat(entrySet);
+    } while (lastAdditions > 0);
+    for (const element of entries) {
+      await traverseDirectoryTree(element, onFileCallback, path + directoryItem.name + '/');
+    }
+  }
+}
+
+async function getDirectoryEntriesFromReader(
+  directoryReader: FileSystemDirectoryReader
+): Promise<Array<FileSystemEntry>> {
+  return await new Promise((resolve, reject) => {
+    directoryReader.readEntries((entries: Array<FileSystemEntry>) => {
+      resolve(entries);
+    }, reject);
+  });
+}
+
+async function getFileEntriesFromReader(item: FileSystemFileEntry, onFileCallback: OnFileCallback, path: string) {
+  return await new Promise<void>((resolve, _reject) => {
+    item.file(async (file: File) => {
+      await onFileCallback(file, path);
+      resolve();
+    });
+  });
+}

package/src/{composables/useViewerOptions.ts → components/demo/mockDemoViewerStlDecimator.ts}

@@ -1,20 +1,15 @@
-import { ref } from 'vue';
-import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
 import axios from 'axios';
+import { storeToRefs } from 'pinia';
+import { DEMO_BUCKET_URL } from '@/constants';
 import { stlResolution } from '@/models/scanState';
+import { useViewerStore } from '@/stores/viewer.store';
 
-const options = ref<LoadViewerOptions>(defaultLoadViewerOptions);
-
-const BASE_STATE_URL = 'https://webgl-3dr.singular.health/demo';
 const ax = axios.create();
 
-export function useViewerOptions() {
-  return options;
-}
-
 export function mockDemoViewerStlDecimator() {
-  options.value.OnResolveUrls = async (keys: string[]) =>
-    await Promise.all(
+  const { options } = storeToRefs(useViewerStore());
+  options.value.onResolveKeys = async (keys: string[]) => {
+    return await Promise.all(
       keys.map(async (key) => {
         if (key.includes('.stl')) {
           try {
@@ -30,7 +25,8 @@ export function mockDemoViewerStlDecimator() {
             console.error(err);
           }
         }
-        return `${BASE_STATE_URL}/stl/${key}`;
+        return `${DEMO_BUCKET_URL}/stl/${key}`;
       })
     );
+  };
 }

package/src/components/intro/ViewerIntro.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-dialog v-model="modelValue" :max-width="600" no-click-animation persistent>
+    <v-card>
+      <v-card-text class="pa-0">
+        <img src="@/assets/images/intro.svg" alt="intro" width="600" />
+      </v-card-text>
+      <v-card-text class="font-weight-bold text-h4 text-center">
+        <span>{{ t('texts.welcome') }}</span>
+      </v-card-text>
+      <v-card-text class="text-center">
+        <p>{{ t('texts.takeTour') }}</p>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" size="large" width="150" variant="text" @click="modelValue = false">
+          <span>{{ t('labels.dismiss') }}</span>
+        </v-btn>
+        <v-btn color="primary" size="large" width="150" variant="flat" @click="start">
+          <span>{{ t('labels.letsGo') }}</span>
+        </v-btn>
+        <v-spacer />
+      </v-card-actions>
+      <v-card-actions>
+        <v-spacer />
+        <v-checkbox v-model="dontShowAgain">
+          <template #label>
+            <span>{{ t('texts.dontShowAgain') }}</span>
+          </template>
+        </v-checkbox>
+        <v-spacer />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useIntroStore } from '@/stores/intro.store';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+type Emits = {
+  start: [void];
+};
+
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n();
+const { dontShowAgain } = storeToRefs(useIntroStore());
+
+const modelValue = defineModel<boolean>({ default: false });
+
+function start(): void {
+  modelValue.value = false;
+  emit('start');
+}
+</script>

package/src/components/intro/ViewerTour.vue

@@ -0,0 +1,53 @@
+<template>
+  <tour v-model="modelValue" :max-width="400" :steps="steps">
+    <template #text="{ step }">
+      <v-card-text class="pa-0">
+        <img src="@/assets/images/intro.svg" alt="intro" width="400" />
+      </v-card-text>
+      <v-card-text>
+        <p>{{ step.text }}</p>
+      </v-card-text>
+    </template>
+  </tour>
+</template>
+
+<script setup lang="ts">
+import { Step } from '@/components/intro/tour/step';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const modelValue = defineModel({ default: false });
+
+const steps = computed<Step[]>(() => [
+  {
+    title: t('texts.tutorial.density.title'),
+    text: t('texts.tutorial.density.text'),
+    element: '#density',
+    position: 'bottom'
+  },
+  {
+    title: t('texts.tutorial.controls3d.title'),
+    text: t('texts.tutorial.controls3d.text'),
+    element: '#volume',
+    position: 'right'
+  },
+  {
+    title: t('texts.tutorial.controls2d.title'),
+    text: t('texts.tutorial.controls2d.text'),
+    element: '#sagittal',
+    position: 'left'
+  },
+  {
+    title: t('texts.tutorial.settings.title'),
+    text: t('texts.tutorial.settings.text'),
+    element: '#settings',
+    position: 'top'
+  },
+  {
+    title: t('texts.tutorial.updates.title'),
+    text: t('texts.tutorial.updates.text')
+  }
+]);
+</script>

package/src/components/intro/tour/Tour.vue

@@ -0,0 +1,205 @@
+<template>
+  <teleport v-if="modelValue" to="body">
+    <div class="tour-bg"></div>
+  </teleport>
+  <v-overlay
+    v-bind="props"
+    v-model="modelValue"
+    :close-on-content-click="false"
+    location-strategy="connected"
+    no-click-animation
+    persistent
+    :scrim="false"
+    :target="target"
+  >
+    <v-card :ref="(el) => (modal = (el as VCard)?.$el)" v-bind="props">
+      <slot name="title" :step="currentStep">
+        <v-card-title>
+          <v-toolbar color="surface" density="compact">
+            <span>{{ currentStep.title }}</span>
+            <v-spacer />
+            <v-btn density="comfortable" icon="close" variant="text" @click="modelValue = false" />
+          </v-toolbar>
+        </v-card-title>
+      </slot>
+      <slot name="text" :step="currentStep">
+        <v-card-text>
+          <p>{{ currentStep.text }}</p>
+        </v-card-text>
+      </slot>
+      <slot name="actions" :step="currentStep">
+        <v-card-actions class="px-4">
+          <span class="text-primary">{{ step + 1 }} / {{ steps.length }}</span>
+          <v-spacer />
+          <v-btn v-if="hasPrevious" color="primary" variant="text" @click="previous">
+            <span>{{ t('labels.previous') }}</span>
+          </v-btn>
+          <v-btn v-if="hasNext" color="primary" variant="flat" @click="next">
+            <span>{{ t('labels.next') }}</span>
+          </v-btn>
+          <v-btn v-if="!hasNext" color="primary" variant="flat" @click="modelValue = false">
+            <span>{{ t('labels.finish') }}</span>
+          </v-btn>
+        </v-card-actions>
+      </slot>
+    </v-card>
+  </v-overlay>
+</template>
+
+<script setup lang="ts">
+import { Step } from '@/components/intro/tour/step';
+import { useBoundingBox } from '@/composables/useBoundingBox';
+import { computed, ref, watch } from 'vue';
+import { VCard } from 'vuetify/components';
+import { useI18n } from 'vue-i18n';
+
+interface Props {
+  gap?: number;
+  height?: string | number;
+  maxHeight?: string | number;
+  maxWidth?: string | number;
+  minHeight?: string | number;
+  minWidth?: string | number;
+  steps?: Step[];
+  width?: string | number;
+}
+
+const { t } = useI18n();
+
+const props = withDefaults(defineProps<Props>(), {
+  gap: 8,
+  steps: () => []
+});
+
+const element = ref<Element | null>(null);
+const { x: ex, y: ey, width: ew, height: eh } = useBoundingBox(element);
+
+const modal = ref<Element | null>(null);
+const { width: mw, height: mh } = useBoundingBox(modal);
+
+const target = ref<[number, number]>([0, 0]);
+
+const modelValue = defineModel<boolean>({ default: false });
+const step = defineModel<number>('step', { default: 0 });
+
+const currentStep = computed(() => {
+  return props.steps[step.value];
+});
+
+const hasPrevious = computed(() => {
+  return step.value > 0;
+});
+
+const hasNext = computed(() => {
+  return step.value < props.steps.length - 1;
+});
+
+const left = computed(() => {
+  return element.value !== null ? ex.value : document.documentElement.clientWidth / 2;
+});
+
+const top = computed(() => {
+  return element.value !== null ? ey.value : document.documentElement.clientHeight / 2;
+});
+
+watch(modelValue, (value) => {
+  if (value) {
+    refresh();
+  }
+});
+
+watch(currentStep, (step) => {
+  element.value = _queryElement(step.element);
+});
+
+watch([element, currentStep, ex, ey, ew, eh, mw, mh], ([el, step, ex, ey, ew, eh, mw, mh]) => {
+  target.value = _recalculate(el, ex, ey, ew, eh, mw, mh, step.position);
+});
+
+function _queryElement(selector?: string | Element): Element | null {
+  if (selector) {
+    return typeof selector === 'string' ? document.querySelector(selector) : selector;
+  } else {
+    return null;
+  }
+}
+
+function _recalculate(
+  el: Element | null,
+  ex: number,
+  ey: number,
+  ew: number,
+  eh: number,
+  mw: number,
+  mh: number,
+  pos?: string
+): [number, number] {
+  if (el) {
+    switch (pos) {
+      case 'top': {
+        const x = Math.max(ex + ew / 2 - mw / 2, 0);
+        const y = Math.max(ey - mh - props.gap, 0);
+        return [x, y];
+      }
+      case 'right': {
+        const x = Math.max(ex + ew + props.gap, 0);
+        const y = Math.max(ey + eh / 2 - mh / 2, 0);
+        return [x, y];
+      }
+      case 'bottom': {
+        const x = Math.max(ex + ew / 2 - mw / 2, 0);
+        const y = Math.max(ey + eh + props.gap, 0);
+        return [x, y];
+      }
+      case 'left': {
+        const x = Math.max(ex - mw - props.gap, 0);
+        const y = Math.max(ey + eh / 2 - mh / 2, 0);
+        return [x, y];
+      }
+    }
+  }
+
+  // default to center
+  const x = document.documentElement.clientWidth / 2 - mw / 2;
+  const y = document.documentElement.clientHeight / 2 - mh / 2;
+  return [x, y];
+}
+
+function refresh(): void {
+  const step = currentStep.value;
+  element.value = _queryElement(step.element);
+}
+
+function previous(): void {
+  if (hasPrevious.value) {
+    step.value -= 1;
+  }
+}
+
+function next(): void {
+  if (hasNext.value) {
+    step.value += 1;
+  }
+}
+
+defineExpose({ next, previous, refresh });
+</script>
+
+<style scoped lang="scss">
+.tour-bg {
+  pointer-events: none;
+  position: absolute;
+  top: calc(v-bind('top') * 1px);
+  left: calc(v-bind('left') * 1px);
+  width: calc(v-bind('ew') * 1px);
+  height: calc(v-bind('eh') * 1px);
+  box-shadow: 0 0 0 9999px rgba(31, 31, 55, 0.9);
+  border-radius: 8px;
+  z-index: 999;
+  transition:
+    width 500ms,
+    height 500ms,
+    top 500ms,
+    left 500ms;
+}
+</style>

package/src/components/intro/tour/step.ts

@@ -0,0 +1,6 @@
+export interface Step {
+  element?: string | Element;
+  position?: 'top' | 'left' | 'bottom' | 'right';
+  title?: string;
+  text?: string;
+}

package/src/components/modal/ActionRail.vue

@@ -44,12 +44,14 @@ const props = withDefaults(defineProps<Props>(), {
 const rail = ref<HTMLDivElement>();
 const splitIndex = ref<number>(0);
 
+/* v8 ignore start -- @preserve */
 const observer = new ResizeObserver((entries) => {
   if (entries.length > 0) {
     const railWidth = entries[0].contentRect.width;
     calculateSplitIndex(railWidth);
   }
 });
+/* v8 ignore stop -- @preserve */
 
 const visible = computed(() => {
   return props.actions.slice(0, splitIndex.value);
@@ -73,6 +75,7 @@ onBeforeUnmount(() => {
   observer.disconnect();
 });
 
+/* v8 ignore start -- @preserve */
 function calculateSplitIndex(railWidth: number): void {
   const widths = props.actions.map((action) => action.width);
   let sum = 48;
@@ -83,6 +86,7 @@ function calculateSplitIndex(railWidth: number): void {
     }
   }
 }
+/* v8 ignore stop -- @preserve */
 </script>
 
 <style lang="scss">

package/src/components/modal/Viewer3cr.vue

@@ -0,0 +1,224 @@
+<template>
+  <v-app>
+    <v-layout>
+      <demo-notification-navigation-drawer v-model="notificationDropdown.modal" />
+      <viewer-navigation-drawer @close="m_closeDialog = true" />
+      <viewer-app-bar @close="m_closeDialog = true" />
+      <viewer-action-bar />
+      <v-main id="main-panel">
+        <loading-spinner v-if="scanLoading" />
+        <viewer-main v-show="!scanLoading" @loaded="load" />
+        <data-overlay-modal />
+        <close-viewer-modal v-model:modal="m_closeDialog" />
+        <viewer-intro v-model="introActive" @start="tourActive = true" />
+        <viewer-tour v-model="tourActive" />
+        <whats-new-modal v-model="whatsNewActive" />
+      </v-main>
+    </v-layout>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { nextTick, onMounted, ref, watch } from 'vue';
+import {
+  DataOverlaysActions,
+  FileManagementActions,
+  FrontEndInterfaces,
+  GraphicType,
+  McadActions,
+  NotificationsActions,
+  ScanStateActions
+} from '@3cr/types-ts';
+import {
+  scanState,
+  setInitialScanStateFromPayload,
+  setScanStateFromPayload,
+  transactionStarted
+} from '@/models/scanState';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useScanMovement } from '@/composables/useScanMovement';
+import { useScanSliders } from '@/composables/useScanSliders';
+import { LoadSessionState } from '@3cr/types-ts/types/LoadSessionState';
+import { useDataOverlayStore } from '@/stores/data-overlay.store';
+import { useMcadStore } from '@/stores/mcad.store';
+import { mockDemoViewerStlDecimator } from '@/components/demo/mockDemoViewerStlDecimator';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useIntroStore } from '@/stores/intro.store';
+import { useDrawerStore } from '@/stores/drawer.store';
+import { useDemoStore } from '@/stores/demo.store';
+import { DEMO_BUCKET_URL } from '@/constants';
+import { useNotificationHandler } from '@/composables/useNotificationHandler';
+import { DemoType, ViewerOptions, ViewerPayload } from '@3cr/viewer-types-ts';
+
+interface Props {
+  payload?: ViewerPayload;
+  options?: ViewerOptions;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => ({})
+});
+
+useScanMovement();
+useScanSliders();
+const { handler } = useNotificationHandler();
+const viewer3cr = useViewer3cr();
+const dataOverlayStore = useDataOverlayStore();
+const mcadStore = useMcadStore();
+const { activeDrawer } = storeToRefs(useDrawerStore());
+const { dontShowAgain } = storeToRefs(useIntroStore());
+const { setIsDemo } = useDemoStore();
+const { isDemo, demoOptions, demoType, notificationDropdown } = storeToRefs(useDemoStore());
+const { options: opts, enableMouse, enableKeyboard } = storeToRefs(useViewerStore());
+
+const scanLoading = ref<boolean>(true);
+const m_closeDialog = ref<boolean>(false);
+const introActive = ref<boolean>(false);
+const whatsNewActive = ref<boolean>(false);
+const tourActive = ref<boolean>(false);
+
+watch(
+  props,
+  (props) => {
+    if (props.payload) {
+      setIsDemo(props.payload);
+      opts.value = isDemo.value ? demoOptions.value : props.options;
+    }
+  },
+  { immediate: true }
+);
+
+watch([introActive, tourActive], ([intro, tour]) => {
+  if (!intro && !tour) {
+    whatsNewActive.value = true;
+  }
+});
+
+/* v8 ignore start -- @preserve */
+onMounted(() => {
+  viewer3cr.addInterfaceHandler(FrontEndInterfaces.notifications, async (message: string, action: string) => {
+    await handler(action as NotificationsActions, message);
+  });
+
+  viewer3cr.addActionHandler(FileManagementActions.fm02, async (message: string) => {
+    enableMouse.value = true;
+    enableKeyboard.value = true;
+    setInitialScanStateFromPayload(message);
+    if (opts.value.onScanLoaded) {
+      await opts.value.onScanLoaded(scanState.value);
+    }
+
+    await nextTick();
+
+    transactionStarted.value = false;
+    scanLoading.value = false;
+    activeDrawer.value = 'display';
+    await loadDemoData();
+    switch (demoType.value) {
+      case DemoType.Licence:
+        await viewer3cr.setNavCubeGraphics(GraphicType.LETTER);
+        break;
+      case DemoType.Patient:
+        await viewer3cr.setNavCubeGraphics(GraphicType.BODY_SYMBOL);
+        break;
+    }
+
+    await nextTick();
+
+    if (!dontShowAgain.value) {
+      introActive.value = true;
+    } else {
+      whatsNewActive.value = true;
+    }
+  });
+
+  viewer3cr.addActionHandler(
+    FileManagementActions.fm09,
+    async (_1: string, returnChannel: string, returnTo: string) => {
+      if (opts.value.onResolveKeys) {
+        const keys = JSON.parse(returnChannel) as string[];
+        const urls = await opts.value.onResolveKeys(keys);
+        await viewer3cr.loadMcadObjects({ message: undefined, returnChannel: urls, returnTo });
+      } else {
+        throw new Error('onResolveKeys has not been defined in the viewer options');
+      }
+    }
+  );
+
+  viewer3cr.addActionHandler(ScanStateActions.ss01, async (message: string) => {
+    await setScanStateFromPayload(message);
+  });
+
+  viewer3cr.addActionHandler(ScanStateActions.ss02, (message: string) => {
+    dataOverlayStore.setDataOverlayState(message);
+  });
+
+  viewer3cr.addActionHandler(ScanStateActions.ss03, (message: string) => {
+    mcadStore.setMcadState(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlaysActions.do01, (message: string) => {
+    dataOverlayStore.setInitialDataOverlayState(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlaysActions.do02, (message: string) => {
+    dataOverlayStore.setDataOverlayEvent(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlaysActions.do07, (message: string) => {
+    dataOverlayStore.setDataOverlayEvent(message);
+  });
+
+  viewer3cr.addActionHandler('mu_17', (message: string) => {
+    dataOverlayStore.setDataOverlayEvent(message);
+  });
+
+  viewer3cr.addActionHandler('mu_18', (message: string) => {
+    dataOverlayStore.setDataOverlayEvent(message);
+  });
+
+  viewer3cr.addActionHandler(McadActions.mc01, (message: string) => {
+    mcadStore.setInitialMcadState(message);
+  });
+
+  viewer3cr.addActionHandler(McadActions.mc02, (message: string) => {
+    mcadStore.setMcadEvent(message);
+  });
+});
+/* v8 ignore stop -- @preserve */
+
+/* v8 ignore start -- @preserve */
+async function loadSession(url: string): Promise<void> {
+  const message: LoadSessionState = { Version: '0.0.0', Url: url };
+  if (url.includes('3crs')) {
+    await viewer3cr.loadScanSession({ message });
+  } else if (url.includes('3crds')) {
+    await viewer3cr.setDataOverlaySession({ message });
+  } else if (url.includes('3crms')) {
+    await viewer3cr.loadMcadObjects({ message });
+  } else {
+    throw new Error('Invalid URL type');
+  }
+}
+/* v8 ignore stop -- @preserve */
+
+async function load(): Promise<void> {
+  scanLoading.value = true;
+  await viewer3cr.loadScan({ message: props.payload });
+}
+
+/* v8 ignore start -- @preserve */
+async function loadDemoData(): Promise<void> {
+  if (isDemo.value) {
+    mockDemoViewerStlDecimator();
+    const annotations: LoadSessionState = { Version: '0.0.0', Url: `${DEMO_BUCKET_URL}/state/annotations.3crds` };
+    await viewer3cr.addDataOverlaySession({ message: annotations });
+    const measurements: LoadSessionState = { Version: '0.0.0', Url: `${DEMO_BUCKET_URL}/state/measurements.3crds` };
+    await viewer3cr.addDataOverlaySession({ message: measurements });
+  }
+}
+/* v8 ignore stop -- @preserve */
+
+defineExpose({ loadSession, load, m_closeDialog, introActive, tourActive, whatsNewActive });
+</script>