@shopify/react-native-skia 0.1.214 → 0.1.215

package/src/skia/types/Path/Path.ts

@@ -213,7 +213,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * Sets FillType, the rule used to fill Path.
    * @param fill
    */
-  setFillType(fill: FillType): void;
+  setFillType(fill: FillType): SkPath;
 
   /**
    * Specifies whether Path is volatile; whether it will be altered or discarded
@@ -223,7 +223,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * Mark unchanging Path non-volatile to improve repeated rendering.
    * @param volatile
    */
-  setIsVolatile(volatile: boolean): void;
+  setIsVolatile(volatile: boolean): SkPath;
 
   /**
    * Turns this path into the filled equivalent of the stroked path. Returns false if the operation
@@ -237,14 +237,14 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * Appends CLOSE_VERB to Path. A closed contour connects the first and last point
    * with a line, forming a continuous loop.
    */
-  close(): void;
+  close(): SkPath;
 
   /**
    * Sets Path to its initial state.
    * Removes verb array, point array, and weights, and sets FillType to Winding.
    * Internal storage associated with Path is released
    */
-  reset(): void;
+  reset(): SkPath;
 
   /**
    * Sets Path to its initial state.
@@ -253,7 +253,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * Use rewind() instead of reset() if Path storage will be reused and performance
    * is critical.
    */
-  rewind(): void;
+  rewind(): SkPath;
 
   /**
    * Returns minimum and maximum axes values of the lines and curves in Path.
@@ -420,7 +420,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    reference to SkPath
    example: https://fiddle.skia.org/c/@Path_quadTo
   */
-  quadTo(x1: number, y1: number, x2: number, y2: number): void;
+  quadTo(x1: number, y1: number, x2: number, y2: number): SkPath;
 
   /**
    * Adds Rect to Path, appending kMove_Verb, three kLine_Verb, and kClose_Verb,
@@ -431,7 +431,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param rect
    * @param isCCW
    */
-  addRect(rect: SkRect, isCCW?: boolean): void;
+  addRect(rect: SkRect, isCCW?: boolean): SkPath;
 
   /**
    * Adds rrect to Path, creating a new closed contour.
@@ -540,7 +540,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
   /**
    * Transforms the path by the specified matrix.
    */
-  transform(m3: SkMatrix): void;
+  transform(m3: SkMatrix): SkPath;
 
   /**
    * Interpolates between Path with point array of equal size.
@@ -558,10 +558,11 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param ending  path to interpolate with
    * @param weight  contribution of this path, and
    *                 one minus contribution of ending path
+   * @param output  path to be replaced with the interpolated averages
    * @return        Path replaced by interpolated averages or null if 
    *                not interpolatable
    * */
