@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/stores/__tests__/mcad-floating.store.spec.ts

@@ -0,0 +1,339 @@
+import { storeToRefs } from 'pinia';
+import { FloatingState, useMcadFloatingStore } from '@/stores/mcad-floating.store';
+import { flushPromises, mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { mountAndFakePiniaWrapper } from '@test/plugins/pinia';
+
+const DragTest = defineComponent({
+  template: `
+    <div style="width: 100px; height: 100px">
+      <div id="drag-set" style="width: 100px; height: 100px"></div>
+    </div>
+  `
+});
+
+describe('mcad floating store', () => {
+  beforeEach(() => {
+    mount(DragTest);
+  });
+
+  it('should have defaults', () => {
+    const { x, y, state } = storeToRefs(useMcadFloatingStore());
+    expect(x.value).toBe(16);
+    expect(y.value).toBe(16);
+    expect(state.value).toBe(FloatingState.REGULAR);
+  });
+
+  it('should pin horizontally top edge', async () => {
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = 32;
+    y.value = 0;
+
+    store.setEdge();
+
+    expect(state.value).toBe(FloatingState.HORIZONTAL_SQUASH);
+    expect(getElementSpy).toHaveBeenCalled();
+    getElementSpy.mockRestore();
+  });
+
+  it('should pin horizontally bottom edge', async () => {
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = 32;
+    y.value = 1920;
+
+    store.setEdge();
+
+    expect(state.value).toBe(FloatingState.HORIZONTAL_SQUASH);
+    expect(getElementSpy).toHaveBeenCalled();
+    getElementSpy.mockRestore();
+  });
+
+  it('should pin vertically left edge', async () => {
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = 0;
+    y.value = 150;
+
+    store.setEdge();
+    expect(state.value).toBe(FloatingState.VERTICAL_SQUASH);
+    expect(getElementSpy).toHaveBeenCalled();
+    getElementSpy.mockRestore();
+  });
+
+  it('should pin vertically right edge', async () => {
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = 1920;
+    y.value = 150;
+
+    store.setEdge();
+    expect(state.value).toBe(FloatingState.VERTICAL_SQUASH);
+    expect(getElementSpy).toHaveBeenCalled();
+    getElementSpy.mockRestore();
+  });
+
+  it('should not pin edge', async () => {
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = 150;
+    y.value = 150;
+
+    store.setEdge();
+    expect(state.value).toBe(FloatingState.REGULAR);
+    expect(getElementSpy).toHaveBeenCalled();
+    getElementSpy.mockRestore();
+  });
+
+  it('should pin vertically', async () => {
+    mountAndFakePiniaWrapper();
+    const { state, x, y, isDragging } = storeToRefs(useMcadFloatingStore());
+    x.value = 0;
+    y.value = 32;
+    isDragging.value = true;
+    await flushPromises();
+    isDragging.value = false;
+    await flushPromises();
+    expect(state.value).toBe(FloatingState.VERTICAL_SQUASH);
+  });
+
+  it('should slip from right', async () => {
+    const preX = 0;
+    const preY = 150;
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = preX;
+    y.value = preY;
+
+    await store.open();
+    expect(state.value).toBe(FloatingState.REGULAR);
+    expect(getElementSpy).toHaveBeenCalled();
+    getElementSpy.mockRestore();
+    expect(x.value).greaterThan(preX);
+    expect(y.value).toBe(preY);
+  });
+
+  it('should slip from left', async () => {
+    const preX = 1920;
+    const preY = 150;
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = preX;
+    y.value = preY;
+
+    await store.open();
+    expect(state.value).toBe(FloatingState.REGULAR);
+    expect(getElementSpy).toHaveBeenCalled();
+    expect(x.value).lessThan(preX);
+    expect(y.value).toBe(preY);
+    getElementSpy.mockRestore();
+  });
+
+  it('should slip from top', async () => {
+    const preX = 150;
+    const preY = 0;
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = preX;
+    y.value = preY;
+
+    await store.open();
+    expect(state.value).toBe(FloatingState.REGULAR);
+    expect(getElementSpy).toHaveBeenCalled();
+    expect(x.value).toBe(preX);
+    expect(y.value).greaterThan(preY);
+    getElementSpy.mockRestore();
+  });
+
+  it('should slip from bottom', async () => {
+    const preX = 150;
+    const preY = 1920;
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
+      parentElement: {
+        clientHeight: 1920,
+        clientWidth: 1920
+      },
+      clientHeight: 10,
+      clientWidth: 10
+    });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { state, x, y } = storeToRefs(store);
+    x.value = preX;
+    y.value = preY;
+
+    await store.open();
+    expect(state.value).toBe(FloatingState.REGULAR);
+    expect(getElementSpy).toHaveBeenCalled();
+    expect(x.value).toBe(preX);
+    expect(y.value).lessThan(preY);
+    getElementSpy.mockRestore();
+  });
+
+  it('should slip from bottom and recollapse', async () => {
+    const preX = 1000;
+    const preY = 1920;
+    const getElementSpy = vi
+      .spyOn(document, 'getElementById')
+      .mockReturnValueOnce({
+        parentElement: {
+          clientHeight: 1920,
+          clientWidth: 1920
+        },
+        clientHeight: 500,
+        clientWidth: 500
+      })
+      .mockReturnValueOnce({
+        parentElement: {
+          clientHeight: 1920,
+          clientWidth: 1920
+        },
+        clientHeight: 500,
+        clientWidth: 500
+      })
+      .mockReturnValueOnce({
+        parentElement: {
+          clientHeight: 1920,
+          clientWidth: 1920
+        },
+        clientHeight: 0,
+        clientWidth: 10
+      });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { x, y } = storeToRefs(store);
+    x.value = preX;
+    y.value = preY;
+
+    await store.open();
+    expect(getElementSpy).toHaveBeenCalled();
+    expect(x.value).toBe(preX);
+    expect(y.value).lessThan(preY);
+    getElementSpy.mockRestore();
+  });
+
+  it('should slip from bottom and recollapse', async () => {
+    const preX = 1000;
+    const preY = 1920;
+    const getElementSpy = vi
+      .spyOn(document, 'getElementById')
+      .mockReturnValueOnce(undefined)
+      .mockReturnValueOnce(undefined)
+      .mockReturnValueOnce({
+        parentElement: {
+          clientHeight: 1920,
+          clientWidth: 1920
+        },
+        clientHeight: 0,
+        clientWidth: 10
+      });
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { x, y } = storeToRefs(store);
+    x.value = preX;
+    y.value = preY;
+
+    await store.open();
+    expect(getElementSpy).toHaveBeenCalled();
+    expect(x.value).lessThan(preX);
+    expect(y.value).lessThan(preY);
+    getElementSpy.mockRestore();
+  });
+
+  it('should slip from bottom and recollapse', async () => {
+    const preX = 1000;
+    const preY = 1920;
+    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue(undefined);
+
+    vi.useFakeTimers();
+    mountAndFakePiniaWrapper();
+    const store = useMcadFloatingStore();
+    const { x, y, style } = storeToRefs(store);
+    x.value = preX;
+    y.value = preY;
+    window.dispatchEvent(new Event('resize'));
+
+    await store.open();
+    expect(getElementSpy).toHaveBeenCalled();
+    expect(x.value).toBe(-230);
+    expect(y.value).toBe(-144);
+    expect(style.value.transition).toBe('all 300ms ease-in-out');
+    getElementSpy.mockRestore();
+
+    vi.advanceTimersByTime(300);
+    expect(style.value.transition).toBe('');
+  });
+});

