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 | 1x 5x 1x 1x 1x 1x 1x 1x 1x | <template>
<Action
:color="enabled ? 'blue-lighten-1' : 'white'"
icon="zoom_in"
:text="t('labels.zoom')"
:variant="variant"
@click="toggleZoom"
/>
</template>
<script setup lang="ts">
import { MovementData, ScanView } from '@3cr/types-ts';
import { ref, toRefs } from 'vue';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { useI18n } from 'vue-i18n';
import { useEventListener } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { useViewerStore } from '@/stores/viewer.store';
const SENSITIVITY = 0.25;
interface Props {
view: ScanView;
target?: EventTarget;
variant?: 'button' | 'menu-item';
}
const props = withDefaults(defineProps<Props>(), {
variant: 'button',
});
const { t } = useI18n();
const viewer3cr = useViewer3cr();
const { enableMouse } = storeToRefs(useViewerStore());
const { target } = toRefs(props);
useEventListener(target, 'mousedown', onMouseDown);
const enabled = ref<boolean>(false);
function toggleZoom(): void {
enabled.value = !enabled.value;
}
async function zoomIn(delta: number): Promise<void> {
const message: MovementData = {
Version: '0.0.0',
View: props.view,
Movement: delta,
};
await viewer3cr.zoomIn({ message });
}
function onMouseDown(event: MouseEvent): void {
if (!enabled.value || event.button !== 0) {
return;
}
let originY = event.clientY;
const onMouseMove = async (event: MouseEvent) => {
const offsetY = event.clientY;
const delta = (originY - offsetY) * SENSITIVITY;
originY = offsetY;
await zoomIn(delta);
};
const onMouseUp = () => {
globalThis.removeEventListener('mousemove', onMouseMove);
globalThis.removeEventListener('mouseup', onMouseUp);
enableMouse.value = true;
};
globalThis.addEventListener('mousemove', onMouseMove);
globalThis.addEventListener('mouseup', onMouseUp);
enableMouse.value = false;
}
</script>
|