-  interpolate(end: SkPath, weight: number): SkPath | null;
+  interpolate(end: SkPath, weight: number, output?: SkPath): SkPath | null;
 
   /** Returns true if Path contain equal verbs and equal weights.
    *     @param compare  path to compare

package/src/skia/web/JsiSkMatrix.ts

@@ -12,54 +12,60 @@ export class JsiSkMatrix
     super(CanvasKit, ref, "Matrix");
   }
 
+  private preMultiply(matrix: number[]) {
+    this.ref.set(this.CanvasKit.Matrix.multiply(this.ref, matrix));
+  }
+
+  private postMultiply(matrix: number[]) {
+    this.ref.set(this.CanvasKit.Matrix.multiply(matrix, this.ref));
+  }
+
   dispose = () => {
     // Do nothing - the matrix is represenetd by a Float32Array
   };
 
   concat(matrix: SkMatrix) {
-    this.ref.set(
-      this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))
-    );
+    this.preMultiply(JsiSkMatrix.fromValue(matrix));
     return this;
   }
 
   translate(x: number, y: number) {
-    this.concat(
-      new JsiSkMatrix(
-        this.CanvasKit,
-        Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))
-      )
-    );
+    this.preMultiply(this.CanvasKit.Matrix.translated(x, y));
+    return this;
+  }
+
+  postTranslate(x: number, y: number) {
+    this.postMultiply(this.CanvasKit.Matrix.translated(x, y));
     return this;
   }
 
   scale(x: number, y?: number) {
-    this.concat(
-      new JsiSkMatrix(
-        this.CanvasKit,
-        Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))
-      )
-    );
+    this.preMultiply(this.CanvasKit.Matrix.scaled(x, y ?? x));
+    return this;
+  }
+
+  postScale(x: number, y?: number) {
+    this.postMultiply(this.CanvasKit.Matrix.scaled(x, y ?? x));
     return this;
   }
 
   skew(x: number, y: number) {
-    this.concat(
-      new JsiSkMatrix(
-        this.CanvasKit,
-        Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))
-      )
-    );
+    this.preMultiply(this.CanvasKit.Matrix.skewed(x, y));
+    return this;
+  }
+
+  postSkew(x: number, y: number) {
+    this.postMultiply(this.CanvasKit.Matrix.skewed(x, y));
     return this;
   }
 
   rotate(value: number) {
-    this.concat(
-      new JsiSkMatrix(
-        this.CanvasKit,
-        Float32Array.of(...this.CanvasKit.Matrix.rotated(value))
-      )
-    );
+    this.preMultiply(this.CanvasKit.Matrix.rotated(value));
+    return this;
+  }
+
+  postRotate(value: number) {
+    this.postMultiply(this.CanvasKit.Matrix.rotated(value));
     return this;
   }
 

package/src/skia/web/JsiSkPath.ts

@@ -150,10 +150,12 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
 
   setFillType(fill: FillType) {
     this.ref.setFillType(ckEnum(fill));
+    return this;
   }
 
   setIsVolatile(volatile: boolean) {
     this.ref.setIsVolatile(volatile);
+    return this;
   }
 
   stroke(opts?: StrokeOpts) {
@@ -174,14 +176,17 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
 
   close() {
     this.ref.close();
+    return this;
   }
 
   reset() {
     this.ref.reset();
+    return this;
   }
 
   rewind() {
     this.ref.rewind();
+    return this;
   }
 
   computeTightBounds(): SkRect {
@@ -272,10 +277,12 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
 
   quadTo(x1: number, y1: number, x2: number, y2: number) {
     this.ref.quadTo(x1, y1, x2, y2);
+    return this;
   }
 
   addRect(rect: SkRect, isCCW?: boolean) {
     this.ref.addRect(JsiSkRect.fromValue(this.CanvasKit, rect), isCCW);
+    return this;
   }
 
   addRRect(rrect: SkRRect, isCCW?: boolean) {
@@ -331,9 +338,10 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
 
   transform(m3: SkMatrix) {
     this.ref.transform(JsiSkMatrix.fromValue(m3));
+    return this;
   }
 
-  interpolate(end: SkPath, t: number) {
+  interpolate(end: SkPath, t: number, output?: SkPath) {
     const path = this.CanvasKit.Path.MakeFromPathInterpolation(
       this.ref,
       JsiSkPath.fromValue(end),
@@ -342,7 +350,12 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     if (path === null) {
       return null;
     }
-    return new JsiSkPath(this.CanvasKit, path);
+    if (output) {
+      (output as JsiSkPath).ref = path;
+      return output;
+    } else {
+      return new JsiSkPath(this.CanvasKit, path);
+    }
   }
 
   isInterpolatable(path2: SkPath): boolean {

package/globalJestSetup.js

@@ -1,6 +0,0 @@
-module.exports = async () => {
-  const {
-    LoadSkiaWeb,
-  } = require("@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb");
-  await LoadSkiaWeb();
-};

package/lib/commonjs/external/reanimated/useSharedValueEffect.d.ts

@@ -1,8 +0,0 @@
-import type { SharedValueType } from "../../renderer/processors/Animations";
-/**
- * Connects a shared value from reanimated to a SkiaView or Canvas
- * so whenever the shared value changes the SkiaView will redraw.
- * @param cb Callback that will be called whenever the shared value changes.
- * @param values One or more shared values to listen for.
- */
-export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueType<T>, ...values: SharedValueType<T>[]) => void;

