@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/navigation/measurement/MeasurementMenu.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-menu v-model="m_open">
+    <template #activator="{ props: menu }">
+      <v-tooltip location="bottom" open-delay="1000">
+        <template #activator="{ props: tooltip }">
+          <v-btn v-bind="mergeProps(menu, tooltip)" data-testid="menu" :icon="true" size="24" variant="text">
+            <v-icon icon="more_vert" size="16" color="shark_400" />
+          </v-btn>
+        </template>
+        <span>{{ t('labels.moreActions') }}</span>
+      </v-tooltip>
+    </template>
+    <v-list id="measurement-menu">
+      <v-list-item class="px-4 py-2" data-testid="focus" prepend-icon="center_focus_strong" @click="focus">
+        <v-list-item-title>{{ t('labels.focus') }}</v-list-item-title>
+        <v-spacer />
+        <v-list-item-subtitle class="ml-4">{{ translateTooltipShortcut(SHORTCUT_TEXT.f) }}</v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item class="px-4 py-2" data-testid="update" prepend-icon="edit_square" @click="edit">
+        <v-list-item-title>{{ t('labels.edit') }}</v-list-item-title>
+        <v-spacer />
+        <v-list-item-subtitle class="ml-4">{{ translateTooltipShortcut(SHORTCUT_TEXT.e) }}</v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item class="px-4 py-2" data-testid="delete" prepend-icon="delete" @click="deleteMeasurement">
+        <v-list-item-title>{{ t('labels.delete') }}</v-list-item-title>
+        <v-spacer />
+        <v-list-item-subtitle class="ml-4">{{ translateTooltipShortcut(SHORTCUT_TEXT.del) }}</v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+  <measurement-delete-modal v-model="m_delete" :measurement="measurement" />
+</template>
+
+<script setup lang="ts">
+import { mergeProps, ref, watch } from 'vue';
+import { initialScanState } from '@/models/scanState';
+import { SlidersActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { defineHotkeys, Hotkeys, HotkeyScope, resetScope } from '@/functions/HotkeyScope';
+import { useI18n } from 'vue-i18n';
+import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayMeasurement;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+
+const m_delete = ref<boolean>(false);
+const m_open = ref<boolean>(false);
+
+watch(m_open, (isOpen: boolean) => {
+  if (isOpen) {
+    defineHotkeys(HotkeyScope.MEASUREMENT_MENU, {
+      [Hotkeys.CTRL_SHIFT_F]: async () => {
+        await focus();
+      },
+      [Hotkeys.CTRL_SHIFT_E]: async () => {
+        edit();
+      },
+      [Hotkeys.CTRL_SHIFT_DEL]: async () => {
+        await deleteMeasurement();
+      }
+    });
+  } else {
+    resetScope(HotkeyScope.MEASUREMENT_MENU);
+  }
+});
+
+async function deleteMeasurement(): Promise<void> {
+  m_delete.value = true;
+}
+
+function edit(): void {
+  // TODO: implement
+}
+
+async function focus(): Promise<void> {
+  const { X, Y, Z } = props.measurement.Points[0];
+  const { XSpacing, YSpacing, ZSpacing } = initialScanState.value;
+  await viewer3cr.sliderHandler(SlidersActions.sl09, Z / (ZSpacing || 1));
+  await viewer3cr.sliderHandler(SlidersActions.sl12, X / (XSpacing || 1));
+  await viewer3cr.sliderHandler(SlidersActions.sl15, Y / (YSpacing || 1));
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.v-list-item__content) {
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+}
+</style>

package/src/components/navigation/measurement/MeasurementPanel.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="d-flex flex-column h-100">
+    <measurement-tools class="flex-shrink-0" />
+    <v-divider class="mx-2" />
+    <measurement-data-table class="flex-grow-1" :items="items" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  items: DataOverlayMeasurement[];
+}
+
+withDefaults(defineProps<Props>(), {
+  items: () => []
+});
+</script>
+
+<style scoped lang="scss">
+:deep(.v-card) {
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.v-card-text) {
+  min-height: 0;
+}
+</style>

package/src/components/navigation/measurement/MeasurementPolygonSnackbar.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-snackbar v-model="modelValue" variant="flat">
+    <span class="shark-950 text-center">{{ t('texts.polygonToolHelp') }}</span>
+    <template #actions>
+      <v-btn class="ml-auto" color="minsk_900" variant="flat" @click="modelValue = false">
+        <span>{{ t('labels.close') }}</span>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+</script>

