@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/navigation/mcad/__tests__/McadUpdateModal.spec.ts

@@ -0,0 +1,122 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import McadUpdateModal from '@/components/navigation/mcad/McadUpdateModal.vue';
+import { VCard, VOverlay } from 'vuetify/components';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
+import ShTextarea from '@/components/ShTextarea.vue';
+import { beforeEach } from '@vitest/runner';
+import ShTextField from '@/components/ShTextField.vue';
+import ColourPalette from '@/components/shared/ColourPalette.vue';
+
+describe('McadUpdateModal tests', () => {
+  const viewer3cr = useViewer3cr();
+  const mcad = DataOverlayMcadFaker.random();
+  const setMcadObjectTitleSpy = vi.spyOn(viewer3cr, 'setMcadObjectTitle');
+  const setMcadObjectColourSpy = vi.spyOn(viewer3cr, 'setMcadObjectColour');
+
+  beforeEach(() => {
+    setMcadObjectTitleSpy.mockClear();
+    setMcadObjectColourSpy.mockClear();
+  });
+
+  it('should mount', () => {
+    const props = { mcad };
+    const wrapper = mount(McadUpdateModal, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should mount open', () => {
+    const props = { mcad, modelValue: true };
+    const wrapper = mount(McadUpdateModal, { props });
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.findComponent(VCard).exists()).toBe(true);
+  });
+
+  it('should mount open then close on btn click', async () => {
+    const props = { mcad, modelValue: true };
+    const wrapper = mount(McadUpdateModal, { props });
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.findComponent(VCard).exists()).toBe(true);
+
+    const close = wrapper.findComponentByTestId('close');
+
+    await close.trigger('click');
+
+    await flushPromises();
+    expect(wrapper.vm.modal).toStrictEqual(false);
+  });
+
+  it('should mount open then close on btn click', async () => {
+    const props = { mcad, modelValue: true };
+    const wrapper = mount(McadUpdateModal, { props });
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.findComponent(VCard).exists()).toBe(true);
+
+    const close = wrapper.findComponentByTestId('close-top');
+
+    await close.trigger('click');
+
+    await flushPromises();
+    expect(wrapper.vm.modal).toStrictEqual(false);
+  });
+
+  it('should mount open edit ShTextarea', async () => {
+    const props = { mcad, modelValue: true };
+    const wrapper = mount(McadUpdateModal, { props });
+    expect(wrapper).toBeTruthy();
+    const snack = wrapper.findComponent(ShTextarea);
+    const save = wrapper.findComponentByTestId('save');
+
+    expect(snack.isVisible()).toBe(true);
+
+    await snack.setValue('123');
+
+    await save.trigger('click');
+
+    expect(setMcadObjectColourSpy).toHaveBeenCalled();
+    expect(setMcadObjectTitleSpy).toHaveBeenCalled();
+  });
+
+  it('should mount open edit ShTextarea', async () => {
+    const props = { mcad, modelValue: true };
+    const wrapper = mount(McadUpdateModal, { props });
+    expect(wrapper).toBeTruthy();
+    const snack = wrapper.findComponent(ShTextField);
+    const save = wrapper.findComponentByTestId('save');
+
+    expect(snack.isVisible()).toBe(true);
+
+    await snack.setValue('123');
+
+    await save.trigger('click');
+
+    expect(setMcadObjectColourSpy).toHaveBeenCalled();
+    expect(setMcadObjectTitleSpy).toHaveBeenCalled();
+  });
+
+  it('should mount open edit ShTextarea', async () => {
+    const props = { mcad, modelValue: true };
+    const wrapper = mount(McadUpdateModal, { props });
+    expect(wrapper).toBeTruthy();
+    const colourPalette = wrapper.findComponent(ColourPalette);
+    expect(colourPalette.exists()).toBeTruthy();
+
+    await colourPalette.setValue('#000000');
+    const save = wrapper.findComponentByTestId('save');
+
+    await save.trigger('click');
+
+    expect(setMcadObjectColourSpy).toHaveBeenCalled();
+    expect(setMcadObjectTitleSpy).toHaveBeenCalled();
+  });
+
+  it('should Update overlay', async () => {
+    const props = { mcad, modelValue: false };
+    const wrapper = mount(McadUpdateModal, { props });
+    const overlay = wrapper.findComponent(VOverlay);
+
+    await overlay.setValue(true);
+
+    expect(overlay.isVisible()).toBeTruthy();
+  });
+});

