stacking-context.js 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.parseStackingContexts = exports.ElementPaint = exports.StackingContext = void 0;
  4. var bitwise_1 = require("../core/bitwise");
  5. var bound_curves_1 = require("./bound-curves");
  6. var effects_1 = require("./effects");
  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(container, parent) {
  27. this.container = container;
  28. this.parent = parent;
  29. this.effects = [];
  30. this.curves = new bound_curves_1.BoundCurves(this.container);
  31. if (this.container.styles.opacity < 1) {
  32. this.effects.push(new effects_1.OpacityEffect(this.container.styles.opacity));
  33. }
  34. if (this.container.styles.transform !== null) {
  35. var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
  36. var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
  37. var matrix = this.container.styles.transform;
  38. this.effects.push(new effects_1.TransformEffect(offsetX, offsetY, matrix));
  39. }
  40. if (this.container.styles.overflowX !== 0 /* VISIBLE */) {
  41. var borderBox = bound_curves_1.calculateBorderBoxPath(this.curves);
  42. var paddingBox = bound_curves_1.calculatePaddingBoxPath(this.curves);
  43. if (path_1.equalPath(borderBox, paddingBox)) {
  44. this.effects.push(new effects_1.ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
  45. }
  46. else {
  47. this.effects.push(new effects_1.ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */));
  48. this.effects.push(new effects_1.ClipEffect(paddingBox, 4 /* CONTENT */));
  49. }
  50. }
  51. }
  52. ElementPaint.prototype.getEffects = function (target) {
  53. var inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(this.container.styles.position) === -1;
  54. var parent = this.parent;
  55. var effects = this.effects.slice(0);
  56. while (parent) {
  57. var croplessEffects = parent.effects.filter(function (effect) { return !effects_1.isClipEffect(effect); });
  58. if (inFlow || parent.container.styles.position !== 0 /* STATIC */ || !parent.parent) {
  59. effects.unshift.apply(effects, croplessEffects);
  60. inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(parent.container.styles.position) === -1;
  61. if (parent.container.styles.overflowX !== 0 /* VISIBLE */) {
  62. var borderBox = bound_curves_1.calculateBorderBoxPath(parent.curves);
  63. var paddingBox = bound_curves_1.calculatePaddingBoxPath(parent.curves);
  64. if (!path_1.equalPath(borderBox, paddingBox)) {
  65. effects.unshift(new effects_1.ClipEffect(paddingBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
  66. }
  67. }
  68. }
  69. else {
  70. effects.unshift.apply(effects, croplessEffects);
  71. }
  72. parent = parent.parent;
  73. }
  74. return effects.filter(function (effect) { return bitwise_1.contains(effect.target, target); });
  75. };
  76. return ElementPaint;
  77. }());
  78. exports.ElementPaint = ElementPaint;
  79. var parseStackTree = function (parent, stackingContext, realStackingContext, listItems) {
  80. parent.container.elements.forEach(function (child) {
  81. var treatAsRealStackingContext = bitwise_1.contains(child.flags, 4 /* CREATES_REAL_STACKING_CONTEXT */);
  82. var createsStackingContext = bitwise_1.contains(child.flags, 2 /* CREATES_STACKING_CONTEXT */);
  83. var paintContainer = new ElementPaint(child, parent);
  84. if (bitwise_1.contains(child.styles.display, 2048 /* LIST_ITEM */)) {
  85. listItems.push(paintContainer);
  86. }
  87. var listOwnerItems = bitwise_1.contains(child.flags, 8 /* IS_LIST_OWNER */) ? [] : listItems;
  88. if (treatAsRealStackingContext || createsStackingContext) {
  89. var parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
  90. var stack = new StackingContext(paintContainer);
  91. if (child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
  92. var order_1 = child.styles.zIndex.order;
  93. if (order_1 < 0) {
  94. var index_1 = 0;
  95. parentStack.negativeZIndex.some(function (current, i) {
  96. if (order_1 > current.element.container.styles.zIndex.order) {
  97. index_1 = i;
  98. return false;
  99. }
  100. else if (index_1 > 0) {
  101. return true;
  102. }
  103. return false;
  104. });
  105. parentStack.negativeZIndex.splice(index_1, 0, stack);
  106. }
  107. else if (order_1 > 0) {
  108. var index_2 = 0;
  109. parentStack.positiveZIndex.some(function (current, i) {
  110. if (order_1 >= current.element.container.styles.zIndex.order) {
  111. index_2 = i + 1;
  112. return false;
  113. }
  114. else if (index_2 > 0) {
  115. return true;
  116. }
  117. return false;
  118. });
  119. parentStack.positiveZIndex.splice(index_2, 0, stack);
  120. }
  121. else {
  122. parentStack.zeroOrAutoZIndexOrTransformedOrOpacity.push(stack);
  123. }
  124. }
  125. else {
  126. if (child.styles.isFloating()) {
  127. parentStack.nonPositionedFloats.push(stack);
  128. }
  129. else {
  130. parentStack.nonPositionedInlineLevel.push(stack);
  131. }
  132. }
  133. parseStackTree(paintContainer, stack, treatAsRealStackingContext ? stack : realStackingContext, listOwnerItems);
  134. }
  135. else {
  136. if (child.styles.isInlineLevel()) {
  137. stackingContext.inlineLevel.push(paintContainer);
  138. }
  139. else {
  140. stackingContext.nonInlineLevel.push(paintContainer);
  141. }
  142. parseStackTree(paintContainer, stackingContext, realStackingContext, listOwnerItems);
  143. }
  144. if (bitwise_1.contains(child.flags, 8 /* IS_LIST_OWNER */)) {
  145. processListItems(child, listOwnerItems);
  146. }
  147. });
  148. };
  149. var processListItems = function (owner, elements) {
  150. var numbering = owner instanceof ol_element_container_1.OLElementContainer ? owner.start : 1;
  151. var reversed = owner instanceof ol_element_container_1.OLElementContainer ? owner.reversed : false;
  152. for (var i = 0; i < elements.length; i++) {
  153. var item = elements[i];
  154. if (item.container instanceof li_element_container_1.LIElementContainer &&
  155. typeof item.container.value === 'number' &&
  156. item.container.value !== 0) {
  157. numbering = item.container.value;
  158. }
  159. item.listValue = counter_1.createCounterText(numbering, item.container.styles.listStyleType, true);
  160. numbering += reversed ? -1 : 1;
  161. }
  162. };
  163. var parseStackingContexts = function (container) {
  164. var paintContainer = new ElementPaint(container, null);
  165. var root = new StackingContext(paintContainer);
  166. var listItems = [];
  167. parseStackTree(paintContainer, root, root, listItems);
  168. processListItems(paintContainer.container, listItems);
  169. return root;
  170. };
  171. exports.parseStackingContexts = parseStackingContexts;
  172. //# sourceMappingURL=stacking-context.js.map