UNPKG

popmotion-pose

Version:

A declarative animation library for HTML and SVG

98 lines 3.92 kB
var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; import { setValue } from './flip'; import { resolveProp } from './utils'; import { getValueType } from '../inc/value-types'; var getPosFromMatrix = function (matrix, pos) { return parseFloat(matrix.split(', ')[pos]); }; var getTranslateFromMatrix = function (pos2, pos3) { return function (element, bbox, _a) { var transform = _a.transform; if (!transform || transform === 'none') return 0; var matrix3d = transform.match(/^matrix3d\((.+)\)$/); if (matrix3d) return getPosFromMatrix(matrix3d[1], pos3); return getPosFromMatrix(transform.match(/^matrix\((.+)\)$/)[1], pos2); }; }; var positionalValues = { width: function (element, _a) { var width = _a.width; return width; }, height: function (element, _a) { var height = _a.height; return height; }, top: function (element, bbox, _a) { var top = _a.top; return parseFloat(top); }, left: function (element, bbox, _a) { var left = _a.left; return parseFloat(left); }, bottom: function (element, _a, _b) { var height = _a.height; var top = _b.top; return parseFloat(top) + height; }, right: function (element, _a, _b) { var width = _a.width; var left = _b.left; return parseFloat(left) + width; }, x: getTranslateFromMatrix(4, 13), y: getTranslateFromMatrix(5, 14) }; var isPositionalKey = function (v) { return positionalValues[v] !== undefined; }; export var isPositional = function (pose) { return Object.keys(pose).some(isPositionalKey); }; export var convertPositionalUnits = function (state, nextPose) { var values = state.values, props = state.props; var element = props.element, elementStyler = props.elementStyler; var positionalPoseKeys = Object.keys(nextPose).filter(isPositionalKey); var changedPositionalKeys = []; var elementComputedStyle = getComputedStyle(element); var applyAtEndHasBeenCopied = false; positionalPoseKeys.forEach(function (key) { var value = values.get(key); var fromValueType = getValueType(value.raw.get()); var to = resolveProp(nextPose[key], props); var toValueType = getValueType(to); if (fromValueType !== toValueType) { changedPositionalKeys.push(key); if (!applyAtEndHasBeenCopied) { applyAtEndHasBeenCopied = true; nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign({}, nextPose.applyAtEnd) : {}; } nextPose.applyAtEnd[key] = nextPose.applyAtEnd[key] || nextPose[key]; setValue(state, key, to); } }); if (!changedPositionalKeys.length) return nextPose; var originBbox = element.getBoundingClientRect(); var top = elementComputedStyle.top, left = elementComputedStyle.left, bottom = elementComputedStyle.bottom, right = elementComputedStyle.right, transform = elementComputedStyle.transform; var originComputedStyle = { top: top, left: left, bottom: bottom, right: right, transform: transform }; elementStyler.render(); var targetBbox = element.getBoundingClientRect(); changedPositionalKeys.forEach(function (key) { setValue(state, key, positionalValues[key](element, originBbox, originComputedStyle)); nextPose[key] = positionalValues[key](element, targetBbox, elementComputedStyle); }); elementStyler.render(); return nextPose; }; //# sourceMappingURL=unit-conversion.js.map