Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 1x 2x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 3x 1x 1x 1x 1x | <template>
<v-menu
data-testid="menu"
v-model="menuState"
location="top"
:close-on-content-click="false"
>
<template #activator="{ props: menu }">
<Action
v-bind="menu"
:text="text"
icon="360"
:variant="variant"
/>
</template>
<v-card>
<v-card-title class="text-body-1">
<span>{{ text }}</span>
</v-card-title>
<v-card-text>
<v-text-field
data-testid="angle"
v-model="angle"
type="number"
variant="outlined"
suffix="deg"
hide-details
/>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
data-testid="rotate"
color="primary"
@click="rotate"
>
<span>{{ t('labels.rotate') }}</span>
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { RotationValue, ScanView } from '@3cr/types-ts';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { useI18n } from 'vue-i18n';
import { useViewName } from '@/composables/useViewName';
interface Props {
view: ScanView;
variant?: 'button' | 'menu-item';
modelValue?: boolean;
}
type Emits = {
'update:modelValue': [value: boolean];
'update:modal': [value: boolean];
};
const props = withDefaults(defineProps<Props>(), {
variant: 'button',
});
const emit = defineEmits<Emits>();
const { t } = useI18n();
const { name } = useViewName(props.view);
const viewer3cr = useViewer3cr();
const menu = ref<boolean>(false);
const angle = ref<number>(0);
const text = computed(() => {
return t('labels.rotateView', { view: name.value });
});
const menuState = computed({
get(): boolean {
return menu.value;
},
set(value: boolean): void {
menu.value = value;
emit('update:modal', value);
},
});
async function rotate(): Promise<void> {
const message: RotationValue = {
Version: '0.0.0',
View: props.view,
Angle: angle.value,
};
await viewer3cr.rotateByDeg({ message });
}
</script>
|