Fix example regressions with float rect values (#500)

Co-authored-by: Christian Falch <[email protected]>

Author: wcandillon

example/src/Examples/Aurora/Aurora.tsx

@@ -4,7 +4,13 @@ import { CoonsPatchMeshGradient } from "./components/CoonsPatchMeshGradient";
 
 export const Aurora = () => {
   return (
-    <CoonsPatchMeshGradient rows={3} cols={3} colors={palette.otto} play />
+    <CoonsPatchMeshGradient
+      rows={3}
+      cols={3}
+      colors={palette.otto}
+      lines
+      handles
+    />
   );
 };
 

example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx

@@ -4,6 +4,8 @@ import type {
   SkiaReadonlyValue,
 } from "@shopify/react-native-skia";
 import {
+  Skia,
+  isEdge,
   Group,
   useClockValue,
   add,
@@ -24,6 +26,7 @@ import { Curves } from "./Curves";
 import { useHandles } from "./useHandles";
 
 const { width, height } = Dimensions.get("window");
+const window = Skia.XYWHRect(0, 0, width, height);
 
 const rectToTexture = (
   vertices: CubicBezierHandle[],
@@ -130,12 +133,7 @@ export const CoonsPatchMeshGradient = ({
     .flat();
   const meshNoise = useDerivedValue(() => {
     return defaultMesh.map((pt, i) => {
-      const isEdge =
-        pt.pos.x === 0 ||
-        pt.pos.y === 0 ||
-        pt.pos.x === Math.fround(width) ||
-        pt.pos.y === Math.fround(height);
-      if (isEdge) {
+      if (isEdge(pt.pos, window)) {
         return pt;
       }
       const noisePos = new SimplexNoise(`${i}-pos`);
@@ -169,7 +167,7 @@ export const CoonsPatchMeshGradient = ({
 
   const meshGesture = useValue(defaultMesh);
 
-  const onTouch = useHandles(meshGesture, defaultMesh, width, height);
+  const onTouch = useHandles(meshGesture, defaultMesh, window);
   const mesh = play ? meshNoise : meshGesture;
   if (image === null) {
     return null;
@@ -193,9 +191,7 @@ export const CoonsPatchMeshGradient = ({
         })}
       </Group>
       {defaultMesh.map(({ pos }, index) => {
-        const edge =
-          pos.x === 0 || pos.y === 0 || pos.x === width || pos.y === height;
-        if (edge || !handles) {
+        if (isEdge(pos, window) || !handles) {
           return null;
         }
         return (

example/src/Examples/Aurora/components/useHandles.ts

@@ -1,5 +1,14 @@
-import type { SkiaValue, CubicBezierHandle } from "@shopify/react-native-skia";
-import { sub, useTouchHandler, useValue } from "@shopify/react-native-skia";
+import type {
+  SkiaValue,
+  CubicBezierHandle,
+  SkRect,
+} from "@shopify/react-native-skia";
+import {
+  isEdge,
+  sub,
+  useTouchHandler,
+  useValue,
+} from "@shopify/react-native-skia";
 
 import { inRadius, symmetric } from "./Math";
 
@@ -11,8 +20,7 @@ type TouchSelection = null | {
 export const useHandles = (
   mesh: SkiaValue<CubicBezierHandle[]>,
   defaultMesh: CubicBezierHandle[],
-  width: number,
-  height: number
+  window: SkRect
 ) => {
   const selection = useValue<TouchSelection>(null);
   return useTouchHandler({
@@ -34,9 +42,7 @@ export const useHandles = (
         }
       } else {
         defaultMesh.every(({ pos: p }, index) => {
-          const edge =
-            p.x === 0 || p.y === 0 || p.x === width || p.y === height;
-          if (!edge) {
+          if (!isEdge(p, window)) {
             const { pos, c1, c2 } = mesh.current[index];
             const c3 = symmetric(c1, pos);
             const c4 = symmetric(c2, pos);

example/src/Examples/Vertices/Vertices.tsx

@@ -7,13 +7,16 @@ import {
   useDerivedValue,
   Vertices,
   useImage,
+  Skia,
+  isEdge,
 } from "@shopify/react-native-skia";
 import cdt2d from "cdt2d";
 import SimplexNoise from "simplex-noise";
 
 import "./cdt2d.d";
 
 const { width, height } = Dimensions.get("window");
+const window = Skia.XYWHRect(0, 0, width, height);
 const N = 3;
 const n = new Array(N + 1).fill(0).map((_, i) => i);
 const hSize = width / N;
@@ -34,15 +37,14 @@ export const Demo = () => {
   const clock = useClockValue();
   const vertices = useDerivedValue(
     () =>
-      defaultVertices.map(({ x, y }, i) => {
-        const isEdge = x === 0 || y === 0 || x === width || y === height;
-        if (isEdge) {
-          return { x, y };
+      defaultVertices.map((vertex, i) => {
+        if (isEdge(vertex, window)) {
+          return vertex;
         }
         const noise = new SimplexNoise(i);
         return {
-          x: x + AX * noise.noise2D(clock.current / F, 0),
-          y: y + AY * noise.noise2D(0, clock.current / F),
+          x: vertex.x + AX * noise.noise2D(clock.current / F, 0),
+          y: vertex.y + AY * noise.noise2D(0, clock.current / F),
         };
       }),
     [clock]

package/src/renderer/processors/Rects.ts

@@ -2,6 +2,7 @@
 import type { SkRect, SkRRect } from "../../skia";
 import { Skia } from "../../skia";
 
+import type { Vector } from "./math/Vector";
 import { vec } from "./math/Vector";
 import type { Radius } from "./Radius";
 import { processRadius } from "./Radius";
@@ -22,6 +23,9 @@ export const bounds = (rects: SkRect[]) => {
   return rect(x, y, width, height);
 };
 
+export const isEdge = (pos: Vector, b: SkRect) =>
+  pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.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) =>