109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
import { cubicOut } from "svelte/easing";
|
|
import type { TransitionConfig } from "svelte/transition";
|
|
|
|
type FlyAndScaleParams = {
|
|
y?: number;
|
|
x?: number;
|
|
start?: number;
|
|
duration?: number;
|
|
};
|
|
|
|
export const flyAndScale = (
|
|
node: Element,
|
|
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
|
|
): TransitionConfig => {
|
|
const style = getComputedStyle(node);
|
|
const transform = style.transform === "none" ? "" : style.transform;
|
|
|
|
const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
|
|
const [minA, maxA] = scaleA;
|
|
const [minB, maxB] = scaleB;
|
|
|
|
const percentage = (valueA - minA) / (maxA - minA);
|
|
const valueB = percentage * (maxB - minB) + minB;
|
|
|
|
return valueB;
|
|
};
|
|
|
|
const styleToString = (style: Record<string, number | string | undefined>): string => {
|
|
return Object.keys(style).reduce((str, key) => {
|
|
if (style[key] === undefined) return str;
|
|
return str + `${key}:${style[key]};`;
|
|
}, "");
|
|
};
|
|
|
|
return {
|
|
duration: params.duration ?? 200,
|
|
delay: 0,
|
|
css: (t) => {
|
|
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
|
|
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
|
|
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
|
|
|
|
return styleToString({
|
|
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
|
|
opacity: t,
|
|
});
|
|
},
|
|
easing: cubicOut,
|
|
};
|
|
};
|
|
|
|
type Color = {
|
|
h: number;
|
|
s: number;
|
|
l: number;
|
|
};
|
|
|
|
function ColorDistance(color1: Color, color2: Color) {
|
|
return Math.abs(color1.h - color2.h);
|
|
}
|
|
|
|
function GenerateRandomHSL(): Color {
|
|
const hue = Math.floor(Math.random() * 360);
|
|
const saturation = 70;
|
|
const lightness = 60;
|
|
return { h: hue, s: saturation, l: lightness };
|
|
}
|
|
|
|
const existingColors: Color[] = [];
|
|
|
|
function GenerateColor(): string {
|
|
const minDistance = 15;
|
|
|
|
let newColor: Color;
|
|
let isDistinct = false;
|
|
let iterations = 0;
|
|
while (!isDistinct) {
|
|
iterations++;
|
|
if (iterations > 100) {
|
|
console.error("Failed to generate a distinct color after 100 iterations");
|
|
break;
|
|
}
|
|
newColor = GenerateRandomHSL();
|
|
isDistinct = true;
|
|
|
|
for (const color of existingColors) {
|
|
if (ColorDistance(newColor, color) < minDistance) {
|
|
isDistinct = false;
|
|
break;
|
|
}
|
|
}
|
|
existingColors.push(newColor);
|
|
}
|
|
|
|
// We can not reach this point without having a color generated
|
|
// @ts-ignore
|
|
return `hsl(${newColor.h}, ${newColor.s}%, ${newColor.l}%)`;
|
|
}
|
|
|
|
function LerpColor(color1: Color, color2: Color, t: number): Color {
|
|
const h = color1.h + (color2.h - color1.h) * t;
|
|
const s = color1.s + (color2.s - color1.s) * t;
|
|
const l = color1.l + (color2.l - color1.l) * t;
|
|
return { h, s, l };
|
|
}
|
|
|
|
export { GenerateColor, LerpColor };
|
|
export type { Color };
|