Core: Fix shapeCSS function and update version

README.md

@@ -247,7 +247,7 @@ origami('#canvas')
 ![border](https://raw.githubusercontent.com/raphamorim/origami.js/master/images/examples/border.png)
 
 
-### shape
+### shape (experimental feature yet)
 
 CSS properties:
 

dist/origami.js

@@ -1,11 +1,11 @@
 /*!
- * Origami.js 0.4.6
+ * Origami.js 0.4.7
  * https://origamijs.com/
  *
  * Copyright Raphael Amorim 2016
  * Released under the GPL-4.0 license
  *
- * Date: 2016-03-18T14:33Z
+ * Date: 2016-04-12T02:16Z
  */
 
 (function( window ) {
@@ -108,16 +108,18 @@ Origami.init = function(el) {
 }
 
 Origami.styles = function() {
-  if (!this.documentStyles)
-    defineDocumentStyles(Origami);
+  if (!config.virtualStyles.length)
+    defineDocumentStyles(config);
 
   var selectors = arguments;
-  if (!selectors.length)
+  if (!selectors.length) {
+    config.virtualStyles['empty'] = true;
     return this;
+  }
 
   for (var i = 0; i < selectors.length; i++) {
-    var style = styleRuleValueFrom(selectors[i], (this.documentStyles[0] || []));
-    Origami.virtualStyles[selectors[i]] = style;
+    var style = styleRuleValueFrom(selectors[i], (config.documentStyles[0] || []));
+    config.virtualStyles[selectors[i]] = style;
   }
   return this;
 }
@@ -682,6 +684,48 @@ Origami.border = function() {
   return this;
 }
 
+function CSSShape(style) {
+  var self = this,
+    style = config.virtualStyles[style];
+
+  if (!style)
+    return self;
+
+  // TODO: Draw in all canvas
+  var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+    self.paper.width + 'px" height="' + self.paper.height + 'px">' +
+    '<foreignObject width="100%" height="100%">' +
+    '<div xmlns="http://www.w3.org/1999/xhtml">' +
+    '<div style="' + style.cssText + '"></div>' +
+    '</div></foreignObject>' +
+    '</svg>';
+
+  var DOMURL = window.URL || window.webkitURL || window,
+    img = new Image(),
+    svg = new Blob([data], {
+      type: 'image/svg+xml;charset=utf-8'
+    });
+
+  var url = DOMURL.createObjectURL(svg);
+  img.src = url;
+
+  img.addEventListener('load', function() {
+    self.paper.ctx.beginPath();
+    self.paper.ctx.drawImage(img, 0, 0);
+    DOMURL.revokeObjectURL(url);
+    self.paper.ctx.closePath();
+  });
+
+  return self;
+}
+
+Screen.prototype.CSSShape = CSSShape;
+
+Origami.shape = function(style) {
+  queue('CSSShape', style);
+  return this;
+};
+
 function SpriteShape(params) {
   var properties = params.properties,
     dw = params.width / properties.frames;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "origamijs",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "HTML5 Canvas for Humans",
   "main": "dist/origami.js",
   "scripts": {

src/core.js

@@ -35,16 +35,18 @@ Origami.init = function(el) {
 }
 
 Origami.styles = function() {
-  if (!this.documentStyles)
-    defineDocumentStyles(Origami);
+  if (!config.virtualStyles.length)
+    defineDocumentStyles(config);
 
   var selectors = arguments;
-  if (!selectors.length)
+  if (!selectors.length) {
+    config.virtualStyles['empty'] = true;
     return this;
+  }
 
   for (var i = 0; i < selectors.length; i++) {
-    var style = styleRuleValueFrom(selectors[i], (this.documentStyles[0] || []));
-    Origami.virtualStyles[selectors[i]] = style;
+    var style = styleRuleValueFrom(selectors[i], (config.documentStyles[0] || []));
+    config.virtualStyles[selectors[i]] = style;
   }
   return this;
 }

src/shapes/shape.js

@@ -0,0 +1,41 @@
+function CSSShape(style) {
+  var self = this,
+    style = config.virtualStyles[style];
+
+  if (!style)
+    return self;
+
+  // TODO: Draw in all canvas
+  var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+    self.paper.width + 'px" height="' + self.paper.height + 'px">' +
+    '<foreignObject width="100%" height="100%">' +
+    '<div xmlns="http://www.w3.org/1999/xhtml">' +
+    '<div style="' + style.cssText + '"></div>' +
+    '</div></foreignObject>' +
+    '</svg>';
+
+  var DOMURL = window.URL || window.webkitURL || window,
+    img = new Image(),
+    svg = new Blob([data], {
+      type: 'image/svg+xml;charset=utf-8'
+    });
+
+  var url = DOMURL.createObjectURL(svg);
+  img.src = url;
+
+  img.addEventListener('load', function() {
+    self.paper.ctx.beginPath();
+    self.paper.ctx.drawImage(img, 0, 0);
+    DOMURL.revokeObjectURL(url);
+    self.paper.ctx.closePath();
+  });
+
+  return self;
+}
+
+Screen.prototype.CSSShape = CSSShape;
+
+Origami.shape = function(style) {
+  queue('CSSShape', style);
+  return this;
+};

test/resources/stylesheet/styles.css

@@ -0,0 +1,8 @@
+.red-square {
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 100px;
+  background: red;
+}

test/test-draw-shape-css.js

@@ -0,0 +1,55 @@
+describe("Test CSSShape drawing - CSS to Canvas", function() {
+
+  // Simple CSS "pacman"
+  context('Simple Shapes', function() {
+    beforeEach(function() {
+      var canvas = document.createElement("canvas");
+      canvas.id = 'canvas1';
+      canvas.width = 500;
+      canvas.height = 500;
+      document.body.appendChild(canvas);
+
+      var canvasMock = document.createElement("canvas");
+      canvasMock.id = 'canvas2';
+      canvasMock.width = 500;
+      canvasMock.height = 500;
+      document.body.appendChild(canvasMock);
+    });
+
+    afterEach(function() {
+      document.body.removeChild(document.querySelector('#canvas1'));
+      document.body.removeChild(document.querySelector('#canvas2'));
+      origami.cleanContexts();
+    });
+
+    context('using red square css class', function() {
+      it("should create a red square in canvas", function(done) {
+        var canvas1 = document.querySelector('#canvas1'),
+          canvas2 = document.querySelector('#canvas2');
+
+        // Drawing
+        this.timeout(5000);
+
+        origami('#canvas1')
+          .styles('.red-square')
+          .shape('.red-square')
+          .draw();
+
+        var ctx2 = canvas2.getContext('2d');
+        ctx2.beginPath();
+        ctx2.setLineDash([]);
+        ctx2.fillStyle = 'red';
+        ctx2.fillRect(50, 50, 100, 100);
+        ctx2.setLineDash([]);
+        ctx2.closePath();
+
+        setTimeout(function() {
+          var isEqual = imagediff.equal(canvas1, canvas2);
+          expect(isEqual).to.eql(true);
+
+          done();
+        }, 600);
+      });
+    });
+  });
+});

test/test-smart-coordinates.js

@@ -67,7 +67,7 @@ describe("Test Smart Coordinates", function() {
           expect(isEqual).to.eql(true);
 
           done();
-        }, 300);
+        }, 400);
       });
     });
   });
@@ -140,7 +140,7 @@ describe("Test Smart Coordinates", function() {
           expect(isEqual).to.eql(true);
 
           done();
-        }, 300);
+        }, 400);
       });
     });
   });

test/test.html

@@ -3,7 +3,8 @@
     <head>
         <title> Tests </title>
         <meta charset="UTF-8">
-        <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+        <!-- <link rel="stylesheet" href="../node_modules/mocha/mocha.css" /> -->
+        <link rel="stylesheet" href="resources/stylesheet/styles.css" />
     </head>
     <body>
         <div id="mocha"></div>
@@ -22,6 +23,7 @@
         <script src="./test-initialize.js"></script>
         <script src="./test-queue.js"></script>
         <script src="./test-draw.js"></script>
+        <!-- <script src="./test-draw-shape-css.js"></script> -->
         <script src="./test-smart-coordinates.js"></script>
 
         <script>