cherry-box - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

test.js

+import { textBox } from './lib/textBox.js';
+import Canvas from "canvas";
+import fs from "fs";
+
+let canvas = new Canvas.createCanvas(800, 600);
+let ctx = canvas.getContext("2d");
+
+let textSchema = [
+    { text: "Hello ", color: "red" },
+    { text: "World", color: "green",
+        shadow: {
+            color: "black",
+            offset: [10, 10],
+            blur: 10
+        }
+    },
+    { text: " !", color: "red" }
+];
+let text = textBox(800, 600, textSchema, 200, "Arial");
+ctx.drawImage(text, 0, 0)
+
+// Save canvas to file
+let out = fs.createWriteStream("./out.png");
+let stream = canvas.createPNGStream();
+stream.pipe(out);

index.js

@@ -1,3 +0,2 @@
-import textBox from './lib/textBox.js';
-
-export default textBox;
+import { textBox } from './lib/textBox.js';
+export { textBox };

lib/paintText.js

@@ -18,9 +18,11 @@ class coloredText {
 
-            if (shadow) {
+            if (shadow != undefined) {
                 let fontSize = parseInt(font.split(' ')[0]); 
 
                 ctx.shadowColor = shadow.color;
-                ctx.shadowOffsetX = shadow.x * fontSize / 100;
-                ctx.shadowOffsetY = shadow.y * fontSize / 100;
+                ctx.shadowOffsetX = shadow.offset[0] * fontSize / 100;
+                ctx.shadowOffsetY = shadow.offset[1] * fontSize / 100;
                 ctx.shadowBlur = shadow.blur;
+            } else {
+                ctx.shadowColor = 'transparent';
             }
@@ -27,0 +29,0 @@

lib/textBox.js

@@ -24,46 +24,45 @@ import paintText from './paintText.js';
 
-class textBox {
-    /**
-     * 
-     * @param {int} width Width of the text box
-     * @param {int} height Height 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} fontName Font name of the text
-     * @param {array} align Alignment of the text
-     */
-    constructor(width, height, text, fontSize, fontName, align=['middle', 'center']) {
+/**
+ * 
+ * @param {int} width Width of the text box
+ * @param {int} height Height 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} fontName Font name of the text
+ * @param {array} align Alignment of the text
+ */
+function textBox (width, height, text, fontSize, fontName, align=['middle', 'center']) {
 
-        // Create a new canvas
-        let canvas = new Canvas.createCanvas(width, height);
-        let ctx = canvas.getContext('2d');
-        
-        // 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;
+    // Create a new canvas
+    let canvas = new Canvas.createCanvas(width, height);
+    let ctx = canvas.getContext('2d');
+    
+    // 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 textHeight = getTotalHeight(ctx, text);
-        textWidth = getTotalWidth(ctx, text);
+    let textHeight = getTotalHeight(ctx, text);
+    textWidth = getTotalWidth(ctx, text);
 
-        // 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;
+    // 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[0] === 'top') y = textHeight
-        if (align[0] === 'bottom') y = height;
-        if (align[0] === 'middle') y = (textHeight + height) / 2;
-    
-        new paintText(ctx, text, x, y, font);
+    if (align[0] === 'top') y = textHeight
+    if (align[0] === 'bottom') y = height;
+    if (align[0] === 'middle') y = (textHeight + height) / 2;
 
-        return canvas
-    }
+    new paintText(ctx, text, x, y, font);
+
+    return canvas
+
 }
 
-export default textBox;
+export { textBox };

package.json

 {
   "name": "cherry-box",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A node-canvas package filled with utilities, manage text boxes easily and more",
@@ -18,3 +18,7 @@ "main": "index.js",
     "canvas": "^2.9.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CheryX/cherry-box.git"
   }
 }

README.md

@@ -1,2 +0,84 @@
-# cherry-box
- A node-canvas package filled with utilities, manage text boxes easily and more
+# About
+
+cherry-box is a [Node.js](https://nodejs.org/en/about/) package filled with utilities, which are useful for working with [node-canvas](https://github.com/Automattic/node-canvas).
+
+# Example usage
+
+```js
+import { textBox } from "cherry-box";
+import Canvas from "canvas";
+
+let canvas = new Canvas.createCanvas(800, 600);
+let ctx = canvas.getContext("2d");
+
+let text = textBox(800, 600, [{text: "hello world", color: "red"}], 200, "Arial");
+ctx.drawImage(text, 0, 0)
+```
+
+# Documentation
+
+## Popular functions
+
+* [textBox](#textBox) - Align the text to specified width and height, adjust the size of the font so it fits.
+* [textSchema](#textSchema) - An easy way to specify text color, font, shadow and more into a JSON object.
+## textSchema
+Text schema is made of multiple objects. These objects accepts the following values:
+
+name | description | example | type | required
+--- | --- | --- | --- | ---
+text | Text to be displayed | Hello world | string | true
+color | Color of the text | #FFFFFF | string | true
+shadow | Shadow of the text | | shadow | false
+
+Example text schema:
+```js
+[
+    {
+        text: "I like cookies!",
+        color: "#ff8800",
+        shadow: {
+            offset: [10, 10], blur: 5, color: "red"
+        }
+    }
+]
+```
+
+### Shadow schema
+Shadow is a JSON object with the following values:
+
+> `x` and `y` offsets are relative to the text size. For example use `x: 10, y: 10` for minecraft font.
+
+name | description | example | type | required
+--- | --- | --- | --- | ---
+color | Color of the shadow | #FFFFFF | string | true
+blur | Blur of the shadow | 5 | number | true
+offset | X and Y offset of the shadow | [10, 5] | array | true
+
+## textBox
+
+textBox is an easy way to align your text, decrease font size to fit in an area and more.
+### textBox Schema
+
+name | description | example | type | required
+--- | --- | --- | --- | ---
+x | X position of the textbox | 0 | number | true
+y | Y position of the textbox | 0 | number | true
+width | Width of the textbox | 100 | number | true
+height | Height of the textbox | 100 | number | true
+text | Text to be displayed | | textSchema | true
+maxFont | Max font size of the text | 100 | number | true
+fontName | Font of the text | Arial | string | true
+align | Align of the text |  | array | true
+
+### Align values
+
+1. Horizontal: `left`, `center` or `right`
+2. Vertical: `top`, `middle` or `bottom`
+
+Example: `['top', 'middle']`
+
+Example use of textBox in your code: 
+```js
+const formattedUsername = textBox(240, 85, 300, 60, text, 90, 'Arial', ['left', 'middle'])
+ctx.drawImage(formattedUsername, 0, 0)
+```

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Improved metrics

Total package byte prevSize

6693

89.23%

Number of package files

7

16.67%

Lines of code

99

26.92%

Number of lines in readme file

84

2700%

No dependency changes