Set zoom scale bounds based on camera zoom
This commit is contained in:
parent
5c9e148ad8
commit
798bae28ca
3 changed files with 10 additions and 5 deletions
|
@ -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()
|
||||
|
||||
|
|
|
@ -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 }),
|
||||
},
|
||||
}
|
||||
)
|
||||
|
|
|
@ -24,6 +24,8 @@ export class Inputs {
|
|||
height: 480,
|
||||
}
|
||||
|
||||
zoom = 1
|
||||
|
||||
pointerUpTime = 0
|
||||
|
||||
activePointer?: number
|
||||
|
|
Loading…
Reference in a new issue