@shopify/react-native-skia 0.1.187 → 0.1.189

package/lib/module/skia/web/JsiSkMatrix.js.map

@@ -1 +1 @@
-{"version":3,"names":["HostObject","JsiSkMatrix","constructor","CanvasKit","ref","concat","matrix","set","Matrix","multiply","fromValue","translate","x","y","Float32Array","of","translated","scale","scaled","skew","skewed","rotate","value","rotated","identity","get","Array","from"],"sources":["JsiSkMatrix.ts"],"sourcesContent":["import type { CanvasKit, Matrix3x3 } from \"canvaskit-wasm\";\n\nimport type { SkMatrix } from \"../types\";\n\nimport { HostObject } from \"./Host\";\n\nexport class JsiSkMatrix\n  extends HostObject<Matrix3x3, \"Matrix\">\n  implements SkMatrix\n{\n  constructor(CanvasKit: CanvasKit, ref: Matrix3x3) {\n    super(CanvasKit, ref, \"Matrix\");\n  }\n\n  concat(matrix: SkMatrix) {\n    this.ref.set(\n      this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))\n    );\n  }\n\n  translate(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))\n      )\n    );\n  }\n\n  scale(x: number, y?: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))\n      )\n    );\n  }\n\n  skew(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))\n      )\n    );\n  }\n\n  rotate(value: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.rotated(value))\n      )\n    );\n  }\n\n  identity() {\n    this.ref.set(this.CanvasKit.Matrix.identity());\n  }\n\n  get() {\n    return Array.from(this.ref);\n  }\n}\n"],"mappings":"AAIA,SAASA,UAAT,QAA2B,QAA3B;AAEA,OAAO,MAAMC,WAAN,SACGD,UADH,CAGP;EACEE,WAAW,CAACC,SAAD,EAAuBC,GAAvB,EAAuC;IAChD,MAAMD,SAAN,EAAiBC,GAAjB,EAAsB,QAAtB;EACD;;EAEDC,MAAM,CAACC,MAAD,EAAmB;IACvB,KAAKF,GAAL,CAASG,GAAT,CACE,KAAKJ,SAAL,CAAeK,MAAf,CAAsBC,QAAtB,CAA+B,KAAKL,GAApC,EAAyCH,WAAW,CAACS,SAAZ,CAAsBJ,MAAtB,CAAzC,CADF;EAGD;;EAEDK,SAAS,CAACC,CAAD,EAAYC,CAAZ,EAAuB;IAC9B,KAAKR,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBQ,UAAtB,CAAiCJ,CAAjC,EAAoCC,CAApC,CAAnB,CAFF,CADF;EAMD;;EAEDI,KAAK,CAACL,CAAD,EAAYC,CAAZ,EAAwB;IAC3B,KAAKR,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBU,MAAtB,CAA6BN,CAA7B,EAAgCC,CAAhC,aAAgCA,CAAhC,cAAgCA,CAAhC,GAAqCD,CAArC,CAAnB,CAFF,CADF;EAMD;;EAEDO,IAAI,CAACP,CAAD,EAAYC,CAAZ,EAAuB;IACzB,KAAKR,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBY,MAAtB,CAA6BR,CAA7B,EAAgCC,CAAhC,CAAnB,CAFF,CADF;EAMD;;EAEDQ,MAAM,CAACC,KAAD,EAAgB;IACpB,KAAKjB,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBe,OAAtB,CAA8BD,KAA9B,CAAnB,CAFF,CADF;EAMD;;EAEDE,QAAQ,GAAG;IACT,KAAKpB,GAAL,CAASG,GAAT,CAAa,KAAKJ,SAAL,CAAeK,MAAf,CAAsBgB,QAAtB,EAAb;EACD;;EAEDC,GAAG,GAAG;IACJ,OAAOC,KAAK,CAACC,IAAN,CAAW,KAAKvB,GAAhB,CAAP;EACD;;AArDH"}
+{"version":3,"names":["HostObject","JsiSkMatrix","constructor","CanvasKit","ref","concat","matrix","set","Matrix","multiply","fromValue","translate","x","y","Float32Array","of","translated","scale","scaled","skew","skewed","rotate","value","rotated","identity","get","Array","from"],"sources":["JsiSkMatrix.ts"],"sourcesContent":["import type { CanvasKit, Matrix3x3 } from \"canvaskit-wasm\";\n\nimport type { SkMatrix } from \"../types\";\n\nimport { HostObject } from \"./Host\";\n\nexport class JsiSkMatrix\n  extends HostObject<Matrix3x3, \"Matrix\">\n  implements SkMatrix\n{\n  constructor(CanvasKit: CanvasKit, ref: Matrix3x3) {\n    super(CanvasKit, ref, \"Matrix\");\n  }\n\n  concat(matrix: SkMatrix) {\n    this.ref.set(\n      this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))\n    );\n    return this;\n  }\n\n  translate(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))\n      )\n    );\n    return this;\n  }\n\n  scale(x: number, y?: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))\n      )\n    );\n    return this;\n  }\n\n  skew(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))\n      )\n    );\n    return this;\n  }\n\n  rotate(value: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.rotated(value))\n      )\n    );\n    return this;\n  }\n\n  identity() {\n    this.ref.set(this.CanvasKit.Matrix.identity());\n    return this;\n  }\n\n  get() {\n    return Array.from(this.ref);\n  }\n}\n"],"mappings":"AAIA,SAASA,UAAT,QAA2B,QAA3B;AAEA,OAAO,MAAMC,WAAN,SACGD,UADH,CAGP;EACEE,WAAW,CAACC,SAAD,EAAuBC,GAAvB,EAAuC;IAChD,MAAMD,SAAN,EAAiBC,GAAjB,EAAsB,QAAtB;EACD;;EAEDC,MAAM,CAACC,MAAD,EAAmB;IACvB,KAAKF,GAAL,CAASG,GAAT,CACE,KAAKJ,SAAL,CAAeK,MAAf,CAAsBC,QAAtB,CAA+B,KAAKL,GAApC,EAAyCH,WAAW,CAACS,SAAZ,CAAsBJ,MAAtB,CAAzC,CADF;IAGA,OAAO,IAAP;EACD;;EAEDK,SAAS,CAACC,CAAD,EAAYC,CAAZ,EAAuB;IAC9B,KAAKR,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBQ,UAAtB,CAAiCJ,CAAjC,EAAoCC,CAApC,CAAnB,CAFF,CADF;IAMA,OAAO,IAAP;EACD;;EAEDI,KAAK,CAACL,CAAD,EAAYC,CAAZ,EAAwB;IAC3B,KAAKR,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBU,MAAtB,CAA6BN,CAA7B,EAAgCC,CAAhC,aAAgCA,CAAhC,cAAgCA,CAAhC,GAAqCD,CAArC,CAAnB,CAFF,CADF;IAMA,OAAO,IAAP;EACD;;EAEDO,IAAI,CAACP,CAAD,EAAYC,CAAZ,EAAuB;IACzB,KAAKR,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBY,MAAtB,CAA6BR,CAA7B,EAAgCC,CAAhC,CAAnB,CAFF,CADF;IAMA,OAAO,IAAP;EACD;;EAEDQ,MAAM,CAACC,KAAD,EAAgB;IACpB,KAAKjB,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEW,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKZ,SAAL,CAAeK,MAAf,CAAsBe,OAAtB,CAA8BD,KAA9B,CAAnB,CAFF,CADF;IAMA,OAAO,IAAP;EACD;;EAEDE,QAAQ,GAAG;IACT,KAAKpB,GAAL,CAASG,GAAT,CAAa,KAAKJ,SAAL,CAAeK,MAAf,CAAsBgB,QAAtB,EAAb;IACA,OAAO,IAAP;EACD;;EAEDC,GAAG,GAAG;IACJ,OAAOC,KAAK,CAACC,IAAN,CAAW,KAAKvB,GAAhB,CAAP;EACD;;AA3DH"}

