popmotion-pose/lib/dom/flip.js

A declarative animation library for HTML and SVG

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { value, Action } from 'popmotion';
import { resolveProp, measureWithoutTransform } from './utils';
var ORIGIN_START = 0;
var ORIGIN_CENTER = '50%';
var ORIGIN_END = '100%';
var findCenter = function (_a) {
    var top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left;
    return ({
        x: (left + right) / 2,
        y: (top + bottom) / 2
    });
};
var positionalProps = ['width', 'height', 'top', 'left', 'bottom', 'right'];
var positionalPropsDict = new Set(positionalProps);
var checkPositionalProp = function (key) { return positionalPropsDict.has(key); };
var hasPositionalProps = function (pose) {
    return Object.keys(pose).some(checkPositionalProp);
};
export var isFlipPose = function (flip, key, state) {
    return state.props.element instanceof HTMLElement &&
        (flip === true || key === 'flip');
};
export var setValue = function (_a, key, to) {
    var values = _a.values, props = _a.props;
    if (values.has(key)) {
        var raw = values.get(key).raw;
        raw.update(to);
        raw.update(to);
    }
    else {
        values.set(key, {
            raw: value(to, function (v) { return props.elementStyler.set(key, v); })
        });
    }
};
var explicitlyFlipPose = function (state, nextPose) {
    var _a = state.props, dimensions = _a.dimensions, elementStyler = _a.elementStyler;
    dimensions.measure();
    var width = nextPose.width, height = nextPose.height, top = nextPose.top, left = nextPose.left, bottom = nextPose.bottom, right = nextPose.right, position = nextPose.position, remainingPose = __rest(nextPose, ["width", "height", "top", "left", "bottom", "right", "position"]);
    var propsToSet = positionalProps.concat('position').reduce(function (acc, key) {
        if (nextPose[key] !== undefined) {
            acc[key] = resolveProp(nextPose[key], state.props);
        }
        return acc;
    }, {});
    elementStyler.set(propsToSet).render();
    return implicitlyFlipPose(state, remainingPose);
};
var implicitlyFlipPose = function (state, nextPose) {
    var _a = state.props, dimensions = _a.dimensions, element = _a.element, elementStyler = _a.elementStyler;
    if (!dimensions.has())
        return {};
    var prev = dimensions.get();
    var next = measureWithoutTransform(element);
    var originX = prev.left === next.left
        ? ORIGIN_START
        : prev.right === next.right ? ORIGIN_END : ORIGIN_CENTER;
    var originY = prev.top === next.top
        ? ORIGIN_START
        : prev.bottom === next.bottom ? ORIGIN_END : ORIGIN_CENTER;
    elementStyler.set({ originX: originX, originY: originY });
    if (prev.width !== next.width) {
        setValue(state, 'scaleX', prev.width / next.width);
        nextPose.scaleX = 1;
    }
    if (prev.height !== next.height) {
        setValue(state, 'scaleY', prev.height / next.height);
        nextPose.scaleY = 1;
    }
    var prevCenter = findCenter(prev);
    var nextCenter = findCenter(next);
    if (originX === ORIGIN_CENTER) {
        setValue(state, 'x', prevCenter.x - nextCenter.x);
        nextPose.x = 0;
    }
    if (originY === ORIGIN_CENTER) {
        setValue(state, 'y', prevCenter.y - nextCenter.y);
        nextPose.y = 0;
    }
    elementStyler.render();
    return nextPose;
};
export var flipPose = function (props, nextPose) {
    return hasPositionalProps(nextPose)
        ? explicitlyFlipPose(props, nextPose)
        : implicitlyFlipPose(props, nextPose);
};
export { Action };
//# sourceMappingURL=flip.js.map