| 1 | "use strict";
|
|---|
| 2 | Object.defineProperty(exports, "__esModule", { value: true });
|
|---|
| 3 | exports.calculateBackgroundRepeatPath = exports.getBackgroundValueForIndex = exports.calculateBackgroundSize = exports.isAuto = exports.calculateBackgroundRendering = exports.calculateBackgroundPaintingArea = exports.calculateBackgroundPositioningArea = void 0;
|
|---|
| 4 | var background_size_1 = require("../css/property-descriptors/background-size");
|
|---|
| 5 | var vector_1 = require("./vector");
|
|---|
| 6 | var length_percentage_1 = require("../css/types/length-percentage");
|
|---|
| 7 | var parser_1 = require("../css/syntax/parser");
|
|---|
| 8 | var box_sizing_1 = require("./box-sizing");
|
|---|
| 9 | var calculateBackgroundPositioningArea = function (backgroundOrigin, element) {
|
|---|
| 10 | if (backgroundOrigin === 0 /* BORDER_BOX */) {
|
|---|
| 11 | return element.bounds;
|
|---|
| 12 | }
|
|---|
| 13 | if (backgroundOrigin === 2 /* CONTENT_BOX */) {
|
|---|
| 14 | return box_sizing_1.contentBox(element);
|
|---|
| 15 | }
|
|---|
| 16 | return box_sizing_1.paddingBox(element);
|
|---|
| 17 | };
|
|---|
| 18 | exports.calculateBackgroundPositioningArea = calculateBackgroundPositioningArea;
|
|---|
| 19 | var calculateBackgroundPaintingArea = function (backgroundClip, element) {
|
|---|
| 20 | if (backgroundClip === 0 /* BORDER_BOX */) {
|
|---|
| 21 | return element.bounds;
|
|---|
| 22 | }
|
|---|
| 23 | if (backgroundClip === 2 /* CONTENT_BOX */) {
|
|---|
| 24 | return box_sizing_1.contentBox(element);
|
|---|
| 25 | }
|
|---|
| 26 | return box_sizing_1.paddingBox(element);
|
|---|
| 27 | };
|
|---|
| 28 | exports.calculateBackgroundPaintingArea = calculateBackgroundPaintingArea;
|
|---|
| 29 | var calculateBackgroundRendering = function (container, index, intrinsicSize) {
|
|---|
| 30 | var backgroundPositioningArea = exports.calculateBackgroundPositioningArea(exports.getBackgroundValueForIndex(container.styles.backgroundOrigin, index), container);
|
|---|
| 31 | var backgroundPaintingArea = exports.calculateBackgroundPaintingArea(exports.getBackgroundValueForIndex(container.styles.backgroundClip, index), container);
|
|---|
| 32 | var backgroundImageSize = exports.calculateBackgroundSize(exports.getBackgroundValueForIndex(container.styles.backgroundSize, index), intrinsicSize, backgroundPositioningArea);
|
|---|
| 33 | var sizeWidth = backgroundImageSize[0], sizeHeight = backgroundImageSize[1];
|
|---|
| 34 | var position = length_percentage_1.getAbsoluteValueForTuple(exports.getBackgroundValueForIndex(container.styles.backgroundPosition, index), backgroundPositioningArea.width - sizeWidth, backgroundPositioningArea.height - sizeHeight);
|
|---|
| 35 | var path = exports.calculateBackgroundRepeatPath(exports.getBackgroundValueForIndex(container.styles.backgroundRepeat, index), position, backgroundImageSize, backgroundPositioningArea, backgroundPaintingArea);
|
|---|
| 36 | var offsetX = Math.round(backgroundPositioningArea.left + position[0]);
|
|---|
| 37 | var offsetY = Math.round(backgroundPositioningArea.top + position[1]);
|
|---|
| 38 | return [path, offsetX, offsetY, sizeWidth, sizeHeight];
|
|---|
| 39 | };
|
|---|
| 40 | exports.calculateBackgroundRendering = calculateBackgroundRendering;
|
|---|
| 41 | var isAuto = function (token) { return parser_1.isIdentToken(token) && token.value === background_size_1.BACKGROUND_SIZE.AUTO; };
|
|---|
| 42 | exports.isAuto = isAuto;
|
|---|
| 43 | var hasIntrinsicValue = function (value) { return typeof value === 'number'; };
|
|---|
| 44 | var calculateBackgroundSize = function (size, _a, bounds) {
|
|---|
| 45 | var intrinsicWidth = _a[0], intrinsicHeight = _a[1], intrinsicProportion = _a[2];
|
|---|
| 46 | var first = size[0], second = size[1];
|
|---|
| 47 | if (!first) {
|
|---|
| 48 | return [0, 0];
|
|---|
| 49 | }
|
|---|
| 50 | if (length_percentage_1.isLengthPercentage(first) && second && length_percentage_1.isLengthPercentage(second)) {
|
|---|
| 51 | return [length_percentage_1.getAbsoluteValue(first, bounds.width), length_percentage_1.getAbsoluteValue(second, bounds.height)];
|
|---|
| 52 | }
|
|---|
| 53 | var hasIntrinsicProportion = hasIntrinsicValue(intrinsicProportion);
|
|---|
| 54 | if (parser_1.isIdentToken(first) && (first.value === background_size_1.BACKGROUND_SIZE.CONTAIN || first.value === background_size_1.BACKGROUND_SIZE.COVER)) {
|
|---|
| 55 | if (hasIntrinsicValue(intrinsicProportion)) {
|
|---|
| 56 | var targetRatio = bounds.width / bounds.height;
|
|---|
| 57 | return targetRatio < intrinsicProportion !== (first.value === background_size_1.BACKGROUND_SIZE.COVER)
|
|---|
| 58 | ? [bounds.width, bounds.width / intrinsicProportion]
|
|---|
| 59 | : [bounds.height * intrinsicProportion, bounds.height];
|
|---|
| 60 | }
|
|---|
| 61 | return [bounds.width, bounds.height];
|
|---|
| 62 | }
|
|---|
| 63 | var hasIntrinsicWidth = hasIntrinsicValue(intrinsicWidth);
|
|---|
| 64 | var hasIntrinsicHeight = hasIntrinsicValue(intrinsicHeight);
|
|---|
| 65 | var hasIntrinsicDimensions = hasIntrinsicWidth || hasIntrinsicHeight;
|
|---|
| 66 | // If the background-size is auto or auto auto:
|
|---|
| 67 | if (exports.isAuto(first) && (!second || exports.isAuto(second))) {
|
|---|
| 68 | // If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
|
|---|
| 69 | if (hasIntrinsicWidth && hasIntrinsicHeight) {
|
|---|
| 70 | return [intrinsicWidth, intrinsicHeight];
|
|---|
| 71 | }
|
|---|
| 72 | // If the image has no intrinsic dimensions and has no intrinsic proportions,
|
|---|
| 73 | // it's rendered at the size of the background positioning area.
|
|---|
| 74 | if (!hasIntrinsicProportion && !hasIntrinsicDimensions) {
|
|---|
| 75 | return [bounds.width, bounds.height];
|
|---|
| 76 | }
|
|---|
| 77 | // TODO If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
|
|---|
| 78 | // If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension.
|
|---|
| 79 | // The other dimension is computed using the specified dimension and the intrinsic proportions.
|
|---|
| 80 | if (hasIntrinsicDimensions && hasIntrinsicProportion) {
|
|---|
| 81 | var width_1 = hasIntrinsicWidth
|
|---|
| 82 | ? intrinsicWidth
|
|---|
| 83 | : intrinsicHeight * intrinsicProportion;
|
|---|
| 84 | var height_1 = hasIntrinsicHeight
|
|---|
| 85 | ? intrinsicHeight
|
|---|
| 86 | : intrinsicWidth / intrinsicProportion;
|
|---|
| 87 | return [width_1, height_1];
|
|---|
| 88 | }
|
|---|
| 89 | // If the image has only one intrinsic dimension but has no intrinsic proportions,
|
|---|
| 90 | // it's rendered using the specified dimension and the other dimension of the background positioning area.
|
|---|
| 91 | var width_2 = hasIntrinsicWidth ? intrinsicWidth : bounds.width;
|
|---|
| 92 | var height_2 = hasIntrinsicHeight ? intrinsicHeight : bounds.height;
|
|---|
| 93 | return [width_2, height_2];
|
|---|
| 94 | }
|
|---|
| 95 | // If the image has intrinsic proportions, it's stretched to the specified dimension.
|
|---|
| 96 | // The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
|
|---|
| 97 | if (hasIntrinsicProportion) {
|
|---|
| 98 | var width_3 = 0;
|
|---|
| 99 | var height_3 = 0;
|
|---|
| 100 | if (length_percentage_1.isLengthPercentage(first)) {
|
|---|
| 101 | width_3 = length_percentage_1.getAbsoluteValue(first, bounds.width);
|
|---|
| 102 | }
|
|---|
| 103 | else if (length_percentage_1.isLengthPercentage(second)) {
|
|---|
| 104 | height_3 = length_percentage_1.getAbsoluteValue(second, bounds.height);
|
|---|
| 105 | }
|
|---|
| 106 | if (exports.isAuto(first)) {
|
|---|
| 107 | width_3 = height_3 * intrinsicProportion;
|
|---|
| 108 | }
|
|---|
| 109 | else if (!second || exports.isAuto(second)) {
|
|---|
| 110 | height_3 = width_3 / intrinsicProportion;
|
|---|
| 111 | }
|
|---|
| 112 | return [width_3, height_3];
|
|---|
| 113 | }
|
|---|
| 114 | // If the image has no intrinsic proportions, it's stretched to the specified dimension.
|
|---|
| 115 | // The unspecified dimension is computed using the image's corresponding intrinsic dimension,
|
|---|
| 116 | // if there is one. If there is no such intrinsic dimension,
|
|---|
| 117 | // it becomes the corresponding dimension of the background positioning area.
|
|---|
| 118 | var width = null;
|
|---|
| 119 | var height = null;
|
|---|
| 120 | if (length_percentage_1.isLengthPercentage(first)) {
|
|---|
| 121 | width = length_percentage_1.getAbsoluteValue(first, bounds.width);
|
|---|
| 122 | }
|
|---|
| 123 | else if (second && length_percentage_1.isLengthPercentage(second)) {
|
|---|
| 124 | height = length_percentage_1.getAbsoluteValue(second, bounds.height);
|
|---|
| 125 | }
|
|---|
| 126 | if (width !== null && (!second || exports.isAuto(second))) {
|
|---|
| 127 | height =
|
|---|
| 128 | hasIntrinsicWidth && hasIntrinsicHeight
|
|---|
| 129 | ? (width / intrinsicWidth) * intrinsicHeight
|
|---|
| 130 | : bounds.height;
|
|---|
| 131 | }
|
|---|
| 132 | if (height !== null && exports.isAuto(first)) {
|
|---|
| 133 | width =
|
|---|
| 134 | hasIntrinsicWidth && hasIntrinsicHeight
|
|---|
| 135 | ? (height / intrinsicHeight) * intrinsicWidth
|
|---|
| 136 | : bounds.width;
|
|---|
| 137 | }
|
|---|
| 138 | if (width !== null && height !== null) {
|
|---|
| 139 | return [width, height];
|
|---|
| 140 | }
|
|---|
| 141 | throw new Error("Unable to calculate background-size for element");
|
|---|
| 142 | };
|
|---|
| 143 | exports.calculateBackgroundSize = calculateBackgroundSize;
|
|---|
| 144 | var getBackgroundValueForIndex = function (values, index) {
|
|---|
| 145 | var value = values[index];
|
|---|
| 146 | if (typeof value === 'undefined') {
|
|---|
| 147 | return values[0];
|
|---|
| 148 | }
|
|---|
| 149 | return value;
|
|---|
| 150 | };
|
|---|
| 151 | exports.getBackgroundValueForIndex = getBackgroundValueForIndex;
|
|---|
| 152 | var calculateBackgroundRepeatPath = function (repeat, _a, _b, backgroundPositioningArea, backgroundPaintingArea) {
|
|---|
| 153 | var x = _a[0], y = _a[1];
|
|---|
| 154 | var width = _b[0], height = _b[1];
|
|---|
| 155 | switch (repeat) {
|
|---|
| 156 | case 2 /* REPEAT_X */:
|
|---|
| 157 | return [
|
|---|
| 158 | new vector_1.Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)),
|
|---|
| 159 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(backgroundPositioningArea.top + y)),
|
|---|
| 160 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(height + backgroundPositioningArea.top + y)),
|
|---|
| 161 | new vector_1.Vector(Math.round(backgroundPositioningArea.left), Math.round(height + backgroundPositioningArea.top + y))
|
|---|
| 162 | ];
|
|---|
| 163 | case 3 /* REPEAT_Y */:
|
|---|
| 164 | return [
|
|---|
| 165 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)),
|
|---|
| 166 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top)),
|
|---|
| 167 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)),
|
|---|
| 168 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top))
|
|---|
| 169 | ];
|
|---|
| 170 | case 1 /* NO_REPEAT */:
|
|---|
| 171 | return [
|
|---|
| 172 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y)),
|
|---|
| 173 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y)),
|
|---|
| 174 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y + height)),
|
|---|
| 175 | new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y + height))
|
|---|
| 176 | ];
|
|---|
| 177 | default:
|
|---|
| 178 | return [
|
|---|
| 179 | new vector_1.Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.top)),
|
|---|
| 180 | new vector_1.Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.top)),
|
|---|
| 181 | new vector_1.Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top)),
|
|---|
| 182 | new vector_1.Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top))
|
|---|
| 183 | ];
|
|---|
| 184 | }
|
|---|
| 185 | };
|
|---|
| 186 | exports.calculateBackgroundRepeatPath = calculateBackgroundRepeatPath;
|
|---|
| 187 | //# sourceMappingURL=background.js.map |
|---|
