framer-motion 5.4.0 → 5.4.3

package/dist/cjs/three-entry.js

@@ -0,0 +1,305 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var useMotionValue = require('./use-motion-value-73ed7c77.js');
+var React = require('react');
+var popmotion = require('popmotion');
+var three = require('three');
+var fiber = require('@react-three/fiber');
+require('hey-listen');
+require('framesync');
+require('style-value-types');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function useHover(isStatic, _a, visualElement) {
+    var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, onPointerOver = _a.onPointerOver, onPointerOut = _a.onPointerOut;
+    var isHoverEnabled = whileHover || onHoverStart || onHoverEnd;
+    if (isStatic || !visualElement || !isHoverEnabled)
+        return {};
+    return {
+        onPointerOver: function (event) {
+            var _a;
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Hover, true);
+            onPointerOver === null || onPointerOver === void 0 ? void 0 : onPointerOver(event);
+        },
+        onPointerOut: function (event) {
+            var _a;
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Hover, false);
+            onPointerOut === null || onPointerOut === void 0 ? void 0 : onPointerOut(event);
+        },
+    };
+}
+
+function useTap(isStatic, _a, visualElement) {
+    var whileTap = _a.whileTap, onTapStart = _a.onTapStart, onTap = _a.onTap, onTapCancel = _a.onTapCancel, onPointerDown = _a.onPointerDown;
+    var isTapEnabled = onTap || onTapStart || onTapCancel || whileTap;
+    var isPressing = React.useRef(false);
+    var cancelPointerEndListeners = React.useRef(null);
+    if (isStatic || !visualElement || !isTapEnabled)
+        return {};
+    function removePointerEndListener() {
+        var _a;
+        (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
+        cancelPointerEndListeners.current = null;
+    }
+    function checkPointerEnd() {
+        var _a;
+        removePointerEndListener();
+        isPressing.current = false;
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Tap, false);
+        return !useMotionValue.isDragActive();
+    }
+    function onPointerUp(event, info) {
+        if (!checkPointerEnd())
+            return;
+        /**
+         * We only count this as a tap gesture if the event.target is the same
+         * as, or a child of, this component's element
+         */
+        onTap === null || onTap === void 0 ? void 0 : onTap(event, info);
+    }
+    function onPointerCancel(event, info) {
+        if (!checkPointerEnd())
+            return;
+        onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);
+    }
+    return {
+        onPointerDown: useMotionValue.wrapHandler(function (event, info) {
+            var _a;
+            removePointerEndListener();
+            if (isPressing.current)
+                return;
+            isPressing.current = true;
+            cancelPointerEndListeners.current = popmotion.pipe(useMotionValue.addPointerEvent(window, "pointerup", onPointerUp), useMotionValue.addPointerEvent(window, "pointercancel", onPointerCancel));
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Tap, true);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+        }, true),
+    };
+}
+
+var useRender = function (Component, props, _projectionId, ref, _state, isStatic, visualElement) {
+    return React.createElement(Component, tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ ref: ref }, useMotionValue.filterProps(props, false, false)), { onUpdate: props.onInstanceUpdate }), useHover(isStatic, props, visualElement)), useTap(isStatic, props, visualElement)));
+};
+
+var setVector = function (name, defaultValue) {
+    return function (i) {
+        return function (instance, value) {
+            var _a;
+            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Vector3(defaultValue));
+            var vector = instance[name];
+            vector.setComponent(i, value);
+        };
+    };
+};
+var setEuler = function (name, defaultValue) {
+    return function (axis) {
+        return function (instance, value) {
+            var _a;
+            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Euler(defaultValue));
+            var euler = instance[name];
+            euler[axis] = value;
+        };
+    };
+};
+var setColor = function (name) { return function (instance, value) {
+    var _a;
+    (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Color(value));
+    instance[name].set(value);
+}; };
+var setScale = setVector("scale", 1);
+var setPosition = setVector("position", 0);
+var setRotation = setEuler("rotation", 0);
+var setters = {
+    x: setPosition(0),
+    y: setPosition(1),
+    z: setPosition(2),
+    scale: function (instance, value) {
+        var _a;
+        (_a = instance.scale) !== null && _a !== void 0 ? _a : (instance.scale = new three.Vector3(1));
+        var scale = instance.scale;
+        scale.set(value, value, value);
+    },
+    scaleX: setScale(0),
+    scaleY: setScale(1),
+    scaleZ: setScale(2),
+    rotateX: setRotation("x"),
+    rotateY: setRotation("y"),
+    rotateZ: setRotation("z"),
+    color: setColor("color"),
+    specular: setColor("specular"),
+};
+function setThreeValue(instance, key, values) {
+    if (setters[key]) {
+        setters[key](instance, values[key]);
+    }
+    else {
+        instance[key] = values[key];
+    }
+}
+
+var readVector = function (name, defaultValue) {
+    return function (axis) {
+        return function (instance) {
+            var value = instance[name];
+            return value ? value[axis] : defaultValue;
+        };
+    };
+};
+var readPosition = readVector("position", 0);
+var readScale = readVector("scale", 1);
+var readRotation = readVector("rotation", 0);
+var readers = {
+    x: readPosition("x"),
+    y: readPosition("y"),
+    z: readPosition("z"),
+    scale: readScale("x"),
+    scaleX: readScale("x"),
+    scaleY: readScale("y"),
+    scaleZ: readScale("z"),
+    rotateX: readRotation("x"),
+    rotateY: readRotation("y"),
+    rotateZ: readRotation("z"),
+};
+function readAnimatableValue(value) {
+    if (!value)
+        return;
+    if (value instanceof three.Color) {
+        return value.getStyle();
+    }
+    else {
+        return value;
+    }
+}
+function readThreeValue(instance, name) {
+    var _a;
+    return readers[name]
+        ? readers[name](instance)
+        : (_a = readAnimatableValue(instance[name])) !== null && _a !== void 0 ? _a : 0;
+}
+
+var axes = ["x", "y", "z"];
+var valueMap = {
+    "position-x": "x",
+    "position-y": "y",
+    "position-z": "z",
+    "rotation-x": "rotateX",
+    "rotation-y": "rotateY",
+    "rotation-z": "rotateZ",
+    "scale-x": "scaleX",
+    "scale-y": "scaleY",
+    "scale-z": "scaleZ",
+};
+var scrapeMotionValuesFromProps = function (props) {
+    var motionValues = {};
+    for (var key in props) {
+        var prop = props[key];
+        if (useMotionValue.isMotionValue(prop)) {
+            motionValues[valueMap[key] || key] = prop;
+        }
+        else if (Array.isArray(prop)) {
+            for (var i = 0; i < prop.length; i++) {
+                var value = prop[i];
+                if (useMotionValue.isMotionValue(value)) {
+                    var name_1 = valueMap[key + "-" + axes[i]];
+                    motionValues[name_1] = value;
+                }
+            }
+        }
+    }
+    return motionValues;
+};
+
+var createRenderState = function () { return ({}); };
+var threeVisualElement = useMotionValue.visualElement({
+    treeType: "three",
+    readValueFromInstance: readThreeValue,
+    getBaseTarget: function () {
+        return undefined;
+    },
+    sortNodePosition: function (a, b) {
+        return a.id - b.id;
+    },
+    makeTargetAnimatable: function (element, target) {
+        useMotionValue.checkTargetForNewValues(element, target, {});
+        return target;
+    },
+    restoreTransform: function () { },
+    resetTransform: function () { },
+    removeValueFromRenderState: function (_key, _renderState) { },
+    measureViewportBox: useMotionValue.createBox,
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    build: function (_element, state, latestValues) {
+        for (var key in latestValues) {
+            state[key] = latestValues[key];
+        }
+    },
+    render: function (instance, renderState) {
+        for (var key in renderState) {
+            setThreeValue(instance, key, renderState);
+        }
+    },
+});
+var createVisualElement = function (_, options) {
+    return threeVisualElement(options);
+};
+
+var useVisualState = useMotionValue.makeUseVisualState({
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    createRenderState: createRenderState,
+});
+var preloadedFeatures = tslib.__assign({}, useMotionValue.animations);
+function custom(Component) {
+    return useMotionValue.createMotionComponent({
+        Component: Component,
+        preloadedFeatures: preloadedFeatures,
+        useRender: useRender,
+        useVisualState: useVisualState,
+        createVisualElement: createVisualElement,
+    });
+}
+var componentCache = new Map();
+var motion = new Proxy(custom, {
+    get: function (_, key) {
+        !componentCache.has(key) && componentCache.set(key, custom(key));
+        return componentCache.get(key);
+    },
+});
+
+function MotionCanvas(_a) {
+    var children = _a.children, props = tslib.__rest(_a, ["children"]);
+    var motionContext = React.useContext(useMotionValue.MotionContext);
+    return (React__namespace.createElement(fiber.Canvas, tslib.__assign({}, props),
+        React__namespace.createElement(useMotionValue.MotionContext.Provider, { value: motionContext }, children)));
+}
+
+function useTime() {
+    var time = useMotionValue.useMotionValue(0);
+    fiber.useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
+    return time;
+}
+
+exports.MotionCanvas = MotionCanvas;
+exports.motion = motion;
+exports.useTime = useTime;