1209 lines
30 KiB
JavaScript
1209 lines
30 KiB
JavaScript
|
"use strict";
|
|||
|
|
import fs from "fs";
|
|||
|
|
import { EventEmitter } from "events";
|
|||
|
|
import { inspect } from "util";
|
|||
|
|
import { sync as glob, hasMagic } from "glob";
|
|||
|
|
import get from "simple-get";
|
|||
|
|
import geometry from "./geometry";
|
|||
|
|
import css from "./css";
|
|||
|
|
import io from "./io";
|
|||
|
|
const REPR = inspect.custom;
|
|||
|
|
// const fs = require("fs"),
|
|||
|
|
// { EventEmitter } = require("events"),
|
|||
|
|
// { inspect } = require("util"),
|
|||
|
|
// { sync: glob, hasMagic } = require("glob"),
|
|||
|
|
// get = require("simple-get"),
|
|||
|
|
// geometry = require("./geometry"),
|
|||
|
|
// css = require("./css"),
|
|||
|
|
// io = require("./io"),
|
|||
|
|
// REPR = inspect.custom;
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// Neon <-> Node interface
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
const ø = Symbol.for("📦"), // the attr containing the boxed struct
|
|||
|
|
core = obj => (obj || {})[ø], // dereference the boxed struct
|
|||
|
|
wrap = (type, struct) => {
|
|||
|
|
// create new instance for struct
|
|||
|
|
let obj = internal(Object.create(type.prototype), ø, struct);
|
|||
|
|
return struct && internal(obj, "native", neon[type.name]);
|
|||
|
|
},
|
|||
|
|
neon = Object.entries(require("./v6")).reduce((api, [name, fn]) => {
|
|||
|
|
let [_, struct, getset, attr] = name.match(/(.*?)_(?:([sg]et)_)?(.*)/),
|
|||
|
|
cls = api[struct] || (api[struct] = {}),
|
|||
|
|
slot = getset ? cls[attr] || (cls[attr] = {}) : cls;
|
|||
|
|
slot[getset || attr] = fn;
|
|||
|
|
return api;
|
|||
|
|
}, {});
|
|||
|
|
|
|||
|
|
class RustClass {
|
|||
|
|
constructor(type) {
|
|||
|
|
internal(this, "native", neon[type.name]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
alloc(...args) {
|
|||
|
|
return this.init("new", ...args);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init(fn, ...args) {
|
|||
|
|
return internal(this, ø, this.native[fn](null, ...args));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ref(key, val) {
|
|||
|
|
return arguments.length > 1
|
|||
|
|
? (this[Symbol.for(key)] = val)
|
|||
|
|
: this[Symbol.for(key)];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
prop(attr, val) {
|
|||
|
|
let getset = arguments.length > 1 ? "set" : "get";
|
|||
|
|
return this.native[attr][getset](this[ø], val);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ƒ(fn, ...args) {
|
|||
|
|
try {
|
|||
|
|
return this.native[fn](this[ø], ...args);
|
|||
|
|
} catch (error) {
|
|||
|
|
Error.captureStackTrace(error, this.ƒ);
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// shorthands for attaching read-only attributes
|
|||
|
|
const readOnly = (obj, attr, value) =>
|
|||
|
|
Object.defineProperty(obj, attr, {
|
|||
|
|
value,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const internal = (obj, attr, value) =>
|
|||
|
|
Object.defineProperty(obj, attr, {
|
|||
|
|
value,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// convert arguments list to a string of type abbreviations
|
|||
|
|
function signature(args) {
|
|||
|
|
return args
|
|||
|
|
.map(v =>
|
|||
|
|
Array.isArray(v)
|
|||
|
|
? "a"
|
|||
|
|
: { string: "s", number: "n", object: "o" }[typeof v] || "x"
|
|||
|
|
)
|
|||
|
|
.join("");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toString = val =>
|
|||
|
|
typeof val == "string" ? val : new String(val).toString();
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// Helpers to reconcile Skia and DOMMatrix’s disagreement about row/col orientation
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
function toSkMatrix(jsMatrix) {
|
|||
|
|
if (Array.isArray(jsMatrix) && jsMatrix.length == 6) {
|
|||
|
|
var [a, b, c, d, e, f, m14, m24, m44] = jsMatrix.concat(0, 0, 1);
|
|||
|
|
} else if (jsMatrix instanceof geometry.DOMMatrix) {
|
|||
|
|
var { a, b, c, d, e, f, m14, m24, m44 } = jsMatrix;
|
|||
|
|
}
|
|||
|
|
return [a, c, e, b, d, f, m14, m24, m44];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fromSkMatrix(skMatrix) {
|
|||
|
|
let [a, b, c, d, e, f, p0, p1, p2] = skMatrix;
|
|||
|
|
return new geometry.DOMMatrix([
|
|||
|
|
a,
|
|||
|
|
d,
|
|||
|
|
0,
|
|||
|
|
p0,
|
|||
|
|
b,
|
|||
|
|
e,
|
|||
|
|
0,
|
|||
|
|
p1,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
0,
|
|||
|
|
c,
|
|||
|
|
f,
|
|||
|
|
0,
|
|||
|
|
p2
|
|||
|
|
]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// The Canvas API
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
class Canvas extends RustClass {
|
|||
|
|
static parent = new WeakMap();
|
|||
|
|
static contexts = new WeakMap();
|
|||
|
|
|
|||
|
|
constructor(width, height) {
|
|||
|
|
super(Canvas).alloc();
|
|||
|
|
Canvas.contexts.set(this, []);
|
|||
|
|
Object.assign(this, { width, height });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getContext(kind) {
|
|||
|
|
return kind == "2d" ? Canvas.contexts.get(this)[0] || this.newPage() : null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get width() {
|
|||
|
|
return this.prop("width");
|
|||
|
|
}
|
|||
|
|
set width(w) {
|
|||
|
|
this.prop(
|
|||
|
|
"width",
|
|||
|
|
typeof w == "number" && !Number.isNaN(w) && w >= 0 ? w : 300
|
|||
|
|
);
|
|||
|
|
if (Canvas.contexts.get(this)[0])
|
|||
|
|
this.getContext("2d").ƒ("resetSize", core(this));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get height() {
|
|||
|
|
return this.prop("height");
|
|||
|
|
}
|
|||
|
|
set height(h) {
|
|||
|
|
this.prop(
|
|||
|
|
"height",
|
|||
|
|
(h = typeof h == "number" && !Number.isNaN(h) && h >= 0 ? h : 150)
|
|||
|
|
);
|
|||
|
|
if (Canvas.contexts.get(this)[0])
|
|||
|
|
this.getContext("2d").ƒ("resetSize", core(this));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
newPage(width, height) {
|
|||
|
|
let ctx = new CanvasRenderingContext2D(core(this));
|
|||
|
|
Canvas.parent.set(ctx, this);
|
|||
|
|
Canvas.contexts.get(this).unshift(ctx);
|
|||
|
|
if (arguments.length == 2) {
|
|||
|
|
Object.assign(this, { width, height });
|
|||
|
|
}
|
|||
|
|
return ctx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get pages() {
|
|||
|
|
return Canvas.contexts
|
|||
|
|
.get(this)
|
|||
|
|
.slice()
|
|||
|
|
.reverse();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get png() {
|
|||
|
|
return this.toBuffer("png");
|
|||
|
|
}
|
|||
|
|
get jpg() {
|
|||
|
|
return this.toBuffer("jpg");
|
|||
|
|
}
|
|||
|
|
get pdf() {
|
|||
|
|
return this.toBuffer("pdf");
|
|||
|
|
}
|
|||
|
|
get svg() {
|
|||
|
|
return this.toBuffer("svg");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get async() {
|
|||
|
|
return this.prop("async");
|
|||
|
|
}
|
|||
|
|
set async(flag) {
|
|||
|
|
if (!flag) {
|
|||
|
|
process.emitWarning(
|
|||
|
|
"Use the saveAsSync, toBufferSync, and toDataURLSync methods instead of setting the Canvas `async` property to false",
|
|||
|
|
"DeprecationWarning"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
this.prop("async", flag);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
saveAs(filename, opts = {}) {
|
|||
|
|
if (!this.async) return this.saveAsSync(...arguments); // support while deprecated
|
|||
|
|
|
|||
|
|
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)))
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
saveAsSync(filename, opts = {}) {
|
|||
|
|
opts = typeof opts == "number" ? { quality: opts } : opts;
|
|||
|
|
let {
|
|||
|
|
format,
|
|||
|
|
quality,
|
|||
|
|
pages,
|
|||
|
|
padding,
|
|||
|
|
pattern,
|
|||
|
|
density,
|
|||
|
|
outline,
|
|||
|
|
matte
|
|||
|
|
} = io.options(this.pages, { filename, ...opts });
|
|||
|
|
this.ƒ(
|
|||
|
|
"saveSync",
|
|||
|
|
pages.map(core),
|
|||
|
|
pattern,
|
|||
|
|
padding,
|
|||
|
|
format,
|
|||
|
|
quality,
|
|||
|
|
density,
|
|||
|
|
outline,
|
|||
|
|
matte
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
toBuffer(extension = "png", opts = {}) {
|
|||
|
|
if (!this.async) return this.toBufferSync(...arguments); // support while deprecated
|
|||
|
|
|
|||
|
|
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)))
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
toBufferSync(extension = "png", opts = {}) {
|
|||
|
|
opts = typeof opts == "number" ? { quality: opts } : opts;
|
|||
|
|
let { format, quality, pages, density, outline, matte } = io.options(
|
|||
|
|
this.pages,
|
|||
|
|
{ extension, ...opts }
|
|||
|
|
);
|
|||
|
|
return this.ƒ(
|
|||
|
|
"toBufferSync",
|
|||
|
|
pages.map(core),
|
|||
|
|
format,
|
|||
|
|
quality,
|
|||
|
|
density,
|
|||
|
|
outline,
|
|||
|
|
matte
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
toDataURL(extension = "png", opts = {}) {
|
|||
|
|
if (!this.async) return this.toDataURLSync(...arguments); // support while deprecated
|
|||
|
|
|
|||
|
|
opts = typeof opts == "number" ? { quality: opts } : opts;
|
|||
|
|
let { mime } = io.options(this.pages, { extension, ...opts }),
|
|||
|
|
buffer = this.toBuffer(extension, opts);
|
|||
|
|
return buffer.then(
|
|||
|
|
data => `data:${mime};base64,${data.toString("base64")}`
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
toDataURLSync(extension = "png", opts = {}) {
|
|||
|
|
opts = typeof opts == "number" ? { quality: opts } : opts;
|
|||
|
|
let { mime } = io.options(this.pages, { extension, ...opts }),
|
|||
|
|
buffer = this.toBufferSync(extension, opts);
|
|||
|
|
return `data:${mime};base64,${buffer.toString("base64")}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
let { width, height, async, pages } = this;
|
|||
|
|
return `Canvas ${inspect({ width, height, async, pages }, options)}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class CanvasGradient extends RustClass {
|
|||
|
|
constructor(style, ...coords) {
|
|||
|
|
super(CanvasGradient);
|
|||
|
|
style = (style || "").toLowerCase();
|
|||
|
|
if (["linear", "radial", "conic"].includes(style))
|
|||
|
|
this.init(style, ...coords);
|
|||
|
|
else
|
|||
|
|
throw new Error(
|
|||
|
|
`Function is not a constructor (use CanvasRenderingContext2D's "createConicGradient", "createLinearGradient", and "createRadialGradient" methods instead)`
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
addColorStop(offset, color) {
|
|||
|
|
if (offset >= 0 && offset <= 1) this.ƒ("addColorStop", offset, color);
|
|||
|
|
else throw new Error("Color stop offsets must be between 0.0 and 1.0");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
return `CanvasGradient (${this.ƒ("repr")})`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class CanvasPattern extends RustClass {
|
|||
|
|
constructor(src, repeat) {
|
|||
|
|
super(CanvasPattern);
|
|||
|
|
if (src instanceof Image) {
|
|||
|
|
this.init("from_image", core(src), repeat);
|
|||
|
|
} else if (src instanceof Canvas) {
|
|||
|
|
let ctx = src.getContext("2d");
|
|||
|
|
this.init("from_canvas", core(ctx), repeat);
|
|||
|
|
} else {
|
|||
|
|
throw new Error("CanvasPatterns require a source Image or a Canvas");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTransform(matrix) {
|
|||
|
|
if (arguments.length > 1) matrix = [...arguments];
|
|||
|
|
this.ƒ("setTransform", toSkMatrix(matrix));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
return `CanvasPattern (${this.ƒ("repr")})`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class CanvasTexture extends RustClass {
|
|||
|
|
constructor(spacing, { path, line, color, angle, offset = 0 } = {}) {
|
|||
|
|
super(CanvasTexture);
|
|||
|
|
let [x, y] =
|
|||
|
|
typeof offset == "number" ? [offset, offset] : offset.slice(0, 2);
|
|||
|
|
let [h, v] =
|
|||
|
|
typeof spacing == "number" ? [spacing, spacing] : spacing.slice(0, 2);
|
|||
|
|
path = core(path);
|
|||
|
|
line = line != null ? line : path ? 0 : 1;
|
|||
|
|
angle = angle != null ? angle : path ? 0 : -Math.PI / 4;
|
|||
|
|
this.alloc(path, color, line, angle, h, v, x, y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
return `CanvasTexture (${this.ƒ("repr")})`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class CanvasRenderingContext2D extends RustClass {
|
|||
|
|
constructor(canvas) {
|
|||
|
|
try {
|
|||
|
|
super(CanvasRenderingContext2D).alloc(canvas);
|
|||
|
|
} catch (e) {
|
|||
|
|
throw new TypeError(
|
|||
|
|
`Function is not a constructor (use Canvas's "getContext" method instead)`
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get canvas() {
|
|||
|
|
return Canvas.parent.get(this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- grid state ------------------------------------------------------------
|
|||
|
|
save() {
|
|||
|
|
this.ƒ("save");
|
|||
|
|
}
|
|||
|
|
restore() {
|
|||
|
|
this.ƒ("restore");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get currentTransform() {
|
|||
|
|
return fromSkMatrix(this.prop("currentTransform"));
|
|||
|
|
}
|
|||
|
|
set currentTransform(matrix) {
|
|||
|
|
this.prop("currentTransform", toSkMatrix(matrix));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resetTransform() {
|
|||
|
|
this.ƒ("resetTransform");
|
|||
|
|
}
|
|||
|
|
getTransform() {
|
|||
|
|
return this.currentTransform;
|
|||
|
|
}
|
|||
|
|
setTransform(matrix) {
|
|||
|
|
this.currentTransform = arguments.length > 1 ? [...arguments] : matrix;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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())
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- bézier paths ----------------------------------------------------------
|
|||
|
|
beginPath() {
|
|||
|
|
this.ƒ("beginPath");
|
|||
|
|
}
|
|||
|
|
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", ...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", ...arguments);
|
|||
|
|
}
|
|||
|
|
isPointInStroke(x, y) {
|
|||
|
|
return this.ƒ("isPointInStroke", ...arguments);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- using paths -----------------------------------------------------------
|
|||
|
|
fill(path, rule) {
|
|||
|
|
if (path instanceof Path2D) this.ƒ("fill", core(path), rule);
|
|||
|
|
else this.ƒ("fill", path); // 'path' is the optional winding-rule
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
stroke(path, rule) {
|
|||
|
|
if (path instanceof Path2D) this.ƒ("stroke", core(path), rule);
|
|||
|
|
else this.ƒ("stroke", path); // 'path' is the optional winding-rule
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
clip(path, rule) {
|
|||
|
|
if (path instanceof Path2D) this.ƒ("clip", core(path), rule);
|
|||
|
|
else this.ƒ("clip", path); // 'path' is the optional winding-rule
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- shaders ---------------------------------------------------------------
|
|||
|
|
createPattern(image, repetition) {
|
|||
|
|
return new CanvasPattern(...arguments);
|
|||
|
|
}
|
|||
|
|
createLinearGradient(x0, y0, x1, y1) {
|
|||
|
|
return new CanvasGradient("Linear", ...arguments);
|
|||
|
|
}
|
|||
|
|
createRadialGradient(x0, y0, r0, x1, y1, r1) {
|
|||
|
|
return new CanvasGradient("Radial", ...arguments);
|
|||
|
|
}
|
|||
|
|
createConicGradient(startAngle, x, y) {
|
|||
|
|
return new CanvasGradient("Conic", ...arguments);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
createTexture(spacing, options) {
|
|||
|
|
return new CanvasTexture(spacing, options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- fill & stroke ---------------------------------------------------------
|
|||
|
|
fillRect(x, y, width, height) {
|
|||
|
|
this.ƒ("fillRect", ...arguments);
|
|||
|
|
}
|
|||
|
|
strokeRect(x, y, width, height) {
|
|||
|
|
this.ƒ("strokeRect", ...arguments);
|
|||
|
|
}
|
|||
|
|
clearRect(x, y, width, height) {
|
|||
|
|
this.ƒ("clearRect", ...arguments);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set fillStyle(style) {
|
|||
|
|
let isShader =
|
|||
|
|
style instanceof CanvasPattern ||
|
|||
|
|
style instanceof CanvasGradient ||
|
|||
|
|
style instanceof CanvasTexture,
|
|||
|
|
[ref, val] = isShader ? [style, core(style)] : [null, style];
|
|||
|
|
this.ref("fill", ref);
|
|||
|
|
this.prop("fillStyle", val);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get fillStyle() {
|
|||
|
|
let style = this.prop("fillStyle");
|
|||
|
|
return style === null ? this.ref("fill") : style;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set strokeStyle(style) {
|
|||
|
|
let isShader =
|
|||
|
|
style instanceof CanvasPattern ||
|
|||
|
|
style instanceof CanvasGradient ||
|
|||
|
|
style instanceof CanvasTexture,
|
|||
|
|
[ref, val] = isShader ? [style, core(style)] : [null, style];
|
|||
|
|
this.ref("stroke", ref);
|
|||
|
|
this.prop("strokeStyle", val);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get strokeStyle() {
|
|||
|
|
let style = this.prop("strokeStyle");
|
|||
|
|
return style === null ? this.ref("stroke") : style;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- line style ------------------------------------------------------------
|
|||
|
|
getLineDash() {
|
|||
|
|
return this.ƒ("getLineDash");
|
|||
|
|
}
|
|||
|
|
setLineDash(segments) {
|
|||
|
|
this.ƒ("setLineDash", segments);
|
|||
|
|
}
|
|||
|
|
get lineCap() {
|
|||
|
|
return this.prop("lineCap");
|
|||
|
|
}
|
|||
|
|
set lineCap(style) {
|
|||
|
|
this.prop("lineCap", style);
|
|||
|
|
}
|
|||
|
|
get lineDashFit() {
|
|||
|
|
return this.prop("lineDashFit");
|
|||
|
|
}
|
|||
|
|
set lineDashFit(style) {
|
|||
|
|
this.prop("lineDashFit", style);
|
|||
|
|
}
|
|||
|
|
get lineDashMarker() {
|
|||
|
|
return wrap(Path2D, this.prop("lineDashMarker"));
|
|||
|
|
}
|
|||
|
|
set lineDashMarker(path) {
|
|||
|
|
this.prop("lineDashMarker", path instanceof Path2D ? core(path) : path);
|
|||
|
|
}
|
|||
|
|
get lineDashOffset() {
|
|||
|
|
return this.prop("lineDashOffset");
|
|||
|
|
}
|
|||
|
|
set lineDashOffset(offset) {
|
|||
|
|
this.prop("lineDashOffset", offset);
|
|||
|
|
}
|
|||
|
|
get lineJoin() {
|
|||
|
|
return this.prop("lineJoin");
|
|||
|
|
}
|
|||
|
|
set lineJoin(style) {
|
|||
|
|
this.prop("lineJoin", style);
|
|||
|
|
}
|
|||
|
|
get lineWidth() {
|
|||
|
|
return this.prop("lineWidth");
|
|||
|
|
}
|
|||
|
|
set lineWidth(width) {
|
|||
|
|
this.prop("lineWidth", width);
|
|||
|
|
}
|
|||
|
|
get miterLimit() {
|
|||
|
|
return this.prop("miterLimit");
|
|||
|
|
}
|
|||
|
|
set miterLimit(limit) {
|
|||
|
|
this.prop("miterLimit", limit);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- imagery ---------------------------------------------------------------
|
|||
|
|
get imageSmoothingEnabled() {
|
|||
|
|
return this.prop("imageSmoothingEnabled");
|
|||
|
|
}
|
|||
|
|
set imageSmoothingEnabled(flag) {
|
|||
|
|
this.prop("imageSmoothingEnabled", !!flag);
|
|||
|
|
}
|
|||
|
|
get imageSmoothingQuality() {
|
|||
|
|
return this.prop("imageSmoothingQuality");
|
|||
|
|
}
|
|||
|
|
set imageSmoothingQuality(level) {
|
|||
|
|
this.prop("imageSmoothingQuality", level);
|
|||
|
|
}
|
|||
|
|
putImageData(imageData, ...coords) {
|
|||
|
|
this.ƒ("putImageData", imageData, ...coords);
|
|||
|
|
}
|
|||
|
|
createImageData(width, height) {
|
|||
|
|
return new ImageData(width, height);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getImageData(x, y, width, height) {
|
|||
|
|
let w = Math.floor(width),
|
|||
|
|
h = Math.floor(height),
|
|||
|
|
buffer = this.ƒ("getImageData", x, y, w, h);
|
|||
|
|
return new ImageData(buffer, w, h);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
drawImage(image, ...coords) {
|
|||
|
|
if (image instanceof Canvas) {
|
|||
|
|
this.ƒ("drawImage", core(image.getContext("2d")), ...coords);
|
|||
|
|
} else if (image instanceof Image) {
|
|||
|
|
this.ƒ("drawImage", core(image), ...coords);
|
|||
|
|
} else {
|
|||
|
|
throw new Error("Expected an Image or a Canvas argument");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
drawCanvas(image, ...coords) {
|
|||
|
|
if (image instanceof Canvas) {
|
|||
|
|
this.ƒ("drawCanvas", core(image.getContext("2d")), ...coords);
|
|||
|
|
} else {
|
|||
|
|
this.drawImage(image, ...coords);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- typography ------------------------------------------------------------
|
|||
|
|
get font() {
|
|||
|
|
return this.prop("font");
|
|||
|
|
}
|
|||
|
|
set font(str) {
|
|||
|
|
this.prop("font", css.font(str));
|
|||
|
|
}
|
|||
|
|
get textAlign() {
|
|||
|
|
return this.prop("textAlign");
|
|||
|
|
}
|
|||
|
|
set textAlign(mode) {
|
|||
|
|
this.prop("textAlign", mode);
|
|||
|
|
}
|
|||
|
|
get textBaseline() {
|
|||
|
|
return this.prop("textBaseline");
|
|||
|
|
}
|
|||
|
|
set textBaseline(mode) {
|
|||
|
|
this.prop("textBaseline", mode);
|
|||
|
|
}
|
|||
|
|
get direction() {
|
|||
|
|
return this.prop("direction");
|
|||
|
|
}
|
|||
|
|
set direction(mode) {
|
|||
|
|
this.prop("direction", mode);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
measureText(text, maxWidth) {
|
|||
|
|
text = this.textWrap ? text : text + "\u200b"; // include trailing whitespace by default
|
|||
|
|
let [metrics, ...lines] = this.ƒ("measureText", toString(text), maxWidth);
|
|||
|
|
return new TextMetrics(metrics, lines);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fillText(text, x, y, maxWidth) {
|
|||
|
|
this.ƒ("fillText", toString(text), x, y, maxWidth);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
strokeText(text, x, y, maxWidth) {
|
|||
|
|
this.ƒ("strokeText", toString(text), x, y, maxWidth);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
outlineText(text) {
|
|||
|
|
let path = this.ƒ("outlineText", toString(text));
|
|||
|
|
return path ? wrap(Path2D, path) : null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- non-standard typography extensions --------------------------------------------
|
|||
|
|
get fontVariant() {
|
|||
|
|
return this.prop("fontVariant");
|
|||
|
|
}
|
|||
|
|
set fontVariant(str) {
|
|||
|
|
this.prop("fontVariant", css.variant(str));
|
|||
|
|
}
|
|||
|
|
get textTracking() {
|
|||
|
|
return this.prop("textTracking");
|
|||
|
|
}
|
|||
|
|
set textTracking(ems) {
|
|||
|
|
this.prop("textTracking", ems);
|
|||
|
|
}
|
|||
|
|
get textWrap() {
|
|||
|
|
return this.prop("textWrap");
|
|||
|
|
}
|
|||
|
|
set textWrap(flag) {
|
|||
|
|
this.prop("textWrap", !!flag);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// -- effects ---------------------------------------------------------------
|
|||
|
|
get globalCompositeOperation() {
|
|||
|
|
return this.prop("globalCompositeOperation");
|
|||
|
|
}
|
|||
|
|
set globalCompositeOperation(blend) {
|
|||
|
|
this.prop("globalCompositeOperation", blend);
|
|||
|
|
}
|
|||
|
|
get globalAlpha() {
|
|||
|
|
return this.prop("globalAlpha");
|
|||
|
|
}
|
|||
|
|
set globalAlpha(alpha) {
|
|||
|
|
this.prop("globalAlpha", alpha);
|
|||
|
|
}
|
|||
|
|
get shadowBlur() {
|
|||
|
|
return this.prop("shadowBlur");
|
|||
|
|
}
|
|||
|
|
set shadowBlur(level) {
|
|||
|
|
this.prop("shadowBlur", level);
|
|||
|
|
}
|
|||
|
|
get shadowColor() {
|
|||
|
|
return this.prop("shadowColor");
|
|||
|
|
}
|
|||
|
|
set shadowColor(color) {
|
|||
|
|
this.prop("shadowColor", color);
|
|||
|
|
}
|
|||
|
|
get shadowOffsetX() {
|
|||
|
|
return this.prop("shadowOffsetX");
|
|||
|
|
}
|
|||
|
|
set shadowOffsetX(x) {
|
|||
|
|
this.prop("shadowOffsetX", x);
|
|||
|
|
}
|
|||
|
|
get shadowOffsetY() {
|
|||
|
|
return this.prop("shadowOffsetY");
|
|||
|
|
}
|
|||
|
|
set shadowOffsetY(y) {
|
|||
|
|
this.prop("shadowOffsetY", y);
|
|||
|
|
}
|
|||
|
|
get filter() {
|
|||
|
|
return this.prop("filter");
|
|||
|
|
}
|
|||
|
|
set filter(str) {
|
|||
|
|
this.prop("filter", css.filter(str));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
let props = [
|
|||
|
|
"canvas",
|
|||
|
|
"currentTransform",
|
|||
|
|
"fillStyle",
|
|||
|
|
"strokeStyle",
|
|||
|
|
"font",
|
|||
|
|
"fontVariant",
|
|||
|
|
"direction",
|
|||
|
|
"textAlign",
|
|||
|
|
"textBaseline",
|
|||
|
|
"textTracking",
|
|||
|
|
"textWrap",
|
|||
|
|
"globalAlpha",
|
|||
|
|
"globalCompositeOperation",
|
|||
|
|
"imageSmoothingEnabled",
|
|||
|
|
"imageSmoothingQuality",
|
|||
|
|
"filter",
|
|||
|
|
"shadowBlur",
|
|||
|
|
"shadowColor",
|
|||
|
|
"shadowOffsetX",
|
|||
|
|
"shadowOffsetY",
|
|||
|
|
"lineCap",
|
|||
|
|
"lineDashOffset",
|
|||
|
|
"lineJoin",
|
|||
|
|
"lineWidth",
|
|||
|
|
"miterLimit"
|
|||
|
|
];
|
|||
|
|
let info = {};
|
|||
|
|
if (depth > 0) {
|
|||
|
|
for (var prop of props) {
|
|||
|
|
try {
|
|||
|
|
info[prop] = this[prop];
|
|||
|
|
} catch {
|
|||
|
|
info[prop] = undefined;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return `CanvasRenderingContext2D ${inspect(info, options)}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const _expand = paths =>
|
|||
|
|
[paths]
|
|||
|
|
.flat(2)
|
|||
|
|
.map(pth => (hasMagic(pth) ? glob(pth) : pth))
|
|||
|
|
.flat();
|
|||
|
|
|
|||
|
|
class FontLibrary extends RustClass {
|
|||
|
|
constructor() {
|
|||
|
|
super(FontLibrary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get families() {
|
|||
|
|
return this.prop("families");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
has(familyName) {
|
|||
|
|
return this.ƒ("has", familyName);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
family(name) {
|
|||
|
|
return this.ƒ("family", name);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
use(...args) {
|
|||
|
|
let sig = signature(args);
|
|||
|
|
if (sig == "o") {
|
|||
|
|
let results = {};
|
|||
|
|
for (let [alias, paths] of Object.entries(args.shift())) {
|
|||
|
|
results[alias] = this.ƒ("addFamily", alias, _expand(paths));
|
|||
|
|
}
|
|||
|
|
return results;
|
|||
|
|
} else if (sig.match(/^s?[as]$/)) {
|
|||
|
|
let fonts = _expand(args.pop());
|
|||
|
|
let alias = args.shift();
|
|||
|
|
return this.ƒ("addFamily", alias, fonts);
|
|||
|
|
} else {
|
|||
|
|
throw new Error(
|
|||
|
|
"Expected an array of file paths or an object mapping family names to font files"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class Image extends RustClass {
|
|||
|
|
constructor() {
|
|||
|
|
super(Image).alloc();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get complete() {
|
|||
|
|
return this.prop("complete");
|
|||
|
|
}
|
|||
|
|
get height() {
|
|||
|
|
return this.prop("height");
|
|||
|
|
}
|
|||
|
|
get width() {
|
|||
|
|
return this.prop("width");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get src() {
|
|||
|
|
return this.prop("src");
|
|||
|
|
}
|
|||
|
|
set src(src) {
|
|||
|
|
var noop = () => {},
|
|||
|
|
onload = img => fetch.emit("ok", img),
|
|||
|
|
onerror = err => fetch.emit("err", err),
|
|||
|
|
passthrough = fn => arg => {
|
|||
|
|
(fn || noop)(arg);
|
|||
|
|
delete this._fetch;
|
|||
|
|
},
|
|||
|
|
data;
|
|||
|
|
|
|||
|
|
if (this._fetch) this._fetch.removeAllListeners();
|
|||
|
|
let fetch = (this._fetch = new EventEmitter()
|
|||
|
|
.once("ok", passthrough(this.onload))
|
|||
|
|
.once("err", passthrough(this.onerror)));
|
|||
|
|
|
|||
|
|
if (Buffer.isBuffer(src)) {
|
|||
|
|
[data, src] = [src, ""];
|
|||
|
|
} else if (typeof src != "string") {
|
|||
|
|
return;
|
|||
|
|
} else if (/^\s*data:/.test(src)) {
|
|||
|
|
// data URI
|
|||
|
|
let split = src.indexOf(","),
|
|||
|
|
enc = src.lastIndexOf("base64", split) !== -1 ? "base64" : "utf8",
|
|||
|
|
content = src.slice(split + 1);
|
|||
|
|
data = Buffer.from(content, enc);
|
|||
|
|
} else if (/^\s*https?:\/\//.test(src)) {
|
|||
|
|
// remote URL
|
|||
|
|
get.concat(src, (err, res, data) => {
|
|||
|
|
let code = (res || {}).statusCode;
|
|||
|
|
if (err) onerror(err);
|
|||
|
|
else if (code < 200 || code >= 300) {
|
|||
|
|
onerror(
|
|||
|
|
new Error(`Failed to load image from "${src}" (error ${code})`)
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
if (this.prop("data", data)) onload(this);
|
|||
|
|
else onerror(new Error("Could not decode image data"));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// local file path
|
|||
|
|
data = fs.readFileSync(src);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.prop("src", src);
|
|||
|
|
if (data) {
|
|||
|
|
if (this.prop("data", data)) onload(this);
|
|||
|
|
else onerror(new Error("Could not decode image data"));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
decode() {
|
|||
|
|
return this._fetch
|
|||
|
|
? new Promise((res, rej) => this._fetch.once("ok", res).once("err", rej))
|
|||
|
|
: this.complete
|
|||
|
|
? Promise.resolve(this)
|
|||
|
|
: Promise.reject(new Error("Missing Source URL"));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
let { width, height, complete, src } = this;
|
|||
|
|
options.maxStringLength = src.match(/^data:/) ? 128 : Infinity;
|
|||
|
|
return `Image ${inspect({ width, height, complete, src }, options)}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class ImageData {
|
|||
|
|
constructor(...args) {
|
|||
|
|
if (args[0] instanceof ImageData) {
|
|||
|
|
var { data, width, height } = args[0];
|
|||
|
|
} else if (
|
|||
|
|
args[0] instanceof Uint8ClampedArray ||
|
|||
|
|
args[0] instanceof Buffer
|
|||
|
|
) {
|
|||
|
|
var [data, width, height] = args;
|
|||
|
|
height = height || data.length / width / 4;
|
|||
|
|
if (data.length / 4 != width * height) {
|
|||
|
|
throw new Error("ImageData dimensions must match buffer length");
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var [width, height] = args;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
!Number.isInteger(width) ||
|
|||
|
|
!Number.isInteger(height) ||
|
|||
|
|
width < 0 ||
|
|||
|
|
height < 0
|
|||
|
|
) {
|
|||
|
|
throw new Error("ImageData dimensions must be positive integers");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
readOnly(this, "width", width);
|
|||
|
|
readOnly(this, "height", height);
|
|||
|
|
readOnly(
|
|||
|
|
this,
|
|||
|
|
"data",
|
|||
|
|
new Uint8ClampedArray((data && data.buffer) || width * height * 4)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
let { width, height, data } = this;
|
|||
|
|
return `ImageData ${inspect({ width, height, data }, options)}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class Path2D extends RustClass {
|
|||
|
|
static op(operation, path, other) {
|
|||
|
|
return wrap(Path2D, path.ƒ("op", core(other), operation));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
static interpolate(path, other, weight) {
|
|||
|
|
return wrap(Path2D, path.ƒ("interpolate", core(other), weight));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
static effect(effect, path, ...args) {
|
|||
|
|
return wrap(Path2D, path.ƒ(effect, ...args));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
constructor(source) {
|
|||
|
|
super(Path2D);
|
|||
|
|
if (source instanceof Path2D) this.init("from_path", core(source));
|
|||
|
|
else if (typeof source == "string") this.init("from_svg", source);
|
|||
|
|
else this.alloc();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// dimensions & contents
|
|||
|
|
get bounds() {
|
|||
|
|
return this.ƒ("bounds");
|
|||
|
|
}
|
|||
|
|
get edges() {
|
|||
|
|
return this.ƒ("edges");
|
|||
|
|
}
|
|||
|
|
get d() {
|
|||
|
|
return this.prop("d");
|
|||
|
|
}
|
|||
|
|
set d(svg) {
|
|||
|
|
return this.prop("d", svg);
|
|||
|
|
}
|
|||
|
|
contains(x, y) {
|
|||
|
|
return this.ƒ("contains", x, y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
points(step = 1) {
|
|||
|
|
return this.jitter(step, 0)
|
|||
|
|
.edges.map(([verb, ...pts]) => pts.slice(-2))
|
|||
|
|
.filter(pt => pt.length);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// concatenation
|
|||
|
|
addPath(path, matrix) {
|
|||
|
|
if (!(path instanceof Path2D)) throw new Error("Expected a Path2D object");
|
|||
|
|
if (matrix) matrix = toSkMatrix(matrix);
|
|||
|
|
this.ƒ("addPath", core(path), matrix);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// line segments
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
quadraticCurveTo(cpx, cpy, x, y) {
|
|||
|
|
this.ƒ("quadraticCurveTo", ...arguments);
|
|||
|
|
}
|
|||
|
|
conicCurveTo(cpx, cpy, x, y, weight) {
|
|||
|
|
this.ƒ("conicCurveTo", ...arguments);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// shape primitives
|
|||
|
|
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, isCCW) {
|
|||
|
|
this.ƒ("ellipse", ...arguments);
|
|||
|
|
}
|
|||
|
|
rect(x, y, width, height) {
|
|||
|
|
this.ƒ("rect", ...arguments);
|
|||
|
|
}
|
|||
|
|
arc(x, y, radius, startAngle, endAngle) {
|
|||
|
|
this.ƒ("arc", ...arguments);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// tween similar paths
|
|||
|
|
interpolate(path, weight) {
|
|||
|
|
return Path2D.interpolate(this, path, weight);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// boolean operations
|
|||
|
|
complement(path) {
|
|||
|
|
return Path2D.op("complement", this, path);
|
|||
|
|
}
|
|||
|
|
difference(path) {
|
|||
|
|
return Path2D.op("difference", this, path);
|
|||
|
|
}
|
|||
|
|
intersect(path) {
|
|||
|
|
return Path2D.op("intersect", this, path);
|
|||
|
|
}
|
|||
|
|
union(path) {
|
|||
|
|
return Path2D.op("union", this, path);
|
|||
|
|
}
|
|||
|
|
xor(path) {
|
|||
|
|
return Path2D.op("xor", this, path);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// path effects
|
|||
|
|
jitter(len, amt, seed) {
|
|||
|
|
return Path2D.effect("jitter", this, ...arguments);
|
|||
|
|
}
|
|||
|
|
simplify(rule) {
|
|||
|
|
return Path2D.effect("simplify", this, rule);
|
|||
|
|
}
|
|||
|
|
unwind() {
|
|||
|
|
return Path2D.effect("unwind", this);
|
|||
|
|
}
|
|||
|
|
round(radius) {
|
|||
|
|
return Path2D.effect("round", this, radius);
|
|||
|
|
}
|
|||
|
|
offset(dx, dy) {
|
|||
|
|
return Path2D.effect("offset", this, dx, dy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
transform(matrix) {
|
|||
|
|
let terms = arguments.length > 1 ? [...arguments] : matrix;
|
|||
|
|
return Path2D.effect("transform", this, toSkMatrix(terms));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
trim(...rng) {
|
|||
|
|
if (typeof rng[1] != "number") {
|
|||
|
|
if (rng[0] > 0) rng.unshift(0);
|
|||
|
|
else if (rng[0] < 0) rng.splice(1, 0, 1);
|
|||
|
|
}
|
|||
|
|
if (rng[0] < 0) rng[0] = Math.max(-1, rng[0]) + 1;
|
|||
|
|
if (rng[1] < 0) rng[1] = Math.max(-1, rng[1]) + 1;
|
|||
|
|
return Path2D.effect("trim", this, ...rng);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[REPR](depth, options) {
|
|||
|
|
let { d, bounds, edges } = this;
|
|||
|
|
return `Path2D ${inspect({ d, bounds, edges }, options)}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class TextMetrics {
|
|||
|
|
constructor(
|
|||
|
|
[
|
|||
|
|
width,
|
|||
|
|
left,
|
|||
|
|
right,
|
|||
|
|
ascent,
|
|||
|
|
descent,
|
|||
|
|
fontAscent,
|
|||
|
|
fontDescent,
|
|||
|
|
emAscent,
|
|||
|
|
emDescent,
|
|||
|
|
hanging,
|
|||
|
|
alphabetic,
|
|||
|
|
ideographic
|
|||
|
|
],
|
|||
|
|
lines
|
|||
|
|
) {
|
|||
|
|
readOnly(this, "width", width);
|
|||
|
|
readOnly(this, "actualBoundingBoxLeft", left);
|
|||
|
|
readOnly(this, "actualBoundingBoxRight", right);
|
|||
|
|
readOnly(this, "actualBoundingBoxAscent", ascent);
|
|||
|
|
readOnly(this, "actualBoundingBoxDescent", descent);
|
|||
|
|
readOnly(this, "fontBoundingBoxAscent", fontAscent);
|
|||
|
|
readOnly(this, "fontBoundingBoxDescent", fontDescent);
|
|||
|
|
readOnly(this, "emHeightAscent", emAscent);
|
|||
|
|
readOnly(this, "emHeightDescent", emDescent);
|
|||
|
|
readOnly(this, "hangingBaseline", hanging);
|
|||
|
|
readOnly(this, "alphabeticBaseline", alphabetic);
|
|||
|
|
readOnly(this, "ideographicBaseline", ideographic);
|
|||
|
|
readOnly(
|
|||
|
|
this,
|
|||
|
|
"lines",
|
|||
|
|
lines.map(([x, y, width, height, baseline, startIndex, endIndex]) => ({
|
|||
|
|
x,
|
|||
|
|
y,
|
|||
|
|
width,
|
|||
|
|
height,
|
|||
|
|
baseline,
|
|||
|
|
startIndex,
|
|||
|
|
endIndex
|
|||
|
|
}))
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const loadImage = src => Object.assign(new Image(), { src }).decode();
|
|||
|
|
|
|||
|
|
// module.exports = {
|
|||
|
|
// Canvas,
|
|||
|
|
// CanvasGradient,
|
|||
|
|
// CanvasPattern,
|
|||
|
|
// CanvasRenderingContext2D,
|
|||
|
|
// CanvasTexture,
|
|||
|
|
// TextMetrics,
|
|||
|
|
// Image,
|
|||
|
|
// ImageData,
|
|||
|
|
// Path2D,
|
|||
|
|
// loadImage,
|
|||
|
|
// ...geometry,
|
|||
|
|
// FontLibrary: new FontLibrary()
|
|||
|
|
// };
|
|||
|
|
const obj = {
|
|||
|
|
Canvas,
|
|||
|
|
CanvasGradient,
|
|||
|
|
CanvasPattern,
|
|||
|
|
CanvasRenderingContext2D,
|
|||
|
|
CanvasTexture,
|
|||
|
|
TextMetrics,
|
|||
|
|
Image,
|
|||
|
|
ImageData,
|
|||
|
|
Path2D,
|
|||
|
|
loadImage,
|
|||
|
|
...geometry,
|
|||
|
|
FontLibrary: new FontLibrary()
|
|||
|
|
};
|
|||
|
|
export default obj;
|