@3cr/viewer-browser 0.0.52 → 0.0.55

package/src/helpers/__tests__/utils.spec.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { fn } from "@vitest/spy";
+import { MockRunOnNewThread, registerEvents, toNumber } from "@/helpers/utils";
+
+describe("MockRunOnNewThread", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should MockRunOnNewThread", () => {
+    const callback = fn();
+
+    MockRunOnNewThread(callback);
+
+    expect(callback).not.toHaveBeenCalledOnce();
+
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledOnce();
+  });
+});
+
+describe("toNumber", () => {
+  it("should '1'", () => {
+    expect(toNumber("1")).toBe(1);
+  });
+
+  it("should '100'", () => {
+    expect(toNumber("100")).toBe(100);
+  });
+
+  it("should 1 ", () => {
+    expect(toNumber(1)).toBe(1);
+  });
+
+  it("should undefined ", () => {
+    expect(toNumber(undefined)).toBe(0);
+  });
+
+  it("should test ", () => {
+    expect(toNumber("test")).toBe(NaN);
+  });
+});
+
+describe("registerEvents", () => {
+  it("should registerEvents", () => {
+    const fakeEvents = ["drag", "drop"];
+    const fakeListener = () => {};
+    const fakeElement = {
+      addEventListener: fn(),
+    } as unknown as HTMLElement;
+
+    registerEvents(fakeElement, fakeEvents, fakeListener);
+
+    expect(fakeElement.addEventListener).toHaveBeenCalledTimes(2);
+    expect(fakeElement.addEventListener).toHaveBeenNthCalledWith(
+      1,
+      fakeEvents[0],
+      fakeListener
+    );
+    expect(fakeElement.addEventListener).toHaveBeenNthCalledWith(
+      2,
+      fakeEvents[1],
+      fakeListener
+    );
+  });
+});

package/src/helpers/layoutOverlayStyle.ts

@@ -1,28 +1,28 @@
-import { AnchorPoint, PositionData } from '@3cr/types-ts';
+import { AnchorPoint, PositionData } from "@3cr/types-ts";
 
-import { toNumber } from '@/helpers/utils';
+import { toNumber } from "@/helpers/utils";
 
 export function generateDivStyleForLayout(layout: PositionData) {
-  const padding = '0px';
-  const canvas = document.getElementById('unity-canvas');
+  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%)';
+    props["left"] = "50%";
+    props["transform"] = "translateX(-50%)";
   }
   if (layout.Anchor === AnchorPoint.BOTTOM) {
-    props['left'] = '50%';
-    props['transform'] = 'translateX(-50%)';
+    props["left"] = "50%";
+    props["transform"] = "translateX(-50%)";
   }
   if (layout.Anchor === AnchorPoint.LEFT) {
-    props['top'] = '50%';
-    props['transform'] = 'translateY(-50%)';
+    props["top"] = "50%";
+    props["transform"] = "translateY(-50%)";
   }
   if (layout.Anchor === AnchorPoint.RIGHT) {
-    props['top'] = '50%';
-    props['transform'] = 'translateY(-50%)';
+    props["top"] = "50%";
+    props["transform"] = "translateY(-50%)";
   }
   if (
     layout.Anchor === AnchorPoint.TOP_LEFT ||
@@ -30,7 +30,7 @@ export function generateDivStyleForLayout(layout: PositionData) {
     layout.Anchor === AnchorPoint.TOP_RIGHT ||
     layout.Anchor === AnchorPoint.CENTER
   ) {
-    props['top'] = padding;
+    props["top"] = padding;
   }
   if (
     layout.Anchor === AnchorPoint.LEFT ||
@@ -38,48 +38,68 @@ export function generateDivStyleForLayout(layout: PositionData) {
     layout.Anchor === AnchorPoint.TOP_LEFT ||
     layout.Anchor === AnchorPoint.CENTER
   ) {
-    props['left'] = padding;
+    props["left"] = padding;
   }
   if (
     layout.Anchor === AnchorPoint.RIGHT ||
     layout.Anchor === AnchorPoint.TOP_RIGHT ||
     layout.Anchor === AnchorPoint.BOTTOM_RIGHT
   ) {
-    props['right'] = padding;
+    props["right"] = padding;
   }
   if (
     layout.Anchor === AnchorPoint.BOTTOM ||
     layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
     layout.Anchor === AnchorPoint.BOTTOM_RIGHT
   ) {
-    props['bottom'] = '4px';
+    props["bottom"] = "4px";
   }
-  if (layout.Anchor === AnchorPoint.TOP_LEFT || layout.Anchor === AnchorPoint.CENTER) {
-    props['border-top-left-radius'] = padding;
+  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.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_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;
+  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'})`;
+  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'})`;
+    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)`;
+      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)`;
+      props["height"] = `calc(${
+        layout.MaxSize.X * toNumber(canvas?.offsetWidth)
+      }px)`;
     }
   }
 

