2014-01-21 23:41:00 +04:00
|
|
|
function Renderer(width, height, images) {
|
|
|
|
this.width = width;
|
|
|
|
this.height = height;
|
|
|
|
this.images = images;
|
2014-01-19 20:04:27 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
Renderer.prototype.renderBackground = function(container, bounds) {
|
|
|
|
if (bounds.height > 0 && bounds.width > 0) {
|
|
|
|
this.renderBackgroundColor(container, bounds);
|
|
|
|
this.renderBackgroundImage(container, bounds);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Renderer.prototype.renderBackgroundColor = function(container, bounds) {
|
|
|
|
var color = container.css("backgroundColor");
|
|
|
|
if (!this.isTransparent(color)) {
|
2014-01-21 23:41:00 +04:00
|
|
|
this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, container.css("backgroundColor"));
|
2014-01-19 20:04:27 +04:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Renderer.prototype.renderBorders = function(borders) {
|
|
|
|
borders.forEach(this.renderBorder, this);
|
|
|
|
};
|
|
|
|
|
|
|
|
Renderer.prototype.renderBorder = function(data) {
|
|
|
|
if (!this.isTransparent(data.color) && data.args !== null) {
|
|
|
|
this.drawShape(data.args, data.color);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Renderer.prototype.renderBackgroundImage = function(container, bounds) {
|
2014-01-21 23:41:00 +04:00
|
|
|
var backgroundImages = container.parseBackgroundImages();
|
2014-01-26 18:06:16 +04:00
|
|
|
backgroundImages.reverse().forEach(function(backgroundImage, index, arr) {
|
2014-01-21 23:41:00 +04:00
|
|
|
if (backgroundImage.method === "url") {
|
|
|
|
var image = this.images.get(backgroundImage.args[0]);
|
|
|
|
if (image) {
|
2014-01-26 18:06:16 +04:00
|
|
|
this.renderBackgroundRepeating(container, bounds, image, arr.length - (index+1));
|
2014-01-21 23:41:00 +04:00
|
|
|
} else {
|
|
|
|
log("Error loading background-image", backgroundImage.args[0]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, this);
|
|
|
|
};
|
2014-01-19 20:04:27 +04:00
|
|
|
|
2014-01-21 23:41:00 +04:00
|
|
|
Renderer.prototype.renderBackgroundRepeating = function(container, bounds, imageContainer, index) {
|
|
|
|
var size = container.parseBackgroundSize(bounds, imageContainer.image, index);
|
|
|
|
var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size);
|
|
|
|
var repeat = container.parseBackgroundRepeat(index);
|
|
|
|
// image = resizeImage(image, backgroundSize);
|
|
|
|
switch (repeat) {
|
|
|
|
case "repeat-x":
|
|
|
|
case "repeat no-repeat":
|
2014-01-26 18:06:16 +04:00
|
|
|
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left, bounds.top + position.top, 99999, imageContainer.image.height);
|
2014-01-21 23:41:00 +04:00
|
|
|
break;
|
|
|
|
case "repeat-y":
|
|
|
|
case "no-repeat repeat":
|
2014-01-26 18:06:16 +04:00
|
|
|
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left, bounds.top, imageContainer.image.width, 99999);
|
2014-01-21 23:41:00 +04:00
|
|
|
break;
|
|
|
|
case "no-repeat":
|
2014-01-26 18:06:16 +04:00
|
|
|
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left, bounds.top + position.top, imageContainer.image.width, imageContainer.image.height);
|
2014-01-21 23:41:00 +04:00
|
|
|
break;
|
|
|
|
default:
|
2014-01-26 18:06:16 +04:00
|
|
|
this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left});
|
2014-01-21 23:41:00 +04:00
|
|
|
break;
|
|
|
|
}
|
2014-01-19 20:04:27 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
Renderer.prototype.isTransparent = function(color) {
|
|
|
|
return (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)");
|
|
|
|
};
|