@shopify/react-native-skia 0.1.163 → 0.1.165

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

@@ -2,7 +2,7 @@ import type { SkColor, SkPoint } from "../../../skia/types";
 import { BlendMode } from "../../../skia/types";
 import type { DrawingContext, PatchProps } from "../../types";
 import { NodeType } from "../../types";
-import { ALPHA, enumKey, processColor } from "../datatypes";
+import { enumKey } from "../datatypes";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 
@@ -39,30 +39,16 @@ export class PatchNode extends JsiDrawingNode<
         patch[3].c2,
         patch[0].c1,
       ],
-      colors: colors
-        ? colors.map((c) => processColor(this.Skia, c, 1))
-        : undefined,
+      colors: colors ? colors.map((c) => this.Skia.Color(c)) : undefined,
     };
   }
 
-  draw({ canvas, paint, opacity }: DrawingContext) {
+  draw({ canvas, paint }: DrawingContext) {
     if (!this.derived) {
       throw new Error("PatchNode: derived props not set");
     }
     const { texture } = this.props;
     const { colors, points, mode } = this.derived;
-    canvas.drawPatch(
-      points,
-      opacity === 1
-        ? colors
-        : colors &&
-            colors.map((c) => {
-              c[ALPHA] = c[ALPHA] * opacity;
-              return c;
-            }),
-      texture,
-      mode,
-      paint
-    );
+    canvas.drawPatch(points, colors, texture, mode, paint);
   }
 }

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

@@ -2,7 +2,7 @@ import type { SkVertices } from "../../../skia/types";
 import { VertexMode, BlendMode } from "../../../skia/types";
 import type { DrawingContext, VerticesProps } from "../../types";
 import { NodeType } from "../../types";
-import { enumKey, processColor } from "../datatypes";
+import { enumKey } from "../datatypes";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 
@@ -18,7 +18,7 @@ export class VerticesNode extends JsiDrawingNode<VerticesProps, SkVertices> {
       vertexMode,
       vertices,
       textures,
-      colors ? colors.map((c) => processColor(this.Skia, c, 1)) : undefined,
+      colors ? colors.map((c) => this.Skia.Color(c)) : undefined,
       indices
     );
   }

package/src/dom/nodes/paint/ColorFilters.ts

@@ -8,7 +8,6 @@ import type {
   Node,
 } from "../../types";
 import { DeclarationType, NodeType } from "../../types";
-import { processColor } from "../datatypes";
 import { enumKey } from "../datatypes/Enum";
 import type { LerpColorFilterProps } from "../../types/ColorFilters";
 
@@ -71,7 +70,7 @@ export class BlendColorFilterNode extends ColorFilterDeclaration<BlendColorFilte
 
   materialize() {
     const { mode } = this.props;
-    const color = processColor(this.Skia, this.props.color, 1);
+    const color = this.Skia.Color(this.props.color);
     const cf = this.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
     return this.compose(cf);
   }

package/src/dom/nodes/paint/ImageFilters.ts

@@ -15,7 +15,7 @@ import type {
   RuntimeShaderImageFilterProps,
 } from "../../types";
 import { DeclarationType, NodeType } from "../../types";
