@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/views/modals/DataOverlayModal.vue

@@ -1,88 +0,0 @@
-<template>
-  <v-menu v-model="menu" max-width="500" persistent :no-click-animation="true" :target="menuTarget">
-    <template v-if="selected">
-      <data-overlay-markup-modal v-if="isMarkup" :markup="selected as DataOverlayMarkup" />
-      <data-overlay-general-modal v-else :data-overlay="selected" />
-    </template>
-  </v-menu>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useEventListener } from '@/composables/useEventListener';
-import { DataOverlay } from '@/types/data-overlay';
-import { DataOverlayMarkup } from '@/types/data-overlay-markup';
-import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
-import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
-import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
-import { useDataOverlayTool } from '@/tools/data-overlay.tool';
-
-useEventListener(document, 'mousemove', onMouseMove);
-useEventListener(document, 'mousedown', onMouseDown);
-
-const dataOverlayTool = useDataOverlayTool();
-const menu = ref<boolean>(false);
-const currentTarget = ref<[number, number]>([0, 0]);
-const menuTarget = ref<[number, number]>([0, 0]);
-
-const selected = computed(() => dataOverlayTool.selected.value);
-
-const isMarkup = computed(() => {
-  const val = selected.value;
-  return val && (isDataOverlayLength(val) || isDataOverlayPolygon(val) || isDataOverlayAngle(val));
-});
-
-onMounted(() => {
-  dataOverlayTool.activate();
-});
-
-onUnmounted(() => {
-  dataOverlayTool.deactivate();
-});
-
-watch(
-  selected,
-  async (value: DataOverlay | null) => {
-    if (value !== null) {
-      menuTarget.value = currentTarget.value;
-      menu.value = true;
-    }
-  },
-  { immediate: true }
-);
-
-function onMouseMove(event: MouseEvent): void {
-  currentTarget.value = [event.x, event.y];
-}
-
-function onMouseDown(): void {
-  menu.value = false;
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.v-card) {
-  background: rgba(var(--v-theme-surface), 0.5) !important;
-  backdrop-filter: blur(24px);
-}
-
-:deep(.v-card-title) {
-  background: none;
-  font-size: 14px;
-  padding-bottom: 0;
-}
-
-:deep(.v-list) {
-  background: none;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-:deep(.v-list-item-title) {
-  font-size: 13px;
-}
-
-:deep(.v-list-item-subtitle) {
-  font-size: 12px;
-}
-</style>

package/src/components/views/shared/MaskIcon.vue

@@ -1,44 +0,0 @@
-<template>
-  <div :style="maskStyles">
-    <div :style="backgroundStyles" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-interface Props {
-  data: string;
-  color: string;
-  size?: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 12
-});
-
-const sizePx = computed(() => {
-  return `${props.size}px`;
-});
-
-const maskStyles = computed(() => {
-  const src = `data:image/png;base64, ${props.data}`;
-  const px = sizePx.value;
-  return {
-    'display': 'inline-block',
-    'mask-size': `${px} ${px}`,
-    'mask-image': `url('${src}')`,
-    'width': px,
-    'height': px,
-  };
-})
-
-const backgroundStyles = computed(() => {
-  const px = sizePx.value;
-  return {
-    'background-color': props.color,
-    'width': px,
-    'height': px,
-  };
-})
-</script>

package/src/components/views/shared/ObjectColor.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :style="styles" />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  color: string;
-  size?: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 12
-});
-
-const sizePx = computed(() => {
-  return `${props.size}px`;
-});
-
-const styles = computed(() => {
-  const px = sizePx.value;
-  return {
-    'display': 'inline-block',
-    'background-color': props.color,
-    'border': '1px #333333 solid',
-    'width': px,
-    'height': px,
-  };
-});
-</script>

package/src/components/views/shared/ObjectLabel.vue

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <slot name="prepend">
-      <v-icon
-        class="mr-2 material-icons-filled"
-        size="16"
-        :icon="icon"
-        :color="color"
-      />
-    </slot>
-    <span class="label text-truncate">{{ label }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  icon?: string;
-  color?: string;
-  label: string;
-}
-
-defineProps<Props>();
-</script>
-
-<style scoped lang="css">
-.label {
-  font-size: 12px;
-  vertical-align: text-top;
-}
-</style>