package/src/components/navigation/mcad/__tests__/McadVisibilityBtn.spec.ts

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import { VBtn } from 'vuetify/components';
+import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import McadVisibilityBtn from '@/components/navigation/mcad/McadVisibilityBtn.vue';
+import { deepClone } from '@vitest/utils';
+
+describe('McadVisibilityBtn tests', () => {
+  const viewer3cr = useViewer3cr();
+  const mcad = DataOverlayMcadFaker.random();
+  const props = { mcad };
+  it('should mount', () => {
+    const wrapper = mount(McadVisibilityBtn, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should toggle', async () => {
+    const spy = vi.spyOn(viewer3cr, 'setMcadObjectVisibility');
+    const wrapper = mount(McadVisibilityBtn, { props });
+    const button = wrapper.findComponent(VBtn);
+
+    await button.trigger('click');
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should be not visible', async () => {
+    const propsLocal = deepClone(props);
+
+    propsLocal.mcad.Visibility = false;
+    const wrapper = mount(McadVisibilityBtn, { props: propsLocal });
+    const button = wrapper.findComponent(VBtn);
+
+    expect(button.html()).toContain('visibility_off');
+  });
+
+  it('should be visible', async () => {
+    const propsLocal = deepClone(props);
+
+    propsLocal.mcad.Visibility = true;
+    const wrapper = mount(McadVisibilityBtn, { props: propsLocal });
+    const button = wrapper.findComponent(VBtn);
+
+    expect(button.html()).toContain('visibility');
+  });
+});

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

@@ -0,0 +1,18 @@
+<template>
+  <v-snackbar v-model="modelValue" variant="flat">
+    <span class="shark-950 text-center">{{ t('texts.angleToolHelp') }}</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/MeasurementDataTable.vue

@@ -0,0 +1,162 @@
+<template>
+  <v-card color="background" flat tile>
+    <DrawerTitle :title="t('labels.measurementTools')" />
+    <v-card-text class="d-flex flex-column px-2 pb-4 pt-2">
+      <div class="new-style pb-2">
+        <v-text-field
+          v-model="search"
+          density="compact"
+          prepend-inner-icon="search"
+          :placeholder="t('fields.search.placeholder')"
+          variant="outlined"
+          hide-details
+        >
+          <template #append-inner>
+            <v-btn variant="text" color="rgba(146, 147, 158, 1)" size="" icon="close" @click="search = ''" />
+          </template>
+        </v-text-field>
+      </div>
+      <v-sheet class="overflow-auto" elevation="2">
+        <v-data-table-virtual
+          v-model:expanded="expanded"
+          :custom-filter="filter"
+          density="compact"
+          :headers="headers"
+          hide-default-header
+          :items="items"
+          item-value="Id"
+          must-sort
+          :search="search"
+          :sort-by="sortBy"
+        >
+          <template #[`item.expand`]="{ internalItem, isExpanded, toggleExpand }">
+            <v-btn
+              variant="text"
+              size="24"
+              :icon="isExpanded(internalItem) ? '$expand' : 'chevron_forward'"
+              @click="toggleExpand(internalItem)"
+              color="shark_400"
+            />
+          </template>
+          <template #[`item.title`]="{ item }">
+            <div class="d-flex align-center">
+              <measurement-icon :measurement="item" class="ml-1" />
+              <span class="ml-2 text-truncate text-caption">{{ item.Title }}</span>
+            </div>
+          </template>
+          <template #[`item.actions`]="{ item }">
+            <div>
+              <measurement-menu :measurement="item" />
+            </div>
+          </template>
+          <template #[`item.visibility`]="{ isExpanded, internalItem }">
+            <measurement-visibility-btn
+              v-if="isExpanded(internalItem)"
+              :measurement="internalItem.raw"
+              color="shark_400"
+            />
+          </template>
+          <template #expanded-row="{ columns, item }">
+            <tr>
+              <td class="px-0" :colspan="columns.length">
+                <measurement-info :measurement="item" :is-modal="false" />
+              </td>
+            </tr>
+          </template>
+        </v-data-table-virtual>
+      </v-sheet>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  items: DataOverlayMeasurement[];
+}
+
+withDefaults(defineProps<Props>(), {
+  items: () => []
+});
+
+const { t } = useI18n();
+
+const search = ref<string>('');
+const expanded = ref<string[]>([]);
+const sortBy = ref([
+  {
+    key: 'title',
+    order: 'asc' as 'asc' | 'desc'
+  }
+]);
+
+const headers = ref([
+  {
+    key: 'expand',
+    width: '24px',
+    sortable: false,
+    cellProps: (data: any) => ({
+      class: ['px-0', 'pl-1', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    })
+  },
+
+  {
+    key: 'title',
+    sortable: true,
+    cellProps: (data: any) => ({
+      class: ['px-1', 'overflow', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    }),
+    sortRaw: (a: DataOverlayMeasurement, b: DataOverlayMeasurement) => {
+      return a.Title.localeCompare(b.Title);
+    }
+  },
+  {
+    key: 'visibility',
+    width: '24px',
+    sortable: false,
+    cellProps: (data: any) => ({
+      class: ['px-0', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    })
+  },
+  {
+    key: 'actions',
+    width: '24px',
+    sortable: false,
+    cellProps: (data: any) => ({
+      class: ['px-0', 'pr-1', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    })
+  }
+]);
+
+function isExpanded(id: string): boolean {
+  return expanded.value.includes(id);
+}
+
+function filter(value: string, query: string, item?: any): boolean {
+  const measurement = item.raw as DataOverlayMeasurement;
+  return measurement.Title.toLowerCase().includes(query.toLowerCase());
+}
+
+defineExpose({
+  search,
+  expanded,
+  filter
+});
+</script>
+
+<style scoped lang="scss">
+.v-data-table {
+  height: 100%;
+  width: 100%;
+}
+
+:deep(.overflow) {
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+  <v-dialog v-model="modal" width="535">
+    <v-card>
+      <v-card-title class="px-6 py-2 text-h3">
+        <span>{{ t('labels.measurementDelete') }}</span>
+      </v-card-title>
+      <v-card-text class="px-6 pt-0 pb-4" style="font-size: 14px; line-height: 20px; font-weight: 400">
+        <span>{{ t('texts.measurementDeleteConfirm') }}</span>
+      </v-card-text>
+      <v-card-actions class="px-6 pt-0 pb-4">
+        <v-spacer />
+        <v-btn variant="plain" @click="modal = false">
+          <span>{{ t('labels.cancel') }}</span>
+        </v-btn>
+        <v-btn color="amaranth_600" variant="flat" @click="deleteAnnotation">
+          <span>{{ t('labels.confirm') }}</span>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useViewerStore } from '@/stores/viewer.store';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayMeasurement;
+}
+
+const props = defineProps<Props>();
+
+const viewer3cr = useViewer3cr();
+const { t } = useI18n();
+const { s_measurementDelete, measurementToDelete } = storeToRefs(useViewerStore());
+
+const modal = defineModel<boolean>({ default: false });
+
+async function deleteAnnotation(): Promise<void> {
+  const message = { Version: '0.0.0', Id: props.measurement!.Id };
+  await viewer3cr.removeAnnotation({ message });
+  s_measurementDelete.value = true;
+  measurementToDelete.value = props.measurement;
+  modal.value = false;
+}
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <v-snackbar v-model="modelValue" variant="flat">
+    <v-icon class="pr-3 shark-400" icon="error" />
+    <span class="shark-950">{{ t('texts.measurementDeleted') }}</span>
+    <template #actions>
+      <v-btn class="ml-auto px-4 my-1" color="minsk_900" variant="flat" @click="undo">
+        <span>{{ t('labels.undo') }}</span>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { DataOverlayType } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { DataOverlay } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlay;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+
+const modelValue = defineModel<boolean>({ default: false });
+
+async function undo(): Promise<void> {
+  const message = {
+    Version: '0.0.0',
+    Id: 'test',
+    Data: JSON.stringify(props.measurement),
+    DataType: DataOverlayType.Length // TODO: determine based on measurement
+  };
+
+  await viewer3cr.createAnnotation({ message: [message] });
+}
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <v-icon :icon="icon" :color="color" size="20" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
+import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
+import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayMeasurement;
+}
+
+const props = defineProps<Props>();
+
+const color = computed(() => {
+  if (isDataOverlayLength(props.measurement)) {
+    return 'green';
+  } else if (isDataOverlayPolygon(props.measurement)) {
+    return 'red';
+  } else if (isDataOverlayAngle(props.measurement)) {
+    return 'blue';
+  } else {
+    return 'white';
+  }
+});
+
+const icon = computed(() => {
+  if (isDataOverlayLength(props.measurement)) {
+    return 'filled:straighten';
+  } else if (isDataOverlayPolygon(props.measurement)) {
+    return 'filled:polyline';
+  } else if (isDataOverlayAngle(props.measurement)) {
+    return 'filled:square_foot';
+  } else {
+    return 'question_mark';
+  }
+});
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <template v-if="isDataOverlayLength(measurement)">
+    <measurement-info-length :measurement="measurement" :is-modal="isModal" />
+  </template>
+  <template v-else-if="isDataOverlayPolygon(measurement)">
+    <measurement-info-polygon :measurement="measurement" :is-modal="isModal" />
+  </template>
+  <template v-else-if="isDataOverlayAngle(measurement)">
+    <measurement-info-angle :measurement="measurement" :is-modal="isModal" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
+import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
+import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayMeasurement;
+  isModal: boolean;
+}
+
+defineProps<Props>();
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <v-row class="flex-column" :class="{ isModal }" no-gutters>
+    <v-row
+      class="mt-3 mb-5 pl-4"
+      :class="idx === 0 ? 'pa-1' : 'px-1 pb-1'"
+      no-gutters
+      v-for="(angle, idx) in measurement.SegmentAngles"
+    >
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.angle') }}&nbsp;</span>
+        <span>{{ idx + 1 }}</span>
+      </v-col>
+      <v-col class="shark-600 text-mono text-right text-xs-regular pr-4">
+        <span>{{ Math.round(angle.Acute * 100) / 100 }}</span>
+        <span>{{ measurement.Units }}</span>
+        <span>/</span>
+        <span>{{ Math.round(angle.Reflex * 100) / 100 }}</span>
+        <span>{{ measurement.Units }}</span>
+      </v-col>
+    </v-row>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { DataOverlayAngle } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayAngle;
+  isModal: boolean;
+}
+
+defineProps<Props>();
+
+const { t } = useI18n();
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <v-row class="flex-column flex-nowrap" :class="{ isModal }" no-gutters>
+    <v-row class="pa-1 mt-3 mb-3 pl-4" no-gutters v-for="(segment, idx) in measurement.SegmentLengths">
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.segment') }}&nbsp;</span>
+        <span>{{ idx + 1 }}</span>
+      </v-col>
+      <v-col class="shark-600 text-mono text-right text-xs-regular pr-4">
+        <span>{{ segment }}</span>
+        <span>{{ measurement.Units }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="flex-nowrap px-1 pl-4 pb-3" no-gutters>
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.totalLength') }}</span>
+      </v-col>
+      <v-col class="shark-600 text-mono text-right text-xs-regular pr-4">
+        <span>{{ measurement.TotalLength }}</span>
+        <span>{{ measurement.Units }}</span>
+      </v-col>
+    </v-row>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { DataOverlayLength } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayLength;
+  isModal: boolean;
+}
+
+defineProps<Props>();
+
+const { t } = useI18n();
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <v-row class="flex-column flex-nowrap" :class="{ isModal }" no-gutters>
+    <v-row class="pa-1 pt-3 pb-3 pl-4" no-gutters>
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.area') }}</span>
+      </v-col>
+      <v-col class="shark-600 text-mono text-right text-xs-regular pr-4">
+        <span>{{ measurement.Area }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="pa-1 pl-4 pb-3 pt-0" no-gutters>
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.perimeter') }}</span>
+      </v-col>
+      <v-col class="shark-950 text-mono text-right text-xs-regular pr-4">
+        <span>{{ measurement.Perimeter }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="px-1 pb-1 pb-3 pl-4 pt-0" no-gutters>
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.averageHu') }}</span>
+      </v-col>
+      <v-col class="shark-600 text-mono text-right text-xs-regular pr-4">
+        <span>{{ measurement.AverageHU }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="px-1 pt-0 pb-3 pl-4" no-gutters>
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.lowestHu') }}</span>
+      </v-col>
+      <v-col class="shark-600 text-mono text-right text-xs-regular pr-4">
+        <span>{{ measurement.LowestHU }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="px-1 pb-5 pt-0 pl-4" no-gutters>
+      <v-col class="shark-950 text-xs-semibold">
+        <span>{{ t('labels.highestHu') }}</span>
+      </v-col>
+      <v-col class="shark-600 text-mono text-right text-xs-regular pr-4">
+        <span>{{ measurement.HighestHU }}</span>
+      </v-col>
+    </v-row>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { DataOverlayPolygon } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayPolygon;
+  isModal: boolean;
+}
+
+defineProps<Props>();
+
+const { t } = useI18n();
+</script>

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

@@ -0,0 +1,18 @@
+<template>
+  <v-snackbar v-model="modelValue" variant="flat">
+    <span class="text-center" style="color: #1d1d20">{{ t('texts.lengthToolHelp') }}</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>