HTMLVisualElement.mjs 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import { measureViewportBox } from '../../projection/utils/measure.mjs';
  2. import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
  3. import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
  4. import { buildHTMLStyles } from './utils/build-styles.mjs';
  5. import { transformProps } from './utils/keys-transform.mjs';
  6. import { readTransformValue } from './utils/parse-transform.mjs';
  7. import { renderHTML } from './utils/render.mjs';
  8. import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
  9. function getComputedStyle(element) {
  10. return window.getComputedStyle(element);
  11. }
  12. class HTMLVisualElement extends DOMVisualElement {
  13. constructor() {
  14. super(...arguments);
  15. this.type = "html";
  16. this.renderInstance = renderHTML;
  17. }
  18. readValueFromInstance(instance, key) {
  19. if (transformProps.has(key)) {
  20. return readTransformValue(instance, key);
  21. }
  22. else {
  23. const computedStyle = getComputedStyle(instance);
  24. const value = (isCSSVariableName(key)
  25. ? computedStyle.getPropertyValue(key)
  26. : computedStyle[key]) || 0;
  27. return typeof value === "string" ? value.trim() : value;
  28. }
  29. }
  30. measureInstanceViewportBox(instance, { transformPagePoint }) {
  31. return measureViewportBox(instance, transformPagePoint);
  32. }
  33. build(renderState, latestValues, props) {
  34. buildHTMLStyles(renderState, latestValues, props.transformTemplate);
  35. }
  36. scrapeMotionValuesFromProps(props, prevProps, visualElement) {
  37. return scrapeMotionValuesFromProps(props, prevProps, visualElement);
  38. }
  39. }
  40. export { HTMLVisualElement, getComputedStyle };