🔧

wcandillon · wcandillon · commit e2c923e22568 · 2023-12-11T21:52:41.000+01:00
diff --git a/package/cpp/rnskia/dom/props/TransformProp.h b/package/cpp/rnskia/dom/props/TransformProp.h
@@ -10,6 +10,8 @@ namespace RNSkia {
 
 static PropId PropNameTranslateX = JsiPropId::get("translateX");
 static PropId PropNameTranslateY = JsiPropId::get("translateY");
+static PropId PropNameTranslateZ = JsiPropId::get("translateZ");
+static PropId PropNameTranslate = JsiPropId::get("translate");
 static PropId PropNameScale = JsiPropId::get("scale");
 static PropId PropNameScaleX = JsiPropId::get("scaleX");
 static PropId PropNameScaleY = JsiPropId::get("scaleY");
@@ -18,6 +20,13 @@ static PropId PropNameSkewY = JsiPropId::get("skewY");
 static PropId PropNameRotate = JsiPropId::get("rotate");
 static PropId PropNameRotateZ = JsiPropId::get("rotateZ");
 
+/*
+  | "perspective"
+  | "rotateX"
+  | "rotateY"
+  | "matrix"
+*/
+
 class TransformProp : public DerivedProp<SkMatrix> {
 public:
   explicit TransformProp(PropId name,
@@ -34,6 +43,7 @@ class TransformProp : public DerivedProp<SkMatrix> {
           "Expected array for transform property, got " +
           JsiValue::getTypeAsString(_transformProp->value().getType()));
     } else {
+      SkM44 m4;
       auto m = std::make_shared<SkMatrix>(SkMatrix());
       for (auto &el : _transformProp->value().getAsArray()) {
         auto keys = el.getKeys();
@@ -44,23 +54,43 @@ class TransformProp : public DerivedProp<SkMatrix> {
               "scaleX, scaleY, skewX, skewY, rotate or rotateZ.");
         }
         auto key = el.getKeys().at(0);
-        auto value = el.getValue(key).getAsNumber();
         if (key == PropNameTranslateX) {
-          m->preTranslate(value, 0);
+          auto x = el.getValue(key).getAsNumber();
+          SkM44 trX(1, 0, 0, x, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+          m4.preConcat(trX);
         } else if (key == PropNameTranslateY) {
-          m->preTranslate(0, value);
+          auto y = el.getValue(key).getAsNumber();
+          SkM44 trY(1, 0, 0, 0, 0, 1, 0, y, 0, 0, 1, 0, 0, 0, 0, 1);
+          m4.preConcat(trY);
+        } else if (key == PropNameTranslateZ) {
+          auto z = el.getValue(key).getAsNumber();
+          SkM44 trZ(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, z, 0, 0, 0, 1);
+          m4.preConcat(trZ);
         } else if (key == PropNameScale) {
-          m->preScale(value, value);
+          auto s = el.getValue(key).getAsNumber();
+          SkM44 scale(s, 0, 0, 0, 0, s, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+          m4.preConcat(scale);
         } else if (key == PropNameScaleX) {
-          m->preScale(value, 1);
+          auto s = el.getValue(key).getAsNumber();
+          SkM44 scale(s, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+          m4.preConcat(scale);
         } else if (key == PropNameScaleY) {
-          m->preScale(1, value);
+          auto s = el.getValue(key).getAsNumber();
+          SkM44 scale(1, 0, 0, 0, 0, s, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+          m4.preConcat(scale);
         } else if (key == PropNameSkewX) {
-          m->preSkew(value, 0);
+          auto angle = el.getValue(key).getAsNumber();
+          SkM44 skewX(1, 0, 0, 0, std::tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+          m4.preConcat(skewX);
         } else if (key == PropNameSkewY) {
-          m->preSkew(0, value);
+          auto angle = el.getValue(key).getAsNumber();
+          SkM44 skewY(1, std::tan(angle), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+          m4.preConcat(skewY);
         } else if (key == PropNameRotate || key == PropNameRotateZ) {
-          m->preRotate(SkRadiansToDegrees(value));
+          auto angle = el.getValue(key).getAsNumber();
+          SkM44 rotate;
+          rotate.setRotateUnit({ 0, 0, 1}, angle);
+          m4.preConcat(rotate);
         } else {
           throw std::runtime_error(
               "Unknown key in transform. Expected translateX, translateY, "
@@ -69,6 +99,7 @@ class TransformProp : public DerivedProp<SkMatrix> {
               std::string(key) + ".");
         }
       }
+      m->preConcat(m4.asM33());
       setDerivedValue(m);
     }
   }
diff --git a/package/src/__tests__/snapshots/drawings/skew-transform.png b/package/src/__tests__/snapshots/drawings/skew-transform.png
diff --git a/package/src/__tests__/snapshots/drawings/skew-transform2.png b/package/src/__tests__/snapshots/drawings/skew-transform2.png
diff --git a/package/src/dom/nodes/datatypes/Fitting.ts b/package/src/dom/nodes/datatypes/Fitting.ts
@@ -9,12 +9,20 @@ export interface Size {
 
 export const size = (width = 0, height = 0) => ({ width, height });
 
-export const rect2rect = (src: SkRect, dst: SkRect) => {
+export const rect2rect = (
+  src: SkRect,
+  dst: SkRect
+): [
+  { translateX: number },
+  { translateY: number },
+  { scaleX: number },
+  { scaleY: number }
+] => {
   const scaleX = dst.width / src.width;
   const scaleY = dst.height / src.height;
   const translateX = dst.x - src.x * scaleX;
   const translateY = dst.y - src.y * scaleY;
-  return [{ translateX }, { translateY }, { scaleX }, { scaleY }] as const;
+  return [{ translateX }, { translateY }, { scaleX }, { scaleY }];
 };
 
 export const fitRects = (
diff --git a/package/src/dom/nodes/datatypes/Gradient.ts b/package/src/dom/nodes/datatypes/Gradient.ts
@@ -1,11 +1,11 @@
-import type { Skia, SkRect, Transforms2d, Vector } from "../../../skia/types";
+import type { Skia, SkRect, Transforms3d, Vector } from "../../../skia/types";
 import { TileMode } from "../../../skia/types";
 import type { GradientProps, ImageShaderProps } from "../../types";
 
 import { enumKey } from "./Enum";
 import { processTransformProps } from "./Transform";
 
-export const transformOrigin = (origin: Vector, transform: Transforms2d) => [
+export const transformOrigin = (origin: Vector, transform: Transforms3d) => [
   { translateX: origin.x },
   { translateY: origin.y },
   ...transform,
diff --git a/package/src/dom/types/Common.ts b/package/src/dom/types/Common.ts
@@ -11,7 +11,7 @@ import type {
   SkRRect,
   StrokeCap,
   StrokeJoin,
-  Transforms2d,
+  Transforms3d,
   Vector,
 } from "../../skia/types";
 
@@ -64,7 +64,7 @@ export interface ScalarCircleDef {
 export type CircleDef = PointCircleDef | ScalarCircleDef;
 
 export interface TransformProps {
-  transform?: Transforms2d;
+  transform?: Transforms3d;
   origin?: Vector;
   matrix?: SkMatrix | number[];
 }
diff --git a/package/src/skia/core/Matrix.ts b/package/src/skia/core/Matrix.ts
@@ -1,6 +1,6 @@
 import { Skia } from "../Skia";
-import type { Transforms2d } from "../types";
+import type { Transforms3d } from "../types";
 import { processTransform } from "../types";
 
-export const processTransform2d = (transforms: Transforms2d) =>
+export const processTransform2d = (transforms: Transforms3d) =>
   processTransform(Skia.Matrix(), transforms);
diff --git a/package/src/skia/core/Vector.ts b/package/src/skia/core/Vector.ts
@@ -22,7 +22,10 @@ export const dist = (a: Vector, b: Vector) => {
   "worklet";
   return Math.hypot(a.x - b.x, a.y - b.y);
 };
-export const translate = ({ x, y }: Vector) => {
+export const translate = ({
+  x,
+  y,
+}: Vector): [{ translateX: number }, { translateY: number }] => {
   "worklet";
-  return [{ translateX: x }, { translateY: y }] as const;
+  return [{ translateX: x }, { translateY: y }];
 };
diff --git a/package/src/skia/types/Canvas.ts b/package/src/skia/types/Canvas.ts
@@ -485,7 +485,7 @@ export interface SkCanvas {
    * Replaces current matrix with m premultiplied with the existing matrix.
    * @param m
    */
-  concat(m: SkMatrix): void;
+  concat(m: SkMatrix | number[]): void;
 
   /**
    * Draws the given picture using the current clip, current matrix, and the provided paint.
diff --git a/package/src/skia/types/Matrix.ts b/package/src/skia/types/Matrix.ts
@@ -1,5 +1,7 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
+import type { Transforms3d } from "./Matrix4";
+import { processTransform3d } from "./Matrix4";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -29,88 +31,19 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   get: () => number[];
 }
 
-type Transform2dName =
-  | "translateX"
-  | "translateY"
-  | "scale"
-  | "skewX"
-  | "skewY"
-  | "scaleX"
-  | "scaleY"
-  | "rotateZ"
-  | "rotate";
-
-type Transformations = {
-  readonly [Name in Transform2dName]: number;
-};
-
-export type Transforms2d = readonly (
-  | Pick<Transformations, "translateX">
-  | Pick<Transformations, "translateY">
-  | Pick<Transformations, "scale">
-  | Pick<Transformations, "scaleX">
-  | Pick<Transformations, "scaleY">
-  | Pick<Transformations, "skewX">
-  | Pick<Transformations, "skewY">
-  | Pick<Transformations, "rotate">
-)[];
-
 export interface TransformProp {
-  transform?: Transforms2d;
+  transform?: Transforms3d;
 }
 
 export const processTransform = <T extends SkMatrix | SkCanvas>(
   m: T,
-  transforms: Transforms2d
+  transforms: Transforms3d
 ) => {
-  for (const transform of transforms) {
-    const key = Object.keys(transform)[0] as Transform2dName;
-    const value = (transform as Pick<Transformations, typeof key>)[key];
-    if (key === "translateX") {
-      m.translate(value, 0);
-      continue;
-    }
-    if (key === "translateY") {
-      m.translate(0, value);
-      continue;
-    }
-    if (key === "scale") {
-      m.scale(value, value);
-      continue;
-    }
-    if (key === "scaleX") {
-      m.scale(value, 1);
-      continue;
-    }
-    if (key === "scaleY") {
-      m.scale(1, value);
-      continue;
-    }
-    if (key === "skewX") {
-      m.skew(value, 0);
-      continue;
-    }
-    if (key === "skewY") {
-      m.skew(0, value);
-      continue;
-    }
-    if (key === "rotate" || key === "rotateZ") {
-      if (isMatrix(m)) {
-        m.rotate(value);
-      } else {
-        m.rotate(toDegrees(value), 0, 0);
-      }
-      continue;
-    }
-    exhaustiveCheck(key);
-  }
+  const m3 = processTransform3d(transforms);
+  m.concat(m3);
   return m;
 };
 
-const exhaustiveCheck = (a: never): never => {
-  throw new Error(`Unknown transformation: ${a}`);
-};
-
 export const toDegrees = (rad: number) => {
   return (rad * 180) / Math.PI;
 };
diff --git a/package/src/skia/types/Matrix4.ts b/package/src/skia/types/Matrix4.ts
@@ -36,7 +36,6 @@ type Transform3dName =
   | "perspective"
   | "rotateX"
   | "rotateY"
-  | "rotateZ"
   | "matrix";
 
 type Transformations = {
@@ -89,16 +88,6 @@ const scale = (sx: number, sy: number, sz: number): Matrix4 => {
   return [sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1];
 };
 
-const skewX = (s: number): Matrix4 => {
-  "worklet";
-  return [1, 0, 0, 0, Math.tan(s), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-};
-
-const skewY = (s: number): Matrix4 => {
-  "worklet";
-  return [1, Math.tan(s), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-};
-
 const perspective = (p: number): Matrix4 => {
   "worklet";
   return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -1 / p, 1];
@@ -191,6 +180,16 @@ const multiply4 = (a: Matrix4, b: Matrix4): Matrix4 => {
   return result as unknown as Matrix4;
 };
 
+const skewY = (angle: number): Matrix4 => {
+  "worklet";
+  return [1, Math.tan(angle), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+};
+
+const skewX = (angle: number): Matrix4 => {
+  "worklet";
+  return [1, 0, 0, 0, Math.tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+};
+
 const toMatrix3 = (m: Matrix4) => {
   "worklet";
   return [m[0], m[1], m[3], m[4], m[5], m[7], m[12], m[13], m[15]];
diff --git a/package/src/skia/web/JsiSkCanvas.ts b/package/src/skia/web/JsiSkCanvas.ts
@@ -368,8 +368,8 @@ export class JsiSkCanvas
     );
   }
 
-  concat(m: SkMatrix) {
-    this.ref.concat(JsiSkMatrix.fromValue(m));
+  concat(m: SkMatrix | number[]) {
+    this.ref.concat(Array.isArray(m) ? m : JsiSkMatrix.fromValue(m));
   }
 
   drawPicture(skp: SkPicture) {
