@kcirtaptrick/framer-motion
Version:
A simple and powerful React animation library
111 lines (108 loc) • 4.73 kB
JavaScript
import { __rest, __assign } from 'tslib';
import { visualElement } from '../index.mjs';
import { getOrigin, checkTargetForNewValues } from '../utils/setters.mjs';
import { buildHTMLStyles } from './utils/build-styles.mjs';
import { isCSSVariable } from '../dom/utils/is-css-variable.mjs';
import { parseDomVariant } from '../dom/utils/parse-dom-variant.mjs';
import { isTransformProp } from './utils/transform.mjs';
import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
import { renderHTML } from './utils/render.mjs';
import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
import { measureViewportBox } from '../../projection/utils/measure.mjs';
function getComputedStyle(element) {
return window.getComputedStyle(element);
}
var htmlConfig = {
treeType: "dom",
readValueFromInstance: function (domElement, key) {
if (isTransformProp(key)) {
var defaultType = getDefaultValueType(key);
return defaultType ? defaultType.default || 0 : 0;
}
else {
var computedStyle = getComputedStyle(domElement);
return ((isCSSVariable(key)
? computedStyle.getPropertyValue(key)
: computedStyle[key]) || 0);
}
},
sortNodePosition: function (a, b) {
/**
* compareDocumentPosition returns a bitmask, by using the bitwise &
* we're returning true if 2 in that bitmask is set to true. 2 is set
* to true if b preceeds a.
*/
return a.compareDocumentPosition(b) & 2 ? 1 : -1;
},
getBaseTarget: function (props, key) {
var _a;
return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
},
measureViewportBox: function (element, _a) {
var transformPagePoint = _a.transformPagePoint;
return measureViewportBox(element, transformPagePoint);
},
/**
* Reset the transform on the current Element. This is called as part
* of a batched process across the entire layout tree. To remove this write
* cycle it'd be interesting to see if it's possible to "undo" all the current
* layout transforms up the tree in the same way this.getBoundingBoxWithoutTransforms
* works
*/
resetTransform: function (element, domElement, props) {
var transformTemplate = props.transformTemplate;
domElement.style.transform = transformTemplate
? transformTemplate({}, "")
: "none";
// Ensure that whatever happens next, we restore our transform on the next frame
element.scheduleRender();
},
restoreTransform: function (instance, mutableState) {
instance.style.transform = mutableState.style.transform;
},
removeValueFromRenderState: function (key, _a) {
var vars = _a.vars, style = _a.style;
delete vars[key];
delete style[key];
},
/**
* Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
* can be animated by Motion.
*/
makeTargetAnimatable: function (element, _a, _b, isMounted) {
var transformValues = _b.transformValues;
if (isMounted === void 0) { isMounted = true; }
var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
var origin = getOrigin(target, transition || {}, element);
/**
* If Framer has provided a function to convert `Color` etc value types, convert them
*/
if (transformValues) {
if (transitionEnd)
transitionEnd = transformValues(transitionEnd);
if (target)
target = transformValues(target);
if (origin)
origin = transformValues(origin);
}
if (isMounted) {
checkTargetForNewValues(element, target, origin);
var parsed = parseDomVariant(element, target, origin, transitionEnd);
transitionEnd = parsed.transitionEnd;
target = parsed.target;
}
return __assign({ transition: transition, transitionEnd: transitionEnd }, target);
},
scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
build: function (element, renderState, latestValues, options, props) {
if (element.isVisible !== undefined) {
renderState.style.visibility = element.isVisible
? "visible"
: "hidden";
}
buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
},
render: renderHTML,
};
var htmlVisualElement = visualElement(htmlConfig);
export { getComputedStyle, htmlConfig, htmlVisualElement };