Mission Control Dashboard - Initial implementation

node_modules/motion-dom/dist/es/animation/NativeAnimation.mjs

@@ -0,0 +1,179 @@
+import { invariant, millisecondsToSeconds, secondsToMilliseconds, noop } from 'motion-utils';
+import { setStyle } from '../render/dom/style-set.mjs';
+import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';
+import { getFinalKeyframe } from './keyframes/get-final.mjs';
+import { WithPromise } from './utils/WithPromise.mjs';
+import { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';
+import { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';
+
+/**
+ * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
+ */
+class NativeAnimation extends WithPromise {
+    constructor(options) {
+        super();
+        this.finishedTime = null;
+        this.isStopped = false;
+        /**
+         * Tracks a manually-set start time that takes precedence over WAAPI's
+         * dynamic startTime. This is cleared when play() or time setter is called,
+         * allowing WAAPI to take over timing.
+         */
+        this.manualStartTime = null;
+        if (!options)
+            return;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
+        this.isPseudoElement = Boolean(pseudoElement);
+        this.allowFlatten = allowFlatten;
+        this.options = options;
+        invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
+        const transition = applyGeneratorOptions(options);
+        this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
+        if (transition.autoplay === false) {
+            this.animation.pause();
+        }
+        this.animation.onfinish = () => {
+            this.finishedTime = this.time;
+            if (!pseudoElement) {
+                const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
+                if (this.updateMotionValue) {
+                    this.updateMotionValue(keyframe);
+                }
+                /**
+                 * If we can, we want to commit the final style as set by the user,
+                 * rather than the computed keyframe value supplied by the animation.
+                 * We always do this, even when a motion value is present, to prevent
+                 * a visual flash in Firefox where the WAAPI animation's fill is removed
+                 * during cancel() before the scheduled render can apply the correct value.
+                 */
+                setStyle(element, name, keyframe);
+                this.animation.cancel();
+            }
+            onComplete?.();
+            this.notifyFinished();
+        };
+    }
+    play() {
+        if (this.isStopped)
+            return;
+        this.manualStartTime = null;
+        this.animation.play();
+        if (this.state === "finished") {
+            this.updateFinished();
+        }
+    }
+    pause() {
+        this.animation.pause();
+    }
+    complete() {
+        this.animation.finish?.();
+    }
+    cancel() {
+        try {
+            this.animation.cancel();
+        }
+        catch (e) { }
+    }
+    stop() {
+        if (this.isStopped)
+            return;
+        this.isStopped = true;
+        const { state } = this;
+        if (state === "idle" || state === "finished") {
+            return;
+        }
+        if (this.updateMotionValue) {
+            this.updateMotionValue();
+        }
+        else {
+            this.commitStyles();
+        }
+        if (!this.isPseudoElement)
+            this.cancel();
+    }
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * In this method, we commit styles back to the DOM before cancelling
+     * the animation.
+     *
+     * This is designed to be overridden by NativeAnimationExtended, which
+     * will create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to also correctly calculate velocity for any subsequent animation
+     * while deferring the commit until the next animation frame.
+     */
+    commitStyles() {
+        const element = this.options?.element;
+        if (!this.isPseudoElement && element?.isConnected) {
+            this.animation.commitStyles?.();
+        }
+    }
+    get duration() {
+        const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
+        return millisecondsToSeconds(Number(duration));
+    }
+    get iterationDuration() {
+        const { delay = 0 } = this.options || {};
+        return this.duration + millisecondsToSeconds(delay);
+    }
+    get time() {
+        return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
+    }
+    set time(newTime) {
+        const wasFinished = this.finishedTime !== null;
+        this.manualStartTime = null;
+        this.finishedTime = null;
+        this.animation.currentTime = secondsToMilliseconds(newTime);
+        if (wasFinished) {
+            this.animation.pause();
+        }
+    }
+    /**
+     * The playback speed of the animation.
+     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+     */
+    get speed() {
+        return this.animation.playbackRate;
+    }
+    set speed(newSpeed) {
+        // Allow backwards playback after finishing
+        if (newSpeed < 0)
+            this.finishedTime = null;
+        this.animation.playbackRate = newSpeed;
+    }
+    get state() {
+        return this.finishedTime !== null
+            ? "finished"
+            : this.animation.playState;
+    }
+    get startTime() {
+        return this.manualStartTime ?? Number(this.animation.startTime);
+    }
+    set startTime(newStartTime) {
+        this.manualStartTime = this.animation.startTime = newStartTime;
+    }
+    /**
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     */
+    attachTimeline({ timeline, rangeStart, rangeEnd, observe, }) {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
+        }
+        this.animation.onfinish = null;
+        if (timeline && supportsScrollTimeline()) {
+            this.animation.timeline = timeline;
+            if (rangeStart)
+                this.animation.rangeStart = rangeStart;
+            if (rangeEnd)
+                this.animation.rangeEnd = rangeEnd;
+            return noop;
+        }
+        else {
+            return observe(this);
+        }
+    }
+}
+
+export { NativeAnimation };
+//# sourceMappingURL=NativeAnimation.mjs.map