Merge branch 'main' into fix/skia-value-name

Author: wcandillon

example/src/Examples/API/Data.tsx

@@ -20,7 +20,7 @@ for (let x = 0; x < 256 * 4; x++) {
   }
 }
 const data = Skia.Data.fromBytes(pixels);
-const img = Skia.MakeImage(
+const img = Skia.Image.MakeImage(
   {
     width: 256,
     height: 256,

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

@@ -1,6 +1,8 @@
 import React from "react";
 import type { CubicBezierHandle, SkiaValue } from "@shopify/react-native-skia";
 import {
+  Skia,
+  isEdge,
   Group,
   useClockValue,
   add,
@@ -21,6 +23,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[],
@@ -127,12 +130,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`);
@@ -166,7 +164,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;
@@ -190,9 +188,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,8 +1,15 @@
 import type {
   SkiaMutableValue,
   CubicBezierHandle,
+  SkRect,
 } from "@shopify/react-native-skia";
-import { sub, useTouchHandler, useValue } from "@shopify/react-native-skia";
+import {
+  isEdge,
+  sub,
+  useTouchHandler,
+  useValue,
+} from "@shopify/react-native-skia";
+
 
 import { inRadius, symmetric } from "./Math";
 
@@ -14,8 +21,7 @@ type TouchSelection = null | {
 export const useHandles = (
   mesh: SkiaMutableValue<CubicBezierHandle[]>,
   defaultMesh: CubicBezierHandle[],
-  width: number,
-  height: number
+  window: SkRect
 ) => {
   const selection = useValue<TouchSelection>(null);
   return useTouchHandler({
@@ -37,9 +43,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) =>

package/src/skia/Skia.ts

@@ -1,5 +1,5 @@
 /*global SkiaApi*/
-import type { SkiaApi as SkSkiaApi } from "./types";
+import type { Skia as SkSkiaApi } from "./types";
 
 /**
  * Declares the SkiaApi as an available object in the global scope
@@ -8,39 +8,4 @@ declare global {
   var SkiaApi: SkSkiaApi;
 }
 
-/**
- * Declares the implemented API with overrides.
- */
-export const Skia = {
-  // Factories
-  Typeface: SkiaApi.Typeface,
-  MaskFilter: SkiaApi.MaskFilter,
-  RuntimeEffect: SkiaApi.RuntimeEffect,
-  Shader: SkiaApi.Shader,
-  ImageFilter: SkiaApi.ImageFilter,
-  PathEffect: SkiaApi.PathEffect,
-  Data: SkiaApi.Data,
-  SVG: SkiaApi.SVG,
-  FontMgr: SkiaApi.FontMgr,
-  TextBlob: SkiaApi.TextBlob,
-  // Constructors
-  Matrix: SkiaApi.Matrix,
-  Font: SkiaApi.Font,
-  Point: SkiaApi.Point,
-  XYWHRect: SkiaApi.XYWHRect,
-  RRectXY: SkiaApi.RRectXY,
-  RuntimeShaderBuilder: SkiaApi.RuntimeShaderBuilder,
-  Paint: SkiaApi.Paint,
-  PictureRecorder: SkiaApi.PictureRecorder,
-  Picture: SkiaApi.Picture,
-  Path: SkiaApi.Path,
-  ColorFilter: SkiaApi.ColorFilter,
-  ContourMeasureIter: SkiaApi.ContourMeasureIter,
-  Color: SkiaApi.Color,
-  RSXform: SkiaApi.RSXform,
-  // For the following methods the factory symmetry is broken to be comptatible with CanvasKit
-  MakeSurface: SkiaApi.Surface.Make,
-  MakeImageFromEncoded: SkiaApi.Image.MakeImageFromEncoded,
-  MakeImage: SkiaApi.Image.MakeImage,
-  MakeVertices: SkiaApi.MakeVertices,
-};
+export const Skia = SkiaApi;

package/src/skia/core/Image.ts

@@ -7,4 +7,4 @@ import { useRawData } from "./Data";
  * Returns a Skia Image object
  * */
 export const useImage = (source: DataSource, onError?: (err: Error) => void) =>
-  useRawData(source, Skia.MakeImageFromEncoded, onError);
+  useRawData(source, Skia.Image.MakeImageFromEncoded, onError);

package/src/skia/types/Skia.ts

@@ -32,14 +32,13 @@ import type {
 /**
  * Declares the interface for the native Skia API
  */
-export interface SkiaApi {
+export interface Skia {
   Point: (x: number, y: number) => SkPoint;
   XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
   RuntimeShaderBuilder: (rt: SkRuntimeEffect) => SkRuntimeShaderBuilder;
   RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
   RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
   Color: (color: Color) => SkColor;
-  parseColorString: (color: string) => SkColor | undefined;
   ContourMeasureIter: (
     path: SkPath,
     forceClosed: boolean,