Merge branch 'main' into elliotwaite-patch-1

Author: chrfalch

docs/docs/paint/overview.md

@@ -143,4 +143,4 @@ export const PaintDemo = () => {
 };
 ```
 
-<img src={require("/static/img/paint/assignement.png").default} width="256" height="256" />
+<img src={require("/static/img/paint/assignement.png").default} width="256" height="256" />

docs/yarn.lock

@@ -1805,8 +1805,10 @@
   integrity sha512-o6aam+0Ug1xGK3ABYmBm0B1YuEKfM/5kaoZO0eHbZwSpw9UzDX4G5y4Nx/K20FHqUmJHkZmLvOUFYwN4N+HqKA==
 
 "@shopify/react-native-skia@link:../package":
-  version "0.0.0"
-  uid ""
+  version "0.1.0-development"
+  dependencies:
+    canvaskit-wasm "0.36.1"
+    react-reconciler "^0.27.0"
 
 "@sideway/address@^4.1.3":
   version "4.1.4"
@@ -5737,9 +5739,9 @@ loader-runner@^4.2.0:
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
-  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"
@@ -7147,14 +7149,13 @@ react-native-reanimated@^2.4.1:
     setimmediate "^1.0.5"
     string-hash-64 "^1.0.3"
 
-react-reconciler@0.26.2:
-  version "0.26.2"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.26.2.tgz#bbad0e2d1309423f76cf3c3309ac6c96e05e9d91"
-  integrity sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==
+react-reconciler@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
+  integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.21.0"
 
 react-router-config@^5.1.1:
   version "5.1.1"
@@ -7573,6 +7574,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 [email protected]:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"

package/src/dom/nodes/DrawingNode.ts

@@ -9,7 +9,7 @@ import type {
 import type { NodeContext } from "./Node";
 import { JsiDeclarationNode } from "./Node";
 import { PaintNode } from "./PaintNode";
-import { isSkPaint, JsiRenderNode } from "./RenderNode";
+import { JsiRenderNode } from "./RenderNode";
 
 export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
   extends JsiRenderNode<P>
@@ -52,10 +52,8 @@ export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
   }
 
   renderNode(ctx: DrawingContext): void {
-    if (this.props.paint && isSkPaint(this.props.paint)) {
+    if (this.props.paint) {
       this.draw({ ...ctx, paint: this.props.paint });
-    } else if (this.props.paint && this.props.paint.current != null) {
-      this.draw({ ...ctx, paint: this.props.paint.current.materialize() });
     } else {
       this.draw(ctx);
     }

package/src/dom/nodes/RenderNode.ts

@@ -1,5 +1,3 @@
-import type { RefObject } from "react";
-
 import type {
   SkMatrix,
   SkRect,
@@ -21,7 +19,6 @@ import type {
   DrawingContext,
   NodeType,
   Node,
-  DeclarationNode,
 } from "../types";
 
 import { isPathDef, processPath, processTransformProps } from "./datatypes";
@@ -236,17 +233,12 @@ export abstract class JsiRenderNode<P extends GroupProps>
       this.clipRRect !== undefined;
     const shouldSave = hasTransform || hasClip || !!layer;
     const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-
     if (shouldSave) {
       if (layer) {
         if (typeof layer === "boolean") {
           canvas.saveLayer();
-        } else if (isSkPaint(layer)) {
-          canvas.saveLayer(layer);
         } else {
-          canvas.saveLayer(
-            layer.current ? layer.current.materialize() : undefined
-          );
+          canvas.saveLayer(layer);
         }
       } else {
         canvas.save();
@@ -274,10 +266,6 @@ export abstract class JsiRenderNode<P extends GroupProps>
   abstract renderNode(ctx: DrawingContext): void;
 }
 
-export const isSkPaint = (
-  obj: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint
-): obj is SkPaint => "__typename__" in obj && obj.__typename__ === "Paint";
-
 const concatPaint = (
   parent: SkPaint,
   {

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/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/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/skia/__tests__/Geometry.spec.ts

@@ -0,0 +1,15 @@
+import { importSkia } from "../../renderer/__tests__/setup";
+
+describe("Geometry", () => {
+  it("should calculate the bounding box the union of multiple rectangles", () => {
+    const { bounds, rect } = importSkia();
+
+    const r1 = rect(-10, -10, 30, 30);
+    const r2 = rect(30, 30, 100, 20);
+    const result = bounds([r1, r2]);
+    expect(result.x).toBe(-10);
+    expect(result.y).toBe(-10);
+    expect(result.width).toBe(140);
+    expect(result.height).toBe(60);
+  });
+});

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) =>