cherry-box - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

lib/paintText.js

@@ -20,4 +20,2 @@ class coloredText {
             if (shadow != undefined) {
-                let fontSize = parseInt(font.split(' ')[1]); 
-
                 ctx.shadowColor = shadow.color;
@@ -28,3 +26,3 @@ ctx.shadowOffsetX = shadow.offset[0] * fontSize / 100;
             } else {
-                ctx.shadowColor = 'transparent';
+                ctx.shadowColor = "transparent";
             }
@@ -31,0 +29,0 @@

lib/textBox.js

@@ -30,2 +30,5 @@ import paintText from './paintText.js';
  * 
+ * @param {ctx} ctx Canvas context
+ * @param {x} x X coordinate of the text box
+ * @param {y} y Y coordinate of the text box
  * @param {int} width Width of the text box
@@ -37,7 +40,5 @@ * @param {int} height Height of the text box
  */
-function textBox (width, height, text, fontSize, align=['middle', 'center']) {
+function textBox (ctx, x, y, width, height, text, fontSize, align=['middle', 'center']) {
 
-    // Create a new canvas
-    let canvas = new Canvas.createCanvas(width, height);
-    let ctx = canvas.getContext('2d');
+    ctx.save();
     
@@ -52,17 +53,16 @@ // Resize the textbox if the text is too long
     // Calculate the position of the text
-    let x, y;
-    if (align[1] === 'center') x = width / 2 - textWidth / 2;
-    if (align[1] === 'right') x = width - textWidth;
-    if (align[1] === 'left') x = 0;
+    if (align[0] === 'top') y += textHeight
+    if (align[0] === 'bottom') y += height;
+    if (align[0] === 'middle') y += (textHeight + height) / 2;
 
-    if (align[0] === 'top') y = textHeight
-    if (align[0] === 'bottom') y = height;
-    if (align[0] === 'middle') y = (textHeight + height) / 2;
+    if (align[1] === 'center') x += width / 2 - textWidth / 2;
+    if (align[1] === 'right') x += width - textWidth;
+    if (align[1] === 'left') x += 0;
 
     new paintText(ctx, text, x, y, fontSize);
 
-    return canvas
+    ctx.restore()
 
 }
 
-export { textBox };
+export { textBox, getTotalWidth, getTotalHeight };

package.json

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

README.md

@@ -14,3 +14,14 @@ # About
 
-let text = textBox(800, 600, [{text: "hello world", color: "red"}], 200, "Arial");
+let textSchema = [
+    {
+        text: "I like cookies!",
+        color: "#ff8800",
+        font: "Arial",
+        modifier: "bold",
+        shadow: {
+            offset: [10, 10], blur: 5, color: "red"
+        },
+    }
+]
+let text = textBox(800, 600, textSchema, 200, ['middle', 'center']);
 ctx.drawImage(text, 0, 0)
@@ -87,4 +98,4 @@ ```
 ```js
-const formattedUsername = textBox(240, 85, 300, 60, text, 90, 'Arial', ['left', 'middle'])
+const formattedUsername = textBox(240, 85, 300, 60, text, 90, ['middle', 'center']);
 ctx.drawImage(formattedUsername, 0, 0)
 ```

test.js

@@ -1,2 +0,2 @@
-import { textBox } from './lib/textBox.js';
+import { textBox } from "./lib/textBox.js";
 import Canvas from "canvas";
@@ -8,15 +8,16 @@ import fs from "fs";
 
-let textSchema = [
-    { text: "Hello ", color: "red", font: "Arial", modifier: "bold" },
-    { text: "World", color: "green", font: "Arial", modifier: "italic",
+let upperText = [
+    {
+        text: "test",
+        color: "white",
+        font: "Impact",
+        modifier: "bold",
         shadow: {
             color: "black",
-            offset: [10, 10],
+            offset: [0, 0],
             blur: 10
         }
-    },
-    { text: " !", color: "red", font: "Arial", modifier: "bold" }
+    }
 ];
-let text = textBox(800, 600, textSchema, 200, ["middle", "center"]);
-ctx.drawImage(text, 0, 0)
+textBox(ctx, 5, 10, canvas.width-10, 100, upperText, 200, ["top", "center"]);
 
@@ -23,0 +24,0 @@ // Save canvas to file

No alert changes

Improved metrics

Total package byte prevSize

7096

0.91%

Lines of code

99

1.02%

Number of lines in readme file

99

12.5%

No dependency changes