package/src/components/navigation/measurement/MeasurementTools.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-card v-bind="$attrs" color="background" flat tile>
+    <DrawerTitle :title="t('labels.measurementTools')" />
+    <v-card-text class="px-2 pb-4">
+      <v-tabs :model-value="activeIndex" fixed-tabs :mandatory="false">
+        <template v-for="tab in tabs">
+          <v-tooltip location="bottom" open-delay="1000">
+            <template #activator="{ props }">
+              <v-tab v-bind="props" @click="tab.click">
+                <v-icon :icon="tab.icon" />
+              </v-tab>
+            </template>
+            <span>{{ tab.tooltip }} {{ translateTooltipShortcut(tab.tooltipShortcut) }}</span>
+          </v-tooltip>
+        </template>
+      </v-tabs>
+    </v-card-text>
+  </v-card>
+  <MeasurementLengthSnackbar class="mb-3" v-model="s_length" />
+  <MeasurementPolygonSnackbar class="mb-3" v-model="s_polygon" />
+  <MeasurementAngleSnackbar class="mb-3" v-model="s_angle" />
+  <MeasurementDeleteSnackbar
+    class="mb-3"
+    v-if="measurementToDelete"
+    v-model="s_measurementDelete"
+    :measurement="measurementToDelete"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { useToolStore } from '@/stores/tool.store';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useToolGroup } from '@/composables/useToolGroup';
+
+const { t } = useI18n();
+const { measurementAngleTool, measurementLengthTool, measurementPolygonTool } = useToolStore();
+const { activeTool, activeIndex, toggleTool } = useToolGroup(
+  measurementLengthTool,
+  measurementPolygonTool,
+  measurementAngleTool
+);
+const { measurementToDelete, s_measurementDelete } = storeToRefs(useViewerStore());
+
+const s_length = ref<boolean>(false);
+const s_polygon = ref<boolean>(false);
+const s_angle = ref<boolean>(false);
+
+const tabs = computed(() => [
+  {
+    icon: 'straighten',
+    click: length,
+    tooltip: t('labels.length'),
+    tooltipShortcut: SHORTCUT_TEXT.l
+  },
+  {
+    icon: 'polyline',
+    click: polygon,
+    tooltip: t('labels.polygon'),
+    tooltipShortcut: SHORTCUT_TEXT.p
+  },
+  {
+    icon: 'square_foot',
+    click: angle,
+    tooltip: t('labels.angle'),
+    tooltipShortcut: SHORTCUT_TEXT.a
+  }
+]);
+
+onBeforeUnmount(() => {
+  activeTool.value = null;
+});
+
+function angle(): void {
+  s_angle.value = toggleTool(measurementAngleTool);
+  s_length.value = false;
+  s_polygon.value = false;
+}
+
+function length(): void {
+  s_angle.value = false;
+  s_length.value = toggleTool(measurementLengthTool);
+  s_polygon.value = false;
+}
+
+function polygon(): void {
+  s_angle.value = false;
+  s_length.value = false;
+  s_polygon.value = toggleTool(measurementPolygonTool);
+}
+
+defineExpose({
+  angle,
+  length,
+  polygon
+});
+defineOptions({ inheritAttrs: false });
+</script>

package/src/components/navigation/measurement/MeasurementVisibilityBtn.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-tooltip location="bottom" open-delay="1000">
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="mergeProps($attrs, props)"
+        data-testid="visibility"
+        :icon="true"
+        size="24"
+        variant="text"
+        @click="toggle"
+      >
+        <v-icon :icon="icon" size="16" />
+      </v-btn>
+    </template>
+    <span>{{ t('labels.toggleVisibility') }}</span>
+  </v-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed, mergeProps } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayMeasurement;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+
+const visibility = computed(() => {
+  const { Visibility2d, Visibility3d } = props.measurement;
+  return !!Visibility2d && !!Visibility3d;
+});
+
+const icon = computed(() => {
+  return visibility.value ? 'visibility' : 'visibility_off';
+});
+
+async function toggle(): Promise<void> {
+  const message = {
+    Version: '0.0.0',
+    Id: props.measurement.Id,
+    Visibility2d: !visibility.value,
+    Visibility3d: !visibility.value
+  };
+  await viewer3cr.setMeasurementVisibility({ message: [message] });
+  await viewer3cr.setMeasurementVisibility({ message: [message] });
+}
+</script>

package/src/components/navigation/measurement/__tests__/MeasurementAngleSnackbar.spec.ts

