diff --git a/components/canvas/Canvas.vue b/components/canvas/Canvas.vue index fbb3caf..8a883ff 100644 --- a/components/canvas/Canvas.vue +++ b/components/canvas/Canvas.vue @@ -150,24 +150,26 @@ dark:border-dark-purple */ -const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { - event?.preventDefault(); +const pinchHandler = usePinch(({ event, offset: [z] }: { event: Event, offset: number[] }) => { + event.stopPropagation(); + event.preventDefault(); + zoom.value = clamp(z / 2048, minZoom.value, 3); +}, { + domTarget: canvas, + eventOptions: { passive: false, } +}) +const dragHandler = useDrag(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { + event.stopPropagation(); + event.preventDefault(); dispX.value += x / zoom.value; dispY.value += y / zoom.value; }, { domTarget: canvas, eventOptions: { passive: false, } }) -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(); +const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { + event.stopPropagation(); + event.preventDefault(); zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3); }, { domTarget: canvas, @@ -180,7 +182,7 @@ const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event,