motion 12.0.6 → 12.0.8-alpha.1

package/dist/cjs/index.js

@@ -1569,7 +1569,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.0.6";
+        this.version = "12.0.8-alpha.1";
         /**
          * 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
@@ -4503,7 +4503,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.0.6", `Attempting to mix Motion versions ${nextValue.version} with 12.0.6 may not work as expected.`);
+                warnOnce(nextValue.version === "12.0.8-alpha.1", `Attempting to mix Motion versions ${nextValue.version} with 12.0.8-alpha.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4725,6 +4725,9 @@ class VisualElement {
             this.valueSubscriptions.get(key)();
         }
         const valueIsTransform = transformProps.has(key);
+        if (valueIsTransform && this.onBindTransform) {
+            this.onBindTransform();
+        }
         const removeOnChange = value.on("change", (latestValue) => {
             this.latestValues[key] = latestValue;
             this.props.onUpdate && frame.preRender(this.notifyUpdate);
@@ -5251,6 +5254,16 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
 }
 
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+function renderHTML(element, { style, vars }, styleProp, projection) {
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+    // Loop over any CSS variables and assign those.
+    for (const key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
 /**
  * A set of attribute names that are always read/written as camel case.
  */
@@ -5280,16 +5293,6 @@ const camelCaseAttributes = new Set([
     "lengthAdjust",
 ]);
 
-const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
 function renderSVG(element, renderState, _styleProp, projection) {
     renderHTML(element, renderState, undefined, projection);
     for (const key in renderState.attrs) {
@@ -5336,12 +5339,35 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
+function updateSVGDimensions(instance, renderState) {
+    try {
+        renderState.dimensions =
+            typeof instance.getBBox === "function"
+                ? instance.getBBox()
+                : instance.getBoundingClientRect();
+    }
+    catch (e) {
+        // Most likely trying to measure an unrendered element under Firefox
+        renderState.dimensions = {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+        };
+    }
+}
+
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "svg";
         this.isSVGTag = false;
         this.measureInstanceViewportBox = createBox;
+        this.updateDimensions = () => {
+            if (this.current && !this.renderState.dimensions) {
+                updateSVGDimensions(this.current, this.renderState);
+            }
+        };
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -5357,6 +5383,11 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
+    onBindTransform() {
+        if (this.current && !this.renderState.dimensions) {
+            frame.postRender(this.updateDimensions);
+        }
+    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }