diff --git a/dist/origami.js b/dist/origami.js
index f3a3ebf..c65f961 100644
--- a/dist/origami.js
+++ b/dist/origami.js
@@ -5,7 +5,7 @@
* Copyright Raphael Amorim 2016
* Released under the GPL-4.0 license
*
- * Date: 2016-04-12T02:16Z
+ * Date: 2016-04-12T03:12Z
*/
(function( window ) {
@@ -22,12 +22,6 @@ var Origami = {
};
var config = {
- // Document Styles
- documentStyles: [],
-
- // Virtual Styles
- virtualStyles: {},
-
// All contexts saved
contexts: [],
@@ -107,23 +101,6 @@ Origami.init = function(el) {
return this;
}
-Origami.styles = function() {
- if (!config.virtualStyles.length)
- defineDocumentStyles(config);
-
- var selectors = arguments;
- if (!selectors.length) {
- config.virtualStyles['empty'] = true;
- return this;
- }
-
- for (var i = 0; i < selectors.length; i++) {
- var style = styleRuleValueFrom(selectors[i], (config.documentStyles[0] || []));
- config.virtualStyles[selectors[i]] = style;
- }
- return this;
-}
-
Origami.getPaper = function() {
return this.paper;
}
@@ -334,18 +311,6 @@ function smartCoordinates(args) {
return args;
}
-/**
- * Return all documentStyles to a especified origami context
- * @returns undefined
- */
-function defineDocumentStyles() {
- for (var i = 0; i < document.styleSheets.length; i++) {
- var mysheet = document.styleSheets[i],
- myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
- config.documentStyles.push(myrules);
- }
-}
-
/**
* Merge defaults with user options
* @param {Object} defaults Default settings
@@ -371,20 +336,6 @@ function extend(a, b, undefOnly) {
return a;
}
-/**
- * Get Style Rule from a specified element
- * @param {String} selector from element
- * @param {Array} Document Style Rules
- * @returns {Object} Merged values of defaults and options
- */
-function styleRuleValueFrom(selector, documentStyleRules) {
- for (var j = 0; j < documentStyleRules.length; j++) {
- if (documentStyleRules[j].selectorText && documentStyleRules[j].selectorText.toLowerCase() === selector) {
- return documentStyleRules[j].style;
- }
- }
-}
-
/**
* Clone a object
* @param {Object} object
@@ -684,45 +635,88 @@ Origami.border = function() {
return this;
}
-function CSSShape(style) {
- var self = this,
- style = config.virtualStyles[style];
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @co-author raphamorim
+ */
- if (!style)
- return self;
+function html2canvas(element) {
+ var range = document.createRange();
- // TODO: Draw in all canvas
- var data = '';
-
- var DOMURL = window.URL || window.webkitURL || window,
- img = new Image(),
- svg = new Blob([data], {
- type: 'image/svg+xml;charset=utf-8'
- });
+ function getRect(rect) {
+ return {
+ left: rect.left - offset.left - 0.5,
+ top: rect.top - offset.top - 0.5,
+ width: rect.width,
+ height: rect.height
+ };
+ }
- var url = DOMURL.createObjectURL(svg);
- img.src = url;
+ function drawText(style, x, y, string) {
+ context.font = style.fontSize + ' ' + style.fontFamily;
+ context.textBaseline = 'top';
+ context.fillStyle = style.color;
+ context.fillText(string, x, y);
+ }
- img.addEventListener('load', function() {
- self.paper.ctx.beginPath();
- self.paper.ctx.drawImage(img, 0, 0);
- DOMURL.revokeObjectURL(url);
- self.paper.ctx.closePath();
- });
+ function drawBorder(style, which, x, y, width, height) {
+ var borderWidth = style[which + 'Width'];
+ var borderStyle = style[which + 'Style'];
+ var borderColor = style[which + 'Color'];
+
+ if (borderWidth !== '0px' && borderStyle !== 'none') {
+ context.strokeStyle = borderColor;
+ context.beginPath();
+ context.moveTo(x, y);
+ context.lineTo(x + width, y + height);
+ context.stroke();
+ }
+ }
- return self;
+ function drawElement(element, style) {
+ var rect;
+ if (element.nodeType === 3) {
+ // text
+ range.selectNode(element);
+ rect = getRect(range.getBoundingClientRect());
+ drawText(style, rect.left, rect.top, element.nodeValue.trim());
+ } else {
+ rect = getRect(element.getBoundingClientRect());
+ style = window.getComputedStyle(element);
+
+ context.fillStyle = style.backgroundColor;
+ context.fillRect(rect.left, rect.top, rect.width, rect.height);
+
+ drawBorder(style, 'borderTop', rect.left, rect.top, rect.width, 0);
+ drawBorder(style, 'borderLeft', rect.left, rect.top, 0, rect.height);
+ drawBorder(style, 'borderBottom', rect.left, rect.top + rect.height, rect.width, 0);
+ drawBorder(style, 'borderRight', rect.left + rect.width, rect.top, 0, rect.height);
+
+ if (element.type === 'color' || element.type === 'text') {
+ drawText(style, rect.left + parseInt(style.paddingLeft), rect.top + parseInt(style.paddingTop), element.value);
+ }
+ }
+
+ for (var i = 0; i < element.childNodes.length; i++) {
+ drawElement(element.childNodes[i], style);
+ }
+ }
+
+ var offset = element.getBoundingClientRect();
+ var context = this.paper.ctx;
+ drawElement(element);
}
-Screen.prototype.CSSShape = CSSShape;
+Screen.prototype.html2canvas = html2canvas;
+
+Origami.shape = function(selector) {
+ var element = document.querySelector(selector);
+
+ if (!element)
+ this.error('Please use a valid selector in shape argument');
+ else
+ queue('html2canvas', element);
-Origami.shape = function(style) {
- queue('CSSShape', style);
return this;
};
diff --git a/dist/origami.min.js b/dist/origami.min.js
index f885020..e96388b 100644
--- a/dist/origami.min.js
+++ b/dist/origami.min.js
@@ -1,2 +1,2 @@
-!function(a){function b(a,b,c){this.paper.queue.push({assign:a,params:b,loaded:c})}function c(a,b){for(var c=0;c',e=a.URL||a.webkitURL||a,f=new Image,g=new Blob([d],{type:"image/svg+xml;charset=utf-8"}),h=e.createObjectURL(g);return f.src=h,f.addEventListener("load",function(){c.paper.ctx.beginPath(),c.paper.ctx.drawImage(f,0,0),e.revokeObjectURL(h),c.paper.ctx.closePath()}),c}function r(a){var b=a.properties,c=a.width/b.frames;s.call(this,{image:a.image,posX:0,posY:0,frame:b.frames,loop:b.loop,width:c,widthTotal:a.width,height:a.height,dx:a.x,dy:a.y,speed:b.speed,animation:null})}function s(b){var c=this;if(b.posX===b.widthTotal){if(b.loop===!1)return void a.cancelAnimationFrame(b.animation);b.posX=0}c.paper.ctx.clearRect(b.dx,b.dy,b.width,b.height),c.paper.ctx.beginPath(),c.paper.ctx.drawImage(b.image,b.posX,b.posY,b.width,b.height,b.dx,b.dy,b.width,b.height),c.paper.ctx.closePath(),b.posX=b.posX+b.width,setTimeout(function(){b.animation=a.requestAnimationFrame(s.bind(c,b))},b.speed)}function t(a){var b=v.defaults.text,c=a.text,d=a.x,e=a.y,f=a.style;this.paper.ctx.beginPath(),this.paper.ctx.setLineDash(f.borderStyle),this.paper.ctx.lineWidth=f.borderSize?f.borderSize:b.lineWidth,this.paper.ctx.strokeStyle=f.borderColor?f.borderColor:b.strokeStyle,this.paper.ctx.font=f.font||b.font,this.paper.ctx.fillStyle=f.color||b.color,this.paper.ctx.textAlign=f.align||b.align,this.paper.ctx.fillText(c,d,e),this.paper.ctx.strokeText(c,d,e),this.paper.ctx.fill(),this.paper.ctx.stroke(),this.paper.ctx.setLineDash([]),this.paper.ctx.closePath()}var u={paper:null},v={documentStyles:[],virtualStyles:{},contexts:[],defaults:{arc:{background:"rgba(0, 0, 0, 0)",strokeStyle:"rgba(0, 0, 0, 0)",lineWidth:null},rect:{background:"rgba(0, 0, 0, 0)",strokeStyle:"rgba(0, 0, 0, 0)",lineWidth:null},polygon:{background:"rgba(0, 0, 0, 0)",strokeStyle:"rgba(0, 0, 0, 0)",lineWidth:null},line:{strokeStyle:"rgba(0, 0, 0, 0)",lineWidth:null},text:{font:"14px Helvetica",strokeStyle:"rgba(0, 0, 0, 0)",color:"#000",lineWidth:null}}},w="[origami.js]";u.warning=function(a,b){console&&console.warn&&console.warn(w,a,b)},u.error=function(a){throw new Error(w.concat(" "+a))},u.init=function(a){a=a.canvas?a.canvas:document.querySelector(a),a||this.error("Please use a valid selector or canvas context");var b=c(a,v.contexts);if(b)return this.paper=b,this;a.getContext||this.error("Please verify if it's a valid canvas element");var d=a.getContext("2d"),e={element:a,queue:[],index:v.contexts.length,flip:!1,frame:null,ctx:d,width:a.width,height:a.height};return v.contexts.push(e),this.paper=e,this},u.styles=function(){v.virtualStyles.length||g(v);var a=arguments;if(!a.length)return v.virtualStyles.empty=!0,this;for(var b=0;b' +
- '' +
- '' +
- '';
-
- 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;
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @co-author raphamorim
+ */
+
+function html2canvas(element) {
+ var range = document.createRange();
+
+ function getRect(rect) {
+ return {
+ left: rect.left - offset.left - 0.5,
+ top: rect.top - offset.top - 0.5,
+ width: rect.width,
+ height: rect.height
+ };
+ }
+
+ function drawText(style, x, y, string) {
+ context.font = style.fontSize + ' ' + style.fontFamily;
+ context.textBaseline = 'top';
+ context.fillStyle = style.color;
+ context.fillText(string, x, y);
+ }
+
+ function drawBorder(style, which, x, y, width, height) {
+ var borderWidth = style[which + 'Width'];
+ var borderStyle = style[which + 'Style'];
+ var borderColor = style[which + 'Color'];
+
+ if (borderWidth !== '0px' && borderStyle !== 'none') {
+ context.strokeStyle = borderColor;
+ context.beginPath();
+ context.moveTo(x, y);
+ context.lineTo(x + width, y + height);
+ context.stroke();
+ }
+ }
+
+ function drawElement(element, style) {
+ var rect;
+ if (element.nodeType === 3) {
+ // text
+ range.selectNode(element);
+ rect = getRect(range.getBoundingClientRect());
+ drawText(style, rect.left, rect.top, element.nodeValue.trim());
+ } else {
+ rect = getRect(element.getBoundingClientRect());
+ style = window.getComputedStyle(element);
+
+ context.fillStyle = style.backgroundColor;
+ context.fillRect(rect.left, rect.top, rect.width, rect.height);
+
+ drawBorder(style, 'borderTop', rect.left, rect.top, rect.width, 0);
+ drawBorder(style, 'borderLeft', rect.left, rect.top, 0, rect.height);
+ drawBorder(style, 'borderBottom', rect.left, rect.top + rect.height, rect.width, 0);
+ drawBorder(style, 'borderRight', rect.left + rect.width, rect.top, 0, rect.height);
+
+ if (element.type === 'color' || element.type === 'text') {
+ drawText(style, rect.left + parseInt(style.paddingLeft), rect.top + parseInt(style.paddingTop), element.value);
+ }
+ }
+
+ for (var i = 0; i < element.childNodes.length; i++) {
+ drawElement(element.childNodes[i], style);
+ }
+ }
+
+ var offset = element.getBoundingClientRect();
+ var context = this.paper.ctx;
+ drawElement(element);
}
-Screen.prototype.CSSShape = CSSShape;
+Screen.prototype.html2canvas = html2canvas;
+
+Origami.shape = function(selector) {
+ var element = document.querySelector(selector);
+
+ if (!element)
+ this.error('Please use a valid selector in shape argument');
+ else
+ queue('html2canvas', element);
-Origami.shape = function(style) {
- queue('CSSShape', style);
return this;
};
diff --git a/src/utilities.js b/src/utilities.js
index 494e9eb..a3f610f 100644
--- a/src/utilities.js
+++ b/src/utilities.js
@@ -149,18 +149,6 @@ function smartCoordinates(args) {
return args;
}
-/**
- * Return all documentStyles to a especified origami context
- * @returns undefined
- */
-function defineDocumentStyles() {
- for (var i = 0; i < document.styleSheets.length; i++) {
- var mysheet = document.styleSheets[i],
- myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
- config.documentStyles.push(myrules);
- }
-}
-
/**
* Merge defaults with user options
* @param {Object} defaults Default settings
@@ -186,20 +174,6 @@ function extend(a, b, undefOnly) {
return a;
}
-/**
- * Get Style Rule from a specified element
- * @param {String} selector from element
- * @param {Array} Document Style Rules
- * @returns {Object} Merged values of defaults and options
- */
-function styleRuleValueFrom(selector, documentStyleRules) {
- for (var j = 0; j < documentStyleRules.length; j++) {
- if (documentStyleRules[j].selectorText && documentStyleRules[j].selectorText.toLowerCase() === selector) {
- return documentStyleRules[j].style;
- }
- }
-}
-
/**
* Clone a object
* @param {Object} object