framer-motion 12.4.11 → 12.4.13

package/dist/es/render/html/utils/parse-transform.mjs

@@ -0,0 +1,83 @@
+const radToDeg = (rad) => (rad * 180) / Math.PI;
+const rotate = (v) => {
+    const angle = radToDeg(Math.atan2(v[1], v[0]));
+    return rebaseAngle(angle);
+};
+const matrix2dParsers = {
+    x: 4,
+    y: 5,
+    translateX: 4,
+    translateY: 5,
+    scaleX: 0,
+    scaleY: 3,
+    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+    rotate,
+    rotateZ: rotate,
+    skewX: (v) => radToDeg(Math.atan(v[1])),
+    skewY: (v) => radToDeg(Math.atan(v[2])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
+};
+const rebaseAngle = (angle) => {
+    angle = angle % 360;
+    if (angle < 0)
+        angle += 360;
+    return angle;
+};
+const rotateZ = rotate;
+const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+const matrix3dParsers = {
+    x: 12,
+    y: 13,
+    z: 14,
+    translateX: 12,
+    translateY: 13,
+    translateZ: 14,
+    scaleX,
+    scaleY,
+    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
+    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
+    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
+    rotateZ,
+    rotate: rotateZ,
+    skewX: (v) => radToDeg(Math.atan(v[4])),
+    skewY: (v) => radToDeg(Math.atan(v[1])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
+};
+function defaultTransformValue(name) {
+    return name.includes("scale") ? 1 : 0;
+}
+function parseValueFromTransform(transform, name) {
+    if (!transform || transform === "none") {
+        return defaultTransformValue(name);
+    }
+    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+    let parsers;
+    let match;
+    if (matrix3dMatch) {
+        parsers = matrix3dParsers;
+        match = matrix3dMatch;
+    }
+    else {
+        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+        parsers = matrix2dParsers;
+        match = matrix2dMatch;
+    }
+    if (!match) {
+        return defaultTransformValue(name);
+    }
+    const valueParser = parsers[name];
+    const values = match[1].split(",").map(convertTransformToNumber);
+    return typeof valueParser === "function"
+        ? valueParser(values)
+        : values[valueParser];
+}
+const readTransformValue = (instance, name) => {
+    const { transform = "none" } = getComputedStyle(instance);
+    return parseValueFromTransform(transform, name);
+};
+function convertTransformToNumber(value) {
+    return parseFloat(value.trim());
+}
+
+export { parseValueFromTransform, readTransformValue };

package/dist/es/render/utils/motion-values.mjs

@@ -17,7 +17,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.4.11", `Attempting to mix Motion versions ${nextValue.version} with 12.4.11 may not work as expected.`);
+                warnOnce(nextValue.version === "12.4.13", `Attempting to mix Motion versions ${nextValue.version} with 12.4.13 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/get-context-window.mjs

@@ -0,0 +1,6 @@
+// Fixes https://github.com/motiondivision/motion/issues/2270
+const getContextWindow = ({ current }) => {
+    return current ? current.ownerDocument.defaultView : null;
+};
+
+export { getContextWindow };

package/dist/es/value/index.mjs

@@ -34,7 +34,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.4.11";
+        this.version = "12.4.13";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support

package/dist/framer-motion.dev.js

@@ -1106,7 +1106,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "12.4.11";
+            this.version = "12.4.13";
             /**
              * Tracks whether this value can output a velocity. Currently this is only true
              * if the value is numerical, but we might be able to widen the scope here and support
@@ -1949,25 +1949,89 @@
         }
     }
 
-    const isNumOrPxType = (v) => v === number || v === px;
-    const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-    const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
-        if (transform === "none" || !transform)
-            return 0;
-        const matrix3d = transform.match(/^matrix3d\((.+)\)$/u);
-        if (matrix3d) {
-            return getPosFromMatrix(matrix3d[1], pos3);
+    const radToDeg = (rad) => (rad * 180) / Math.PI;
+    const rotate = (v) => {
+        const angle = radToDeg(Math.atan2(v[1], v[0]));
+        return rebaseAngle(angle);
+    };
+    const matrix2dParsers = {
+        x: 4,
+        y: 5,
+        translateX: 4,
+        translateY: 5,
+        scaleX: 0,
+        scaleY: 3,
+        scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+        rotate,
+        rotateZ: rotate,
+        skewX: (v) => radToDeg(Math.atan(v[1])),
+        skewY: (v) => radToDeg(Math.atan(v[2])),
+        skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
+    };
+    const rebaseAngle = (angle) => {
+        angle = angle % 360;
+        if (angle < 0)
+            angle += 360;
+        return angle;
+    };
+    const rotateZ = rotate;
+    const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+    const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+    const matrix3dParsers = {
+        x: 12,
+        y: 13,
+        z: 14,
+        translateX: 12,
+        translateY: 13,
+        translateZ: 14,
+        scaleX,
+        scaleY,
+        scale: (v) => (scaleX(v) + scaleY(v)) / 2,
+        rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
+        rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
+        rotateZ,
+        rotate: rotateZ,
+        skewX: (v) => radToDeg(Math.atan(v[4])),
+        skewY: (v) => radToDeg(Math.atan(v[1])),
+        skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
+    };
+    function defaultTransformValue(name) {
+        return name.includes("scale") ? 1 : 0;
+    }
+    function parseValueFromTransform(transform, name) {
+        if (!transform || transform === "none") {
+            return defaultTransformValue(name);
         }
-        else {
-            const matrix = transform.match(/^matrix\((.+)\)$/u);
-            if (matrix) {
-                return getPosFromMatrix(matrix[1], pos2);
-            }
-            else {
-                return 0;
-            }
+        const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+        let parsers;
+        let match;
+        if (matrix3dMatch) {
+            parsers = matrix3dParsers;
+            match = matrix3dMatch;
         }
+        else {
+            const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+            parsers = matrix2dParsers;
+            match = matrix2dMatch;
+        }
+        if (!match) {
+            return defaultTransformValue(name);
+        }
+        const valueParser = parsers[name];
+        const values = match[1].split(",").map(convertTransformToNumber);
+        return typeof valueParser === "function"
+            ? valueParser(values)
+            : values[valueParser];
+    }
+    const readTransformValue = (instance, name) => {
+        const { transform = "none" } = getComputedStyle(instance);
+        return parseValueFromTransform(transform, name);
     };
+    function convertTransformToNumber(value) {
+        return parseFloat(value.trim());
+    }
+
+    const isNumOrPxType = (v) => v === number || v === px;
     const transformKeys = new Set(["x", "y", "z"]);
     const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
     function removeNonTranslationalTransform(visualElement) {
@@ -1990,8 +2054,8 @@
         bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
         right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
         // Transform
-        x: getTranslateFromMatrix(4, 13),
-        y: getTranslateFromMatrix(5, 14),
+        x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
+        y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
     };
     // Alias translate longform names
     positionalValues.translateX = positionalValues.x;
@@ -5965,7 +6029,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.4.11", `Attempting to mix Motion versions ${nextValue.version} with 12.4.11 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.4.13", `Attempting to mix Motion versions ${nextValue.version} with 12.4.13 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7065,8 +7129,7 @@
         }
         readValueFromInstance(instance, key) {
             if (transformProps.has(key)) {
-                const defaultType = getDefaultValueType(key);
-                return defaultType ? defaultType.default || 0 : 0;
+                return readTransformValue(instance, key);
             }
             else {
                 const computedStyle = getComputedStyle$1(instance);
@@ -10291,6 +10354,11 @@
         });
     }
 
+    // Fixes https://github.com/motiondivision/motion/issues/2270
+    const getContextWindow = ({ current }) => {
+        return current ? current.ownerDocument.defaultView : null;
+    };
+
     function isRefObject(ref) {
         return (ref &&
             typeof ref === "object" &&
@@ -10301,7 +10369,7 @@
      * @internal
      */
     class PanSession {
-        constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
+        constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
             /**
              * @internal
              */
@@ -10318,6 +10386,10 @@
              * @internal
              */
             this.handlers = {};
+            /**
+             * @internal
+             */
+            this.contextWindow = window;
             this.updatePoint = () => {
                 if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                     return;
@@ -10340,32 +10412,19 @@
                 onMove && onMove(this.lastMoveEvent, info);
             };
             this.handlePointerMove = (event, info) => {
-                this.index = getElementIndex(event.currentTarget);
-                if (event.target instanceof Element &&
-                    event.target.hasPointerCapture &&
-                    event.pointerId !== undefined) {
-                    try {
-                        if (!event.target.hasPointerCapture(event.pointerId)) {
-                            return;
-                        }
-                    }
-                    catch (e) { }
-                }
                 this.lastMoveEvent = event;
                 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
                 // Throttle mouse move event to once per frame
                 frame.update(this.updatePoint, true);
             };
             this.handlePointerUp = (event, info) => {
-                capturePointer(event, "release");
                 this.end();
                 const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
                 if (this.dragSnapToOrigin)
                     resumeAnimation && resumeAnimation();
                 if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                     return;
-                const panInfo = getPanInfo(event.type === "pointercancel" ||
-                    event.type === "lostpointercapture"
+                const panInfo = getPanInfo(event.type === "pointercancel"
                     ? this.lastMoveEventInfo
                     : transformPoint(info, this.transformPagePoint), this.history);
                 if (this.startEvent && onEnd) {
@@ -10379,6 +10438,7 @@
             this.dragSnapToOrigin = dragSnapToOrigin;
             this.handlers = handlers;
             this.transformPagePoint = transformPagePoint;
+            this.contextWindow = contextWindow || window;
             const info = extractEventInfo(event);
             const initialInfo = transformPoint(info, this.transformPagePoint);
             const { point } = initialInfo;
@@ -10387,20 +10447,7 @@
             const { onSessionStart } = handlers;
             onSessionStart &&
                 onSessionStart(event, getPanInfo(initialInfo, this.history));
-            capturePointer(event, "set");
-            this.removeListeners = pipe(addPointerEvent(event.currentTarget, "pointermove", this.handlePointerMove), addPointerEvent(event.currentTarget, "pointerup", this.handlePointerUp), addPointerEvent(event.currentTarget, "pointercancel", this.handlePointerUp), addPointerEvent(event.currentTarget, "lostpointercapture", (lostPointerEvent, lostPointerInfo) => {
-                const index = getElementIndex(lostPointerEvent.currentTarget);
-                /**
-                 * If the pointer has lost capture because it's moved in the DOM
-                 * then we need to re-capture it.
-                 */
-                if (index !== this.index) {
-                    capturePointer(lostPointerEvent, "set");
-                }
-                else {
-                    this.handlePointerUp(lostPointerEvent, lostPointerInfo);
-                }
-            }));
+            this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
         }
         updateHandlers(handlers) {
             this.handlers = handlers;
@@ -10464,11 +10511,6 @@
         }
         return currentVelocity;
     }
-    function getElementIndex(element) {
-        if (!element.parentNode)
-            return -1;
-        return Array.from(element.parentNode.children).indexOf(element);
-    }
 
     /**
      * Apply constraints to a point. These constraints are both physical along an
@@ -10725,6 +10767,7 @@
             }, {
                 transformPagePoint: this.visualElement.getTransformPagePoint(),
                 dragSnapToOrigin,
+                contextWindow: getContextWindow(this.visualElement),
             });
         }
         stop(event, info) {
@@ -11090,6 +11133,7 @@
         onPointerDown(pointerDownEvent) {
             this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
                 transformPagePoint: this.node.getTransformPagePoint(),
+                contextWindow: getContextWindow(this.node),
             });
         }
         createPanHandlers() {