size.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. const parseInt10 = (d) => (d ? parseInt(d) : 0);
  2. /**
  3. * @description Get the element's bounding size.
  4. * @param container dom element.
  5. * @returns the element width and height
  6. */
  7. export function getContainerSize(container) {
  8. // size = width/height - padding.
  9. const style = getComputedStyle(container);
  10. const wrapperWidth = container.clientWidth || parseInt10(style.width);
  11. const wrapperHeight = container.clientHeight || parseInt10(style.height);
  12. const widthPadding = parseInt10(style.paddingLeft) + parseInt10(style.paddingRight);
  13. const heightPadding = parseInt10(style.paddingTop) + parseInt10(style.paddingBottom);
  14. return {
  15. width: wrapperWidth - widthPadding,
  16. height: wrapperHeight - heightPadding,
  17. };
  18. }
  19. /**
  20. * @description Calculate the real canvas size by view options.
  21. */
  22. export function getBBoxSize(options) {
  23. const { height, width, padding = 0, paddingLeft = padding, paddingRight = padding, paddingTop = padding, paddingBottom = padding, margin = 0, marginLeft = margin, marginRight = margin, marginTop = margin, marginBottom = margin, inset = 0, insetLeft = inset, insetRight = inset, insetTop = inset, insetBottom = inset, } = options;
  24. // @todo Add this padding to theme.
  25. // 30 is default size for padding, which defined in runtime.
  26. const maybeAuto = (padding) => (padding === 'auto' ? 30 : padding);
  27. const finalWidth = width -
  28. maybeAuto(paddingLeft) -
  29. maybeAuto(paddingRight) -
  30. marginLeft -
  31. marginRight -
  32. insetLeft -
  33. insetRight;
  34. const finalHeight = height -
  35. maybeAuto(paddingTop) -
  36. maybeAuto(paddingBottom) -
  37. marginTop -
  38. marginBottom -
  39. insetTop -
  40. insetBottom;
  41. return { width: finalWidth, height: finalHeight };
  42. }
  43. //# sourceMappingURL=size.js.map