@shopify/react-native-skia 0.1.156 → 0.1.158

package/src/skia/core/Picture.ts

@@ -1,30 +1,6 @@
-import type { DependencyList } from "react";
-import { useMemo } from "react";
-
 import { Skia } from "../Skia";
 import type { SkCanvas, SkRect } from "../types";
 
-/**
- * Memoizes and returns an SkPicture that can be drawn to another canvas.
- * @param rect Picture bounds
- * @param cb Callback for drawing to the canvas
- * @returns SkPicture
- */
-export const usePicture = (
-  rect: SkRect,
-  cb: (canvas: SkCanvas) => void,
-  deps: DependencyList = []
-) => {
-  console.warn("usePicture() is deprecated. Use createPicture() instead.");
-  return useMemo(() => {
-    const recorder = Skia.PictureRecorder();
-    const canvas = recorder.beginRecording(rect);
-    cb(canvas);
-    return recorder.finishRecordingAsPicture();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-};
-
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds

package/src/skia/core/Rect.ts

@@ -12,7 +12,7 @@ export const bounds = (rects: SkRect[]) => {
   const y = Math.min(...rects.map((r) => r.y));
   const width = Math.max(...rects.map((r) => r.x + r.width));
   const height = Math.max(...rects.map((r) => r.y + r.height));
-  return rect(x, y, width, height);
+  return rect(x, y, width - x, height - y);
 };
 
 export const topLeft = (r: SkRect | SkRRect) =>

package/src/skia/types/ContourMeasure.tsx

@@ -1,5 +1,6 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkPath } from "./Path/Path";
+import type { SkPoint } from "./Point";
 
 export interface PosTan {
   px: number;
@@ -11,10 +12,10 @@ export interface PosTan {
 export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
   /**
    * Returns the given position and tangent line for the distance on the given contour.
-   * The return value is 4 floats in this order: posX, posY, vecX, vecY.
+   * The return value an array of 2 vectors: [position, tangent]
    * @param distance - will be pinned between 0 and length().
    */
-  getPosTan(distance: number): PosTan;
+  getPosTan(distance: number): [position: SkPoint, tangent: SkPoint];
 
   /**
    * Returns an Path representing the segment of this contour.

package/src/skia/types/Size.ts

@@ -0,0 +1,4 @@
+export interface SkSize {
+  width: number;
+  height: number;
+}

package/src/skia/types/index.ts

@@ -25,3 +25,4 @@ export * from "./RSXform";
 export * from "./JsiInstance";
 export * from "./Skia";
 export * from "./TextBlob";
+export * from "./Size";

package/src/skia/web/JsiSkColor.ts

@@ -241,6 +241,17 @@ const parseCSSColor = (cssStr: string) => {
         return null;
       } // Covers NaN.
       return [(iv & 0xff0000) >> 16, (iv & 0xff00) >> 8, iv & 0xff, 1];
+    } else if (str.length === 9) {
+      var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xffffffff)) {
+        return null; // Covers NaN.
+      }
+      return [
+        ((iv & 0xff000000) >> 24) & 0xff,
+        (iv & 0xff0000) >> 16,
+        (iv & 0xff00) >> 8,
+        (iv & 0xff) / 255,
+      ];
     }
 
     return null;

package/src/skia/web/JsiSkContourMeasure.ts

@@ -4,6 +4,7 @@ import type { SkContourMeasure } from "../types";
 
 import { HostObject } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPoint } from "./JsiSkPoint";
 
 export class JsiSkContourMeasure
   extends HostObject<ContourMeasure, "ContourMeasure">
@@ -13,9 +14,12 @@ export class JsiSkContourMeasure
     super(CanvasKit, ref, "ContourMeasure");
   }
 
-  getPosTan(distance: number) {
-    const [px, py, tx, ty] = this.ref.getPosTan(distance);
-    return { px, py, tx, ty };
+  getPosTan(distance: number): [position: JsiSkPoint, tangent: JsiSkPoint] {
+    const posTan = this.ref.getPosTan(distance);
+    return [
+      new JsiSkPoint(this.CanvasKit, posTan.slice(0, 2)),
+      new JsiSkPoint(this.CanvasKit, posTan.slice(2)),
+    ];
   }
 
   getSegment(startD: number, stopD: number, startWithMoveTo: boolean) {

package/src/values/web/RNSkReadonlyValue.ts

@@ -13,8 +13,10 @@ export class RNSkReadonlyValue<T> implements SkiaValue<T> {
   }
 
   protected update(nextValue: T): void {
-    this._current = nextValue;
-    this.notifyListeners();
+    if (this._current !== nextValue) {
+      this._current = nextValue;
+      this.notifyListeners();
+    }
   }
 
   public readonly __typename__ = "RNSkValue";

package/src/views/SkiaBaseWebView.tsx

@@ -46,8 +46,8 @@ export abstract class SkiaBaseWebView<
     // Reset canvas / surface on layout change
     if (this._canvasRef.current) {
       const canvas = this._canvasRef.current;
-      canvas.width = canvas.clientWidth * pd;
-      canvas.height = canvas.clientHeight * pd;
+      canvas.width = width * pd;
+      canvas.height = height * pd;
       const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
       if (!surface) {
         throw new Error("Could not create surface");