@3cr/viewer-browser 0.0.1

package/src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

package/src/components/SliderSelector.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import {computed, defineEmits} from 'vue';
+
+
+
+export interface Props {
+  value: number;
+  loading: boolean;
+  label: string;
+  min: number;
+  max: number;
+  step: number,
+  prepend: string,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  loading: false,
+  label: "Test",
+  min: -99999,
+  max: 99999,
+  step: 1,
+  prepend: '',
+});
+const emit = defineEmits<{
+  input: [number];
+}>();
+const sliderValue = computed({
+  get() {
+    return props.value
+  },
+  set(value: number) {
+    emit('input', value);
+  }
+})
+</script>
+
+<template>
+  <div class="single-slider-selector">
+    <!--    <v-card-subtitle class="pb-0 pt-1 text-caption">{{ label }}</v-card-subtitle>-->
+    <v-card-actions class="px-2 pb-0">
+      <span class="text-caption">
+        {{ label }}
+      </span>
+      <v-spacer />
+      <v-text-field
+        v-model="sliderValue"
+        outlined
+        dense
+        class="mt-0 pt-0"
+        hide-details
+        type="number"
+        :append-icon="prepend"
+        style="width: 44px"
+      ></v-text-field>
+    </v-card-actions>
+    <!--    <v-slider-->
+    <!--      v-model="sliderValue"-->
+    <!--      :loading="loading"-->
+    <!--      thumb-label-->
+    <!--      :max="max"-->
+    <!--      :min="min"-->
+    <!--      :step="step"-->
+    <!--      hide-details-->
+    <!--      class="align-center px-2 black&#45;&#45;text"-->
+    <!--    >-->
+    <!--      &lt;!&ndash;      <template v-slot:append>&ndash;&gt;-->
+    <!--      &lt;!&ndash;        <v-text-field&ndash;&gt;-->
+    <!--      &lt;!&ndash;          v-model="sliderValue"&ndash;&gt;-->
+    <!--      &lt;!&ndash;          outlined&ndash;&gt;-->
+    <!--      &lt;!&ndash;          hide-details&ndash;&gt;-->
+    <!--      &lt;!&ndash;          dense&ndash;&gt;-->
+    <!--      &lt;!&ndash;          class="mt-0 pt-0 ml-2"&ndash;&gt;-->
+    <!--      &lt;!&ndash;          type="number"&ndash;&gt;-->
+    <!--      &lt;!&ndash;          style="width: 68px"&ndash;&gt;-->
+    <!--      &lt;!&ndash;        ></v-text-field>&ndash;&gt;-->
+    <!--      &lt;!&ndash;      </template>&ndash;&gt;-->
+    <!--    </v-slider>-->
+  </div>
+</template>
+
+<style>
+.single-slider-selector
+  .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
+  > .v-input__control
+  > .v-input__slot,
+.single-slider-selector .v-text-field.v-text-field--enclosed .v-text-field__details {
+  padding: 0px 8px !important;
+}
+
+.single-slider-selector
+  .v-text-field--outlined.v-input--dense.v-text-field--outlined
+  > .v-input__control
+  > .v-input__slot {
+  min-height: 32px !important;
+}
+
+.single-slider-selector .v-slider__thumb-label {
+  color: black;
+}
+</style>

package/src/components/VerticalSliderSelector.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import {computed, defineEmits, ref, unref, watch} from 'vue';
+
+export interface Props {
+  value: number;
+  loading: boolean;
+  label: string;
+  lower: number;
+  upper: number;
+  min: number;
+  max: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  loading: false,
+  label: "Test",
+  lower: 0,
+  upper: 100,
+  min: -99999,
+  max: 99999,
+});
+
+const emit = defineEmits<{
+  input: [number];
+}>();
+
+const prevValue = ref<number>(0)
+const showThumb = ref<"always" | boolean>(true)
+const showThumbTimeout = ref<number>(0)
+const sliderValue = computed({
+  get() {
+    return props.value
+  },
+  set(value: number) {
+    emit('input', value);
+  }
+})
+
+watch(sliderValue, async (currentValue: number) => {
+  if (JSON.stringify(unref(prevValue)) !== JSON.stringify(currentValue)) {
+    clearTimeout(unref(showThumbTimeout));
+    showThumb.value = 'always';
+    showThumbTimeout.value = setTimeout(() => {
+      showThumb.value = true;
+    }, 1000);
+  }
+  prevValue.value = currentValue;
+}, {deep: true})
+
+</script>
+
+<template>
+  <v-slider
+    style="position: absolute; right: 16px; top: 0; height: 100%"
+    v-model="sliderValue"
+    :thumb-label="showThumb"
+    :min="min"
+    :max="max"
+    height="100%"
+    vertical
+    hide-details
+    class="vertical-slider-selector"
+  >
+    <template #append>
+      <div class="white--text py-1 my-0">{{ max }}</div>
+    </template>
+    <template #prepend>
+      <div class="white--text py-1 my-0">{{ min }}</div>
+    </template>
+  </v-slider>
+</template>
+
+<style lang="scss">
+.vertical-slider-selector .v-slider__thumb-label {
+  width: 40px !important;
+  height: 40px !important;
+  transform: translateY(50%) translateX(-19px) translateX(-100%) rotate(-45deg) !important;
+  & div {
+    transform: rotate(45deg);
+  }
+}
+</style>

