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