0.4.0 release

Author: kyranet

.eslintrc.json

@@ -80,7 +80,7 @@
         "consistent-this": "error",
         "func-names": "error",
         "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
-        "id-length": ["error", { "exceptions": ["i", "j", "a", "b", "c", "d", "e", "f","x", "y", "$"] }],
+        "id-length": ["error", { "exceptions": ["i", "j", "a", "b", "c", "d", "e", "f","x", "y", "$", "n"] }],
         "indent": ["error", 4, { "SwitchCase": 1 }],
         "key-spacing": "error",
         "keyword-spacing": ["error", {

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.4.0
+### Added
+- `addMultilineText()` to print texts that are too long to be displayed.
+
 ## 0.3.1
 ### Added
 - Both `printLinearGradient()` and `printRadialGradient()` to have chainable methods.

METHODS.md

@@ -18,6 +18,7 @@
 | addText                     | `text`, `x`, `y`, `maxWidth`
 | addCircle                   | `x`, `y`, `radius`
 | addResponsiveText           | `text`, `x`, `y`, `maxWidth`, `options`
+| addMultilineText            | `text`, `x`, `y`, `maxWidth`, `lineHeight`
 | stroke                      | `path`
 | addStrokeRect               | `x`, `y`, `width`, `height`
 | addStrokeText               | `text`, `x`, `y`

README.md

@@ -13,6 +13,10 @@ Please check [node-canvas readme](https://github.com/Automattic/node-canvas/blob
 
 ---
 
+> **IMPORTANT** If you use `canvas` 2.0, you must install the 2.0 version of Canvas Constructor: `npm i kyranet/canvasConstructor`. Otherwise install the NPM version: `npm i canvas-constructor`.
+
+---
+
 How to use it:
 
 ```js

package.json

@@ -1,6 +1,6 @@
 {
     "name": "canvas-constructor",
-    "version": "0.3.1",
+    "version": "0.4.0",
     "description": "A ES6 class for node-canvas with built-in functions and chained methods.",
     "main": "index.js",
     "types": "typings/index.d.ts",
@@ -15,9 +15,9 @@
         "canvas": "github:Automattic/node-canvas"
     },
     "devDependencies": {
-        "eslint": "^4.7.2",
-        "tslint": "^5.7.0",
-        "typescript": "^2.5.2"
+        "eslint": "^4.13.1",
+        "tslint": "^5.8.0",
+        "typescript": "^2.6.2"
     },
     "keywords": [
         "node-canvas",

src/canvas.js

@@ -212,6 +212,40 @@ class CanvasConstructor {
             .addText(text, x, y);
     }
 
+    /**
+     * Add responsive text
+     * @param {string} text     The text to write.
+     * @param {number} x        The position x to start drawing the element.
+     * @param {number} y        The position y to start drawing the element.
+     * @param {number} maxWidth The max length in pixels for the text.
+     * @param {number} lineHeight The line's height.
+     * @returns {CanvasConstructor}
+     * @chainable
+     * @example
+     * new Canvas(400, 300)
+     *     .setTextFont('25px Tahoma')
+     *     .addMultilineText('This is a really long text!', 139, 360, 156, 28)
+     *     .toBuffer();
+     */
+    addMultilineText(text, x, y, maxWidth, lineHeight) {
+        const words = text.split(' ');
+        let line = '';
+
+        for (let n = 0; n < words.length; n++) {
+            const testLine = `${line + words[n]} `;
+            const metrics = this.measureText(testLine);
+            const testWidth = metrics.width;
+            if (testWidth > maxWidth && n > 0) {
+                this.addText(line, x, y);
+                line = `${words[n]} `;
+                y += lineHeight;
+            } else {
+                line = testLine;
+            }
+        }
+        return this.addText(line, x, y);
+    }
+
     /**
      * Strokes the current or given path with the current stroke style using the non-zero winding rule.
      * @param {any} path A Path2D path to stroke.
@@ -396,18 +430,21 @@ class CanvasConstructor {
      * @param {Object} options Options.
      * @param {number} options.radius The radius for the new image.
      * @param {'round'|'bevel'} options.type   The type for the new image.
+     * @param {boolean} options.restore Whether this method should restore the drawing state. Use this when you use options.type
      * @returns {CanvasConstructor}
      * @chainable
      */
     addImage(buffer, x, y, width, height, options = {}) {
+        if (options.restore) this.save();
         if (options.type) {
             if (isNaN(options.radius)) options.radius = 10;
             if (options.type === 'round') this.createRoundClip(x + options.radius, y + options.radius, options.radius);
-            if (options.type === 'bevel') this.createBeveledClip(x, y, width, height, options.radius);
+            else if (options.type === 'bevel') this.createBeveledClip(x, y, width, height, options.radius);
         }
         const image = new Canvas.Image();
         image.onload = () => this.context.drawImage(image, x, y, width, height);
         image.src = buffer;
+        if (options.restore) this.restore();
         return this;
     }
 

typings/index.d.ts

@@ -10,6 +10,7 @@ declare module 'canvas-constructor' {
         public changeCanvasWidth(width: number): this;
         public changeCanvasHeigth(heigth: number): this;
         public save(): this;
+        public restore(): this;
         public rotate(angle: number): this;
         public scale(x: number, y: number): this;
         public traslate(x: number, y: number): this;
@@ -20,6 +21,7 @@ declare module 'canvas-constructor' {
         public fill(path: any, fillRule?: fillRuleType): this;
         public addText(text: string, x: number, y: number, maxWidth?: number): this;
         public addResponsiveText(text: string, x: number, y: number, maxWidth: number): this;
+        public addMultilineText(text: string, x: number, y: number, maxWidth: number, lineHeight: number): this;
         public stroke(path?: any): this;
         public addStrokeRect(x: number, y: number, width: number, height: number): this;
         public addStrokeText(text: string, x: number, y: number): this;
@@ -80,32 +82,97 @@ declare module 'canvas-constructor' {
         public toBufferAsync(): Promise<Buffer>;
 
         public static getCanvas(): NodeCanvas;
-        public static registerFont(path: string, family: string);
-        public static registerFont(path: string, family: fontFaceType);
+        public static registerFont(path: string, family: string | fontFaceType);
 
     }
 
-    export type CanvasType = 'pdf'|'svg';
-    export type fillRuleType = 'nonzero'|'evenodd';
-    export type lineJoinValue = 'bevel'|'round'|'miter';
-    export type lineCapValue = 'butt'|'round'|'square';
+    export type CanvasType = 'pdf'
+        | 'svg';
+    export type fillRuleType = 'nonzero'
+        | 'evenodd';
+    export type lineCapValue = 'butt'
+        | 'round'
+        | 'square';
+    export type lineJoinValue = 'bevel'
+        | 'round'
+        | 'miter';
     export type addImageOptions = {
-        radius: number;
-        type: roundType;
+        radius?: number;
+        type?: roundType;
+        restore?: boolean;
     };
-    export type roundType = 'round'|'bevel';
-    export type textAlignType = 'left'|'center'|'right'|'start'|'end';
-    export type textBaselineType = 'top'|'hanging'|'middle'|'alphabetic'|'ideographic'|'bottom';
-    export type patternRepetition = 'repeat'|'repeat-x'|'repeat-y'|'no-repeat';
-    export type patternQuality = 'fast'|'good'|'best'|'nearest'|'bilinear';
-    export type textDrawingMode = 'path'|'glyph';
-    export type antialiasType = 'default'|'none'|'gray'|'subpixel';
-    export type globalCompositeOperation = 'source-over'|'source-in'|'source-out'|'source-atop'|'destination-over'|'destination-in'|'destination-out'|'destination-atop'|'lighter'|'copy'|'xor'|'darken'|'lighten'|'color-dodge'|'color-burn'|'difference'|'exclusion'|'hue'|'saturation'|'color'|'luminosity'|'multiply'|'screen'|'overlay'|'hard-light'|'soft-light'|'hsl-hue'|'hsl-saturation'|'hsl-color'|'hsl-luminosity';
+
+    export type antialiasType = 'default'
+        | 'none'
+        | 'gray'
+        | 'subpixel';
+
+    export type patternQuality = 'fast'
+        | 'good'
+        | 'best'
+        | 'nearest'
+        | 'bilinear';
+
+    export type patternRepetition = 'repeat'
+        | 'repeat-x'
+        | 'repeat-y'
+        | 'no-repeat';
+
+    export type roundType = 'round'
+        | 'bevel';
+
+    export type textAlignType = 'left'
+        | 'center'
+        | 'right'
+        | 'start'
+        | 'end';
+
+    export type textBaselineType = 'alphabetic'
+        | 'bottom'
+        | 'hanging'
+        | 'ideographic'
+        | 'middle'
+        | 'top';
+
+    export type textDrawingMode = 'path'
+        | 'glyph';
+
+    export type globalCompositeOperation = 'color-burn'
+        | 'color-dodge'
+        | 'color'
+        | 'copy'
+        | 'darken'
+        | 'destination-atop'
+        | 'destination-in'
+        | 'destination-out'
+        | 'destination-over'
+        | 'difference'
+        | 'exclusion'
+        | 'hard-light'
+        | 'hsl-color'
+        | 'hsl-hue'
+        | 'hsl-luminosity'
+        | 'hsl-saturation'
+        | 'hue'
+        | 'lighten'
+        | 'lighter'
+        | 'luminosity'
+        | 'multiply'
+        | 'overlay'
+        | 'saturation'
+        | 'screen'
+        | 'soft-light'
+        | 'source-atop'
+        | 'source-in'
+        | 'source-out'
+        | 'source-over'
+        | 'xor';
+
     export type fontFaceType = {
         family: string;
-        weight?: string;
         style?: string;
-    }
+        weight?: string;
+    };
 
     export type GradientStep = {
         position: number;