@shopify/react-native-skia 0.1.157 → 0.1.158

package/src/dom/nodes/drawings/Text.ts

@@ -57,10 +57,10 @@ export class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
       }
       // Gives us the (x, y) coordinates as well as the cos/sin of the tangent
       // line at that position.
-      const { px, py, tx, ty } = cont.getPosTan(dist);
-      const adjustedX = px - (width / 2) * tx;
-      const adjustedY = py - (width / 2) * ty;
-      rsx.push(this.Skia.RSXform(tx, ty, adjustedX, adjustedY));
+      const [p, t] = cont.getPosTan(dist);
+      const adjustedX = p.x - (width / 2) * t.x;
+      const adjustedY = p.y - (width / 2) * t.y;
+      rsx.push(this.Skia.RSXform(t.x, t.y, adjustedX, adjustedY));
       dist += width / 2;
     }
     return this.Skia.TextBlob.MakeFromRSXform(text, rsx, font);

package/src/dom/types/Common.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from "react";
+import type { ReactNode } from "react";
 
 import type {
   BlendMode,
@@ -15,8 +15,6 @@ import type {
   Vector,
 } from "../../skia/types";
 
-import type { DeclarationNode } from "./Node";
-
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
 export type PathDef = string | SkPath;
@@ -86,5 +84,5 @@ export interface PaintProps extends ChildrenProps {
 export interface GroupProps extends PaintProps, TransformProps {
   clip?: ClipDef;
   invertClip?: boolean;
-  layer?: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint | boolean;
+  layer?: SkPaint | boolean;
 }

package/src/dom/types/Drawings.ts

@@ -1,5 +1,3 @@
-import type { RefObject } from "react";
-
 import type {
   FillType,
   SkImage,
@@ -29,10 +27,9 @@ import type {
   SkEnum,
 } from "./Common";
 import type { DrawingContext } from "./DrawingContext";
-import type { DeclarationNode } from "./Node";
 
 export interface DrawingNodeProps extends GroupProps {
-  paint?: SkPaint | RefObject<DeclarationNode<unknown, SkPaint>>;
+  paint?: SkPaint;
 }
 
 export type ImageProps = DrawingNodeProps &

package/src/mock/index.ts

@@ -53,7 +53,6 @@ export const Mock: typeof SkiaExports &
   useTypeface: Noop,
   useImage: Noop,
   useSVG: Noop,
-  usePicture: Noop,
   createPicture: Noop,
   // 3. Point/Rect/Transform utilities
   vec,

package/src/renderer/Canvas.tsx

@@ -20,7 +20,8 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
-import type { SkiaValue } from "../values";
+import type { SkiaValue, SkiaMutableValue } from "../values";
+import type { SkSize } from "../skia/types";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -49,10 +50,11 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
   ref?: RefObject<SkiaView>;
   children: ReactNode;
   onTouch?: TouchHandler;
+  onSize?: SkiaMutableValue<SkSize>;
 }
 
 export const Canvas = forwardRef<SkiaView, CanvasProps>(
-  ({ children, style, debug, mode, onTouch }, forwardedRef) => {
+  ({ children, style, debug, mode, onTouch, onSize }, forwardedRef) => {
     const size = useValue({ width: 0, height: 0 });
     const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
     const innerRef = useCanvasRef();
@@ -114,6 +116,9 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           height !== canvasCtx.size.current.height
         ) {
           canvasCtx.size.current = { width, height };
+          if (onSize) {
+            onSize.current = { width, height };
+          }
         }
         paint.reset();
         const ctx = {

package/src/renderer/HostComponents.ts

@@ -1,5 +1,3 @@
-import type { ForwardedRef } from "react";
-
 import { NodeType } from "../dom/types";
 import type {
   CircleProps,
@@ -55,7 +53,6 @@ import type {
   BlendProps,
   MorphologyImageFilterProps,
 } from "../dom/types/ImageFilters";
-import type { PaintNode } from "../dom/nodes/PaintNode";
 
 import type { Container } from "./Container";
 import { exhaustiveCheck } from "./typeddash";
@@ -67,7 +64,7 @@ declare global {
     interface IntrinsicElements {
       skGroup: SkiaProps<GroupProps>;
       skLayer: SkiaProps<ChildrenProps>;
-      skPaint: SkiaProps<PaintProps> & { ref: ForwardedRef<PaintNode> };
+      skPaint: SkiaProps<PaintProps>;
 
       // Drawings
       skFill: SkiaProps<DrawingNodeProps>;

package/src/renderer/components/Mask.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 
 import { BlendMode } from "../../skia/types";
-import { useCanvas } from "../useCanvas";
+import { useSkiaPrivate } from "../useCanvas";
 
 import { Group } from "./Group";
 
@@ -14,7 +14,7 @@ interface MaskProps {
 }
 
 export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
-  const { Skia } = useCanvas();
+  const Skia = useSkiaPrivate();
   const maskPaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setBlendMode(BlendMode.Src);

package/src/renderer/components/Paint.tsx

@@ -1,19 +1,8 @@
-/* eslint-disable max-len */
-import React, { useRef, forwardRef } from "react";
+import React from "react";
 
 import type { SkiaProps } from "../processors";
 import type { DrawingNodeProps } from "../../dom/types";
-import type { PaintNode } from "../../dom/nodes/PaintNode";
 
-export const usePaintRef = () => {
-  console.log(`usePaintRef() is now deprecated.
-If you are using the layer property, simply pass the component directly: https://shopify.github.io/react-native-skia/docs/group#layer-effects.
-If you are using the paint property, please the following paint properties directly: https://shopify.github.io/react-native-skia/docs/paint/overview`);
-  return useRef<PaintNode>(null);
+export const Paint = (props: SkiaProps<DrawingNodeProps>) => {
+  return <skPaint {...props} />;
 };
-
-export const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(
-  (props, ref) => {
-    return <skPaint ref={ref} {...props} />;
-  }
-);

package/src/renderer/useCanvas.ts

@@ -14,8 +14,22 @@ export const CanvasProvider = CanvasContext.Provider;
 
 export const useCanvas = () => {
   const ctx = useContext(CanvasContext);
+  console.warn(
+    // eslint-disable-next-line max-len
+    "useCanvas is deprecated. use the onSize property instead: https://shopify.github.io/react-native-skia/docs/canvas/overview"
+  );
   if (!ctx) {
     throw new Error("Canvas context is not available");
   }
   return ctx;
 };
+
+// This private function will be removed once we remove the useCanvas hook and
+// implement the Mask component as a node (will be faster too)
+export const useSkiaPrivate = () => {
+  const ctx = useContext(CanvasContext);
+  if (!ctx) {
+    throw new Error("Canvas context is not available");
+  }
+  return ctx.Skia;
+};

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");