package/src/components/views/shared/Opacity.vue

@@ -1,65 +0,0 @@
-<template>
-  <v-text-field
-    v-model:model-value="value"
-    density="compact"
-    hide-details
-    max="100"
-    min="0"
-    suffix="%"
-    type="number"
-    variant="outlined"
-    @input="onInputOpacity"
-  />
-</template>
-
-<script setup lang="ts">
-import { clamp } from '@/functions/clamp';
-import { computed, ref } from 'vue';
-
-interface Props {
-  modelValue?: number;
-}
-
-type Emits = {
-  'update:modelValue': [number];
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: 0
-});
-
-const emit = defineEmits<Emits>();
-
-const value_ = ref<number>(props.modelValue);
-
-const value = computed({
-  get(): number {
-    return value_.value;
-  },
-  set(val: number): void {
-    value_.value = clamp(val, 0, 100);
-    emit('update:modelValue', value_.value);
-  }
-});
-
-function onInputOpacity(event: InputEvent): void {
-  const input = event.target as HTMLInputElement;
-  const value = input.value ? parseInt(input.value) : 0;
-  input.value = clamp(value, parseInt(input.min), parseInt(input.max)).toString();
-}
-</script>
-
-<style scoped lang="css">
-:deep(.v-text-field__suffix) {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-  padding: 4px 8px 4px 2px;
-  min-height: 0;
-}
-
-:deep(.v-field__input) {
-  font-size: 12px;
-  padding: 4px 0 4px 8px;
-  min-height: 0;
-}
-</style>

package/src/components/views/shared/VisibilityBtn.vue

@@ -1,25 +0,0 @@
-<template>
-  <v-btn size="x-small" :icon="icon" variant="text" />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  isVisible: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isVisible: true
-});
-
-const icon = computed(() => {
-  return props.isVisible ? 'visibility' : 'visibility_off';
-});
-</script>
-
-<style scoped lang="css">
-:deep(.v-icon) {
-  font-size: 20px;
-}
-</style>

package/src/components/views/shared/__tests__/MaskIcon.spec.ts

@@ -1,10 +0,0 @@
-import { mount } from '@vue/test-utils';
-import MaskIcon from '@/components/views/shared/MaskIcon.vue';
-
-describe('MaskIcon tests', () => {
-  it('should mount', () => {
-    const props = { data: '0', color: 'white' };
-    const wrapper = mount(MaskIcon, { props });
-    expect(wrapper).toBeTruthy();
-  });
-});

package/src/components/views/shared/__tests__/ObjectColor.spec.ts

@@ -1,10 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ObjectColor from '@/components/views/shared/ObjectColor.vue';
-
-describe('ObjectColor tests', () => {
-  it('should mount', () => {
-    const props = { color: 'red' };
-    const wrapper = mount(ObjectColor, { props });
-    expect(wrapper).toBeTruthy();
-  });
-});

package/src/components/views/shared/__tests__/ObjectLabel.spec.ts

@@ -1,10 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ObjectLabel from '@/components/views/shared/ObjectLabel.vue';
-
-describe('ObjectLabel tests', () => {
-  it('should mount', () => {
-    const props = { label: 'test' };
-    const wrapper = mount(ObjectLabel, { props });
-    expect(wrapper).toBeTruthy();
-  });
-});

package/src/components/views/shared/__tests__/Opacity.spec.ts