-import { processRadius, enumKey, processColor } from "../datatypes";
+import { processRadius, enumKey } from "../datatypes";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 
@@ -145,7 +145,7 @@ export class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadow
 
   materialize() {
     const { dx, dy, blur, shadowOnly, color: cl, inner } = this.props;
-    const color = processColor(this.Skia, cl, 1);
+    const color = this.Skia.Color(cl);
     const input = this.getOptionalChildInstance(0);
     let factory;
     if (inner) {

package/src/dom/nodes/paint/Shaders.ts

@@ -19,7 +19,6 @@ import type {
   TwoPointConicalGradientProps,
 } from "../../types";
 import { DeclarationType, NodeType } from "../../types";
-import { processColor } from "../datatypes/Color";
 import {
   enumKey,
   fitRects,
@@ -99,7 +98,7 @@ export class ColorNode extends ShaderDeclaration<ColorProps> {
 
   materialize() {
     const { color } = this.props;
-    return this.Skia.Shader.MakeColor(processColor(this.Skia, color, 1));
+    return this.Skia.Shader.MakeColor(this.Skia.Color(color));
   }
 }
 

package/src/dom/types/Common.ts

@@ -37,21 +37,21 @@ export interface ChildrenProps {
 }
 
 export interface RectCtor {
-  x: number;
-  y: number;
+  x?: number;
+  y?: number;
   width: number;
   height: number;
 }
 
 export interface RRectCtor extends RectCtor {
-  r: Radius;
+  r?: Radius;
 }
 
 export type RectDef = RectCtor | { rect: SkRect };
 export type RRectDef = RRectCtor | { rect: SkRRect };
 
 export interface PointCircleDef {
-  c: Vector;
+  c?: Vector;
   r: number;
 }
 

package/src/dom/types/DrawingContext.ts

@@ -3,5 +3,4 @@ import type { SkCanvas, SkPaint } from "../../skia/types";
 export interface DrawingContext {
   canvas: SkCanvas;
   paint: SkPaint;
-  opacity: number;
 }

package/src/dom/types/Drawings.ts

@@ -34,7 +34,7 @@ export interface DrawingNodeProps extends GroupProps {
 
 export type ImageProps = DrawingNodeProps &
   RectDef & {
-    fit: Fit;
+    fit?: Fit;
     image: SkImage;
   };
 

package/src/renderer/DrawingContext.ts

@@ -1,12 +1,12 @@
 import type { RefObject } from "react";
 
 import type { DrawingInfo, SkiaView } from "../views";
-import type { SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
+import type { Skia, Vector } from "../skia/types";
+import type { DrawingContext as DOMDrawingContext } from "../dom/types";
 
-export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
-  canvas: SkCanvas;
-  paint: SkPaint;
-  opacity: number;
+export interface DrawingContext
+  extends Omit<DrawingInfo, "touches">,
+    DOMDrawingContext {
   center: Vector;
   ref: RefObject<SkiaView>;
   Skia: Skia;

package/src/renderer/components/Mask.tsx

@@ -6,13 +6,18 @@ import { LumaColorFilter } from "./colorFilters/LumaColorFilter";
 import { Paint } from "./Paint";
 
 interface MaskProps {
-  mode: "luminance" | "alpha";
-  clip: boolean;
+  mode?: "luminance" | "alpha";
+  clip?: boolean;
   mask: ReactNode | ReactNode[];
   children: ReactNode | ReactNode[];
 }
 
-export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
+export const Mask = ({
+  children,
+  mask,
+  mode = "alpha",
+  clip = true,
+}: MaskProps) => {
   return (
     <Group layer>
       <Group
@@ -29,8 +34,3 @@ export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
     </Group>
   );
 };
-
-Mask.defaultProps = {
-  mode: "alpha",
-  clip: true,
-};

package/src/renderer/components/image/Image.tsx

@@ -6,9 +6,3 @@ import type { ImageProps } from "../../../dom/types";
 export const Image = (props: SkiaProps<ImageProps>) => {
   return <skImage {...props} />;
 };
-
-Image.defaultProps = {
-  x: 0,
-  y: 0,
-  fit: "contain",
-};

package/src/renderer/components/image/ImageShader.tsx

@@ -1,17 +1,29 @@
 import React from "react";
 
 import type { ImageShaderProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 
-export const ImageShader = (props: SkiaProps<ImageShaderProps>) => {
-  return <skImageShader {...props} />;
+export const ImageShader = ({
+  tx = "decal",
+  ty = "decal",
+  fm = "nearest",
+  mm = "none",
+  fit = "none",
+  transform = [],
+  ...props
+}: SkiaDefaultProps<
+  ImageShaderProps,
+  "tx" | "ty" | "fm" | "mm" | "fit" | "transform"
+>) => {
+  return (
+    <skImageShader
+      tx={tx}
+      ty={ty}
+      fm={fm}
+      mm={mm}
+      fit={fit}
+      transform={transform}
+      {...props}
+    />
+  );
 };
-
-ImageShader.defaultProps = {
-  tx: "decal",
-  ty: "decal",
-  fm: "nearest",
-  mm: "none",
-  fit: "none",
-  transform: [],
-} as const;

package/src/renderer/components/imageFilters/Blur.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { BlurImageFilterProps } from "../../../dom/types";
 
-export const Blur = (props: SkiaProps<BlurImageFilterProps>) => {
-  return <skBlurImageFilter {...props} />;
-};
-
-Blur.defaultProps = {
-  mode: "decal",
+export const Blur = ({
+  mode = "decal",
+  ...props
+}: SkiaDefaultProps<BlurImageFilterProps, "mode">) => {
+  return <skBlurImageFilter mode={mode} {...props} />;
 };

package/src/renderer/components/imageFilters/Morphology.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
 import type { MorphologyImageFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 
-export const Morphology = (props: SkiaProps<MorphologyImageFilterProps>) => {
-  return <skMorphologyImageFilter {...props} />;
-};
-
-Morphology.defaultProps = {
-  operator: "dilate",
+export const Morphology = ({
+  operator = "dilate",
+  ...props
+}: SkiaDefaultProps<MorphologyImageFilterProps, "operator">) => {
+  return <skMorphologyImageFilter operator={operator} {...props} />;
 };

package/src/renderer/components/imageFilters/Offset.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { OffsetImageFilterProps } from "../../../dom/types";
 
-export const Offset = (props: SkiaProps<OffsetImageFilterProps>) => {
-  return <skOffsetImageFilter {...props} />;
-};
-
-Offset.defaultProps = {
-  x: 0,
-  y: 0,
+export const Offset = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<OffsetImageFilterProps, "x" | "y">) => {
+  return <skOffsetImageFilter x={x} y={y} {...props} />;
 };

package/src/renderer/components/maskFilters/Blur.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
 import type { BlurMaskFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const BlurMask = (props: SkiaProps<BlurMaskFilterProps>) => {
-  return <skBlurMaskFilter {...props} />;
-};
-
-BlurMask.defaultProps = {
-  style: "normal",
-  respectCTM: true,
+export const BlurMask = ({
+  style = "normal",
+  respectCTM = true,
+  ...props
+}: SkiaDefaultProps<BlurMaskFilterProps, "style" | "respectCTM">) => {
+  return <skBlurMaskFilter style={style} respectCTM={respectCTM} {...props} />;
 };

package/src/renderer/components/pathEffects/Discrete.tsx

@@ -1,14 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { DiscretePathEffectProps } from "../../../dom/types";
 
-export const DiscretePathEffect = (
-  props: SkiaProps<DiscretePathEffectProps>
-) => {
-  return <skDiscretePathEffect {...props} />;
-};
-
-DiscretePathEffect.defaultProps = {
-  seed: 0,
+export const DiscretePathEffect = ({
+  seed = 0,
+  ...props
+}: SkiaDefaultProps<DiscretePathEffectProps, "seed">) => {
+  return <skDiscretePathEffect seed={seed} {...props} />;
 };

package/src/renderer/components/shaders/FractalNoise.tsx

@@ -1,14 +1,23 @@
 import React from "react";
 
 import type { FractalNoiseProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const FractalNoise = (props: SkiaProps<FractalNoiseProps>) => {
-  return <skFractalNoise {...props} />;
-};
-
-FractalNoise.defaultProps = {
-  seed: 0,
-  tileWidth: 0,
-  tileHeight: 0,
+export const FractalNoise = ({
+  seed = 0,
+  tileWidth = 0,
+  tileHeight = 0,
+  ...props
+}: SkiaDefaultProps<
+  FractalNoiseProps,
+  "seed" | "tileHeight" | "tileWidth"
+>) => {
+  return (
+    <skFractalNoise
+      seed={seed}
+      tileWidth={tileWidth}
+      tileHeight={tileHeight}
+      {...props}
+    />
+  );
 };

package/src/renderer/components/shaders/Shader.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { ShaderProps } from "../../../dom/types";
 
-export const Shader = (props: SkiaProps<ShaderProps>) => {
-  return <skShader {...props} />;
-};
-
-Shader.defaultProps = {
-  uniforms: [],
+export const Shader = ({
+  uniforms = {},
+  ...props
+}: SkiaDefaultProps<ShaderProps, "uniforms">) => {
+  return <skShader uniforms={uniforms} {...props} />;
 };

package/src/renderer/components/shaders/Turbulence.tsx

@@ -1,14 +1,20 @@
 import React from "react";
 
 import type { TurbulenceProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const Turbulence = (props: SkiaProps<TurbulenceProps>) => {
-  return <skTurbulence {...props} />;
-};
-
-Turbulence.defaultProps = {
-  seed: 0,
-  tileWidth: 0,
-  tileHeight: 0,
+export const Turbulence = ({
+  seed = 0,
+  tileWidth = 0,
+  tileHeight = 0,
+  ...props
+}: SkiaDefaultProps<TurbulenceProps, "seed" | "tileWidth" | "tileHeight">) => {
+  return (
+    <skTurbulence
+      seed={seed}
+      tileWidth={tileWidth}
+      tileHeight={tileHeight}
+      {...props}
+    />
+  );
 };

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

@@ -6,7 +6,3 @@ import type { CircleProps } from "../../../dom/types";
 export const Circle = (props: SkiaProps<CircleProps>) => {
   return <skCircle {...props} />;
 };
-
-Circle.defaultProps = {
-  c: { x: 0, y: 0 },
-};

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

@@ -7,7 +7,7 @@ import type { SkRect } from "../../../skia/types";
 import { Group } from "../Group";
 
 interface FitProps {
-  fit: Fit;
+  fit?: Fit;
   src: SkRect;
   dst: SkRect;
   children: ReactNode | ReactNode[];
@@ -18,11 +18,7 @@ export const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {
   return rect2rect(rects.src, rects.dst);
 };
 
-export const FitBox = ({ fit, src, dst, children }: FitProps) => {
+export const FitBox = ({ fit = "contain", src, dst, children }: FitProps) => {
   const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);
   return <Group transform={transform}>{children}</Group>;
 };
-
-FitBox.defaultProps = {
-  fit: "contain",
-};

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

@@ -6,8 +6,3 @@ import type { SkiaProps } from "../../processors";
 export const Oval = (props: SkiaProps<OvalProps>) => {
   return <skOval {...props} />;
 };
-
-Oval.defaultProps = {
-  x: 0,
-  y: 0,
-};

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

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { PathProps } from "../../../dom/types";
 
-export const Path = (props: SkiaProps<PathProps>) => {
-  return <skPath {...props} />;
-};
-
-Path.defaultProps = {
-  start: 0,
-  end: 1,
+export const Path = ({
+  start = 0,
+  end = 1,
+  ...props
+}: SkiaDefaultProps<PathProps, "start" | "end">) => {
+  return <skPath start={start} end={end} {...props} />;
 };

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { PointsProps } from "../../../dom/types";
 
-export const Points = (props: SkiaProps<PointsProps>) => {
-  return <skPoints {...props} />;
-};
-
-Points.defaultProps = {
-  mode: "points",
+export const Points = ({
+  mode = "points",
+  ...props
+}: SkiaDefaultProps<PointsProps, "mode">) => {
+  return <skPoints mode={mode} {...props} />;
 };

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

@@ -6,7 +6,3 @@ import type { SkiaProps } from "../../processors";
 export const RoundedRect = (props: SkiaProps<RoundedRectProps>) => {
   return <skRRect {...props} />;
 };
-
-RoundedRect.defaultProps = {
-  r: 0,
-};

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { VerticesProps } from "../../../dom/types";
 
-export const Vertices = (props: SkiaProps<VerticesProps>) => {
-  return <skVertices {...props} />;
-};
-
-Vertices.defaultProps = {
-  mode: "triangles",
+export const Vertices = ({
+  mode = "triangles",
+  ...props
+}: SkiaDefaultProps<VerticesProps, "mode">) => {
+  return <skVertices mode={mode} {...props} />;
 };

package/src/renderer/components/text/Glyphs.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
 import type { GlyphsProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const Glyphs = (props: SkiaProps<GlyphsProps>) => {
-  return <skGlyphs {...props} />;
-};
-
-Glyphs.defaultProps = {
-  x: 0,
-  y: 0,
+export const Glyphs = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<GlyphsProps, "x" | "y">) => {
+  return <skGlyphs x={x} y={y} {...props} />;
 };

package/src/renderer/components/text/Text.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextProps } from "../../../dom/types";
 
-export const Text = (props: SkiaProps<TextProps>) => {
-  return <skText {...props} />;
-};
-
-Text.defaultProps = {
-  x: 0,
-  y: 0,
+export const Text = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<TextProps, "x" | "y">) => {
+  return <skText x={x} y={y} {...props} />;
 };

package/src/renderer/components/text/TextBlob.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextBlobProps } from "../../../dom/types";
 
-export const TextBlob = (props: SkiaProps<TextBlobProps>) => {
-  return <skTextBlob {...props} />;
-};
-
-TextBlob.defaultProps = {
-  x: 0,
-  y: 0,
+export const TextBlob = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<TextBlobProps, "x" | "y">) => {
+  return <skTextBlob x={x} y={y} {...props} />;
 };

package/src/renderer/components/text/TextPath.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextPathProps } from "../../../dom/types";
 
-export const TextPath = (props: SkiaProps<TextPathProps>) => {
-  return <skTextPath {...props} />;
-};
-
-TextPath.defaultProps = {
-  initialOffset: 0,
+export const TextPath = ({
+  initialOffset = 0,
+  ...props
+}: SkiaDefaultProps<TextPathProps, "initialOffset">) => {
+  return <skTextPath initialOffset={initialOffset} {...props} />;
 };