fix(next): live preview device position when using zoom (#6665)

Author: jacobsfletch

packages/next/src/views/LivePreview/Device/index.tsx

@@ -10,16 +10,20 @@ export const DeviceContainer: React.FC<{
   const { children } = props
 
   const deviceFrameRef = React.useRef<HTMLDivElement>(null)
+  const outerFrameRef = React.useRef<HTMLDivElement>(null)
 
-  const { breakpoint, setMeasuredDeviceSize, size, zoom } = useLivePreviewContext()
+  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()
 
   // Keep an accurate measurement of the actual device size as it is truly rendered
   // This is helpful when `sizes` are non-number units like percentages, etc.
-  const { size: measuredDeviceSize } = useResize(deviceFrameRef)
+  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)
+  const { size: outerFrameSize } = useResize(outerFrameRef.current)
+
+  let deviceIsLargerThanFrame: boolean = false
 
   // Sync the measured device size with the context so that other components can use it
   // This happens from the bottom up so that as this component mounts and unmounts,
-  // Its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
+  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
   useEffect(() => {
     if (measuredDeviceSize) {
       setMeasuredDeviceSize(measuredDeviceSize)
@@ -34,35 +38,64 @@ export const DeviceContainer: React.FC<{
 
     if (
       typeof zoom === 'number' &&
-      typeof size.width === 'number' &&
-      typeof size.height === 'number'
+      typeof desiredSize.width === 'number' &&
+      typeof desiredSize.height === 'number' &&
+      typeof measuredDeviceSize.width === 'number' &&
+      typeof measuredDeviceSize.height === 'number'
     ) {
-      const scaledWidth = size.width / zoom
-      const difference = scaledWidth - size.width
-      x = `${difference / 2}px`
       margin = '0 auto'
+      const scaledDesiredWidth = desiredSize.width / zoom
+      const scaledDeviceWidth = measuredDeviceSize.width * zoom
+      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width
+      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width
+
+      if (deviceIsLargerThanFrame) {
+        if (zoom > 1) {
+          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width
+          if (differenceFromDeviceToFrame < 0) x = `${differenceFromDeviceToFrame / 2}px`
+          else x = '0'
+        } else {
+          x = '0'
+        }
+      } else {
+        if (zoom >= 1) {
+          x = `${scaledDeviceDifferencePixels / 2}px`
+        } else {
+          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth
+          x = `${differenceFromDeviceToFrame / 2}px`
+          margin = '0'
+        }
+      }
     }
   }
 
   let width = zoom ? `${100 / zoom}%` : '100%'
   let height = zoom ? `${100 / zoom}%` : '100%'
 
   if (breakpoint !== 'responsive') {
-    width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`
-    height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`
+    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`
+    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`
   }
 
   return (
     <div
-      ref={deviceFrameRef}
+      ref={outerFrameRef}
       style={{
-        height,
-        margin,
-        transform: `translate3d(${x}, 0, 0)`,
-        width,
+        height: '100%',
+        width: '100%',
       }}
     >
-      {children}
+      <div
+        ref={deviceFrameRef}
+        style={{
+          height,
+          margin,
+          transform: `translate3d(${x}, 0, 0)`,
+          width,
+        }}
+      >
+        {children}
+      </div>
     </div>
   )
 }

packages/ui/src/hooks/useIntersect.ts

@@ -2,7 +2,11 @@
 /* eslint-disable no-shadow */
 import { useEffect, useRef, useState } from 'react'
 
-type Intersect = [setNode: React.Dispatch<Element>, entry: IntersectionObserverEntry]
+type Intersect = [
+  setNode: React.Dispatch<HTMLElement>,
+  entry: IntersectionObserverEntry,
+  node: HTMLElement,
+]
 
 export const useIntersect = (
   { root = null, rootMargin = '0px', threshold = 0 } = {},
@@ -33,5 +37,5 @@ export const useIntersect = (
     return () => currentObserver.disconnect()
   }, [node, disable])
 
-  return [setNode, entry]
+  return [setNode, entry, node]
 }

packages/ui/src/hooks/useResize.ts

@@ -12,15 +12,13 @@ interface Resize {
   size?: Size
 }
 
-export const useResize = (ref: React.MutableRefObject<HTMLElement>): Resize => {
+export const useResize = (element: HTMLElement): Resize => {
   const [size, setSize] = useState<Size>()
 
   useEffect(() => {
     let observer: any // eslint-disable-line
 
-    const { current: currentRef } = ref
-
-    if (currentRef) {
+    if (element) {
       observer = new ResizeObserver((entries) => {
         entries.forEach((entry) => {
           const {
@@ -53,15 +51,15 @@ export const useResize = (ref: React.MutableRefObject<HTMLElement>): Resize => {
         })
       })
 
-      observer.observe(currentRef)
+      observer.observe(element)
     }
 
     return () => {
       if (observer) {
-        observer.unobserve(currentRef)
+        observer.unobserve(element)
       }
     }
-  }, [ref])
+  }, [element])
 
   return {
     size,

test/live-preview/config.ts

@@ -11,6 +11,7 @@ import { Footer } from './globals/Footer.js'
 import { Header } from './globals/Header.js'
 import { seed } from './seed/index.js'
 import {
+  desktopBreakpoint,
   mobileBreakpoint,
   pagesSlug,
   postsSlug,
@@ -25,7 +26,7 @@ export default buildConfigWithDefaults({
       // You can define any of these properties on a per collection or global basis
       // The Live Preview config cascades from the top down, properties are inherited from here
       url: formatLivePreviewURL,
-      breakpoints: [mobileBreakpoint],
+      breakpoints: [mobileBreakpoint, desktopBreakpoint],
       collections: [pagesSlug, postsSlug, ssrPagesSlug, ssrAutosavePagesSlug],
       globals: ['header', 'footer'],
     },