package/src/plugins/__tests__/index.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import vuetify from "@/plugins/vuetify";
+import { fn } from "@vitest/spy";
+import { registerPlugins } from "@/plugins";
+import { App } from "vue";
+
+describe("index.ts", () => {
+  it("should registerPlugins", () => {
+    const app = {
+      use: fn(),
+    } as unknown as App;
+
+    expect(app.use).not.toHaveBeenCalledWith(vuetify);
+
+    registerPlugins(app);
+
+    expect(app.use).toHaveBeenCalledWith(vuetify);
+  });
+});

package/src/plugins/__tests__/vuetify.spec.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "vitest";
+import vuetify from "@/plugins/vuetify";
+
+describe("vuetify.ts", () => {
+  it("should vuetify base", () => {
+    expect(vuetify).toBeTruthy();
+  });
+});

package/src/plugins/vuetify.ts

@@ -5,24 +5,41 @@
  */
 
 // Styles
-import 'vuetify/styles'
+import "vuetify/styles";
 
 // Composables
-import { createVuetify } from 'vuetify'
-import { aliases, md  } from 'vuetify/iconsets/md'
-import { mdi  } from 'vuetify/iconsets/mdi'
+import { createVuetify, IconProps } from "vuetify";
+import { aliases, md } from "vuetify/iconsets/md";
+import { mdi } from "vuetify/iconsets/mdi";
+import { fa } from "vuetify/iconsets/fa";
+import { h } from "vue";
+import liver from "@/components/icons/liver.vue";
+
+const customComponents: any = {
+  liver,
+};
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+/* istanbul ignore next  -- @preserve */
 export default createVuetify({
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: "light",
   },
   icons: {
-    defaultSet: 'md',
+    defaultSet: "md",
     aliases,
     sets: {
       md,
-      mdi
+      mdi,
+      fa,
+      custom: {
+        /* c8 ignore start */
+        component: (props: IconProps) =>
+          h(props.tag, [
+            h(customComponents[props.icon as string], { class: "v-icon__svg" }),
+          ]),
+        /* c8 ignore stop */
+      },
     },
   },
-})
+});

package/test/helper.ts

@@ -0,0 +1,35 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import { createVuetify } from "vuetify";
+import { expect } from "vitest";
+
+export function mountVuetify<T>(
+  component: T,
+  props: any = {},
+  stubs: any = {}
+) {
+  const vuetify = createVuetify({});
+  return mount(component, {
+    props,
+    global: {
+      plugins: [vuetify],
+      stubs,
+    },
+  });
+}
+export function shallowMountVuetify<T>(component: T, props: any = {}) {
+  const vuetify = createVuetify({});
+  return shallowMount(component, {
+    props,
+    global: {
+      plugins: [vuetify],
+    },
+  });
+}
+
+export function checkComponentProps(
+  component: any,
+  propKey: string,
+  equal: any
+) {
+  expect(component.props()[propKey] as any).toBe(equal);
+}

package/test/setup.ts

@@ -0,0 +1 @@
+global.ResizeObserver = require("resize-observer-polyfill");

package/tsconfig.json

@@ -12,7 +12,8 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "~/*": ["test/*"]
     },
     "resolveJsonModule": true,
 
