@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

package/build-module/components/iframe/use-scale-canvas.js

@@ -1,28 +1,5 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef, useCallback } from '@wordpress/element';
-import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
-
-/**
- * @typedef {Object} TransitionState
- * @property {number} scaleValue      Scale of the canvas.
- * @property {number} frameSize       Size of the frame/offset around the canvas.
- * @property {number} containerHeight containerHeight of the iframe.
- * @property {number} scrollTop       ScrollTop of the iframe.
- * @property {number} scrollHeight    ScrollHeight of the iframe.
- */
-
-/**
- * Calculate the scale of the canvas.
- *
- * @param {Object} options                     Object of options
- * @param {number} options.frameSize           Size of the frame/offset around the canvas
- * @param {number} options.containerWidth      Actual width of the canvas container
- * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.
- * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container
- * @return {number} Scale value between 0 and/or equal to 1
- */
+import { useEffect, useRef, useCallback } from "@wordpress/element";
+import { useReducedMotion, useResizeObserver } from "@wordpress/compose";
 function calculateScale({
   frameSize,
   containerWidth,
@@ -31,33 +8,11 @@ function calculateScale({
 }) {
   return (Math.min(containerWidth, maxContainerWidth) - frameSize * 2) / scaleContainerWidth;
 }
-
-/**
- * Compute the next scrollHeight based on the transition states.
- *
- * @param {TransitionState} transitionFrom Starting point of the transition
- * @param {TransitionState} transitionTo   Ending state of the transition
- * @return {number} Next scrollHeight based on scale and frame value changes.
- */
 function computeScrollHeightNext(transitionFrom, transitionTo) {
-  const {
-    scaleValue: prevScale,
-    scrollHeight: prevScrollHeight
-  } = transitionFrom;
-  const {
-    frameSize,
-    scaleValue
-  } = transitionTo;
+  const { scaleValue: prevScale, scrollHeight: prevScrollHeight } = transitionFrom;
+  const { frameSize, scaleValue } = transitionTo;
   return prevScrollHeight * (scaleValue / prevScale) + frameSize * 2;
 }
-
-/**
- * Compute the next scrollTop position after scaling the iframe content.
- *
- * @param {TransitionState} transitionFrom Starting point of the transition
- * @param {TransitionState} transitionTo   Ending state of the transition
- * @return {number} Next scrollTop position after scaling the iframe content.
- */
 function computeScrollTopNext(transitionFrom, transitionTo) {
   const {
     containerHeight: prevContainerHeight,
@@ -65,128 +20,70 @@ function computeScrollTopNext(transitionFrom, transitionTo) {
     scaleValue: prevScale,
     scrollTop: prevScrollTop
   } = transitionFrom;
-  const {
-    containerHeight,
-    frameSize,
-    scaleValue,
-    scrollHeight
-  } = transitionTo;
-  // Step 0: Start with the current scrollTop.
+  const { containerHeight, frameSize, scaleValue, scrollHeight } = transitionTo;
   let scrollTopNext = prevScrollTop;
-  // Step 1: Undo the effects of the previous scale and frame around the
-  // midpoint of the visible area.
   scrollTopNext = (scrollTopNext + prevContainerHeight / 2 - prevFrameSize) / prevScale - prevContainerHeight / 2;
-
-  // Step 2: Apply the new scale and frame around the midpoint of the
-  // visible area.
   scrollTopNext = (scrollTopNext + containerHeight / 2) * scaleValue + frameSize - containerHeight / 2;
-
-  // Step 3: Handle an edge case so that you scroll to the top of the
-  // iframe if the top of the iframe content is visible in the container.
-  // The same edge case for the bottom is skipped because changing content
-  // makes calculating it impossible.
   scrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;
-
-  // This is the scrollTop value if you are scrolled to the bottom of the
-  // iframe. We can't just let the browser handle it because we need to
-  // animate the scaling.
   const maxScrollTop = scrollHeight - containerHeight;
-
-  // Step 4: Clamp the scrollTopNext between the minimum and maximum
-  // possible scrollTop positions. Round the value to avoid subpixel
-  // truncation by the browser which sometimes causes a 1px error.
-  return Math.round(Math.min(Math.max(0, scrollTopNext), Math.max(0, maxScrollTop)));
+  return Math.round(
+    Math.min(Math.max(0, scrollTopNext), Math.max(0, maxScrollTop))
+  );
 }
-
-/**
- * Generate the keyframes to use for the zoom out animation.
- *
- * @param {TransitionState} transitionFrom Starting transition state.
- * @param {TransitionState} transitionTo   Ending transition state.
- * @return {Object[]} An array of keyframes to use for the animation.
- */
 function getAnimationKeyframes(transitionFrom, transitionTo) {
   const {
     scaleValue: prevScale,
     frameSize: prevFrameSize,
     scrollTop
   } = transitionFrom;
-  const {
-    scaleValue,
-    frameSize,
-    scrollTop: scrollTopNext
-  } = transitionTo;
-  return [{
-    translate: `0 0`,
-    scale: prevScale,
-    paddingTop: `${prevFrameSize / prevScale}px`,
-    paddingBottom: `${prevFrameSize / prevScale}px`
-  }, {
-    translate: `0 ${scrollTop - scrollTopNext}px`,
-    scale: scaleValue,
-    paddingTop: `${frameSize / scaleValue}px`,
-    paddingBottom: `${frameSize / scaleValue}px`
-  }];
+  const { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;
+  return [
+    {
+      translate: `0 0`,
+      scale: prevScale,
+      paddingTop: `${prevFrameSize / prevScale}px`,
+      paddingBottom: `${prevFrameSize / prevScale}px`
+    },
+    {
+      translate: `0 ${scrollTop - scrollTopNext}px`,
+      scale: scaleValue,
+      paddingTop: `${frameSize / scaleValue}px`,
+      paddingBottom: `${frameSize / scaleValue}px`
+    }
+  ];
 }
-
-/**
- * @typedef {Object} ScaleCanvasResult
- * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.
- * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.
- * @property {Object}  contentResizeListener   A resize observer for the content.
- * @property {Object}  containerResizeListener A resize observer for the container.
- */
-
-/**
- * Handles scaling the canvas for the zoom out mode and animating between
- * the states.
- *
- * @param {Object}        options                   Object of options.
- * @param {number}        options.frameSize         Size of the frame around the content.
- * @param {Document}      options.iframeDocument    Document of the iframe.
- * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.
- * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.
- * @return {ScaleCanvasResult} Properties of the result.
- */
-export function useScaleCanvas({
+function useScaleCanvas({
   frameSize,
   iframeDocument,
   maxContainerWidth = 750,
   scale
 }) {
-  const [contentResizeListener, {
-    height: contentHeight
-  }] = useResizeObserver();
-  const [containerResizeListener, {
-    width: containerWidth,
-    height: containerHeight
-  }] = useResizeObserver();
+  const [contentResizeListener, { height: contentHeight }] = useResizeObserver();
+  const [
+    containerResizeListener,
+    { width: containerWidth, height: containerHeight }
+  ] = useResizeObserver();
   const initialContainerWidthRef = useRef(0);
   const isZoomedOut = scale !== 1;
   const prefersReducedMotion = useReducedMotion();
-  const isAutoScaled = scale === 'auto-scaled';
-  // Track if the animation should start when the useEffect runs.
+  const isAutoScaled = scale === "auto-scaled";
   const startAnimationRef = useRef(false);
-  // Track the animation so we know if we have an animation running,
-  // and can cancel it, reverse it, call a finish event, etc.
   const animationRef = useRef(null);
   useEffect(() => {
     if (!isZoomedOut) {
       initialContainerWidthRef.current = containerWidth;
     }
   }, [containerWidth, isZoomedOut]);
-  const scaleContainerWidth = Math.max(initialContainerWidthRef.current, containerWidth);
+  const scaleContainerWidth = Math.max(
+    initialContainerWidthRef.current,
+    containerWidth
+  );
   const scaleValue = isAutoScaled ? calculateScale({
     frameSize,
     containerWidth,
     maxContainerWidth,
     scaleContainerWidth
   }) : scale;
-
-  /**
-   * The starting transition state for the zoom out animation.
-   * @type {import('react').RefObject<TransitionState>}
-   */
   const transitionFromRef = useRef({
     scaleValue,
     frameSize,
@@ -194,11 +91,6 @@ export function useScaleCanvas({
     scrollTop: 0,
     scrollHeight: 0
   });
-
-  /**
-   * The ending transition state for the zoom out animation.
-   * @type {import('react').RefObject<TransitionState>}
-   */
   const transitionToRef = useRef({
     scaleValue,
     frameSize,
@@ -206,70 +98,58 @@ export function useScaleCanvas({
     scrollTop: 0,
     scrollHeight: 0
   });
-
-  /**
-   * Start the zoom out animation. This sets the necessary CSS variables
-   * for animating the canvas and returns the Animation object.
-   *
-   * @return {Animation} The animation object for the zoom out animation.
-   */
   const startZoomOutAnimation = useCallback(() => {
-    const {
-      scrollTop
-    } = transitionFromRef.current;
-    const {
-      scrollTop: scrollTopNext
-    } = transitionToRef.current;
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scroll-top', `${scrollTop}px`);
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scroll-top-next', `${scrollTopNext}px`);
-
-    // If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-overflow-behavior', transitionFromRef.current.scrollHeight === transitionFromRef.current.containerHeight ? 'auto' : 'scroll');
-    iframeDocument.documentElement.classList.add('zoom-out-animation');
-    return iframeDocument.documentElement.animate(getAnimationKeyframes(transitionFromRef.current, transitionToRef.current), {
-      easing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
-      duration: 400
-    });
+    const { scrollTop } = transitionFromRef.current;
+    const { scrollTop: scrollTopNext } = transitionToRef.current;
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top",
+      `${scrollTop}px`
+    );
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top-next",
+      `${scrollTopNext}px`
+    );
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-overflow-behavior",
+      transitionFromRef.current.scrollHeight === transitionFromRef.current.containerHeight ? "auto" : "scroll"
+    );
+    iframeDocument.documentElement.classList.add("zoom-out-animation");
+    return iframeDocument.documentElement.animate(
+      getAnimationKeyframes(
+        transitionFromRef.current,
+        transitionToRef.current
+      ),
+      {
+        easing: "cubic-bezier(0.46, 0.03, 0.52, 0.96)",
+        duration: 400
+      }
+    );
   }, [iframeDocument]);
-
-  /**
-   * Callback when the zoom out animation is finished.
-   * - Cleans up animations refs.
-   * - Adds final CSS vars for scale and frame size to preserve the state.
-   * - Removes the 'zoom-out-animation' class (which has the fixed positioning).
-   * - Sets the final scroll position after the canvas is no longer in fixed position.
-   * - Removes CSS vars related to the animation.
-   * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.
-   */
   const finishZoomOutAnimation = useCallback(() => {
     startAnimationRef.current = false;
     animationRef.current = null;
-
-    // Add our final scale and frame size now that the animation is done.
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', transitionToRef.current.scaleValue);
-    iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', `${transitionToRef.current.frameSize}px`);
-    iframeDocument.documentElement.classList.remove('zoom-out-animation');
-
-    // Set the final scroll position that was just animated to.
-    // Disable reason: Eslint isn't smart enough to know that this is a
-    // DOM element. https://github.com/facebook/react/issues/31483
-    // eslint-disable-next-line react-compiler/react-compiler
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-scale",
+      transitionToRef.current.scaleValue
+    );
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-frame-size",
+      `${transitionToRef.current.frameSize}px`
+    );
+    iframeDocument.documentElement.classList.remove("zoom-out-animation");
     iframeDocument.documentElement.scrollTop = transitionToRef.current.scrollTop;
-    iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scroll-top');
-    iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scroll-top-next');
-    iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-overflow-behavior');
-
-    // Update previous values.
+    iframeDocument.documentElement.style.removeProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top"
+    );
+    iframeDocument.documentElement.style.removeProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top-next"
+    );
+    iframeDocument.documentElement.style.removeProperty(
+      "--wp-block-editor-iframe-zoom-out-overflow-behavior"
+    );
     transitionFromRef.current = transitionToRef.current;
   }, [iframeDocument]);
   const previousIsZoomedOut = useRef(false);
-
-  /**
-   * Runs when zoom out mode is toggled, and sets the startAnimation flag
-   * so the animation will start when the next useEffect runs. We _only_
-   * want to animate when the zoom out mode is toggled, not when the scale
-   * changes due to the container resizing.
-   */
   useEffect(() => {
     const trigger = iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
     previousIsZoomedOut.current = isZoomedOut;
@@ -280,27 +160,16 @@ export function useScaleCanvas({
     if (!isZoomedOut) {
       return;
     }
-    iframeDocument.documentElement.classList.add('is-zoomed-out');
+    iframeDocument.documentElement.classList.add("is-zoomed-out");
     return () => {
-      iframeDocument.documentElement.classList.remove('is-zoomed-out');
+      iframeDocument.documentElement.classList.remove("is-zoomed-out");
     };
   }, [iframeDocument, isZoomedOut]);
-
-  /**
-   * This handles:
-   * 1. Setting the correct scale and vars of the canvas when zoomed out
-   * 2. If zoom out mode has been toggled, runs the animation of zooming in/out
-   */
   useEffect(() => {
     if (!iframeDocument) {
       return;
     }
-
-    // We need to update the appropriate scale to exit from. If sidebars have been opened since setting the
-    // original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.
     if (isAutoScaled && transitionFromRef.current.scaleValue !== 1) {
-      // We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when
-      // exiting.
       transitionFromRef.current.scaleValue = calculateScale({
         frameSize: transitionFromRef.current.frameSize,
         containerWidth,
@@ -309,71 +178,60 @@ export function useScaleCanvas({
       });
     }
     if (scaleValue < 1) {
-      // If we are not going to animate the transition, set the scale and frame size directly.
-      // If we are animating, these values will be set when the animation is finished.
-      // Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
-      // animate the transition.
       if (!startAnimationRef.current) {
-        iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', scaleValue);
-        iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', `${frameSize}px`);
+        iframeDocument.documentElement.style.setProperty(
+          "--wp-block-editor-iframe-zoom-out-scale",
+          scaleValue
+        );
+        iframeDocument.documentElement.style.setProperty(
+          "--wp-block-editor-iframe-zoom-out-frame-size",
+          `${frameSize}px`
+        );
       }
-      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-content-height', `${contentHeight}px`);
-      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-inner-height', `${containerHeight}px`);
-      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-container-width', `${containerWidth}px`);
-      iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale-container-width', `${scaleContainerWidth}px`);
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-content-height",
+        `${contentHeight}px`
+      );
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-inner-height",
+        `${containerHeight}px`
+      );
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-container-width",
+        `${containerWidth}px`
+      );
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-scale-container-width",
+        `${scaleContainerWidth}px`
+      );
     }
-
-    /**
-     * Handle the zoom out animation:
-     *
-     * - Get the current scrollTop position.
-     * - Calculate where the same scroll position is after scaling.
-     * - Apply fixed positioning to the canvas with a transform offset
-     *   to keep the canvas centered.
-     * - Animate the scale and padding to the new scale and frame size.
-     * - After the animation is complete, remove the fixed positioning
-     *   and set the scroll position that keeps everything centered.
-     */
     if (startAnimationRef.current) {
-      // Don't allow a new transition to start again unless it was started by the zoom out mode changing.
       startAnimationRef.current = false;
-
-      /**
-       * If we already have an animation running, reverse it.
-       */
       if (animationRef.current) {
         animationRef.current.reverse();
-        // Swap the transition to/from refs so that we set the correct values when
-        // finishZoomOutAnimation runs.
         const tempTransitionFrom = transitionFromRef.current;
         const tempTransitionTo = transitionToRef.current;
         transitionFromRef.current = tempTransitionTo;
         transitionToRef.current = tempTransitionFrom;
       } else {
-        /**
-         * Start a new zoom animation.
-         */
-
-        // We can't trust the set value from contentHeight, as it was measured
-        // before the zoom out mode was changed. After zoom out mode is changed,
-        // appenders may appear or disappear, so we need to get the height from
-        // the iframe at this point when we're about to animate the zoom out.
-        // The iframe scrollTop, scrollHeight, and clientHeight will all be
-        // the most accurate.
         transitionFromRef.current.scrollTop = iframeDocument.documentElement.scrollTop;
         transitionFromRef.current.scrollHeight = iframeDocument.documentElement.scrollHeight;
-        // Use containerHeight, as it's the previous container height before the zoom out animation starts.
         transitionFromRef.current.containerHeight = containerHeight;
         transitionToRef.current = {
           scaleValue,
           frameSize,
-          containerHeight: iframeDocument.documentElement.clientHeight // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
+          containerHeight: iframeDocument.documentElement.clientHeight
+          // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
         };
-        transitionToRef.current.scrollHeight = computeScrollHeightNext(transitionFromRef.current, transitionToRef.current);
-        transitionToRef.current.scrollTop = computeScrollTopNext(transitionFromRef.current, transitionToRef.current);
+        transitionToRef.current.scrollHeight = computeScrollHeightNext(
+          transitionFromRef.current,
+          transitionToRef.current
+        );
+        transitionToRef.current.scrollTop = computeScrollTopNext(
+          transitionFromRef.current,
+          transitionToRef.current
+        );
         animationRef.current = startZoomOutAnimation();
-
-        // If the user prefers reduced motion, finish the animation immediately and set the final state.
         if (prefersReducedMotion) {
           finishZoomOutAnimation();
         } else {
@@ -381,7 +239,20 @@ export function useScaleCanvas({
         }
       }
     }
-  }, [startZoomOutAnimation, finishZoomOutAnimation, prefersReducedMotion, isAutoScaled, scaleValue, frameSize, iframeDocument, contentHeight, containerWidth, containerHeight, maxContainerWidth, scaleContainerWidth]);
+  }, [
+    startZoomOutAnimation,
+    finishZoomOutAnimation,
+    prefersReducedMotion,
+    isAutoScaled,
+    scaleValue,
+    frameSize,
+    iframeDocument,
+    contentHeight,
+    containerWidth,
+    containerHeight,
+    maxContainerWidth,
+    scaleContainerWidth
+  ]);
   return {
     isZoomedOut,
     scaleContainerWidth,
@@ -389,4 +260,7 @@ export function useScaleCanvas({
     containerResizeListener
   };
 }
-//# sourceMappingURL=use-scale-canvas.js.map
+export {
+  useScaleCanvas
+};
+//# sourceMappingURL=use-scale-canvas.js.map

package/build-module/components/iframe/use-scale-canvas.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useEffect","useRef","useCallback","useReducedMotion","useResizeObserver","calculateScale","frameSize","containerWidth","maxContainerWidth","scaleContainerWidth","Math","min","computeScrollHeightNext","transitionFrom","transitionTo","scaleValue","prevScale","scrollHeight","prevScrollHeight","computeScrollTopNext","containerHeight","prevContainerHeight","prevFrameSize","scrollTop","prevScrollTop","scrollTopNext","maxScrollTop","round","max","getAnimationKeyframes","translate","scale","paddingTop","paddingBottom","useScaleCanvas","iframeDocument","contentResizeListener","height","contentHeight","containerResizeListener","width","initialContainerWidthRef","isZoomedOut","prefersReducedMotion","isAutoScaled","startAnimationRef","animationRef","current","transitionFromRef","transitionToRef","startZoomOutAnimation","documentElement","style","setProperty","classList","add","animate","easing","duration","finishZoomOutAnimation","remove","removeProperty","previousIsZoomedOut","trigger","reverse","tempTransitionFrom","tempTransitionTo","clientHeight","onfinish"],"sources":["@wordpress/block-editor/src/components/iframe/use-scale-canvas.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useCallback } from '@wordpress/element';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\n\n/**\n * @typedef {Object} TransitionState\n * @property {number} scaleValue      Scale of the canvas.\n * @property {number} frameSize       Size of the frame/offset around the canvas.\n * @property {number} containerHeight containerHeight of the iframe.\n * @property {number} scrollTop       ScrollTop of the iframe.\n * @property {number} scrollHeight    ScrollHeight of the iframe.\n */\n\n/**\n * Calculate the scale of the canvas.\n *\n * @param {Object} options                     Object of options\n * @param {number} options.frameSize           Size of the frame/offset around the canvas\n * @param {number} options.containerWidth      Actual width of the canvas container\n * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.\n * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container\n * @return {number} Scale value between 0 and/or equal to 1\n */\nfunction calculateScale( {\n\tframeSize,\n\tcontainerWidth,\n\tmaxContainerWidth,\n\tscaleContainerWidth,\n} ) {\n\treturn (\n\t\t( Math.min( containerWidth, maxContainerWidth ) - frameSize * 2 ) /\n\t\tscaleContainerWidth\n\t);\n}\n\n/**\n * Compute the next scrollHeight based on the transition states.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollHeight based on scale and frame value changes.\n */\nfunction computeScrollHeightNext( transitionFrom, transitionTo ) {\n\tconst { scaleValue: prevScale, scrollHeight: prevScrollHeight } =\n\t\ttransitionFrom;\n\tconst { frameSize, scaleValue } = transitionTo;\n\n\treturn prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;\n}\n\n/**\n * Compute the next scrollTop position after scaling the iframe content.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollTop position after scaling the iframe content.\n */\nfunction computeScrollTopNext( transitionFrom, transitionTo ) {\n\tconst {\n\t\tcontainerHeight: prevContainerHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop: prevScrollTop,\n\t} = transitionFrom;\n\tconst { containerHeight, frameSize, scaleValue, scrollHeight } =\n\t\ttransitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = prevScrollTop;\n\t// Step 1: Undo the effects of the previous scale and frame around the\n\t// midpoint of the visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + prevContainerHeight / 2 - prevFrameSize ) /\n\t\t\tprevScale -\n\t\tprevContainerHeight / 2;\n\n\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t// visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + containerHeight / 2 ) * scaleValue +\n\t\tframeSize -\n\t\tcontainerHeight / 2;\n\n\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t// iframe if the top of the iframe content is visible in the container.\n\t// The same edge case for the bottom is skipped because changing content\n\t// makes calculating it impossible.\n\tscrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t// iframe. We can't just let the browser handle it because we need to\n\t// animate the scaling.\n\tconst maxScrollTop = scrollHeight - containerHeight;\n\n\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t// possible scrollTop positions. Round the value to avoid subpixel\n\t// truncation by the browser which sometimes causes a 1px error.\n\treturn Math.round(\n\t\tMath.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )\n\t);\n}\n\n/**\n * Generate the keyframes to use for the zoom out animation.\n *\n * @param {TransitionState} transitionFrom Starting transition state.\n * @param {TransitionState} transitionTo   Ending transition state.\n * @return {Object[]} An array of keyframes to use for the animation.\n */\nfunction getAnimationKeyframes( transitionFrom, transitionTo ) {\n\tconst {\n\t\tscaleValue: prevScale,\n\t\tframeSize: prevFrameSize,\n\t\tscrollTop,\n\t} = transitionFrom;\n\tconst { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;\n\n\treturn [\n\t\t{\n\t\t\ttranslate: `0 0`,\n\t\t\tscale: prevScale,\n\t\t\tpaddingTop: `${ prevFrameSize / prevScale }px`,\n\t\t\tpaddingBottom: `${ prevFrameSize / prevScale }px`,\n\t\t},\n\t\t{\n\t\t\ttranslate: `0 ${ scrollTop - scrollTopNext }px`,\n\t\t\tscale: scaleValue,\n\t\t\tpaddingTop: `${ frameSize / scaleValue }px`,\n\t\t\tpaddingBottom: `${ frameSize / scaleValue }px`,\n\t\t},\n\t];\n}\n\n/**\n * @typedef {Object} ScaleCanvasResult\n * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.\n * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.\n * @property {Object}  contentResizeListener   A resize observer for the content.\n * @property {Object}  containerResizeListener A resize observer for the container.\n */\n\n/**\n * Handles scaling the canvas for the zoom out mode and animating between\n * the states.\n *\n * @param {Object}        options                   Object of options.\n * @param {number}        options.frameSize         Size of the frame around the content.\n * @param {Document}      options.iframeDocument    Document of the iframe.\n * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.\n * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.\n * @return {ScaleCanvasResult} Properties of the result.\n */\nexport function useScaleCanvas( {\n\tframeSize,\n\tiframeDocument,\n\tmaxContainerWidth = 750,\n\tscale,\n} ) {\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth, height: containerHeight },\n\t] = useResizeObserver();\n\n\tconst initialContainerWidthRef = useRef( 0 );\n\tconst isZoomedOut = scale !== 1;\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst isAutoScaled = scale === 'auto-scaled';\n\t// Track if the animation should start when the useEffect runs.\n\tconst startAnimationRef = useRef( false );\n\t// Track the animation so we know if we have an animation running,\n\t// and can cancel it, reverse it, call a finish event, etc.\n\tconst animationRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidthRef.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidthRef.current,\n\t\tcontainerWidth\n\t);\n\n\tconst scaleValue = isAutoScaled\n\t\t? calculateScale( {\n\t\t\t\tframeSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth,\n\t\t  } )\n\t\t: scale;\n\n\t/**\n\t * The starting transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t */\n\tconst transitionFromRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * The ending transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t */\n\tconst transitionToRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * Start the zoom out animation. This sets the necessary CSS variables\n\t * for animating the canvas and returns the Animation object.\n\t *\n\t * @return {Animation} The animation object for the zoom out animation.\n\t */\n\tconst startZoomOutAnimation = useCallback( () => {\n\t\tconst { scrollTop } = transitionFromRef.current;\n\t\tconst { scrollTop: scrollTopNext } = transitionToRef.current;\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\t// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior',\n\t\t\ttransitionFromRef.current.scrollHeight ===\n\t\t\t\ttransitionFromRef.current.containerHeight\n\t\t\t\t? 'auto'\n\t\t\t\t: 'scroll'\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\treturn iframeDocument.documentElement.animate(\n\t\t\tgetAnimationKeyframes(\n\t\t\t\ttransitionFromRef.current,\n\t\t\t\ttransitionToRef.current\n\t\t\t),\n\t\t\t{\n\t\t\t\teasing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',\n\t\t\t\tduration: 400,\n\t\t\t}\n\t\t);\n\t}, [ iframeDocument ] );\n\n\t/**\n\t * Callback when the zoom out animation is finished.\n\t * - Cleans up animations refs.\n\t * - Adds final CSS vars for scale and frame size to preserve the state.\n\t * - Removes the 'zoom-out-animation' class (which has the fixed positioning).\n\t * - Sets the final scroll position after the canvas is no longer in fixed position.\n\t * - Removes CSS vars related to the animation.\n\t * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.\n\t */\n\tconst finishZoomOutAnimation = useCallback( () => {\n\t\tstartAnimationRef.current = false;\n\t\tanimationRef.current = null;\n\n\t\t// Add our final scale and frame size now that the animation is done.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\ttransitionToRef.current.scaleValue\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t`${ transitionToRef.current.frameSize }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.remove( 'zoom-out-animation' );\n\n\t\t// Set the final scroll position that was just animated to.\n\t\t// Disable reason: Eslint isn't smart enough to know that this is a\n\t\t// DOM element. https://github.com/facebook/react/issues/31483\n\t\t// eslint-disable-next-line react-compiler/react-compiler\n\t\tiframeDocument.documentElement.scrollTop =\n\t\t\ttransitionToRef.current.scrollTop;\n\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\tconst previousIsZoomedOut = useRef( false );\n\n\t/**\n\t * Runs when zoom out mode is toggled, and sets the startAnimation flag\n\t * so the animation will start when the next useEffect runs. We _only_\n\t * want to animate when the zoom out mode is toggled, not when the scale\n\t * changes due to the container resizing.\n\t */\n\tuseEffect( () => {\n\t\tconst trigger =\n\t\t\tiframeDocument && previousIsZoomedOut.current !== isZoomedOut;\n\n\t\tpreviousIsZoomedOut.current = isZoomedOut;\n\n\t\tif ( ! trigger ) {\n\t\t\treturn;\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\tif ( ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t/**\n\t * This handles:\n\t * 1. Setting the correct scale and vars of the canvas when zoomed out\n\t * 2. If zoom out mode has been toggled, runs the animation of zooming in/out\n\t */\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the\n\t\t// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.\n\t\tif ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {\n\t\t\t// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when\n\t\t\t// exiting.\n\t\t\ttransitionFromRef.current.scaleValue = calculateScale( {\n\t\t\t\tframeSize: transitionFromRef.current.frameSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth: containerWidth,\n\t\t\t} );\n\t\t}\n\n\t\tif ( scaleValue < 1 ) {\n\t\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t\t// animate the transition.\n\t\t\tif ( ! startAnimationRef.current ) {\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\t\tscaleValue\n\t\t\t\t);\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t\t`${ frameSize }px`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t\t`${ contentHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t\t`${ containerHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t\t`${ containerWidth }px`\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t\t`${ scaleContainerWidth }px`\n\t\t\t);\n\t\t}\n\n\t\t/**\n\t\t * Handle the zoom out animation:\n\t\t *\n\t\t * - Get the current scrollTop position.\n\t\t * - Calculate where the same scroll position is after scaling.\n\t\t * - Apply fixed positioning to the canvas with a transform offset\n\t\t *   to keep the canvas centered.\n\t\t * - Animate the scale and padding to the new scale and frame size.\n\t\t * - After the animation is complete, remove the fixed positioning\n\t\t *   and set the scroll position that keeps everything centered.\n\t\t */\n\t\tif ( startAnimationRef.current ) {\n\t\t\t// Don't allow a new transition to start again unless it was started by the zoom out mode changing.\n\t\t\tstartAnimationRef.current = false;\n\n\t\t\t/**\n\t\t\t * If we already have an animation running, reverse it.\n\t\t\t */\n\t\t\tif ( animationRef.current ) {\n\t\t\t\tanimationRef.current.reverse();\n\t\t\t\t// Swap the transition to/from refs so that we set the correct values when\n\t\t\t\t// finishZoomOutAnimation runs.\n\t\t\t\tconst tempTransitionFrom = transitionFromRef.current;\n\t\t\t\tconst tempTransitionTo = transitionToRef.current;\n\t\t\t\ttransitionFromRef.current = tempTransitionTo;\n\t\t\t\ttransitionToRef.current = tempTransitionFrom;\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Start a new zoom animation.\n\t\t\t\t */\n\n\t\t\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t\t\t// the most accurate.\n\t\t\t\ttransitionFromRef.current.scrollTop =\n\t\t\t\t\tiframeDocument.documentElement.scrollTop;\n\t\t\t\ttransitionFromRef.current.scrollHeight =\n\t\t\t\t\tiframeDocument.documentElement.scrollHeight;\n\t\t\t\t// Use containerHeight, as it's the previous container height before the zoom out animation starts.\n\t\t\t\ttransitionFromRef.current.containerHeight = containerHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tcontainerHeight:\n\t\t\t\t\t\tiframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.\n\t\t\t\t};\n\n\t\t\t\ttransitionToRef.current.scrollHeight = computeScrollHeightNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\t\t\t\ttransitionToRef.current.scrollTop = computeScrollTopNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\n\t\t\t\tanimationRef.current = startZoomOutAnimation();\n\n\t\t\t\t// If the user prefers reduced motion, finish the animation immediately and set the final state.\n\t\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\t\tfinishZoomOutAnimation();\n\t\t\t\t} else {\n\t\t\t\t\tanimationRef.current.onfinish = finishZoomOutAnimation;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [\n\t\tstartZoomOutAnimation,\n\t\tfinishZoomOutAnimation,\n\t\tprefersReducedMotion,\n\t\tisAutoScaled,\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\tcontainerHeight,\n\t\tmaxContainerWidth,\n\t\tscaleContainerWidth,\n\t] );\n\n\treturn {\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/iframe/use-scale-canvas.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useCallback } from '@wordpress/element';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\n\n/**\n * @typedef {Object} TransitionState\n * @property {number} scaleValue      Scale of the canvas.\n * @property {number} frameSize       Size of the frame/offset around the canvas.\n * @property {number} containerHeight containerHeight of the iframe.\n * @property {number} scrollTop       ScrollTop of the iframe.\n * @property {number} scrollHeight    ScrollHeight of the iframe.\n */\n\n/**\n * Calculate the scale of the canvas.\n *\n * @param {Object} options                     Object of options\n * @param {number} options.frameSize           Size of the frame/offset around the canvas\n * @param {number} options.containerWidth      Actual width of the canvas container\n * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.\n * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container\n * @return {number} Scale value between 0 and/or equal to 1\n */\nfunction calculateScale( {\n\tframeSize,\n\tcontainerWidth,\n\tmaxContainerWidth,\n\tscaleContainerWidth,\n} ) {\n\treturn (\n\t\t( Math.min( containerWidth, maxContainerWidth ) - frameSize * 2 ) /\n\t\tscaleContainerWidth\n\t);\n}\n\n/**\n * Compute the next scrollHeight based on the transition states.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollHeight based on scale and frame value changes.\n */\nfunction computeScrollHeightNext( transitionFrom, transitionTo ) {\n\tconst { scaleValue: prevScale, scrollHeight: prevScrollHeight } =\n\t\ttransitionFrom;\n\tconst { frameSize, scaleValue } = transitionTo;\n\n\treturn prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;\n}\n\n/**\n * Compute the next scrollTop position after scaling the iframe content.\n *\n * @param {TransitionState} transitionFrom Starting point of the transition\n * @param {TransitionState} transitionTo   Ending state of the transition\n * @return {number} Next scrollTop position after scaling the iframe content.\n */\nfunction computeScrollTopNext( transitionFrom, transitionTo ) {\n\tconst {\n\t\tcontainerHeight: prevContainerHeight,\n\t\tframeSize: prevFrameSize,\n\t\tscaleValue: prevScale,\n\t\tscrollTop: prevScrollTop,\n\t} = transitionFrom;\n\tconst { containerHeight, frameSize, scaleValue, scrollHeight } =\n\t\ttransitionTo;\n\t// Step 0: Start with the current scrollTop.\n\tlet scrollTopNext = prevScrollTop;\n\t// Step 1: Undo the effects of the previous scale and frame around the\n\t// midpoint of the visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + prevContainerHeight / 2 - prevFrameSize ) /\n\t\t\tprevScale -\n\t\tprevContainerHeight / 2;\n\n\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t// visible area.\n\tscrollTopNext =\n\t\t( scrollTopNext + containerHeight / 2 ) * scaleValue +\n\t\tframeSize -\n\t\tcontainerHeight / 2;\n\n\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t// iframe if the top of the iframe content is visible in the container.\n\t// The same edge case for the bottom is skipped because changing content\n\t// makes calculating it impossible.\n\tscrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t// iframe. We can't just let the browser handle it because we need to\n\t// animate the scaling.\n\tconst maxScrollTop = scrollHeight - containerHeight;\n\n\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t// possible scrollTop positions. Round the value to avoid subpixel\n\t// truncation by the browser which sometimes causes a 1px error.\n\treturn Math.round(\n\t\tMath.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )\n\t);\n}\n\n/**\n * Generate the keyframes to use for the zoom out animation.\n *\n * @param {TransitionState} transitionFrom Starting transition state.\n * @param {TransitionState} transitionTo   Ending transition state.\n * @return {Object[]} An array of keyframes to use for the animation.\n */\nfunction getAnimationKeyframes( transitionFrom, transitionTo ) {\n\tconst {\n\t\tscaleValue: prevScale,\n\t\tframeSize: prevFrameSize,\n\t\tscrollTop,\n\t} = transitionFrom;\n\tconst { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;\n\n\treturn [\n\t\t{\n\t\t\ttranslate: `0 0`,\n\t\t\tscale: prevScale,\n\t\t\tpaddingTop: `${ prevFrameSize / prevScale }px`,\n\t\t\tpaddingBottom: `${ prevFrameSize / prevScale }px`,\n\t\t},\n\t\t{\n\t\t\ttranslate: `0 ${ scrollTop - scrollTopNext }px`,\n\t\t\tscale: scaleValue,\n\t\t\tpaddingTop: `${ frameSize / scaleValue }px`,\n\t\t\tpaddingBottom: `${ frameSize / scaleValue }px`,\n\t\t},\n\t];\n}\n\n/**\n * @typedef {Object} ScaleCanvasResult\n * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.\n * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.\n * @property {Object}  contentResizeListener   A resize observer for the content.\n * @property {Object}  containerResizeListener A resize observer for the container.\n */\n\n/**\n * Handles scaling the canvas for the zoom out mode and animating between\n * the states.\n *\n * @param {Object}        options                   Object of options.\n * @param {number}        options.frameSize         Size of the frame around the content.\n * @param {Document}      options.iframeDocument    Document of the iframe.\n * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.\n * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.\n * @return {ScaleCanvasResult} Properties of the result.\n */\nexport function useScaleCanvas( {\n\tframeSize,\n\tiframeDocument,\n\tmaxContainerWidth = 750,\n\tscale,\n} ) {\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth, height: containerHeight },\n\t] = useResizeObserver();\n\n\tconst initialContainerWidthRef = useRef( 0 );\n\tconst isZoomedOut = scale !== 1;\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst isAutoScaled = scale === 'auto-scaled';\n\t// Track if the animation should start when the useEffect runs.\n\tconst startAnimationRef = useRef( false );\n\t// Track the animation so we know if we have an animation running,\n\t// and can cancel it, reverse it, call a finish event, etc.\n\tconst animationRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidthRef.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidthRef.current,\n\t\tcontainerWidth\n\t);\n\n\tconst scaleValue = isAutoScaled\n\t\t? calculateScale( {\n\t\t\t\tframeSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth,\n\t\t  } )\n\t\t: scale;\n\n\t/**\n\t * The starting transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t */\n\tconst transitionFromRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * The ending transition state for the zoom out animation.\n\t * @type {import('react').RefObject<TransitionState>}\n\t */\n\tconst transitionToRef = useRef( {\n\t\tscaleValue,\n\t\tframeSize,\n\t\tcontainerHeight: 0,\n\t\tscrollTop: 0,\n\t\tscrollHeight: 0,\n\t} );\n\n\t/**\n\t * Start the zoom out animation. This sets the necessary CSS variables\n\t * for animating the canvas and returns the Animation object.\n\t *\n\t * @return {Animation} The animation object for the zoom out animation.\n\t */\n\tconst startZoomOutAnimation = useCallback( () => {\n\t\tconst { scrollTop } = transitionFromRef.current;\n\t\tconst { scrollTop: scrollTopNext } = transitionToRef.current;\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\t// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior',\n\t\t\ttransitionFromRef.current.scrollHeight ===\n\t\t\t\ttransitionFromRef.current.containerHeight\n\t\t\t\t? 'auto'\n\t\t\t\t: 'scroll'\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\treturn iframeDocument.documentElement.animate(\n\t\t\tgetAnimationKeyframes(\n\t\t\t\ttransitionFromRef.current,\n\t\t\t\ttransitionToRef.current\n\t\t\t),\n\t\t\t{\n\t\t\t\teasing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',\n\t\t\t\tduration: 400,\n\t\t\t}\n\t\t);\n\t}, [ iframeDocument ] );\n\n\t/**\n\t * Callback when the zoom out animation is finished.\n\t * - Cleans up animations refs.\n\t * - Adds final CSS vars for scale and frame size to preserve the state.\n\t * - Removes the 'zoom-out-animation' class (which has the fixed positioning).\n\t * - Sets the final scroll position after the canvas is no longer in fixed position.\n\t * - Removes CSS vars related to the animation.\n\t * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.\n\t */\n\tconst finishZoomOutAnimation = useCallback( () => {\n\t\tstartAnimationRef.current = false;\n\t\tanimationRef.current = null;\n\n\t\t// Add our final scale and frame size now that the animation is done.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\ttransitionToRef.current.scaleValue\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t`${ transitionToRef.current.frameSize }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.remove( 'zoom-out-animation' );\n\n\t\t// Set the final scroll position that was just animated to.\n\t\t// Disable reason: Eslint isn't smart enough to know that this is a\n\t\t// DOM element. https://github.com/facebook/react/issues/31483\n\t\t// eslint-disable-next-line react-compiler/react-compiler\n\t\tiframeDocument.documentElement.scrollTop =\n\t\t\ttransitionToRef.current.scrollTop;\n\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t);\n\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-overflow-behavior'\n\t\t);\n\n\t\t// Update previous values.\n\t\ttransitionFromRef.current = transitionToRef.current;\n\t}, [ iframeDocument ] );\n\n\tconst previousIsZoomedOut = useRef( false );\n\n\t/**\n\t * Runs when zoom out mode is toggled, and sets the startAnimation flag\n\t * so the animation will start when the next useEffect runs. We _only_\n\t * want to animate when the zoom out mode is toggled, not when the scale\n\t * changes due to the container resizing.\n\t */\n\tuseEffect( () => {\n\t\tconst trigger =\n\t\t\tiframeDocument && previousIsZoomedOut.current !== isZoomedOut;\n\n\t\tpreviousIsZoomedOut.current = isZoomedOut;\n\n\t\tif ( ! trigger ) {\n\t\t\treturn;\n\t\t}\n\n\t\tstartAnimationRef.current = true;\n\n\t\tif ( ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t/**\n\t * This handles:\n\t * 1. Setting the correct scale and vars of the canvas when zoomed out\n\t * 2. If zoom out mode has been toggled, runs the animation of zooming in/out\n\t */\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the\n\t\t// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.\n\t\tif ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {\n\t\t\t// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when\n\t\t\t// exiting.\n\t\t\ttransitionFromRef.current.scaleValue = calculateScale( {\n\t\t\t\tframeSize: transitionFromRef.current.frameSize,\n\t\t\t\tcontainerWidth,\n\t\t\t\tmaxContainerWidth,\n\t\t\t\tscaleContainerWidth: containerWidth,\n\t\t\t} );\n\t\t}\n\n\t\tif ( scaleValue < 1 ) {\n\t\t\t// If we are not going to animate the transition, set the scale and frame size directly.\n\t\t\t// If we are animating, these values will be set when the animation is finished.\n\t\t\t// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to\n\t\t\t// animate the transition.\n\t\t\tif ( ! startAnimationRef.current ) {\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\t\t\tscaleValue\n\t\t\t\t);\n\t\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\t\t\t`${ frameSize }px`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t\t`${ contentHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t\t`${ containerHeight }px`\n\t\t\t);\n\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t\t`${ containerWidth }px`\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t\t`${ scaleContainerWidth }px`\n\t\t\t);\n\t\t}\n\n\t\t/**\n\t\t * Handle the zoom out animation:\n\t\t *\n\t\t * - Get the current scrollTop position.\n\t\t * - Calculate where the same scroll position is after scaling.\n\t\t * - Apply fixed positioning to the canvas with a transform offset\n\t\t *   to keep the canvas centered.\n\t\t * - Animate the scale and padding to the new scale and frame size.\n\t\t * - After the animation is complete, remove the fixed positioning\n\t\t *   and set the scroll position that keeps everything centered.\n\t\t */\n\t\tif ( startAnimationRef.current ) {\n\t\t\t// Don't allow a new transition to start again unless it was started by the zoom out mode changing.\n\t\t\tstartAnimationRef.current = false;\n\n\t\t\t/**\n\t\t\t * If we already have an animation running, reverse it.\n\t\t\t */\n\t\t\tif ( animationRef.current ) {\n\t\t\t\tanimationRef.current.reverse();\n\t\t\t\t// Swap the transition to/from refs so that we set the correct values when\n\t\t\t\t// finishZoomOutAnimation runs.\n\t\t\t\tconst tempTransitionFrom = transitionFromRef.current;\n\t\t\t\tconst tempTransitionTo = transitionToRef.current;\n\t\t\t\ttransitionFromRef.current = tempTransitionTo;\n\t\t\t\ttransitionToRef.current = tempTransitionFrom;\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Start a new zoom animation.\n\t\t\t\t */\n\n\t\t\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t\t\t// the most accurate.\n\t\t\t\ttransitionFromRef.current.scrollTop =\n\t\t\t\t\tiframeDocument.documentElement.scrollTop;\n\t\t\t\ttransitionFromRef.current.scrollHeight =\n\t\t\t\t\tiframeDocument.documentElement.scrollHeight;\n\t\t\t\t// Use containerHeight, as it's the previous container height before the zoom out animation starts.\n\t\t\t\ttransitionFromRef.current.containerHeight = containerHeight;\n\n\t\t\t\ttransitionToRef.current = {\n\t\t\t\t\tscaleValue,\n\t\t\t\t\tframeSize,\n\t\t\t\t\tcontainerHeight:\n\t\t\t\t\t\tiframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.\n\t\t\t\t};\n\n\t\t\t\ttransitionToRef.current.scrollHeight = computeScrollHeightNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\t\t\t\ttransitionToRef.current.scrollTop = computeScrollTopNext(\n\t\t\t\t\ttransitionFromRef.current,\n\t\t\t\t\ttransitionToRef.current\n\t\t\t\t);\n\n\t\t\t\tanimationRef.current = startZoomOutAnimation();\n\n\t\t\t\t// If the user prefers reduced motion, finish the animation immediately and set the final state.\n\t\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\t\tfinishZoomOutAnimation();\n\t\t\t\t} else {\n\t\t\t\t\tanimationRef.current.onfinish = finishZoomOutAnimation;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [\n\t\tstartZoomOutAnimation,\n\t\tfinishZoomOutAnimation,\n\t\tprefersReducedMotion,\n\t\tisAutoScaled,\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\tcontainerHeight,\n\t\tmaxContainerWidth,\n\t\tscaleContainerWidth,\n\t] );\n\n\treturn {\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t\tcontentResizeListener,\n\t\tcontainerResizeListener,\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}