@@ -0,0 +1,34 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import MeasurementAngleSnackbar from '@/components/navigation/measurement/MeasurementAngleSnackbar.vue';
+import { VBtn, VSnackbar } from 'vuetify/components';
+
+describe('MeasurementAngleSnackbar tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(MeasurementAngleSnackbar, { drawer: true });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open MeasurementAngleSnackbar', async () => {
+    const wrapper = mount(MeasurementAngleSnackbar, { drawer: true });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should close MeasurementAngleSnackbar', async () => {
+    const wrapper = mount(MeasurementAngleSnackbar, { drawer: true });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const vbtn = snack.findComponent(VBtn);
+
+    await vbtn.trigger('click');
+    expect(snack.vm.modelValue).toBe(false);
+  });
+});

package/src/components/navigation/measurement/__tests__/MeasurementDataTable.spec.ts

@@ -0,0 +1,79 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import MeasurementDataTable from '@/components/navigation/measurement/MeasurementDataTable.vue';
+import { VBtn, VDataTableVirtual, VTextField } from 'vuetify/components';
+
+describe('MeasurementDataTable tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(MeasurementDataTable, { drawer: true });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should update search', async () => {
+    const wrapper = mount(MeasurementDataTable, { drawer: true });
+
+    await wrapper.findComponent(VTextField).setValue('123');
+    await flushPromises();
+
+    expect(wrapper.vm.search).toBe('123');
+  });
+
+  it('should clear search', async () => {
+    const wrapper = mount(MeasurementDataTable, { drawer: true });
+
+    await wrapper.findComponent(VTextField).setValue('123');
+    await flushPromises();
+
+    expect(wrapper.vm.search).toBe('123');
+    await wrapper.findComponent(VBtn).trigger('click');
+    expect(wrapper.vm.search).toBe('');
+  });
+
+  it('should update expanded', async () => {
+    const wrapper = mount(MeasurementDataTable, { drawer: true });
+
+    await wrapper.findComponent(VDataTableVirtual).setValue(['123'], 'expanded');
+    await flushPromises();
+
+    expect(wrapper.vm.expanded).toStrictEqual(['123']);
+  });
+
+  it('should check header props', async () => {
+    const wrapper = mount(MeasurementDataTable, { drawer: true });
+
+    const table = wrapper.findComponent(VDataTableVirtual);
+
+    for (const header of table.vm.headers!!) {
+      if (header.cellProps) {
+        expect((header.cellProps as any)({ item: { Id: '123' } } as any)).not.toContain('bg-minsk_100');
+      }
+      if (header.sortRaw) {
+        expect(header.sortRaw!!({ Title: '123' }, { Title: '234' })).toBe(-1);
+      }
+    }
+  });
+
+  it('should filter', async () => {
+    const wrapper = mount(MeasurementDataTable, { drawer: true });
+
+    expect(
+      wrapper.vm.filter('123', 'title-to-find', {
+        raw: {
+          Title: 'title-to-find'
+        }
+      })
+    ).toBe(true);
+  });
+
+  it('should filter', async () => {
+    const wrapper = mount(MeasurementDataTable, { drawer: true });
+
+    expect(
+      wrapper.vm.filter('123', 'title-not-to-find', {
+        raw: {
+          Title: 'title-to-find'
+        }
+      })
+    ).toBe(false);
+  });
+});

package/src/components/navigation/measurement/__tests__/MeasurementDeleteSnackbar.spec.ts

@@ -0,0 +1,51 @@
+import { flushPromises, mount } from '@vue/test-utils';
+
+import { VBtn, VSnackbar } from 'vuetify/components';
+import MeasurementDeleteSnackbar from '@/components/navigation/measurement/MeasurementDeleteSnackbar.vue';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+
+describe('MeasurementDeleteSnackbar tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(MeasurementDeleteSnackbar, {
+      props: {
+        measurement: DataOverlayPolygonFaker.random()
+      }
+    });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open MeasurementDeleteSnackbar', async () => {
+    const wrapper = mount(MeasurementDeleteSnackbar, {
+      props: {
+        measurement: DataOverlayPolygonFaker.random()
+      }
+    });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should close MeasurementDeleteSnackbar', async () => {
+    const viewer3cr = useViewer3cr();
+    const createAnnotationSpy = vi.spyOn(viewer3cr, 'createAnnotation');
+    const wrapper = mount(MeasurementDeleteSnackbar, {
+      props: {
+        measurement: DataOverlayPolygonFaker.random()
+      }
+    });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const vbtn = snack.findComponent(VBtn);
+
+    await vbtn.trigger('click');
+    expect(createAnnotationSpy).toHaveBeenCalled();
+  });
+});

package/src/components/navigation/measurement/__tests__/MeasurementInfo.spec.ts

