skia-canvas 0.9.29 → 0.9.30

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 <!-- ## 🥚 ⟩ [Unreleased] -->
 
+## 📦 ⟩ [v0.9.30] ⟩ Jun 7, 2022
+
+### New Features
+- Enhacements to the shared **FontLibrary** object:
+  - Added a [`reset()`][FontLibrary.reset] method to FontLibrary which uninstalls any fonts that had been dynamically installed via `FontLibrary.use()`
+  - The [`use()`][FontLibrary.use] method now checks for previously installed fonts with the same family name (or alias) and will replace them with the newly added font
+- Added pre-compiled binaries for Alpine Linux on arm64
+
+### Bugfixes
+- Calling `clip` with an empty path (or one that does not intersect the current clipping mask) will now prevent drawing altogether
+- Transformation (`translate`, `rotate`, etc.) and line-drawing methods (`moveTo`, `lineTo`, `ellipse`, etc.) are now silently ignored if called with `NaN`, `Infinity`, or non-**Number** values in the arguments rather than throwing an error
+  - applies to both the Context and Path2D versions of the drawing methods
+  - a **TypeError** is thrown only if the number of arguments is too low (mirroring browser behavior)
+- [`conicCurveTo()`][conicCurveTo] now correctly reflects the canvas's transform state
+- The browser-based version of [`loadImage()`][loadImage] now returns a **Promise** that correctly resolves to an **Image** object
+- SVG exports no longer have an invisible, canvas-sized `<rect/>` as their first element
+- Fixed an incompatibility on Alpine between the version of libstdc++ present on the `node:alpine` docker images and the version used when building the precompiled binaries
+
+### Misc. Improvements
+- Upgraded Skia to milestone 101
+
+[conicCurveTo]: https://github.com/samizdatco/skia-canvas#coniccurvetocpx-cpy-x-y-weight
+[FontLibrary.reset]: https://github.com/samizdatco/skia-canvas#reset
+[FontLibrary.use]: https://github.com/samizdatco/skia-canvas#usefamilyname-fontpaths
+[loadImage]: https://github.com/samizdatco/skia-canvas/#loadimage
+
 ## 📦 ⟩ [v0.9.29] ⟩ Feb 7, 2022
 
 ### New Features
@@ -202,7 +228,8 @@
 
 **Initial public release** 🎉
 