package/lib/commonjs/external/reanimated/useSharedValueEffect.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSharedValueEffect = void 0;
-
-var _react = require("react");
-
-var _moduleWrapper = require("./moduleWrapper");
-
-/**
- * Connects a shared value from reanimated to a SkiaView or Canvas
- * so whenever the shared value changes the SkiaView will redraw.
- * @param cb Callback that will be called whenever the shared value changes.
- * @param values One or more shared values to listen for.
- */
-const useSharedValueEffect = function (cb, value) {
-  for (var _len = arguments.length, values = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    values[_key - 2] = arguments[_key];
-  }
-
-  console.warn(`useSharedValueEffect() is deprecated and will be removed in the next release
-Learn more at https://shopify.github.io/react-native-skia/docs/animations/animations.`);
-  const input = (0, _moduleWrapper.useSharedValue)(0);
-  (0, _react.useEffect)(() => {
-    if (!_moduleWrapper.HAS_REANIMATED2) {
-      console.warn("Reanimated was not found and the useSharedValueEffect hook will have no effect.");
-    } else {
-      // Start a mapper in Reanimated
-      const mapperId = (0, _moduleWrapper.startMapper)(() => {
-        "worklet";
-
-        (0, _moduleWrapper.runOnJS)(cb)();
-      }, [value, ...values], [input]); // Return unregistering the mapper
-
-      return () => {
-        if (_moduleWrapper.stopMapper && mapperId !== undefined) {
-          (0, _moduleWrapper.stopMapper)(mapperId);
-        }
-      };
-    }
-
-    return () => {}; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [input, value, ...values]);
-};
-
-exports.useSharedValueEffect = useSharedValueEffect;
-//# sourceMappingURL=useSharedValueEffect.js.map

package/lib/commonjs/external/reanimated/useSharedValueEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useSharedValueEffect","cb","value","values","console","warn","input","useSharedValue","useEffect","HAS_REANIMATED2","mapperId","startMapper","runOnJS","stopMapper","undefined"],"sources":["useSharedValueEffect.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport type { SharedValueType } from \"../../renderer/processors/Animations\";\n\nimport {\n  HAS_REANIMATED2,\n  useSharedValue,\n  runOnJS,\n  startMapper,\n  stopMapper,\n} from \"./moduleWrapper\";\n\n/**\n * Connects a shared value from reanimated to a SkiaView or Canvas\n * so whenever the shared value changes the SkiaView will redraw.\n * @param cb Callback that will be called whenever the shared value changes.\n * @param values One or more shared values to listen for.\n */\nexport const useSharedValueEffect = <T = number>(\n  cb: () => void,\n  value: SharedValueType<T>,\n  ...values: SharedValueType<T>[]\n) => {\n  console.warn(\n    `useSharedValueEffect() is deprecated and will be removed in the next release\nLearn more at https://shopify.github.io/react-native-skia/docs/animations/animations.`\n  );\n  const input = useSharedValue(0);\n\n  useEffect(() => {\n    if (!HAS_REANIMATED2) {\n      console.warn(\n        \"Reanimated was not found and the useSharedValueEffect hook will have no effect.\"\n      );\n    } else {\n      // Start a mapper in Reanimated\n      const mapperId = startMapper(\n        () => {\n          \"worklet\";\n          runOnJS(cb)();\n        },\n        [value, ...values],\n        [input]\n      );\n      // Return unregistering the mapper\n      return () => {\n        if (stopMapper && mapperId !== undefined) {\n          stopMapper(mapperId);\n        }\n      };\n    }\n    return () => {};\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [input, value, ...values]);\n};\n"],"mappings":";;;;;;;AAAA;;AAIA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,oBAAoB,GAAG,UAClCC,EADkC,EAElCC,KAFkC,EAI/B;EAAA,kCADAC,MACA;IADAA,MACA;EAAA;;EACHC,OAAO,CAACC,IAAR,CACG;AACL,sFAFE;EAIA,MAAMC,KAAK,GAAG,IAAAC,6BAAA,EAAe,CAAf,CAAd;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,IAAI,CAACC,8BAAL,EAAsB;MACpBL,OAAO,CAACC,IAAR,CACE,iFADF;IAGD,CAJD,MAIO;MACL;MACA,MAAMK,QAAQ,GAAG,IAAAC,0BAAA,EACf,MAAM;QACJ;;QACA,IAAAC,sBAAA,EAAQX,EAAR;MACD,CAJc,EAKf,CAACC,KAAD,EAAQ,GAAGC,MAAX,CALe,EAMf,CAACG,KAAD,CANe,CAAjB,CAFK,CAUL;;MACA,OAAO,MAAM;QACX,IAAIO,yBAAA,IAAcH,QAAQ,KAAKI,SAA/B,EAA0C;UACxC,IAAAD,yBAAA,EAAWH,QAAX;QACD;MACF,CAJD;IAKD;;IACD,OAAO,MAAM,CAAE,CAAf,CAtBc,CAuBd;EACD,CAxBD,EAwBG,CAACJ,KAAD,EAAQJ,KAAR,EAAe,GAAGC,MAAlB,CAxBH;AAyBD,CApCM"}