@@ -1,24 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Opacity from '@/components/views/shared/Opacity.vue';
-import { VTextField } from 'vuetify/components';
-
-describe('Opacity tests', () => {
-  it('should mount', () => {
-    const props = { modelValue: 50 };
-    const wrapper = mount(Opacity, { props });
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('should set value', async () => {
-    const wrapper = mount(Opacity);
-    await wrapper.findComponent(VTextField).setValue('100');
-    expect(wrapper.emitted('update:modelValue')).toEqual([[100]]);
-  });
-
-  it('should set native value', async () => {
-    const wrapper = mount(Opacity);
-    await wrapper.find('input').setValue('');
-    await wrapper.find('input').setValue('100');
-    expect(wrapper.emitted('update:modelValue')).toEqual([[0], [100]]);
-  });
-});

package/src/components/views/shared/__tests__/VisibilityBtn.spec.ts

@@ -1,11 +0,0 @@
-import { mount } from '@vue/test-utils';
-import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
-
-describe('VisibilityBtn tests', () => {
-  it('should mount', async () => {
-    const props = { isVisible: true };
-    const wrapper = mount(VisibilityBtn, { props });
-    await wrapper.setProps({ isVisible: false });
-    expect(wrapper).toBeTruthy();
-  });
-});

package/src/components/views/types/annotation-tree-view-item-child-action.ts

@@ -1,6 +0,0 @@
-export interface AnnotationTreeViewItemChildAction {
-  title: string;
-  description: string;
-  url: string;
-  isBtn: boolean;
-}

package/src/components/views/types/annotation-tree-view-item-child.ts

@@ -1,9 +0,0 @@
-import { AnnotationTreeViewItemChildAction } from '@/components/views/types/annotation-tree-view-item-child-action';
-
-export interface AnnotationTreeViewItemChild {
-  props: {
-    key: string;
-    value: string;
-    actions: AnnotationTreeViewItemChildAction[];
-  };
-}

package/src/components/views/types/annotation-tree-view-item.ts

@@ -1,13 +0,0 @@
-import { Vector3 } from '@/types/vector3';
-import { Colour } from '@/types/colour';
-import { AnnotationTreeViewItemChild } from '@/components/views/types/annotation-tree-view-item-child';
-
-export interface AnnotationTreeViewItem {
-  id: string;
-  title: string;
-  isVisible: boolean;
-  icon: string;
-  position: Vector3;
-  colour: Colour;
-  children: AnnotationTreeViewItemChild[];
-}

package/src/components/views/types/markup-tree-view-item-child.ts

@@ -1,6 +0,0 @@
-export interface MarkupTreeViewItemChild {
-  props: {
-    key: string;
-    value: string;
-  };
-}

package/src/components/views/types/markup-tree-view-item.ts

@@ -1,14 +0,0 @@
-import { Vector3 } from '@/types/vector3';
-import { MarkupTreeViewItemChild } from '@/components/views/types/markup-tree-view-item-child';
-
-export interface MarkupTreeViewItem {
-  id: string;
-  title: string;
-  description: string;
-  isVisible: boolean;
-  tooltip: string;
-  colour: string;
-  icon: string;
-  position: Vector3;
-  children: MarkupTreeViewItemChild[];
-}

package/src/components/views/types/mcad-object-tree-view-item.ts

@@ -1,13 +0,0 @@
-export interface McadObjectTreeViewItem {
-  id: string;
-  key: string;
-  title: string;
-  description: string;
-  isVisible: boolean;
-  colour: {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-  };
-}

package/src/composables/__tests__/useAnnotations.spec.ts

@@ -1,35 +0,0 @@
-import { useAnnotations } from '@/composables/useAnnotations';
-import { dataOverlayEvent, dataOverlayState } from '@/models/scanState';
-import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
-import { Interactiontype } from '@3cr/types-ts';
-import { inflateInitialDataOverlayState } from '@/functions/modelHelper';
-
-describe('useAnnotations tests', () => {
-  it('should have no annotations', () => {
-    const { annotations, hasAnnotations } = useAnnotations();
-    expect(annotations.value.length).toBe(0);
-    expect(hasAnnotations.value).toBeFalsy();
-  });
-
-  it('should have annotations', () => {
-    const dataOverlay = inflateInitialDataOverlayState();
-    dataOverlay.DataOverlay.DataOverlay.push(DataOverlayDataFaker.annotationRaw());
-    dataOverlayState.value = dataOverlay;
-
-    const { annotations } = useAnnotations();
-    expect(annotations.value.length).toBe(1);
-    expect(typeof annotations.value[0].Data).not.toBe('string');
-  });
-
-  it('should have null event', () => {
-    const { annotationEvent } = useAnnotations();
-    expect(annotationEvent.value).toBeNull();
-  });
-
-  it('should have non-null event', () => {
-    dataOverlayEvent.value = DataOverlayDataFaker.annotationEventRaw(Interactiontype.HOVER_START);
-    const { annotationEvent } = useAnnotations();
-    expect(annotationEvent.value).not.toBeNull();
-    expect(typeof annotationEvent.value?.DataOverlay).not.toBe('string');
-  });
-});

package/src/composables/__tests__/useIntroJs.spec.ts

@@ -1,51 +0,0 @@
-import { describe } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { defineComponent } from 'vue';
-import { useIntroJs } from '@/composables/useIntroJs';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
-import { Tour } from 'intro.js/src/packages/tour';
-import { scanState } from '@/models/scanState';
-import { inflateScanState } from '@/functions/modelHelper';
-
-describe('useIntroJs tests', () => {
-  vi.spyOn(Viewer3crService.prototype, 'layouts').mockResolvedValue();
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should start introjs', async () => {
-    const component = defineComponent({
-      template: `
-      <div>
-        <div id="skin-to-bone"></div>
-        <div id="view-0"></div>
-        <div id="view-1"></div>
-        <div id="view-2"></div>
-        <div id="view-3"></div>
-        <div id="settings-card"></div>
-      </div>`,
-      setup(_, context) {
-        const { intro } = useIntroJs();
-        context.expose({ intro });
-      }
-    });
-
-    const wrapper = mount(component);
-    const intro = (wrapper.vm as any).intro as Tour;
-
-    await intro.start();
-    scanState.value = inflateScanState();
-    vi.advanceTimersByTime(1000);
-    for (let i = 0; i < 5; ++i) {
-      await intro.nextStep();
-      vi.advanceTimersByTime(1000);
-    }
-
-    expect(wrapper).toBeTruthy();
-  });
-});

