stacking-context.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var bitwise_1 = require("../core/bitwise");
  4. var bound_curves_1 = require("./bound-curves");
  5. var effects_1 = require("./effects");
  6. var overflow_1 = require("../css/property-descriptors/overflow");
  7. var path_1 = require("./path");
  8. var ol_element_container_1 = require("../dom/elements/ol-element-container");
  9. var li_element_container_1 = require("../dom/elements/li-element-container");
  10. var counter_1 = require("../css/types/functions/counter");
  11. var StackingContext = /** @class */ (function () {
  12. function StackingContext(container) {
  13. this.element = container;
  14. this.inlineLevel = [];
  15. this.nonInlineLevel = [];
  16. this.negativeZIndex = [];
  17. this.zeroOrAutoZIndexOrTransformedOrOpacity = [];
  18. this.positiveZIndex = [];
  19. this.nonPositionedFloats = [];
  20. this.nonPositionedInlineLevel = [];
  21. }
  22. return StackingContext;
  23. }());
  24. exports.StackingContext = StackingContext;
  25. var ElementPaint = /** @class */ (function () {
  26. function ElementPaint(element, parentStack) {
  27. this.container = element;
  28. this.effects = parentStack.slice(0);
  29. this.curves = new bound_curves_1.BoundCurves(element);
  30. if (element.styles.transform !== null) {
  31. var offsetX = element.bounds.left + element.styles.transformOrigin[0].number;
  32. var offsetY = element.bounds.top + element.styles.transformOrigin[1].number;
  33. var matrix = element.styles.transform;
  34. this.effects.push(new effects_1.TransformEffect(offsetX, offsetY, matrix));
  35. }
  36. if (element.styles.overflowX !== overflow_1.OVERFLOW.VISIBLE) {
  37. var borderBox = bound_curves_1.calculateBorderBoxPath(this.curves);
  38. var paddingBox = bound_curves_1.calculatePaddingBoxPath(this.curves);
  39. if (path_1.equalPath(borderBox, paddingBox)) {
  40. this.effects.push(new effects_1.ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
  41. }
  42. else {
  43. this.effects.push(new effects_1.ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */));
  44. this.effects.push(new effects_1.ClipEffect(paddingBox, 4 /* CONTENT */));
  45. }
  46. }
  47. }
  48. ElementPaint.prototype.getParentEffects = function () {
  49. var effects = this.effects.slice(0);
  50. if (this.container.styles.overflowX !== overflow_1.OVERFLOW.VISIBLE) {
  51. var borderBox = bound_curves_1.calculateBorderBoxPath(this.curves);
  52. var paddingBox = bound_curves_1.calculatePaddingBoxPath(this.curves);
  53. if (!path_1.equalPath(borderBox, paddingBox)) {
  54. effects.push(new effects_1.ClipEffect(paddingBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
  55. }
  56. }
  57. return effects;
  58. };
  59. return ElementPaint;
  60. }());
  61. exports.ElementPaint = ElementPaint;
  62. var parseStackTree = function (parent, stackingContext, realStackingContext, listItems) {
  63. parent.container.elements.forEach(function (child) {
  64. var treatAsRealStackingContext = bitwise_1.contains(child.flags, 4 /* CREATES_REAL_STACKING_CONTEXT */);
  65. var createsStackingContext = bitwise_1.contains(child.flags, 2 /* CREATES_STACKING_CONTEXT */);
  66. var paintContainer = new ElementPaint(child, parent.getParentEffects());
  67. if (bitwise_1.contains(child.styles.display, 2048 /* LIST_ITEM */)) {
  68. listItems.push(paintContainer);
  69. }
  70. var listOwnerItems = bitwise_1.contains(child.flags, 8 /* IS_LIST_OWNER */) ? [] : listItems;
  71. if (treatAsRealStackingContext || createsStackingContext) {
  72. var parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
  73. var stack = new StackingContext(paintContainer);
  74. if (child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
  75. var order_1 = child.styles.zIndex.order;
  76. if (order_1 < 0) {
  77. var index_1 = 0;
  78. parentStack.negativeZIndex.some(function (current, i) {
  79. if (order_1 > current.element.container.styles.zIndex.order) {
  80. index_1 = i;
  81. return false;
  82. }
  83. else if (index_1 > 0) {
  84. return true;
  85. }
  86. return false;
  87. });
  88. parentStack.negativeZIndex.splice(index_1, 0, stack);
  89. }
  90. else if (order_1 > 0) {
  91. var index_2 = 0;
  92. parentStack.positiveZIndex.some(function (current, i) {
  93. if (order_1 > current.element.container.styles.zIndex.order) {
  94. index_2 = i + 1;
  95. return false;
  96. }
  97. else if (index_2 > 0) {
  98. return true;
  99. }
  100. return false;
  101. });
  102. parentStack.positiveZIndex.splice(index_2, 0, stack);
  103. }
  104. else {
  105. parentStack.zeroOrAutoZIndexOrTransformedOrOpacity.push(stack);
  106. }
  107. }
  108. else {
  109. if (child.styles.isFloating()) {
  110. parentStack.nonPositionedFloats.push(stack);
  111. }
  112. else {
  113. parentStack.nonPositionedInlineLevel.push(stack);
  114. }
  115. }
  116. parseStackTree(paintContainer, stack, treatAsRealStackingContext ? stack : realStackingContext, listOwnerItems);
  117. }
  118. else {
  119. if (child.styles.isInlineLevel()) {
  120. stackingContext.inlineLevel.push(paintContainer);
  121. }
  122. else {
  123. stackingContext.nonInlineLevel.push(paintContainer);
  124. }
  125. parseStackTree(paintContainer, stackingContext, realStackingContext, listOwnerItems);
  126. }
  127. if (bitwise_1.contains(child.flags, 8 /* IS_LIST_OWNER */)) {
  128. processListItems(child, listOwnerItems);
  129. }
  130. });
  131. };
  132. var processListItems = function (owner, elements) {
  133. var numbering = owner instanceof ol_element_container_1.OLElementContainer ? owner.start : 1;
  134. var reversed = owner instanceof ol_element_container_1.OLElementContainer ? owner.reversed : false;
  135. for (var i = 0; i < elements.length; i++) {
  136. var item = elements[i];
  137. if (item.container instanceof li_element_container_1.LIElementContainer &&
  138. typeof item.container.value === 'number' &&
  139. item.container.value !== 0) {
  140. numbering = item.container.value;
  141. }
  142. item.listValue = counter_1.createCounterText(numbering, item.container.styles.listStyleType, true);
  143. numbering += reversed ? -1 : 1;
  144. }
  145. };
  146. exports.parseStackingContexts = function (container) {
  147. var paintContainer = new ElementPaint(container, []);
  148. var root = new StackingContext(paintContainer);
  149. var listItems = [];
  150. parseStackTree(paintContainer, root, root, listItems);
  151. processListItems(paintContainer.container, listItems);
  152. return root;
  153. };
  154. //# sourceMappingURL=stacking-context.js.map