Initial commit
This commit is contained in:
65
node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
generated
vendored
Normal file
65
node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
generated
vendored
Normal file
@ -0,0 +1,65 @@
|
||||
import { buildTransform } from './build-transform.mjs';
|
||||
import { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';
|
||||
import { transformProps } from './transform.mjs';
|
||||
import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
|
||||
import { numberValueTypes } from '../../dom/value-types/number.mjs';
|
||||
|
||||
function buildHTMLStyles(state, latestValues, transformTemplate) {
|
||||
const { style, vars, transformOrigin } = state;
|
||||
// Track whether we encounter any transform or transformOrigin values.
|
||||
let hasTransform = false;
|
||||
let hasTransformOrigin = false;
|
||||
/**
|
||||
* Loop over all our latest animated values and decide whether to handle them
|
||||
* as a style or CSS variable.
|
||||
*
|
||||
* Transforms and transform origins are kept separately for further processing.
|
||||
*/
|
||||
for (const key in latestValues) {
|
||||
const value = latestValues[key];
|
||||
if (transformProps.has(key)) {
|
||||
// If this is a transform, flag to enable further transform processing
|
||||
hasTransform = true;
|
||||
continue;
|
||||
}
|
||||
else if (isCSSVariableName(key)) {
|
||||
vars[key] = value;
|
||||
continue;
|
||||
}
|
||||
else {
|
||||
// Convert the value to its default value type, ie 0 -> "0px"
|
||||
const valueAsType = getValueAsType(value, numberValueTypes[key]);
|
||||
if (key.startsWith("origin")) {
|
||||
// If this is a transform origin, flag and enable further transform-origin processing
|
||||
hasTransformOrigin = true;
|
||||
transformOrigin[key] =
|
||||
valueAsType;
|
||||
}
|
||||
else {
|
||||
style[key] = valueAsType;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!latestValues.transform) {
|
||||
if (hasTransform || transformTemplate) {
|
||||
style.transform = buildTransform(latestValues, state.transform, transformTemplate);
|
||||
}
|
||||
else if (style.transform) {
|
||||
/**
|
||||
* If we have previously created a transform but currently don't have any,
|
||||
* reset transform style to none.
|
||||
*/
|
||||
style.transform = "none";
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Build a transformOrigin style. Uses the same defaults as the browser for
|
||||
* undefined origins.
|
||||
*/
|
||||
if (hasTransformOrigin) {
|
||||
const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
|
||||
style.transformOrigin = `${originX} ${originY} ${originZ}`;
|
||||
}
|
||||
}
|
||||
|
||||
export { buildHTMLStyles };
|
||||
62
node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
generated
vendored
Normal file
62
node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
generated
vendored
Normal file
@ -0,0 +1,62 @@
|
||||
import { transformPropOrder } from './transform.mjs';
|
||||
import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
|
||||
import { numberValueTypes } from '../../dom/value-types/number.mjs';
|
||||
|
||||
const translateAlias = {
|
||||
x: "translateX",
|
||||
y: "translateY",
|
||||
z: "translateZ",
|
||||
transformPerspective: "perspective",
|
||||
};
|
||||
const numTransforms = transformPropOrder.length;
|
||||
/**
|
||||
* Build a CSS transform style from individual x/y/scale etc properties.
|
||||
*
|
||||
* This outputs with a default order of transforms/scales/rotations, this can be customised by
|
||||
* providing a transformTemplate function.
|
||||
*/
|
||||
function buildTransform(latestValues, transform, transformTemplate) {
|
||||
// The transform string we're going to build into.
|
||||
let transformString = "";
|
||||
let transformIsDefault = true;
|
||||
/**
|
||||
* Loop over all possible transforms in order, adding the ones that
|
||||
* are present to the transform string.
|
||||
*/
|
||||
for (let i = 0; i < numTransforms; i++) {
|
||||
const key = transformPropOrder[i];
|
||||
const value = latestValues[key];
|
||||
if (value === undefined)
|
||||
continue;
|
||||
let valueIsDefault = true;
|
||||
if (typeof value === "number") {
|
||||
valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
|
||||
}
|
||||
else {
|
||||
valueIsDefault = parseFloat(value) === 0;
|
||||
}
|
||||
if (!valueIsDefault || transformTemplate) {
|
||||
const valueAsType = getValueAsType(value, numberValueTypes[key]);
|
||||
if (!valueIsDefault) {
|
||||
transformIsDefault = false;
|
||||
const transformName = translateAlias[key] || key;
|
||||
transformString += `${transformName}(${valueAsType}) `;
|
||||
}
|
||||
if (transformTemplate) {
|
||||
transform[key] = valueAsType;
|
||||
}
|
||||
}
|
||||
}
|
||||
transformString = transformString.trim();
|
||||
// If we have a custom `transform` template, pass our transform values and
|
||||
// generated transformString to that before returning
|
||||
if (transformTemplate) {
|
||||
transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
|
||||
}
|
||||
else if (transformIsDefault) {
|
||||
transformString = "none";
|
||||
}
|
||||
return transformString;
|
||||
}
|
||||
|
||||
export { buildTransform };
|
||||
8
node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
generated
vendored
Normal file
8
node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
const createHtmlRenderState = () => ({
|
||||
style: {},
|
||||
transform: {},
|
||||
transformOrigin: {},
|
||||
vars: {},
|
||||
});
|
||||
|
||||
export { createHtmlRenderState };
|
||||
30
node_modules/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs
generated
vendored
Normal file
30
node_modules/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs
generated
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
import { analyseComplexValue } from '../../../value/types/complex/index.mjs';
|
||||
import { getAnimatableNone } from '../../dom/value-types/animatable-none.mjs';
|
||||
|
||||
/**
|
||||
* If we encounter keyframes like "none" or "0" and we also have keyframes like
|
||||
* "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
|
||||
* the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
|
||||
* zero equivalents, i.e. "#fff0" or "0px 0px".
|
||||
*/
|
||||
const invalidTemplates = new Set(["auto", "none", "0"]);
|
||||
function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
|
||||
let i = 0;
|
||||
let animatableTemplate = undefined;
|
||||
while (i < unresolvedKeyframes.length && !animatableTemplate) {
|
||||
const keyframe = unresolvedKeyframes[i];
|
||||
if (typeof keyframe === "string" &&
|
||||
!invalidTemplates.has(keyframe) &&
|
||||
analyseComplexValue(keyframe).values.length) {
|
||||
animatableTemplate = unresolvedKeyframes[i];
|
||||
}
|
||||
i++;
|
||||
}
|
||||
if (animatableTemplate && name) {
|
||||
for (const noneIndex of noneKeyframeIndexes) {
|
||||
unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { makeNoneKeyframesAnimatable };
|
||||
9
node_modules/framer-motion/dist/es/render/html/utils/render.mjs
generated
vendored
Normal file
9
node_modules/framer-motion/dist/es/render/html/utils/render.mjs
generated
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
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]);
|
||||
}
|
||||
}
|
||||
|
||||
export { renderHTML };
|
||||
20
node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs
generated
vendored
Normal file
20
node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs
generated
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';
|
||||
import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
|
||||
|
||||
function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
||||
var _a;
|
||||
const { style } = props;
|
||||
const newValues = {};
|
||||
for (const key in style) {
|
||||
if (isMotionValue(style[key]) ||
|
||||
(prevProps.style &&
|
||||
isMotionValue(prevProps.style[key])) ||
|
||||
isForcedMotionValue(key, props) ||
|
||||
((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
|
||||
newValues[key] = style[key];
|
||||
}
|
||||
}
|
||||
return newValues;
|
||||
}
|
||||
|
||||
export { scrapeMotionValuesFromProps };
|
||||
28
node_modules/framer-motion/dist/es/render/html/utils/transform.mjs
generated
vendored
Normal file
28
node_modules/framer-motion/dist/es/render/html/utils/transform.mjs
generated
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Generate a list of every possible transform key.
|
||||
*/
|
||||
const transformPropOrder = [
|
||||
"transformPerspective",
|
||||
"x",
|
||||
"y",
|
||||
"z",
|
||||
"translateX",
|
||||
"translateY",
|
||||
"translateZ",
|
||||
"scale",
|
||||
"scaleX",
|
||||
"scaleY",
|
||||
"rotate",
|
||||
"rotateX",
|
||||
"rotateY",
|
||||
"rotateZ",
|
||||
"skew",
|
||||
"skewX",
|
||||
"skewY",
|
||||
];
|
||||
/**
|
||||
* A quick lookup for transform props.
|
||||
*/
|
||||
const transformProps = new Set(transformPropOrder);
|
||||
|
||||
export { transformPropOrder, transformProps };
|
||||
Reference in New Issue
Block a user