Add box-shadow rendering

niklasvh · Mar 25, 2017 · c74b2fe · c74b2fe
1 parent 83e9b85
commit c74b2fe
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/src/nodeparser.js b/src/nodeparser.js
@@ -330,6 +330,10 @@ NodeParser.prototype.paintElement = function(container) {
         this.renderer.renderBackground(container, bounds, container.borders.borders.map(getWidth));
     }, this);
 
+    this.renderer.mask(bounds, function() {
+        this.renderer.renderShadows(container, bounds);
+    }, this);
+
     this.renderer.clip(container.clip, function() {
         this.renderer.renderBorders(container.borders.borders);
     }, this);

diff --git a/src/renderer.js b/src/renderer.js
@@ -44,6 +44,14 @@ Renderer.prototype.renderBackgroundColor = function(container, bounds) {
     }
 };
 
+Renderer.prototype.renderShadows = function(container, bounds) {
+    var boxShadow = container.css('boxShadow');
+    if (boxShadow !== 'none') {
+        var shadows = boxShadow.split(/,(?![^(]*\))/);
+        this.shadow(bounds.left, bounds.top, bounds.width, bounds.height, shadows);
+    }
+};
+
 Renderer.prototype.renderBorders = function(borders) {
     borders.forEach(this.renderBorder, this);
 };

diff --git a/src/renderers/canvas.js b/src/renderers/canvas.js
@@ -41,6 +41,39 @@ CanvasRenderer.prototype.circleStroke = function(left, top, size, color, stroke,
     this.ctx.stroke();
 };
 
+CanvasRenderer.prototype.shadow = function(left, top, width, height, shadows) {
+    var parseShadow = function(str) {
+        var propertyFilters = { color: /^(#|rgb|hsl|(?!(inset|initial|inherit))\D+)/i, inset: /^inset/i, px: /px$/i };
+        var pxPropertyNames = [ 'x', 'y', 'blur', 'spread' ];
+        var properties = str.split(/ (?![^(]*\))/);
+        var info = {};
+        for (var key in propertyFilters) {
+            info[key] = properties.filter(propertyFilters[key].test.bind(propertyFilters[key]));
+            info[key] = info[key].length === 0 ? null : info[key].length === 1 ? info[key][0] : info[key];
+        }
+        for (var i=0; i<info.px.length; i++) {
+            info[pxPropertyNames[i]] = parseInt(info.px[i]);
+        }
+        return info;
+    };
+    var drawShadow = function(shadow) {
+        var info = parseShadow(shadow);
+        if (!info.inset) {
+            context.shadowOffsetX = info.x;
+            context.shadowOffsetY = info.y;
+            context.shadowColor = info.color;
+            context.shadowBlur = info.blur;
+            context.fill();
+        }
+    };
+    var context = this.setFillStyle('white');
+    context.save();
+    context.beginPath();
+    context.rect(left, top, width, height);
+    shadows.forEach(drawShadow, this);
+    context.restore();
+};
+
 CanvasRenderer.prototype.drawShape = function(shape, color) {
     this.shape(shape);
     this.setFillStyle(color).fill();
@@ -76,6 +109,16 @@ CanvasRenderer.prototype.clip = function(shapes, callback, context) {
     this.ctx.restore();
 };
 
+CanvasRenderer.prototype.mask = function(bounds, callback, context) {
+    var canvasBorderCCW = ["rect", this.canvas.width, 0, -this.canvas.width, this.canvas.height];
+    var boundsCW = ["rect", bounds.left, bounds.top, bounds.width, bounds.height];
+    this.ctx.save();
+    var shape = [canvasBorderCCW, boundsCW];
+    this.shape(shape).clip();
+    callback.call(context);
+    this.ctx.restore();
+};
+
 CanvasRenderer.prototype.shape = function(shape) {
     this.ctx.beginPath();
     shape.forEach(function(point, index) {