@3cr/viewer-browser 0.0.248 → 0.0.293

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

@@ -0,0 +1,87 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import MeasurementTools from '@/components/navigation/measurement/MeasurementTools.vue';
+import MeasurementLengthSnackbar from '@/components/navigation/measurement/MeasurementLengthSnackbar.vue';
+import MeasurementPolygonSnackbar from '@/components/navigation/measurement/MeasurementPolygonSnackbar.vue';
+import MeasurementAngleSnackbar from '@/components/navigation/measurement/MeasurementAngleSnackbar.vue';
+import MeasurementDeleteSnackbar from '@/components/navigation/measurement/MeasurementDeleteSnackbar.vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+
+describe('MeasurementDataTable tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(MeasurementTools, { drawer: true });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should MeasurementLengthSnackbar', async () => {
+    const wrapper = mount(MeasurementTools, { drawer: true });
+
+    const snack = wrapper.findComponent(MeasurementLengthSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should MeasurementPolygonSnackbar', async () => {
+    const wrapper = mount(MeasurementTools, { drawer: true });
+
+    const snack = wrapper.findComponent(MeasurementPolygonSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should MeasurementAngleSnackbar', async () => {
+    const wrapper = mount(MeasurementTools, { drawer: true });
+
+    const snack = wrapper.findComponent(MeasurementAngleSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should MeasurementDeleteSnackbar', async () => {
+    const { measurementToDelete } = storeToRefs(useViewerStore());
+    measurementToDelete.value = {} as any;
+    const wrapper = mount(MeasurementTools, { drawer: true });
+
+    const snack = wrapper.findComponent(MeasurementDeleteSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should angle', async () => {
+    const { measurementToDelete } = storeToRefs(useViewerStore());
+    measurementToDelete.value = {} as any;
+    const wrapper = mount(MeasurementTools, { drawer: true });
+    const snack = wrapper.findComponent(MeasurementAngleSnackbar);
+
+    wrapper.vm.angle();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should length', async () => {
+    const { measurementToDelete } = storeToRefs(useViewerStore());
+    measurementToDelete.value = {} as any;
+    const wrapper = mount(MeasurementTools, { drawer: true });
+    const snack = wrapper.findComponent(MeasurementLengthSnackbar);
+
+    wrapper.vm.length();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should polygon', async () => {
+    const { measurementToDelete } = storeToRefs(useViewerStore());
+    measurementToDelete.value = {} as any;
+    const wrapper = mount(MeasurementTools, { drawer: true });
+    const snack = wrapper.findComponent(MeasurementPolygonSnackbar);
+
+    wrapper.vm.polygon();
+
+    expect(snack.isVisible()).toBe(true);
+  });
+});

package/src/components/shared/ColourPalette.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="d-flex ga-2 flex-nowrap overflow-x-auto">
+    <template v-for="colour in colours">
+      <v-btn rounded :size="size" variant="text" :style="{ 'background-color': colour }" @click="modelValue = colour">
+        <v-icon v-if="matches(colour)" color="white" icon="check" />
+      </v-btn>
+    </template>
+    <v-menu :close-on-content-click="false">
+      <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="size"
+              variant="outlined"
+              style="color: gray"
+            >
+              <v-icon icon="colorize" size="16" color="shark_400" />
+            </v-btn>
+          </template>
+          <span>{{ t('labels.customColour') }}</span>
+        </v-tooltip>
+      </template>
+      <v-color-picker
+        v-model="modelValue"
+        mode="rgba"
+        variant="outlined"
+        class="new-style pb-0"
+        style="background-color: white"
+      />
+    </v-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { mergeProps } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+interface Props {
+  colours?: string[];
+  size?: number | string;
+}
+
+withDefaults(defineProps<Props>(), {
+  colours: () => [
+    '#C9D7FC',
+    '#8599F4',
+    '#4C4FDF',
+    '#34359F',
+    '#C3DEF4',
+    '#50A5DE',
+    '#1C6EAD',
+    '#184B74',
+    '#F8D3D4',
+    '#EB818A',
+    '#CA344A',
+    '#8E2338'
+  ],
+  size: 24
+});
+
+const { t } = useI18n();
+
+const modelValue = defineModel<string>({ default: '' });
+
+function matches(value: string): boolean {
+  return modelValue.value.toLowerCase() === value.toLowerCase();
+}
+</script>

package/src/components/shared/DoubleSliderSelector.vue

@@ -2,12 +2,13 @@
   <v-row class="flex-column" no-gutters>
     <v-row v-if="label" no-gutters justify="start">
       <v-col>
-        <span class="text-caption">{{ label }}</span>
+        <span class="pl-0 pb-1 sh-label">{{ label }}</span>
       </v-col>
     </v-row>
-    <v-row class="py-2" no-gutters>
-      <v-col cols="3">
+    <v-row class="py-2 new-style" no-gutters>
+      <v-col cols="6">
         <v-text-field
+          class="mr-1"
           data-testid="lower"
           :model-value="sliderState[0]"
           @update:model-value="input[0] = parseInt($event)"
@@ -19,9 +20,9 @@
           variant="outlined"
         />
       </v-col>
-      <v-spacer />
-      <v-col cols="3">
+      <v-col cols="6">
         <v-text-field
+          class="ml-1"
           data-testid="upper"
           :model-value="sliderState[1]"
           @update:model-value="input[1] = parseInt($event)"
@@ -34,24 +35,31 @@
         />
       </v-col>
     </v-row>
-    <v-row class="pb-4" no-gutters>
+    <v-row class="pb-0" no-gutters>
       <v-range-slider
+        ref="slider"
+        :style="`--thumbBackgroundColor: ${bgColor}`"
         v-model="sliderState"
         data-testid="slider"
         :loading="loading"
         :thumb-label="showThumb"
-        thumb-color="blue"
+        thumb-size="16"
+        thumb-color="primary"
         :min="min"
         :max="max"
+        :step="10"
         hide-details
-      />
+        :strict="true"
+      >
+      </v-range-slider>
     </v-row>
   </v-row>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, unref, watch } from 'vue';
+import { computed, ref, toRefs, unref, watch } from 'vue';
 import { clamp } from '@/functions/clamp';
+import { VRangeSlider } from 'vuetify/components';
 
 interface Props {
   modelValue?: [number, number];
@@ -59,6 +67,7 @@ interface Props {
   label?: string;
   min?: number;
   max?: number;
+  bgColor?: string;
 }
 
 type Emits = {
@@ -70,15 +79,22 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   label: '',
   min: -99999,
-  max: 99999
+  max: 99999,
+  bgColor: 'rgb(var(--v-theme-background))'
 });
 
+const { label } = toRefs(props);
+
 const emit = defineEmits<Emits>();
 
 const _modelValue = ref<[number, number]>(props.modelValue);
 const input = ref<[number, number]>(props.modelValue);
 const showThumb = ref<'always' | boolean>(false);
 const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
+const slider = ref<VRangeSlider>();
+
+const rightOffset = ref<string>('');
+const leftOffset = ref<string>('');
 
 const sliderState = computed({
   get(): [number, number] {
@@ -86,7 +102,7 @@ const sliderState = computed({
   },
   set(value: [number, number]): void {
     _modelValue.value = value;
-    emit('update:modelValue', value);
+    emit('update:modelValue', _modelValue.value);
   }
 });
 
@@ -94,6 +110,7 @@ watch(
   () => props.modelValue,
   (value: [number, number]) => {
     _modelValue.value = value;
+    applyRangeSliderLabelBoundaries();
   }
 );
 
@@ -105,6 +122,30 @@ watch([() => sliderState.value[0], () => sliderState.value[1]], () => {
   }, 1000);
 });
 
+function applyRangeSliderLabelBoundaries(): void {
+  const thumbs = slider.value?.$el.getElementsByClassName('v-slider-thumb') as any;
+
+  if (thumbs[0]['offsetLeft'] < 10) {
+    const offset = -50 + (30 - thumbs[0]['offsetLeft']);
+    leftOffset.value = 'translateX(' + offset + '%)';
+  } else if (thumbs[0]['offsetLeft'] > 220) {
+    const offset = -50 - (40 - (240 - thumbs[0]['offsetLeft']));
+    leftOffset.value = 'translateX(' + offset + '%)';
+  } else {
+    leftOffset.value = 'translateX(-50%)';
+  }
+
+  if (thumbs[1]['offsetLeft'] < 10) {
+    const offset = -50 + (30 - thumbs[0]['offsetLeft']);
+    rightOffset.value = 'translateX(' + offset + '%)';
+  } else if (thumbs[1]['offsetLeft'] > 220) {
+    const offset = -50 - (40 - (240 - thumbs[1]['offsetLeft']));
+    rightOffset.value = 'translateX(' + offset + '%)';
+  } else {
+    rightOffset.value = 'translateX(-50%)';
+  }
+}
+
 function onUpdateLower(): void {
   const higher = sliderState.value[1];
   const lower = clamp(input.value[0], props.min, higher);
@@ -117,26 +158,23 @@ function onUpdateHigher(): void {
   sliderState.value = [lower, higher];
 }
 
-defineExpose({ sliderState });
+defineExpose({ sliderState, applyRangeSliderLabelBoundaries, leftOffset, rightOffset });
 </script>
 
 <style scoped lang="scss">
-:deep(input) {
-  font-size: 14px;
-  padding: 4px 8px;
-  min-height: 0;
-}
-
-:deep(.v-slider-thumb__label-container) {
-  transform: translate(100%, 18px) rotate(180deg) !important;
-}
-
-:deep(.v-slider-thumb__label) {
-  padding: 2px 4px;
-  height: fit-content;
-}
+:deep(.v-slider-thumb) {
+  .v-slider-thumb__label {
+    transition: none !important;
+    height: fit-content;
+    transform: v-bind(leftOffset) !important;
+  }
 
-:deep(.v-slider-thumb__label div) {
-  transform: rotate(180deg) !important;
+  ~ .v-slider-thumb {
+    .v-slider-thumb__label {
+      transition: none !important;
+      height: fit-content;
+      transform: v-bind(rightOffset) !important;
+    }
+  }
 }
 </style>

package/src/components/shared/HorizontalSliderSelector.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-slider
+    :style="`--thumbBackgroundColor: ${bgColor}`"
+    v-model="sliderValue"
+    :thumb-label="showThumb"
+    :min="min"
+    :max="max"
+    direction="horizontal"
+    thumb-color="blue"
+    :thumb-size="16"
+    hide-details
+    data-testid="slider"
+  >
+    <template #append>
+      <div class="text-white py-1 my-0 text-center" data-testid="max-value">{{ max }}</div>
+    </template>
+    <template #prepend>
+      <div class="text-white py-1 my-0 text-center" data-testid="min-value">{{ min }}</div>
+    </template>
+    <template v-slot:thumb-label="{ modelValue }">
+      <span>{{ Math.floor(modelValue) }}</span>
+    </template>
+  </v-slider>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, unref, watch } from 'vue';
+
+export interface Props {
+  value: number;
+  loading?: boolean;
+  label?: string;
+  lower?: number;
+  upper?: number;
+  min?: number;
+  max?: number;
+  bgColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  loading: false,
+  label: 'Test',
+  lower: 0,
+  upper: 100,
+  min: -99999,
+  max: 99999,
+  bgColor: '#F7F7F8'
+});
+
+const emit = defineEmits<{
+  'update:value': [number];
+}>();
+
+const showThumb = ref<'always' | boolean>(true);
+const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
+
+const sliderValue = computed({
+  get() {
+    return Math.floor(props.value);
+  },
+  set(value: number) {
+    emit('update:value', Math.floor(value));
+  }
+});
+
+watch(
+  () => sliderValue.value,
+  () => {
+    clearTimeout(unref(showThumbTimeout));
+    showThumb.value = 'always';
+    showThumbTimeout.value = setTimeout(() => {
+      showThumb.value = false;
+    }, 1000);
+  }
+);
+defineExpose({
+  showThumb
+});
+</script>

package/src/components/shared/KeyboardShortcuts.vue

@@ -0,0 +1,184 @@
+<template>
+  <v-dialog data-testid="dialog" class="justify-end" v-model="modelValue" max-width="453">
+    <v-card class="position-relative pb-0">
+      <v-card-title class="px-4 pb-2 pt-4">
+        <span>{{ t('labels.keyboardShortcuts') }}</span>
+        <v-btn
+          data-testid="closeBtn"
+          variant="text"
+          size="default"
+          icon="close"
+          color="shark_400"
+          @click="modelValue = false"
+          class="annotation-close-button position-absolute"
+          style="top: 0; right: 0"
+        />
+      </v-card-title>
+      <v-divider />
+      <v-card-text class="px-3 pb-0">
+        <div class="new-style mb-2 pl-1 pr-4">
+          <v-text-field
+            data-testid="searchBox"
+            v-model="search"
+            density="compact"
+            prepend-inner-icon="search"
+            :placeholder="t('fields.search.placeholder')"
+            variant="outlined"
+          >
+            <template #append-inner>
+              <!--              Note: Coverage engine crashing with stackoverflow when triggered -->
+              <!--              /* v8 ignore start */-->
+              <v-btn variant="text" size="24" icon="close" data-testid="close-btn-search" @click="endSearch" />
+              <!--              /* v8 ignore end */-->
+            </template>
+          </v-text-field>
+        </div>
+      </v-card-text>
+      <v-card-text class="pt-0 px-4 pb-4">
+        <div v-for="section in filteredItems">
+          <div class="title-text pt-0 pb-3">{{ section.title }}</div>
+          <ul>
+            <li
+              v-for="(item, index) in section.items"
+              :key="index"
+              class="d-flex justify-between align-items-center py-2"
+            >
+              <span class="list-titles">{{ item.title }}</span>
+              <div class="d-flex ml-auto">
+                <div
+                  :class="['key-box', { 'plus-sign': key === '+' }]"
+                  class="text-center"
+                  v-for="(key, keyIndex) in item.keys"
+                  :key="keyIndex"
+                >
+                  {{ key }}
+                </div>
+              </div>
+            </li>
+          </ul>
+          <v-divider class="mt-2 mb-2" />
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
+import * as _ from 'lodash';
+
+const { t } = useI18n();
+
+const search = ref('');
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const itemsNew = computed(() => [
+  {
+    title: t('labels.tools'),
+    items: [
+      { title: t('labels.display'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altD)) },
+      { title: t('labels.annotation'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altA)) },
+      { title: t('labels.measurementTools'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altM)) },
+      { title: t('labels.mcad'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altE)) },
+      { title: t('labels.share'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.s)) },
+      { title: t('labels.saveToCloud'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.c)) },
+      { title: t('labels.download'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.d)) }
+    ]
+  },
+  {
+    title: t('labels.medicalImageTooling'),
+    items: [
+      { title: t('labels.resetView'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.r)) },
+      { title: t('labels.pan'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.p)) },
+      { title: t('labels.zoomIn'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.plus)) },
+      { title: t('labels.zoomOut'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.minus)) },
+      { title: t('labels.rotateView'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.r)) },
+      { title: t('labels.flipHorizontally'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.h)) },
+      { title: t('labels.flipVertically'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.v)) }
+    ]
+  }
+]);
+
+function endSearch() {
+  search.value = '';
+}
+
+const filteredItems = computed(() => {
+  if (!search.value) return itemsNew.value;
+
+  const lowerSearch = search.value.toLowerCase();
+  return itemsNew.value
+    .map((section) => ({
+      title: section.title,
+      items: section.items.filter((item) => item.title.toLowerCase().includes(lowerSearch))
+    }))
+    .filter((section) => section.items.length > 0);
+});
+
+function explodeShortcut(shortcut: string): string[] {
+  return _.flatMap(shortcut.split('+'), (value: any, index: any, array: any) =>
+    array.length - 1 !== index // check for the last item
+      ? [value, '+']
+      : value
+  ).map((key) => key.replace('Plus', '+').replace('Minus', '-'));
+}
+</script>
+
+<style lang="scss" scoped>
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.list-titles {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: #1d1d20;
+}
+
+.title-text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  color: #5e5e6b;
+}
+
+.key-box:not(.plus-sign) {
+  display: inline-block;
+  flex-direction: column;
+  border-radius: 4px;
+  padding: 0 8px;
+  margin: 2px 2px;
+  min-width: 24px !important;
+  height: 24px !important;
+  border: 1px solid #d9d9de;
+  background-color: #f7f7f8;
+  box-shadow: 0px 1px 0px 0px #d9d9de;
+  //div {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  //}
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.plus-sign {
+  background-color: #ffffff !important;
+  border: none !important;
+  font-weight: 500 !important;
+  font-size: 12px;
+  line-height: 26px;
+  padding-left: 4px !important;
+  padding-right: 4px !important;
+}
+</style>