popmotion-pose
Version:
A declarative animation library for HTML and SVG
98 lines • 3.92 kB
JavaScript
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