@julusian/skia-canvas
Version:
A GPU-accelerated Canvas Graphics API for Node
752 lines (614 loc) • 19.2 kB
JavaScript
"use strict"
const {inspect} = require('util')
/*
* vendored in order to fix its dependence on the window global [cds 2020/08/04]
* otherwise unchanged from https://github.com/jarek-foksa/geometry-polyfill/tree/f36bbc8f4bc43539d980687904ce46c8e915543d
*/
// @info
// DOMPoint polyfill
// @src
// https://drafts.fxtf.org/geometry/#DOMPoint
// https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/geometry/dom_point_read_only.cc
class DOMPoint {
constructor(x = 0, y = 0, z = 0, w = 1) {
this.x = x;
this.y = y;
this.z = z;
this.w = w;
}
static fromPoint(otherPoint) {
return new DOMPoint(
otherPoint.x,
otherPoint.y,
otherPoint.z !== undefined ? otherPoint.z : 0,
otherPoint.w !== undefined ? otherPoint.w : 1
);
}
matrixTransform(matrix) {
if (
(matrix.is2D || matrix instanceof SVGMatrix) &&
this.z === 0 &&
this.w === 1
) {
return new DOMPoint(
this.x * matrix.a + this.y * matrix.c + matrix.e,
this.x * matrix.b + this.y * matrix.d + matrix.f,
0, 1
);
}
else {
return new DOMPoint(
this.x * matrix.m11 + this.y * matrix.m21 + this.z * matrix.m31 + this.w * matrix.m41,
this.x * matrix.m12 + this.y * matrix.m22 + this.z * matrix.m32 + this.w * matrix.m42,
this.x * matrix.m13 + this.y * matrix.m23 + this.z * matrix.m33 + this.w * matrix.m43,
this.x * matrix.m14 + this.y * matrix.m24 + this.z * matrix.m34 + this.w * matrix.m44
);
}
}
toJSON() {
return {
x: this.x,
y: this.y,
z: this.z,
w: this.w
};
}
}
// @info
// DOMRect polyfill
// @src
// https://drafts.fxtf.org/geometry/#DOMRect
// https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/geometry/dom_rect_read_only.cc
class DOMRect {
constructor(x = 0, y = 0, width = 0, height = 0) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
static fromRect(otherRect) {
return new DOMRect(otherRect.x, otherRect.y, otherRect.width, otherRect.height);
}
get top() {
return this.y;
}
get left() {
return this.x;
}
get right() {
return this.x + this.width;
}
get bottom() {
return this.y + this.height;
}
toJSON() {
return {
x: this.x,
y: this.y,
width: this.width,
height: this.height,
top: this.top,
left: this.left,
right: this.right,
bottom: this.bottom
};
}
}
for (let propertyName of ["top", "right", "bottom", "left"]) {
let propertyDescriptor = Object.getOwnPropertyDescriptor(DOMRect.prototype, propertyName);
propertyDescriptor.enumerable = true;
Object.defineProperty(DOMRect.prototype, propertyName, propertyDescriptor);
}
// @info
// DOMMatrix polyfill (SVG 2)
// @src
// https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/geometry/dom_matrix_read_only.cc
// https://github.com/tocharomera/generativecanvas/blob/master/node-canvas/lib/DOMMatrix.js
const M11 = 0, M12 = 1, M13 = 2, M14 = 3;
const M21 = 4, M22 = 5, M23 = 6, M24 = 7;
const M31 = 8, M32 = 9, M33 = 10, M34 = 11;
const M41 = 12, M42 = 13, M43 = 14, M44 = 15;
const A = M11, B = M12;
const C = M21, D = M22;
const E = M41, F = M42;
const DEGREE_PER_RAD = 180 / Math.PI;
const RAD_PER_DEGREE = Math.PI / 180;
const $values = Symbol();
const $is2D = Symbol();
let parseMatrix = (init) => {
let parsed = init.replace(/matrix\(/, "");
parsed = parsed.split(/,/, 7);
if (parsed.length !== 6) {
throw new Error(`Failed to parse ${init}`);
}
parsed = parsed.map(parseFloat);
return [
parsed[0], parsed[1], 0, 0,
parsed[2], parsed[3], 0, 0,
0, 0, 1, 0,
parsed[4], parsed[5], 0, 1
];
};
let parseMatrix3d = (init) => {
let parsed = init.replace(/matrix3d\(/, "");
parsed = parsed.split(/,/, 17);
if (parsed.length !== 16) {
throw new Error(`Failed to parse ${init}`);
}
return parsed.map(parseFloat);
};
let parseTransform = (tform) => {
let type = tform.split(/\(/, 1)[0];
if (type === "matrix") {
return parseMatrix(tform);
}
else if (type === "matrix3d") {
return parseMatrix3d(tform);
}
else {
throw new Error(`${type} parsing not implemented`)
}
};
let setNumber2D = (receiver, index, value) => {
if (typeof value !== "number") {
throw new TypeError("Expected number");
}
receiver[$values][index] = value;
};
let setNumber3D = (receiver, index, value) => {
if (typeof value !== "number") {
throw new TypeError("Expected number");
}
if (index === M33 || index === M44) {
if (value !== 1) {
receiver[$is2D] = false;
}
}
else if (value !== 0) {
receiver[$is2D] = false;
}
receiver[$values][index] = value;
};
let newInstance = (values) => {
let instance = Object.create(DOMMatrix.prototype);
instance.constructor = DOMMatrix;
instance[$is2D] = true;
instance[$values] = values;
return instance;
};
let multiply = (first, second) => {
let dest = new Float64Array(16);
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
let sum = 0;
for (let k = 0; k < 4; k++) {
sum += first[i * 4 + k] * second[k * 4 + j];
}
dest[i * 4 + j] = sum;
}
}
return dest;
};
class DOMMatrix {
get m11() { return this[$values][M11]; } set m11(value) { setNumber2D(this, M11, value); }
get m12() { return this[$values][M12]; } set m12(value) { setNumber2D(this, M12, value); }
get m13() { return this[$values][M13]; } set m13(value) { setNumber3D(this, M13, value); }
get m14() { return this[$values][M14]; } set m14(value) { setNumber3D(this, M14, value); }
get m21() { return this[$values][M21]; } set m21(value) { setNumber2D(this, M21, value); }
get m22() { return this[$values][M22]; } set m22(value) { setNumber2D(this, M22, value); }
get m23() { return this[$values][M23]; } set m23(value) { setNumber3D(this, M23, value); }
get m24() { return this[$values][M24]; } set m24(value) { setNumber3D(this, M24, value); }
get m31() { return this[$values][M31]; } set m31(value) { setNumber3D(this, M31, value); }
get m32() { return this[$values][M32]; } set m32(value) { setNumber3D(this, M32, value); }
get m33() { return this[$values][M33]; } set m33(value) { setNumber3D(this, M33, value); }
get m34() { return this[$values][M34]; } set m34(value) { setNumber3D(this, M34, value); }
get m41() { return this[$values][M41]; } set m41(value) { setNumber2D(this, M41, value); }
get m42() { return this[$values][M42]; } set m42(value) { setNumber2D(this, M42, value); }
get m43() { return this[$values][M43]; } set m43(value) { setNumber3D(this, M43, value); }
get m44() { return this[$values][M44]; } set m44(value) { setNumber3D(this, M44, value); }
get a() { return this[$values][A]; } set a(value) { setNumber2D(this, A, value); }
get b() { return this[$values][B]; } set b(value) { setNumber2D(this, B, value); }
get c() { return this[$values][C]; } set c(value) { setNumber2D(this, C, value); }
get d() { return this[$values][D]; } set d(value) { setNumber2D(this, D, value); }
get e() { return this[$values][E]; } set e(value) { setNumber2D(this, E, value); }
get f() { return this[$values][F]; } set f(value) { setNumber2D(this, F, value); }
get is2D() {
return this[$is2D];
}
get isIdentity() {
let values = this[$values];
return values[M11] === 1 && values[M12] === 0 && values[M13] === 0 && values[M14] === 0 &&
values[M21] === 0 && values[M22] === 1 && values[M23] === 0 && values[M24] === 0 &&
values[M31] === 0 && values[M32] === 0 && values[M33] === 1 && values[M34] === 0 &&
values[M41] === 0 && values[M42] === 0 && values[M43] === 0 && values[M44] === 1;
}
static fromMatrix(init) {
if (init instanceof DOMMatrix) {
return new DOMMatrix(init[$values]);
}
else if (init instanceof SVGMatrix) {
return new DOMMatrix([init.a, init.b, init.c, init.d, init.e, init.f]);
}
else {
throw new TypeError("Expected DOMMatrix");
}
}
static fromFloat32Array(init) {
if (!(init instanceof Float32Array)) throw new TypeError("Expected Float32Array");
return new DOMMatrix(init);
}
static fromFloat64Array(init) {
if (!(init instanceof Float64Array)) throw new TypeError("Expected Float64Array");
return new DOMMatrix(init);
}
// @type
// (Float64Array) => void
constructor(init) {
this[$is2D] = true;
this[$values] = new Float64Array([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]);
// Parse CSS transformList
if (typeof init === "string") {
if (init === "") {
return;
}
else {
let tforms = init.split(/\)\s+/, 20).map(parseTransform);
if (tforms.length === 0) {
return;
}
init = tforms[0];
for (let i = 1; i < tforms.length; i++) {
init = multiply(tforms[i], init);
}
}
}
let i = 0;
if (init && init.length === 6) {
setNumber2D(this, A, init[i++]);
setNumber2D(this, B, init[i++]);
setNumber2D(this, C, init[i++]);
setNumber2D(this, D, init[i++]);
setNumber2D(this, E, init[i++]);
setNumber2D(this, F, init[i++]);
}
else if (init && init.length === 16) {
setNumber2D(this, M11, init[i++]);
setNumber2D(this, M12, init[i++]);
setNumber3D(this, M13, init[i++]);
setNumber3D(this, M14, init[i++]);
setNumber2D(this, M21, init[i++]);
setNumber2D(this, M22, init[i++]);
setNumber3D(this, M23, init[i++]);
setNumber3D(this, M24, init[i++]);
setNumber3D(this, M31, init[i++]);
setNumber3D(this, M32, init[i++]);
setNumber3D(this, M33, init[i++]);
setNumber3D(this, M34, init[i++]);
setNumber2D(this, M41, init[i++]);
setNumber2D(this, M42, init[i++]);
setNumber3D(this, M43, init[i++]);
setNumber3D(this, M44, init[i]);
}
else if (init !== undefined) {
throw new TypeError("Expected string or array.");
}
}
dump(){
let mat = this[$values]
console.log([
mat.slice(0,4),
mat.slice(4,8),
mat.slice(8,12),
mat.slice(12,16)
])
}
[inspect.custom](depth, options) {
if (depth < 0) return "[DOMMatrix]"
let {a, b, c, d, e, f, is2D, isIdentity} = this
if (this.is2D){
return `DOMMatrix ${inspect({a, b, c, d, e, f, is2D, isIdentity}, {colors:true})}`
}else{
let {m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44, is2D, isIdentity} = this
return `DOMMatrix ${inspect({a, b, c, d, e, f, m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44, is2D, isIdentity}, {colors:true})}`
}
}
multiply(other) {
return newInstance(this[$values]).multiplySelf(other);
}
multiplySelf(other) {
this[$values] = multiply(other[$values], this[$values]);
if (!other.is2D) {
this[$is2D] = false;
}
return this;
}
preMultiplySelf(other) {
this[$values] = multiply(this[$values], other[$values]);
if (!other.is2D) {
this[$is2D] = false;
}
return this;
}
translate(tx, ty, tz) {
return newInstance(this[$values]).translateSelf(tx, ty, tz);
}
translateSelf(tx = 0, ty = 0, tz = 0) {
this[$values] = multiply([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, tz, 1
], this[$values]);
if (tz !== 0) {
this[$is2D] = false;
}
return this;
}
scale(scaleX, scaleY, scaleZ, originX, originY, originZ) {
return newInstance(this[$values]).scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ);
}
scale3d(scale, originX, originY, originZ) {
return newInstance(this[$values]).scale3dSelf(scale, originX, originY, originZ);
}
scale3dSelf(scale, originX, originY, originZ) {
return this.scaleSelf(scale, scale, scale, originX, originY, originZ);
}
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ) {
// Not redundant with translate's checks because we need to negate the values later.
if (typeof originX !== "number") originX = 0;
if (typeof originY !== "number") originY = 0;
if (typeof originZ !== "number") originZ = 0;
this.translateSelf(originX, originY, originZ);
if (typeof scaleX !== "number") scaleX = 1;
if (typeof scaleY !== "number") scaleY = scaleX;
if (typeof scaleZ !== "number") scaleZ = 1;
this[$values] = multiply([
scaleX, 0, 0, 0,
0, scaleY, 0, 0,
0, 0, scaleZ, 0,
0, 0, 0, 1
], this[$values]);
this.translateSelf(-originX, -originY, -originZ);
if (scaleZ !== 1 || originZ !== 0) {
this[$is2D] = false;
}
return this;
}
rotateFromVector(x, y) {
return newInstance(this[$values]).rotateFromVectorSelf(x, y);
}
rotateFromVectorSelf(x = 0, y = 0) {
let theta = (x === 0 && y === 0) ? 0 : Math.atan2(y, x) * DEGREE_PER_RAD;
return this.rotateSelf(theta);
}
rotate(rotX, rotY, rotZ) {
return newInstance(this[$values]).rotateSelf(rotX, rotY, rotZ);
}
rotateSelf(rotX, rotY, rotZ) {
if (rotY === undefined && rotZ === undefined) {
rotZ = rotX;
rotX = rotY = 0;
}
if (typeof rotY !== "number") rotY = 0;
if (typeof rotZ !== "number") rotZ = 0;
if (rotX !== 0 || rotY !== 0) {
this[$is2D] = false;
}
rotX *= RAD_PER_DEGREE;
rotY *= RAD_PER_DEGREE;
rotZ *= RAD_PER_DEGREE;
let c = Math.cos(rotZ);
let s = Math.sin(rotZ);
this[$values] = multiply([
c, s, 0, 0,
-s, c, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
], this[$values]);
c = Math.cos(rotY);
s = Math.sin(rotY);
this[$values] = multiply([
c, 0, -s, 0,
0, 1, 0, 0,
s, 0, c, 0,
0, 0, 0, 1
], this[$values]);
c = Math.cos(rotX);
s = Math.sin(rotX);
this[$values] = multiply([
1, 0, 0, 0,
0, c, s, 0,
0, -s, c, 0,
0, 0, 0, 1
], this[$values]);
return this;
}
rotateAxisAngle(x, y, z, angle) {
return newInstance(this[$values]).rotateAxisAngleSelf(x, y, z, angle);
}
rotateAxisAngleSelf(x = 0, y = 0, z = 0, angle = 0) {
let length = Math.sqrt(x * x + y * y + z * z);
if (length === 0) {
return this;
}
if (length !== 1) {
x /= length;
y /= length;
z /= length;
}
angle *= RAD_PER_DEGREE;
let c = Math.cos(angle);
let s = Math.sin(angle);
let t = 1 - c;
let tx = t * x;
let ty = t * y;
this[$values] = multiply([
tx * x + c, tx * y + s * z, tx * z - s * y, 0,
tx * y - s * z, ty * y + c, ty * z + s * x, 0,
tx * z + s * y, ty * z - s * x, t * z * z + c, 0,
0, 0, 0, 1
], this[$values]);
if (x !== 0 || y !== 0) {
this[$is2D] = false;
}
return this;
}
skewX(sx) {
return newInstance(this[$values]).skewXSelf(sx);
}
skewXSelf(sx) {
if (typeof sx !== "number") {
return this;
}
let t = Math.tan(sx * RAD_PER_DEGREE);
this[$values] = multiply([
1, 0, 0, 0,
t, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
], this[$values]);
return this;
}
skewY(sy) {
return newInstance(this[$values]).skewYSelf(sy);
}
skewYSelf(sy) {
if (typeof sy !== "number") {
return this;
}
let t = Math.tan(sy * RAD_PER_DEGREE);
this[$values] = multiply([
1, t, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
], this[$values]);
return this;
}
flipX() {
return newInstance(multiply([
-1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
], this[$values]));
}
flipY() {
return newInstance(multiply([
1, 0, 0, 0,
0, -1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
], this[$values]));
}
inverse () {
return newInstance(this[$values]).invertSelf();
}
invertSelf() {
if (this[$is2D]) {
let det = this[$values][A] * this[$values][D] - this[$values][B] * this[$values][C];
// Invertable
if (det !== 0) {
let result = new DOMMatrix();
result.a = this[$values][D] / det;
result.b = -this[$values][B] / det;
result.c = -this[$values][C] / det;
result.d = this[$values][A] / det;
result.e = (this[$values][C] * this[$values][F] - this[$values][D] * this[$values][E]) / det;
result.f = (this[$values][B] * this[$values][E] - this[$values][A] * this[$values][F]) / det;
return result;
}
// Not invertable
else {
this[$is2D] = false;
this[$values] = [
NaN, NaN, NaN, NaN,
NaN, NaN, NaN, NaN,
NaN, NaN, NaN, NaN,
NaN, NaN, NaN, NaN
];
}
}
else {
throw new Error("3D matrix inversion is not implemented.");
}
}
setMatrixValue(transformList) {
let temp = new DOMMatrix(transformList);
this[$values] = temp[$values];
this[$is2D] = temp[$is2D];
return this;
}
transformPoint(point) {
let x = point.x;
let y = point.y;
let z = point.z;
let w = point.w;
let values = this[$values];
let nx = values[M11] * x + values[M21] * y + values[M31] * z + values[M41] * w;
let ny = values[M12] * x + values[M22] * y + values[M32] * z + values[M42] * w;
let nz = values[M13] * x + values[M23] * y + values[M33] * z + values[M43] * w;
let nw = values[M14] * x + values[M24] * y + values[M34] * z + values[M44] * w;
return new DOMPoint(nx, ny, nz, nw);
}
toFloat32Array() {
return Float32Array.from(this[$values]);
}
toFloat64Array() {
return this[$values].slice(0);
}
toJSON() {
return {
a: this.a,
b: this.b,
c: this.c,
d: this.d,
e: this.e,
f: this.f,
m11: this.m11,
m12: this.m12,
m13: this.m13,
m14: this.m14,
m21: this.m21,
m22: this.m22,
m23: this.m23,
m24: this.m24,
m31: this.m31,
m32: this.m32,
m33: this.m33,
m34: this.m34,
m41: this.m41,
m42: this.m42,
m43: this.m43,
m44: this.m44,
is2D: this.is2D,
isIdentity: this.isIdentity
};
}
toString() {
if (this.is2D) {
return `matrix(${this.a}, ${this.b}, ${this.c}, ${this.d}, ${this.e}, ${this.f})`;
}
else {
return `matrix3d(${this[$values].join(", ")})`;
}
}
}
for (let propertyName of [
"a", "b", "c", "d", "e", "f",
"m11", "m12", "m13", "m14",
"m21", "m22", "m23", "m24",
"m31", "m32", "m33", "m34",
"m41", "m42", "m43", "m44",
"is2D", "isIdentity"
]) {
let propertyDescriptor = Object.getOwnPropertyDescriptor(DOMMatrix.prototype, propertyName);
propertyDescriptor.enumerable = true;
Object.defineProperty(DOMMatrix.prototype, propertyName, propertyDescriptor);
}
module.exports = {DOMPoint, DOMMatrix, DOMRect}