# @3cr/viewer-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)

[3DICOM Online Viewer (3CR-OV) Playground](https://playground.3cr.singular.health/)

## 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 `mountViewer` function with the version of 3CR you would like to view. This will generate a new container to load the viewer within and register the 3CR Instance.

   `Typescript (.ts) / Javascript (.js)`

   ```ts
   const VERSION_3CR: string = '1.0.0';

   await window.mountViewer(VERSION_3CR);
   ```

2. #### Load in the 3VXL file

   Generate the 3VXL file and Decryption Key/Iv and supply that to the `loadViewer` function

   Note: You can supply undefined/nothing to the loadViewer() function to display a default scan for testing purposes.

   `Typescript (.ts) / Javascript (.js)`

   ```ts
   const payload = {
     Url: '<Some presigned URL to a 3VXL file.>',
     DecryptionKey: {
       Iv: '<Initialisation Vector of the Key>',
       Key: '<Decryption Key>',
     },
   };
   await window.loadViewer(payload);

   // OR

   await window.loadViewer();
   ```

3. #### (Optional) Clean up

   In order to ensure the css namespace and data from the viewer is cleaned up and removed after execution, call `unmountViewer`

   Note: You may also want to clean up the initial script you loaded on your site, by removing the nodes of the script you created in `Include @3cr/viewer-browser script`

   `Typescript (.ts) / Javascript (.js)`

   ```ts
   await window.unmountViewer();
   ```

## 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/)