motion-start 0.0.1

package/src/render/utils/lifecycles.ts

@@ -0,0 +1,172 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SharedLayoutAnimationConfig } from "../../components/AnimateSharedLayout/types";
+import type { MotionProps } from "../../motion/types";
+import type { AxisBox2D, BoxDelta } from "../../types/geometry";
+import type { ResolvedValues } from "../types";
+import type { AnimationDefinition } from "./animation";
+export type LayoutMeasureListener = (layout: AxisBox2D, prevLayout: AxisBox2D) => void;
+export type BeforeLayoutMeasureListener = (layout: AxisBox2D) => void;
+export type LayoutUpdateListener = (layout: AxisBox2D, prevLayout: AxisBox2D, config?: SharedLayoutAnimationConfig) => void;
+export type UpdateListener = (latest: ResolvedValues) => void;
+export type AnimationStartListener = () => void;
+export type AnimationCompleteListener = (definition: AnimationDefinition) => void;
+export type LayoutAnimationCompleteListener = () => void;
+export type SetAxisTargetListener = () => void;
+export type RenderListener = () => void;
+export type OnViewportBoxUpdate = (box: AxisBox2D, delta: BoxDelta) => void;
+/**
+ * TODO: Make more of these lifecycle events available as props
+ */
+export interface VisualElementLifecycles {
+    /**
+     * A callback that fires whenever the viewport-relative bounding box updates.
+     *
+     * @public
+     */
+    onViewportBoxUpdate?(box: AxisBox2D, delta: BoxDelta): void;
+    onBeforeLayoutMeasure?(box: AxisBox2D): void;
+    onLayoutMeasure?(box: AxisBox2D, prevBox: AxisBox2D): void;
+    /**
+     * Callback with latest motion values, fired max once per frame.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onUpdate(latest) {
+     *   console.log(latest.x, latest.opacity)
+     * }
+     *
+     * <MotionDiv animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />
+     * ```
+     */
+    onUpdate?(latest: ResolvedValues): void;
+    /**
+     * Callback when animation defined in `animate` begins.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onStart() {
+     *   console.log("Animation started")
+     * }
+     *
+     * <MotionDiv animate={{ x: 100 }} onAnimationStart={onStart} />
+     * ```
+     */
+    onAnimationStart?(): void;
+    /**
+     * Callback when animation defined in `animate` is complete.
+     *
+     * The provided callback will be called the triggering animation definition.
+     * If this is a variant, it'll be the variant name, and if a target object
+     * then it'll be the target object.
+     *
+     * This way, it's possible to figure out which animation has completed.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onComplete() {
+     *   console.log("Animation completed")
+     * }
+     *
+     * <MotionDiv
+     *   animate={{ x: 100 }}
+     *   onAnimationComplete={definition => {
+     *     console.log('Completed animating', definition)
+     *   }}
+     * />
+     * ```
+     */
+    onAnimationComplete?(definition: AnimationDefinition): void;
+    /**
+     * @internal
+     */
+    onLayoutAnimationComplete?(): void;
+    /**
+     * @internal
+     */
+    onUnmount?(): void;
+}
+export interface LifecycleManager {
+    onLayoutMeasure: (callback: LayoutMeasureListener) => () => void;
+    notifyLayoutMeasure: LayoutMeasureListener;
+    onBeforeLayoutMeasure: (callback: BeforeLayoutMeasureListener) => () => void;
+    notifyBeforeLayoutMeasure: BeforeLayoutMeasureListener;
+    onLayoutUpdate: (callback: LayoutUpdateListener) => () => void;
+    notifyLayoutUpdate: LayoutUpdateListener;
+    onViewportBoxUpdate: (callback: OnViewportBoxUpdate) => () => void;
+    notifyViewportBoxUpdate: OnViewportBoxUpdate;
+    onUpdate: (callback: UpdateListener) => () => void;
+    notifyUpdate: UpdateListener;
+    onAnimationStart: (callback: AnimationStartListener) => () => void;
+    notifyAnimationStart: AnimationStartListener;
+    onAnimationComplete: (callback: AnimationCompleteListener) => () => void;
+    notifyAnimationComplete: AnimationCompleteListener;
+    onLayoutAnimationComplete: (callback: LayoutAnimationCompleteListener) => () => void;
+    notifyLayoutAnimationComplete: LayoutAnimationCompleteListener;
+    onSetAxisTarget: (callback: SetAxisTargetListener) => () => void;
+    notifySetAxisTarget: SetAxisTargetListener;
+    onRender: (callback: RenderListener) => () => void;
+    notifyRender: RenderListener;
+    onUnmount: (callback: () => void) => () => void;
+    notifyUnmount: () => void;
+    clearAllListeners: () => void;
+    updatePropListeners: (props: MotionProps) => void;
+}
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { __spreadArray, __read } from 'tslib';
+import { SubscriptionManager } from '../../utils/subscription-manager.js';
+
+var names = [
+    "LayoutMeasure",
+    "BeforeLayoutMeasure",
+    "LayoutUpdate",
+    "ViewportBoxUpdate",
+    "Update",
+    "Render",
+    "AnimationComplete",
+    "LayoutAnimationComplete",
+    "AnimationStart",
+    "SetAxisTarget",
+    "Unmount",
+];
+function createLifecycles() {
+    var managers = names.map(function () { return new SubscriptionManager(); });
+    var propSubscriptions = {};
+    var lifecycles = {
+        clearAllListeners: function () { return managers.forEach(function (manager) { return manager.clear(); }); },
+        updatePropListeners: function (props) {
+            return names.forEach(function (name) {
+                var _a;
+                (_a = propSubscriptions[name]) === null || _a === void 0 ? void 0 : _a.call(propSubscriptions);
+                var on = "on" + name;
+                var propListener = props[on];
+                if (propListener) {
+                    propSubscriptions[name] = lifecycles[on](propListener);
+                }
+            });
+        },
+    };
+    managers.forEach(function (manager, i) {
+        lifecycles["on" + names[i]] = function (handler) { return manager.add(handler); };
+        lifecycles["notify" + names[i]] = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return manager.notify.apply(manager, __spreadArray([], __read(args)));
+        };
+    });
+    return lifecycles as LifecycleManager;
+}
+
+export { createLifecycles };

