build-transform.mjs 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
  2. import { numberValueTypes } from '../../dom/value-types/number.mjs';
  3. import { transformPropOrder } from './keys-transform.mjs';
  4. const translateAlias = {
  5. x: "translateX",
  6. y: "translateY",
  7. z: "translateZ",
  8. transformPerspective: "perspective",
  9. };
  10. const numTransforms = transformPropOrder.length;
  11. /**
  12. * Build a CSS transform style from individual x/y/scale etc properties.
  13. *
  14. * This outputs with a default order of transforms/scales/rotations, this can be customised by
  15. * providing a transformTemplate function.
  16. */
  17. function buildTransform(latestValues, transform, transformTemplate) {
  18. // The transform string we're going to build into.
  19. let transformString = "";
  20. let transformIsDefault = true;
  21. /**
  22. * Loop over all possible transforms in order, adding the ones that
  23. * are present to the transform string.
  24. */
  25. for (let i = 0; i < numTransforms; i++) {
  26. const key = transformPropOrder[i];
  27. const value = latestValues[key];
  28. if (value === undefined)
  29. continue;
  30. let valueIsDefault = true;
  31. if (typeof value === "number") {
  32. valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
  33. }
  34. else {
  35. valueIsDefault = parseFloat(value) === 0;
  36. }
  37. if (!valueIsDefault || transformTemplate) {
  38. const valueAsType = getValueAsType(value, numberValueTypes[key]);
  39. if (!valueIsDefault) {
  40. transformIsDefault = false;
  41. const transformName = translateAlias[key] || key;
  42. transformString += `${transformName}(${valueAsType}) `;
  43. }
  44. if (transformTemplate) {
  45. transform[key] = valueAsType;
  46. }
  47. }
  48. }
  49. transformString = transformString.trim();
  50. // If we have a custom `transform` template, pass our transform values and
  51. // generated transformString to that before returning
  52. if (transformTemplate) {
  53. transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
  54. }
  55. else if (transformIsDefault) {
  56. transformString = "none";
  57. }
  58. return transformString;
  59. }
  60. export { buildTransform };