package/src/stores/__tests__/mcad.store.spec.ts

@@ -0,0 +1,88 @@
+import { useMcadStore } from '@/stores/mcad.store';
+import { storeToRefs } from 'pinia';
+import { inflateInitialMcadObjectState } from '@/functions/modelHelper';
+import { McadObjectInteractionFaker } from '@test/fakers/mcad-object-interaction.faker';
+import { InteractionType } from '@3cr/types-ts';
+import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
+import { McadData } from '@3cr/types-ts/types/McadData';
+import { mountAndFakePiniaWrapper } from '@test/plugins/pinia';
+
+describe('mcad store', () => {
+  beforeEach(() => {
+    mountAndFakePiniaWrapper();
+  });
+  it('should have defaults', () => {
+    const { state, event, mcads, mcadEvent } = storeToRefs(useMcadStore());
+    expect(state.value).toEqual(inflateInitialMcadObjectState());
+    expect(event.value).toBe(null);
+    expect(mcads.value).toEqual([]);
+    expect(mcadEvent.value).toBe(null);
+  });
+
+  it('should handle mcad event', () => {
+    const { event, mcadEvent } = storeToRefs(useMcadStore());
+    event.value = McadObjectInteractionFaker.randomRaw(InteractionType.HOVER_START);
+    expect(mcadEvent.value).not.toBe(null);
+  });
+
+  it('should add mcad item', () => {
+    const { state, mcads } = storeToRefs(useMcadStore());
+    const x = DataOverlayMcadFaker.randomRaw();
+    state.value.Models.Models.push(x as McadData);
+
+    expect(mcads.value).not.toBe(null);
+  });
+
+  it('should add mcad item with children', () => {
+    const { state, childKeys } = storeToRefs(useMcadStore());
+    const x = DataOverlayMcadFaker.randomRaw();
+    x.Children = ['123'];
+    state.value.Models.Models.push(x as McadData);
+
+    expect(childKeys.value).toContain('123');
+  });
+
+  it('should set Initial MCAD state', async () => {
+    const store = useMcadStore();
+    const { state } = storeToRefs(store);
+    const x = DataOverlayMcadFaker.randomRaw();
+    x.Children = ['123'];
+    state.value.Models.Models.push(x as McadData);
+
+    const stateString = JSON.stringify(state.value);
+    const y = DataOverlayMcadFaker.randomRaw();
+    y.Children = ['123123123'];
+
+    state.value.Models.Models.push(y as McadData);
+    store.setInitialMcadState(stateString);
+    expect(JSON.stringify(state.value)).toEqual(stateString);
+  });
+
+  it('should set MCAD state', async () => {
+    const store = useMcadStore();
+    const { state } = storeToRefs(store);
+    const x = DataOverlayMcadFaker.randomRaw();
+    x.Children = ['123'];
+    state.value.Models.Models.push(x as McadData);
+
+    const stateModelsString = JSON.stringify(state.value.Models);
+    const y = DataOverlayMcadFaker.randomRaw();
+    y.Children = ['123123123'];
+
+    state.value.Models.Models.push(y as McadData);
+    store.setMcadState(stateModelsString);
+    expect(JSON.stringify(state.value.Models)).toEqual(stateModelsString);
+  });
+
+  it('should set MCAD Event', async () => {
+    const store = useMcadStore();
+    const { event } = storeToRefs(store);
+
+    expect(event.value).toEqual(null);
+
+    const y = McadObjectInteractionFaker.randomRaw(InteractionType.NONE);
+
+    store.setMcadEvent(JSON.stringify(y));
+    expect(event.value).toEqual(y);
+  });
+});

