config-motion.mjs 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import { frame } from 'motion-dom';
  2. import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
  3. import { transformProps } from '../html/utils/keys-transform.mjs';
  4. import { buildSVGAttrs } from './utils/build-attrs.mjs';
  5. import { createSvgRenderState } from './utils/create-render-state.mjs';
  6. import { isSVGTag } from './utils/is-svg-tag.mjs';
  7. import { updateSVGDimensions } from './utils/measure.mjs';
  8. import { renderSVG } from './utils/render.mjs';
  9. import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
  10. const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
  11. const svgMotionConfig = {
  12. useVisualState: makeUseVisualState({
  13. scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
  14. createRenderState: createSvgRenderState,
  15. onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
  16. if (!current)
  17. return;
  18. let hasTransform = !!props.drag;
  19. if (!hasTransform) {
  20. for (const key in latestValues) {
  21. if (transformProps.has(key)) {
  22. hasTransform = true;
  23. break;
  24. }
  25. }
  26. }
  27. if (!hasTransform)
  28. return;
  29. let needsMeasure = !prevProps;
  30. if (prevProps) {
  31. /**
  32. * Check the layout props for changes, if any are found we need to
  33. * measure the element again.
  34. */
  35. for (let i = 0; i < layoutProps.length; i++) {
  36. const key = layoutProps[i];
  37. if (props[key] !==
  38. prevProps[key]) {
  39. needsMeasure = true;
  40. }
  41. }
  42. }
  43. if (!needsMeasure)
  44. return;
  45. frame.read(() => {
  46. updateSVGDimensions(current, renderState);
  47. frame.render(() => {
  48. buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
  49. renderSVG(current, renderState);
  50. });
  51. });
  52. },
  53. }),
  54. };
  55. export { svgMotionConfig };