bound-curves.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var length_percentage_1 = require("../css/types/length-percentage");
  4. var vector_1 = require("./vector");
  5. var bezier_curve_1 = require("./bezier-curve");
  6. var BoundCurves = /** @class */ (function () {
  7. function BoundCurves(element) {
  8. var styles = element.styles;
  9. var bounds = element.bounds;
  10. var _a = length_percentage_1.getAbsoluteValueForTuple(styles.borderTopLeftRadius, bounds.width, bounds.height), tlh = _a[0], tlv = _a[1];
  11. var _b = length_percentage_1.getAbsoluteValueForTuple(styles.borderTopRightRadius, bounds.width, bounds.height), trh = _b[0], trv = _b[1];
  12. var _c = length_percentage_1.getAbsoluteValueForTuple(styles.borderBottomRightRadius, bounds.width, bounds.height), brh = _c[0], brv = _c[1];
  13. var _d = length_percentage_1.getAbsoluteValueForTuple(styles.borderBottomLeftRadius, bounds.width, bounds.height), blh = _d[0], blv = _d[1];
  14. var factors = [];
  15. factors.push((tlh + trh) / bounds.width);
  16. factors.push((blh + brh) / bounds.width);
  17. factors.push((tlv + blv) / bounds.height);
  18. factors.push((trv + brv) / bounds.height);
  19. var maxFactor = Math.max.apply(Math, factors);
  20. if (maxFactor > 1) {
  21. tlh /= maxFactor;
  22. tlv /= maxFactor;
  23. trh /= maxFactor;
  24. trv /= maxFactor;
  25. brh /= maxFactor;
  26. brv /= maxFactor;
  27. blh /= maxFactor;
  28. blv /= maxFactor;
  29. }
  30. var topWidth = bounds.width - trh;
  31. var rightHeight = bounds.height - brv;
  32. var bottomWidth = bounds.width - brh;
  33. var leftHeight = bounds.height - blv;
  34. var borderTopWidth = styles.borderTopWidth;
  35. var borderRightWidth = styles.borderRightWidth;
  36. var borderBottomWidth = styles.borderBottomWidth;
  37. var borderLeftWidth = styles.borderLeftWidth;
  38. var paddingTop = length_percentage_1.getAbsoluteValue(styles.paddingTop, element.bounds.width);
  39. var paddingRight = length_percentage_1.getAbsoluteValue(styles.paddingRight, element.bounds.width);
  40. var paddingBottom = length_percentage_1.getAbsoluteValue(styles.paddingBottom, element.bounds.width);
  41. var paddingLeft = length_percentage_1.getAbsoluteValue(styles.paddingLeft, element.bounds.width);
  42. this.topLeftBorderBox =
  43. tlh > 0 || tlv > 0
  44. ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
  45. : new vector_1.Vector(bounds.left, bounds.top);
  46. this.topRightBorderBox =
  47. trh > 0 || trv > 0
  48. ? getCurvePoints(bounds.left + topWidth, bounds.top, trh, trv, CORNER.TOP_RIGHT)
  49. : new vector_1.Vector(bounds.left + bounds.width, bounds.top);
  50. this.bottomRightBorderBox =
  51. brh > 0 || brv > 0
  52. ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh, brv, CORNER.BOTTOM_RIGHT)
  53. : new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height);
  54. this.bottomLeftBorderBox =
  55. blh > 0 || blv > 0
  56. ? getCurvePoints(bounds.left, bounds.top + leftHeight, blh, blv, CORNER.BOTTOM_LEFT)
  57. : new vector_1.Vector(bounds.left, bounds.top + bounds.height);
  58. this.topLeftPaddingBox =
  59. tlh > 0 || tlv > 0
  60. ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + borderTopWidth, Math.max(0, tlh - borderLeftWidth), Math.max(0, tlv - borderTopWidth), CORNER.TOP_LEFT)
  61. : new vector_1.Vector(bounds.left + borderLeftWidth, bounds.top + borderTopWidth);
  62. this.topRightPaddingBox =
  63. trh > 0 || trv > 0
  64. ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth), bounds.top + borderTopWidth, topWidth > bounds.width + borderLeftWidth ? 0 : trh - borderLeftWidth, trv - borderTopWidth, CORNER.TOP_RIGHT)
  65. : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth);
  66. this.bottomRightPaddingBox =
  67. brh > 0 || brv > 0
  68. ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth), bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth), Math.max(0, brh - borderRightWidth), brv - borderBottomWidth, CORNER.BOTTOM_RIGHT)
  69. : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + bounds.height - borderBottomWidth);
  70. this.bottomLeftPaddingBox =
  71. blh > 0 || blv > 0
  72. ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + leftHeight, Math.max(0, blh - borderLeftWidth), blv - borderBottomWidth, CORNER.BOTTOM_LEFT)
  73. : new vector_1.Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth);
  74. this.topLeftContentBox =
  75. tlh > 0 || tlv > 0
  76. ? getCurvePoints(bounds.left + borderLeftWidth + paddingLeft, bounds.top + borderTopWidth + paddingTop, Math.max(0, tlh - (borderLeftWidth + paddingLeft)), Math.max(0, tlv - (borderTopWidth + paddingTop)), CORNER.TOP_LEFT)
  77. : new vector_1.Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + borderTopWidth + paddingTop);
  78. this.topRightContentBox =
  79. trh > 0 || trv > 0
  80. ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth + paddingLeft), bounds.top + borderTopWidth + paddingTop, topWidth > bounds.width + borderLeftWidth + paddingLeft ? 0 : trh - borderLeftWidth + paddingLeft, trv - (borderTopWidth + paddingTop), CORNER.TOP_RIGHT)
  81. : new vector_1.Vector(bounds.left + bounds.width - (borderRightWidth + paddingRight), bounds.top + borderTopWidth + paddingTop);
  82. this.bottomRightContentBox =
  83. brh > 0 || brv > 0
  84. ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - (borderLeftWidth + paddingLeft)), bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth + paddingTop), Math.max(0, brh - (borderRightWidth + paddingRight)), brv - (borderBottomWidth + paddingBottom), CORNER.BOTTOM_RIGHT)
  85. : new vector_1.Vector(bounds.left + bounds.width - (borderRightWidth + paddingRight), bounds.top + bounds.height - (borderBottomWidth + paddingBottom));
  86. this.bottomLeftContentBox =
  87. blh > 0 || blv > 0
  88. ? getCurvePoints(bounds.left + borderLeftWidth + paddingLeft, bounds.top + leftHeight, Math.max(0, blh - (borderLeftWidth + paddingLeft)), blv - (borderBottomWidth + paddingBottom), CORNER.BOTTOM_LEFT)
  89. : new vector_1.Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + bounds.height - (borderBottomWidth + paddingBottom));
  90. }
  91. return BoundCurves;
  92. }());
  93. exports.BoundCurves = BoundCurves;
  94. var CORNER;
  95. (function (CORNER) {
  96. CORNER[CORNER["TOP_LEFT"] = 0] = "TOP_LEFT";
  97. CORNER[CORNER["TOP_RIGHT"] = 1] = "TOP_RIGHT";
  98. CORNER[CORNER["BOTTOM_RIGHT"] = 2] = "BOTTOM_RIGHT";
  99. CORNER[CORNER["BOTTOM_LEFT"] = 3] = "BOTTOM_LEFT";
  100. })(CORNER || (CORNER = {}));
  101. var getCurvePoints = function (x, y, r1, r2, position) {
  102. var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
  103. var ox = r1 * kappa; // control point offset horizontal
  104. var oy = r2 * kappa; // control point offset vertical
  105. var xm = x + r1; // x-middle
  106. var ym = y + r2; // y-middle
  107. switch (position) {
  108. case CORNER.TOP_LEFT:
  109. return new bezier_curve_1.BezierCurve(new vector_1.Vector(x, ym), new vector_1.Vector(x, ym - oy), new vector_1.Vector(xm - ox, y), new vector_1.Vector(xm, y));
  110. case CORNER.TOP_RIGHT:
  111. return new bezier_curve_1.BezierCurve(new vector_1.Vector(x, y), new vector_1.Vector(x + ox, y), new vector_1.Vector(xm, ym - oy), new vector_1.Vector(xm, ym));
  112. case CORNER.BOTTOM_RIGHT:
  113. return new bezier_curve_1.BezierCurve(new vector_1.Vector(xm, y), new vector_1.Vector(xm, y + oy), new vector_1.Vector(x + ox, ym), new vector_1.Vector(x, ym));
  114. case CORNER.BOTTOM_LEFT:
  115. default:
  116. return new bezier_curve_1.BezierCurve(new vector_1.Vector(xm, ym), new vector_1.Vector(xm - ox, ym), new vector_1.Vector(x, y + oy), new vector_1.Vector(x, y));
  117. }
  118. };
  119. exports.calculateBorderBoxPath = function (curves) {
  120. return [curves.topLeftBorderBox, curves.topRightBorderBox, curves.bottomRightBorderBox, curves.bottomLeftBorderBox];
  121. };
  122. exports.calculateContentBoxPath = function (curves) {
  123. return [
  124. curves.topLeftContentBox,
  125. curves.topRightContentBox,
  126. curves.bottomRightContentBox,
  127. curves.bottomLeftContentBox
  128. ];
  129. };
  130. exports.calculatePaddingBoxPath = function (curves) {
  131. return [
  132. curves.topLeftPaddingBox,
  133. curves.topRightPaddingBox,
  134. curves.bottomRightPaddingBox,
  135. curves.bottomLeftPaddingBox
  136. ];
  137. };
  138. //# sourceMappingURL=bound-curves.js.map