@@ -27,7 +28,9 @@
   },
   "include": [
     "./src/typed-router.d.ts",
-    "**/*.vue"
+    "**/*.ts",
+    "**/*.spec.ts",
+    "**/*.vue",
   ],
   "exclude": ["dist", "node_modules", "cypress"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/vite.config.mts

@@ -68,6 +68,7 @@ if (globalThis.Viewer3CR) {
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '~': fileURLToPath(new URL('./test', import.meta.url)),
     },
     extensions: [
       '.js',

package/vitest.config.mts

@@ -0,0 +1,44 @@
+/// <reference types="vitest" />
+// vitest.config.ts
+import {defineConfig, mergeConfig} from 'vite'
+import viteConfig from "./vite.config.mjs";
+
+export default mergeConfig(viteConfig, defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    server: {
+      deps: {
+        inline: ['vuetify'],
+      },
+    },
+    exclude: ['node_modules/**'],
+    include: ['**/*.spec.ts'],
+    setupFiles: ['/test/setup.ts'],
+    coverage: {
+      provider: 'v8', // or 'v8',
+      enabled: true,
+      reporter: ['html'],
+      include: ['src/**/*', 'index.ts'],
+      exclude: [
+        'coverage/**',
+        'dist/**',
+        'scripts/**',
+        '**/[.]**',
+        'packages/*/test?(s)/**',
+        '**/*.d.ts',
+        '**/virtual:*',
+        '**/__x00__*',
+        '**/\x00*',
+        'cypress/**',
+        'test?(s)/**',
+        'test?(-*).?(c|m)[jt]s?(x)',
+        '**/*{.,-}{test,spec}.?(c|m)[jt]s?(x)',
+        '**/__tests__/**',
+        '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
+        '**/vitest.{workspace,projects}.[jt]s?(on)',
+        '**/.{eslint,mocha,prettier}rc.{?(c|m)js,yml}',
+      ],
+    },
+  },
+}))

package/README2.md

