@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/functions/colours.ts

@@ -0,0 +1,45 @@
+import { clamp } from '@/functions/clamp';
+import { ColourData } from '@3cr/types-ts/types/ColourData';
+
+function toHex(n: number): string {
+  return Math.floor(clamp(n, 0, 255))
+    .toString(16)
+    .padStart(2, '0');
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+export function rgbaToHex(r: number, g: number, b: number, a: number): string {
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}${toHex(a)}`;
+}
+
+export function hexToRgb(hex: string): [number, number, number] {
+  const digits = hex.replace('#', '');
+  const red = parseInt(digits.substring(0, 2), 16);
+  const green = parseInt(digits.substring(2, 4), 16);
+  const blue = parseInt(digits.substring(4, 6), 16);
+  return [red, green, blue];
+}
+
+export function hexToRgba(hex: string): [number, number, number, number] {
+  const digits = hex.replace('#', '');
+  const red = parseInt(digits.substring(0, 2), 16);
+  const green = parseInt(digits.substring(2, 4), 16);
+  const blue = parseInt(digits.substring(4, 6), 16);
+  const alpha = parseInt(digits.substring(6, 8), 16);
+  return [red, green, blue, alpha];
+}
+
+export function fromColourData(value: ColourData): string {
+  const { R, G, B } = value;
+  const toByte = (x: number) => Math.floor(x * 255);
+  return rgbToHex(toByte(R), toByte(G), toByte(B));
+}
+
+export function toColourData(value: string): ColourData {
+  const [r, g, b] = hexToRgb(value);
+  const toFloat = (x: number) => x / 255;
+  return { Version: '0.0.0', R: toFloat(r), G: toFloat(g), B: toFloat(b), A: 1 };
+}

package/src/functions/fileReader.ts

@@ -0,0 +1,48 @@
+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/functions/guards/__tests__/isDataOverlayAngle.spec.ts

@@ -0,0 +1,21 @@
+import { DataOverlayAngleFaker } from '@test/fakers/data-overlay-angle.faker';
+import { DataOverlayLengthFaker } from '@test/fakers/data-overlay-length.faker';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
+
+describe('isDataOverlayAngle', () => {
+  it('should accept angles', () => {
+    const angle = DataOverlayAngleFaker.random();
+    expect(isDataOverlayAngle(angle)).toBe(true);
+  });
+
+  it('should reject lengths', () => {
+    const length = DataOverlayLengthFaker.random();
+    expect(isDataOverlayAngle(length)).toBe(false);
+  });
+
+  it('should reject polygons', () => {
+    const polygon = DataOverlayPolygonFaker.random();
+    expect(isDataOverlayAngle(polygon)).toBe(false);
+  });
+});

package/src/functions/guards/__tests__/isDataOverlayLength.spec.ts

@@ -0,0 +1,21 @@
+import { DataOverlayAngleFaker } from '@test/fakers/data-overlay-angle.faker';
+import { DataOverlayLengthFaker } from '@test/fakers/data-overlay-length.faker';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
+
+describe('isDataOverlayLength', () => {
+  it('should accept lengths', () => {
+    const length = DataOverlayLengthFaker.random();
+    expect(isDataOverlayLength(length)).toBe(true);
+  });
+
+  it('should reject angles', () => {
+    const angle = DataOverlayAngleFaker.random();
+    expect(isDataOverlayLength(angle)).toBe(false);
+  });
+
+  it('should reject polygons', () => {
+    const polygon = DataOverlayPolygonFaker.random();
+    expect(isDataOverlayLength(polygon)).toBe(false);
+  });
+});

package/src/functions/guards/__tests__/isDataOverlayPolygon.spec.ts

@@ -0,0 +1,21 @@
+import { DataOverlayLengthFaker } from '@test/fakers/data-overlay-length.faker';
+import { DataOverlayAngleFaker } from '@test/fakers/data-overlay-angle.faker';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
+
+describe('isDataOverlayPolygon', () => {
+  it('should accept polygons', () => {
+    const polygon = DataOverlayPolygonFaker.random();
+    expect(isDataOverlayPolygon(polygon)).toBe(true);
+  });
+
+  it('should reject lengths', () => {
+    const length = DataOverlayLengthFaker.random();
+    expect(isDataOverlayPolygon(length)).toBe(false);
+  });
+
+  it('should reject angles', () => {
+    const angle = DataOverlayAngleFaker.random();
+    expect(isDataOverlayPolygon(angle)).toBe(false);
+  });
+});

package/src/functions/guards/isDataOverlayAngle.ts

@@ -1,6 +1,5 @@
-import { DataOverlayAngle } from '@/types/data-overlay-angle';
-import { DataOverlay } from '@/types/data-overlay';
+import { DataOverlay, DataOverlayAngle } from '@3cr/viewer-types-ts';
 
-export function isDataOverlayAngle(markup: DataOverlay): markup is DataOverlayAngle {
-  return 'SegmentAngles' in markup;
+export function isDataOverlayAngle(measurement: DataOverlay): measurement is DataOverlayAngle {
+  return 'SegmentAngles' in measurement;
 }

package/src/functions/guards/isDataOverlayLength.ts

@@ -1,6 +1,5 @@
-import { DataOverlayLength } from '@/types/data-overlay-length';
-import { DataOverlay } from '@/types/data-overlay';
+import { DataOverlay, DataOverlayLength } from '@3cr/viewer-types-ts';
 
-export function isDataOverlayLength(markup: DataOverlay): markup is DataOverlayLength {
-  return 'SegmentLengths' in markup;
+export function isDataOverlayLength(measurement: DataOverlay): measurement is DataOverlayLength {
+  return 'SegmentLengths' in measurement;
 }

package/src/functions/guards/isDataOverlayPolygon.ts

@@ -1,6 +1,5 @@
-import { DataOverlayPolygon } from '@/types/data-overlay-polygon';
-import { DataOverlay } from '@/types/data-overlay';
+import { DataOverlay, DataOverlayPolygon } from '@3cr/viewer-types-ts';
 
-export function isDataOverlayPolygon(markup: DataOverlay): markup is DataOverlayPolygon {
-  return 'Area' in markup;
+export function isDataOverlayPolygon(measurement: DataOverlay): measurement is DataOverlayPolygon {
+  return 'Area' in measurement;
 }

package/src/functions/openUrl.ts

@@ -0,0 +1,3 @@
+export function openUrl(url: string, target: string = '_self') {
+  window.open(url, target);
+}

package/src/functions/{__tests__ → parsers/__tests__}/parseAction.spec.ts

@@ -1,4 +1,4 @@
-import { parseAction } from '@/functions/parseAction';
+import { parseAction } from '@/functions/parsers/parseAction';
 import { ActionFaker } from '@test/fakers/action.faker';
 
 describe('parseAction tests', () => {

package/src/functions/{__tests__ → parsers/__tests__}/parseCallToAction.spec.ts

@@ -1,4 +1,4 @@
-import { parseCallToAction } from '@/functions/parseCallToAction';
+import { parseCallToAction } from '@/functions/parsers/parseCallToAction';
 import { CallToActionFaker } from '@test/fakers/call-to-action.faker';
 
 describe('parseCallToAction tests', () => {

package/src/functions/{__tests__ → parsers/__tests__}/parseDataOverlay.spec.ts

@@ -1,4 +1,4 @@
-import { parseDataOverlay } from '@/functions/parseDataOverlay';
+import { parseDataOverlay } from '@/functions/parsers/parseDataOverlay';
 import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
 
 describe('parseDataOverlay tests', () => {

package/src/functions/{__tests__ → parsers/__tests__}/parseDataOverlayData.spec.ts

@@ -1,5 +1,5 @@
 import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
-import { parseDataOverlayData } from '@/functions/parseDataOverlayData';
+import { parseDataOverlayData } from '@/functions/parsers/parseDataOverlayData';
 
 describe('parseDataOverlayData tests', () => {
   it('should parse', () => {

package/src/functions/{__tests__ → parsers/__tests__}/parseDataOverlayEvent.spec.ts

@@ -1,10 +1,10 @@
 import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
-import { parseDataOverlayEvent } from '@/functions/parseDataOverlayEvent';
-import { Interactiontype } from '@3cr/types-ts';
+import { parseDataOverlayEvent } from '@/functions/parsers/parseDataOverlayEvent';
+import { InteractionType } from '@3cr/types-ts';
 
 describe('parseDataOverlayEvent tests', () => {
   it('should parse', () => {
-    const result = parseDataOverlayEvent(DataOverlayDataFaker.angleEventRaw(Interactiontype.HOVER_START));
+    const result = parseDataOverlayEvent(DataOverlayDataFaker.angleEventRaw(InteractionType.HOVER_START));
     expect(typeof result.Data).not.toBe('string');
   });
 });

package/src/functions/{__tests__ → parsers/__tests__}/parseMcadEvent.spec.ts

@@ -1,10 +1,10 @@
-import { Interactiontype } from '@3cr/types-ts';
-import { parseMcadEvent } from '@/functions/parseMcadEvent';
+import { InteractionType } from '@3cr/types-ts';
+import { parseMcadEvent } from '@/functions/parsers/parseMcadEvent';
 import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
 
 describe('parseMcadEvent tests', () => {
   it('should parse', () => {
-    const result = parseMcadEvent(McadObjectInteractionFaker.randomRaw(Interactiontype.HOVER_START));
+    const result = parseMcadEvent(McadObjectInteractionFaker.randomRaw(InteractionType.HOVER_START));
     expect(typeof result.Mcad.CallToAction).not.toBe('string');
   });
 });

package/src/functions/{parseAction.ts → parsers/parseAction.ts}

@@ -1,5 +1,4 @@
-import { Action, ActionRaw } from '@/types/action';
-import { ActionData } from '@/types/action-data';
+import { Action, ActionData, ActionRaw } from '@3cr/viewer-types-ts';
 
 export function parseAction(data: ActionRaw): Action {
   return {

package/src/functions/{parseCallToAction.ts → parsers/parseCallToAction.ts}

@@ -1,5 +1,5 @@
-import { CallToAction, CallToActionRaw } from '@/types/call-to-action';
-import { parseAction } from '@/functions/parseAction';
+import { parseAction } from '@/functions/parsers/parseAction';
+import { CallToAction, CallToActionRaw } from '@3cr/viewer-types-ts';
 
 export function parseCallToAction(data: CallToActionRaw): CallToAction {
   return {

package/src/functions/{parseDataOverlay.ts → parsers/parseDataOverlay.ts}

@@ -1,10 +1,10 @@
-import { DataOverlay, DataOverlayRaw } from '@/types/data-overlay';
-import { parseCallToAction } from '@/functions/parseCallToAction';
-import { CallToActionRaw } from '@/types/call-to-action';
+import { parseCallToAction } from '@/functions/parsers/parseCallToAction';
+import { CallToActionRaw, DataOverlay, DataOverlayRaw } from '@3cr/viewer-types-ts';
 
 export function parseDataOverlay(data: DataOverlayRaw): DataOverlay {
   return {
     ...data,
+    /* v8 ignore next */
     CallToAction: data.CallToAction ? parseCallToAction(JSON.parse(data.CallToAction) as CallToActionRaw) : null
   };
 }

package/src/functions/parsers/parseDataOverlayData.ts

@@ -0,0 +1,9 @@
+import { parseDataOverlay } from '@/functions/parsers/parseDataOverlay';
+import { DataOverlay, DataOverlayDataRaw, DataOverlayRaw, DataOverlayData } from '@3cr/viewer-types-ts';
+
+export function parseDataOverlayData<T extends DataOverlay>(data: DataOverlayDataRaw): DataOverlayData<T> {
+  return {
+    ...data,
+    Data: parseDataOverlay(JSON.parse(data.Data) as DataOverlayRaw) as T
+  };
+}

package/src/functions/parsers/parseDataOverlayEvent.ts

@@ -0,0 +1,19 @@
+import { parseDataOverlay } from '@/functions/parsers/parseDataOverlay';
+import {
+  DataOverlay,
+  DataOverlayDataRaw,
+  DataOverlayEvent,
+  DataOverlayInteractionRaw,
+  DataOverlayRaw
+} from '@3cr/viewer-types-ts';
+
+export function parseDataOverlayEvent<T extends DataOverlay>(data: DataOverlayDataRaw): DataOverlayEvent<T> {
+  const interaction = JSON.parse(data.Data) as DataOverlayInteractionRaw<DataOverlayRaw>;
+  return {
+    ...data,
+    Data: {
+      ...interaction,
+      DataOverlay: parseDataOverlay(interaction.DataOverlay) as T
+    }
+  };
+}

package/src/functions/parsers/parseMcadEvent.ts

@@ -0,0 +1,9 @@
+import { parseDataOverlay } from '@/functions/parsers/parseDataOverlay';
+import { DataOverlayMcad, McadObjectInteraction, McadObjectInteractionRaw } from '@3cr/viewer-types-ts';
+
+export function parseMcadEvent(data: McadObjectInteractionRaw): McadObjectInteraction {
+  return {
+    ...data,
+    Mcad: parseDataOverlay(data.Mcad) as DataOverlayMcad
+  };
+}

package/src/functions/platform.ts

@@ -0,0 +1,7 @@
+import DeviceDetector from 'device-detector-js';
+
+export function isMac() {
+  const deviceDetector = new DeviceDetector();
+  const results = deviceDetector.parse(navigator.userAgent);
+  return results.os?.name == "Mac";
+}

package/src/functions/translateTooltipShortcut.ts

@@ -0,0 +1,35 @@
+import { isMac } from '@/functions/platform';
+
+export const SHORTCUT_TEXT = {
+  altA: 'Alt + A',
+  altD: 'Alt + D',
+  altE: 'Alt + E',
+  altF: 'Alt + F',
+  altH: 'Alt + H',
+  altM: 'Alt + M',
+  c: 'Ctrl + Shift + C',
+  d: 'Ctrl + Shift + D',
+  del: 'Ctrl + Shift + Del',
+  a: 'Ctrl + Shift + A',
+  e: 'Ctrl + Shift + E',
+  f: 'Ctrl + Shift + F',
+  g: 'Ctrl + Shift + G',
+  h: 'Ctrl + Shift + H',
+  l: 'Ctrl + Shift + L',
+  m: 'Ctrl + Shift + M',
+  p: 'Ctrl + Shift + P',
+  q: 'Ctrl + Shift + Q',
+  r: 'Ctrl + Shift + R',
+  s: 'Ctrl + Shift + S',
+  v: 'Ctrl + Shift + V',
+  plus: 'Ctrl + Shift + Plus',
+  minus: 'Ctrl + Shift + Minus',
+  space: 'Ctrl + Shift + Space'
+};
+
+/* v8 ignore start -- @preserve */
+export function translateTooltipShortcut(shortcut: string) {
+  if (isMac()) return shortcut.replaceAll('Ctrl', '⌘').replaceAll('Alt', '⌥');
+  return shortcut;
+}
+/* v8 ignore stop -- @preserve */

package/src/functions/tsHelper.ts

@@ -0,0 +1,3 @@
+export function forceType<T>(data: any) {
+  return data as unknown as T;
+}

package/src/main.ts

@@ -1,63 +1,85 @@
+import '@/assets/styles.scss';
 import { registerVersion, quit } from '@3cr/sdk-browser';
-import { ComponentPublicInstance, createApp } from 'vue';
-import { usePlugins } from '@/plugins/usePlugins';
-import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
-import { LoadViewerPayload } from '@/models/loadViewerPayload';
-import { injectedStyleId } from './config';
-import { useVersion3cr } from '@/composables/useVersion3cr';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import Notifications from '@kyvg/vue3-notification';
+import { App as VueApp, createApp } from 'vue';
+import { storeToRefs } from 'pinia';
 import App from '@/App.vue';
-import { getAvailableLanguages, setLanguage } from '@3cr/translations-ts';
-import { MockRunOnNewThread } from '@/functions/asyncTools';
+import { demoPayload } from '@/components/demo/demo-payload';
+import { injectedStyleId } from '@/config';
+import { i18n } from '@/plugins/vue-i18n';
+import { pinia } from '@/plugins/pinia';
+import { vuetify } from '@/plugins/vuetify';
+import { useViewerStore } from '@/stores/viewer.store';
+import { ViewerOptions, ViewerPayload } from '@3cr/viewer-types-ts';
 
-let mountedApp: ComponentPublicInstance | undefined = undefined;
-
-export async function registerViewer(host: Element | string, version: string, language?: string): Promise<void> {
-  await registerVersion(version);
-  const app = createApp(App);
-  usePlugins(app);
-  mountedApp = app.mount(host);
-
-  MockRunOnNewThread(async () => {
-    const languages = await getAvailableLanguages();
-    if (language && languages.includes(language)) {
-      await setLanguage(language);
-    } else {
-      const documentLanguage = document.querySelector('html')?.getAttribute('lang');
-      const defaultLanguage = documentLanguage ?? languages[0];
-      await setLanguage(defaultLanguage);
-    }
-  });
-
-  const version3cr = useVersion3cr();
-  version3cr.value = version;
+let app: VueApp<Element> | null = null;
+let mounted: InstanceType<typeof App> | null = null;
+declare global {
+  interface Window {
+    mobileCheck: () => boolean;
+    opera: string;
+  }
 }
+window.mobileCheck = function () {
+  let check = false;
+  (function (a) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+        a
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        a.substr(0, 4)
+      )
+    )
+      check = true;
+  })(navigator.userAgent || navigator.vendor || window.opera);
+  return check;
+};
 
-export async function loadViewer(
-  payload: LoadViewerPayload | undefined = undefined,
-  options: LoadViewerOptions = defaultLoadViewerOptions
-): Promise<void> {
-  if (!mountedApp) {
-    throw new Error('Please call `registerViewer(version: string)` first');
+export async function mountViewer(host: Element | string, sdkVersion: string): Promise<void> {
+  if (!app) {
+    await registerVersion(sdkVersion);
+    app = createApp(App);
+    app.component('font-awesome-icon', FontAwesomeIcon);
+    app.use(i18n);
+    app.use(pinia);
+    app.use(vuetify);
+    app.use(Notifications);
+    mounted = app.mount(host) as InstanceType<typeof App>;
+    const { version } = storeToRefs(useViewerStore());
+    version.value = sdkVersion;
+  } else {
+    throw new Error('Please call `unmountViewer` before registering again');
   }
-  await (mountedApp as any).loadInstance(payload, options);
 }
 
-export async function loadSession(url: string): Promise<void> {
-  if (!mountedApp) {
-    throw new Error('Please call `registerViewer(version: string)` first');
+export async function loadViewer(payload: ViewerPayload = demoPayload, options: ViewerOptions = {}): Promise<void> {
+  if (mounted) {
+    await mounted.loadViewer(payload, options);
+  } else {
+    throw new Error('Please call `mountViewer` first');
   }
-  await (mountedApp as any).loadSession(url);
 }
 
-export async function ejectViewer(): Promise<void> {
-  const styleSheet = document.getElementById(injectedStyleId);
-  styleSheet?.remove();
-  await quit();
+export async function loadSession(url: string): Promise<void> {
+  if (mounted) {
+    await mounted.loadSession(url);
+  } else {
+    throw new Error('Please call `mountViewer` first');
+  }
 }
 
-export async function closeViewer(): Promise<void> {
-  if (!mountedApp) {
-    throw new Error('Please call `registerViewer(version: string)` first');
+export async function unmountViewer(): Promise<void> {
+  if (app) {
+    document.getElementById(injectedStyleId)?.remove();
+    app.unmount();
+    mounted = null;
+    app = null;
+    try {
+      await quit();
+    } catch (e) {}
+  } else {
+    throw new Error('Please call `mountViewer` first');
   }
-  await (mountedApp as any).close();
 }

package/src/models/__tests__/iso-languages.spec.ts

@@ -0,0 +1,23 @@
+import { ISO_LANGUAGES } from '@/models/iso-languages';
+
+describe('iso languages', () => {
+  it('should be defined', () => {
+    expect(ISO_LANGUAGES).toBeDefined();
+  });
+
+  it('should have default languages', () => {
+    expect(ISO_LANGUAGES.en).toBeDefined();
+    expect(ISO_LANGUAGES.ar).toBeDefined();
+    expect(ISO_LANGUAGES.bn).toBeDefined();
+    expect(ISO_LANGUAGES['zh-CN']).toBeDefined();
+    expect(ISO_LANGUAGES['en-US']).toBeDefined();
+    expect(ISO_LANGUAGES.fr).toBeDefined();
+    expect(ISO_LANGUAGES.de).toBeDefined();
+    expect(ISO_LANGUAGES.hi).toBeDefined();
+    expect(ISO_LANGUAGES.id).toBeDefined();
+    expect(ISO_LANGUAGES.it).toBeDefined();
+    expect(ISO_LANGUAGES.ja).toBeDefined();
+    expect(ISO_LANGUAGES['pt-PT']).toBeDefined();
+    expect(ISO_LANGUAGES['es-ES']).toBeDefined();
+  });
+});

package/src/models/__tests__/scanState.spec.ts

@@ -6,18 +6,11 @@ import {
   inflateMcadObjectState,
   inflateScanState
 } from '@/functions/modelHelper';
-import { AnchorPoint, Interactiontype, ScanView } from '@3cr/types-ts';
+import { AnchorPoint, InteractionType, ScanView } from '@3cr/types-ts';
 import {
   cSlider,
   getCurrentView,
-  getViewName,
-  setDataOverlayEvent,
-  setDataOverlayState,
-  setInitialDataOverlayState,
-  setInitialMcadState,
   setInitialScanStateFromPayload,
-  setMcadEvent,
-  setMcadState,
   setScanState,
   setScanStateFromPayload,
   sSlider,
@@ -27,8 +20,13 @@ import {
 } from '@/models/scanState';
 import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
 import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
+import { useDataOverlayStore } from '@/stores/data-overlay.store';
+import { useMcadStore } from '@/stores/mcad.store';
 
 describe('scanState tests', () => {
+  const dataOverlayStore = useDataOverlayStore();
+  const mcadStore = useMcadStore();
+
   it('should getCurrentView Sagittal', () => {
     expect(
       getCurrentView({
@@ -137,54 +135,32 @@ describe('scanState tests', () => {
 
     it('should set initial data overlay state', () => {
       const payload = JSON.stringify(inflateInitialDataOverlayState());
-      expect(() => setInitialDataOverlayState(payload)).not.toThrow();
+      expect(() => dataOverlayStore.setInitialDataOverlayState(payload)).not.toThrow();
     });
 
     it('should set current data overlay state', () => {
       const payload = JSON.stringify(inflateDataOverlayState());
-      expect(() => setDataOverlayState(payload)).not.toThrow();
+      expect(() => dataOverlayStore.setDataOverlayState(payload)).not.toThrow();
     });
 
     it('should set data overlay event', () => {
-      const payload = JSON.stringify(DataOverlayDataFaker.annotationEventRaw(Interactiontype.HOVER_START));
-      expect(() => setDataOverlayEvent(payload)).not.toThrow();
+      const payload = JSON.stringify(DataOverlayDataFaker.annotationEventRaw(InteractionType.HOVER_START));
+      expect(() => dataOverlayStore.setDataOverlayEvent(payload)).not.toThrow();
     });
 
     it('should set initial mcad state', () => {
       const payload = JSON.stringify(inflateInitialMcadObjectState());
-      expect(() => setInitialMcadState(payload)).not.toThrow();
+      expect(() => mcadStore.setInitialMcadState(payload)).not.toThrow();
     });
 
     it('should set current data overlay state', () => {
       const payload = JSON.stringify(inflateMcadObjectState());
-      expect(() => setMcadState(payload)).not.toThrow();
+      expect(() => mcadStore.setMcadState(payload)).not.toThrow();
     });
 
     it('should set data overlay event', () => {
-      const payload = JSON.stringify(McadObjectInteractionFaker.randomRaw(Interactiontype.HOVER_START));
-      expect(() => setMcadEvent(payload)).not.toThrow();
-    });
-  });
-
-  describe('getViewName tests', () => {
-    it('should get name for coronal', () => {
-      expect(getViewName(ScanView.Coronal)).toBe('Coronal');
-    });
-
-    it('should get name for sagittal', () => {
-      expect(getViewName(ScanView.Sagittal)).toBe('Sagittal');
-    });
-
-    it('should get name for transverse', () => {
-      expect(getViewName(ScanView.Transverse)).toBe('Transverse');
-    });
-
-    it('should get name for volume', () => {
-      expect(getViewName(ScanView.Volume)).toBe('3D Volume');
-    });
-
-    it('should get empty string for unknown', () => {
-      expect(getViewName(-1 as ScanView)).toBe('');
+      const payload = JSON.stringify(McadObjectInteractionFaker.randomRaw(InteractionType.HOVER_START));
+      expect(() => mcadStore.setMcadEvent(payload)).not.toThrow();
     });
   });
 });