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 |
---|