package/src/components/WebGL3DR.vue

@@ -0,0 +1,107 @@
+<template>
+  <div id="screenshotWindow" class="" @mouseover="emit('hover', true)" @mouseout="emit('hover', false)">
+    <canvas
+      id="unity-canvas"
+      width="100%"
+      height="calc(100vh - 48px)"
+      tabindex="-1"
+      style="
+        width: 100%;
+        height: calc(100vh - 50px);
+        background: url('~@/assets/images/MainBackdrop.svg') !important;
+        background-size: cover !important;
+      "
+    >
+    </canvas>
+    <div id="parent-canvas" ref="parent_canvas">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {defineEmits, nextTick, onMounted, ref} from 'vue';
+
+import { createInstance, executePayload, registerOnPayloadHandler } from '@3cr/sdk-browser';
+import {FrontEndInterfaces, FrontEndPayload} from '@3cr/sdk-browser/types/payload';
+
+const emit = defineEmits<{
+  instance_loaded: [void];
+  on_payload: [FrontEndInterfaces, string, string];
+  hover: [boolean];
+}>();
+
+defineExpose({
+  sendPayload,
+  snap,
+
+});
+
+onMounted(async () => {
+  await nextTick()
+  const canvas = document.querySelector('#unity-canvas') as HTMLCanvasElement;
+
+  await registerOnPayloadHandler(receiveMessageFromUnity);
+
+  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+    // Mobile device style: fill the whole browser client area with the game canvas:
+    const meta = document.createElement('meta');
+    meta.name = 'viewport';
+    meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
+    document.getElementsByTagName('head')[0].appendChild(meta);
+
+    canvas.style.width = '100%';
+    canvas.style.height = '80vh';
+    canvas.style.position = 'fixed';
+
+    document.body.style.textAlign = 'left';
+  }
+  await nextTick()
+  unityInstance.value = await createInstance(canvas);
+
+  await nextTick()
+
+  if (navigator.storage && navigator.storage.estimate) {
+    const quota = await navigator.storage.estimate();
+    if (quota) {
+      const percentageUsed = (quota.usage! / quota.quota!) * 100;
+      console.log(`You've used ${percentageUsed}% of the available storage.`);
+      const remaining = quota.quota! - quota.usage!;
+      console.log(`You can write up to ${remaining} more bytes.`);
+
+    }
+  }
+  emit('instance_loaded')
+  // Overlay scroll events to the container instance
+  const fixedDiv = document.getElementById('parent-canvas');
+  fixedDiv?.addEventListener('wheel', function (e: WheelEvent) {
+    e.preventDefault();
+    const evt = new WheelEvent('wheel', {
+      deltaY: e.deltaY,
+    });
+    canvas.dispatchEvent(evt);
+  });
+  fixedDiv?.addEventListener(
+    'contextmenu',
+    function (ev) {
+      ev.preventDefault();
+      const evt = new MouseEvent('contextmenu', {});
+      canvas.dispatchEvent(evt);
+    },
+    false,
+  );
+})
+async function sendPayload(payload: string) {
+  await executePayload(JSON.parse(payload));
+}
+function receiveMessageFromUnity(json: FrontEndPayload) {
+  emit('on_payload', json.Interface, json.Action, json.Message);
+}
+function snap() {
+}
+// function snapCanvas(canvas: HTMLCanvasElement) {
+//   // this.$emit('screenshot', canvas);
+// }
+
+const unityInstance = ref<any>(null);
+
+</script>

package/src/helpers/layoutOverlayStyle.ts

