{
  "version": 3,
  "sources": ["../../../src/components/media-edit/use-moving-animation.ts"],
  "sourcesContent": ["import { Controller } from '@react-spring/web';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\n\nfunction getAbsolutePosition( element: HTMLElement ) {\n\treturn {\n\t\ttop: element.offsetTop,\n\t\tleft: element.offsetLeft,\n\t};\n}\n\n/**\n * Hook used to compute the styles required to move a div into a new position.\n *\n * The way this animation works is the following:\n *  - It first renders the element as if there was no animation.\n *  - It takes a snapshot of the position of the element to use it\n *    as a destination point for the animation.\n *  - It restores the element to the previous position using a CSS transform\n *\n * @param triggerAnimationOnChange Variable used to trigger the animation if it changes.\n */\nexport default function useMovingAnimation(\n\ttriggerAnimationOnChange: unknown\n) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst previousRef = useRef< { top: number; left: number } >( undefined );\n\t// Capture position before DOM updates (during render).\n\t// This runs synchronously during render, before layout effects.\n\tif ( ref.current ) {\n\t\tpreviousRef.current = getAbsolutePosition( ref.current );\n\t}\n\tuseLayoutEffect( () => {\n\t\tconst previous = previousRef.current;\n\t\tif ( ! previous || ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {\n\t\t\treturn;\n\t\t}\n\t\tconst controller = new Controller( {\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\tconfig: { mass: 5, tension: 2000, friction: 200 },\n\t\t\tonChange( { value } ) {\n\t\t\t\tif ( ! ref.current ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlet { x, y } = value;\n\t\t\t\tx = Math.round( x );\n\t\t\t\ty = Math.round( y );\n\t\t\t\tconst finishedMoving = x === 0 && y === 0;\n\t\t\t\tref.current.style.transform = finishedMoving\n\t\t\t\t\t? ''\n\t\t\t\t\t: `translate3d(${ x }px,${ y }px,0)`;\n\t\t\t},\n\t\t} );\n\t\tref.current.style.transform = '';\n\t\tconst destination = getAbsolutePosition( ref.current );\n\t\tconst x = Math.round( previous.left - destination.left );\n\t\tconst y = Math.round( previous.top - destination.top );\n\t\tcontroller.start( { x: 0, y: 0, from: { x, y } } );\n\t\treturn () => {\n\t\t\tcontroller.stop();\n\t\t\tcontroller.set( { x: 0, y: 0 } );\n\t\t};\n\t\t// triggerAnimationOnChange is intentionally the only dependency - we want to\n\t\t// animate when this value changes, capturing position during render phase.\n\t}, [ triggerAnimationOnChange ] );\n\treturn ref;\n}\n"],
  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,cAAc;AAExC,SAAS,oBAAqB,SAAuB;AACpD,SAAO;AAAA,IACN,KAAK,QAAQ;AAAA,IACb,MAAM,QAAQ;AAAA,EACf;AACD;AAae,SAAR,mBACN,0BACC;AACD,QAAM,MAAM,OAA0B,IAAK;AAC3C,QAAM,cAAc,OAAyC,MAAU;AAGvE,MAAK,IAAI,SAAU;AAClB,gBAAY,UAAU,oBAAqB,IAAI,OAAQ;AAAA,EACxD;AACA,kBAAiB,MAAM;AACtB,UAAM,WAAW,YAAY;AAC7B,QAAK,CAAE,YAAY,CAAE,IAAI,SAAU;AAClC;AAAA,IACD;AACA,QAAK,OAAO,WAAY,kCAAmC,EAAE,SAAU;AACtE;AAAA,IACD;AACA,UAAM,aAAa,IAAI,WAAY;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,QAAQ,EAAE,MAAM,GAAG,SAAS,KAAM,UAAU,IAAI;AAAA,MAChD,SAAU,EAAE,MAAM,GAAI;AACrB,YAAK,CAAE,IAAI,SAAU;AACpB;AAAA,QACD;AACA,YAAI,EAAE,GAAAA,IAAG,GAAAC,GAAE,IAAI;AACf,QAAAD,KAAI,KAAK,MAAOA,EAAE;AAClB,QAAAC,KAAI,KAAK,MAAOA,EAAE;AAClB,cAAM,iBAAiBD,OAAM,KAAKC,OAAM;AACxC,YAAI,QAAQ,MAAM,YAAY,iBAC3B,KACA,eAAgBD,EAAE,MAAOC,EAAE;AAAA,MAC/B;AAAA,IACD,CAAE;AACF,QAAI,QAAQ,MAAM,YAAY;AAC9B,UAAM,cAAc,oBAAqB,IAAI,OAAQ;AACrD,UAAM,IAAI,KAAK,MAAO,SAAS,OAAO,YAAY,IAAK;AACvD,UAAM,IAAI,KAAK,MAAO,SAAS,MAAM,YAAY,GAAI;AACrD,eAAW,MAAO,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,EAAE,GAAG,EAAE,EAAE,CAAE;AACjD,WAAO,MAAM;AACZ,iBAAW,KAAK;AAChB,iBAAW,IAAK,EAAE,GAAG,GAAG,GAAG,EAAE,CAAE;AAAA,IAChC;AAAA,EAGD,GAAG,CAAE,wBAAyB,CAAE;AAChC,SAAO;AACR;",
  "names": ["x", "y"]
}