import { noop } from 'motion-utils'; import { startViewAnimation } from './start.mjs'; /** * TODO: * - Create view transition on next tick * - Replace animations with Motion animations * - Return GroupAnimation on next tick */ class ViewTransitionBuilder { constructor(update, options = {}) { this.currentTarget = "root"; this.targets = new Map(); this.notifyReady = noop; this.readyPromise = new Promise((resolve) => { this.notifyReady = resolve; }); queueMicrotask(() => { startViewAnimation(update, options, this.targets).then((animation) => this.notifyReady(animation)); }); } get(selector) { this.currentTarget = selector; return this; } layout(keyframes, options) { this.updateTarget("layout", keyframes, options); return this; } new(keyframes, options) { this.updateTarget("new", keyframes, options); return this; } old(keyframes, options) { this.updateTarget("old", keyframes, options); return this; } enter(keyframes, options) { this.updateTarget("enter", keyframes, options); return this; } exit(keyframes, options) { this.updateTarget("exit", keyframes, options); return this; } crossfade(options) { this.updateTarget("enter", { opacity: 1 }, options); this.updateTarget("exit", { opacity: 0 }, options); return this; } updateTarget(target, keyframes, options = {}) { const { currentTarget, targets } = this; if (!targets.has(currentTarget)) { targets.set(currentTarget, {}); } const targetData = targets.get(currentTarget); targetData[target] = { keyframes, options }; } then(resolve, reject) { return this.readyPromise.then(resolve, reject); } } function view(update, defaultOptions = {}) { return new ViewTransitionBuilder(update, defaultOptions); } export { ViewTransitionBuilder, view };