UNPKG

@kcirtaptrick/framer-motion

Version:

A simple and powerful React animation library

130 lines (127 loc) 4.92 kB
import { __read } from 'tslib'; import { clamp, mix, progress } from 'popmotion'; import { calcLength } from '../../../projection/geometry/delta-calc.mjs'; /** * Apply constraints to a point. These constraints are both physical along an * axis, and an elastic factor that determines how much to constrain the point * by if it does lie outside the defined parameters. */ function applyConstraints(point, _a, elastic) { var min = _a.min, max = _a.max; if (min !== undefined && point < min) { // If we have a min point defined, and this is outside of that, constrain point = elastic ? mix(min, point, elastic.min) : Math.max(point, min); } else if (max !== undefined && point > max) { // If we have a max point defined, and this is outside of that, constrain point = elastic ? mix(max, point, elastic.max) : Math.min(point, max); } return point; } /** * Calculate constraints in terms of the viewport when defined relatively to the * measured axis. This is measured from the nearest edge, so a max constraint of 200 * on an axis with a max value of 300 would return a constraint of 500 - axis length */ function calcRelativeAxisConstraints(axis, min, max) { return { min: min !== undefined ? axis.min + min : undefined, max: max !== undefined ? axis.max + max - (axis.max - axis.min) : undefined, }; } /** * Calculate constraints in terms of the viewport when * defined relatively to the measured bounding box. */ function calcRelativeConstraints(layoutBox, _a) { var top = _a.top, left = _a.left, bottom = _a.bottom, right = _a.right; return { x: calcRelativeAxisConstraints(layoutBox.x, left, right), y: calcRelativeAxisConstraints(layoutBox.y, top, bottom), }; } /** * Calculate viewport constraints when defined as another viewport-relative axis */ function calcViewportAxisConstraints(layoutAxis, constraintsAxis) { var _a; var min = constraintsAxis.min - layoutAxis.min; var max = constraintsAxis.max - layoutAxis.max; // If the constraints axis is actually smaller than the layout axis then we can // flip the constraints if (constraintsAxis.max - constraintsAxis.min < layoutAxis.max - layoutAxis.min) { _a = __read([max, min], 2), min = _a[0], max = _a[1]; } return { min: min, max: max }; } /** * Calculate viewport constraints when defined as another viewport-relative box */ function calcViewportConstraints(layoutBox, constraintsBox) { return { x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x), y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y), }; } /** * Calculate a transform origin relative to the source axis, between 0-1, that results * in an asthetically pleasing scale/transform needed to project from source to target. */ function calcOrigin(source, target) { var origin = 0.5; var sourceLength = calcLength(source); var targetLength = calcLength(target); if (targetLength > sourceLength) { origin = progress(target.min, target.max - sourceLength, source.min); } else if (sourceLength > targetLength) { origin = progress(source.min, source.max - targetLength, target.min); } return clamp(0, 1, origin); } /** * Rebase the calculated viewport constraints relative to the layout.min point. */ function rebaseAxisConstraints(layout, constraints) { var relativeConstraints = {}; if (constraints.min !== undefined) { relativeConstraints.min = constraints.min - layout.min; } if (constraints.max !== undefined) { relativeConstraints.max = constraints.max - layout.min; } return relativeConstraints; } var defaultElastic = 0.35; /** * Accepts a dragElastic prop and returns resolved elastic values for each axis. */ function resolveDragElastic(dragElastic) { if (dragElastic === void 0) { dragElastic = defaultElastic; } if (dragElastic === false) { dragElastic = 0; } else if (dragElastic === true) { dragElastic = defaultElastic; } return { x: resolveAxisElastic(dragElastic, "left", "right"), y: resolveAxisElastic(dragElastic, "top", "bottom"), }; } function resolveAxisElastic(dragElastic, minLabel, maxLabel) { return { min: resolvePointElastic(dragElastic, minLabel), max: resolvePointElastic(dragElastic, maxLabel), }; } function resolvePointElastic(dragElastic, label) { var _a; return typeof dragElastic === "number" ? dragElastic : (_a = dragElastic[label]) !== null && _a !== void 0 ? _a : 0; } export { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };