Zooming with Ctrl + mouse wheel

[rovo89]

The project looks very promising, thanks! However, while trying to integrated it into my React app, I noticed that adjusting the zoom level with Ctrl + mouse wheel doesn't work, it zooms the whole browser content. Then I went to https://app.embedpdf.com/ and noticed the same effect there. So is this feature really not support? Can I place a wish for it? 😉

[InsecureBeast]

+1 for this feature, really missing zoom with Ctrl + mouse wheel.

[tomrehnstrom]

I solved this temporarily for us by implementing a separate zooming handling using use-gesture. It's not perfect but it kinda works. Then I just replace the PinchWrapper with this component. Maybe you can also try this until @bobsingor cooks up a better solution 👀

import { ReactNode, useMemo } from 'react'
import { usePinch } from '@use-gesture/react'
import { PinchWrapper, useZoom } from '@embedpdf/plugin-zoom/react'
import { useSpring, animated } from '@react-spring/web'
import React from 'react'
import { useViewportCapability } from '@embedpdf/plugin-viewport/react'

type ZoomControllerProps = {
  children: ReactNode
}

function DesktopZoomController({ children }: ZoomControllerProps) {
  const ref = React.useRef<HTMLDivElement>(null)
  const { provides, state } = useZoom()
  const { provides: viewportProvides } = useViewportCapability()
  const [{ scale, x, y }, api] = useSpring(() => ({
    scale: 1,
    x: 0,
    y: 0
  }))

  usePinch(
    ({ movement: [s], origin, last, first, memo }) => {
      if (!ref.current) return memo
      if (!viewportProvides) return memo

      let lastCenter = { x: 0, y: 0 }
      if (first) {
        const { left, top, width, height } = ref.current.getBoundingClientRect()
        const tx = origin[0] - left - width / 2
        const ty = origin[1] - top - height / 2
        memo = [x.get(), y.get(), tx, ty]
      }

      const scale = s
      const newX = memo[0] + (scale - 1) * -memo[2]
      const newY = memo[1] + (scale - 1) * -memo[3]

      api.start({ scale, x: newX, y: newY, immediate: last })

      if (last) {
        api.stop()
        api.start({ scale: 1, x: 0, y: 0, immediate: true })

        const scale = state.currentZoomLevel * s
        const contRect = viewportProvides.getBoundingRect()

        lastCenter = {
          x: origin[0] - contRect.origin.x,
          y: origin[1] - contRect.origin.y
        }

        provides?.requestZoom(scale, { vx: lastCenter.x, vy: lastCenter.y })
      }

      return memo
    },
    {
      target: ref.current ?? undefined,
      preventDefault: true
    }
  )

  return (
    <animated.div
      ref={ref}
      style={{
        scale,
        x,
        y,
        display: 'block',
        width: 'fit-content',
        overflow: 'visible',
        boxSizing: 'border-box',
        margin: '0px auto'
      }}
    >
      {children}
    </animated.div>
  )
}

function ZoomController({ children }: ZoomControllerProps) {
  const isMobile = useMemo(() => {
    const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i
    const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0
    const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent)

    return SUPPORT_ONLY_TOUCH
  }, [])

  if (isMobile) return <PinchWrapper>{children}</PinchWrapper>
  return <DesktopZoomController>{children}</DesktopZoomController>
}

export default ZoomController

[fricke]

hey everyone, thanks for this repo. Been playing around trying to get ctrl zoom working and noticed this thread. Any progress on this particular feature or ways to implement? thank you so much.

[bobsingor]

This has been added in #303

You can read about it in the new documentation:
https://www.embedpdf.com/docs/react/plugins/plugin-zoom#adding-gesture-zoom-pinch--wheel

[fricke]

much appreciated! I'll test it out.