version update

CanvasTextWrapper.js

@@ -73,6 +73,7 @@
 
 				setFont(--fontSize);
 				lineHeight = fontSize;
+				wrap();
 			} else {
 				wrap();
 			}

CanvasTextWrapper.min.js

@@ -3,4 +3,4 @@
  *  Version:  0.4.0
  *  MIT License (http://www.opensource.org/licenses/mit-license.html)
  */
-!function(a){function b(a,b,c){"use strict";function d(){t=q.font.match(/\d+(px|em|%)/g)?+q.font.match(/\d+(px|em|%)/g)[0].match(/\d+/g):18,u=0,v=[],w=[],x={x:0,y:0},f(t),g(),o(),e()}function e(){if(q.sizeToFill){var a=b.trim().split(/\s+/).length,c=0;do f(++c),y=c,h();while(C>u&&v.join(" ").split(/\s+/).length==a);f(--c),y=c}else h();q.justifyLines&&"auto"===q.lineBreak&&k(),n(),l()}function f(a){var b=q.sizeToFill?s.font.split(/\b\d+px\b/i):q.font.split(/\b\d+px\b/i);s.font=b[0]+a+"px"+b[1]}function g(){isNaN(q.lineHeight)?-1!==q.lineHeight.toString().indexOf("px")?y=parseInt(q.lineHeight):-1!==q.lineHeight.toString().indexOf("%")&&(y=parseInt(q.lineHeight)/100*t):y=t*q.lineHeight}function h(){if(q.allowNewLine)for(var a=b.trim().split("\n"),c=0,d=0;c<a.length-1;c++)d+=a[c].trim().split(/\s+/).length,w.push(d);var e=b.trim().split(/\s+/);i(e),j(e),u=v.length*y}function i(a){for(var b,c,d,e,f=0;f<a.length;f++)if(b="",c=s.measureText(a[f]).width,c>B){for(var g=0;s.measureText(b+a[f][g]).width<=B&&g<a[f].length;g++)b+=a[f][g];d=a[f].slice(0,g),e=a[f].slice(g),a.splice(f,1,d,e)}}function j(a){for(var b=0,c=0;b<a.length;c++)if(v[c]="","auto"===q.lineBreak){for(;s.measureText(v[c]+a[b]).width<=B&&b<a.length;)if(v[c]+=a[b]+" ",b++,q.allowNewLine)for(var d=0;d<w.length;d++)if(w[d]===b){c++,v[c]="";break}v[c]=v[c].trim()}else v[c]=a[b],b++}function k(){for(var a,b,c,d=0;d<v.length;d++)c=s.measureText(v[d]).width,(!a||c>a)&&(a=c,b=d);var e,f,g,h,i,j=" ";for(d=0;d<v.length;d++)if(d!==b&&(e=v[d].trim().split(/\s+/).length,!(1>=e))){v[d]=v[d].trim().split(/\s+/).join(j),f=s.measureText(j).width,g=(a-s.measureText(v[d]).width)/f,h=g/(e-1),i="";for(var k=0;h>k;k++)i+=j;v[d]=v[d].trim().split(j).join(i)}}function l(){for(var a=0;a<v.length;a++)m(v[a]),x.y=parseInt(x.y)+y,s.fillText(v[a],x.x,x.y),q.strokeText&&s.strokeText(v[a],x.x,x.y)}function m(a){"center"==q.textAlign?x.x=(z-s.measureText(a).width)/2:"right"==q.textAlign?x.x=z-s.measureText(a).width-q.paddingX:x.x=q.paddingX}function n(){"middle"==q.verticalAlign?x.y=(A-u)/2:"bottom"==q.verticalAlign?x.y=A-u-q.paddingY:x.y=q.paddingY}function o(){if(!(a instanceof HTMLCanvasElement))throw new TypeError("The first parameter must be an instance of HTMLCanvasElement.");if("string"!=typeof b)throw new TypeError("The second parameter must be a string.");if(isNaN(t))throw new TypeError('Cannot parse "font".');if(isNaN(y))throw new TypeError('Cannot parse "lineHeight".');if("left"!==q.textAlign.toLocaleLowerCase()&&"center"!==q.textAlign.toLocaleLowerCase()&&"right"!==q.textAlign.toLocaleLowerCase())throw new TypeError('Property "textAlign" must be set to either "left", "center", or "right".');if("top"!==q.verticalAlign.toLocaleLowerCase()&&"middle"!==q.verticalAlign.toLocaleLowerCase()&&"bottom"!==q.verticalAlign.toLocaleLowerCase())throw new TypeError('Property "verticalAlign" must be set to either "top", "middle", or "bottom".');if("boolean"!=typeof q.justifyLines)throw new TypeError('Property "justifyLines" must be set to a Boolean.');if(isNaN(q.paddingX))throw new TypeError('Property "paddingX" must be set to a Number.');if(isNaN(q.paddingY))throw new TypeError('Property "paddingY" must be set to a Number.');if("boolean"!=typeof q.fitParent)throw new TypeError('Property "fitParent" must be set to a Boolean.');if("auto"!==q.lineBreak.toLocaleLowerCase()&&"word"!==q.lineBreak.toLocaleLowerCase())throw new TypeError('Property "lineBreak" must be set to either "auto" or "word".');if("boolean"!=typeof q.sizeToFill)throw new TypeError('Property "sizeToFill" must be set to a Boolean.');if("boolean"!=typeof q.strokeText)throw new TypeError('Property "strokeText" must be set to a Boolean.')}var p={font:"18px Arial, sans-serif",sizeToFill:!1,lineHeight:1,allowNewLine:!0,lineBreak:"auto",textAlign:"left",verticalAlign:"top",justifyLines:!1,paddingX:0,paddingY:0,fitParent:!1,strokeText:!1},q={};for(var r in p)p.hasOwnProperty(r)&&(q[r]=c&&c[r]?c[r]:p[r]);var s=a.getContext("2d");s.font=q.font,s.textBaseline="bottom";var t,u,v,w,x,y,z=q.fitParent===!1?a.width:a.parentNode.clientWidth,A=q.fitParent===!1?a.height:a.parentNode.clientHeight,B=z-2*q.paddingX,C=A-2*q.paddingY;d()}"module"in a&&"exports"in module?module.exports=b:a.CanvasTextWrapper=b}(this);
+!function(a){function b(a,b,c){"use strict";function d(){t=q.font.match(/\d+(px|em|%)/g)?+q.font.match(/\d+(px|em|%)/g)[0].match(/\d+/g):18,u=0,v=[],w=[],x={x:0,y:0},f(t),g(),o(),e()}function e(){if(q.sizeToFill){var a=b.trim().split(/\s+/).length,c=0;do f(++c),y=c,h();while(C>u&&v.join(" ").split(/\s+/).length==a);f(--c),y=c,h()}else h();q.justifyLines&&"auto"===q.lineBreak&&k(),n(),l()}function f(a){var b=q.sizeToFill?s.font.split(/\b\d+px\b/i):q.font.split(/\b\d+px\b/i);s.font=b[0]+a+"px"+b[1]}function g(){isNaN(q.lineHeight)?-1!==q.lineHeight.toString().indexOf("px")?y=parseInt(q.lineHeight):-1!==q.lineHeight.toString().indexOf("%")&&(y=parseInt(q.lineHeight)/100*t):y=t*q.lineHeight}function h(){if(q.allowNewLine)for(var a=b.trim().split("\n"),c=0,d=0;c<a.length-1;c++)d+=a[c].trim().split(/\s+/).length,w.push(d);var e=b.trim().split(/\s+/);i(e),j(e),u=v.length*y}function i(a){for(var b,c,d,e,f=0;f<a.length;f++)if(b="",c=s.measureText(a[f]).width,c>B){for(var g=0;s.measureText(b+a[f][g]).width<=B&&g<a[f].length;g++)b+=a[f][g];d=a[f].slice(0,g),e=a[f].slice(g),a.splice(f,1,d,e)}}function j(a){for(var b=0,c=0;b<a.length;c++)if(v[c]="","auto"===q.lineBreak){for(;s.measureText(v[c]+a[b]).width<=B&&b<a.length;)if(v[c]+=a[b]+" ",b++,q.allowNewLine)for(var d=0;d<w.length;d++)if(w[d]===b){c++,v[c]="";break}v[c]=v[c].trim()}else v[c]=a[b],b++}function k(){for(var a,b,c,d=0;d<v.length;d++)c=s.measureText(v[d]).width,(!a||c>a)&&(a=c,b=d);var e,f,g,h,i,j=" ";for(d=0;d<v.length;d++)if(d!==b&&(e=v[d].trim().split(/\s+/).length,!(1>=e))){v[d]=v[d].trim().split(/\s+/).join(j),f=s.measureText(j).width,g=(a-s.measureText(v[d]).width)/f,h=g/(e-1),i="";for(var k=0;h>k;k++)i+=j;v[d]=v[d].trim().split(j).join(i)}}function l(){for(var a=0;a<v.length;a++)m(v[a]),x.y=parseInt(x.y)+y,s.fillText(v[a],x.x,x.y),q.strokeText&&s.strokeText(v[a],x.x,x.y)}function m(a){"center"==q.textAlign?x.x=(z-s.measureText(a).width)/2:"right"==q.textAlign?x.x=z-s.measureText(a).width-q.paddingX:x.x=q.paddingX}function n(){"middle"==q.verticalAlign?x.y=(A-u)/2:"bottom"==q.verticalAlign?x.y=A-u-q.paddingY:x.y=q.paddingY}function o(){if(!(a instanceof HTMLCanvasElement))throw new TypeError("The first parameter must be an instance of HTMLCanvasElement.");if("string"!=typeof b)throw new TypeError("The second parameter must be a string.");if(isNaN(t))throw new TypeError('Cannot parse "font".');if(isNaN(y))throw new TypeError('Cannot parse "lineHeight".');if("left"!==q.textAlign.toLocaleLowerCase()&&"center"!==q.textAlign.toLocaleLowerCase()&&"right"!==q.textAlign.toLocaleLowerCase())throw new TypeError('Property "textAlign" must be set to either "left", "center", or "right".');if("top"!==q.verticalAlign.toLocaleLowerCase()&&"middle"!==q.verticalAlign.toLocaleLowerCase()&&"bottom"!==q.verticalAlign.toLocaleLowerCase())throw new TypeError('Property "verticalAlign" must be set to either "top", "middle", or "bottom".');if("boolean"!=typeof q.justifyLines)throw new TypeError('Property "justifyLines" must be set to a Boolean.');if(isNaN(q.paddingX))throw new TypeError('Property "paddingX" must be set to a Number.');if(isNaN(q.paddingY))throw new TypeError('Property "paddingY" must be set to a Number.');if("boolean"!=typeof q.fitParent)throw new TypeError('Property "fitParent" must be set to a Boolean.');if("auto"!==q.lineBreak.toLocaleLowerCase()&&"word"!==q.lineBreak.toLocaleLowerCase())throw new TypeError('Property "lineBreak" must be set to either "auto" or "word".');if("boolean"!=typeof q.sizeToFill)throw new TypeError('Property "sizeToFill" must be set to a Boolean.');if("boolean"!=typeof q.strokeText)throw new TypeError('Property "strokeText" must be set to a Boolean.')}var p={font:"18px Arial, sans-serif",sizeToFill:!1,lineHeight:1,allowNewLine:!0,lineBreak:"auto",textAlign:"left",verticalAlign:"top",justifyLines:!1,paddingX:0,paddingY:0,fitParent:!1,strokeText:!1},q={};for(var r in p)p.hasOwnProperty(r)&&(q[r]=c&&c[r]?c[r]:p[r]);var s=a.getContext("2d");s.font=q.font,s.textBaseline="bottom";var t,u,v,w,x,y,z=q.fitParent===!1?a.width:a.parentNode.clientWidth,A=q.fitParent===!1?a.height:a.parentNode.clientHeight,B=z-2*q.paddingX,C=A-2*q.paddingY;d()}"module"in a&&"exports"in module?module.exports=b:a.CanvasTextWrapper=b}(this);

README.md

@@ -1,7 +1,7 @@
 CanvasTextWrapper
 =================
 
-##Syntax
+## Syntax
 ```
 CanvasTextWrapper(HTMLCanvasElement, String [, options]);
 ```
@@ -23,7 +23,7 @@ CanvasTextWrapper(HTMLCanvasElement, String [, options]);
 
 NOTE: if a single word is too long to fit the width with specified font size, it will break on any letter unless ```sizeToFill``` option is enabled.
 
-##Defaults
+## Default options
 ``` 
    { 
         font: "18px Arial, sans-serif",
@@ -41,9 +41,12 @@ NOTE: if a single word is too long to fit the width with specified font size, it
     }
 ```
 
-##Usage
+## Usage
 Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using CanvasTextWrapper like so:
+
 ```
+var CanvasTextWrapper = require('canvas-text-wrapper').CanvasTextWrapper;
+
 var canvas = document.getElementById("#canvasText");
 canvas.width = 200;
 canvas.height = 200;
@@ -53,13 +56,15 @@ context.strokeStyle = "#ff0000";
 CanvasTextWrapper(canvas,"Hello");    //default options will apply
 ```
 
-##Examples
+## Test
-http://namniak.github.io/CanvasTextWrapper/
+In terminal go to CanvasTextWrapper folder and run ```npm t```
 
-##Installation
 
+## Examples
+[Demo](http://namniak.github.io/CanvasTextWrapper/)
+
+## Installation
 ```
 bower install canvas-text-wrapper
-
+npm i canvas-text-wrapper --save
-npm install canvas-text-wrapper
 ```

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-text-wrapper",
-  "version": "0.4.0",
+  "version": "0.4.4",
   "ignore": [
     "**/.*",
     "**/*.log",

example.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <script src="CanvasTextWrapper.js"></script>
-    <script >
-      var ctx = document.createElement('canvas').getContext('2d');
-      ctx.canvas.width = ctx.canvas.height = 200;
-      CanvasTextWrapper(ctx.canvas, "hello world how long can this be????");
-      document.addEventListener('DOMContentLoaded', function () {
-        document.body.appendChild(ctx.canvas);
-      });
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-

package.json

@@ -1,9 +1,10 @@
 {
   "name": "canvas-text-wrapper",
   "description": "Pure JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with alignment and padding.",
-  "version": "0.3.2",
+  "version": "0.4.4",
   "license": "MIT",
   "main": "CanvasTextWrapper.min.js",
+  "keywords": ["canvas", "canvas text", " text", "split"],
   "homepage": "http://namniak.github.io/CanvasTextWrapper/",
   "repository": {
     "type": "git",
@@ -13,6 +14,9 @@
   "bugs": {
     "url": "https://github.com/namniak/CanvasTextWrapper/issues"
   },
+  "scripts": {
+    "test": "beefy test/test.js --live --open"
+  },
   "devDependencies": {
     "grunt-contrib-uglify": "^0.9.1",
     "uglify-save-license": "^0.4.1"

test/test.js

@@ -0,0 +1,29 @@
+var CanvasTextWrapper = require('../CanvasTextWrapper').CanvasTextWrapper;
+
+var body = document.getElementsByTagName('body')[0];
+body.style.margin = 0;
+
+var canvas = document.createElement('canvas');
+canvas.width = 600;
+canvas.height = 600;
+canvas.style.position = 'absolute';
+canvas.style.left = '50%';
+canvas.style.top = '50%';
+canvas.style.transform = 'translateX(-50%) translateY(-50%)';
+
+body.appendChild(canvas);
+
+var ctx = canvas.getContext('2d');
+var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+gradient.addColorStop('0.2', 'magenta');
+gradient.addColorStop('0.5', 'blue');
+gradient.addColorStop('0.7', 'purple');
+ctx.fillStyle = gradient;
+
+var opts = {
+	sizeToFill: true,
+	textAlign: 'center',
+	verticalAlign: 'middle'
+};
+
+CanvasTextWrapper(canvas, 'What an awesome library!', opts);