|
|
|
@ -143,7 +143,161 @@ export function tweened(value, defaults = {}) {
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
set,
|
|
|
|
|
update: fn => set(fn(target_value, value)),
|
|
|
|
|
update: (fn, opts) => set(fn(target_value, value), opts),
|
|
|
|
|
subscribe: store.subscribe
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function get_initial_velocity(value) {
|
|
|
|
|
if (typeof value === 'number' || is_date(value)) return 0;
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(value)) return value.map(get_initial_velocity);
|
|
|
|
|
|
|
|
|
|
if (value && typeof value === 'object') {
|
|
|
|
|
const velocities = {};
|
|
|
|
|
for (const k in value) velocities[k] = get_initial_velocity(value[k]);
|
|
|
|
|
return velocities;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
throw new Error(`Cannot spring ${typeof value} values`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function get_threshold(value, target_value, precision) {
|
|
|
|
|
if (typeof value === 'number' || is_date(value)) return precision * Math.abs((target_value - value));
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(value)) return value.map((v, i) => get_threshold(v, target_value[i], precision));
|
|
|
|
|
|
|
|
|
|
if (value && typeof value === 'object') {
|
|
|
|
|
const threshold = {};
|
|
|
|
|
for (const k in value) threshold[k] = get_threshold(value[k], target_value[k], precision);
|
|
|
|
|
return threshold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
throw new Error(`Cannot spring ${typeof value} values`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function tick_spring(velocity, current_value, target_value, stiffness, damping, multiplier, threshold) {
|
|
|
|
|
let settled = true;
|
|
|
|
|
let value;
|
|
|
|
|
|
|
|
|
|
if (typeof current_value === 'number' || is_date(current_value)) {
|
|
|
|
|
const delta = target_value - current_value;
|
|
|
|
|
const spring = stiffness * delta;
|
|
|
|
|
const damper = damping * velocity;
|
|
|
|
|
|
|
|
|
|
const acceleration = spring - damper;
|
|
|
|
|
|
|
|
|
|
velocity += acceleration;
|
|
|
|
|
const d = velocity * multiplier;
|
|
|
|
|
|
|
|
|
|
if (is_date(current_value)) {
|
|
|
|
|
value = new Date(current_value.getTime() + d);
|
|
|
|
|
} else {
|
|
|
|
|
value = current_value + d;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (Math.abs(d) > threshold) settled = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else if (Array.isArray(current_value)) {
|
|
|
|
|
value = current_value.map((v, i) => {
|
|
|
|
|
const result = tick_spring(
|
|
|
|
|
velocity[i],
|
|
|
|
|
v,
|
|
|
|
|
target_value[i],
|
|
|
|
|
stiffness,
|
|
|
|
|
damping,
|
|
|
|
|
multiplier,
|
|
|
|
|
threshold[i]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
velocity[i] = result.velocity;
|
|
|
|
|
if (!result.settled) settled = false;
|
|
|
|
|
return result.value;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else if (typeof current_value === 'object') {
|
|
|
|
|
value = {};
|
|
|
|
|
for (const k in current_value) {
|
|
|
|
|
const result = tick_spring(
|
|
|
|
|
velocity[k],
|
|
|
|
|
current_value[k],
|
|
|
|
|
target_value[k],
|
|
|
|
|
stiffness,
|
|
|
|
|
damping,
|
|
|
|
|
multiplier,
|
|
|
|
|
threshold[k]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
velocity[k] = result.velocity;
|
|
|
|
|
if (!result.settled) settled = false;
|
|
|
|
|
value[k] = result.value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
throw new Error(`Cannot spring ${typeof value} values`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { velocity, value, settled };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function spring(value, opts = {}) {
|
|
|
|
|
const store = writable(value);
|
|
|
|
|
|
|
|
|
|
const { stiffness = 0.15, damping = 0.8 } = opts;
|
|
|
|
|
const velocity = get_initial_velocity(value);
|
|
|
|
|
|
|
|
|
|
let task;
|
|
|
|
|
let target_value = value;
|
|
|
|
|
let last_time;
|
|
|
|
|
let settled;
|
|
|
|
|
let threshold;
|
|
|
|
|
|
|
|
|
|
function set(new_value) {
|
|
|
|
|
target_value = new_value;
|
|
|
|
|
threshold = get_threshold(value, target_value, 0.000001); // TODO make precision configurable?
|
|
|
|
|
|
|
|
|
|
if (!task) {
|
|
|
|
|
last_time = window.performance.now();
|
|
|
|
|
settled = false;
|
|
|
|
|
|
|
|
|
|
task = add_task(() => {
|
|
|
|
|
const time = window.performance.now();
|
|
|
|
|
|
|
|
|
|
({ value, settled } = tick_spring(
|
|
|
|
|
velocity,
|
|
|
|
|
value,
|
|
|
|
|
target_value,
|
|
|
|
|
spring.stiffness,
|
|
|
|
|
spring.damping,
|
|
|
|
|
(time - last_time) * 60 / 1000,
|
|
|
|
|
threshold
|
|
|
|
|
));
|
|
|
|
|
|
|
|
|
|
last_time = time;
|
|
|
|
|
|
|
|
|
|
if (settled) {
|
|
|
|
|
value = target_value;
|
|
|
|
|
task = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
store.set(value);
|
|
|
|
|
return !settled;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return task.promise;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const spring = {
|
|
|
|
|
set,
|
|
|
|
|
update: (fn, opts) => set(fn(target_value, value), opts),
|
|
|
|
|
subscribe: store.subscribe,
|
|
|
|
|
stiffness,
|
|
|
|
|
damping
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return spring;
|
|
|
|
|
}
|