-[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v0.9.29...HEAD
+[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v0.9.30...HEAD
+[v0.9.30]: https://github.com/samizdatco/skia-canvas/compare/v0.9.29...v0.9.30
 [v0.9.29]: https://github.com/samizdatco/skia-canvas/compare/v0.9.28...v0.9.29
 [v0.9.28]: https://github.com/samizdatco/skia-canvas/compare/v0.9.27...v0.9.28
 [v0.9.27]: https://github.com/samizdatco/skia-canvas/compare/v0.9.26...v0.9.27

package/README.md

@@ -9,7 +9,7 @@ In particular, Skia Canvas:
   - is fast and compact since all the heavy lifting is done by native code written in Rust and C++
   - can generate output in both raster (JPEG & PNG) and vector (PDF & SVG) image formats
   - can save images to [files][saveAs], return them as [Buffers][toBuffer], or encode [dataURL][toDataURL_ext] strings
-  - uses native threads and [channels](https://docs.rs/neon/0.9.0/neon/event/struct.Channel.html) for asynchronous rendering and file I/O
+  - uses native threads and the Node [worker pool](https://github.com/neon-bindings/rfcs/pull/35) for asynchronous rendering and file I/O
   - can create [multiple ‘pages’][newPage] on a given canvas and then [output][saveAs] them as a single, multi-page PDF or an image-sequence saved to multiple files
   - can [simplify][p2d_simplify], [blunt][p2d_round], [combine][bool-ops], [excerpt][p2d_trim], and [atomize][p2d_points] bézier paths using [efficient](https://www.youtube.com/watch?v=OmfliNQsk88) boolean operations or point-by-point [interpolation][p2d_interpolate]
   - can apply [3D perspective][createProjection()] transformations in addition to [scaling][scale()], [rotation][rotate()], and [translation][translate()]
@@ -52,9 +52,9 @@ Nearly everything you need is statically linked into the library. A notable exce
 
 ### Running in Docker
 
-The library is compatible with Linux systems using [glibc](https://www.gnu.org/software/libc/) 2.24 or later as well as Alpine Linux (x64) and the [musl](https://musl.libc.org) C library it favors. In both cases, Fontconfig must be installed on the system for `skia-canvas` to operate correctly.
+The library is compatible with Linux systems using [glibc](https://www.gnu.org/software/libc/) 2.24 or later as well as Alpine Linux (x64 & arm64) and the [musl](https://musl.libc.org) C library it favors. In both cases, Fontconfig must be installed on the system for `skia-canvas` to operate correctly.
 
-If you are setting up a [Dockerfile](https://nodejs.org/en/docs/guides/nodejs-docker-webapp/) that uses [`node`](https://hub.docker.com/_/node) as its basis, the simplest approach is to set your `FROM` image to one of the (Debian-derived) defaults like `node:16`, `node:14`, `node:12`, `node:buster`, `node:stretch`, or simply:
+If you are setting up a [Dockerfile](https://nodejs.org/en/docs/guides/nodejs-docker-webapp/) that uses [`node`](https://hub.docker.com/_/node) as its basis, the simplest approach is to set your `FROM` image to one of the (Debian-derived) defaults like `node:16`, `node:14`, `node:12`, `node:bullseye`, `node:buster`, or simply:
 ```dockerfile
 FROM node
 ```
@@ -398,11 +398,11 @@ The geometry of the quadrilateral should be described as an Array of either 8 or
 [left, top, right, bottom] // four edges of a rectangle
 
 // internal arrays for grouping are also allowed
-[[x1, y1], [x2, y2], [x3, y3], [x4, y4]] 
+[[x1, y1], [x2, y2], [x3, y3], [x4, y4]]
 ```
 
 ##### `basis`
-   
+
 The optional `basis` argument defines the **source** quadrilateral whose corners will be mapped to the positions defined by `quad`. If no `basis` is specified, the canvas's bounding box will be used (i.e., the rectangle from ⟨`0`, `0`⟩ to ⟨`canvas.width`, `canvas.height`⟩). Note that drawing commands that go outside of the `basis` region may well be visible—it only establishes the geometry of the projection, not the [clipping][clip()] path.
 
 The `basis` polygon can be described using 2, 4, or 8 numbers, using the canvas dimensions to fill in the unspecified coordinates:
@@ -414,7 +414,7 @@ The `basis` polygon can be described using 2, 4, or 8 numbers, using the canvas
 
 ----
 
-The projection matrix will apply to all types of drawing: shapes, images, and text. This example transforms a white box and red `"@"` character into a trapezoid bounded by the vertical midline of the canvas and its left and right edges. Since no `basis` argument is provided, it will default to using the current canvas bounds as the rectangle to be mapped onto that trapezoid. 
+The projection matrix will apply to all types of drawing: shapes, images, and text. This example transforms a white box and red `"@"` character into a trapezoid bounded by the vertical midline of the canvas and its left and right edges. Since no `basis` argument is provided, it will default to using the current canvas bounds as the rectangle to be mapped onto that trapezoid.
 
 ```js
 let canvas = new Canvas(512, 512),
@@ -788,6 +788,13 @@ img.onload = function(){
 img.src = 'https://example.com/icon.png'
 ```
 
+```js
+let img = new Image()
+img.src = 'https://example.com/icon.png'
+await img.decode()
+ctx.drawImage(img, 100, 100)
+```
+
 ```js
 let img = await loadImage('https://example.com/icon.png')
 ctx.drawImage(img, 100, 100)
@@ -821,6 +828,10 @@ Asking for details about an unknown family will return `undefined`.
 
 Returns `true` if the family is installed on the system or has been added via `FontLibrary.use()`.
 
+##### `reset()`
+
+Uninstalls any dynamically loaded fonts that had been added via `FontLibrary.use()`.
+
 ##### `use(familyName, [...fontPaths])`
 
 The `FontLibrary.use()` method allows you to dynamically load local font files and use them with your canvases. By default it will use whatever family name is in the font metadata, but this can be overridden by an alias you provide. Since font-wrangling can be messy, `use` can be called in a number of different ways:
@@ -844,6 +855,8 @@ FontLibrary.use("Grizwald", [
 
 ###### with a list of ‘glob’ patterns
 
+> Note to Windows users: Due to recent changes to the [glob][glob] module, you must write paths using unix-style forward slashes. Backslashes are now used solely for escaping wildcard characters.
+
 ```js
 // with default family name
 FontLibrary.use(['fonts/Crimson_Pro/*.ttf'])
@@ -990,4 +1003,6 @@ Many thanks to the [`node-canvas`](https://github.com/Automattic/node-canvas) de
 [translate()]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate
 
 [nonzero]: https://en.wikipedia.org/wiki/Nonzero-rule
-[evenodd]: https://en.wikipedia.org/wiki/Even–odd_rule
+[evenodd]: https://en.wikipedia.org/wiki/Even–odd_rule
+
+[glob]: https://github.com/isaacs/node-glob/blob/main/changelog.md#80

package/lib/browser.js

@@ -9,9 +9,10 @@ const {asBuffer, asDownload, asZipDownload, atScale, options} = require('./io')
 
 const _toURL_ = Symbol.for("toDataURL")
 
-const loadImage = src => new Promise((onload, onerror) =>
-  Object.assign(new Image(), {crossOrigin:'Anonymous', onload, onerror, src})
-)
+const loadImage = src => {
+  let img = Object.assign(new Image(), {crossOrigin:'Anonymous', src})
+  return img.decode().then(() => img)
+}
 
 class Canvas{
   constructor(width, height){

package/lib/index.d.ts

@@ -229,6 +229,8 @@ export interface FontLibrary {
   use(
     families: Record<string, readonly string[] | string>
   ): Record<string, Font[] | Font>
+
+  reset(): void
 }
 
 export const FontLibrary: FontLibrary

package/lib/index.js

@@ -51,7 +51,12 @@ class RustClass{
   }
 
   ƒ(fn, ...args){
-    return this.native[fn](this[ø], ...args)
+    try{
+      return this.native[fn](this[ø], ...args)
+    }catch(error){
+      Error.captureStackTrace(error, this.ƒ)
+      throw error
+    }
   }
 }
 
@@ -158,10 +163,8 @@ class Canvas extends RustClass{
 
     opts = typeof opts=='number' ? {quality:opts} : opts
     let {format, quality, pages, padding, pattern, density, outline, matte} = io.options(this.pages, {filename, ...opts}),
-        args = [pages.map(core), pattern, padding, format, quality, density, outline, matte],
-        worker = new EventEmitter();
-    this.ƒ("save", (result, msg) => worker.emit(result, msg), ...args)
-    return new Promise((res, rej) => worker.once('ok', res).once('err', msg => rej(new Error(msg))) )
+        args = [pages.map(core), pattern, padding, format, quality, density, outline, matte]
+    return this.ƒ("save", ...args)
   }
 
   saveAsSync(filename, opts={}){
@@ -175,10 +178,8 @@ class Canvas extends RustClass{
 
     opts = typeof opts=='number' ? {quality:opts} : opts
     let {format, quality, pages, density, outline, matte} = io.options(this.pages, {extension, ...opts}),
-        args = [pages.map(core), format, quality, density, outline, matte],
-        worker = new EventEmitter();
-    this.ƒ("toBuffer", (result, msg) => worker.emit(result, msg), ...args)
-    return new Promise((res, rej) => worker.once('ok', res).once('err', msg => rej(new Error(msg))) )
+        args = [pages.map(core), format, quality, density, outline, matte];
+    return this.ƒ("toBuffer", ...args)
   }
 
   toBufferSync(extension="png", opts={}){
@@ -292,10 +293,10 @@ class CanvasRenderingContext2D extends RustClass{
     this.currentTransform = arguments.length > 1 ? [...arguments] : matrix
   }
 
-  transform(...terms){ this.ƒ('transform', ...terms)}
-  translate(x, y){ this.ƒ('translate', x, y)}
-  scale(x, y){ this.ƒ('scale', x, y)}
-  rotate(angle){ this.ƒ('rotate', angle)}
+  transform(a, b, c, d, e, f){ this.ƒ('transform', ...arguments)}
+  translate(x, y){ this.ƒ('translate', ...arguments)}
+  scale(x, y){ this.ƒ('scale', ...arguments)}
+  rotate(angle){ this.ƒ('rotate', ...arguments)}
 
   createProjection(quad, basis){
     return fromSkMatrix(this.ƒ("createProjection", [quad].flat(), [basis].flat()))
@@ -306,15 +307,15 @@ class CanvasRenderingContext2D extends RustClass{
   rect(x, y, width, height){ this.ƒ('rect', ...arguments) }
   arc(x, y, radius, startAngle, endAngle, isCCW){ this.ƒ('arc', ...arguments) }
   ellipse(x, y, xRadius, yRadius, rotation, startAngle, endAngle, isCCW){ this.ƒ('ellipse', ...arguments) }
-  moveTo(x, y){ this.ƒ('moveTo', x, y) }
-  lineTo(x, y){ this.ƒ('lineTo', x, y) }
+  moveTo(x, y){ this.ƒ('moveTo', ...arguments) }
+  lineTo(x, y){ this.ƒ('lineTo', ...arguments) }
   arcTo(x1, y1, x2, y2, radius){ this.ƒ('arcTo', ...arguments) }
   bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y){ this.ƒ('bezierCurveTo', ...arguments) }
   quadraticCurveTo(cpx, cpy, x, y){ this.ƒ('quadraticCurveTo', ...arguments) }
   conicCurveTo(cpx, cpy, x, y, weight){ this.ƒ("conicCurveTo", ...arguments) }
   closePath(){ this.ƒ('closePath') }
-  isPointInPath(x, y){ return this.ƒ('isPointInPath', x, y) }
-  isPointInStroke(x, y){ return this.ƒ('isPointInStroke', x, y) }
+  isPointInPath(x, y){ return this.ƒ('isPointInPath', ...arguments) }
+  isPointInStroke(x, y){ return this.ƒ('isPointInStroke', ...arguments) }
 
   // -- using paths -----------------------------------------------------------
   fill(path, rule){
@@ -527,6 +528,8 @@ class FontLibrary extends RustClass {
       throw new Error("Expected an array of file paths or an object mapping family names to font files")
     }
   }
+
+  reset(){ return this.ƒ('reset') }
 }
 
 class Image extends RustClass {
@@ -670,8 +673,8 @@ class Path2D extends RustClass{
   }
 
   // line segments
-  moveTo(x, y){ this.ƒ("moveTo", x, y) }
-  lineTo(x, y){ this.ƒ("lineTo", x, y) }
+  moveTo(x, y){ this.ƒ("moveTo", ...arguments) }
+  lineTo(x, y){ this.ƒ("lineTo", ...arguments) }
   closePath(){ this.ƒ("closePath") }
   arcTo(x1, y1, x2, y2, radius){ this.ƒ("arcTo", ...arguments) }
   bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y){ this.ƒ("bezierCurveTo", ...arguments) }
@@ -745,9 +748,7 @@ class TextMetrics{
   }
 }
 
-const loadImage = src => new Promise((onload, onerror) =>
-  Object.assign(new Image(), {onload, onerror, src})
-)
+const loadImage = src => Object.assign(new Image(), {src}).decode()
 
 module.exports = {
   Canvas, CanvasGradient, CanvasPattern, CanvasRenderingContext2D, CanvasTexture,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skia-canvas",
-  "version": "0.9.29",
+  "version": "0.9.30",
   "description": "A canvas environment for Node",
   "author": "Christian Swinehart <drafting@samizdat.co>",
   "license": "MIT",
@@ -25,21 +25,21 @@
     "test": "jest"
   },
   "dependencies": {
-    "@mapbox/node-pre-gyp": "^1.0.8",
+    "@mapbox/node-pre-gyp": "^1.0.9",
     "cargo-cp-artifact": "^0.1",
-    "glob": "^7.2.0",
+    "glob": "^8.0.3",
     "path-browserify": "^1.0.1",
     "simple-get": "^4.0.1",
     "string-split-by": "^1.0.0"
   },
   "devDependencies": {
-    "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.15",
-    "aws-sdk": "^2.1069.0",
-    "express": "^4.17.2",
-    "jest": "^27.5.0",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^17.0.38",
+    "aws-sdk": "^2.1146.0",
+    "express": "^4.18.1",
+    "jest": "^28.1.0",
     "lodash": "^4.17.21",
-    "nodemon": "^2.0.15",
+    "nodemon": "^2.0.16",
     "tmp": "^0.2.1"
   },
   "files": [