package/lib/typescript/src/animation/functions/interpolateColors.d.ts

@@ -1,3 +1,3 @@
 import type { Color } from "../../skia";
-export declare const interpolateColors: (value: number, inputRange: number[], _outputRange: Color[]) => Float32Array;
+export declare const interpolateColors: (value: number, inputRange: number[], _outputRange: Color[]) => number[];
 export declare const mixColors: (value: number, x: Color, y: Color) => Float32Array;

package/lib/typescript/src/skia/types/Color.d.ts

@@ -1,2 +1,2 @@
 export declare type SkColor = Float32Array;
-export declare type Color = string | Float32Array | number;
+export declare type Color = string | Float32Array | number | number[];

package/lib/typescript/src/skia/types/Matrix.d.ts

@@ -13,12 +13,12 @@ export declare enum MatrixIndex {
 }
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-    concat: (matrix: SkMatrix) => void;
-    translate: (x: number, y: number) => void;
-    scale: (x: number, y?: number) => void;
-    skew: (x: number, y: number) => void;
-    rotate: (theta: number) => void;
-    identity: () => void;
+    concat: (matrix: SkMatrix) => SkMatrix;
+    translate: (x: number, y: number) => SkMatrix;
+    scale: (x: number, y?: number) => SkMatrix;
+    skew: (x: number, y: number) => SkMatrix;
+    rotate: (theta: number) => SkMatrix;
+    identity: () => SkMatrix;
     get: () => number[];
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";