@@ -0,0 +1,86 @@
+import { AnchorPoint, PositionData } from '@3cr/types-ts';
+
+import { toNumber } from '@/helpers/utils';
+
+export function generateDivStyleForLayout(layout: PositionData) {
+  const padding = '0px';
+  const canvas = document.getElementById('unity-canvas');
+
+  const props = {} as any;
+
+  if (layout.Anchor === AnchorPoint.TOP) {
+    props['left'] = '50%';
+    props['transform'] = 'translateX(-50%)';
+  }
+  if (layout.Anchor === AnchorPoint.BOTTOM) {
+    props['left'] = '50%';
+    props['transform'] = 'translateX(-50%)';
+  }
+  if (layout.Anchor === AnchorPoint.LEFT) {
+    props['top'] = '50%';
+    props['transform'] = 'translateY(-50%)';
+  }
+  if (layout.Anchor === AnchorPoint.RIGHT) {
+    props['top'] = '50%';
+    props['transform'] = 'translateY(-50%)';
+  }
+  if (
+    layout.Anchor === AnchorPoint.TOP_LEFT ||
+    layout.Anchor === AnchorPoint.TOP ||
+    layout.Anchor === AnchorPoint.TOP_RIGHT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props['top'] = padding;
+  }
+  if (
+    layout.Anchor === AnchorPoint.LEFT ||
+    layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
+    layout.Anchor === AnchorPoint.TOP_LEFT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props['left'] = padding;
+  }
+  if (
+    layout.Anchor === AnchorPoint.RIGHT ||
+    layout.Anchor === AnchorPoint.TOP_RIGHT ||
+    layout.Anchor === AnchorPoint.BOTTOM_RIGHT
+  ) {
+    props['right'] = padding;
+  }
+  if (
+    layout.Anchor === AnchorPoint.BOTTOM ||
+    layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
+    layout.Anchor === AnchorPoint.BOTTOM_RIGHT
+  ) {
+    props['bottom'] = '4px';
+  }
+  if (layout.Anchor === AnchorPoint.TOP_LEFT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-top-left-radius'] = padding;
+  }
+  if (layout.Anchor === AnchorPoint.TOP_RIGHT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-top-right-radius'] = padding;
+  }
+  if (layout.Anchor === AnchorPoint.BOTTOM_LEFT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-bottom-left-radius'] = padding;
+  }
+  if (layout.Anchor === AnchorPoint.BOTTOM_RIGHT || layout.Anchor === AnchorPoint.CENTER) {
+    props['border-bottom-right-radius'] = padding;
+  }
+
+  props['width'] = `calc(${layout.MaxSize.X * 100}% - ${padding})`;
+  props['height'] = `calc(${layout.MaxSize.Y * 100}% - ${'2px'})`;
+  if (layout.Anchor === AnchorPoint.CENTER) {
+    props['width'] = `calc(${layout.MaxSize.X * 100}% - ${padding} - ${padding})`;
+    props['height'] = `calc(${layout.MaxSize.Y * 100}% -  ${'2px'} -  ${'2px'})`;
+  }
+
+  if (layout.AspectRatio === 1) {
+    if (layout.MaxSize.X === 1) {
+      props['width'] = `calc(${layout.MaxSize.Y * toNumber(canvas?.offsetHeight)}px)`;
+    }
+    if (layout.MaxSize.Y === 1) {
+      props['height'] = `calc(${layout.MaxSize.X * toNumber(canvas?.offsetWidth)}px)`;
+    }
+  }
+  return props;
+}

package/src/helpers/modelHelper.ts

@@ -0,0 +1,109 @@
+import {AnchorPoint, CurrentScanState, InitialScanState, ScanView, ViewInteractiveMode,} from '@3cr/types-ts';
+
+export function inflateScanState(): CurrentScanState {
+  return {
+    Version: '1.0.0',
+    Display: {
+      Version: '1.0.0',
+      Brightness: 50,
+      Contrast: 50,
+      Opacity: 50,
+      WindowLower: 0,
+      WindowUpper: 100,
+      ThresholdLower: 0,
+      ThresholdUpper: 100,
+    },
+    CurrentView: ScanView.Volume,
+    Slice: {
+      Version: '1.0.0',
+      TransverseLower: 0,
+      TransverseUpper: 0,
+      SagittalLower: 0,
+      SagittalUpper: 0,
+      CoronalLower: 0,
+      CoronalUpper: 0,
+    },
+    InteractionSettings: {
+      Version: '1.0.0',
+      PanSensivitity: 0,
+      ZoomSensitivity: 0,
+      RotateSensitivity: 0,
+      CameraRotateSensitivity: 0,
+      KeyboardEnabled: true,
+      MouseEnabled: true,
+      InteractionMode: ViewInteractiveMode.STATIC,
+    },
+    Orientations: {
+      Version: '1.0.0',
+      Transverse: {
+        Version: '1.0.0',
+        View: ScanView.Transverse,
+        VFlip: false,
+        HFlip: false,
+        Rotation: 0,
+        Slice: 0,
+      },
+      Sagittal: {
+        Version: '1.0.0',
+        View: ScanView.Transverse,
+        VFlip: false,
+        HFlip: false,
+        Rotation: 0,
+        Slice: 0,
+      },
+      Coronal: {
+        Version: '1.0.0',
+        View: ScanView.Transverse,
+        VFlip: false,
+        HFlip: false,
+        Rotation: 0,
+        Slice: 0,
+      },
+    },
+    Layout: {
+      Version: '1.0.0',
+      SwitchOnViewChange: false,
+      PositionData: [],
+    },
+    NavigationCube: {
+      Version: '1.0.0',
+      Transform: {
+        Version: '1.0.0',
+        AnchorPoint: AnchorPoint.DEFAULT,
+        Position: {
+          Version: '1.0.0',
+          X: 0,
+          Y: 0,
+        },
+        Size: {
+          Version: '1.0.0',
+          X: 0,
+          Y: 0,
+        },
+      },
+      Visibility: {
+        Version: '1.0.0',
+        Value: false,
+      },
+      Interactivity: {
+        Version: '1.0.0',
+        Value: false,
+      },
+    },
+  };
+}
+
+export function inflateInitialScanState(): InitialScanState {
+  return {
+    Version: '1.0.0',
+    XSlices: 0,
+    YSlices: 0,
+    ZSlices: 0,
+    Modality: 'CT',
+    HuUpper: 0,
+    HuLower: 0,
+    DefaultDisplaySettings: inflateScanState(),
+    GreyscalePresets: [],
+    ColourPresets: [],
+  };
+}

