@shopify/react-native-skia 0.1.213 → 0.1.215

package/src/external/reanimated/renderHelpers.ts

@@ -9,12 +9,14 @@ import {
   stopMapper,
   isSharedValue,
   HAS_REANIMATED3,
+  HAS_REANIMATED2,
+  runOnJS,
 } from "./moduleWrapper";
 
 const _bindings = new WeakMap<Node<unknown>, unknown>();
 
 export function extractReanimatedProps(props: AnimatedProps<any>) {
-  if (!HAS_REANIMATED3) {
+  if (!HAS_REANIMATED3 && !HAS_REANIMATED2) {
     return [props, {}];
   }
   const reanimatedProps = {} as AnimatedProps<any>;
@@ -34,18 +36,56 @@ export function extractReanimatedProps(props: AnimatedProps<any>) {
   return [otherProps, reanimatedProps];
 }
 
+function bindReanimatedProps2(
+  container: Container,
+  node: Node<any>,
+  reanimatedProps: AnimatedProps<any>
+) {
+  const sharedValues = Object.values(reanimatedProps);
+  const previousMapperId = _bindings.get(node);
+  if (previousMapperId !== undefined) {
+    stopMapper(previousMapperId as number);
+  }
+  if (sharedValues.length > 0) {
+    const viewId = container.getNativeId();
+    const { SkiaViewApi } = global;
+    const updateProps = () => {
+      for (const propName in reanimatedProps) {
+        node && node.setProp(propName, reanimatedProps[propName].value);
+      }
+      // On React Native we use the SkiaViewApi to redraw because it can
+      // run on the worklet thread (container.redraw can't)
+      // if SkiaViewApi is undefined, we are on web and container.redraw()
+      // can safely be invoked
+      if (SkiaViewApi) {
+        SkiaViewApi.requestRedraw(viewId);
+      } else {
+        container.redraw();
+      }
+    };
+    const mapperId = startMapper(() => {
+      "worklet";
+      runOnJS(updateProps)();
+    }, sharedValues);
+    _bindings.set(node, mapperId);
+  }
+}
+
 export function bindReanimatedProps(
   container: Container,
   node: Node<any>,
   reanimatedProps: AnimatedProps<any>
 ) {
+  if (HAS_REANIMATED2) {
+    return bindReanimatedProps2(container, node, reanimatedProps);
+  }
   if (!HAS_REANIMATED3) {
     return;
   }
   const sharedValues = Object.values(reanimatedProps);
   const previousMapperId = _bindings.get(node);
   if (previousMapperId !== undefined) {
-    stopMapper(previousMapperId);
+    stopMapper(previousMapperId as number);
   }
   if (sharedValues.length > 0) {
     const viewId = container.getNativeId();

package/src/external/reanimated/useAnimatedImageValue.ts

@@ -0,0 +1,51 @@
+import type { FrameInfo } from "react-native-reanimated";
+
+import { useAnimatedImage } from "../../skia/core/AnimatedImage";
+import type { DataSourceParam, SkImage } from "../../skia/types";
+
+import {
+  throwOnMissingReanimated,
+  useFrameCallback,
+  useSharedValue,
+} from "./moduleWrapper";
+
+const DEFAULT_FRAME_DURATION = 60;
+
+export const useAnimatedImageValue = (source: DataSourceParam) => {
+  throwOnMissingReanimated();
+  const currentFrame = useSharedValue<null | SkImage>(null);
+  const lastTimestamp = useSharedValue(0);
+  const animatedImage = useAnimatedImage(source, (err) => {
+    console.error(err);
+    throw new Error(`Could not load animated image - got '${err.message}'`);
+  });
+  const frameDuration =
+    animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
+
+  useFrameCallback((frameInfo: FrameInfo) => {
+    if (!animatedImage) {
+      currentFrame.value = null;
+      return;
+    }
+
+    const { timestamp } = frameInfo;
+    const elapsed = timestamp - lastTimestamp.value;
+
+    // Check if it's time to switch frames based on GIF frame duration
+    if (elapsed < frameDuration) {
+      return;
+    }
+
+    // Update the current frame
+    animatedImage.decodeNextFrame();
+    if (currentFrame.value) {
+      currentFrame.value.dispose();
+    }
+    currentFrame.value = animatedImage.getCurrentFrame();
+
+    // Update the last timestamp
+    lastTimestamp.value = timestamp;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, true);
+  return currentFrame;
+};

package/src/external/reanimated/useDerivedValueOnJS.ts

@@ -0,0 +1,25 @@
+import { useEffect, useMemo } from "react";
+
+import {
+  useSharedValue,
+  runOnJS,
+  startMapper,
+  stopMapper,
+} from "./moduleWrapper";
+
+export const useDerivedValueOnJS = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fn: () => any,
+  deps: unknown[]
+) => {
+  const init = useMemo(() => fn(), [fn]);
+  const value = useSharedValue(init);
+  useEffect(() => {
+    const mapperId = startMapper(() => {
+      "worklet";
+      runOnJS(fn)();
+    }, deps);
+    return () => stopMapper(mapperId);
+  }, [deps, fn]);
+  return value;
+};

package/src/mock/index.ts

@@ -6,6 +6,7 @@ import { ValueApi } from "../values/web";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Noop: () => any = () => undefined;
 const NoopValue = () => ({ current: 0 });
+const NoopSharedValue = () => ({ value: 0 });
 
 export const Mock = (CanvasKit: CanvasKit) => {
   global.SkiaApi = JsiSkApi(CanvasKit);
@@ -21,6 +22,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/nodes"),
     // We could use the real Canvas if we mock the SkiaView component for node
     Canvas: Noop,
+    // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,
     useTouchHandler: Noop,
@@ -29,6 +31,9 @@ export const Mock = (CanvasKit: CanvasKit) => {
     useSpring: NoopValue,
     useClockValue: NoopValue,
     useValueEffect: Noop,
+    // Reanimated hooks
+    useClock: NoopSharedValue,
+    usePathInterpolation: NoopSharedValue,
     useRawData: Noop,
     useData: Noop,
     useFont: () => Skia.Font(undefined, 0),

package/src/renderer/HostConfig.ts

@@ -7,7 +7,7 @@ import type { SkiaValue } from "../values";
 import {
   bindReanimatedProps,
   extractReanimatedProps,
-} from "../external/reanimated";
+} from "../external/reanimated/renderHelpers";
 
 import type { Container } from "./Container";
 import { createNode } from "./HostComponents";

package/src/skia/core/AnimatedImage.ts

@@ -1,8 +1,3 @@
-import {
-  throwOnMissingReanimated,
-  useFrameCallback,
-  useSharedValue,
-} from "../../external/reanimated/moduleWrapper";
 import { Skia } from "../Skia";
 import type { DataSourceParam } from "../types";
 
@@ -19,45 +14,3 @@ export const useAnimatedImage = (
   source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, animatedImgFactory, onError);
-
-const DEFAULT_FRAME_DURATION = 60;
-
-export const useAnimatedImageValue = (source: DataSourceParam) => {
-  throwOnMissingReanimated();
-  const currentFrame = useSharedValue(null);
-  const lastTimestamp = useSharedValue(0);
-  const animatedImage = useAnimatedImage(source, (err) => {
-    console.error(err);
-    throw new Error(`Could not load animated image - got '${err.message}'`);
-  });
-  const frameDuration =
-    animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useFrameCallback((frameInfo: any) => {
-    if (!animatedImage) {
-      currentFrame.value = null;
-      return;
-    }
-
-    const { timestamp } = frameInfo;
-    const elapsed = timestamp - lastTimestamp.value;
-
-    // Check if it's time to switch frames based on GIF frame duration
-    if (elapsed < frameDuration) {
-      return;
-    }
-
-    // Update the current frame
-    animatedImage.decodeNextFrame();
-    if (currentFrame.value) {
-      currentFrame.value.dispose();
-    }
-    currentFrame.value = animatedImage.getCurrentFrame();
-
-    // Update the last timestamp
-    lastTimestamp.value = timestamp;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, true);
-  return currentFrame;
-};

package/src/skia/types/Matrix.ts

@@ -21,6 +21,10 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;
   rotate: (theta: number) => SkMatrix;
+  postTranslate: (x: number, y: number) => SkMatrix;
+  postScale: (x: number, y?: number) => SkMatrix;
+  postSkew: (x: number, y: number) => SkMatrix;
+  postRotate: (theta: number) => SkMatrix;
   identity: () => SkMatrix;
   get: () => number[];
 }

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/cpp/skia/include/core/SkDeferredDisplayList.h

@@ -1,15 +0,0 @@
-/*
- * Copyright 2017 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// TODO(kjlubick, robertphillips) migrate Chromium to use the new location and name
-#include "include/private/chromium/GrDeferredDisplayList.h" // IWYU pragma: export
-
-class GrDeferredDisplayListRecorder;
-class GrSurfaceCharacterization;
-using SkDeferredDisplayList = GrDeferredDisplayList;
-using SkDeferredDisplayListRecorder = GrDeferredDisplayListRecorder;
-using SkSurfaceCharacterization = GrSurfaceCharacterization;

package/cpp/skia/include/core/SkDeferredDisplayListRecorder.h

@@ -1,15 +0,0 @@
-/*
- * Copyright 2017 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// TODO(kjlubick, robertphillips) migrate Chromium to use the new location
-#include "include/private/chromium/GrDeferredDisplayListRecorder.h" // IWYU pragma: export
-
-class GrDeferredDisplayList;
-class GrSurfaceCharacterization;
-using SkDeferredDisplayList = GrDeferredDisplayList;
-using SkDeferredDisplayListRecorder = GrDeferredDisplayListRecorder;
-using SkSurfaceCharacterization = GrSurfaceCharacterization;

package/cpp/skia/include/core/SkPromiseImageTexture.h

@@ -1,20 +0,0 @@
-/*
- * Copyright 2017 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef SkPromiseImageTexture_DEFINED
-#define SkPromiseImageTexture_DEFINED
-
-#include "include/core/SkTypes.h"
-
-// TODO(kjlubick) remove this shim header after clients are migrated
-#if defined(SK_GANESH)
-#include "include/private/chromium/GrPromiseImageTexture.h"
-
-typedef GrPromiseImageTexture SkPromiseImageTexture;
-#endif
-
-#endif // SkPromiseImageTexture_DEFINED

package/cpp/skia/include/core/SkSurfaceCharacterization.h

@@ -1,15 +0,0 @@
-/*
- * Copyright 2017 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// TODO(kjlubick, robertphillips) migrate Chromium to use the new location and name
-#include "include/private/chromium/GrSurfaceCharacterization.h" // IWYU pragma: export
-
-class GrDeferredDisplayList;
-class GrDeferredDisplayListRecorder;
-using SkDeferredDisplayList = GrDeferredDisplayList;
-using SkDeferredDisplayListRecorder = GrDeferredDisplayListRecorder;
-using SkSurfaceCharacterization = GrSurfaceCharacterization;

package/cpp/skia/include/core/SkTime.h

@@ -1,63 +0,0 @@
-
-/*
- * Copyright 2006 The Android Open Source Project
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-
-#ifndef SkTime_DEFINED
-#define SkTime_DEFINED
-
-#include "include/core/SkTypes.h"
-#include "include/private/base/SkMacros.h"
-
-#include <cinttypes>
-
-class SkString;
-
-/** \class SkTime
-    Platform-implemented utilities to return time of day, and millisecond counter.
-*/
-class SK_API SkTime {
-public:
-    struct DateTime {
-        int16_t  fTimeZoneMinutes;  // The number of minutes that GetDateTime()
-                                    // is ahead of or behind UTC.
-        uint16_t fYear;          //!< e.g. 2005
-        uint8_t  fMonth;         //!< 1..12
-        uint8_t  fDayOfWeek;     //!< 0..6, 0==Sunday
-        uint8_t  fDay;           //!< 1..31
-        uint8_t  fHour;          //!< 0..23
-        uint8_t  fMinute;        //!< 0..59
-        uint8_t  fSecond;        //!< 0..59
-
-        void toISO8601(SkString* dst) const;
-    };
-    static void GetDateTime(DateTime*);
-
-    static double GetSecs() { return GetNSecs() * 1e-9; }
-    static double GetMSecs() { return GetNSecs() * 1e-6; }
-    static double GetNSecs();
-};
-
-///////////////////////////////////////////////////////////////////////////////
-
-class SkAutoTime {
-public:
-    // The label is not deep-copied, so its address must remain valid for the
-    // lifetime of this object
-    SkAutoTime(const char* label = nullptr)
-        : fLabel(label)
-        , fNow(SkTime::GetMSecs()) {}
-    ~SkAutoTime() {
-        uint64_t dur = static_cast<uint64_t>(SkTime::GetMSecs() - fNow);
-        SkDebugf("%s %" PRIu64 "\n", fLabel ? fLabel : "", dur);
-    }
-private:
-    const char* fLabel;
-    double      fNow;
-};
-
-#endif

package/cpp/skia/include/effects/SkOpPathEffect.h

@@ -1,43 +0,0 @@
-/*
- * Copyright 2018 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef SkOpPathEffect_DEFINED
-#define SkOpPathEffect_DEFINED
-
-#include "include/core/SkPaint.h"
-#include "include/core/SkRefCnt.h"
-#include "include/core/SkScalar.h"
-#include "include/core/SkTypes.h"
-#include "include/pathops/SkPathOps.h"
-
-class SkMatrix;
-class SkPathEffect;
-
-class SK_API SkMergePathEffect {
-public:
-    /*  Defers to two other patheffects, and then combines their outputs using the specified op.
-     *  e.g.
-     *      result = output_one op output_two
-     *
-     *  If either one or two is nullptr, then the original path is passed through to the op.
-     */
-    static sk_sp<SkPathEffect> Make(sk_sp<SkPathEffect> one, sk_sp<SkPathEffect> two, SkPathOp op);
-};
-
-class SK_API SkMatrixPathEffect {
-public:
-    static sk_sp<SkPathEffect> MakeTranslate(SkScalar dx, SkScalar dy);
-    static sk_sp<SkPathEffect> Make(const SkMatrix&);
-};
-
-class SK_API SkStrokePathEffect {
-public:
-    static sk_sp<SkPathEffect> Make(SkScalar width, SkPaint::Join, SkPaint::Cap,
-                                    SkScalar miter = 4);
-};
-
-#endif