package/lib/module/external/reanimated/useSharedValueEffect.d.ts

@@ -1,8 +0,0 @@
-import type { SharedValueType } from "../../renderer/processors/Animations";
-/**
- * Connects a shared value from reanimated to a SkiaView or Canvas
- * so whenever the shared value changes the SkiaView will redraw.
- * @param cb Callback that will be called whenever the shared value changes.
- * @param values One or more shared values to listen for.
- */
-export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueType<T>, ...values: SharedValueType<T>[]) => void;

package/lib/module/external/reanimated/useSharedValueEffect.js

@@ -1,39 +0,0 @@
-import { useEffect } from "react";
-import { HAS_REANIMATED2, useSharedValue, runOnJS, startMapper, stopMapper } from "./moduleWrapper";
-/**
- * Connects a shared value from reanimated to a SkiaView or Canvas
- * so whenever the shared value changes the SkiaView will redraw.
- * @param cb Callback that will be called whenever the shared value changes.
- * @param values One or more shared values to listen for.
- */
-
-export const useSharedValueEffect = function (cb, value) {
-  for (var _len = arguments.length, values = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    values[_key - 2] = arguments[_key];
-  }
-
-  console.warn(`useSharedValueEffect() is deprecated and will be removed in the next release
-Learn more at https://shopify.github.io/react-native-skia/docs/animations/animations.`);
-  const input = useSharedValue(0);
-  useEffect(() => {
-    if (!HAS_REANIMATED2) {
-      console.warn("Reanimated was not found and the useSharedValueEffect hook will have no effect.");
-    } else {
-      // Start a mapper in Reanimated
-      const mapperId = startMapper(() => {
-        "worklet";
-
-        runOnJS(cb)();
-      }, [value, ...values], [input]); // Return unregistering the mapper
-
-      return () => {
-        if (stopMapper && mapperId !== undefined) {
-          stopMapper(mapperId);
-        }
-      };
-    }
-
-    return () => {}; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [input, value, ...values]);
-};
-//# sourceMappingURL=useSharedValueEffect.js.map

package/lib/module/external/reanimated/useSharedValueEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","HAS_REANIMATED2","useSharedValue","runOnJS","startMapper","stopMapper","useSharedValueEffect","cb","value","values","console","warn","input","mapperId","undefined"],"sources":["useSharedValueEffect.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport type { SharedValueType } from \"../../renderer/processors/Animations\";\n\nimport {\n  HAS_REANIMATED2,\n  useSharedValue,\n  runOnJS,\n  startMapper,\n  stopMapper,\n} from \"./moduleWrapper\";\n\n/**\n * Connects a shared value from reanimated to a SkiaView or Canvas\n * so whenever the shared value changes the SkiaView will redraw.\n * @param cb Callback that will be called whenever the shared value changes.\n * @param values One or more shared values to listen for.\n */\nexport const useSharedValueEffect = <T = number>(\n  cb: () => void,\n  value: SharedValueType<T>,\n  ...values: SharedValueType<T>[]\n) => {\n  console.warn(\n    `useSharedValueEffect() is deprecated and will be removed in the next release\nLearn more at https://shopify.github.io/react-native-skia/docs/animations/animations.`\n  );\n  const input = useSharedValue(0);\n\n  useEffect(() => {\n    if (!HAS_REANIMATED2) {\n      console.warn(\n        \"Reanimated was not found and the useSharedValueEffect hook will have no effect.\"\n      );\n    } else {\n      // Start a mapper in Reanimated\n      const mapperId = startMapper(\n        () => {\n          \"worklet\";\n          runOnJS(cb)();\n        },\n        [value, ...values],\n        [input]\n      );\n      // Return unregistering the mapper\n      return () => {\n        if (stopMapper && mapperId !== undefined) {\n          stopMapper(mapperId);\n        }\n      };\n    }\n    return () => {};\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [input, value, ...values]);\n};\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;AAIA,SACEC,eADF,EAEEC,cAFF,EAGEC,OAHF,EAIEC,WAJF,EAKEC,UALF,QAMO,iBANP;AAQA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,oBAAoB,GAAG,UAClCC,EADkC,EAElCC,KAFkC,EAI/B;EAAA,kCADAC,MACA;IADAA,MACA;EAAA;;EACHC,OAAO,CAACC,IAAR,CACG;AACL,sFAFE;EAIA,MAAMC,KAAK,GAAGV,cAAc,CAAC,CAAD,CAA5B;EAEAF,SAAS,CAAC,MAAM;IACd,IAAI,CAACC,eAAL,EAAsB;MACpBS,OAAO,CAACC,IAAR,CACE,iFADF;IAGD,CAJD,MAIO;MACL;MACA,MAAME,QAAQ,GAAGT,WAAW,CAC1B,MAAM;QACJ;;QACAD,OAAO,CAACI,EAAD,CAAP;MACD,CAJyB,EAK1B,CAACC,KAAD,EAAQ,GAAGC,MAAX,CAL0B,EAM1B,CAACG,KAAD,CAN0B,CAA5B,CAFK,CAUL;;MACA,OAAO,MAAM;QACX,IAAIP,UAAU,IAAIQ,QAAQ,KAAKC,SAA/B,EAA0C;UACxCT,UAAU,CAACQ,QAAD,CAAV;QACD;MACF,CAJD;IAKD;;IACD,OAAO,MAAM,CAAE,CAAf,CAtBc,CAuBd;EACD,CAxBQ,EAwBN,CAACD,KAAD,EAAQJ,KAAR,EAAe,GAAGC,MAAlB,CAxBM,CAAT;AAyBD,CApCM"}