package/src/helpers/models.ts

@@ -0,0 +1,69 @@
+export interface FrontEndPayload {
+  Interface: FrontEndInterfaces;
+  Action: FrontEndInterfaces;
+  Message: string;
+}
+export enum FrontEndInterfaces {
+  scan_loading = 'scan_loading',
+  file_management = 'file_management',
+  view_selection = 'view_selection',
+  layout = 'layout',
+  presets = 'presets',
+  sliders = 'sliders',
+  scan_orientation = 'scan_orientation',
+  scan_movement = 'scan_movement',
+  interactivity = 'interactivity',
+}
+export enum FrontEndActions {
+  pong = 'pong',
+  announcement = 'announcement',
+  fm02 = 'fm_02',
+}
+export enum FileManagementActions {
+  fm01 = 'fm_01',
+  fm02 = 'fm_02',
+}
+export enum NotificationActions {
+  no01 = 'no_01',
+  no02 = 'no_02',
+  no03 = 'no_03',
+}
+export enum ScanOrientationActions {
+  so01 = 'so_01',
+}
+export enum PresetActions {
+  pr01 = 'pr_01',
+  pr02 = 'pr_02',
+}
+export enum ScanMovementActions {
+  sm01 = 'sm_01',
+  sm02 = 'sm_02',
+  sm03 = 'sm_03',
+  sm04 = 'sm_04',
+  sm05 = 'sm_05',
+  sm06 = 'sm_06',
+  sm07 = 'sm_07',
+  sm08 = 'sm_08',
+  sm09 = 'sm_09',
+  sm10 = 'sm_10',
+  sm11 = 'sm_11',
+  sm12 = 'sm_12',
+}
+export enum SliderActions {
+  sl01 = 'sl_01',
+  sl02 = 'sl_02',
+  sl03 = 'sl_03',
+  sl04 = 'sl_04',
+  sl05 = 'sl_05',
+  sl06 = 'sl_06',
+  sl07 = 'sl_07',
+  sl08 = 'sl_08',
+  sl09 = 'sl_09',
+  sl10 = 'sl_10',
+  sl11 = 'sl_11',
+  sl12 = 'sl_12',
+  sl13 = 'sl_13',
+  sl14 = 'sl_14',
+  sl15 = 'sl_15',
+  sl16 = 'sl_16',
+}

package/src/helpers/utils.ts

@@ -0,0 +1,16 @@
+
+export function toNumber(value: any): number {
+  return parseInt((value || 0) + '');
+}
+export function MockRunOnNewThread(callback: () => void) {
+  setTimeout(callback, 1);
+}
+export function registerEvents(
+  domElement: HTMLElement,
+  eventList: Array<string>,
+  listener: EventListenerOrEventListenerObject,
+) {
+  for (const event of eventList) {
+    domElement.addEventListener(event, listener);
+  }
+}

package/src/main.ts

@@ -0,0 +1,23 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+// import { registerPlugins } from '@/plugins'
+import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure your project is capable of handling css files
+
+// Components
+import App from './App.vue'
+import './types/window.shim';
+
+// Composables
+// import { createApp } from 'vue'
+//
+// export const app = createApp(App)
+//
+// registerPlugins(app)
+export { App }
+
+// app.mount('#app')

package/src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

package/src/plugins/index.ts

@@ -0,0 +1,15 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  app.use(vuetify)
+}

package/src/plugins/vuetify.ts

@@ -0,0 +1,27 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+import { aliases, md } from 'vuetify/iconsets/md'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark',
+  },
+  icons: {
+    defaultSet: 'md',
+    aliases,
+    sets: {
+      md,
+    },
+  },
+})