1113 lines
31 KiB
JavaScript
1113 lines
31 KiB
JavaScript
var __defProp = Object.defineProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
|
|
// src/globals.ts
|
|
var globals_exports = {};
|
|
__export(globals_exports, {
|
|
assign: () => assign,
|
|
colors: () => colors,
|
|
createStringInterpolator: () => createStringInterpolator,
|
|
skipAnimation: () => skipAnimation,
|
|
to: () => to,
|
|
willAdvance: () => willAdvance
|
|
});
|
|
import { raf } from "@react-spring/rafz";
|
|
|
|
// src/helpers.ts
|
|
function noop() {
|
|
}
|
|
var defineHidden = (obj, key, value) => Object.defineProperty(obj, key, { value, writable: true, configurable: true });
|
|
var is = {
|
|
arr: Array.isArray,
|
|
obj: (a) => !!a && a.constructor.name === "Object",
|
|
fun: (a) => typeof a === "function",
|
|
str: (a) => typeof a === "string",
|
|
num: (a) => typeof a === "number",
|
|
und: (a) => a === void 0
|
|
};
|
|
function isEqual(a, b) {
|
|
if (is.arr(a)) {
|
|
if (!is.arr(b) || a.length !== b.length) return false;
|
|
for (let i = 0; i < a.length; i++) {
|
|
if (a[i] !== b[i]) return false;
|
|
}
|
|
return true;
|
|
}
|
|
return a === b;
|
|
}
|
|
var each = (obj, fn) => obj.forEach(fn);
|
|
function eachProp(obj, fn, ctx) {
|
|
if (is.arr(obj)) {
|
|
for (let i = 0; i < obj.length; i++) {
|
|
fn.call(ctx, obj[i], `${i}`);
|
|
}
|
|
return;
|
|
}
|
|
for (const key in obj) {
|
|
if (obj.hasOwnProperty(key)) {
|
|
fn.call(ctx, obj[key], key);
|
|
}
|
|
}
|
|
}
|
|
var toArray = (a) => is.und(a) ? [] : is.arr(a) ? a : [a];
|
|
function flush(queue, iterator) {
|
|
if (queue.size) {
|
|
const items = Array.from(queue);
|
|
queue.clear();
|
|
each(items, iterator);
|
|
}
|
|
}
|
|
var flushCalls = (queue, ...args) => flush(queue, (fn) => fn(...args));
|
|
var isSSR = () => typeof window === "undefined" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
|
|
|
|
// src/globals.ts
|
|
var createStringInterpolator;
|
|
var to;
|
|
var colors = null;
|
|
var skipAnimation = false;
|
|
var willAdvance = noop;
|
|
var assign = (globals) => {
|
|
if (globals.to) to = globals.to;
|
|
if (globals.now) raf.now = globals.now;
|
|
if (globals.colors !== void 0) colors = globals.colors;
|
|
if (globals.skipAnimation != null) skipAnimation = globals.skipAnimation;
|
|
if (globals.createStringInterpolator)
|
|
createStringInterpolator = globals.createStringInterpolator;
|
|
if (globals.requestAnimationFrame) raf.use(globals.requestAnimationFrame);
|
|
if (globals.batchedUpdates) raf.batchedUpdates = globals.batchedUpdates;
|
|
if (globals.willAdvance) willAdvance = globals.willAdvance;
|
|
if (globals.frameLoop) raf.frameLoop = globals.frameLoop;
|
|
};
|
|
|
|
// src/FrameLoop.ts
|
|
import { raf as raf2 } from "@react-spring/rafz";
|
|
var startQueue = /* @__PURE__ */ new Set();
|
|
var currentFrame = [];
|
|
var prevFrame = [];
|
|
var priority = 0;
|
|
var frameLoop = {
|
|
get idle() {
|
|
return !startQueue.size && !currentFrame.length;
|
|
},
|
|
/** Advance the given animation on every frame until idle. */
|
|
start(animation) {
|
|
if (priority > animation.priority) {
|
|
startQueue.add(animation);
|
|
raf2.onStart(flushStartQueue);
|
|
} else {
|
|
startSafely(animation);
|
|
raf2(advance);
|
|
}
|
|
},
|
|
/** Advance all animations by the given time. */
|
|
advance,
|
|
/** Call this when an animation's priority changes. */
|
|
sort(animation) {
|
|
if (priority) {
|
|
raf2.onFrame(() => frameLoop.sort(animation));
|
|
} else {
|
|
const prevIndex = currentFrame.indexOf(animation);
|
|
if (~prevIndex) {
|
|
currentFrame.splice(prevIndex, 1);
|
|
startUnsafely(animation);
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* Clear all animations. For testing purposes.
|
|
*
|
|
* ☠️ Never call this from within the frameloop.
|
|
*/
|
|
clear() {
|
|
currentFrame = [];
|
|
startQueue.clear();
|
|
}
|
|
};
|
|
function flushStartQueue() {
|
|
startQueue.forEach(startSafely);
|
|
startQueue.clear();
|
|
raf2(advance);
|
|
}
|
|
function startSafely(animation) {
|
|
if (!currentFrame.includes(animation)) startUnsafely(animation);
|
|
}
|
|
function startUnsafely(animation) {
|
|
currentFrame.splice(
|
|
findIndex(currentFrame, (other) => other.priority > animation.priority),
|
|
0,
|
|
animation
|
|
);
|
|
}
|
|
function advance(dt) {
|
|
const nextFrame = prevFrame;
|
|
for (let i = 0; i < currentFrame.length; i++) {
|
|
const animation = currentFrame[i];
|
|
priority = animation.priority;
|
|
if (!animation.idle) {
|
|
willAdvance(animation);
|
|
animation.advance(dt);
|
|
if (!animation.idle) {
|
|
nextFrame.push(animation);
|
|
}
|
|
}
|
|
}
|
|
priority = 0;
|
|
prevFrame = currentFrame;
|
|
prevFrame.length = 0;
|
|
currentFrame = nextFrame;
|
|
return currentFrame.length > 0;
|
|
}
|
|
function findIndex(arr, test) {
|
|
const index = arr.findIndex(test);
|
|
return index < 0 ? arr.length : index;
|
|
}
|
|
|
|
// src/clamp.ts
|
|
var clamp = (min, max, v) => Math.min(Math.max(v, min), max);
|
|
|
|
// src/colors.ts
|
|
var colors2 = {
|
|
transparent: 0,
|
|
aliceblue: 4042850303,
|
|
antiquewhite: 4209760255,
|
|
aqua: 16777215,
|
|
aquamarine: 2147472639,
|
|
azure: 4043309055,
|
|
beige: 4126530815,
|
|
bisque: 4293182719,
|
|
black: 255,
|
|
blanchedalmond: 4293643775,
|
|
blue: 65535,
|
|
blueviolet: 2318131967,
|
|
brown: 2771004159,
|
|
burlywood: 3736635391,
|
|
burntsienna: 3934150143,
|
|
cadetblue: 1604231423,
|
|
chartreuse: 2147418367,
|
|
chocolate: 3530104575,
|
|
coral: 4286533887,
|
|
cornflowerblue: 1687547391,
|
|
cornsilk: 4294499583,
|
|
crimson: 3692313855,
|
|
cyan: 16777215,
|
|
darkblue: 35839,
|
|
darkcyan: 9145343,
|
|
darkgoldenrod: 3095792639,
|
|
darkgray: 2846468607,
|
|
darkgreen: 6553855,
|
|
darkgrey: 2846468607,
|
|
darkkhaki: 3182914559,
|
|
darkmagenta: 2332068863,
|
|
darkolivegreen: 1433087999,
|
|
darkorange: 4287365375,
|
|
darkorchid: 2570243327,
|
|
darkred: 2332033279,
|
|
darksalmon: 3918953215,
|
|
darkseagreen: 2411499519,
|
|
darkslateblue: 1211993087,
|
|
darkslategray: 793726975,
|
|
darkslategrey: 793726975,
|
|
darkturquoise: 13554175,
|
|
darkviolet: 2483082239,
|
|
deeppink: 4279538687,
|
|
deepskyblue: 12582911,
|
|
dimgray: 1768516095,
|
|
dimgrey: 1768516095,
|
|
dodgerblue: 512819199,
|
|
firebrick: 2988581631,
|
|
floralwhite: 4294635775,
|
|
forestgreen: 579543807,
|
|
fuchsia: 4278255615,
|
|
gainsboro: 3705462015,
|
|
ghostwhite: 4177068031,
|
|
gold: 4292280575,
|
|
goldenrod: 3668254975,
|
|
gray: 2155905279,
|
|
green: 8388863,
|
|
greenyellow: 2919182335,
|
|
grey: 2155905279,
|
|
honeydew: 4043305215,
|
|
hotpink: 4285117695,
|
|
indianred: 3445382399,
|
|
indigo: 1258324735,
|
|
ivory: 4294963455,
|
|
khaki: 4041641215,
|
|
lavender: 3873897215,
|
|
lavenderblush: 4293981695,
|
|
lawngreen: 2096890111,
|
|
lemonchiffon: 4294626815,
|
|
lightblue: 2916673279,
|
|
lightcoral: 4034953471,
|
|
lightcyan: 3774873599,
|
|
lightgoldenrodyellow: 4210742015,
|
|
lightgray: 3553874943,
|
|
lightgreen: 2431553791,
|
|
lightgrey: 3553874943,
|
|
lightpink: 4290167295,
|
|
lightsalmon: 4288707327,
|
|
lightseagreen: 548580095,
|
|
lightskyblue: 2278488831,
|
|
lightslategray: 2005441023,
|
|
lightslategrey: 2005441023,
|
|
lightsteelblue: 2965692159,
|
|
lightyellow: 4294959359,
|
|
lime: 16711935,
|
|
limegreen: 852308735,
|
|
linen: 4210091775,
|
|
magenta: 4278255615,
|
|
maroon: 2147483903,
|
|
mediumaquamarine: 1724754687,
|
|
mediumblue: 52735,
|
|
mediumorchid: 3126187007,
|
|
mediumpurple: 2473647103,
|
|
mediumseagreen: 1018393087,
|
|
mediumslateblue: 2070474495,
|
|
mediumspringgreen: 16423679,
|
|
mediumturquoise: 1221709055,
|
|
mediumvioletred: 3340076543,
|
|
midnightblue: 421097727,
|
|
mintcream: 4127193855,
|
|
mistyrose: 4293190143,
|
|
moccasin: 4293178879,
|
|
navajowhite: 4292783615,
|
|
navy: 33023,
|
|
oldlace: 4260751103,
|
|
olive: 2155872511,
|
|
olivedrab: 1804477439,
|
|
orange: 4289003775,
|
|
orangered: 4282712319,
|
|
orchid: 3664828159,
|
|
palegoldenrod: 4008225535,
|
|
palegreen: 2566625535,
|
|
paleturquoise: 2951671551,
|
|
palevioletred: 3681588223,
|
|
papayawhip: 4293907967,
|
|
peachpuff: 4292524543,
|
|
peru: 3448061951,
|
|
pink: 4290825215,
|
|
plum: 3718307327,
|
|
powderblue: 2967529215,
|
|
purple: 2147516671,
|
|
rebeccapurple: 1714657791,
|
|
red: 4278190335,
|
|
rosybrown: 3163525119,
|
|
royalblue: 1097458175,
|
|
saddlebrown: 2336560127,
|
|
salmon: 4202722047,
|
|
sandybrown: 4104413439,
|
|
seagreen: 780883967,
|
|
seashell: 4294307583,
|
|
sienna: 2689740287,
|
|
silver: 3233857791,
|
|
skyblue: 2278484991,
|
|
slateblue: 1784335871,
|
|
slategray: 1887473919,
|
|
slategrey: 1887473919,
|
|
snow: 4294638335,
|
|
springgreen: 16744447,
|
|
steelblue: 1182971135,
|
|
tan: 3535047935,
|
|
teal: 8421631,
|
|
thistle: 3636451583,
|
|
tomato: 4284696575,
|
|
turquoise: 1088475391,
|
|
violet: 4001558271,
|
|
wheat: 4125012991,
|
|
white: 4294967295,
|
|
whitesmoke: 4126537215,
|
|
yellow: 4294902015,
|
|
yellowgreen: 2597139199
|
|
};
|
|
|
|
// src/colorMatchers.ts
|
|
var NUMBER = "[-+]?\\d*\\.?\\d+";
|
|
var PERCENTAGE = NUMBER + "%";
|
|
function call(...parts) {
|
|
return "\\(\\s*(" + parts.join(")\\s*,\\s*(") + ")\\s*\\)";
|
|
}
|
|
var rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
|
|
var rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
|
|
var hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
|
|
var hsla = new RegExp(
|
|
"hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
|
|
);
|
|
var hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
|
|
var hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
|
|
var hex6 = /^#([0-9a-fA-F]{6})$/;
|
|
var hex8 = /^#([0-9a-fA-F]{8})$/;
|
|
|
|
// src/normalizeColor.ts
|
|
function normalizeColor(color) {
|
|
let match;
|
|
if (typeof color === "number") {
|
|
return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
|
|
}
|
|
if (match = hex6.exec(color))
|
|
return parseInt(match[1] + "ff", 16) >>> 0;
|
|
if (colors && colors[color] !== void 0) {
|
|
return colors[color];
|
|
}
|
|
if (match = rgb.exec(color)) {
|
|
return (parse255(match[1]) << 24 | // r
|
|
parse255(match[2]) << 16 | // g
|
|
parse255(match[3]) << 8 | // b
|
|
255) >>> // a
|
|
0;
|
|
}
|
|
if (match = rgba.exec(color)) {
|
|
return (parse255(match[1]) << 24 | // r
|
|
parse255(match[2]) << 16 | // g
|
|
parse255(match[3]) << 8 | // b
|
|
parse1(match[4])) >>> // a
|
|
0;
|
|
}
|
|
if (match = hex3.exec(color)) {
|
|
return parseInt(
|
|
match[1] + match[1] + // r
|
|
match[2] + match[2] + // g
|
|
match[3] + match[3] + // b
|
|
"ff",
|
|
// a
|
|
16
|
|
) >>> 0;
|
|
}
|
|
if (match = hex8.exec(color)) return parseInt(match[1], 16) >>> 0;
|
|
if (match = hex4.exec(color)) {
|
|
return parseInt(
|
|
match[1] + match[1] + // r
|
|
match[2] + match[2] + // g
|
|
match[3] + match[3] + // b
|
|
match[4] + match[4],
|
|
// a
|
|
16
|
|
) >>> 0;
|
|
}
|
|
if (match = hsl.exec(color)) {
|
|
return (hslToRgb(
|
|
parse360(match[1]),
|
|
// h
|
|
parsePercentage(match[2]),
|
|
// s
|
|
parsePercentage(match[3])
|
|
// l
|
|
) | 255) >>> // a
|
|
0;
|
|
}
|
|
if (match = hsla.exec(color)) {
|
|
return (hslToRgb(
|
|
parse360(match[1]),
|
|
// h
|
|
parsePercentage(match[2]),
|
|
// s
|
|
parsePercentage(match[3])
|
|
// l
|
|
) | parse1(match[4])) >>> // a
|
|
0;
|
|
}
|
|
return null;
|
|
}
|
|
function hue2rgb(p, q, t) {
|
|
if (t < 0) t += 1;
|
|
if (t > 1) t -= 1;
|
|
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
|
if (t < 1 / 2) return q;
|
|
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
|
return p;
|
|
}
|
|
function hslToRgb(h, s, l) {
|
|
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
const p = 2 * l - q;
|
|
const r = hue2rgb(p, q, h + 1 / 3);
|
|
const g = hue2rgb(p, q, h);
|
|
const b = hue2rgb(p, q, h - 1 / 3);
|
|
return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
|
|
}
|
|
function parse255(str) {
|
|
const int = parseInt(str, 10);
|
|
if (int < 0) return 0;
|
|
if (int > 255) return 255;
|
|
return int;
|
|
}
|
|
function parse360(str) {
|
|
const int = parseFloat(str);
|
|
return (int % 360 + 360) % 360 / 360;
|
|
}
|
|
function parse1(str) {
|
|
const num = parseFloat(str);
|
|
if (num < 0) return 0;
|
|
if (num > 1) return 255;
|
|
return Math.round(num * 255);
|
|
}
|
|
function parsePercentage(str) {
|
|
const int = parseFloat(str);
|
|
if (int < 0) return 0;
|
|
if (int > 100) return 1;
|
|
return int / 100;
|
|
}
|
|
|
|
// src/colorToRgba.ts
|
|
function colorToRgba(input) {
|
|
let int32Color = normalizeColor(input);
|
|
if (int32Color === null) return input;
|
|
int32Color = int32Color || 0;
|
|
const r = (int32Color & 4278190080) >>> 24;
|
|
const g = (int32Color & 16711680) >>> 16;
|
|
const b = (int32Color & 65280) >>> 8;
|
|
const a = (int32Color & 255) / 255;
|
|
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
}
|
|
|
|
// src/createInterpolator.ts
|
|
var createInterpolator = (range, output, extrapolate) => {
|
|
if (is.fun(range)) {
|
|
return range;
|
|
}
|
|
if (is.arr(range)) {
|
|
return createInterpolator({
|
|
range,
|
|
output,
|
|
extrapolate
|
|
});
|
|
}
|
|
if (is.str(range.output[0])) {
|
|
return createStringInterpolator(range);
|
|
}
|
|
const config = range;
|
|
const outputRange = config.output;
|
|
const inputRange = config.range || [0, 1];
|
|
const extrapolateLeft = config.extrapolateLeft || config.extrapolate || "extend";
|
|
const extrapolateRight = config.extrapolateRight || config.extrapolate || "extend";
|
|
const easing = config.easing || ((t) => t);
|
|
return (input) => {
|
|
const range2 = findRange(input, inputRange);
|
|
return interpolate(
|
|
input,
|
|
inputRange[range2],
|
|
inputRange[range2 + 1],
|
|
outputRange[range2],
|
|
outputRange[range2 + 1],
|
|
easing,
|
|
extrapolateLeft,
|
|
extrapolateRight,
|
|
config.map
|
|
);
|
|
};
|
|
};
|
|
function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
|
|
let result = map ? map(input) : input;
|
|
if (result < inputMin) {
|
|
if (extrapolateLeft === "identity") return result;
|
|
else if (extrapolateLeft === "clamp") result = inputMin;
|
|
}
|
|
if (result > inputMax) {
|
|
if (extrapolateRight === "identity") return result;
|
|
else if (extrapolateRight === "clamp") result = inputMax;
|
|
}
|
|
if (outputMin === outputMax) return outputMin;
|
|
if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax;
|
|
if (inputMin === -Infinity) result = -result;
|
|
else if (inputMax === Infinity) result = result - inputMin;
|
|
else result = (result - inputMin) / (inputMax - inputMin);
|
|
result = easing(result);
|
|
if (outputMin === -Infinity) result = -result;
|
|
else if (outputMax === Infinity) result = result + outputMin;
|
|
else result = result * (outputMax - outputMin) + outputMin;
|
|
return result;
|
|
}
|
|
function findRange(input, inputRange) {
|
|
for (var i = 1; i < inputRange.length - 1; ++i)
|
|
if (inputRange[i] >= input) break;
|
|
return i - 1;
|
|
}
|
|
|
|
// src/easings.ts
|
|
var steps = (steps2, direction = "end") => (progress2) => {
|
|
progress2 = direction === "end" ? Math.min(progress2, 0.999) : Math.max(progress2, 1e-3);
|
|
const expanded = progress2 * steps2;
|
|
const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
|
|
return clamp(0, 1, rounded / steps2);
|
|
};
|
|
var c1 = 1.70158;
|
|
var c2 = c1 * 1.525;
|
|
var c3 = c1 + 1;
|
|
var c4 = 2 * Math.PI / 3;
|
|
var c5 = 2 * Math.PI / 4.5;
|
|
var bounceOut = (x) => {
|
|
const n1 = 7.5625;
|
|
const d1 = 2.75;
|
|
if (x < 1 / d1) {
|
|
return n1 * x * x;
|
|
} else if (x < 2 / d1) {
|
|
return n1 * (x -= 1.5 / d1) * x + 0.75;
|
|
} else if (x < 2.5 / d1) {
|
|
return n1 * (x -= 2.25 / d1) * x + 0.9375;
|
|
} else {
|
|
return n1 * (x -= 2.625 / d1) * x + 0.984375;
|
|
}
|
|
};
|
|
var easings = {
|
|
linear: (x) => x,
|
|
easeInQuad: (x) => x * x,
|
|
easeOutQuad: (x) => 1 - (1 - x) * (1 - x),
|
|
easeInOutQuad: (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
|
|
easeInCubic: (x) => x * x * x,
|
|
easeOutCubic: (x) => 1 - Math.pow(1 - x, 3),
|
|
easeInOutCubic: (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
|
|
easeInQuart: (x) => x * x * x * x,
|
|
easeOutQuart: (x) => 1 - Math.pow(1 - x, 4),
|
|
easeInOutQuart: (x) => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
|
|
easeInQuint: (x) => x * x * x * x * x,
|
|
easeOutQuint: (x) => 1 - Math.pow(1 - x, 5),
|
|
easeInOutQuint: (x) => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
|
|
easeInSine: (x) => 1 - Math.cos(x * Math.PI / 2),
|
|
easeOutSine: (x) => Math.sin(x * Math.PI / 2),
|
|
easeInOutSine: (x) => -(Math.cos(Math.PI * x) - 1) / 2,
|
|
easeInExpo: (x) => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
|
|
easeOutExpo: (x) => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
|
|
easeInOutExpo: (x) => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
|
|
easeInCirc: (x) => 1 - Math.sqrt(1 - Math.pow(x, 2)),
|
|
easeOutCirc: (x) => Math.sqrt(1 - Math.pow(x - 1, 2)),
|
|
easeInOutCirc: (x) => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
|
|
easeInBack: (x) => c3 * x * x * x - c1 * x * x,
|
|
easeOutBack: (x) => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
|
|
easeInOutBack: (x) => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
|
|
easeInElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
|
|
easeOutElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
|
|
easeInOutElastic: (x) => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
|
|
easeInBounce: (x) => 1 - bounceOut(1 - x),
|
|
easeOutBounce: bounceOut,
|
|
easeInOutBounce: (x) => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2,
|
|
steps
|
|
};
|
|
|
|
// src/fluids.ts
|
|
var $get = Symbol.for("FluidValue.get");
|
|
var $observers = Symbol.for("FluidValue.observers");
|
|
var hasFluidValue = (arg) => Boolean(arg && arg[$get]);
|
|
var getFluidValue = (arg) => arg && arg[$get] ? arg[$get]() : arg;
|
|
var getFluidObservers = (target) => target[$observers] || null;
|
|
function callFluidObserver(observer2, event) {
|
|
if (observer2.eventObserved) {
|
|
observer2.eventObserved(event);
|
|
} else {
|
|
observer2(event);
|
|
}
|
|
}
|
|
function callFluidObservers(target, event) {
|
|
const observers = target[$observers];
|
|
if (observers) {
|
|
observers.forEach((observer2) => {
|
|
callFluidObserver(observer2, event);
|
|
});
|
|
}
|
|
}
|
|
$get, $observers;
|
|
var FluidValue = class {
|
|
constructor(get) {
|
|
if (!get && !(get = this.get)) {
|
|
throw Error("Unknown getter");
|
|
}
|
|
setFluidGetter(this, get);
|
|
}
|
|
};
|
|
var setFluidGetter = (target, get) => setHidden(target, $get, get);
|
|
function addFluidObserver(target, observer2) {
|
|
if (target[$get]) {
|
|
let observers = target[$observers];
|
|
if (!observers) {
|
|
setHidden(target, $observers, observers = /* @__PURE__ */ new Set());
|
|
}
|
|
if (!observers.has(observer2)) {
|
|
observers.add(observer2);
|
|
if (target.observerAdded) {
|
|
target.observerAdded(observers.size, observer2);
|
|
}
|
|
}
|
|
}
|
|
return observer2;
|
|
}
|
|
function removeFluidObserver(target, observer2) {
|
|
const observers = target[$observers];
|
|
if (observers && observers.has(observer2)) {
|
|
const count = observers.size - 1;
|
|
if (count) {
|
|
observers.delete(observer2);
|
|
} else {
|
|
target[$observers] = null;
|
|
}
|
|
if (target.observerRemoved) {
|
|
target.observerRemoved(count, observer2);
|
|
}
|
|
}
|
|
}
|
|
var setHidden = (target, key, value) => Object.defineProperty(target, key, {
|
|
value,
|
|
writable: true,
|
|
configurable: true
|
|
});
|
|
|
|
// src/regexs.ts
|
|
var numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
|
|
var colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
|
|
var unitRegex = new RegExp(`(${numberRegex.source})(%|[a-z]+)`, "i");
|
|
var rgbaRegex = /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi;
|
|
var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
|
|
|
|
// src/variableToRgba.ts
|
|
var variableToRgba = (input) => {
|
|
const [token, fallback] = parseCSSVariable(input);
|
|
if (!token || isSSR()) {
|
|
return input;
|
|
}
|
|
const value = window.getComputedStyle(document.documentElement).getPropertyValue(token);
|
|
if (value) {
|
|
return value.trim();
|
|
} else if (fallback && fallback.startsWith("--")) {
|
|
const value2 = window.getComputedStyle(document.documentElement).getPropertyValue(fallback);
|
|
if (value2) {
|
|
return value2;
|
|
} else {
|
|
return input;
|
|
}
|
|
} else if (fallback && cssVariableRegex.test(fallback)) {
|
|
return variableToRgba(fallback);
|
|
} else if (fallback) {
|
|
return fallback;
|
|
}
|
|
return input;
|
|
};
|
|
var parseCSSVariable = (current) => {
|
|
const match = cssVariableRegex.exec(current);
|
|
if (!match) return [,];
|
|
const [, token, fallback] = match;
|
|
return [token, fallback];
|
|
};
|
|
|
|
// src/stringInterpolation.ts
|
|
var namedColorRegex;
|
|
var rgbaRound = (_, p1, p2, p3, p4) => `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(p3)}, ${p4})`;
|
|
var createStringInterpolator2 = (config) => {
|
|
if (!namedColorRegex)
|
|
namedColorRegex = colors ? (
|
|
// match color names, ignore partial matches
|
|
new RegExp(`(${Object.keys(colors).join("|")})(?!\\w)`, "g")
|
|
) : (
|
|
// never match
|
|
/^\b$/
|
|
);
|
|
const output = config.output.map((value) => {
|
|
return getFluidValue(value).replace(cssVariableRegex, variableToRgba).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba);
|
|
});
|
|
const keyframes = output.map((value) => value.match(numberRegex).map(Number));
|
|
const outputRanges = keyframes[0].map(
|
|
(_, i) => keyframes.map((values) => {
|
|
if (!(i in values)) {
|
|
throw Error('The arity of each "output" value must be equal');
|
|
}
|
|
return values[i];
|
|
})
|
|
);
|
|
const interpolators = outputRanges.map(
|
|
(output2) => createInterpolator({ ...config, output: output2 })
|
|
);
|
|
return (input) => {
|
|
const missingUnit = !unitRegex.test(output[0]) && output.find((value) => unitRegex.test(value))?.replace(numberRegex, "");
|
|
let i = 0;
|
|
return output[0].replace(
|
|
numberRegex,
|
|
() => `${interpolators[i++](input)}${missingUnit || ""}`
|
|
).replace(rgbaRegex, rgbaRound);
|
|
};
|
|
};
|
|
|
|
// src/deprecations.ts
|
|
var prefix = "react-spring: ";
|
|
var once = (fn) => {
|
|
const func = fn;
|
|
let called = false;
|
|
if (typeof func != "function") {
|
|
throw new TypeError(`${prefix}once requires a function parameter`);
|
|
}
|
|
return (...args) => {
|
|
if (!called) {
|
|
func(...args);
|
|
called = true;
|
|
}
|
|
};
|
|
};
|
|
var warnInterpolate = once(console.warn);
|
|
function deprecateInterpolate() {
|
|
warnInterpolate(
|
|
`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`
|
|
);
|
|
}
|
|
var warnDirectCall = once(console.warn);
|
|
function deprecateDirectCall() {
|
|
warnDirectCall(
|
|
`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`
|
|
);
|
|
}
|
|
|
|
// src/isAnimatedString.ts
|
|
function isAnimatedString(value) {
|
|
return is.str(value) && (value[0] == "#" || /\d/.test(value) || // Do not identify a CSS variable as an AnimatedString if its SSR
|
|
!isSSR() && cssVariableRegex.test(value) || value in (colors || {}));
|
|
}
|
|
|
|
// src/dom-events/scroll/index.ts
|
|
import { raf as raf3 } from "@react-spring/rafz";
|
|
|
|
// src/dom-events/resize/resizeElement.ts
|
|
var observer;
|
|
var resizeHandlers = /* @__PURE__ */ new WeakMap();
|
|
var handleObservation = (entries) => entries.forEach(({ target, contentRect }) => {
|
|
return resizeHandlers.get(target)?.forEach((handler) => handler(contentRect));
|
|
});
|
|
function resizeElement(handler, target) {
|
|
if (!observer) {
|
|
if (typeof ResizeObserver !== "undefined") {
|
|
observer = new ResizeObserver(handleObservation);
|
|
}
|
|
}
|
|
let elementHandlers = resizeHandlers.get(target);
|
|
if (!elementHandlers) {
|
|
elementHandlers = /* @__PURE__ */ new Set();
|
|
resizeHandlers.set(target, elementHandlers);
|
|
}
|
|
elementHandlers.add(handler);
|
|
if (observer) {
|
|
observer.observe(target);
|
|
}
|
|
return () => {
|
|
const elementHandlers2 = resizeHandlers.get(target);
|
|
if (!elementHandlers2) return;
|
|
elementHandlers2.delete(handler);
|
|
if (!elementHandlers2.size && observer) {
|
|
observer.unobserve(target);
|
|
}
|
|
};
|
|
}
|
|
|
|
// src/dom-events/resize/resizeWindow.ts
|
|
var listeners = /* @__PURE__ */ new Set();
|
|
var cleanupWindowResizeHandler;
|
|
var createResizeHandler = () => {
|
|
const handleResize = () => {
|
|
listeners.forEach(
|
|
(callback) => callback({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
})
|
|
);
|
|
};
|
|
window.addEventListener("resize", handleResize);
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
};
|
|
var resizeWindow = (callback) => {
|
|
listeners.add(callback);
|
|
if (!cleanupWindowResizeHandler) {
|
|
cleanupWindowResizeHandler = createResizeHandler();
|
|
}
|
|
return () => {
|
|
listeners.delete(callback);
|
|
if (!listeners.size && cleanupWindowResizeHandler) {
|
|
cleanupWindowResizeHandler();
|
|
cleanupWindowResizeHandler = void 0;
|
|
}
|
|
};
|
|
};
|
|
|
|
// src/dom-events/resize/index.ts
|
|
var onResize = (callback, { container = document.documentElement } = {}) => {
|
|
if (container === document.documentElement) {
|
|
return resizeWindow(callback);
|
|
} else {
|
|
return resizeElement(callback, container);
|
|
}
|
|
};
|
|
|
|
// src/progress.ts
|
|
var progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
|
|
|
|
// src/dom-events/scroll/ScrollHandler.ts
|
|
var SCROLL_KEYS = {
|
|
x: {
|
|
length: "Width",
|
|
position: "Left"
|
|
},
|
|
y: {
|
|
length: "Height",
|
|
position: "Top"
|
|
}
|
|
};
|
|
var ScrollHandler = class {
|
|
constructor(callback, container) {
|
|
this.createAxis = () => ({
|
|
current: 0,
|
|
progress: 0,
|
|
scrollLength: 0
|
|
});
|
|
this.updateAxis = (axisName) => {
|
|
const axis = this.info[axisName];
|
|
const { length, position } = SCROLL_KEYS[axisName];
|
|
axis.current = this.container[`scroll${position}`];
|
|
axis.scrollLength = this.container[`scroll${length}`] - this.container[`client${length}`];
|
|
axis.progress = progress(0, axis.scrollLength, axis.current);
|
|
};
|
|
this.update = () => {
|
|
this.updateAxis("x");
|
|
this.updateAxis("y");
|
|
};
|
|
this.sendEvent = () => {
|
|
this.callback(this.info);
|
|
};
|
|
this.advance = () => {
|
|
this.update();
|
|
this.sendEvent();
|
|
};
|
|
this.callback = callback;
|
|
this.container = container;
|
|
this.info = {
|
|
time: 0,
|
|
x: this.createAxis(),
|
|
y: this.createAxis()
|
|
};
|
|
}
|
|
};
|
|
|
|
// src/dom-events/scroll/index.ts
|
|
var scrollListeners = /* @__PURE__ */ new WeakMap();
|
|
var resizeListeners = /* @__PURE__ */ new WeakMap();
|
|
var onScrollHandlers = /* @__PURE__ */ new WeakMap();
|
|
var getTarget = (container) => container === document.documentElement ? window : container;
|
|
var onScroll = (callback, { container = document.documentElement } = {}) => {
|
|
let containerHandlers = onScrollHandlers.get(container);
|
|
if (!containerHandlers) {
|
|
containerHandlers = /* @__PURE__ */ new Set();
|
|
onScrollHandlers.set(container, containerHandlers);
|
|
}
|
|
const containerHandler = new ScrollHandler(callback, container);
|
|
containerHandlers.add(containerHandler);
|
|
if (!scrollListeners.has(container)) {
|
|
const listener = () => {
|
|
containerHandlers?.forEach((handler) => handler.advance());
|
|
return true;
|
|
};
|
|
scrollListeners.set(container, listener);
|
|
const target = getTarget(container);
|
|
window.addEventListener("resize", listener, { passive: true });
|
|
if (container !== document.documentElement) {
|
|
resizeListeners.set(container, onResize(listener, { container }));
|
|
}
|
|
target.addEventListener("scroll", listener, { passive: true });
|
|
}
|
|
const animateScroll = scrollListeners.get(container);
|
|
raf3(animateScroll);
|
|
return () => {
|
|
raf3.cancel(animateScroll);
|
|
const containerHandlers2 = onScrollHandlers.get(container);
|
|
if (!containerHandlers2) return;
|
|
containerHandlers2.delete(containerHandler);
|
|
if (containerHandlers2.size) return;
|
|
const listener = scrollListeners.get(container);
|
|
scrollListeners.delete(container);
|
|
if (listener) {
|
|
getTarget(container).removeEventListener("scroll", listener);
|
|
window.removeEventListener("resize", listener);
|
|
resizeListeners.get(container)?.();
|
|
}
|
|
};
|
|
};
|
|
|
|
// src/hooks/useConstant.ts
|
|
import { useRef } from "react";
|
|
function useConstant(init) {
|
|
const ref = useRef(null);
|
|
if (ref.current === null) {
|
|
ref.current = init();
|
|
}
|
|
return ref.current;
|
|
}
|
|
|
|
// src/hooks/useForceUpdate.ts
|
|
import { useState } from "react";
|
|
|
|
// src/hooks/useIsMounted.ts
|
|
import { useRef as useRef2 } from "react";
|
|
|
|
// src/hooks/useIsomorphicLayoutEffect.ts
|
|
import { useEffect, useLayoutEffect } from "react";
|
|
var useIsomorphicLayoutEffect = isSSR() ? useEffect : useLayoutEffect;
|
|
|
|
// src/hooks/useIsMounted.ts
|
|
var useIsMounted = () => {
|
|
const isMounted = useRef2(false);
|
|
useIsomorphicLayoutEffect(() => {
|
|
isMounted.current = true;
|
|
return () => {
|
|
isMounted.current = false;
|
|
};
|
|
}, []);
|
|
return isMounted;
|
|
};
|
|
|
|
// src/hooks/useForceUpdate.ts
|
|
function useForceUpdate() {
|
|
const update = useState()[1];
|
|
const isMounted = useIsMounted();
|
|
return () => {
|
|
if (isMounted.current) {
|
|
update(Math.random());
|
|
}
|
|
};
|
|
}
|
|
|
|
// src/hooks/useMemoOne.ts
|
|
import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
|
|
function useMemoOne(getResult, inputs) {
|
|
const [initial] = useState2(
|
|
() => ({
|
|
inputs,
|
|
result: getResult()
|
|
})
|
|
);
|
|
const committed = useRef3(void 0);
|
|
const prevCache = committed.current;
|
|
let cache = prevCache;
|
|
if (cache) {
|
|
const useCache = Boolean(
|
|
inputs && cache.inputs && areInputsEqual(inputs, cache.inputs)
|
|
);
|
|
if (!useCache) {
|
|
cache = {
|
|
inputs,
|
|
result: getResult()
|
|
};
|
|
}
|
|
} else {
|
|
cache = initial;
|
|
}
|
|
useEffect2(() => {
|
|
committed.current = cache;
|
|
if (prevCache == initial) {
|
|
initial.inputs = initial.result = void 0;
|
|
}
|
|
}, [cache]);
|
|
return cache.result;
|
|
}
|
|
function areInputsEqual(next, prev) {
|
|
if (next.length !== prev.length) {
|
|
return false;
|
|
}
|
|
for (let i = 0; i < next.length; i++) {
|
|
if (next[i] !== prev[i]) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// src/hooks/useOnce.ts
|
|
import { useEffect as useEffect3 } from "react";
|
|
var useOnce = (effect) => useEffect3(effect, emptyDeps);
|
|
var emptyDeps = [];
|
|
|
|
// src/hooks/usePrev.ts
|
|
import { useEffect as useEffect4, useRef as useRef4 } from "react";
|
|
function usePrev(value) {
|
|
const prevRef = useRef4(void 0);
|
|
useEffect4(() => {
|
|
prevRef.current = value;
|
|
});
|
|
return prevRef.current;
|
|
}
|
|
|
|
// src/hooks/useReducedMotion.ts
|
|
import { useState as useState3 } from "react";
|
|
var useReducedMotion = () => {
|
|
const [reducedMotion, setReducedMotion] = useState3(null);
|
|
useIsomorphicLayoutEffect(() => {
|
|
const mql = window.matchMedia("(prefers-reduced-motion)");
|
|
const handleMediaChange = (e) => {
|
|
setReducedMotion(e.matches);
|
|
assign({
|
|
skipAnimation: e.matches
|
|
});
|
|
};
|
|
handleMediaChange(mql);
|
|
if (mql.addEventListener) {
|
|
mql.addEventListener("change", handleMediaChange);
|
|
} else {
|
|
mql.addListener(handleMediaChange);
|
|
}
|
|
return () => {
|
|
if (mql.removeEventListener) {
|
|
mql.removeEventListener("change", handleMediaChange);
|
|
} else {
|
|
mql.removeListener(handleMediaChange);
|
|
}
|
|
};
|
|
}, []);
|
|
return reducedMotion;
|
|
};
|
|
|
|
// src/index.ts
|
|
import { raf as raf4 } from "@react-spring/rafz";
|
|
export {
|
|
FluidValue,
|
|
globals_exports as Globals,
|
|
addFluidObserver,
|
|
callFluidObserver,
|
|
callFluidObservers,
|
|
clamp,
|
|
colorToRgba,
|
|
colors2 as colors,
|
|
createInterpolator,
|
|
createStringInterpolator2 as createStringInterpolator,
|
|
defineHidden,
|
|
deprecateDirectCall,
|
|
deprecateInterpolate,
|
|
each,
|
|
eachProp,
|
|
easings,
|
|
flush,
|
|
flushCalls,
|
|
frameLoop,
|
|
getFluidObservers,
|
|
getFluidValue,
|
|
hasFluidValue,
|
|
hex3,
|
|
hex4,
|
|
hex6,
|
|
hex8,
|
|
hsl,
|
|
hsla,
|
|
is,
|
|
isAnimatedString,
|
|
isEqual,
|
|
isSSR,
|
|
noop,
|
|
onResize,
|
|
onScroll,
|
|
once,
|
|
prefix,
|
|
raf4 as raf,
|
|
removeFluidObserver,
|
|
rgb,
|
|
rgba,
|
|
setFluidGetter,
|
|
toArray,
|
|
useConstant,
|
|
useForceUpdate,
|
|
useIsomorphicLayoutEffect,
|
|
useMemoOne,
|
|
useOnce,
|
|
usePrev,
|
|
useReducedMotion
|
|
};
|