@@ -0,0 +1,77 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import MeasurementInfo from '@/components/navigation/measurement/MeasurementInfo.vue';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import MeasurementInfoPolygon from '@/components/navigation/measurement/MeasurementInfoPolygon.vue';
+import { DataOverlayLengthFaker } from '@test/fakers/data-overlay-length.faker';
+import MeasurementInfoLength from '@/components/navigation/measurement/MeasurementInfoLength.vue';
+import { DataOverlayAngleFaker } from '@test/fakers/data-overlay-angle.faker';
+import MeasurementInfoAngle from '@/components/navigation/measurement/MeasurementInfoAngle.vue';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+describe('MeasurementInfo tests', () => {
+  it('should open MeasurementInfo', async () => {
+    const wrapper = mount(MeasurementInfo, {
+      props: { measurement: DataOverlayPolygonFaker.random(), isModal: false }
+    });
+
+    const snack = wrapper.findComponent(MeasurementInfoPolygon);
+    await flushPromises();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should open MeasurementInfo', async () => {
+    const wrapper = mount(MeasurementInfo, { props: { measurement: DataOverlayLengthFaker.random(), isModal: false } });
+
+    const snack = wrapper.findComponent(MeasurementInfoLength);
+    await flushPromises();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should open MeasurementInfo', async () => {
+    const wrapper = mount(MeasurementInfo, { props: { measurement: DataOverlayAngleFaker.random(), isModal: false } });
+
+    const snack = wrapper.findComponent(MeasurementInfoAngle);
+    await flushPromises();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+  it('should open MeasurementInfo', async () => {
+    const wrapper = mount(MeasurementInfo, {
+      props: { measurement: DataOverlayPolygonFaker.random(), isModal: true }
+    });
+
+    const snack = wrapper.findComponent(MeasurementInfoPolygon);
+    await flushPromises();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should open MeasurementInfo', async () => {
+    const wrapper = mount(MeasurementInfo, { props: { measurement: DataOverlayLengthFaker.random(), isModal: true } });
+
+    const snack = wrapper.findComponent(MeasurementInfoLength);
+    await flushPromises();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should open MeasurementInfo', async () => {
+    const wrapper = mount(MeasurementInfo, { props: { measurement: DataOverlayAngleFaker.random(), isModal: true } });
+
+    const snack = wrapper.findComponent(MeasurementInfoAngle);
+    await flushPromises();
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should open MeasurementInfo', async () => {
+    const measure = DataOverlayAngleFaker.random() as DataOverlayMeasurement;
+    delete (measure as any).SegmentAngles;
+    const wrapper = mount(MeasurementInfo, { props: { measurement: measure, isModal: true } });
+
+    const snack = wrapper.findComponent(MeasurementInfoAngle);
+    await flushPromises();
+    expect(snack.exists()).toBe(false);
+  });
+});

package/src/components/navigation/measurement/__tests__/MeasurementLengthSnackbar.spec.ts

@@ -0,0 +1,35 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import MeasurementLengthSnackbar from '@/components/navigation/measurement/MeasurementLengthSnackbar.vue';
+
+import { VBtn, VSnackbar } from 'vuetify/components';
+
+describe('MeasurementLengthSnackbar tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(MeasurementLengthSnackbar, { drawer: true });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open MeasurementLengthSnackbar', async () => {
+    const wrapper = mount(MeasurementLengthSnackbar, { drawer: true });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should close MeasurementLengthSnackbar', async () => {
+    const wrapper = mount(MeasurementLengthSnackbar, { drawer: true });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const vbtn = snack.findComponent(VBtn);
+
+    await vbtn.trigger('click');
+    expect(snack.vm.modelValue).toBe(false);
+  });
+});

package/src/components/navigation/measurement/__tests__/MeasurementPolygonSnackbar.spec.ts

@@ -0,0 +1,35 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import MeasurementPolygonSnackbar from '@/components/navigation/measurement/MeasurementPolygonSnackbar.vue';
+
+import { VBtn, VSnackbar } from 'vuetify/components';
+
+describe('MeasurementPolygonSnackbar tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(MeasurementPolygonSnackbar, { drawer: true });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open MeasurementPolygonSnackbar', async () => {
+    const wrapper = mount(MeasurementPolygonSnackbar, { drawer: true });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should close MeasurementPolygonSnackbar', async () => {
+    const wrapper = mount(MeasurementPolygonSnackbar, { drawer: true });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const vbtn = snack.findComponent(VBtn);
+
+    await vbtn.trigger('click');
+    expect(snack.vm.modelValue).toBe(false);
+  });
+});