package/lib/typescript/globalJestSetup.d.ts

@@ -1,2 +0,0 @@
-declare function _exports(): Promise<void>;
-export = _exports;

package/lib/typescript/src/external/reanimated/useSharedValueEffect.d.ts

@@ -1,8 +0,0 @@
-import type { SharedValueType } from "../../renderer/processors/Animations";
-/**
- * Connects a shared value from reanimated to a SkiaView or Canvas
- * so whenever the shared value changes the SkiaView will redraw.
- * @param cb Callback that will be called whenever the shared value changes.
- * @param values One or more shared values to listen for.
- */
-export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueType<T>, ...values: SharedValueType<T>[]) => void;

package/src/external/reanimated/useSharedValueEffect.ts

@@ -1,55 +0,0 @@
-import { useEffect } from "react";
-
-import type { SharedValueType } from "../../renderer/processors/Animations";
-
-import {
-  HAS_REANIMATED2,
-  useSharedValue,
-  runOnJS,
-  startMapper,
-  stopMapper,
-} from "./moduleWrapper";
-
-/**
- * Connects a shared value from reanimated to a SkiaView or Canvas
- * so whenever the shared value changes the SkiaView will redraw.
- * @param cb Callback that will be called whenever the shared value changes.
- * @param values One or more shared values to listen for.
- */
-export const useSharedValueEffect = <T = number>(
-  cb: () => void,
-  value: SharedValueType<T>,
-  ...values: SharedValueType<T>[]
-) => {
-  console.warn(
-    `useSharedValueEffect() is deprecated and will be removed in the next release
-Learn more at https://shopify.github.io/react-native-skia/docs/animations/animations.`
-  );
-  const input = useSharedValue(0);
-
-  useEffect(() => {
-    if (!HAS_REANIMATED2) {
-      console.warn(
-        "Reanimated was not found and the useSharedValueEffect hook will have no effect."
-      );
-    } else {
-      // Start a mapper in Reanimated
-      const mapperId = startMapper(
-        () => {
-          "worklet";
-          runOnJS(cb)();
-        },
-        [value, ...values],
-        [input]
-      );
-      // Return unregistering the mapper
-      return () => {
-        if (stopMapper && mapperId !== undefined) {
-          stopMapper(mapperId);
-        }
-      };
-    }
-    return () => {};
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [input, value, ...values]);
-};