package/src/stores/__tests__/save.store.spec.ts

@@ -0,0 +1,51 @@
+import { storeToRefs } from 'pinia';
+import { useSaveStore } from '@/stores/save.store';
+import { flushPromises } from '@vue/test-utils';
+import { SaveState } from '@3cr/viewer-types-ts';
+
+describe('save store', () => {
+  it('should show saving state', () => {
+    const { state, icon, text } = storeToRefs(useSaveStore());
+    state.value = SaveState.SAVING;
+    expect(icon.value).toBe('autorenew');
+    expect(text.value).toBe('enums.saveState.saving');
+  });
+
+  it('should show saved to cloud state', () => {
+    const { state, icon, text } = storeToRefs(useSaveStore());
+    state.value = SaveState.SAVED_CLOUD;
+    expect(icon.value).toBe('cloud_done');
+    expect(text.value).toBe('enums.saveState.savedCloud');
+  });
+
+  it('should show saved temporarily state', () => {
+    const { state, icon, text } = storeToRefs(useSaveStore());
+    state.value = SaveState.SAVED_TEMPORARY;
+    expect(icon.value).toBe('sync_saved_locally');
+    expect(text.value).toBe('enums.saveState.savedTemporary');
+  });
+
+  it('should show unsaved state', () => {
+    const { state, icon, text } = storeToRefs(useSaveStore());
+    state.value = SaveState.UNSAVED;
+    expect(icon.value).toBe('warning');
+    expect(text.value).toBe('enums.saveState.unsaved');
+  });
+
+  it('should show error state', () => {
+    const { state, icon, text } = storeToRefs(useSaveStore());
+    state.value = SaveState.ERROR;
+    expect(icon.value).toBe('error');
+    expect(text.value).toBe('enums.saveState.error');
+  });
+
+  it('should show text for timeout', async () => {
+    vi.useFakeTimers();
+    const { state, showText } = storeToRefs(useSaveStore());
+    state.value = SaveState.UNSAVED;
+    await flushPromises();
+    expect(showText.value).toBeTruthy();
+    vi.advanceTimersByTime(5001);
+    expect(showText.value).toBeFalsy();
+  });
+});

