{
diff --git a/src/components/Dashboard/hooks/usePinchZoom.js b/src/components/Dashboard/hooks/usePinchZoom.js
new file mode 100644
index 00000000..ad2f06a5
--- /dev/null
+++ b/src/components/Dashboard/hooks/usePinchZoom.js
@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+export const MIN_PREVIEW_SCALE = 0.1
+export const MAX_PREVIEW_SCALE = 5
+
+const isPinchZoomEvent = (event) => event.ctrlKey || event.metaKey
+
+export const clampPreviewScale = (value) => {
+ if (!Number.isFinite(value)) {
+ return 1
+ }
+ const clamped = Math.min(MAX_PREVIEW_SCALE, Math.max(MIN_PREVIEW_SCALE, value))
+ return Math.round(clamped * 10000) / 10000
+}
+
+const nextScaleFromWheel = (scale, event) => {
+ const intensity = event.deltaMode === 1 ? 0.12 : 0.0045
+ return clampPreviewScale(scale * Math.exp(-event.deltaY * intensity))
+}
+
+const eventClientPoint = (event, iframeRef, scale) => {
+ const iframe = iframeRef?.current
+ const eventDoc = event.target?.ownerDocument
+ if (
+ iframe &&
+ eventDoc &&
+ eventDoc !== document &&
+ eventDoc === iframe.contentDocument
+ ) {
+ const rect = iframe.getBoundingClientRect()
+ return {
+ clientX: rect.left + event.clientX * scale,
+ clientY: rect.top + event.clientY * scale
+ }
+ }
+ return { clientX: event.clientX, clientY: event.clientY }
+}
+
+const usePinchZoom = ({
+ containerRef,
+ iframeRef,
+ iframeBindKey,
+ scale = 1,
+ onScaleChange,
+ onBeforeScaleChange,
+ enabled = true
+}) => {
+ const onScaleChangeRef = useRef(onScaleChange)
+ onScaleChangeRef.current = onScaleChange
+ const onBeforeScaleChangeRef = useRef(onBeforeScaleChange)
+ onBeforeScaleChangeRef.current = onBeforeScaleChange
+ const scaleRef = useRef(scale)
+ scaleRef.current = scale
+ const gestureStartScaleRef = useRef(scale)
+ const enabledRef = useRef(enabled)
+ enabledRef.current = enabled
+
+ const handleWheel = useCallback(
+ (event) => {
+ if (!enabledRef.current || !isPinchZoomEvent(event)) {
+ return
+ }
+ if (event.target?.closest?.('.previewZoomOverlay')) {
+ return
+ }
+
+ event.preventDefault()
+ event.stopPropagation()
+
+ const current = scaleRef.current
+ const next = nextScaleFromWheel(current, event)
+ if (next === current) {
+ return
+ }
+
+ const point = eventClientPoint(event, iframeRef, current)
+ onBeforeScaleChangeRef.current?.(point.clientX, point.clientY)
+ onScaleChangeRef.current?.(next)
+ },
+ [iframeRef]
+ )
+
+ const handleGestureStart = useCallback((event) => {
+ if (!enabledRef.current) {
+ return
+ }
+ event.preventDefault()
+ gestureStartScaleRef.current = scaleRef.current
+ }, [])
+
+ const handleGestureChange = useCallback(
+ (event) => {
+ if (!enabledRef.current) {
+ return
+ }
+ event.preventDefault()
+ const startScale = gestureStartScaleRef.current
+ if (!Number.isFinite(startScale)) {
+ return
+ }
+ const next = clampPreviewScale(startScale * event.scale)
+ if (next === scaleRef.current) {
+ return
+ }
+ const point = eventClientPoint(event, iframeRef, scaleRef.current)
+ onBeforeScaleChangeRef.current?.(point.clientX, point.clientY)
+ onScaleChangeRef.current?.(next)
+ },
+ [iframeRef]
+ )
+
+ useEffect(() => {
+ const container = containerRef?.current
+ if (!container || !enabled || typeof onScaleChange !== 'function') {
+ return undefined
+ }
+
+ const options = { capture: true, passive: false }
+ container.addEventListener('wheel', handleWheel, options)
+ container.addEventListener('gesturestart', handleGestureStart, options)
+ container.addEventListener('gesturechange', handleGestureChange, options)
+ return () => {
+ container.removeEventListener('wheel', handleWheel, options)
+ container.removeEventListener('gesturestart', handleGestureStart, options)
+ container.removeEventListener(
+ 'gesturechange',
+ handleGestureChange,
+ options
+ )
+ }
+ }, [
+ containerRef,
+ enabled,
+ handleGestureChange,
+ handleGestureStart,
+ handleWheel,
+ onScaleChange
+ ])
+
+ useEffect(() => {
+ const iframe = iframeRef?.current
+ if (!iframe || !enabled || typeof onScaleChange !== 'function') {
+ return undefined
+ }
+
+ const options = { capture: true, passive: false }
+ let boundDoc = null
+
+ const unbind = () => {
+ if (!boundDoc) {
+ return
+ }
+ boundDoc.removeEventListener('wheel', handleWheel, options)
+ boundDoc.removeEventListener('gesturestart', handleGestureStart, options)
+ boundDoc.removeEventListener(
+ 'gesturechange',
+ handleGestureChange,
+ options
+ )
+ boundDoc = null
+ }
+
+ const bind = () => {
+ const doc = iframe.contentDocument
+ if (!doc || boundDoc === doc) {
+ return
+ }
+ unbind()
+ doc.addEventListener('wheel', handleWheel, options)
+ doc.addEventListener('gesturestart', handleGestureStart, options)
+ doc.addEventListener('gesturechange', handleGestureChange, options)
+ boundDoc = doc
+ }
+
+ iframe.addEventListener('load', bind)
+ bind()
+
+ return () => {
+ iframe.removeEventListener('load', bind)
+ unbind()
+ }
+ }, [
+ enabled,
+ handleGestureChange,
+ handleGestureStart,
+ handleWheel,
+ iframeBindKey,
+ iframeRef,
+ onScaleChange
+ ])
+}
+
+export default usePinchZoom
diff --git a/src/components/Dashboard/hooks/usePreserveZoomScroll.js b/src/components/Dashboard/hooks/usePreserveZoomScroll.js
new file mode 100644
index 00000000..25dd1c8d
--- /dev/null
+++ b/src/components/Dashboard/hooks/usePreserveZoomScroll.js
@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+
+const captureZoomScrollMetrics = (scrollEl, contentEl, scale) => {
+ if (!scrollEl || !contentEl) {
+ return null
+ }
+
+ const contentRect = contentEl.getBoundingClientRect()
+ if (contentRect.width <= 0 && contentRect.height <= 0) {
+ return null
+ }
+
+ const scrollRect = scrollEl.getBoundingClientRect()
+ return {
+ scale,
+ scrollLeft: scrollEl.scrollLeft,
+ scrollTop: scrollEl.scrollTop,
+ clientWidth: scrollEl.clientWidth,
+ clientHeight: scrollEl.clientHeight,
+ contentWidth: contentRect.width,
+ contentHeight: contentRect.height,
+ contentOffsetLeft: contentRect.left - scrollRect.left + scrollEl.scrollLeft,
+ contentOffsetTop: contentRect.top - scrollRect.top + scrollEl.scrollTop
+ }
+}
+
+const restoreZoomScrollOrigin = (scrollEl, contentEl, prev, nextScale) => {
+ if (!scrollEl || !contentEl || !prev?.scale || prev.scale === nextScale) {
+ return
+ }
+
+ const ratio = nextScale / prev.scale
+ if (!Number.isFinite(ratio) || ratio <= 0) {
+ return
+ }
+
+ const anchorX = Number.isFinite(prev.anchorX)
+ ? prev.anchorX
+ : prev.clientWidth / 2
+ const anchorY = Number.isFinite(prev.anchorY)
+ ? prev.anchorY
+ : prev.clientHeight / 2
+ const pointX = prev.scrollLeft + anchorX - prev.contentOffsetLeft
+ const pointY = prev.scrollTop + anchorY - prev.contentOffsetTop
+
+ const scrollRect = scrollEl.getBoundingClientRect()
+ const contentRect = contentEl.getBoundingClientRect()
+ const contentOffsetLeft =
+ contentRect.left - scrollRect.left + scrollEl.scrollLeft
+ const contentOffsetTop =
+ contentRect.top - scrollRect.top + scrollEl.scrollTop
+
+ scrollEl.scrollTo(
+ contentOffsetLeft + pointX * ratio - anchorX,
+ contentOffsetTop + pointY * ratio - anchorY
+ )
+}
+
+const usePreserveZoomScroll = (
+ scrollElementRef,
+ contentElementRef,
+ scale,
+ layoutKey
+) => {
+ const metricsRef = useRef(null)
+ const pendingRef = useRef(null)
+ const scaleRef = useRef(scale)
+ scaleRef.current = scale
+
+ const captureMetrics = useCallback(() => {
+ if (pendingRef.current) {
+ return
+ }
+
+ const metrics = captureZoomScrollMetrics(
+ scrollElementRef.current,
+ contentElementRef.current,
+ scaleRef.current
+ )
+ if (metrics) {
+ metricsRef.current = metrics
+ }
+ }, [contentElementRef, scrollElementRef])
+
+ const captureAtClientPoint = useCallback(
+ (clientX, clientY) => {
+ const scrollEl = scrollElementRef.current
+ const metrics = captureZoomScrollMetrics(
+ scrollEl,
+ contentElementRef.current,
+ scaleRef.current
+ )
+ if (!metrics || !scrollEl) {
+ return
+ }
+
+ const rect = scrollEl.getBoundingClientRect()
+ metrics.anchorX = clientX - rect.left
+ metrics.anchorY = clientY - rect.top
+ metricsRef.current = metrics
+ },
+ [contentElementRef, scrollElementRef]
+ )
+
+ const tryRestore = useCallback(() => {
+ const pending = pendingRef.current
+ const scrollEl = scrollElementRef.current
+ const contentEl = contentElementRef.current
+ if (!pending || !scrollEl || !contentEl) {
+ captureMetrics()
+ return
+ }
+
+ const contentRect = contentEl.getBoundingClientRect()
+ const sizeChanged =
+ Math.abs(contentRect.width - pending.prev.contentWidth) > 0.5 ||
+ Math.abs(contentRect.height - pending.prev.contentHeight) > 0.5
+ if (!sizeChanged) {
+ return
+ }
+
+ restoreZoomScrollOrigin(scrollEl, contentEl, pending.prev, pending.nextScale)
+ pendingRef.current = null
+ captureMetrics()
+ }, [captureMetrics, contentElementRef, scrollElementRef])
+
+ useLayoutEffect(() => {
+ const prev = metricsRef.current
+ if (prev && prev.scale !== scale) {
+ pendingRef.current = { prev, nextScale: scale }
+ }
+ tryRestore()
+ }, [layoutKey, scale, tryRestore])
+
+ useLayoutEffect(() => {
+ const contentEl = contentElementRef.current
+ if (!contentEl || typeof ResizeObserver !== 'function') {
+ return undefined
+ }
+
+ const observer = new ResizeObserver(() => {
+ tryRestore()
+ })
+ observer.observe(contentEl)
+ return () => observer.disconnect()
+ }, [contentElementRef, layoutKey, tryRestore])
+
+ useEffect(() => {
+ const scrollEl = scrollElementRef.current
+ if (!scrollEl) {
+ return undefined
+ }
+
+ scrollEl.addEventListener('scroll', captureMetrics, { passive: true })
+ return () => {
+ scrollEl.removeEventListener('scroll', captureMetrics)
+ }
+ }, [captureMetrics, layoutKey, scrollElementRef])
+
+ return { captureAtClientPoint }
+}
+
+export default usePreserveZoomScroll