popmotion-pose/lib/dom/pose.js

A declarative animation library for HTML and SVG

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);
};
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 poseFactory from '../factories/pose';
import createDimensions from './dimensions';
import appendEventListeners from './events';
import { flipPose, isFlipPose } from './flip';
import { getValueType } from '../inc/value-types';
import { styler, Action, ValueReaction } from 'popmotion';
import { isPositional, convertPositionalUnits } from './unit-conversion';
export { Action, ValueReaction };
var getCurrent = function (prop) { return function (_a) {
    var elementStyler = _a.elementStyler;
    return elementStyler.get(prop);
}; };
var dragPoses = function (draggable) {
    var drag = {
        preTransition: function (_a) {
            var dimensions = _a.dimensions;
            return dimensions.measure();
        }
    };
    var dragEnd = {};
    if (draggable === true || draggable === 'x') {
        drag.x = dragEnd.x = getCurrent('x');
    }
    if (draggable === true || draggable === 'y') {
        drag.y = dragEnd.y = getCurrent('y');
    }
    return { drag: drag, dragEnd: dragEnd };
};
var createPoseConfig = function (element, _a) {
    var onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onPressStart = _a.onPressStart, onPressEnd = _a.onPressEnd, draggable = _a.draggable, hoverable = _a.hoverable, focusable = _a.focusable, pressable = _a.pressable, dragBounds = _a.dragBounds, config = __rest(_a, ["onDragStart", "onDragEnd", "onPressStart", "onPressEnd", "draggable", "hoverable", "focusable", "pressable", "dragBounds"]);
    var poseConfig = __assign(__assign({ flip: {} }, config), { props: __assign(__assign({}, config.props), { onDragStart: onDragStart,
            onDragEnd: onDragEnd,
            onPressStart: onPressStart,
            onPressEnd: onPressEnd,
            dragBounds: dragBounds,
            draggable: draggable,
            hoverable: hoverable,
            focusable: focusable,
            pressable: pressable,
            element: element, elementStyler: styler(element, { preparseOutput: false }), dimensions: createDimensions(element) }) });
    if (draggable) {
        var _b = dragPoses(draggable), drag = _b.drag, dragEnd = _b.dragEnd;
        poseConfig.drag = __assign(__assign({}, drag), poseConfig.drag);
        poseConfig.dragEnd = __assign(__assign({}, dragEnd), poseConfig.dragEnd);
    }
    return poseConfig;
};
var domPose = poseFactory({
    posePriority: ['drag', 'press', 'focus', 'hover'],
    transformPose: function (_a, name, state) {
        var flip = _a.flip, pose = __rest(_a, ["flip"]);
        if (isFlipPose(flip, name, state)) {
            return flipPose(state, pose);
        }
        else if (isPositional(pose)) {
            return convertPositionalUnits(state, pose);
        }
        return pose;
    },
    forceRender: function (_a) {
        var elementStyler = _a.elementStyler;
        elementStyler.render();
    },
    addListenerToValue: function (key, elementStyler) { return function (v) { return elementStyler.set(key, v); }; },
    readValueFromSource: function (key, _a) {
        var elementStyler = _a.elementStyler, dragBounds = _a.dragBounds;
        var value = elementStyler.get(key);
        if (dragBounds && (key === 'x' || key === 'y')) {
            var bound = key === 'x'
                ? dragBounds.left || dragBounds.right
                : dragBounds.top || dragBounds.bottom;
            if (bound) {
                var boundType = getValueType(bound);
                value = boundType.transform(value);
            }
        }
        return isNaN(value) ? value : parseFloat(value);
    },
    setValueNative: function (key, to, _a) {
        var elementStyler = _a.elementStyler;
        return elementStyler.set(key, to);
    },
    extendAPI: function (api, _a, config) {
        var props = _a.props, activeActions = _a.activeActions;
        var measure = props.dimensions.measure;
        var poserApi = __assign(__assign({}, api), { addChild: function (element, childConfig) {
                return api._addChild(createPoseConfig(element, childConfig), domPose);
            }, measure: measure, flip: function (op) {
                if (op) {
                    measure();
                    op();
                }
                return api.set('flip');
            } });
        props.elementStyler.render();
        appendEventListeners(props.element, activeActions, poserApi, config);
        return poserApi;
    }
});
export default (function (element, config) {
    return domPose(createPoseConfig(element, config));
});
//# sourceMappingURL=pose.js.map