package/src/stores/__tests__/theme.store.spec.ts

@@ -0,0 +1,18 @@
+import { storeToRefs } from 'pinia';
+import { useThemeStore } from '@/stores/theme.store';
+
+describe('theme store', () => {
+  beforeEach(() => {});
+  it('should use default theme', () => {
+    vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce('default');
+    const { theme } = storeToRefs(useThemeStore());
+    expect(theme.value).toBe('default');
+  });
+
+  it('should have theme preference', () => {
+    vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce('dark');
+    const { prefersLight, prefersDark } = storeToRefs(useThemeStore());
+
+    expect(prefersLight.value || prefersDark.value).toBeTruthy();
+  });
+});

package/src/stores/__tests__/tool.store.spec.ts

@@ -0,0 +1,53 @@
+import { useToolStore } from '@/stores/tool.store';
+
+describe('tool store', () => {
+  it('should have annotation create tool', () => {
+    const { annotationCreateTool } = useToolStore();
+    expect(annotationCreateTool).toBeTruthy();
+  });
+
+  it('should have annotation move tool', () => {
+    const { annotationMoveTool } = useToolStore();
+    expect(annotationMoveTool).toBeTruthy();
+  });
+
+  it('should have data overlay tool', () => {
+    const { dataOverlayTool } = useToolStore();
+    expect(dataOverlayTool).toBeTruthy();
+  });
+
+  it('should have measurement angle tool', () => {
+    const { measurementAngleTool } = useToolStore();
+    expect(measurementAngleTool).toBeTruthy();
+  });
+
+  it('should have measurement length tool', () => {
+    const { measurementLengthTool } = useToolStore();
+    expect(measurementLengthTool).toBeTruthy();
+  });
+
+  it('should have measurement polygon tool', () => {
+    const { measurementPolygonTool } = useToolStore();
+    expect(measurementPolygonTool).toBeTruthy();
+  });
+
+  it('should have mcad move tool', () => {
+    const { mcadMoveTool } = useToolStore();
+    expect(mcadMoveTool).toBeTruthy();
+  });
+
+  it('should have mcad rotate tool', () => {
+    const { mcadRotateTool } = useToolStore();
+    expect(mcadRotateTool).toBeTruthy();
+  });
+
+  it('should have mcad scale tool', () => {
+    const { mcadScaleTool } = useToolStore();
+    expect(mcadScaleTool).toBeTruthy();
+  });
+
+  it('should have mcad select tool', () => {
+    const { mcadSelectTool } = useToolStore();
+    expect(mcadSelectTool).toBeTruthy();
+  });
+});

package/src/stores/__tests__/upload.store.spec.ts

@@ -0,0 +1,19 @@
+import { storeToRefs } from 'pinia';
+import { useUploadStore } from '@/stores/upload.store';
+import { UploadFaker } from '@test/fakers/upload.faker';
+import { flushPromises } from '@vue/test-utils';
+
+describe('upload store', () => {
+  it('should have defaults', () => {
+    const { showUploads, uploads } = storeToRefs(useUploadStore());
+    expect(showUploads.value).toBeFalsy();
+    expect(uploads.value).toEqual([]);
+  });
+
+  it('should show uploads if one exists', async () => {
+    const { showUploads, uploads } = storeToRefs(useUploadStore());
+    uploads.value.push(UploadFaker.random());
+    await flushPromises();
+    expect(showUploads.value).toBeTruthy();
+  });
+});

package/src/stores/__tests__/viewer.store.spec.ts