package/src/render/utils/motion-values.ts

@@ -0,0 +1,59 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionStyle } from "../../motion/types";
+import type { VisualElement } from "../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { motionValue } from '../../value/index.js';
+import { isMotionValue } from '../../value/utils/is-motion-value.js';
+
+function updateMotionValuesFromProps(element: VisualElement, next: MotionStyle, prev: MotionStyle) {
+    var _a;
+    for (var key in next) {
+        var nextValue = next[key];
+        var prevValue = prev[key];
+        if (isMotionValue(nextValue)) {
+            /**
+             * If this is a motion value found in props or style, we want to add it
+             * to our visual element's motion value map.
+             */
+            element.addValue(key, nextValue);
+        }
+        else if (isMotionValue(prevValue)) {
+            /**
+             * If we're swapping to a new motion value, create a new motion value
+             * from that
+             */
+            element.addValue(key, motionValue(nextValue));
+        }
+        else if (prevValue !== nextValue) {
+            /**
+             * If this is a flat value that has changed, update the motion value
+             * or create one if it doesn't exist. We only want to do this if we're
+             * not handling the value with our animation state.
+             */
+            if (element.hasValue(key)) {
+                var existingValue = element.getValue(key);
+                // TODO: Only update values that aren't being animated or even looked at
+                !existingValue.hasAnimated && existingValue.set(nextValue);
+            }
+            else {
+                element.addValue(key, motionValue((_a = element.getStaticValue(key)) !== null && _a !== void 0 ? _a : nextValue));
+            }
+        }
+    }
+    // Handle removed values
+    for (var key in prev) {
+        if (next[key] === undefined)
+            element.removeValue(key);
+    }
+    return next;
+}
+
+export { updateMotionValuesFromProps };

package/src/render/utils/projection.ts

@@ -0,0 +1,38 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValues, VisualElement } from "../types";
+import type { LayoutState, TargetProjection } from "./state";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { resetBox, applyTreeDeltas } from '../../utils/geometry/delta-apply.js';
+import { updateBoxDelta } from '../../utils/geometry/delta-calc.js';
+
+function updateLayoutDeltas({ delta, layout, layoutCorrected, treeScale }: LayoutState, { target }: TargetProjection, treePath: VisualElement[], transformOrigin: ResolvedValues) {
+    /**
+     * Reset the corrected box with the latest values from box, as we're then going
+     * to perform mutative operations on it.
+     */
+    resetBox(layoutCorrected, layout);
+    /**
+     * Apply all the parent deltas to this box to produce the corrected box. This
+     * is the layout box, as it will appear on screen as a result of the transforms of its parents.
+     */
+    applyTreeDeltas(layoutCorrected, treeScale, treePath);
+    /**
+     * Update the delta between the corrected box and the target box before user-set transforms were applied.
+     * This will allow us to calculate the corrected borderRadius and boxShadow to compensate
+     * for our layout reprojection, but still allow them to be scaled correctly by the user.
+     * It might be that to simplify this we may want to accept that user-set scale1 is also corrected
+     * and we wouldn't have to keep and calc both deltas, OR we could support a user setting
+     * to allow people to choose whether these styles are corrected based on just the
+     * layout reprojection or the final bounding box.
+     */
+    updateBoxDelta(delta, layoutCorrected, target, transformOrigin);
+}
+
+export { updateLayoutDeltas };