[79a0317] | 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 |
---|