Implement review comments

Author: wcandillon

example/src/Examples/API/Gradients.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { StyleSheet, Dimensions, ScrollView } from "react-native";
-import type { SkRect } from "@shopify/react-native-skia";
 import {
+  bottomRight,
+  center,
+  topLeft,
   Skia,
   rect,
   Canvas,
@@ -32,10 +34,6 @@ const r5 = rect(0, 2 * SIZE, SIZE, SIZE);
 const r6 = rect(SIZE, 2 * SIZE, SIZE, SIZE);
 const r7 = rect(0, 3 * SIZE, SIZE, SIZE);
 
-const topLeft = (r: SkRect) => vec(r.x, r.y);
-const bottomRight = (r: SkRect) => vec(r.x + r.width, r.y + r.height);
-const center = (r: SkRect) => vec(r.x + r.width / 2, r.y + r.height / 2);
-
 export const Gradients = () => {
   return (
     <ScrollView>

package/src/renderer/Canvas.tsx

@@ -18,6 +18,7 @@ import ReactReconciler from "react-reconciler";
 
 import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
+import { defaultSkiaPaint } from "../skia/types";
 import type { FontMgr } from "../skia/types";
 import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
@@ -26,7 +27,6 @@ import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
 import { Container } from "./nodes";
 import { DependencyManager } from "./DependencyManager";
-import { SkiaPaint } from "./processors/Paint";
 import { CanvasProvider } from "./useCanvas";
 
 export const skiaReconciler = ReactReconciler(skHostConfig);
@@ -97,7 +97,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ) {
           canvasCtx.size.current = { width, height };
         }
-        const paint = SkiaPaint(Skia);
+        const paint = defaultSkiaPaint(Skia.Paint());
         const ctx = {
           width,
           height,

package/src/renderer/__tests__/Simple.spec.tsx

@@ -25,9 +25,10 @@ describe("Renderer", () => {
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
   it("Scaled light blue rectangle", () => {
-    const scaled = size / 2;
+    const scale = 2;
+    const scaled = size / scale;
     const surface = drawOnNode(
-      <Group transform={[{ scale: 2 }]} origin={center}>
+      <Group transform={[{ scale }]} origin={center}>
         <Rect
           x={(width - scaled) / 2}
           y={(width - scaled) / 2}

package/src/renderer/components/Mask.tsx

@@ -1,8 +1,7 @@
 import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 
-import { BlendMode } from "../../skia/types";
-import { SkiaPaint } from "../processors";
+import { BlendMode, defaultSkiaPaint } from "../../skia/types";
 import { useCanvas } from "../useCanvas";
 
 import { Group } from "./Group";
@@ -17,15 +16,15 @@ interface MaskProps {
 export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
   const { Skia } = useCanvas();
   const maskPaint = useMemo(() => {
-    const paint = SkiaPaint(Skia);
+    const paint = defaultSkiaPaint(Skia.Paint());
     paint.setBlendMode(BlendMode.Src);
     if (mode === "luminance") {
       paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());
     }
     return paint;
   }, [Skia, mode]);
   const clippingPaint = useMemo(() => {
-    const paint = SkiaPaint(Skia);
+    const paint = defaultSkiaPaint(Skia.Paint());
     paint.setBlendMode(BlendMode.DstIn);
     return paint;
   }, [Skia]);

package/src/renderer/components/Paint.tsx

@@ -3,9 +3,10 @@ import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
 import type { SkPaint } from "../../skia/types";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
-import { SkiaPaint, processPaint } from "../processors";
+import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
 import { useCanvas } from "../useCanvas";
+import { defaultSkiaPaint } from "../../skia/types";
 
 export const usePaintRef = () => useRef<SkPaint>(null);
 
@@ -16,7 +17,7 @@ export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
 export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
   (props, ref) => {
     const { Skia } = useCanvas();
-    const paint = useMemo(() => SkiaPaint(Skia), [Skia]);
+    const paint = useMemo(() => defaultSkiaPaint(Skia.Paint()), [Skia]);
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>

package/src/renderer/components/shapes/Box.tsx

@@ -10,9 +10,9 @@ import type {
 import { ClipOp, BlurStyle } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
 import type { AnimatedProps, CustomPaintProps } from "../../processors";
-import { isRRect } from "../../processors/Rects";
 import { createDeclaration } from "../../nodes/Declaration";
 import { processColor } from "../../processors/Color";
+import { isRRect } from "../../../skia/types/RRect";
 
 const inflate = (
   Skia: Skia,

package/src/renderer/processors/Clips.ts

@@ -1,8 +1,8 @@
+import { isRRect } from "../../skia/types";
 import type { SkCanvas, ClipOp, SkRect, SkRRect, Skia } from "../../skia/types";
 
 import type { PathDef } from "./Paths";
 import { processPath, isPathDef } from "./Paths";
-import { isRRect } from "./Rects";
 
 export type ClipDef = SkRRect | SkRect | PathDef;
 

package/src/renderer/processors/Paint.ts

@@ -16,11 +16,7 @@ import type { DeclarationResult } from "../nodes";
 
 import { processColor } from "./Color";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
-export const SkiaPaint = (Skia: Skia) => {
-  const paint = Skia.Paint();
-  paint.setAntiAlias(true);
-  return paint;
-};
+
 export interface ChildrenProps {
   children?: ReactNode | ReactNode[];
 }

package/src/renderer/processors/Rects.ts

@@ -13,9 +13,6 @@ const isRRectCtor = (def: RRectDef): def is RRectCtor =>
 // We have an issue to check property existence on JSI backed instances
 const isRectCtor = (def: RectDef): def is RectCtor =>
   (def as any).rect === undefined;
-// We have an issue to check property existence on JSI backed instances
-export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
-  (def as any).rect !== undefined;
 
 export interface RectCtor {
   x: number;

package/src/skia/core/Rect.ts

@@ -1,5 +1,8 @@
 import { Skia } from "../Skia";
-import type { SkRect } from "../types";
+import type { SkRect, SkRRect } from "../types";
+import { isRRect } from "../types";
+
+import { vec } from "./Vector";
 
 export const rect = (x: number, y: number, width: number, height: number) =>
   Skia.XYWHRect(x, y, width, height);
@@ -11,3 +14,20 @@ export const bounds = (rects: SkRect[]) => {
   const height = Math.max(...rects.map((r) => r.y + r.height));
   return rect(x, y, width, height);
 };
+
+export const topLeft = (r: SkRect | SkRRect) =>
+  isRRect(r) ? vec(r.rect.x, r.rect.y) : vec(r.x, r.y);
+export const topRight = (r: SkRect | SkRRect) =>
+  isRRect(r) ? vec(r.rect.x + r.rect.width, r.rect.y) : vec(r.x + r.width, r.y);
+export const bottomLeft = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x, r.rect.y + r.rect.height)
+    : vec(r.x, r.y + r.height);
+export const bottomRight = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x + r.rect.width, r.rect.y + r.rect.height)
+    : vec(r.x + r.width, r.y + r.height);
+export const center = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x + r.rect.width / 2, r.rect.y + r.rect.height / 2)
+    : vec(r.x + r.width / 2, r.y + r.height / 2);