framer-motion/dist/es/utils/transform-rotated-parent.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"transform-rotated-parent.mjs","sources":["../../../src/utils/transform-rotated-parent.ts"],"sourcesContent":["import type { Point, TransformPoint } from \"motion-utils\"\nimport type { RefObject } from \"react\"\n\n/**\n * Creates a `transformPagePoint` function that corrects pointer coordinates\n * for a parent container with CSS transforms (rotation, scale, skew).\n *\n * When dragging elements inside a transformed parent, pointer coordinates\n * need to be transformed through the inverse of the parent's transform\n * so the drag offset is in local space.\n *\n * Works with both static and continuously animating transforms.\n *\n * @example\n * ```jsx\n * function App() {\n *   const ref = useRef(null)\n *\n *   return (\n *     <motion.div ref={ref} style={{ rotate: 90 }}>\n *       <MotionConfig transformPagePoint={correctParentTransform(ref)}>\n *         <motion.div drag />\n *       </MotionConfig>\n *     </motion.div>\n *   )\n * }\n * ```\n *\n * @param parentRef - A React ref to the transformed parent element\n * @returns A transformPagePoint function for use with MotionConfig\n *\n * @public\n */\nexport function correctParentTransform(\n    parentRef: RefObject<HTMLElement | null>\n): TransformPoint {\n    return (point: Point): Point => {\n        const parent = parentRef.current\n        if (!parent) return point\n\n        const inv = getInverseMatrix(parent)\n        if (!inv) return point\n\n        // Get center of rotation in page space\n        const rect = parent.getBoundingClientRect()\n        const cx = rect.left + window.scrollX + rect.width / 2\n        const cy = rect.top + window.scrollY + rect.height / 2\n\n        // Transform (point - center) through inverse, then add center back\n        const dx = point.x - cx\n        const dy = point.y - cy\n        return {\n            x: cx + inv.a * dx + inv.c * dy,\n            y: cy + inv.b * dx + inv.d * dy,\n        }\n    }\n}\n\ninterface InverseMatrix {\n    a: number\n    b: number\n    c: number\n    d: number\n}\n\nfunction getInverseMatrix(element: HTMLElement): InverseMatrix | null {\n    const { transform } = getComputedStyle(element)\n    if (!transform || transform === \"none\") return null\n\n    const match =\n        transform.match(/^matrix3d\\((.*)\\)$/u) ||\n        transform.match(/^matrix\\((.*)\\)$/u)\n    if (!match) return null\n\n    const v = match[1].split(\",\").map(Number)\n    const is3d = transform.startsWith(\"matrix3d\")\n    const a = v[0],\n        b = v[1]\n    const c = is3d ? v[4] : v[2]\n    const d = is3d ? v[5] : v[3]\n\n    const det = a * d - b * c\n    if (Math.abs(det) < 1e-10) return null\n\n    return { a: d / det, b: -b / det, c: -c / det, d: a / det }\n}\n"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;AACG,SAAU,sBAAsB,CAClC,SAAwC,EAAA;IAExC,OAAO,CAAC,KAAY,KAAW;AAC3B,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAChC,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,KAAK;AAEzB,QAAA,MAAM,GAAG,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,KAAK;;AAGtB,QAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;AAC3C,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC;AACtD,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;;AAGtD,QAAA,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,EAAE;AACvB,QAAA,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,EAAE;QACvB,OAAO;AACH,YAAA,CAAC,EAAE,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE;AAC/B,YAAA,CAAC,EAAE,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE;SAClC;AACL,IAAA,CAAC;AACL;AASA,SAAS,gBAAgB,CAAC,OAAoB,EAAA;IAC1C,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAC/C,IAAA,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;AAEnD,IAAA,MAAM,KAAK,GACP,SAAS,CAAC,KAAK,CAAC,qBAAqB,CAAC;AACtC,QAAA,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC;AACxC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;AAEvB,IAAA,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;IACzC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC;AAC7C,IAAA,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACV,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACZ,IAAA,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC5B,IAAA,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAE5B,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;AACzB,IAAA,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK;AAAE,QAAA,OAAO,IAAI;IAEtC,OAAO,EAAE,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE;AAC/D;;;;"}