complex.mjs 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { mixNumber as mixNumber$1 } from './number.mjs';
  2. import { mixColor } from './color.mjs';
  3. import { pipe } from '../pipe.mjs';
  4. import { warning } from 'motion-utils';
  5. import { color } from '../../value/types/color/index.mjs';
  6. import { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';
  7. import { isCSSVariableToken } from '../../render/dom/utils/is-css-variable.mjs';
  8. import { invisibleValues, mixVisibility } from './visibility.mjs';
  9. import { mixImmediate } from './immediate.mjs';
  10. function mixNumber(a, b) {
  11. return (p) => mixNumber$1(a, b, p);
  12. }
  13. function getMixer(a) {
  14. if (typeof a === "number") {
  15. return mixNumber;
  16. }
  17. else if (typeof a === "string") {
  18. return isCSSVariableToken(a)
  19. ? mixImmediate
  20. : color.test(a)
  21. ? mixColor
  22. : mixComplex;
  23. }
  24. else if (Array.isArray(a)) {
  25. return mixArray;
  26. }
  27. else if (typeof a === "object") {
  28. return color.test(a) ? mixColor : mixObject;
  29. }
  30. return mixImmediate;
  31. }
  32. function mixArray(a, b) {
  33. const output = [...a];
  34. const numValues = output.length;
  35. const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));
  36. return (p) => {
  37. for (let i = 0; i < numValues; i++) {
  38. output[i] = blendValue[i](p);
  39. }
  40. return output;
  41. };
  42. }
  43. function mixObject(a, b) {
  44. const output = { ...a, ...b };
  45. const blendValue = {};
  46. for (const key in output) {
  47. if (a[key] !== undefined && b[key] !== undefined) {
  48. blendValue[key] = getMixer(a[key])(a[key], b[key]);
  49. }
  50. }
  51. return (v) => {
  52. for (const key in blendValue) {
  53. output[key] = blendValue[key](v);
  54. }
  55. return output;
  56. };
  57. }
  58. function matchOrder(origin, target) {
  59. const orderedOrigin = [];
  60. const pointers = { color: 0, var: 0, number: 0 };
  61. for (let i = 0; i < target.values.length; i++) {
  62. const type = target.types[i];
  63. const originIndex = origin.indexes[type][pointers[type]];
  64. const originValue = origin.values[originIndex] ?? 0;
  65. orderedOrigin[i] = originValue;
  66. pointers[type]++;
  67. }
  68. return orderedOrigin;
  69. }
  70. const mixComplex = (origin, target) => {
  71. const template = complex.createTransformer(target);
  72. const originStats = analyseComplexValue(origin);
  73. const targetStats = analyseComplexValue(target);
  74. const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&
  75. originStats.indexes.color.length === targetStats.indexes.color.length &&
  76. originStats.indexes.number.length >= targetStats.indexes.number.length;
  77. if (canInterpolate) {
  78. if ((invisibleValues.has(origin) &&
  79. !targetStats.values.length) ||
  80. (invisibleValues.has(target) &&
  81. !originStats.values.length)) {
  82. return mixVisibility(origin, target);
  83. }
  84. return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
  85. }
  86. else {
  87. 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.`);
  88. return mixImmediate(origin, target);
  89. }
  90. };
  91. export { getMixer, mixArray, mixComplex, mixObject };