@@ -0,0 +1,20 @@
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+
+describe('viewer store', () => {
+  it('should have defaults', () => {
+    const store = storeToRefs(useViewerStore());
+    expect(store.activeView.value).toBe(undefined);
+    expect(store.enableMouse.value).toBe(false);
+    expect(store.enableKeyboard.value).toBe(false);
+    expect(store.inputOverride.value).toBe(false);
+    expect(store.options.value).toEqual({});
+    expect(store.version.value).toBe('0.0.0');
+    expect(store.notifications.value).toBe(false);
+    expect(store.measurementToDelete.value).toBe(undefined);
+    expect(store.s_annotationDelete.value).toBe(false);
+    expect(store.s_measurementDelete.value).toBe(false);
+    expect(store.m_annotationCreate.value).toBe(false);
+    expect(store.annotationCreateId.value).toBe('');
+  });
+});

package/src/stores/data-overlay.store.ts

@@ -0,0 +1,93 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { CurrentDataOverlayState, DataOverlayType, InitialDataOverlayState } from '@3cr/types-ts';
+import { inflateInitialDataOverlayState } from '@/functions/modelHelper';
+import { parseDataOverlayData } from '@/functions/parsers/parseDataOverlayData';
+import { parseDataOverlayEvent } from '@/functions/parsers/parseDataOverlayEvent';
+import {
+  DataOverlayAnnotation,
+  DataOverlayDataRaw,
+  DataOverlayEvent,
+  DataOverlayData,
+  DataOverlayMeasurement
+} from '@3cr/viewer-types-ts';
+
+function isAnnotation(data: DataOverlayDataRaw): boolean {
+  return data.DataType === DataOverlayType.Annotation;
+}
+
+function toAnnotation(data: DataOverlayDataRaw): DataOverlayData<DataOverlayAnnotation> {
+  return parseDataOverlayData<DataOverlayAnnotation>(data);
+}
+
+function toAnnotationEvent(data: DataOverlayDataRaw): DataOverlayEvent<DataOverlayAnnotation> {
+  return parseDataOverlayEvent<DataOverlayAnnotation>(data);
+}
+
+function isMeasurement(data: DataOverlayDataRaw): boolean {
+  return (
+    data.DataType === DataOverlayType.Length ||
+    data.DataType === DataOverlayType.Polygon ||
+    data.DataType === DataOverlayType.Angle
+  );
+}
+
+function toMeasurement(data: DataOverlayDataRaw): DataOverlayData<DataOverlayMeasurement> {
+  return parseDataOverlayData<DataOverlayMeasurement>(data);
+}
+
+function toMeasurementEvent(data: DataOverlayDataRaw): DataOverlayEvent<DataOverlayMeasurement> {
+  return parseDataOverlayEvent<DataOverlayMeasurement>(data);
+}
+
+export const useDataOverlayStore = defineStore('data-overlay', () => {
+  const state = ref<InitialDataOverlayState>(inflateInitialDataOverlayState());
+
+  const event = ref<DataOverlayDataRaw | null>(null);
+
+  const annotations = computed(() => {
+    return state.value.DataOverlay.DataOverlay.filter(isAnnotation)
+      .map(toAnnotation)
+      .map((data) => data.Data);
+  });
+
+  const annotationEvent = computed(() => {
+    const value = event.value;
+    return value && isAnnotation(value) ? toAnnotationEvent(value) : null;
+  });
+
+  const measurements = computed(() => {
+    return state.value.DataOverlay.DataOverlay.filter(isMeasurement)
+      .map(toMeasurement)
+      .map((data) => data.Data);
+  });
+
+  const measurementEvent = computed(() => {
+    const value = event.value;
+    return value && isMeasurement(value) ? toMeasurementEvent(value) : null;
+  });
+
+  function setInitialDataOverlayState(message: string): void {
+    state.value = JSON.parse(message) as InitialDataOverlayState;
+  }
+
+  function setDataOverlayState(message: string): void {
+    state.value = { Version: '1.1.0', DataOverlay: JSON.parse(message) as CurrentDataOverlayState };
+  }
+
+  function setDataOverlayEvent(message: string): void {
+    event.value = JSON.parse(message) as DataOverlayDataRaw;
+  }
+
+  return {
+    state,
+    event,
+    annotations,
+    annotationEvent,
+    measurements,
+    measurementEvent,
+    setInitialDataOverlayState,
+    setDataOverlayState,
+    setDataOverlayEvent
+  };
+});