Skip to content

Commit 8b4157e

Browse files
kyranetkyranet
authored
refactor: made many changes (#374)
- feat: added `registerFont` function - feat: added support for `fit` with SVG images - feat: added `skia-canvas` support - feat: added `filter` helper - feat: added `Canvas#setFilter` - feat: added `Canvas#resetFilters` - feat: added `exports` field in package - feat: marked package as side-effects free - feat: added `Angle` type - feat: added `Color` type - feat: added `Length` type - feat: added `Percentage` type - refactor: remove undocumented function usage from `node-canvas` - chore(deps): updated all dependencies - BREAKING CHANGE: refactor: removed peer dependencies - BREAKING CHANGE: refactor: renamed `Canvas#setAntialiasing` to `Canvas#setAntiAliasing` - BREAKING CHANGE: refactor: make `Canvas#setAntiAliasing` throw if `node-canvas` was not installed - BREAKING CHANGE: refactor: make `Canvas#setTextDrawingMode` throw if `node-canvas` was not installed - BREAKING CHANGE: refactor: make `Canvas#setPatternQuality` throw if `node-canvas` was not installed - BREAKING CHANGE: refactor: make `hex`'s return type stricter - BREAKING CHANGE: refactor: make `rgb`'s return type stricter - BREAKING CHANGE: refactor: make `rbga`'s return type stricter - BREAKING CHANGE: refactor: make `hsl`'s return type stricter - BREAKING CHANGE: refactor: make `hsla`'s return type stricter
1 parent 325b62d commit 8b4157e

File tree

15 files changed

+1825
-1082
lines changed

15 files changed

+1825
-1082
lines changed

‎.eslintrc‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
11
{
2-
"extends": [
3-
"@skyra",
4-
"prettier/@typescript-eslint",
5-
"plugin:prettier/recommended"
6-
],
7-
"rules": {
8-
"@typescript-eslint/indent": "off"
9-
}
2+
"extends": "@sapphire"
103
}

‎.github/husky/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
_

‎.github/husky/commit-msg‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
yarn commitlint --edit $1

‎.github/husky/pre-commit‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
yarn pretty-quick --staged && yarn lint-staged

‎.prettierrc‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎.vscode/settings.json‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,70 @@
66
"editor.detectIndentation": false,
77
"files.eol": "\n",
88
"deno.enable": false,
9-
"eslint.enable": true
9+
"eslint.enable": true,
10+
"editor.tokenColorCustomizations": {
11+
"[Monokai Night]": {
12+
"textMateRules": [
13+
{
14+
"name": "Storage type",
15+
"scope": "storage.type",
16+
"settings": {
17+
"fontStyle": "",
18+
"foreground": "#F92672"
19+
}
20+
},
21+
{
22+
"name": "Comment",
23+
"scope": "comment",
24+
"settings": {
25+
"foreground": "#3f3f3f"
26+
}
27+
},
28+
{
29+
"name": "Class name",
30+
"scope": "entity.name.type, entity.name.class",
31+
"settings": {
32+
"fontStyle": "",
33+
"foreground": "#66D9EF"
34+
}
35+
},
36+
{
37+
"name": "Inherited class",
38+
"scope": "entity.other.inherited-class",
39+
"settings": {
40+
"fontStyle": "",
41+
"foreground": "#A6E22E"
42+
}
43+
},
44+
{
45+
"name": "Function argument",
46+
"scope": "variable.parameter",
47+
"settings": {
48+
"fontStyle": "",
49+
"foreground": "#FD971F"
50+
}
51+
}
52+
]
53+
},
54+
"textMateRules": [
55+
{
56+
"scope": "googletest.failed",
57+
"settings": {
58+
"foreground": "#f00"
59+
}
60+
},
61+
{
62+
"scope": "googletest.passed",
63+
"settings": {
64+
"foreground": "#0f0"
65+
}
66+
},
67+
{
68+
"scope": "googletest.run",
69+
"settings": {
70+
"foreground": "#0f0"
71+
}
72+
}
73+
]
74+
}
1075
}