package/src/composables/__tests__/useMarkups.spec.ts

@@ -1,39 +0,0 @@
-import { inflateInitialDataOverlayState } from '@/functions/modelHelper';
-import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
-import { dataOverlayEvent, dataOverlayState } from '@/models/scanState';
-import { Interactiontype } from '@3cr/types-ts';
-import { useMarkups } from '@/composables/useMarkups';
-
-describe('useMarkups tests', () => {
-  it('should have no markups', () => {
-    const { markups, hasMarkups } = useMarkups();
-    expect(markups.value.length).toBe(0);
-    expect(hasMarkups.value).toBeFalsy();
-  });
-
-  it('should have markups', () => {
-    const dataOverlay = inflateInitialDataOverlayState();
-    dataOverlay.DataOverlay.DataOverlay.push(
-      DataOverlayDataFaker.lengthRaw(),
-      DataOverlayDataFaker.polygonRaw(),
-      DataOverlayDataFaker.angleRaw()
-    );
-    dataOverlayState.value = dataOverlay;
-
-    const { markups } = useMarkups();
-    expect(markups.value.length).toBe(3);
-    expect(typeof markups.value[0].Data).not.toBe('string');
-  });
-
-  it('should have null event', () => {
-    const { markupEvent } = useMarkups();
-    expect(markupEvent.value).toBeNull();
-  });
-
-  it('should have non-null event', () => {
-    dataOverlayEvent.value = DataOverlayDataFaker.polygonEventRaw(Interactiontype.HOVER_START);
-    const { markupEvent } = useMarkups();
-    expect(markupEvent.value).not.toBeNull();
-    expect(typeof markupEvent.value?.DataOverlay).not.toBe('string');
-  });
-});

package/src/composables/__tests__/useMcadObjects.spec.ts

@@ -1,36 +0,0 @@
-import { inflateInitialMcadObjectState } from '@/functions/modelHelper';
-import { mcadObjectEvent, mcadObjectState } from '@/models/scanState';
-import { Interactiontype } from '@3cr/types-ts';
-import { useMcadObjects } from '@/composables/useMcadObjects';
-import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
-import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
-
-describe('useMcadObjects tests', () => {
-  it('should have no mcad objects', () => {
-    const { mcadObjects, hasMcadObjects } = useMcadObjects();
-    expect(mcadObjects.value.length).toBe(0);
-    expect(hasMcadObjects.value).toBeFalsy();
-  });
-
-  it('should have mcad objects', () => {
-    const mcad = inflateInitialMcadObjectState();
-    mcad.Models.Models.push(DataOverlayMcadFaker.randomRaw() as any);
-    mcadObjectState.value = mcad;
-
-    const { mcadObjects } = useMcadObjects();
-    expect(mcadObjects.value.length).toBe(1);
-    expect(typeof mcadObjects.value[0].CallToAction).not.toBe('string');
-  });
-
-  it('should have null event', () => {
-    const { mcadObjectEvent } = useMcadObjects();
-    expect(mcadObjectEvent.value).toBeNull();
-  });
-
-  it('should have non-null event', () => {
-    mcadObjectEvent.value = McadObjectInteractionFaker.randomRaw(Interactiontype.HOVER_START) as any;
-    const { mcadObjectEvent: event } = useMcadObjects();
-    expect(event.value).not.toBeNull();
-    expect(typeof event.value?.Mcad).not.toBe('string');
-  });
-});

