mirror of https://github.com/sveltejs/svelte
chore: cleanup generated files (#8749)
gtmnayan
2 years ago
committed by
GitHub
parent
752ee69e6b
commit
d4416c0bf8
@ -1 +0,0 @@
|
||||
export * from '../types/runtime/action/index.js';
|
||||
@ -1,2 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
@ -1 +0,0 @@
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"main": "./index",
|
||||
"module": "./index.mjs",
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '../types/runtime/animate/index.js';
|
||||
@ -1,33 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var easing = require('../easing/index.js');
|
||||
var Component = require('../internal/Component-9c4b98a2.js');
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {{ from: DOMRect; to: DOMRect }} fromTo
|
||||
* @param {import('./public.js').FlipParams} params
|
||||
* @returns {import('./public.js').AnimationConfig}
|
||||
*/
|
||||
function flip(node, { from, to }, params = {}) {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
|
||||
const dx = from.left + (from.width * ox) / to.width - (to.left + ox);
|
||||
const dy = from.top + (from.height * oy) / to.height - (to.top + oy);
|
||||
const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing: easing$1 = easing.cubicOut } = params;
|
||||
return {
|
||||
delay,
|
||||
duration: Component.is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
|
||||
easing: easing$1,
|
||||
css: (t, u) => {
|
||||
const x = u * dx;
|
||||
const y = u * dy;
|
||||
const sx = t + (u * from.width) / to.width;
|
||||
const sy = t + (u * from.height) / to.height;
|
||||
return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
exports.flip = flip;
|
||||
@ -1,31 +0,0 @@
|
||||
import { cubicOut } from '../easing/index.mjs';
|
||||
import { is_function } from '../internal/Component-cd97939e.mjs';
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {{ from: DOMRect; to: DOMRect }} fromTo
|
||||
* @param {import('./public.js').FlipParams} params
|
||||
* @returns {import('./public.js').AnimationConfig}
|
||||
*/
|
||||
function flip(node, { from, to }, params = {}) {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
|
||||
const dx = from.left + (from.width * ox) / to.width - (to.left + ox);
|
||||
const dy = from.top + (from.height * oy) / to.height - (to.top + oy);
|
||||
const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
|
||||
return {
|
||||
delay,
|
||||
duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
|
||||
easing,
|
||||
css: (t, u) => {
|
||||
const x = u * dx;
|
||||
const y = u * dy;
|
||||
const sx = t + (u * from.width) / to.width;
|
||||
const sy = t + (u * from.height) / to.height;
|
||||
return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export { flip };
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"main": "./index",
|
||||
"module": "./index.mjs",
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '../types/runtime/easing/index.js';
|
||||
@ -1,314 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var Component = require('../internal/Component-9c4b98a2.js');
|
||||
|
||||
/*
|
||||
Adapted from https://github.com/mattdesl
|
||||
Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function backInOut(t) {
|
||||
const s = 1.70158 * 1.525;
|
||||
if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
|
||||
return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function backIn(t) {
|
||||
const s = 1.70158;
|
||||
return t * t * ((s + 1) * t - s);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function backOut(t) {
|
||||
const s = 1.70158;
|
||||
return --t * t * ((s + 1) * t + s) + 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function bounceOut(t) {
|
||||
const a = 4.0 / 11.0;
|
||||
const b = 8.0 / 11.0;
|
||||
const c = 9.0 / 10.0;
|
||||
const ca = 4356.0 / 361.0;
|
||||
const cb = 35442.0 / 1805.0;
|
||||
const cc = 16061.0 / 1805.0;
|
||||
const t2 = t * t;
|
||||
return t < a
|
||||
? 7.5625 * t2
|
||||
: t < b
|
||||
? 9.075 * t2 - 9.9 * t + 3.4
|
||||
: t < c
|
||||
? ca * t2 - cb * t + cc
|
||||
: 10.8 * t * t - 20.52 * t + 10.72;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function bounceInOut(t) {
|
||||
return t < 0.5 ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function bounceIn(t) {
|
||||
return 1.0 - bounceOut(1.0 - t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function circInOut(t) {
|
||||
if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
|
||||
return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function circIn(t) {
|
||||
return 1.0 - Math.sqrt(1.0 - t * t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function circOut(t) {
|
||||
return Math.sqrt(1 - --t * t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function cubicInOut(t) {
|
||||
return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function cubicIn(t) {
|
||||
return t * t * t;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function cubicOut(t) {
|
||||
const f = t - 1.0;
|
||||
return f * f * f + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function elasticInOut(t) {
|
||||
return t < 0.5
|
||||
? 0.5 * Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) * Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
|
||||
: 0.5 *
|
||||
Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t - 1.0 + 1.0)) *
|
||||
Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
|
||||
1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function elasticIn(t) {
|
||||
return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function elasticOut(t) {
|
||||
return Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function expoInOut(t) {
|
||||
return t === 0.0 || t === 1.0
|
||||
? t
|
||||
: t < 0.5
|
||||
? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
|
||||
: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function expoIn(t) {
|
||||
return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function expoOut(t) {
|
||||
return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quadInOut(t) {
|
||||
t /= 0.5;
|
||||
if (t < 1) return 0.5 * t * t;
|
||||
t--;
|
||||
return -0.5 * (t * (t - 2) - 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quadIn(t) {
|
||||
return t * t;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quadOut(t) {
|
||||
return -t * (t - 2.0);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quartInOut(t) {
|
||||
return t < 0.5 ? +8.0 * Math.pow(t, 4.0) : -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quartIn(t) {
|
||||
return Math.pow(t, 4.0);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quartOut(t) {
|
||||
return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quintInOut(t) {
|
||||
if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
|
||||
return 0.5 * ((t -= 2) * t * t * t * t + 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quintIn(t) {
|
||||
return t * t * t * t * t;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quintOut(t) {
|
||||
return --t * t * t * t * t + 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function sineInOut(t) {
|
||||
return -0.5 * (Math.cos(Math.PI * t) - 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function sineIn(t) {
|
||||
const v = Math.cos(t * Math.PI * 0.5);
|
||||
if (Math.abs(v) < 1e-14) return 1;
|
||||
else return 1 - v;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function sineOut(t) {
|
||||
return Math.sin((t * Math.PI) / 2);
|
||||
}
|
||||
|
||||
exports.linear = Component.identity;
|
||||
exports.backIn = backIn;
|
||||
exports.backInOut = backInOut;
|
||||
exports.backOut = backOut;
|
||||
exports.bounceIn = bounceIn;
|
||||
exports.bounceInOut = bounceInOut;
|
||||
exports.bounceOut = bounceOut;
|
||||
exports.circIn = circIn;
|
||||
exports.circInOut = circInOut;
|
||||
exports.circOut = circOut;
|
||||
exports.cubicIn = cubicIn;
|
||||
exports.cubicInOut = cubicInOut;
|
||||
exports.cubicOut = cubicOut;
|
||||
exports.elasticIn = elasticIn;
|
||||
exports.elasticInOut = elasticInOut;
|
||||
exports.elasticOut = elasticOut;
|
||||
exports.expoIn = expoIn;
|
||||
exports.expoInOut = expoInOut;
|
||||
exports.expoOut = expoOut;
|
||||
exports.quadIn = quadIn;
|
||||
exports.quadInOut = quadInOut;
|
||||
exports.quadOut = quadOut;
|
||||
exports.quartIn = quartIn;
|
||||
exports.quartInOut = quartInOut;
|
||||
exports.quartOut = quartOut;
|
||||
exports.quintIn = quintIn;
|
||||
exports.quintInOut = quintInOut;
|
||||
exports.quintOut = quintOut;
|
||||
exports.sineIn = sineIn;
|
||||
exports.sineInOut = sineInOut;
|
||||
exports.sineOut = sineOut;
|
||||
@ -1,282 +0,0 @@
|
||||
export { identity as linear } from '../internal/Component-cd97939e.mjs';
|
||||
|
||||
/*
|
||||
Adapted from https://github.com/mattdesl
|
||||
Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function backInOut(t) {
|
||||
const s = 1.70158 * 1.525;
|
||||
if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
|
||||
return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function backIn(t) {
|
||||
const s = 1.70158;
|
||||
return t * t * ((s + 1) * t - s);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function backOut(t) {
|
||||
const s = 1.70158;
|
||||
return --t * t * ((s + 1) * t + s) + 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function bounceOut(t) {
|
||||
const a = 4.0 / 11.0;
|
||||
const b = 8.0 / 11.0;
|
||||
const c = 9.0 / 10.0;
|
||||
const ca = 4356.0 / 361.0;
|
||||
const cb = 35442.0 / 1805.0;
|
||||
const cc = 16061.0 / 1805.0;
|
||||
const t2 = t * t;
|
||||
return t < a
|
||||
? 7.5625 * t2
|
||||
: t < b
|
||||
? 9.075 * t2 - 9.9 * t + 3.4
|
||||
: t < c
|
||||
? ca * t2 - cb * t + cc
|
||||
: 10.8 * t * t - 20.52 * t + 10.72;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function bounceInOut(t) {
|
||||
return t < 0.5 ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function bounceIn(t) {
|
||||
return 1.0 - bounceOut(1.0 - t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function circInOut(t) {
|
||||
if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
|
||||
return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function circIn(t) {
|
||||
return 1.0 - Math.sqrt(1.0 - t * t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function circOut(t) {
|
||||
return Math.sqrt(1 - --t * t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function cubicInOut(t) {
|
||||
return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function cubicIn(t) {
|
||||
return t * t * t;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function cubicOut(t) {
|
||||
const f = t - 1.0;
|
||||
return f * f * f + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function elasticInOut(t) {
|
||||
return t < 0.5
|
||||
? 0.5 * Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) * Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
|
||||
: 0.5 *
|
||||
Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t - 1.0 + 1.0)) *
|
||||
Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
|
||||
1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function elasticIn(t) {
|
||||
return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function elasticOut(t) {
|
||||
return Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function expoInOut(t) {
|
||||
return t === 0.0 || t === 1.0
|
||||
? t
|
||||
: t < 0.5
|
||||
? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
|
||||
: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function expoIn(t) {
|
||||
return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function expoOut(t) {
|
||||
return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quadInOut(t) {
|
||||
t /= 0.5;
|
||||
if (t < 1) return 0.5 * t * t;
|
||||
t--;
|
||||
return -0.5 * (t * (t - 2) - 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quadIn(t) {
|
||||
return t * t;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quadOut(t) {
|
||||
return -t * (t - 2.0);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quartInOut(t) {
|
||||
return t < 0.5 ? +8.0 * Math.pow(t, 4.0) : -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quartIn(t) {
|
||||
return Math.pow(t, 4.0);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quartOut(t) {
|
||||
return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quintInOut(t) {
|
||||
if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
|
||||
return 0.5 * ((t -= 2) * t * t * t * t + 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quintIn(t) {
|
||||
return t * t * t * t * t;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function quintOut(t) {
|
||||
return --t * t * t * t * t + 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function sineInOut(t) {
|
||||
return -0.5 * (Math.cos(Math.PI * t) - 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function sineIn(t) {
|
||||
const v = Math.cos(t * Math.PI * 0.5);
|
||||
if (Math.abs(v) < 1e-14) return 1;
|
||||
else return 1 - v;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} t
|
||||
* @returns {number}
|
||||
*/
|
||||
function sineOut(t) {
|
||||
return Math.sin((t * Math.PI) / 2);
|
||||
}
|
||||
|
||||
export { backIn, backInOut, backOut, bounceIn, bounceInOut, bounceOut, circIn, circInOut, circOut, cubicIn, cubicInOut, cubicOut, elasticIn, elasticInOut, elasticOut, expoIn, expoInOut, expoOut, quadIn, quadInOut, quadOut, quartIn, quartInOut, quartOut, quintIn, quintInOut, quintOut, sineIn, sineInOut, sineOut };
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"main": "./index",
|
||||
"module": "./index.mjs",
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var Component = require('./internal/Component-9c4b98a2.js');
|
||||
var dev = require('./internal/dev-1537023e.js');
|
||||
|
||||
|
||||
|
||||
exports.afterUpdate = Component.afterUpdate;
|
||||
exports.beforeUpdate = Component.beforeUpdate;
|
||||
exports.createEventDispatcher = Component.createEventDispatcher;
|
||||
exports.getAllContexts = Component.getAllContexts;
|
||||
exports.getContext = Component.getContext;
|
||||
exports.hasContext = Component.hasContext;
|
||||
exports.onDestroy = Component.onDestroy;
|
||||
exports.onMount = Component.onMount;
|
||||
exports.setContext = Component.setContext;
|
||||
exports.tick = Component.tick;
|
||||
exports.SvelteComponent = dev.SvelteComponentDev;
|
||||
exports.SvelteComponentTyped = dev.SvelteComponentTyped;
|
||||
@ -1,2 +0,0 @@
|
||||
export { afterUpdate, beforeUpdate, createEventDispatcher, getAllContexts, getContext, hasContext, onDestroy, onMount, setContext, tick } from './internal/Component-cd97939e.mjs';
|
||||
export { SvelteComponentDev as SvelteComponent, SvelteComponentTyped } from './internal/dev-89102382.mjs';
|
||||
@ -1 +0,0 @@
|
||||
export * from '../types/runtime/motion/index.js';
|
||||
@ -1,252 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var store = require('../store/index.js');
|
||||
var Component = require('../internal/Component-9c4b98a2.js');
|
||||
|
||||
/**
|
||||
* @param {any} obj
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function is_date(obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Date]';
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {import('./private.js').TickContext<T>} ctx
|
||||
* @param {T} last_value
|
||||
* @param {T} current_value
|
||||
* @param {T} target_value
|
||||
* @returns {T}
|
||||
*/
|
||||
function tick_spring(ctx, last_value, current_value, target_value) {
|
||||
if (typeof current_value === 'number' || is_date(current_value)) {
|
||||
// @ts-ignore
|
||||
const delta = target_value - current_value;
|
||||
// @ts-ignore
|
||||
const velocity = (current_value - last_value) / (ctx.dt || 1 / 60); // guard div by 0
|
||||
const spring = ctx.opts.stiffness * delta;
|
||||
const damper = ctx.opts.damping * velocity;
|
||||
const acceleration = (spring - damper) * ctx.inv_mass;
|
||||
const d = (velocity + acceleration) * ctx.dt;
|
||||
if (Math.abs(d) < ctx.opts.precision && Math.abs(delta) < ctx.opts.precision) {
|
||||
return target_value; // settled
|
||||
} else {
|
||||
ctx.settled = false; // signal loop to keep ticking
|
||||
// @ts-ignore
|
||||
return is_date(current_value) ? new Date(current_value.getTime() + d) : current_value + d;
|
||||
}
|
||||
} else if (Array.isArray(current_value)) {
|
||||
// @ts-ignore
|
||||
return current_value.map((_, i) =>
|
||||
tick_spring(ctx, last_value[i], current_value[i], target_value[i])
|
||||
);
|
||||
} else if (typeof current_value === 'object') {
|
||||
const next_value = {};
|
||||
for (const k in current_value) {
|
||||
// @ts-ignore
|
||||
next_value[k] = tick_spring(ctx, last_value[k], current_value[k], target_value[k]);
|
||||
}
|
||||
// @ts-ignore
|
||||
return next_value;
|
||||
} else {
|
||||
throw new Error(`Cannot spring ${typeof current_value} values`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {T} [value]
|
||||
* @param {import('./private.js').SpringOpts} [opts]
|
||||
* @returns {import('./public.js').Spring<T>}
|
||||
*/
|
||||
function spring(value, opts = {}) {
|
||||
const store$1 = store.writable(value);
|
||||
const { stiffness = 0.15, damping = 0.8, precision = 0.01 } = opts;
|
||||
/** @type {number} */
|
||||
let last_time;
|
||||
/** @type {import('../internal/private.js').Task} */
|
||||
let task;
|
||||
/** @type {object} */
|
||||
let current_token;
|
||||
/** @type {T} */
|
||||
let last_value = value;
|
||||
/** @type {T} */
|
||||
let target_value = value;
|
||||
let inv_mass = 1;
|
||||
let inv_mass_recovery_rate = 0;
|
||||
let cancel_task = false;
|
||||
/**
|
||||
* @param {T} new_value
|
||||
* @param {import('./private.js').SpringUpdateOpts} opts
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
function set(new_value, opts = {}) {
|
||||
target_value = new_value;
|
||||
const token = (current_token = {});
|
||||
if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
|
||||
cancel_task = true; // cancel any running animation
|
||||
last_time = Component.now();
|
||||
last_value = new_value;
|
||||
store$1.set((value = target_value));
|
||||
return Promise.resolve();
|
||||
} else if (opts.soft) {
|
||||
const rate = opts.soft === true ? 0.5 : +opts.soft;
|
||||
inv_mass_recovery_rate = 1 / (rate * 60);
|
||||
inv_mass = 0; // infinite mass, unaffected by spring forces
|
||||
}
|
||||
if (!task) {
|
||||
last_time = Component.now();
|
||||
cancel_task = false;
|
||||
task = Component.loop((now) => {
|
||||
if (cancel_task) {
|
||||
cancel_task = false;
|
||||
task = null;
|
||||
return false;
|
||||
}
|
||||
inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
|
||||
const ctx = {
|
||||
inv_mass,
|
||||
opts: spring,
|
||||
settled: true,
|
||||
dt: ((now - last_time) * 60) / 1000
|
||||
};
|
||||
const next_value = tick_spring(ctx, last_value, value, target_value);
|
||||
last_time = now;
|
||||
last_value = value;
|
||||
store$1.set((value = next_value));
|
||||
if (ctx.settled) {
|
||||
task = null;
|
||||
}
|
||||
return !ctx.settled;
|
||||
});
|
||||
}
|
||||
return new Promise((fulfil) => {
|
||||
task.promise.then(() => {
|
||||
if (token === current_token) fulfil();
|
||||
});
|
||||
});
|
||||
}
|
||||
/** @type {import('./public.js').Spring<T>} */
|
||||
const spring = {
|
||||
set,
|
||||
update: (fn, opts) => set(fn(target_value, value), opts),
|
||||
subscribe: store$1.subscribe,
|
||||
stiffness,
|
||||
damping,
|
||||
precision
|
||||
};
|
||||
return spring;
|
||||
}
|
||||
|
||||
/** @returns {(t: any) => any} */
|
||||
function get_interpolator(a, b) {
|
||||
if (a === b || a !== a) return () => a;
|
||||
const type = typeof a;
|
||||
if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
|
||||
throw new Error('Cannot interpolate values of different type');
|
||||
}
|
||||
if (Array.isArray(a)) {
|
||||
const arr = b.map((bi, i) => {
|
||||
return get_interpolator(a[i], bi);
|
||||
});
|
||||
return (t) => arr.map((fn) => fn(t));
|
||||
}
|
||||
if (type === 'object') {
|
||||
if (!a || !b) throw new Error('Object cannot be null');
|
||||
if (is_date(a) && is_date(b)) {
|
||||
a = a.getTime();
|
||||
b = b.getTime();
|
||||
const delta = b - a;
|
||||
return (t) => new Date(a + t * delta);
|
||||
}
|
||||
const keys = Object.keys(b);
|
||||
const interpolators = {};
|
||||
keys.forEach((key) => {
|
||||
interpolators[key] = get_interpolator(a[key], b[key]);
|
||||
});
|
||||
return (t) => {
|
||||
const result = {};
|
||||
keys.forEach((key) => {
|
||||
result[key] = interpolators[key](t);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
}
|
||||
if (type === 'number') {
|
||||
const delta = b - a;
|
||||
return (t) => a + t * delta;
|
||||
}
|
||||
throw new Error(`Cannot interpolate ${type} values`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {T} [value]
|
||||
* @param {import('./private.js').TweenedOptions<T>} [defaults]
|
||||
* @returns {import('./public.js').Tweened<T>}
|
||||
*/
|
||||
function tweened(value, defaults = {}) {
|
||||
const store$1 = store.writable(value);
|
||||
/** @type {import('../internal/private.js').Task} */
|
||||
let task;
|
||||
let target_value = value;
|
||||
/**
|
||||
* @param {T} new_value
|
||||
* @param {import('./private.js').TweenedOptions<T>} opts
|
||||
*/
|
||||
function set(new_value, opts) {
|
||||
if (value == null) {
|
||||
store$1.set((value = new_value));
|
||||
return Promise.resolve();
|
||||
}
|
||||
target_value = new_value;
|
||||
let previous_task = task;
|
||||
let started = false;
|
||||
let {
|
||||
delay = 0,
|
||||
duration = 400,
|
||||
easing = Component.identity,
|
||||
interpolate = get_interpolator
|
||||
} = Component.assign(Component.assign({}, defaults), opts);
|
||||
if (duration === 0) {
|
||||
if (previous_task) {
|
||||
previous_task.abort();
|
||||
previous_task = null;
|
||||
}
|
||||
store$1.set((value = target_value));
|
||||
return Promise.resolve();
|
||||
}
|
||||
const start = Component.now() + delay;
|
||||
let fn;
|
||||
task = Component.loop((now) => {
|
||||
if (now < start) return true;
|
||||
if (!started) {
|
||||
fn = interpolate(value, new_value);
|
||||
if (typeof duration === 'function') duration = duration(value, new_value);
|
||||
started = true;
|
||||
}
|
||||
if (previous_task) {
|
||||
previous_task.abort();
|
||||
previous_task = null;
|
||||
}
|
||||
const elapsed = now - start;
|
||||
if (elapsed > /** @type {number} */ (duration)) {
|
||||
store$1.set((value = new_value));
|
||||
return false;
|
||||
}
|
||||
// @ts-ignore
|
||||
store$1.set((value = fn(easing(elapsed / duration))));
|
||||
return true;
|
||||
});
|
||||
return task.promise;
|
||||
}
|
||||
return {
|
||||
set,
|
||||
update: (fn, opts) => set(fn(target_value, value), opts),
|
||||
subscribe: store$1.subscribe
|
||||
};
|
||||
}
|
||||
|
||||
exports.spring = spring;
|
||||
exports.tweened = tweened;
|
||||
@ -1,249 +0,0 @@
|
||||
import { writable } from '../store/index.mjs';
|
||||
import { now, loop, assign, identity } from '../internal/Component-cd97939e.mjs';
|
||||
|
||||
/**
|
||||
* @param {any} obj
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function is_date(obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Date]';
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {import('./private.js').TickContext<T>} ctx
|
||||
* @param {T} last_value
|
||||
* @param {T} current_value
|
||||
* @param {T} target_value
|
||||
* @returns {T}
|
||||
*/
|
||||
function tick_spring(ctx, last_value, current_value, target_value) {
|
||||
if (typeof current_value === 'number' || is_date(current_value)) {
|
||||
// @ts-ignore
|
||||
const delta = target_value - current_value;
|
||||
// @ts-ignore
|
||||
const velocity = (current_value - last_value) / (ctx.dt || 1 / 60); // guard div by 0
|
||||
const spring = ctx.opts.stiffness * delta;
|
||||
const damper = ctx.opts.damping * velocity;
|
||||
const acceleration = (spring - damper) * ctx.inv_mass;
|
||||
const d = (velocity + acceleration) * ctx.dt;
|
||||
if (Math.abs(d) < ctx.opts.precision && Math.abs(delta) < ctx.opts.precision) {
|
||||
return target_value; // settled
|
||||
} else {
|
||||
ctx.settled = false; // signal loop to keep ticking
|
||||
// @ts-ignore
|
||||
return is_date(current_value) ? new Date(current_value.getTime() + d) : current_value + d;
|
||||
}
|
||||
} else if (Array.isArray(current_value)) {
|
||||
// @ts-ignore
|
||||
return current_value.map((_, i) =>
|
||||
tick_spring(ctx, last_value[i], current_value[i], target_value[i])
|
||||
);
|
||||
} else if (typeof current_value === 'object') {
|
||||
const next_value = {};
|
||||
for (const k in current_value) {
|
||||
// @ts-ignore
|
||||
next_value[k] = tick_spring(ctx, last_value[k], current_value[k], target_value[k]);
|
||||
}
|
||||
// @ts-ignore
|
||||
return next_value;
|
||||
} else {
|
||||
throw new Error(`Cannot spring ${typeof current_value} values`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {T} [value]
|
||||
* @param {import('./private.js').SpringOpts} [opts]
|
||||
* @returns {import('./public.js').Spring<T>}
|
||||
*/
|
||||
function spring(value, opts = {}) {
|
||||
const store = writable(value);
|
||||
const { stiffness = 0.15, damping = 0.8, precision = 0.01 } = opts;
|
||||
/** @type {number} */
|
||||
let last_time;
|
||||
/** @type {import('../internal/private.js').Task} */
|
||||
let task;
|
||||
/** @type {object} */
|
||||
let current_token;
|
||||
/** @type {T} */
|
||||
let last_value = value;
|
||||
/** @type {T} */
|
||||
let target_value = value;
|
||||
let inv_mass = 1;
|
||||
let inv_mass_recovery_rate = 0;
|
||||
let cancel_task = false;
|
||||
/**
|
||||
* @param {T} new_value
|
||||
* @param {import('./private.js').SpringUpdateOpts} opts
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
function set(new_value, opts = {}) {
|
||||
target_value = new_value;
|
||||
const token = (current_token = {});
|
||||
if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
|
||||
cancel_task = true; // cancel any running animation
|
||||
last_time = now();
|
||||
last_value = new_value;
|
||||
store.set((value = target_value));
|
||||
return Promise.resolve();
|
||||
} else if (opts.soft) {
|
||||
const rate = opts.soft === true ? 0.5 : +opts.soft;
|
||||
inv_mass_recovery_rate = 1 / (rate * 60);
|
||||
inv_mass = 0; // infinite mass, unaffected by spring forces
|
||||
}
|
||||
if (!task) {
|
||||
last_time = now();
|
||||
cancel_task = false;
|
||||
task = loop((now) => {
|
||||
if (cancel_task) {
|
||||
cancel_task = false;
|
||||
task = null;
|
||||
return false;
|
||||
}
|
||||
inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
|
||||
const ctx = {
|
||||
inv_mass,
|
||||
opts: spring,
|
||||
settled: true,
|
||||
dt: ((now - last_time) * 60) / 1000
|
||||
};
|
||||
const next_value = tick_spring(ctx, last_value, value, target_value);
|
||||
last_time = now;
|
||||
last_value = value;
|
||||
store.set((value = next_value));
|
||||
if (ctx.settled) {
|
||||
task = null;
|
||||
}
|
||||
return !ctx.settled;
|
||||
});
|
||||
}
|
||||
return new Promise((fulfil) => {
|
||||
task.promise.then(() => {
|
||||
if (token === current_token) fulfil();
|
||||
});
|
||||
});
|
||||
}
|
||||
/** @type {import('./public.js').Spring<T>} */
|
||||
const spring = {
|
||||
set,
|
||||
update: (fn, opts) => set(fn(target_value, value), opts),
|
||||
subscribe: store.subscribe,
|
||||
stiffness,
|
||||
damping,
|
||||
precision
|
||||
};
|
||||
return spring;
|
||||
}
|
||||
|
||||
/** @returns {(t: any) => any} */
|
||||
function get_interpolator(a, b) {
|
||||
if (a === b || a !== a) return () => a;
|
||||
const type = typeof a;
|
||||
if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
|
||||
throw new Error('Cannot interpolate values of different type');
|
||||
}
|
||||
if (Array.isArray(a)) {
|
||||
const arr = b.map((bi, i) => {
|
||||
return get_interpolator(a[i], bi);
|
||||
});
|
||||
return (t) => arr.map((fn) => fn(t));
|
||||
}
|
||||
if (type === 'object') {
|
||||
if (!a || !b) throw new Error('Object cannot be null');
|
||||
if (is_date(a) && is_date(b)) {
|
||||
a = a.getTime();
|
||||
b = b.getTime();
|
||||
const delta = b - a;
|
||||
return (t) => new Date(a + t * delta);
|
||||
}
|
||||
const keys = Object.keys(b);
|
||||
const interpolators = {};
|
||||
keys.forEach((key) => {
|
||||
interpolators[key] = get_interpolator(a[key], b[key]);
|
||||
});
|
||||
return (t) => {
|
||||
const result = {};
|
||||
keys.forEach((key) => {
|
||||
result[key] = interpolators[key](t);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
}
|
||||
if (type === 'number') {
|
||||
const delta = b - a;
|
||||
return (t) => a + t * delta;
|
||||
}
|
||||
throw new Error(`Cannot interpolate ${type} values`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {T} [value]
|
||||
* @param {import('./private.js').TweenedOptions<T>} [defaults]
|
||||
* @returns {import('./public.js').Tweened<T>}
|
||||
*/
|
||||
function tweened(value, defaults = {}) {
|
||||
const store = writable(value);
|
||||
/** @type {import('../internal/private.js').Task} */
|
||||
let task;
|
||||
let target_value = value;
|
||||
/**
|
||||
* @param {T} new_value
|
||||
* @param {import('./private.js').TweenedOptions<T>} opts
|
||||
*/
|
||||
function set(new_value, opts) {
|
||||
if (value == null) {
|
||||
store.set((value = new_value));
|
||||
return Promise.resolve();
|
||||
}
|
||||
target_value = new_value;
|
||||
let previous_task = task;
|
||||
let started = false;
|
||||
let {
|
||||
delay = 0,
|
||||
duration = 400,
|
||||
easing = identity,
|
||||
interpolate = get_interpolator
|
||||
} = assign(assign({}, defaults), opts);
|
||||
if (duration === 0) {
|
||||
if (previous_task) {
|
||||
previous_task.abort();
|
||||
previous_task = null;
|
||||
}
|
||||
store.set((value = target_value));
|
||||
return Promise.resolve();
|
||||
}
|
||||
const start = now() + delay;
|
||||
let fn;
|
||||
task = loop((now) => {
|
||||
if (now < start) return true;
|
||||
if (!started) {
|
||||
fn = interpolate(value, new_value);
|
||||
if (typeof duration === 'function') duration = duration(value, new_value);
|
||||
started = true;
|
||||
}
|
||||
if (previous_task) {
|
||||
previous_task.abort();
|
||||
previous_task = null;
|
||||
}
|
||||
const elapsed = now - start;
|
||||
if (elapsed > /** @type {number} */ (duration)) {
|
||||
store.set((value = new_value));
|
||||
return false;
|
||||
}
|
||||
// @ts-ignore
|
||||
store.set((value = fn(easing(elapsed / duration))));
|
||||
return true;
|
||||
});
|
||||
return task.promise;
|
||||
}
|
||||
return {
|
||||
set,
|
||||
update: (fn, opts) => set(fn(target_value, value), opts),
|
||||
subscribe: store.subscribe
|
||||
};
|
||||
}
|
||||
|
||||
export { spring, tweened };
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"main": "./index",
|
||||
"module": "./index.mjs",
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var Component = require('./internal/Component-9c4b98a2.js');
|
||||
var dev = require('./internal/dev-1537023e.js');
|
||||
|
||||
/** @returns {void} */
|
||||
function onMount() {}
|
||||
|
||||
/** @returns {void} */
|
||||
function beforeUpdate() {}
|
||||
|
||||
/** @returns {void} */
|
||||
function afterUpdate() {}
|
||||
|
||||
exports.createEventDispatcher = Component.createEventDispatcher;
|
||||
exports.getAllContexts = Component.getAllContexts;
|
||||
exports.getContext = Component.getContext;
|
||||
exports.hasContext = Component.hasContext;
|
||||
exports.onDestroy = Component.onDestroy;
|
||||
exports.setContext = Component.setContext;
|
||||
exports.tick = Component.tick;
|
||||
exports.SvelteComponent = dev.SvelteComponentDev;
|
||||
exports.SvelteComponentTyped = dev.SvelteComponentTyped;
|
||||
exports.afterUpdate = afterUpdate;
|
||||
exports.beforeUpdate = beforeUpdate;
|
||||
exports.onMount = onMount;
|
||||
@ -1,13 +0,0 @@
|
||||
export { createEventDispatcher, getAllContexts, getContext, hasContext, onDestroy, setContext, tick } from './internal/Component-cd97939e.mjs';
|
||||
export { SvelteComponentDev as SvelteComponent, SvelteComponentTyped } from './internal/dev-89102382.mjs';
|
||||
|
||||
/** @returns {void} */
|
||||
function onMount() {}
|
||||
|
||||
/** @returns {void} */
|
||||
function beforeUpdate() {}
|
||||
|
||||
/** @returns {void} */
|
||||
function afterUpdate() {}
|
||||
|
||||
export { afterUpdate, beforeUpdate, onMount };
|
||||
@ -1 +0,0 @@
|
||||
export * from '../types/runtime/store/index.js';
|
||||
@ -1,189 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var Component = require('../internal/Component-9c4b98a2.js');
|
||||
|
||||
const subscriber_queue = [];
|
||||
|
||||
/**
|
||||
* Creates a `Readable` store that allows reading by subscription.
|
||||
* @template T
|
||||
* @param {T} value initial value
|
||||
* @param {import('./public.js').StartStopNotifier<T>} start
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
function readable(value, start) {
|
||||
return {
|
||||
subscribe: writable(value, start).subscribe
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a `Writable` store that allows both updating and reading by subscription.
|
||||
* @template T
|
||||
* @param {T} value initial value
|
||||
* @param {import('./public.js').StartStopNotifier<T>} start
|
||||
* @returns {import('./public.js').Writable<T>}
|
||||
*/
|
||||
function writable(value, start = Component.noop) {
|
||||
/** @type {import('./public.js').Unsubscriber} */
|
||||
let stop;
|
||||
/** @type {Set<import('./private.js').SubscribeInvalidateTuple<T>>} */
|
||||
const subscribers = new Set();
|
||||
/** @param {T} new_value
|
||||
* @returns {void}
|
||||
*/
|
||||
function set(new_value) {
|
||||
if (Component.safe_not_equal(value, new_value)) {
|
||||
value = new_value;
|
||||
if (stop) {
|
||||
// store is ready
|
||||
const run_queue = !subscriber_queue.length;
|
||||
for (const subscriber of subscribers) {
|
||||
subscriber[1]();
|
||||
subscriber_queue.push(subscriber, value);
|
||||
}
|
||||
if (run_queue) {
|
||||
for (let i = 0; i < subscriber_queue.length; i += 2) {
|
||||
subscriber_queue[i][0](subscriber_queue[i + 1]);
|
||||
}
|
||||
subscriber_queue.length = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @param {import('./public.js').Updater<T>} fn
|
||||
* @returns {void}
|
||||
*/
|
||||
function update(fn) {
|
||||
set(fn(value));
|
||||
}
|
||||
/**
|
||||
* @param {import('./public.js').Subscriber<T>} run
|
||||
* @param {import('./private.js').Invalidator<T>} invalidate
|
||||
* @returns {import('./public.js').Unsubscriber}
|
||||
*/
|
||||
function subscribe(run, invalidate = Component.noop) {
|
||||
/** @type {import('./private.js').SubscribeInvalidateTuple<T>} */
|
||||
const subscriber = [run, invalidate];
|
||||
subscribers.add(subscriber);
|
||||
if (subscribers.size === 1) {
|
||||
stop = start(set, update) || Component.noop;
|
||||
}
|
||||
run(value);
|
||||
return () => {
|
||||
subscribers.delete(subscriber);
|
||||
if (subscribers.size === 0 && stop) {
|
||||
stop();
|
||||
stop = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
return { set, update, subscribe };
|
||||
}
|
||||
|
||||
/**
|
||||
* Derived value store by synchronizing one or more readable stores and
|
||||
* applying an aggregation function over its input values.
|
||||
*
|
||||
* @template {import('./private.js').Stores} S
|
||||
* @template T
|
||||
* @overload
|
||||
* @param {S} stores - input stores
|
||||
* @param {(values: import('./public.js').StoresValues<S>, set: import('./public.js').Subscriber<T>, update: (fn: import('./public.js').Updater<T>) => void) => import('./public.js').Unsubscriber | void} fn - function callback that aggregates the values
|
||||
* @param {T} [initial_value] - initial value
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Derived value store by synchronizing one or more readable stores and
|
||||
* applying an aggregation function over its input values.
|
||||
*
|
||||
* @template {import('./private.js').Stores} S
|
||||
* @template T
|
||||
* @overload
|
||||
* @param {S} stores - input stores
|
||||
* @param {(values: import('./public.js').StoresValues<S>) => T} fn - function callback that aggregates the values
|
||||
* @param {T} [initial_value] - initial value
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @template {import('./private.js').Stores} S
|
||||
* @template T
|
||||
* @param {S} stores
|
||||
* @param {Function} fn
|
||||
* @param {T} [initial_value]
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
function derived(stores, fn, initial_value) {
|
||||
const single = !Array.isArray(stores);
|
||||
/** @type {Array<import('./public.js').Readable<any>>} */
|
||||
const stores_array = single ? [stores] : stores;
|
||||
if (!stores_array.every(Boolean)) {
|
||||
throw new Error('derived() expects stores as input, got a falsy value');
|
||||
}
|
||||
const auto = fn.length < 2;
|
||||
return readable(initial_value, (set, update) => {
|
||||
let started = false;
|
||||
const values = [];
|
||||
let pending = 0;
|
||||
let cleanup = Component.noop;
|
||||
const sync = () => {
|
||||
if (pending) {
|
||||
return;
|
||||
}
|
||||
cleanup();
|
||||
const result = fn(single ? values[0] : values, set, update);
|
||||
if (auto) {
|
||||
set(result);
|
||||
} else {
|
||||
cleanup = Component.is_function(result) ? result : Component.noop;
|
||||
}
|
||||
};
|
||||
const unsubscribers = stores_array.map((store, i) =>
|
||||
Component.subscribe(
|
||||
store,
|
||||
(value) => {
|
||||
values[i] = value;
|
||||
pending &= ~(1 << i);
|
||||
if (started) {
|
||||
sync();
|
||||
}
|
||||
},
|
||||
() => {
|
||||
pending |= 1 << i;
|
||||
}
|
||||
)
|
||||
);
|
||||
started = true;
|
||||
sync();
|
||||
return function stop() {
|
||||
Component.run_all(unsubscribers);
|
||||
cleanup();
|
||||
// We need to set this to false because callbacks can still happen despite having unsubscribed:
|
||||
// Callbacks might already be placed in the queue which doesn't know it should no longer
|
||||
// invoke this derived store.
|
||||
started = false;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes a store and returns a new one derived from the old one that is readable.
|
||||
*
|
||||
* @template T
|
||||
* @param {import('./public.js').Readable<T>} store - store to make readonly
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
function readonly(store) {
|
||||
return {
|
||||
subscribe: store.subscribe.bind(store)
|
||||
};
|
||||
}
|
||||
|
||||
exports.get = Component.get_store_value;
|
||||
exports.derived = derived;
|
||||
exports.readable = readable;
|
||||
exports.readonly = readonly;
|
||||
exports.writable = writable;
|
||||
@ -1,184 +0,0 @@
|
||||
import { noop, subscribe, run_all, safe_not_equal, is_function } from '../internal/Component-cd97939e.mjs';
|
||||
export { get_store_value as get } from '../internal/Component-cd97939e.mjs';
|
||||
|
||||
const subscriber_queue = [];
|
||||
|
||||
/**
|
||||
* Creates a `Readable` store that allows reading by subscription.
|
||||
* @template T
|
||||
* @param {T} value initial value
|
||||
* @param {import('./public.js').StartStopNotifier<T>} start
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
function readable(value, start) {
|
||||
return {
|
||||
subscribe: writable(value, start).subscribe
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a `Writable` store that allows both updating and reading by subscription.
|
||||
* @template T
|
||||
* @param {T} value initial value
|
||||
* @param {import('./public.js').StartStopNotifier<T>} start
|
||||
* @returns {import('./public.js').Writable<T>}
|
||||
*/
|
||||
function writable(value, start = noop) {
|
||||
/** @type {import('./public.js').Unsubscriber} */
|
||||
let stop;
|
||||
/** @type {Set<import('./private.js').SubscribeInvalidateTuple<T>>} */
|
||||
const subscribers = new Set();
|
||||
/** @param {T} new_value
|
||||
* @returns {void}
|
||||
*/
|
||||
function set(new_value) {
|
||||
if (safe_not_equal(value, new_value)) {
|
||||
value = new_value;
|
||||
if (stop) {
|
||||
// store is ready
|
||||
const run_queue = !subscriber_queue.length;
|
||||
for (const subscriber of subscribers) {
|
||||
subscriber[1]();
|
||||
subscriber_queue.push(subscriber, value);
|
||||
}
|
||||
if (run_queue) {
|
||||
for (let i = 0; i < subscriber_queue.length; i += 2) {
|
||||
subscriber_queue[i][0](subscriber_queue[i + 1]);
|
||||
}
|
||||
subscriber_queue.length = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @param {import('./public.js').Updater<T>} fn
|
||||
* @returns {void}
|
||||
*/
|
||||
function update(fn) {
|
||||
set(fn(value));
|
||||
}
|
||||
/**
|
||||
* @param {import('./public.js').Subscriber<T>} run
|
||||
* @param {import('./private.js').Invalidator<T>} invalidate
|
||||
* @returns {import('./public.js').Unsubscriber}
|
||||
*/
|
||||
function subscribe(run, invalidate = noop) {
|
||||
/** @type {import('./private.js').SubscribeInvalidateTuple<T>} */
|
||||
const subscriber = [run, invalidate];
|
||||
subscribers.add(subscriber);
|
||||
if (subscribers.size === 1) {
|
||||
stop = start(set, update) || noop;
|
||||
}
|
||||
run(value);
|
||||
return () => {
|
||||
subscribers.delete(subscriber);
|
||||
if (subscribers.size === 0 && stop) {
|
||||
stop();
|
||||
stop = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
return { set, update, subscribe };
|
||||
}
|
||||
|
||||
/**
|
||||
* Derived value store by synchronizing one or more readable stores and
|
||||
* applying an aggregation function over its input values.
|
||||
*
|
||||
* @template {import('./private.js').Stores} S
|
||||
* @template T
|
||||
* @overload
|
||||
* @param {S} stores - input stores
|
||||
* @param {(values: import('./public.js').StoresValues<S>, set: import('./public.js').Subscriber<T>, update: (fn: import('./public.js').Updater<T>) => void) => import('./public.js').Unsubscriber | void} fn - function callback that aggregates the values
|
||||
* @param {T} [initial_value] - initial value
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Derived value store by synchronizing one or more readable stores and
|
||||
* applying an aggregation function over its input values.
|
||||
*
|
||||
* @template {import('./private.js').Stores} S
|
||||
* @template T
|
||||
* @overload
|
||||
* @param {S} stores - input stores
|
||||
* @param {(values: import('./public.js').StoresValues<S>) => T} fn - function callback that aggregates the values
|
||||
* @param {T} [initial_value] - initial value
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @template {import('./private.js').Stores} S
|
||||
* @template T
|
||||
* @param {S} stores
|
||||
* @param {Function} fn
|
||||
* @param {T} [initial_value]
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
function derived(stores, fn, initial_value) {
|
||||
const single = !Array.isArray(stores);
|
||||
/** @type {Array<import('./public.js').Readable<any>>} */
|
||||
const stores_array = single ? [stores] : stores;
|
||||
if (!stores_array.every(Boolean)) {
|
||||
throw new Error('derived() expects stores as input, got a falsy value');
|
||||
}
|
||||
const auto = fn.length < 2;
|
||||
return readable(initial_value, (set, update) => {
|
||||
let started = false;
|
||||
const values = [];
|
||||
let pending = 0;
|
||||
let cleanup = noop;
|
||||
const sync = () => {
|
||||
if (pending) {
|
||||
return;
|
||||
}
|
||||
cleanup();
|
||||
const result = fn(single ? values[0] : values, set, update);
|
||||
if (auto) {
|
||||
set(result);
|
||||
} else {
|
||||
cleanup = is_function(result) ? result : noop;
|
||||
}
|
||||
};
|
||||
const unsubscribers = stores_array.map((store, i) =>
|
||||
subscribe(
|
||||
store,
|
||||
(value) => {
|
||||
values[i] = value;
|
||||
pending &= ~(1 << i);
|
||||
if (started) {
|
||||
sync();
|
||||
}
|
||||
},
|
||||
() => {
|
||||
pending |= 1 << i;
|
||||
}
|
||||
)
|
||||
);
|
||||
started = true;
|
||||
sync();
|
||||
return function stop() {
|
||||
run_all(unsubscribers);
|
||||
cleanup();
|
||||
// We need to set this to false because callbacks can still happen despite having unsubscribed:
|
||||
// Callbacks might already be placed in the queue which doesn't know it should no longer
|
||||
// invoke this derived store.
|
||||
started = false;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes a store and returns a new one derived from the old one that is readable.
|
||||
*
|
||||
* @template T
|
||||
* @param {import('./public.js').Readable<T>} store - store to make readonly
|
||||
* @returns {import('./public.js').Readable<T>}
|
||||
*/
|
||||
function readonly(store) {
|
||||
return {
|
||||
subscribe: store.subscribe.bind(store)
|
||||
};
|
||||
}
|
||||
|
||||
export { derived, readable, readonly, writable };
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"main": "./index",
|
||||
"module": "./index.mjs",
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from '../types/runtime/transition/index.js';
|
||||
@ -1,244 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var easing = require('../easing/index.js');
|
||||
var Component = require('../internal/Component-9c4b98a2.js');
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').BlurParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function blur(
|
||||
node,
|
||||
{ delay = 0, duration = 400, easing: easing$1 = easing.cubicInOut, amount = 5, opacity = 0 } = {}
|
||||
) {
|
||||
const style = getComputedStyle(node);
|
||||
const target_opacity = +style.opacity;
|
||||
const f = style.filter === 'none' ? '' : style.filter;
|
||||
const od = target_opacity * (1 - opacity);
|
||||
const [value, unit] = Component.split_css_unit(amount);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing: easing$1,
|
||||
css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').FadeParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function fade(node, { delay = 0, duration = 400, easing = Component.identity } = {}) {
|
||||
const o = +getComputedStyle(node).opacity;
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (t) => `opacity: ${t * o}`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').FlyParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function fly(
|
||||
node,
|
||||
{ delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, x = 0, y = 0, opacity = 0 } = {}
|
||||
) {
|
||||
const style = getComputedStyle(node);
|
||||
const target_opacity = +style.opacity;
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const od = target_opacity * (1 - opacity);
|
||||
const [xValue, xUnit] = Component.split_css_unit(x);
|
||||
const [yValue, yUnit] = Component.split_css_unit(y);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing: easing$1,
|
||||
css: (t, u) => `
|
||||
transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
|
||||
opacity: ${target_opacity - od * u}`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').SlideParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function slide(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, axis = 'y' } = {}) {
|
||||
const style = getComputedStyle(node);
|
||||
const opacity = +style.opacity;
|
||||
const primary_property = axis === 'y' ? 'height' : 'width';
|
||||
const primary_property_value = parseFloat(style[primary_property]);
|
||||
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
|
||||
const capitalized_secondary_properties = secondary_properties.map(
|
||||
(e) => `${e[0].toUpperCase()}${e.slice(1)}`
|
||||
);
|
||||
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
|
||||
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
|
||||
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
|
||||
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
|
||||
const border_width_start_value = parseFloat(
|
||||
style[`border${capitalized_secondary_properties[0]}Width`]
|
||||
);
|
||||
const border_width_end_value = parseFloat(
|
||||
style[`border${capitalized_secondary_properties[1]}Width`]
|
||||
);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing: easing$1,
|
||||
css: (t) =>
|
||||
'overflow: hidden;' +
|
||||
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
||||
`${primary_property}: ${t * primary_property_value}px;` +
|
||||
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
|
||||
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
|
||||
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
|
||||
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
|
||||
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
|
||||
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').ScaleParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function scale(
|
||||
node,
|
||||
{ delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, start = 0, opacity = 0 } = {}
|
||||
) {
|
||||
const style = getComputedStyle(node);
|
||||
const target_opacity = +style.opacity;
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const sd = 1 - start;
|
||||
const od = target_opacity * (1 - opacity);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing: easing$1,
|
||||
css: (_t, u) => `
|
||||
transform: ${transform} scale(${1 - sd * u});
|
||||
opacity: ${target_opacity - od * u}
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {SVGElement & { getTotalLength(): number }} node
|
||||
* @param {import('./public').DrawParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function draw(node, { delay = 0, speed, duration, easing: easing$1 = easing.cubicInOut } = {}) {
|
||||
let len = node.getTotalLength();
|
||||
const style = getComputedStyle(node);
|
||||
if (style.strokeLinecap !== 'butt') {
|
||||
len += parseInt(style.strokeWidth);
|
||||
}
|
||||
if (duration === undefined) {
|
||||
if (speed === undefined) {
|
||||
duration = 800;
|
||||
} else {
|
||||
duration = len / speed;
|
||||
}
|
||||
} else if (typeof duration === 'function') {
|
||||
duration = duration(len);
|
||||
}
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing: easing$1,
|
||||
css: (_, u) => `
|
||||
stroke-dasharray: ${len};
|
||||
stroke-dashoffset: ${u * len};
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import('./public').CrossfadeParams & {
|
||||
* fallback?: (node: Element, params: import('./public').CrossfadeParams, intro: boolean) => import('./public').TransitionConfig;
|
||||
* }} params
|
||||
* @returns {[(node: any, params: import('./public').CrossfadeParams & { key: any; }) => () => import('./public').TransitionConfig, (node: any, params: import('./public').CrossfadeParams & { key: any; }) => () => import('./public').TransitionConfig]}
|
||||
*/
|
||||
function crossfade({ fallback, ...defaults }) {
|
||||
/** @type {Map<any, Element>} */
|
||||
const to_receive = new Map();
|
||||
/** @type {Map<any, Element>} */
|
||||
const to_send = new Map();
|
||||
/**
|
||||
* @param {Element} from_node
|
||||
* @param {Element} node
|
||||
* @param {import('./public').CrossfadeParams} params
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function crossfade(from_node, node, params) {
|
||||
const {
|
||||
delay = 0,
|
||||
duration = (d) => Math.sqrt(d) * 30,
|
||||
easing: easing$1 = easing.cubicOut
|
||||
} = Component.assign(Component.assign({}, defaults), params);
|
||||
const from = from_node.getBoundingClientRect();
|
||||
const to = node.getBoundingClientRect();
|
||||
const dx = from.left - to.left;
|
||||
const dy = from.top - to.top;
|
||||
const dw = from.width / to.width;
|
||||
const dh = from.height / to.height;
|
||||
const d = Math.sqrt(dx * dx + dy * dy);
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const opacity = +style.opacity;
|
||||
return {
|
||||
delay,
|
||||
duration: Component.is_function(duration) ? duration(d) : duration,
|
||||
easing: easing$1,
|
||||
css: (t, u) => `
|
||||
opacity: ${t * opacity};
|
||||
transform-origin: top left;
|
||||
transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${
|
||||
t + (1 - t) * dh
|
||||
});
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Map<any, Element>} items
|
||||
* @param {Map<any, Element>} counterparts
|
||||
* @param {boolean} intro
|
||||
* @returns {(node: any, params: import('./public').CrossfadeParams & { key: any; }) => () => import('./public').TransitionConfig}
|
||||
*/
|
||||
function transition(items, counterparts, intro) {
|
||||
return (node, params) => {
|
||||
items.set(params.key, node);
|
||||
return () => {
|
||||
if (counterparts.has(params.key)) {
|
||||
const other_node = counterparts.get(params.key);
|
||||
counterparts.delete(params.key);
|
||||
return crossfade(other_node, node, params);
|
||||
}
|
||||
// if the node is disappearing altogether
|
||||
// (i.e. wasn't claimed by the other list)
|
||||
// then we need to supply an outro
|
||||
items.delete(params.key);
|
||||
return fallback && fallback(node, params, intro);
|
||||
};
|
||||
};
|
||||
}
|
||||
return [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];
|
||||
}
|
||||
|
||||
exports.blur = blur;
|
||||
exports.crossfade = crossfade;
|
||||
exports.draw = draw;
|
||||
exports.fade = fade;
|
||||
exports.fly = fly;
|
||||
exports.scale = scale;
|
||||
exports.slide = slide;
|
||||
@ -1,236 +0,0 @@
|
||||
import { cubicInOut, cubicOut } from '../easing/index.mjs';
|
||||
import { split_css_unit, identity, assign, is_function } from '../internal/Component-cd97939e.mjs';
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').BlurParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function blur(
|
||||
node,
|
||||
{ delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}
|
||||
) {
|
||||
const style = getComputedStyle(node);
|
||||
const target_opacity = +style.opacity;
|
||||
const f = style.filter === 'none' ? '' : style.filter;
|
||||
const od = target_opacity * (1 - opacity);
|
||||
const [value, unit] = split_css_unit(amount);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').FadeParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function fade(node, { delay = 0, duration = 400, easing = identity } = {}) {
|
||||
const o = +getComputedStyle(node).opacity;
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (t) => `opacity: ${t * o}`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').FlyParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function fly(
|
||||
node,
|
||||
{ delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}
|
||||
) {
|
||||
const style = getComputedStyle(node);
|
||||
const target_opacity = +style.opacity;
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const od = target_opacity * (1 - opacity);
|
||||
const [xValue, xUnit] = split_css_unit(x);
|
||||
const [yValue, yUnit] = split_css_unit(y);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (t, u) => `
|
||||
transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
|
||||
opacity: ${target_opacity - od * u}`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').SlideParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) {
|
||||
const style = getComputedStyle(node);
|
||||
const opacity = +style.opacity;
|
||||
const primary_property = axis === 'y' ? 'height' : 'width';
|
||||
const primary_property_value = parseFloat(style[primary_property]);
|
||||
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
|
||||
const capitalized_secondary_properties = secondary_properties.map(
|
||||
(e) => `${e[0].toUpperCase()}${e.slice(1)}`
|
||||
);
|
||||
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
|
||||
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
|
||||
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
|
||||
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
|
||||
const border_width_start_value = parseFloat(
|
||||
style[`border${capitalized_secondary_properties[0]}Width`]
|
||||
);
|
||||
const border_width_end_value = parseFloat(
|
||||
style[`border${capitalized_secondary_properties[1]}Width`]
|
||||
);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (t) =>
|
||||
'overflow: hidden;' +
|
||||
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
||||
`${primary_property}: ${t * primary_property_value}px;` +
|
||||
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
|
||||
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
|
||||
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
|
||||
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
|
||||
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
|
||||
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} node
|
||||
* @param {import('./public').ScaleParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function scale(
|
||||
node,
|
||||
{ delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}
|
||||
) {
|
||||
const style = getComputedStyle(node);
|
||||
const target_opacity = +style.opacity;
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const sd = 1 - start;
|
||||
const od = target_opacity * (1 - opacity);
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (_t, u) => `
|
||||
transform: ${transform} scale(${1 - sd * u});
|
||||
opacity: ${target_opacity - od * u}
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {SVGElement & { getTotalLength(): number }} node
|
||||
* @param {import('./public').DrawParams} [params]
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function draw(node, { delay = 0, speed, duration, easing = cubicInOut } = {}) {
|
||||
let len = node.getTotalLength();
|
||||
const style = getComputedStyle(node);
|
||||
if (style.strokeLinecap !== 'butt') {
|
||||
len += parseInt(style.strokeWidth);
|
||||
}
|
||||
if (duration === undefined) {
|
||||
if (speed === undefined) {
|
||||
duration = 800;
|
||||
} else {
|
||||
duration = len / speed;
|
||||
}
|
||||
} else if (typeof duration === 'function') {
|
||||
duration = duration(len);
|
||||
}
|
||||
return {
|
||||
delay,
|
||||
duration,
|
||||
easing,
|
||||
css: (_, u) => `
|
||||
stroke-dasharray: ${len};
|
||||
stroke-dashoffset: ${u * len};
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import('./public').CrossfadeParams & {
|
||||
* fallback?: (node: Element, params: import('./public').CrossfadeParams, intro: boolean) => import('./public').TransitionConfig;
|
||||
* }} params
|
||||
* @returns {[(node: any, params: import('./public').CrossfadeParams & { key: any; }) => () => import('./public').TransitionConfig, (node: any, params: import('./public').CrossfadeParams & { key: any; }) => () => import('./public').TransitionConfig]}
|
||||
*/
|
||||
function crossfade({ fallback, ...defaults }) {
|
||||
/** @type {Map<any, Element>} */
|
||||
const to_receive = new Map();
|
||||
/** @type {Map<any, Element>} */
|
||||
const to_send = new Map();
|
||||
/**
|
||||
* @param {Element} from_node
|
||||
* @param {Element} node
|
||||
* @param {import('./public').CrossfadeParams} params
|
||||
* @returns {import('./public').TransitionConfig}
|
||||
*/
|
||||
function crossfade(from_node, node, params) {
|
||||
const {
|
||||
delay = 0,
|
||||
duration = (d) => Math.sqrt(d) * 30,
|
||||
easing = cubicOut
|
||||
} = assign(assign({}, defaults), params);
|
||||
const from = from_node.getBoundingClientRect();
|
||||
const to = node.getBoundingClientRect();
|
||||
const dx = from.left - to.left;
|
||||
const dy = from.top - to.top;
|
||||
const dw = from.width / to.width;
|
||||
const dh = from.height / to.height;
|
||||
const d = Math.sqrt(dx * dx + dy * dy);
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
const opacity = +style.opacity;
|
||||
return {
|
||||
delay,
|
||||
duration: is_function(duration) ? duration(d) : duration,
|
||||
easing,
|
||||
css: (t, u) => `
|
||||
opacity: ${t * opacity};
|
||||
transform-origin: top left;
|
||||
transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${
|
||||
t + (1 - t) * dh
|
||||
});
|
||||
`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Map<any, Element>} items
|
||||
* @param {Map<any, Element>} counterparts
|
||||
* @param {boolean} intro
|
||||
* @returns {(node: any, params: import('./public').CrossfadeParams & { key: any; }) => () => import('./public').TransitionConfig}
|
||||
*/
|
||||
function transition(items, counterparts, intro) {
|
||||
return (node, params) => {
|
||||
items.set(params.key, node);
|
||||
return () => {
|
||||
if (counterparts.has(params.key)) {
|
||||
const other_node = counterparts.get(params.key);
|
||||
counterparts.delete(params.key);
|
||||
return crossfade(other_node, node, params);
|
||||
}
|
||||
// if the node is disappearing altogether
|
||||
// (i.e. wasn't claimed by the other list)
|
||||
// then we need to supply an outro
|
||||
items.delete(params.key);
|
||||
return fallback && fallback(node, params, intro);
|
||||
};
|
||||
};
|
||||
}
|
||||
return [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];
|
||||
}
|
||||
|
||||
export { blur, crossfade, draw, fade, fly, scale, slide };
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"main": "./index",
|
||||
"module": "./index.mjs",
|
||||
"types": "./index.d.ts"
|
||||
}
|
||||
Loading…
Reference in new issue