Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix pinch zoom

This commit is contained in:
Peaceultime 2024-10-03 16:11:46 +02:00
parent 8fee6ca5f1
commit fa2d8e5035
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/canvas/CanvasRenderer.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useDrag, usePinch, useWheel } from '@vueuse/gesture';
import type { CanvasContent, CanvasNode } from '~/types/canvas'; import type { CanvasContent, CanvasNode } from '~/types/canvas';
import { clamp } from '#imports';
interface Props interface Props
{ {
@ -8,6 +10,7 @@ interface Props
const props = defineProps<Props>(); const props = defineProps<Props>();
const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5); const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
const canvas = useTemplateRef('canvas');
const reset = (_: MouseEvent) => { const reset = (_: MouseEvent) => {
zoom.value = minZoom.value; zoom.value = minZoom.value;
@ -146,22 +149,35 @@ dark:border-dark-purple
*/ */
const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => { const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => {
event?.preventDefault();
dispX.value += x / zoom.value; dispX.value += x / zoom.value;
dispY.value += y / zoom.value; dispY.value += y / zoom.value;
} }, {
const pinchHandler = ({ offset: [z] }: { offset: number[] }) => { domTarget: canvas,
zoom.value = clamp(z, minZoom.value, 3); eventOptions: { passive: false, }
} })
const wheelHandler = ({ delta: [x, y] }: { delta: number[] }) => { const pinchHandler = usePinch(({ event: Event, offset: [z] }: { event: Event, offset: number[] }) => {
event?.preventDefault();
console.log(z);
zoom.value = clamp(z / 2048, minZoom.value, 3);
}, {
domTarget: canvas,
eventOptions: { passive: false, }
})
const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => {
event?.preventDefault();
zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3); zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
} }, {
domTarget: canvas,
eventOptions: { passive: false, }
})
</script> </script>
<template> <template>
<Suspense> <Suspense>
<template #default> <template #default>
<div id="canvas" v-drag="dragHandler" v-pinch="pinchHandler" v-wheel="wheelHandler" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none" <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }"> :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden"> <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"