package/src/composables/__tests__/useNavigationCubeObserver.spec.ts

@@ -1,61 +0,0 @@
-import { useNavigationCubeObserver } from '@/composables/useNavigationCubeObserver';
-import { isFullscreen, isLayout1x3, isLayout2x2, scanState } from '@/models/scanState';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
-import { AnchorPoint, CurrentScanState, ScanView } from '@3cr/types-ts';
-import { flushPromises } from '@vue/test-utils';
-
-function setupMocks(state: CurrentScanState, fullscreen: boolean, layout1x3: boolean, layout2x2: boolean): void {
-  vi.spyOn(scanState, 'value', 'get').mockReturnValue(state);
-  vi.spyOn(isFullscreen, 'value', 'get').mockReturnValue(fullscreen);
-  vi.spyOn(isLayout1x3, 'value', 'get').mockReturnValue(layout1x3);
-  vi.spyOn(isLayout2x2, 'value', 'get').mockReturnValue(layout2x2);
-}
-
-describe('useNavigationCubeObserver tests', () => {
-  vi.spyOn(ResizeObserver.prototype, 'observe').mockReturnValue();
-  vi.spyOn(ResizeObserver.prototype, 'unobserve').mockReturnValue();
-
-  const canvas = { clientWidth: 100, clientHeight: 100 } as HTMLCanvasElement;
-  const fullscreen2d = {
-    CurrentView: ScanView.Sagittal,
-    NavigationCube: { Interactivity: { Value: true } }
-  } as CurrentScanState;
-  const fullscreen3d = {
-    CurrentView: ScanView.Volume,
-    NavigationCube: { Interactivity: { Value: true } }
-  } as CurrentScanState;
-
-  const visibilitySpy = vi.spyOn(Viewer3crService.prototype, 'setNavCubeVisibility');
-  const positionSizeSpy = vi.spyOn(Viewer3crService.prototype, 'setNavCubePositionSize');
-
-  it('should update on 3d fullscreen changes', async () => {
-    setupMocks(fullscreen3d, true, false, false);
-    useNavigationCubeObserver(canvas);
-    await flushPromises();
-    expect(visibilitySpy).toBeCalledWith(true);
-    expect(positionSizeSpy).toBeCalledWith(AnchorPoint.TOP_LEFT, 90, 90, 10, 10);
-  });
-
-  it('should update on 2d fullscreen changes', async () => {
-    setupMocks(fullscreen2d, true, false, false);
-    useNavigationCubeObserver(canvas);
-    await flushPromises();
-    expect(visibilitySpy).toBeCalledWith(false);
-  });
-
-  it('should update on 1x3 layout changes', async () => {
-    setupMocks(fullscreen3d, false, true, false);
-    useNavigationCubeObserver(canvas);
-    await flushPromises();
-    expect(visibilitySpy).toBeCalledWith(true);
-    expect(positionSizeSpy).toBeCalledWith(AnchorPoint.TOP_LEFT, 56, 90, 10, 10);
-  });
-
-  it('should update on 2x2 layout changes', async () => {
-    setupMocks(fullscreen3d, false, false, true);
-    useNavigationCubeObserver(canvas);
-    await flushPromises();
-    expect(visibilitySpy).toBeCalledWith(true);
-    expect(positionSizeSpy).toBeCalledWith(AnchorPoint.TOP_LEFT, 40, 40, 10, 10);
-  });
-});