cherry-box - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/paintText.js

@@ -10,12 +10,13 @@ class coloredText {
      */
-    constructor(ctx, text, x, y, font) {
+    constructor(ctx, text, x, y, fontSize) {
 
         ctx.save();
 
-        text.forEach(({ text, color, shadow }) => {
+        text.forEach(({ text, color, shadow, font, modifier }) => {
+
             ctx.fillStyle = color;
-            ctx.font = font;
+            ctx.font = `${modifier} ${fontSize}px ${font}`;
 
             if (shadow != undefined) {
-                let fontSize = parseInt(font.split(' ')[0]); 
+                let fontSize = parseInt(font.split(' ')[1]); 
 
@@ -22,0 +23,0 @@ ctx.shadowColor = shadow.color;

lib/textBox.js

 import paintText from './paintText.js'; 
 import Canvas from 'canvas';
 
-function getTotalWidth(ctx, text) {
+function getTotalWidth(ctx, text, fontSize) {
 
     let width = 0;
-    text.forEach(({ text }) => {
+    text.forEach(({ text, font, modifier }) => {
+        ctx.font = modifier + " " + fontSize + "px " + font;
         width += ctx.measureText(text).width;
@@ -14,7 +15,10 @@ });
 
-function getTotalHeight(ctx, text) {
+function getTotalHeight(ctx, text, fontSize) {
 
     let wordsTotal = "";
-    text.forEach(({ text }) => wordsTotal += text);
-
+    text.forEach(({ text, font }) => {
+        ctx.font = fontSize + "px " + font;
+        wordsTotal += text;
+    });
+    
     let metrics = ctx.measureText(wordsTotal);
@@ -31,6 +35,5 @@ return metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
  * @param {int} fontSize Maximum font size of the text
- * @param {string} fontName Font name of the text
  * @param {array} align Alignment of the text
  */
-function textBox (width, height, text, fontSize, fontName, align=['middle', 'center']) {
+function textBox (width, height, text, fontSize, align=['middle', 'center']) {
 
@@ -41,14 +44,8 @@ // Create a new canvas
     
-    // Set up the font
-    let font = fontSize + "px " + fontName;
-    ctx.font = font;
-    
     // Resize the textbox if the text is too long
-    let textWidth = getTotalWidth(ctx, text);
-    if (textWidth > width) fontSize *= width / textWidth;
-    ctx.font = fontSize + "px " + fontName;
-    font = ctx.font;
+    let textWidth = getTotalWidth(ctx, text, fontSize);
+    if (textWidth > width) fontSize *= width / textWidth;;
 
-    let textHeight = getTotalHeight(ctx, text);
-    textWidth = getTotalWidth(ctx, text);
+    let textHeight = getTotalHeight(ctx, text, fontSize);
+    textWidth = getTotalWidth(ctx, text, fontSize);
 
@@ -59,2 +56,3 @@ // Calculate the position of the text
     if (align[1] === 'right') x = width - textWidth;
+    if (align[1] === 'left') x = 0;
 
@@ -65,3 +63,3 @@ if (align[0] === 'top') y = textHeight
 
-    new paintText(ctx, text, x, y, font);
+    new paintText(ctx, text, x, y, fontSize);
 
@@ -68,0 +66,0 @@ return canvas

package.json

 {
   "name": "cherry-box",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A node-canvas package filled with utilities, manage text boxes easily and more",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -32,2 +32,4 @@ # About
 shadow | Shadow of the text | | shadow | false
+font | Font of the text | Arial | string | true
+modifier | Modifier of the text | bold | string | true
 
@@ -42,3 +44,5 @@ Example text schema:
             offset: [10, 10], blur: 5, color: "red"
-        }
+        },
+        font: "Arial",
+        modifier: "bold"
     }
@@ -45,0 +49,0 @@ ]

test.js

@@ -9,4 +9,4 @@ import { textBox } from './lib/textBox.js';
 let textSchema = [
-    { text: "Hello ", color: "red" },
-    { text: "World", color: "green",
+    { text: "Hello ", color: "red", font: "Arial", modifier: "bold" },
+    { text: "World", color: "green", font: "Arial", modifier: "italic",
         shadow: {
@@ -18,5 +18,5 @@ color: "black",
     },
-    { text: " !", color: "red" }
+    { text: " !", color: "red", font: "Arial", modifier: "bold" }
 ];
-let text = textBox(800, 600, textSchema, 200, "Arial");
+let text = textBox(800, 600, textSchema, 200, ["middle", "center"]);
 ctx.drawImage(text, 0, 0)
@@ -23,0 +23,0 @@

No alert changes

Improved metrics

Total package byte prevSize

7032

5.06%

Number of lines in readme file

88

4.76%

Worsened metrics

Lines of code

98

-1.01%

No dependency changes