@3cr/viewer-browser 0.0.1

package/src/components/MftpWebGL3DRModal.vue

@@ -0,0 +1,995 @@
+<template>
+  <v-dialog
+    class="pa-0 ma-0 overflow-y-auto overflow-x-hidden"
+    :modelValue="value"
+    style="max-height: unset"
+    :scrollable="false"
+    fullscreen
+    persistent
+    @click:outside.prevent.stop="alterValue(false)"
+    @input="alterValue"
+  >
+    <v-dialog v-model="m_closeDialog">
+      <v-card class="pa-1 ma-auto position-relative" max-width="450">
+        <v-card-title>Close Viewer?</v-card-title>
+        <v-card-text>Are you sure you want to close the Online Viewer?</v-card-text>
+        <v-card-actions>
+          <v-btn variant="text" color="red" @click="m_closeDialog = false"> Cancel </v-btn>
+          <v-spacer />
+          <v-btn color="primary" @click="closeModal"> Close without saving </v-btn>
+          <v-btn color="primary" @click="closeModal"> Save Session </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-card
+      id="invoice-table-modal"
+      class="pa-0 ma-0 position-relative motif-background overflow-y-hidden rounded-0"
+      height="100vh"
+    >
+      <v-toolbar dense>
+        <v-menu :close-on-content-click="false" :close-on-click="true" open-on-hover offset-y>
+          <template #activator="{ props, isActive }">
+            <v-btn
+              v-bind="props"
+              :color="isActive ? 'secondary' : 'primary'"
+              class="ma-1 ml-n1 pa-1"
+            >
+              <v-icon>description</v-icon> File
+            </v-btn>
+          </template>
+          <v-card class="">
+            <v-list>
+              <v-list-item-group>
+                <v-list-item disabled>
+                  <v-list-item-icon><v-icon> upload </v-icon></v-list-item-icon>
+                  <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>
+<!--                <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-icon><v-icon> sync </v-icon></v-list-item-icon>
+                  <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>
+                <v-list-item disabled>
+                  <v-list-item-icon><v-icon> share </v-icon></v-list-item-icon>
+                  <v-list-item-title>Share&nbsp;<v-chip x-small color="success">Coming Soon</v-chip></v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="alterValue(false)">
+                  <v-list-item-icon><v-icon> close </v-icon></v-list-item-icon>
+                  <v-list-item-title>Close Viewer</v-list-item-title>
+                </v-list-item>
+              </v-list-item-group>
+            </v-list>
+          </v-card>
+        </v-menu>
+        <v-menu :close-on-content-click="false" :close-on-click="true" open-on-hover offset-y>
+          <template #activator="{ props, isActive }">
+            <v-btn v-bind="props" :color="isActive ? 'secondary' : 'primary'" class="">
+              <v-icon>settings</v-icon> Settings
+            </v-btn>
+          </template>
+          <v-card min-width="400" class="pb-2">
+            <v-card-subtitle>Viewer Settings</v-card-subtitle>
+            <SliderSelector
+              v-model="scanState.InteractionSettings.PanSensivitity"
+              :min="0"
+              :max="100"
+              label="Pan Sensitivity"
+            />
+            <SliderSelector
+              v-model="scanState.InteractionSettings.ZoomSensitivity"
+              :min="0"
+              :max="100"
+              label="Zoom Sensitivity"
+            />
+            <SliderSelector
+              v-model="scanState.InteractionSettings.RotateSensitivity"
+              :min="0"
+              :max="100"
+              label="Rotate Sensitivity"
+            />
+            <SliderSelector
+              v-model="scanState.InteractionSettings.CameraRotateSensitivity"
+              :min="0"
+              :max="100"
+              label="Camera Rotate Sensitivity"
+            />
+          </v-card>
+        </v-menu>
+
+        <v-spacer />
+        <div class="font-weight-bold">Not for Diagnostic Use</div>
+        <v-spacer />
+        <!--        <v-btn-->
+        <!--          class="ma-1 mr-0 pa-1"-->
+        <!--          height="36"-->
+        <!--          style="min-width: 36px !important"-->
+        <!--          :color="scanState.Layout.PositionData.length === 1 ? 'secondary' : 'primary'"-->
+        <!--          @click="layouts('lo_01')"-->
+        <!--          ><v-icon>fullscreen</v-icon></v-btn-->
+        <!--        >-->
+        <v-btn
+          class="ma-1 mr-0 pa-1"
+          height="36"
+          style="min-width: 36px !important"
+          :color="layoutIs2x2() ? 'secondary' : 'primary'"
+          @click="layouts('lo_02')"
+          ><v-icon>grid_view</v-icon></v-btn
+        >
+        <v-btn
+          class="ma-1 mr-0 pa-1"
+          height="36"
+          style="min-width: 36px !important"
+          :color="layoutIs1x3() ? 'secondary' : 'primary'"
+          @click="layouts('lo_03')"
+          ><v-icon style="rotate: -90deg">view_comfy</v-icon></v-btn
+        >
+        <v-btn class="ma-1 ml-1 pa-1 white--text mr-n1" color="red" @click="alterValue(false)">Close Viewer</v-btn>
+      </v-toolbar>
+      <v-navigation-drawer
+        v-model="drawer"
+        permanent
+        :mini-variant="drawerCollapsed"
+        mini-variant-width="68"
+        style="opacity: 0.95; margin-top: 48px; height: calc(100vh - 40px)"
+        absolute
+        dark
+        class="rounded-0 motif-background"
+        width="300px"
+      >
+        <template v-slot:prepend>
+          <div class="d-flex align-center pb-1" :class="drawerCollapsed ? 'py-2' : 'pa-2'" @click="snap">
+            <img
+              v-if="!drawerCollapsed"
+              src="@/assets/images/dark/3dicom-logo.svg"
+              height="48"
+              alt="logo"
+              class="ma-auto"
+              style="opacity: 0.9"
+            />
+            <img
+              v-if="drawerCollapsed"
+              src="@/assets/images/dark/3DICOM.png"
+              height="64"
+              alt="logo"
+              class="ma-auto"
+              style="opacity: 0.9"
+            />
+          </div>
+          <div
+            class="text-center mx-auto pa-0 white--text sub-type"
+            :style="drawerCollapsed ? 'font-size: 100%' : 'font-size: 140%'"
+            @click="snap"
+          >
+            Online Viewer
+          </div>
+        </template>
+        <template v-slot:append>
+          <v-divider></v-divider>
+          <v-list>
+            <v-tooltip right v-for="(item, index) in footerItems" :key="index">
+              <template #activator="{ props }">
+                <v-list-item
+                  class="px-2"
+                  :class="[drawerCollapsed && 'py-1']"
+                  target="_blank"
+                  v-bind="props"
+                  :disabled="!(instanceLoaded && !scanLoading)"
+                  @click="item.click()"
+                >
+                  <v-list-item-icon
+                    :class="[drawerCollapsed && 'mx-auto']"
+                    :style="drawerCollapsed && 'margin-left: 7px !important; margin-right: 7px !important;'"
+                  >
+                    <v-icon :large="drawerCollapsed" :color="item.color">
+                      {{ item.icon || 'radio_button_checked' }}
+                    </v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content v-if="!drawerCollapsed">
+                    <v-list-item-title>
+                      {{ item.text }}
+                    </v-list-item-title>
+                  </v-list-item-content>
+                </v-list-item>
+              </template>
+              {{ item.text }}
+            </v-tooltip>
+          </v-list>
+        </template>
+        <v-list v-if="drawerCollapsed">
+          <v-tooltip right v-for="(item, index) in miniMenu" :key="item.text">
+            <template #activator="{ props }">
+              <v-list-item
+                :disabled="!(instanceLoaded && !scanLoading)"
+                class="px-2 py-1"
+                v-bind="props"
+                @click="
+                  openPanels = index;
+                  drawerCollapsed = false;
+                "
+              >
+                <v-list-item-icon class="mx-auto" style="margin-left: 7px !important; margin-right: 7px !important">
+                  <v-icon large>
+                    {{ item.icon || 'radio_button_checked' }}
+                  </v-icon>
+                </v-list-item-icon>
+              </v-list-item>
+            </template>
+            {{ item.tooltip }}
+          </v-tooltip>
+        </v-list>
+        <v-expansion-panels
+          v-else
+          v-model="openPanels"
+          style="max-height: 95vh"
+          dark
+          accordion
+          class="mt-1 overflow-y-scroll transparent"
+        >
+          <v-expansion-panel class="transparent">
+            <ExpansionHeaderMiniMenu :mini-menu="miniMenu[0]" />
+            <v-expansion-panel-text>
+              <DoubleSliderSelector
+                v-model="windowSlider"
+                label="Skin to Bone"
+                :min="huMinMax.min"
+                :max="huMinMax.max"
+              />
+              <DoubleSliderSelector v-model="thresholdSlider" label="Fine Adjustment" v-bind="huMinMax" />
+              <v-card-actions class="py-1">
+                <v-select
+                  :value="getCurrentGreyscalePreset()"
+                  :items="initialScanState.GreyscalePresets"
+                  label="Greyscale Preset"
+                  item-text="Name"
+                  dense
+                  outlined
+                  persistent-placeholder
+                  hide-details
+                  return-object
+                  :menu-props="{
+                    closeOnContentClick: true,
+                  }"
+                  placeholder="Select a Density Preset"
+                  @change="setPreset(PresetActions.pr01, $event)"
+                >
+                  <template #item="{ props, item }">
+                    <v-list-item
+                      v-bind="props"
+                      ripple
+                      :title="item.raw.Name"
+                      lines="three"
+
+                      @mousedown.prevent
+                      @click="setPreset(PresetActions.pr01, item.raw)"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :icon="getIconForPreset(item.raw.Name)"></v-icon>
+                      </template>
+                      <template v-slot:subtitle>
+                        Skin Density: <span class="text-mono">{{ item.raw.Lower }}</span>
+                        <v-spacer />
+                        Bone Density: <span class="text-mono">{{ item.raw.Upper }}</span>
+                      </template>
+                    </v-list-item>
+                  </template>
+                  <template v-slot:selection="{ item }">
+                    <span v-if="item.raw === undefined || !item.raw.Name">None</span>
+                    <span v-else>{{ item.raw.Name }}</span>
+                  </template>
+                </v-select>
+              </v-card-actions>
+              <v-card-actions class="py-1">
+                <v-select
+                  :value="currentColourPreset"
+                  label="Colour Preset"
+                  :items="initialScanState.ColourPresets"
+                  item-text="Name"
+                  dense
+                  hide-details
+                  outlined
+                  :menu-props="{
+                    closeOnContentClick: true,
+                  }"
+                  placeholder="Select a Colour Preset"
+                  return-object
+                  @change="setPreset(PresetActions.pr02, $event)"
+                ></v-select>
+              </v-card-actions>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+          <v-expansion-panel class="transparent">
+            <ExpansionHeaderMiniMenu :mini-menu="miniMenu[1]" />
+            <v-expansion-panel-text>
+              <SliderSelector v-model="scanState.Display.Brightness" label="Adjust Brightness" />
+              <SliderSelector v-model="scanState.Display.Contrast" label="Adjust Contrast" />
+              <SliderSelector v-model="scanState.Display.Opacity" label="Adjust Opacity" />
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-navigation-drawer>
+
+      <v-btn
+        height="84"
+        width="20"
+        min-width="20"
+        class="my-auto rounded-bl-0 rounded-tl-0 pa-0 slide-item-card"
+        style="
+          border-bottom-left-radius: 0 !important;
+          border-top-left-radius: 0 !important;
+          position: absolute;
+          top: 50%;
+          z-index: 1000;
+          transform: translateY(-50%);
+        "
+        :style="drawerCollapsed ? 'left: 68px' : 'left: 300px'"
+        @click="drawerCollapsed = !drawerCollapsed"
+      >
+        <v-icon>{{ drawerCollapsed ? 'chevron_right' : 'chevron_left' }}</v-icon>
+      </v-btn>
+
+      <div class="position-relative pa-0" :style="drawerCollapsed ? 'margin-left: 68px' : 'margin-left: 300px'">
+        <WebGL3DR
+          v-show="instanceLoaded && !scanLoading"
+          :class="!(instanceLoaded && !scanLoading) && 'no-pointer-events'"
+          v-if="value"
+          ref="web_gl"
+          @on_payload="handleOnPayload"
+          @instance_loaded="emit('instanceLoaded');"
+          @hover="hoverOverCanvas"
+        >
+          <div
+            class="bordered-event-window"
+            v-for="layout in scanState.Layout.PositionData"
+            :key="layout.Anchor"
+            :style="{
+              ...generateDivStyleForLayout(layout),
+              cursor: getCurrentActiveView(layout) === ScanView.Volume ? 'grab !important' : 'default',
+            }"
+          >
+            <v-hover>
+              <template v-slot:default="{ isHovering }">
+              <div style="width: 100%; height: 100%">
+                <div class="buttons-in-view" v-show="isHovering">
+                  <div v-if="scanState.Layout.PositionData.length !== 1">
+                    <v-tooltip top>
+                      <template #activator="{ props }">
+                        <v-btn
+                          class="transparent icon"
+                          v-bind="props"
+                          icon
+                          @click="fullscreenLayout(layout.DefaultView)"
+                          ><v-icon color="white">fullscreen</v-icon></v-btn
+                        >
+                      </template>
+                      Make {{ getViewName(getCurrentActiveView(layout)) }} fullscreen
+                    </v-tooltip>
+                  </div>
+                  <div v-if="scanState.Layout.PositionData.length === 1">
+                    <v-tooltip top>
+                      <template #activator="{ props }">
+                        <v-btn
+                          v-bind="props"
+                          icon
+                          class="transparent icon"
+                          @click="layouts(previousLayout)"
+                          ><v-icon color="white">fullscreen_exit</v-icon></v-btn
+                        >
+                      </template>
+                      Exit Fullscreen View
+                    </v-tooltip>
+                  </div>
+                  <div v-if="getCurrentActiveView(layout) === ScanView.Volume">
+                    <v-tooltip top>
+                      <template #activator="{ props }">
+                        <v-btn
+                          v-bind="props"
+                          icon
+                          class="transparent icon"
+                          @click="
+                            viewSelection('vs_05');
+                            viewSelection('vs_06');
+                          "
+                          ><v-icon color="white">home</v-icon></v-btn
+                        >
+                      </template>
+                      Reset volume to default view
+                    </v-tooltip>
+                  </div>
+                  <div v-if="getCurrentActiveView(layout) === ScanView.Volume">
+                    <v-menu :close-on-content-click="false" :close-on-click="true">
+                      <template v-slot:activator="{ props }">
+                        <v-tooltip top>
+                          <template #activator="{ props: ttprops,}">
+                            <v-btn
+                              v-bind="{ ...ttprops, ...props }"
+                              icon
+                              class="icon transparent"
+                            >
+                              <v-icon color="white">cut</v-icon>
+                            </v-btn>
+                          </template>
+                          Slice the 3D Volume
+                        </v-tooltip>
+                      </template>
+                      <v-card min-width="400" class="pb-2">
+                        <v-card-title>Slice into the 3D Volume</v-card-title>
+                        <DoubleSliderSelector v-model="tSlider" label="Transverse" v-bind="tMinMax" />
+                        <DoubleSliderSelector v-model="sSlider" label="Sagittal" v-bind="sMinMax" />
+                        <DoubleSliderSelector v-model="cSlider" label="Coronal" v-bind="cMinMax" />
+                      </v-card>
+                    </v-menu>
+                  </div>
+                  <div v-if="getCurrentActiveView(layout) !== ScanView.Volume">
+                    <v-menu :close-on-content-click="false" :close-on-click="true" offset-overflow top>
+                      <template v-slot:activator="{ props }">
+                        <v-tooltip top>
+                          <template #activator="{ props: ttprops}">
+                            <v-btn
+                              v-bind="{ ...props, ...ttprops }"
+                              icon
+                              class="icon transparent"
+                            >
+                              <v-icon color="white">360</v-icon>
+                            </v-btn>
+                          </template>
+                          Rotate {{ getViewName(getCurrentActiveView(layout)) }} by an angle
+                        </v-tooltip>
+                      </template>
+                      <v-card min-width="200" width="200" class="pb-2">
+                        <v-card-subtitle
+                          >Rotate {{ getViewName(getCurrentActiveView(layout)) }} by an angle</v-card-subtitle
+                        >
+                        <v-card-text class="py-0">
+                          <v-text-field
+                            hide-details
+                            outlined
+                            v-model="rotationDeg"
+                            type="number"
+                            suffix="deg"
+                          ></v-text-field>
+                        </v-card-text>
+                        <v-card-actions>
+                          <v-spacer />
+                          <v-btn color="primary" @click="rotateByDeg(getCurrentActiveView(layout), rotationDeg)"
+                            >Rotate</v-btn
+                          >
+                        </v-card-actions>
+                      </v-card>
+                    </v-menu>
+                  </div>
+                </div>
+                <div class="slider-in-view" v-if="isHovering">
+                  <VerticalSliderSelector
+                    v-if="getCurrentActiveView(layout) === ScanView.Transverse"
+                    v-model="scanState.Orientations.Transverse.Slice"
+                    v-bind="tMinMax"
+                  />
+                  <VerticalSliderSelector
+                    v-if="getCurrentActiveView(layout) === ScanView.Coronal"
+                    v-model="scanState.Orientations.Coronal.Slice"
+                    v-bind="cMinMax"
+                  />
+                  <VerticalSliderSelector
+                    v-if="getCurrentActiveView(layout) === ScanView.Sagittal"
+                    v-model="scanState.Orientations.Sagittal.Slice"
+                    v-bind="sMinMax"
+                  />
+                </div>
+
+                <div class="top-lhc" v-if="isHovering">
+                  <div class="white--text">
+                    {{ getViewName(getCurrentActiveView(layout)) }}
+                  </div>
+                </div>
+              </div>
+              </template>
+            </v-hover>
+          </div>
+        </WebGL3DR>
+      </div>
+
+      <LoadingSpinner v-if="!instanceLoaded" />
+      <LoadingSpinner v-if="scanLoading" text="Rendering your scan in <span class='sub-type'>3DICOM</span>" />
+      <v-textarea
+        v-if="stateOverlay"
+        style="position: absolute; top: 0px; right: -0px; width: 240px; z-index: 10000"
+        class="text--white"
+        color="white"
+        dark
+        outlined
+        height="800"
+        :value="JSON.stringify(scanState, null, 2)"
+        disabled
+      />
+    </v-card>
+  </v-dialog>
+</template>
+<script setup lang="ts" >
+
+import ExpansionHeaderMiniMenu from '@/components/ExpansionHeaderMiniMenu.vue';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import WebGL3DR from '@/components/WebGL3DR.vue';
+import DoubleSliderSelector from '@/components/DoubleSliderSelector.vue';
+import SliderSelector from '@/components/SliderSelector.vue';
+import VerticalSliderSelector from '@/components/VerticalSliderSelector.vue';
+
+import { generateDivStyleForLayout } from '@/helpers/layoutOverlayStyle';
+import {
+  SliderActions,
+  PresetActions,
+  ScanMovementActions,
+  ScanOrientationActions,
+  FileManagementActions,
+  FrontEndInterfaces,
+} from '@/helpers/models';
+import {
+  inflateInitialScanState,
+  inflateScanState,
+} from '../helpers/modelHelper';
+import {
+  AnchorPoint,
+  ColourPresetData,
+  CurrentScanState,
+  InitialScanState,
+  PositionData,
+  ScanView,
+} from '@3cr/types-ts';
+
+import { toNumber } from '@/helpers/utils';
+import {computed, ref, unref, watch, defineEmits, nextTick} from "vue";
+import {LoadViewerPayload} from "../../index";
+
+const emit = defineEmits<{
+  instanceLoaded: [void];
+}>();
+
+defineExpose({
+  alterValue,
+  load
+});
+
+const emptyPayload = JSON.stringify({ Version: '1.1.0' });
+
+const value = ref<boolean>(true);
+const drawer = ref<boolean>(true);
+const drawerCollapsed = ref<boolean>(true);
+const scanLoading = ref<boolean>(true);
+const instanceLoaded = ref<boolean>(true);
+const scanState = ref<CurrentScanState>(inflateScanState());
+const initialScanState = ref<InitialScanState>(inflateInitialScanState());
+const currentColourPreset = ref<ColourPresetData | null>(null);
+const openPanels = ref<number>(0);
+const previousLayout = ref<string>('lo_02');
+const footerItems = ref([
+  {
+    text: 'Reset Scan',
+    icon: 'refresh',
+    color: 'red',
+    click: () => {
+      //@ts-ignore
+      viewSelection('vs_05');
+      //@ts-ignore
+      viewSelection('vs_06');
+    },
+  },
+  {
+    text: 'Send to 3rd Party',
+    icon: 'send',
+    color: 'blue',
+    //@ts-ignore
+    click: () => alterValue(false),
+  },
+  {
+    text: 'Share to Mobile / VR',
+    icon: 'share',
+    color: 'yellow',
+    //@ts-ignore
+    click: () => alterValue(false),
+  },
+  {
+    text: 'Screenshot View',
+    icon: 'screenshot_region',
+    color: 'green',
+    click: () => {
+      //@ts-ignore
+      snap();
+    },
+  },
+]);
+
+const miniMenu = ref([
+  {
+    icon: 'display_settings',
+    text: 'Tissue Density',
+    tooltip:
+      'Tissue Density - Change the view of density within the scan, allowing you to see through a certain density of particles',
+  },
+  { icon: 'display_settings', text: 'Display', tooltip: 'Display - Alter the view of the current scan' },
+])
+
+const huMinMax = ref({
+  min: -999999,
+  max: 999999,
+})
+
+const tMinMax = ref({
+  min: 0,
+  max: 999999,
+})
+const sMinMax = ref({
+  min: 0,
+  max: 999999,
+})
+const cMinMax = ref({
+  min: 0,
+  max: 999999,
+})
+const rotationDeg = ref<number>(0)
+const scanStateIncoming = ref<string>('')
+const transactionStarted = ref<boolean>(false)
+const stateOverlay = ref<boolean>(false)
+const m_closeDialog = ref<boolean>(false)
+
+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];
+  }
+})
+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];
+  }
+})
+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];
+  }
+})
+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];
+  }
+})
+
+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];
+  }
+})
+const web_gl = ref<typeof WebGL3DR | null>(null);
+
+
+watch(() => scanState.value.Display.Brightness, async (value: number) => {
+  await sliderHandler(SliderActions.sl01, value);
+})
+watch(() => scanState.value.Display.Contrast, async (value: number) => {
+  await sliderHandler(SliderActions.sl02, value);
+})
+watch(() => scanState.value.Display.Opacity, async (value: number) => {
+  await sliderHandler(SliderActions.sl03, value);
+})
+watch(() => scanState.value.Display.WindowLower, async (value: number) => {
+  await sliderHandler(SliderActions.sl04, value);
+})
+watch(() => scanState.value.Display.WindowUpper, async (value: number) => {
+  await sliderHandler(SliderActions.sl05, value);
+})
+watch(() => scanState.value.Display.ThresholdLower, async (value: number) => {
+  await sliderHandler(SliderActions.sl06, value);
+})
+watch(() => scanState.value.Display.ThresholdUpper, async (value: number) => {
+  await sliderHandler(SliderActions.sl07, value);
+})
+watch(() => scanState.value.Slice.TransverseLower, async (value: number) => {
+  await sliderHandler(SliderActions.sl08, value);
+})
+watch(() => scanState.value.Orientations.Transverse.Slice, async (value: number) => {
+  await sliderHandler(SliderActions.sl09, value);
+})
+watch(() => scanState.value.Slice.TransverseUpper, async (value: number) => {
+  await sliderHandler(SliderActions.sl10, value);
+})
+watch(() => scanState.value.Slice.SagittalLower, async (value: number) => {
+  await sliderHandler(SliderActions.sl11, value);
+})
+watch(() => scanState.value.Orientations.Sagittal.Slice, async (value: number) => {
+  await sliderHandler(SliderActions.sl12, value);
+})
+watch(() => scanState.value.Slice.SagittalUpper, async (value: number) => {
+  await sliderHandler(SliderActions.sl13, value);
+})
+watch(() => scanState.value.Slice.CoronalLower, async (value: number) => {
+  await sliderHandler(SliderActions.sl14, value);
+})
+watch(() => scanState.value.Orientations.Coronal.Slice, async (value: number) => {
+  await sliderHandler(SliderActions.sl15, value);
+})
+watch(() => scanState.value.Slice.CoronalUpper, async (value: number) => {
+  await sliderHandler(SliderActions.sl16, value);
+})
+watch(() => scanState.value.InteractionSettings.PanSensivitity, async (value: number) => {
+  await scanMovementHandler(ScanMovementActions.sm05, value);
+})
+watch(() => scanState.value.InteractionSettings.ZoomSensitivity, async (value: number) => {
+  await scanMovementHandler(ScanMovementActions.sm08, value);
+})
+watch(() => scanState.value.InteractionSettings.RotateSensitivity, async (value: number) => {
+  await scanMovementHandler(ScanMovementActions.sm10, value);
+})
+watch(() => scanState.value.InteractionSettings.CameraRotateSensitivity, async (value: number) => {
+  await scanMovementHandler(ScanMovementActions.sm12, value);
+})
+
+function getIconForPreset(presetName: string): string | undefined {
+  if (presetName === 'Bone') return 'fa-solid fa-bone';
+  if (presetName === 'Brain') return 'fa-solid fa-brain';
+  if (presetName === 'Liver') return '$liver_icon';
+  if (presetName === 'Lungs') return 'fa-solid fa-lungs';
+  if (presetName === 'Muscle') return '$muscle_icon';
+  if (presetName === 'Temporal Bones') return '$temporal_bones_icon';
+  if (presetName === 'Soft Tissue') return '$torso_icon';
+  if (presetName === 'Skin') return '$skin_icon';
+  return undefined
+}
+async function rotateByDeg(view: ScanView, deg: number) {
+  await sendPayload(FrontEndInterfaces.scan_orientation, ScanOrientationActions.so01, {
+    Version: '0.0.1',
+    View: view,
+    Angle: deg,
+  });
+}
+function getCurrentActiveView(position: PositionData): ScanView {
+  return unref(scanState).Layout.PositionData.length !== 1 ? position.DefaultView : unref(scanState).CurrentView;
+}
+function getViewName(index: number) {
+  return Object.values(ScanView)
+    .filter((value) => typeof value === 'string')
+    .map((x) => {
+      if (x === 'Volume') return '3D Volume';
+      return x;
+    })[index];
+}
+async function fullscreenLayout(view: ScanView) {
+  await layouts('lo_01');
+  await viewSelection(`vs_0${view + 1}`);
+}
+// generateDivStyleForLayout,
+  async function scanMovementHandler(action: string, value: number) {
+  if (unref(transactionStarted)) return;
+  await scanMovement(action, value);
+}
+async function sliderHandler(action: string, value: number) {
+  if (unref(transactionStarted)) return;
+  await slider(action, value);
+}
+
+function closeModal() {
+  m_closeDialog.value = false;
+  value.value = false;
+}
+function alterValue(val: boolean) {
+  if (!val) {
+    m_closeDialog.value = true;
+    return
+  }
+
+  value.value = val;
+}
+async function sendPayload(interfaceType: string, actionType: string, message: any) {
+  await unref(web_gl)?.sendPayload(
+    JSON.stringify({
+      Version: '0.0.1',
+      Interface: interfaceType,
+      Action: actionType,
+      Message: JSON.stringify(message),
+    }),
+  );
+}
+async function load(downloadResponse: LoadViewerPayload) {
+  instanceLoaded.value = true;
+  scanLoading.value = true;
+  await sendPayload('file_management', 'fm_01', downloadResponse);
+}
+async function viewSelection(action: string) {
+  await sendPayload('view_selection', action, emptyPayload)
+}
+async function layouts(action: string) {
+  if (action !== 'lo_01') previousLayout.value = action;
+  await sendPayload('layout', action, emptyPayload)
+}
+async function snap() {
+  // await unref(web_gl).snap();
+}
+async function setPreset(action: PresetActions, preset: any) {
+  await sendPayload('presets', action, preset)
+  if (action === PresetActions.pr02) {
+    currentColourPreset.value = preset;
+  }
+}
+async function slider(action: string, value: number) {
+  await sendPayload('sliders', action, { Version: '0.0.1', Value: toNumber(value) })
+}
+async function scanMovement(action: string, value: number) {
+  await sendPayload('scan_movement', action, { Version: '0.0.1', Value: toNumber(value) })
+}
+async function hoverOverCanvas(isHovering: boolean) {
+  await sendPayload('interactivity', 'in_01', { Version: '0.0.1', Value: isHovering })
+  await sendPayload('interactivity', 'in_02', { Version: '0.0.1', Value: isHovering })
+}
+async function i_scanState(_: string, message: string) {
+  transactionStarted.value = true;
+  scanStateIncoming.value = JSON.stringify(JSON.parse(message), null, 2);
+
+  setScanState(message);
+  await nextTick();
+  transactionStarted.value = false;
+}
+async function i_fileManagement(action: string, message: string) {
+  if (action !== FileManagementActions.fm02) return;
+  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];
+
+  await nextTick();
+  transactionStarted.value = false;
+  scanLoading.value = false;
+  drawerCollapsed.value = false;
+  await hoverOverCanvas(false);
+}
+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);
+  //   }
+  // }
+}
+function layoutIs2x2() {
+  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
+  );
+}
+function layoutIs1x3() {
+  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
+  );
+}
+
+function getCurrentGreyscalePreset() {
+  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;
+}
+function setScanState(message: string) {
+  scanState.value = JSON.parse(message) as CurrentScanState;
+}
+
+function handleOnPayload(interfaceSet: string | FrontEndInterfaces, actionSet: string, message: string) {
+  if (interfaceSet === FrontEndInterfaces.scan_loading) {
+    i_scanState(actionSet, message)
+  }
+  if (interfaceSet === FrontEndInterfaces.file_management) {
+    i_fileManagement(actionSet, message)
+  }
+  if (interfaceSet === 'notifications') {
+    i_notifications(actionSet, message)
+  }
+}
+
+</script>
+<style>
+.v-dialog:not(.v-dialog--fullscreen) {
+  max-height: unset !important;
+}
+.v-expansion-panel-content__wrap {
+  padding: 0 8px 4px;
+  flex: 1 1 auto;
+  max-width: 100%;
+}
+.bordered-event-window {
+  position: absolute;
+  border: 1px rgba(128, 128, 128, 0.56) solid;
+  pointer-events: auto;
+}
+.bordered-event-window:hover {
+  position: absolute;
+  border: 2px dashed rgb(0, 152, 253);
+  //pointer-events: none;
+}
+.v-expansion-panel--active > .v-expansion-panel-header {
+  min-height: 48px;
+}
+
+.btn-close-dense {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.v-slider.v-slider--vertical {
+  height: 90%;
+}
+
+.slider-in-view {
+  position: absolute;
+  right: 16px;
+  top: 0;
+  height: 100%;
+}
+.buttons-in-view {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+}
+.top-lhc {
+  position: absolute;
+  left: 16px;
+  top: 12px;
+}
+.buttons-in-view > div {
+  display: inline-block;
+}
+</style>