package/lib/typescript/src/skia/web/JsiSkMatrix.d.ts

@@ -3,11 +3,11 @@ import type { SkMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
-    concat(matrix: SkMatrix): void;
-    translate(x: number, y: number): void;
-    scale(x: number, y?: number): void;
-    skew(x: number, y: number): void;
-    rotate(value: number): void;
-    identity(): void;
+    concat(matrix: SkMatrix): this;
+    translate(x: number, y: number): this;
+    scale(x: number, y?: number): this;
+    skew(x: number, y: number): this;
+    rotate(value: number): this;
+    identity(): this;
     get(): number[];
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.187",
+  "version": "0.1.189",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/animation/functions/interpolateColors.ts

@@ -34,7 +34,8 @@ const interpolateColorsRGB = (
     outputRange.map((c) => c[3]),
     "clamp"
   );
-  return new Float32Array([r, g, b, a]);
+  // TODO: once Float32Array are supported in the reanimated integration we can switch there
+  return [r, g, b, a];
 };
 
 export const interpolateColors = (

package/src/skia/types/Color.ts

@@ -1,4 +1,4 @@
 // This is the JSI color
 export type SkColor = Float32Array;
 // Input colors can be string, number or Float32Array
-export type Color = string | Float32Array | number;
+export type Color = string | Float32Array | number | number[];

package/src/skia/types/Matrix.ts

@@ -16,12 +16,12 @@ export const isMatrix = (obj: unknown): obj is SkMatrix =>
   obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
 
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-  concat: (matrix: SkMatrix) => void;
-  translate: (x: number, y: number) => void;
-  scale: (x: number, y?: number) => void;
-  skew: (x: number, y: number) => void;
-  rotate: (theta: number) => void;
-  identity: () => void;
+  concat: (matrix: SkMatrix) => SkMatrix;
+  translate: (x: number, y: number) => SkMatrix;
+  scale: (x: number, y?: number) => SkMatrix;
+  skew: (x: number, y: number) => SkMatrix;
+  rotate: (theta: number) => SkMatrix;
+  identity: () => SkMatrix;
   get: () => number[];
 }
 

package/src/skia/web/JsiSkColor.ts

@@ -318,6 +318,8 @@ const parseCSSColor = (cssStr: string) => {
 export const Color = (color: InputColor): SkColor => {
   if (color instanceof Float32Array) {
     return color;
+  } else if (Array.isArray(color)) {
+    return new Float32Array(color);
   } else if (typeof color === "string") {
     const r = parseCSSColor(color);
     const rgba = r === null ? CSSColorTable.black : r;

package/src/skia/web/JsiSkMatrix.ts

@@ -16,6 +16,7 @@ export class JsiSkMatrix
     this.ref.set(
       this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))
     );
+    return this;
   }
 
   translate(x: number, y: number) {
@@ -25,6 +26,7 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))
       )
     );
+    return this;
   }
 
   scale(x: number, y?: number) {
@@ -34,6 +36,7 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))
       )
     );
+    return this;
   }
 
   skew(x: number, y: number) {
@@ -43,6 +46,7 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))
       )
     );
+    return this;
   }
 
   rotate(value: number) {
@@ -52,10 +56,12 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.rotated(value))
       )
     );
+    return this;
   }
 
   identity() {
     this.ref.set(this.CanvasKit.Matrix.identity());
+    return this;
   }
 
   get() {