cherry-box - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

.github/workflows/node.js.yml

+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [17.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm run test

lib/paintText.js

@@ -8,4 +8,5 @@ /**
  * @param {string} font Font name of the text
+ * @param {number} spaceWidth Width of the space between words 
  */
-function paintText(ctx, text, x, y, fontSize) {
+function paintText(ctx, text, x, y, fontSize, spaceWidth=0) {
 
@@ -29,3 +30,3 @@ ctx.save();
         ctx.fillText(text, x, y);
-        x += ctx.measureText(text).width;
+        x += ctx.measureText(text).width + spaceWidth;
     });
@@ -32,0 +33,0 @@

lib/textBox.js

 import paintText from './paintText.js'; 
 
-function getTotalWidth(ctx, text, fontSize) {
+/**
+ * 
+ * @param {ctx} ctx Canvas context
+ * @param {object} text Text to be displayed in the text box
+ * @param {int} fontSize Maximum font size of the text
+ * @param {int} spaceWidth Width of the space between words 
+ * @returns {int} Width of the text
+ */
+function getTotalWidth(ctx, text, fontSize, spaceWidth=0) {
 
     let width = 0;
+
     text.forEach(({ text, font, modifier }) => {
         ctx.font = modifier + " " + fontSize + "px " + font;
-        width += ctx.measureText(text).width;
+        width += ctx.measureText(text).width + spaceWidth;
     });
 
-    return width;
+    return width - spaceWidth;
 }
 
+/**
+ * 
+ * @param {ctx} ctx Canvas context
+ * @param {object} text Text to be displayed in the text box
+ * @param {int} fontSize Maximum font size of the text
+ * @returns {int} Height of the text
+ */
 function getTotalHeight(ctx, text, fontSize) {
@@ -63,2 +79,77 @@
 
-export { textBox, getTotalWidth, getTotalHeight };
+/**
+ * 
+ * @param {ctx} ctx Canvas context
+ * @param {int} x X coordinate of the text box
+ * @param {int} y Y coordinate of the text box
+ * @param {int} width Width of the text box
+ * @param {object} text Text to be displayed in the text box
+ * @param {int} fontSize Maximum font size of the text
+ * @param {string} align Alignment of the text
+ */
+function wrapText(ctx, x, y, width, text, fontSize, align='left') {
+    
+    ctx.save();
+
+    let lines = [];
+    let line = [];
+    let spaceWidth = 10;
+
+    for (let i in text) {
+        
+        let splitText = text[i].text.split(' ');
+
+        let j = 0;
+        for (j in splitText) {
+
+            let textRich = {
+                color: text[i].color,
+                text: splitText[j],
+                font: text[i].font,
+                modifier: text[i].modifier,
+                shadow: text[i].shadow
+            };
+
+            
+            let lineWidth = getTotalWidth(ctx, line, fontSize, spaceWidth);
+            let textWidth = getTotalWidth(ctx, [textRich], fontSize, spaceWidth);
+
+            // TODO: Fix this
+            if (lineWidth + textWidth + 10 > width) {
+
+                lines.push(line);
+                line = [];
+
+            }
+
+            line.push(textRich);
+
+        }
+    }
+    
+    lines.push(line);
+    
+    
+    for (let i in lines) {
+        let textWidth = getTotalWidth(ctx, lines[i], fontSize, spaceWidth);
+
+        let x_ = x;
+        if (align === 'center') x_ += width / 2 - textWidth / 2;
+        if (align === 'right') x_ += width - textWidth;
+        if (align === 'left') x_ += 0;
+        if (align === 'justify') {
+            let rawTextWidth = getTotalWidth(ctx, lines[i], fontSize);
+            spaceWidth = (width - rawTextWidth) / (lines[i].length - 1);
+
+            if (spaceWidth < 4) spaceWidth = 4;
+            if (spaceWidth > 50) spaceWidth = 10;
+        }
+
+        paintText(ctx, lines[i], x_, y+fontSize*(i)+fontSize, fontSize, spaceWidth);
+    }
+
+    ctx.restore();
+
+}
+
+export { textBox, getTotalWidth, getTotalHeight, wrapText };

package.json

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

README.md

@@ -97,4 +97,31 @@ # About
 ```js
-const formattedUsername = textBox(240, 85, 300, 60, text, 90, ['middle', 'center']);
-ctx.drawImage(formattedUsername, 0, 0)
+textBox(ctx, 0, 0, canvas.width, canvas.height-20, upperText, 80, ["bottom", "center"]);
+```
+
+## wrapText
+
+wrapText is a function similar to textBox, but it doesn't just align the text. It also wraps the text to fit in the specified width.
+
+### wrapText Schema
+
+name | description | example | type | required
+--- | --- | --- | --- | ---
+ctx | Canvas context | | object | true
+x | X coordinate of the text box | 0 | number | true
+y | Y coordinate of the text box | 0 | number | true
+width | Width of the text box | 100 | number | true
+text | Text to be displayed | | textSchema | true
+fontSize | Font size of the text | 100 | number | true
+align | Align of the text | justify | string | true
+
+### Align values
+
+* `left`
+* `center`
+* `right`
+* `justify`
+
+Example use of `wrapText` in your code: 
+```js
+wrapText(ctx, 0, 0, canvas.width, wrapTextBox, 20, 'justify');
 ```

test.js

@@ -1,2 +0,2 @@
-import { textBox } from "./lib/textBox.js";
+import { textBox, wrapText } from "./lib/textBox.js";
 import Canvas from "canvas";
@@ -10,3 +10,3 @@ import fs from "fs";
     {
-        text: "This text is in the center of an image",
+        text: "POV: Linux user",
         color: "white",
@@ -22,4 +22,29 @@ modifier: "bold",
 ];
-textBox(ctx, 0, 0, canvas.width, canvas.height, upperText, 100, ["middle", "center"])
+textBox(ctx, 0, 0, canvas.width, canvas.height-20, upperText, 80, ["bottom", "center"]);
 
+let wrapTextBox = [
+    {
+        text: "I'd like to interject for a moment, what you reffered to as Linux was in fact, GNU/Linux, or as I've recently taken to calling it, GNU plus Linux. Linux is not an operating system unto itself, but rather another free component of a fully functioning GNU system made useful by the GNU corelibs, shell utilities and vital system components comprising a full OS as defined by POSIX. Many computer users run a modified version of the GNU system every day, without realizing it. Through a peculiar turn of events, the version of GNU which is widely used today is often called \"Linux\", and many of its users are not aware that it is basically the GNU system, developed by the GNU Project. The Free Software Foundation obviously intends Linux to be free software like any other free program, and whoever works for the Free Software Foundation will do whatever it takes to ensure that the GNU system remains free. Linux is the kernel: the program in the system that allocates the machine's resources to the other programs that you run. The kernel is an essential part of an operating system, but useless by itself; it can only function in the context of a complete operating system. Linux is normally used in combination with the GNU operating system: the whole system is basically GNU with Linux added, or GNU/Linux. All the so-called \"Linux\" distributions are really distributions of GNU/Linux.",
+        color: "yellow",
+        font: 'Arial',
+        modifier: "bold",
+        shadow: {
+            color: "red",
+            offset: [0, 0],
+            blur: 10
+        }
+    },
+    {
+        text: "E",
+        color: "blue",
+        font: "Ubuntu"
+    },
+    {
+        text: "Never Gonna Give You Up is the debut single recorded by English singer and songwriter Rick Astley, released on 27 July 1987.",
+        color: "green",
+        font: "Ubuntu"
+    }
+]
+wrapText(ctx, 0, 0, canvas.width, wrapTextBox, 20, 'justify');
+
 // Save canvas to file
@@ -26,0 +51,0 @@ let out = fs.createWriteStream("./out.png");

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Improved metrics

Total package byte prevSize

13822

79.86%

Number of package files

9

12.5%

Lines of code

190

102.13%

Number of lines in readme file

126

27.27%

Worsened metrics

Number of low supply chain risk alerts

2

100%

No dependency changes