@@ -1,201 +0,0 @@
-# @3cr/sdk-browser
-
-![](https://img.shields.io/badge/tests-successful-green)
-![](https://img.shields.io/circleci/build/bitbucket/medvr/3cr-sdk-browser/main)
-
-
-Ecosystem integration for installing and running [3DICOM Online Viewer (3CR-OV)](https://docs.3cr.singular.health/) within the Browser (client-side)
-
-## Include `@3cr/viewer-browser` script
-
-Choose one of the following ways
-- ### HTML Script Tag
-
-   Insert this line into your `index.html`
-   
-   ```html
-   <script src="https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@{{version}}/dist/Viewer3CR.umd.js"> </script>
-   ```
-   Note: Please ensure you replace the `{{version}}` with the version of the viewer you want.
-
-- ### JS/TS way
-
-   You can also include it dynamically within your code.
-   
-   `Typescript (.ts)`
-   ```ts
-   export async function loadViewerScript(version: string): Promise<void> {
-     return new Promise<void>((resolve) => {
-       const s = document.createElement('script');
-       s.onload = () => {
-         resolve()
-       }
-       s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@${version}/dist/Viewer3CR.umd.js`;
-       document.head.appendChild(s);
-     })
-   }
-  
-   // ...
-   
-   await loadViewerScript("1.0.0");
-   ```
-   `Javascript (.js)`
-   ```js
-   export async function loadViewerScript(version) {
-     return new Promise((resolve) => {
-       const s = document.createElement('script');
-       s.onload = () => {
-         resolve()
-       }
-       s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser@${version}/dist/Viewer3CR.umd.js`;
-       document.head.appendChild(s);
-     })
-   }
-    
-   // ...
-   
-   await loadViewerScript("1.0.0");
-   ```
-
-
-## Using the Package
-
-1. #### Register 3DICOM Online Viewer version
-
-    Call the `registerViewer` function with the version of 3CR you would like to view. You also need to supply a
-
-    `Typescript (.ts)`
-    ```ts
-    import { registerVersion } from '@3cr/sdk-browser';
-    
-    const VERSION_3CR: string = '1.0.0';
-    
-    await registerVersion(VERSION_3CR);
-    ```
-
-   `Javascript (.js)`
-    ```js
-    import { registerVersion } from '@3cr/sdk-browser';
-    
-    const VERSION_3CR = '1.0.0';
-    
-    await registerVersion(VERSION_3CR);
-    ```
-
-2. #### Create HTML Canvas
-
-    Create a canvas element within your HTML Markup and assign it an `id`.
-    
-    You will have to ensure that the size (width & height) both match the inline css styling and the canvas styling
-
-    `html`
-    ```html
-    <canvas
-     id="renderer-canvas"
-     width="1080"
-     height="1920"
-     tabindex="-1"
-     style=" width: 1920px; height: 1080px; "
-    >
-    </canvas>
-    ```
-   
-3. #### Register response handler for 3DICOM Core Renderer Instance
-
-    You will need to register a function that can accept the responses from the 3CR instance.
-
-    `Typescript (.ts)`
-    ```ts
-    import { registerOnPayloadHandler } from '@3cr/sdk-browser';
-    import { FrontEndPayload } from '@3cr/sdk-browser/types/payload';
-    
-    function onPayload(json: FrontEndPayload) {
-      console.log("Payload recieved from 3CR!", json)
-    }
-    
-    await registerOnPayloadHandler(onPayload);
-    ```
-
-    `Javascript (.js)`
-    ```js
-    import { registerOnPayloadHandler } from '@3cr/sdk-browser';
-    
-    function onPayload(json) {
-      console.log("Payload recieved from 3CR!", json)
-    }
-    
-    await registerOnPayloadHandler(onPayload);
-    ```
-
-4. #### Attach the 3CR Instance to the HTML Canvas
-    Get the HTML Element from the DOM Object and inject it into the instance.
-    
-    `Typescript (.ts)`
-    ```ts
-    import { createInstance } from '@3cr/sdk-browser';
-    const canvas: HTMLCanvasElement = document.querySelector('#renderer-canvas') as HTMLCanvasElement;
-    
-    await createInstance(canvas);
-    ```
-    
-    `Javascript (.js)`
-    ```js
-    import { createInstance } from '@3cr/sdk-browser';
-    const canvas = document.querySelector('#renderer-canvas');
-    
-    await createInstance(canvas);
-    ```
-
-
-5. #### Execute payload on Instance
-   Get the HTML Element from the DOM Object and inject it into the instance.
-
-   `Typescript (.ts)`
-   ```ts
-   import { executePayload } from '@3cr/sdk-browser';
-   import { FrontEndInterfaces, FileManagementActions } from '@3cr/sdk-browser/types/payload';
-   
-   await executePayload({
-      Version: '1.0.0',
-      Interface: FrontEndInterfaces.file_management,
-      Action: FileManagementActions.fm_01,
-      Message: JSON.stringify({
-         Url: 'https://somethingtodownload.com/some.3vxl.compressed.encrypted',
-         DecryptionKey: {
-           Key: '<Encryption Key>',
-           Iv: '<Encryption IV>'
-         }
-      }),
-   });
-   ```
-
-   `Javascript (.js)`
-   ```js
-   import { executePayload } from '@3cr/sdk-browser';
-   
-   await executePayload({
-      Version: '1.0.0',
-      Interface: 'file_management',
-      Action: 'fm_01',
-      Message: JSON.stringify({
-         Url: 'https://somethingtodownload.com/some.3vxl.compressed.encrypted',
-         DecryptionKey: {
-           Key: '<Encryption Key>',
-           Iv: '<Encryption IV>'
-         }
-      }),
-   });
-   ```
-
-
-
-## Contributing
-
-Pull requests are welcome. For changes, please open an issue first
-to discuss what you would like to change.
-
-Please make sure to update tests as appropriate.
-
-## License
-
-[MIT](https://choosealicense.com/licenses/mit/)

package/src/components/expansion-panels/ExpansionHeaderMiniMenu.vue

@@ -1,19 +0,0 @@
-<template>
-  <v-expansion-panel-title class="font-weight-bold transparent">
-    <span
-      ><v-icon small>{{ props.miniMenu.icon }}</v-icon
-      >&nbsp;&nbsp;{{ props.miniMenu.text }}</span
-    >
-    <v-spacer />
-  </v-expansion-panel-title>
-</template>
-<script setup lang="ts">
-
-export interface Props {
-  miniMenu: { icon: string; text: string };
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  miniMenu: () => ({ icon: '', text: '' }),
-});
-</script>

package/src/helpers/models.ts

@@ -1,69 +0,0 @@
-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',
-}