Set zoom scale bounds based on camera zoom

This commit is contained in:
Steve Ruiz 2021-10-06 13:03:45 +01:00
parent 5c9e148ad8
commit 798bae28ca
3 changed files with 10 additions and 5 deletions

View file

@ -14,6 +14,7 @@ import { ErrorBoundary } from '+components/error-boundary'
import { Brush } from '+components/brush'
import { Page } from '+components/page'
import { useResizeObserver } from '+hooks/useResizeObserver'
import { inputs } from '+inputs'
function resetError() {
void null
@ -42,9 +43,11 @@ export function Canvas<T extends TLShape, M extends Record<string, unknown>>({
const rContainer = React.useRef<HTMLDivElement>(null)
const rLayer = React.useRef<HTMLDivElement>(null)
inputs.zoom = pageState.camera.zoom
useResizeObserver(rCanvas)
useZoomEvents(rCanvas)
useZoomEvents(pageState.camera.zoom, rCanvas)
useSafariFocusOutFix()

View file

@ -2,11 +2,11 @@
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import * as React from 'react'
import { useTLContext } from './useTLContext'
import { useGesture, usePinch, useWheel } from '@use-gesture/react'
import { useGesture } from '@use-gesture/react'
import { Vec } from '@tldraw/vec'
// Capture zoom gestures (pinches, wheels and pans)
export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
export function useZoomEvents<T extends Element>(zoom: number, ref: React.RefObject<T>) {
const rOriginPoint = React.useRef<number[] | undefined>(undefined)
const rPinchPoint = React.useRef<number[] | undefined>(undefined)
const rDelta = React.useRef<number[]>([0, 0])
@ -46,7 +46,6 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
callbacks.onPan?.(info, e)
},
onPinchStart: ({ origin, event }) => {
console.log('hi')
const elm = ref.current
if (!(event.target === elm || elm?.contains(event.target as Node))) return
@ -97,7 +96,8 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
target: window,
eventOptions: { passive: false },
pinch: {
scaleBounds: { max: 5, min: 0.1 },
from: zoom,
scaleBounds: () => ({ from: inputs.zoom, max: 5, min: 0.1 }),
},
}
)

View file

@ -24,6 +24,8 @@ export class Inputs {
height: 480,
}
zoom = 1
pointerUpTime = 0
activePointer?: number