fix(DOMMatrix/DOMPoint): spec compatibility

Automattic · Dec 23, 2024 · f5894db · f5894db
1 parent b6b2dc7
commit f5894db
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -45,6 +45,7 @@ This release notably changes to using N-API. 🎉
 * Fix TextMetrics type to include alphabeticBaseline, emHeightAscent, and emHeightDescent properties
 * Fix class properties should have defaults as standard js classes (#2390)
 * Fixed Exif orientation in JPEG files being ignored (#1670)
+* Align DOMMatrix/DOMPoint to spec by adding missing methods
 
 2.11.2
 ==================

diff --git a/index.d.ts b/index.d.ts
@@ -400,10 +400,13 @@ export class DOMPoint {
 	x: number;
 	y: number;
 	z: number;
+	matrixTransform(matrix?: DOMMatrixInit): DOMPoint;
+	toJSON(): any;
+	static fromPoint(other?: DOMPointInit): DOMPoint;
 }
 
 export class DOMMatrix {
-	constructor(init: string | number[]);
+	constructor(init?: string | number[]);
 	toString(): string;
 	multiply(other?: DOMMatrix): DOMMatrix;
 	multiplySelf(other?: DOMMatrix): DOMMatrix;
@@ -414,6 +417,10 @@ export class DOMMatrix {
 	scale3d(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
 	scale3dSelf(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
 	scaleSelf(scaleX?: number, scaleY?: number, scaleZ?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
+	/**
+	 * @deprecated
+	 */
+	scaleNonUniform(scaleX?: number, scaleY?: number): DOMMatrix;
 	rotateFromVector(x?: number, y?: number): DOMMatrix;
 	rotateFromVectorSelf(x?: number, y?: number): DOMMatrix;
 	rotate(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
@@ -430,6 +437,7 @@ export class DOMMatrix {
 	invertSelf(): DOMMatrix;
 	setMatrixValue(transformList: string): DOMMatrix;
 	transformPoint(point?: DOMPoint): DOMPoint;
+	toJSON(): any;
 	toFloat32Array(): Float32Array;
 	toFloat64Array(): Float64Array;
 	readonly is2D: boolean;

diff --git a/lib/DOMMatrix.js b/lib/DOMMatrix.js
@@ -17,6 +17,24 @@ class DOMPoint {
     this.z = typeof z === 'number' ? z : 0
     this.w = typeof w === 'number' ? w : 1
   }
+
+  matrixTransform(init) {
+    const m = init instanceof DOMMatrix ? init : new DOMMatrix(init)
+    return m.transformPoint(this)
+  }
+
+  toJSON() {
+    return {
+      x: this.x,
+      y: this.y,
+      z: this.z,
+      w: this.w
+    }
+  }
+
+  static fromPoint(other) {
+    return new this(other.x, other.y, other.z, other.w)
+  }
 }
 
 // Constants to index into _values (col-major)
@@ -163,6 +181,13 @@ class DOMMatrix {
     return this.scaleSelf(scale, scale, scale, originX, originY, originZ)
   }
 
+  /**
+   * @deprecated
+   */
+  scaleNonUniform(scaleX, scaleY) {
+    return this.scale(scaleX, scaleY)
+  }
+
   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
@@ -587,6 +612,37 @@ Object.defineProperties(DOMMatrix.prototype, {
              values[M31] === 0 && values[M32] === 0 && values[M33] === 1 && values[M34] === 0 &&
              values[M41] === 0 && values[M42] === 0 && values[M43] === 0 && values[M44] === 1)
     }
+  },
+
+  toJSON: {
+    value() {
+      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,
+        m23: this.m23,
+        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,
+      }
+    }
   }
 })
 

diff --git a/test/dommatrix.test.js b/test/dommatrix.test.js
@@ -586,4 +586,68 @@ describe('DOMMatrix', function () {
         'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1)')
     })
   })
+
+  describe('toJSON', function () {
+    it('works, 2d', function () {
+      const x = new DOMMatrix()
+      assert.deepStrictEqual(x.toJSON(), {
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+        e: 0,
+        f: 0,
+        m11: 1,
+        m12: 0,
+        m13: 0,
+        m14: 0,
+        m21: 0,
+        m22: 1,
+        m23: 0,
+        m23: 0,
+        m31: 0,
+        m32: 0,
+        m33: 1,
+        m34: 0,
+        m41: 0,
+        m42: 0,
+        m43: 0,
+        m44: 1,
+        is2D: true,
+        isIdentity: true,
+      })
+    })
+
+    it('works, 3d', function () {
+      const x = new DOMMatrix()
+      x.m31 = 1
+      assert.equal(x.is2D, false)
+      assert.deepStrictEqual(x.toJSON(), {
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+        e: 0,
+        f: 0,
+        m11: 1,
+        m12: 0,
+        m13: 0,
+        m14: 0,
+        m21: 0,
+        m22: 1,
+        m23: 0,
+        m23: 0,
+        m31: 1,
+        m32: 0,
+        m33: 1,
+        m34: 0,
+        m41: 0,
+        m42: 0,
+        m43: 0,
+        m44: 1,
+        is2D: false,
+        isIdentity: false,
+      })
+    })
+  })
 })