80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
import { color, complex } from "style-value-types";
|
|
import { mix } from "./mix";
|
|
import { mixColor } from "./mix-color";
|
|
import { isNum } from "./inc";
|
|
import { pipe } from "./pipe";
|
|
import { warning } from "hey-listen";
|
|
function getMixer(origin, target) {
|
|
if (isNum(origin)) {
|
|
return (v) => mix(origin, target, v);
|
|
}
|
|
else if (color.test(origin)) {
|
|
return mixColor(origin, target);
|
|
}
|
|
else {
|
|
return mixComplex(origin, target);
|
|
}
|
|
}
|
|
export const mixArray = (from, to) => {
|
|
const output = [...from];
|
|
const numValues = output.length;
|
|
const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
|
|
return (v) => {
|
|
for (let i = 0; i < numValues; i++) {
|
|
output[i] = blendValue[i](v);
|
|
}
|
|
return output;
|
|
};
|
|
};
|
|
export const mixObject = (origin, target) => {
|
|
const output = Object.assign(Object.assign({}, origin), target);
|
|
const blendValue = {};
|
|
for (const key in output) {
|
|
if (origin[key] !== undefined && target[key] !== undefined) {
|
|
blendValue[key] = getMixer(origin[key], target[key]);
|
|
}
|
|
}
|
|
return (v) => {
|
|
for (const key in blendValue) {
|
|
output[key] = blendValue[key](v);
|
|
}
|
|
return output;
|
|
};
|
|
};
|
|
function analyse(value) {
|
|
const parsed = complex.parse(value);
|
|
const numValues = parsed.length;
|
|
let numNumbers = 0;
|
|
let numRGB = 0;
|
|
let numHSL = 0;
|
|
for (let i = 0; i < numValues; i++) {
|
|
if (numNumbers || typeof parsed[i] === "number") {
|
|
numNumbers++;
|
|
}
|
|
else {
|
|
if (parsed[i].hue !== undefined) {
|
|
numHSL++;
|
|
}
|
|
else {
|
|
numRGB++;
|
|
}
|
|
}
|
|
}
|
|
return { parsed, numNumbers, numRGB, numHSL };
|
|
}
|
|
export const mixComplex = (origin, target) => {
|
|
const template = complex.createTransformer(target);
|
|
const originStats = analyse(origin);
|
|
const targetStats = analyse(target);
|
|
const canInterpolate = originStats.numHSL === targetStats.numHSL &&
|
|
originStats.numRGB === targetStats.numRGB &&
|
|
originStats.numNumbers >= targetStats.numNumbers;
|
|
if (canInterpolate) {
|
|
return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
|
|
}
|
|
else {
|
|
warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
|
|
return (p) => `${p > 0 ? target : origin}`;
|
|
}
|
|
};
|
|
//# sourceMappingURL=mix-complex.js.map
|