‎README.md‎

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# canvas-constructor
2+
23
[![Discord](https://discordapp.com/api/guilds/437335547711848458/embed.png)](https://discord.gg/taNgb9d)
34
[![npm](https://img.shields.io/npm/v/canvas-constructor.svg?maxAge=3600)](https://www.npmjs.com/package/canvas-constructor)
45
[![npm](https://img.shields.io/npm/dt/canvas-constructor.svg?maxAge=3600)](https://www.npmjs.com/package/canvas-constructor)
@@ -9,7 +10,12 @@ An ES6 chainable class for node-canvas with built-in utilities.
910

1011
## Installation
1112

12-
Please check [node-canvas readme](https://github.com/Automattic/node-canvas/blob/master/Readme.md#installation) for the installation. You **must** have Canvas installed and working before using this package.
13+
This module requires one of the following packages to be installed for Node.js:
14+
15+
- [`skia-canvas`](https://www.npmjs.com/package/skia-canvas)
16+
- [`canvas`](https://www.npmjs.com/package/canvas)
17+
18+
> **Note**: If you are building a website, no extra dependencies are required.
1319
1420
---
1521

@@ -21,63 +27,64 @@ How to use it:
2127
const { Canvas } = require('canvas-constructor');
2228

2329
new Canvas(300, 300)
24-
.setColor('#AEFD54')
25-
.printRectangle(5, 5, 290, 290)
26-
.setColor('#FFAE23')
27-
.setTextFont('28px Impact')
28-
.printText('Hello World!', 130, 150)
29-
.toBuffer();
30+
.setColor('#AEFD54')
31+
.printRectangle(5, 5, 290, 290)
32+
.setColor('#FFAE23')
33+
.setTextFont('28px Impact')
34+
.printText('Hello World!', 130, 150)
35+
.toBuffer();
3036
```
3137

3238
**Browser**:
3339

3440
```html
3541
<script type="text/javascript" src="canvas-constructor/dist/index.umd.js"></script>
3642
<script type="text/javascript">
37-
const canvasElement = document.getElementById('canvas');
38-
new CanvasConstructor.Canvas(canvasElement)
39-
.setColor('#AEFD54')
40-
.printRectangle(5, 5, 290, 290)
41-
.setColor('#FFAE23')
42-
.setTextFont('28px Impact')
43-
.printText('Hello World!', 130, 150);
43+
const canvasElement = document.getElementById('canvas');
44+
new CanvasConstructor.Canvas(canvasElement)
45+
.setColor('#AEFD54')
46+
.printRectangle(5, 5, 290, 290)
47+
.setColor('#FFAE23')
48+
.setTextFont('28px Impact')
49+
.printText('Hello World!', 130, 150);
4450
</script>
4551
```
4652

47-
- That will create a canvas with size of 300 pixels width, 300 pixels height.
48-
- Set the color to #AEFD54
49-
- Draw a rectangle with the previous color, covering all the pixels from (5, 5) to (290 + 5, 290 + 5)
50-
- Set the color to #FFAE23
51-
- Set the font size to 28 pixels with font Impact.
52-
- Write the text 'Hello World!' in the position (130, 150)
53-
- Return a buffer.
53+
- That will create a canvas with size of 300 pixels width, 300 pixels height.
54+
- Set the color to #AEFD54
55+
- Draw a rectangle with the previous color, covering all the pixels from (5, 5) to (290 + 5, 290 + 5)
56+
- Set the color to #FFAE23
57+
- Set the font size to 28 pixels with font Impact.
58+
- Write the text 'Hello World!' in the position (130, 150)
59+
- Return a buffer.
5460

5561
Now, let's suppose we want to add images, we'll use `Canvas.resolveImage`, which works in both Node.js and browser:
5662

5763
```js
5864
const { Canvas, resolveImage } = require('canvas-constructor');
5965

6066
async function createCanvas() {
61-
const image = await resolveImage('./images/kitten.png');
62-
63-
return new Canvas(300, 400)
64-
.printImage(image, 0, 0, 300, 400)
65-
.setColor('#FFAE23')
66-
.setTextFont('28px Impact')
67-
.setTextAlign('center')
68-
.printText('Kitten!', 150, 370)
69-
.toBufferAsync();
67+
const image = await resolveImage('./images/kitten.png');
68+
69+
return new Canvas(300, 400)
70+
.printImage(image, 0, 0, 300, 400)
71+
.setColor('#FFAE23')
72+
.setTextFont('28px Impact')
73+
.setTextAlign('center')
74+
.printText('Kitten!', 150, 370)
75+
.toBufferAsync();
7076
}
7177
```
7278

73-
- That will create a canvas with size of 300 pixels width, 400 pixels height.
74-
- Draw an image, given a Buffer (the image from the images folder).
75-
- Set the color to #FFAE23
76-
- Set the font size to 28 pixels with font Impact.
77-
- Set the text alignment to center.
78-
- Write the text 'Kitten!' in the position (150, 370)
79-
- Return a buffer.
79+
- That will create a canvas with size of 300 pixels width, 400 pixels height.
80+
- Draw an image, given a Buffer (the image from the images folder).
81+
- Set the color to #FFAE23
82+
- Set the font size to 28 pixels with font Impact.
83+
- Set the text alignment to center.
84+
- Write the text 'Kitten!' in the position (150, 370)
85+
- Return a buffer.
8086

8187
And now, you have created an image with a kitten in the background and some centered text in the bottom of it.
8288

83-
If you experience issues with **Canvas** or want to install it, please refer to the [canvas](https://www.npmjs.com/package/canvas) repository, if you feel you found an issue in this package, feel free to file an issue [here](https://github.com/kyranet/canvas-constructor/issues), or make a [Pull Request](https://help.github.com/articles/about-pull-requests/) if you have the fix.
89+
If you experience issues with `skia-canvas` or `canvas`, please refer to their respective package repositories, this
90+
package is just a convenient wrapper for the two.

‎package.json‎

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,15 @@
33
"version": "4.1.0",
44
"description": "A ES6 class for node-canvas with built-in functions and chained methods.",
55
"main": "dist/index.js",
6-
"module": "dist/index.es.js",
6+
"module": "dist/index.mjs",
77
"browser": "dist/index.umd.js",
88
"unpkg": "dist/index.umd.js",
99
"types": "dist/index.d.ts",
10+
"exports": {
11+
"import": "./dist/index.mjs",
12+
"require": "./dist/index.js"
13+
},
14+
"sideEffects": false,
1015
"scripts": {
1116
"prepublishOnly": "yarn build",
1217
"lint": "eslint src --ext ts --fix",
@@ -18,7 +23,8 @@
1823
"watch": "yarn build -w",
1924
"sversion": "standard-version",
2025
"commit": "git-cz",
21-
"cz": "git-cz"
26+
"cz": "git-cz",
27+
"prepare": "husky install .github/husky"
2228
},
2329
"files": [
2430
"dist"
@@ -27,31 +33,33 @@
2733
"type": "git",
2834
"url": "git+https://github.com/kyranet/canvas-constructor.git"
2935
},
30-
"peerDependencies": {
31-
"canvas": "*"
32-
},
3336
"devDependencies": {
34-
"@commitlint/cli": "^9.1.1",
35-
"@commitlint/config-conventional": "^9.1.1",
36-
"@skyra/eslint-config": "^5.3.0",
37-
"@typescript-eslint/eslint-plugin": "^3.8.0",
38-
"@typescript-eslint/parser": "^3.8.0",
39-
"canvas": "^2.6.1",
40-
"cz-conventional-changelog": "^3.2.0",
41-
"eslint": "^7.6.0",
42-
"eslint-config-prettier": "^6.11.0",
43-
"eslint-plugin-prettier": "^3.1.4",
44-
"husky": "^4.2.5",
45-
"lint-staged": "^10.2.11",
46-
"prettier": "^2.0.5",
47-
"rollup": "^2.23.1",
37+
"@commitlint/cli": "^12.1.4",
38+
"@commitlint/config-conventional": "^12.1.4",
39+
"@sapphire/eslint-config": "^3.1.3",
40+
"@sapphire/prettier-config": "1.1.2",
41+
"@sapphire/ts-config": "2.2.2",
42+
"@types/skia-canvas": "^0.9.0",
43+
"@typescript-eslint/eslint-plugin": "^4.24.0",
44+
"@typescript-eslint/parser": "^4.24.0",
45+
"canvas": "^2.8.0",
46+
"cz-conventional-changelog": "^3.3.0",
47+
"eslint": "^7.27.0",
48+
"eslint-config-prettier": "^8.3.0",
49+
"eslint-plugin-prettier": "^3.4.0",
50+
"husky": "^6.0.0",
51+
"lint-staged": "^11.0.0",
52+
"prettier": "^2.3.0",
53+
"pretty-quick": "^3.1.0",
54+
"rollup": "^2.49.0",
4855
"rollup-plugin-cleaner": "^1.0.0",
49-
"rollup-plugin-terser": "^6.1.0",
50-
"rollup-plugin-typescript2": "^0.27.2",
51-
"standard-version": "^8.0.2",
52-
"ts-node": "^8.10.2",
53-
"typedoc": "^0.17.8",
54-
"typescript": "^3.9.7"
56+
"rollup-plugin-terser": "^7.0.2",
57+
"rollup-plugin-typescript2": "^0.30.0",
58+
"skia-canvas": "^0.9.21",
59+
"standard-version": "^9.3.0",
60+
"ts-node": "^9.1.1",
61+
"typedoc": "^0.20.36",
62+
"typescript": "^4.2.4"
5563
},
5664
"keywords": [
5765
"canvas",
@@ -62,6 +70,7 @@
6270
"pdf",
6371
"svg",
6472
"node-canvas",
73+
"skia-canvas",
6574
"constructor",
6675
"chainable",
6776
"browser",
@@ -73,7 +82,7 @@
7382
"umd"
7483
],
7584
"contributors": [
76-
"kyranet <[email protected]>",
85+
"Antonio Román <[email protected]>",
7786
"yorkaargh"
7887
],
7988
"author": "kyranet",
@@ -85,22 +94,13 @@
8594
"node": ">=8.6.0"
8695
},
8796
"homepage": "https://github.com/kyranet/canvas-constructor#readme",
88-
"husky": {
89-
"hooks": {
90-
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
91-
"pre-commit": "yarn lint-staged"
92-
}
93-
},
9497
"commitlint": {
9598
"extends": [
9699
"@commitlint/config-conventional"
97100
]
98101
},
99102
"lint-staged": {
100-
"*.ts": [
101-
"prettier --write",
102-
"eslint --fix --ext ts"
103-
]
103+
"*.{mjs,js,ts}": "eslint --fix --ext mjs,js,ts"
104104
},
105105
"config": {
106106
"commitizen": {
@@ -111,8 +111,9 @@
111111
"access": "public"
112112
},
113113
"resolutions": {
114-
"acorn": "^7.3.1",
115-
"minimist": "^1.2.2",
114+
"acorn": "^8.2.4",
115+
"minimist": "^1.2.5",
116116
"kind-of": "^6.0.3"
117-
}
117+
},
118+
"prettier": "@sapphire/prettier-config"
118119
}

‎rollup.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default {
1313
sourcemap: true
1414
},
1515
{
16-
file: './dist/index.es.mjs',
16+
file: './dist/index.mjs',
1717
format: 'es',
1818
exports: 'named',
1919
sourcemap: true
@@ -38,5 +38,5 @@ export default {
3838
output: { comments: false }
3939
})
4040
],
41-
external: ['canvas']
41+
external: ['canvas', 'skia-canvas']
4242
};

0 commit comments

Comments
 (0)