@shopify/react-native-skia 0.1.147 → 0.1.149

package/src/dom/types/PathEffects.ts

@@ -0,0 +1,35 @@
+import type { Path1DEffectStyle, SkMatrix } from "../../skia/types";
+
+import type { ChildrenProps, PathDef, SkEnum } from "./Common";
+
+export interface CornerPathEffectProps extends ChildrenProps {
+  r: number;
+}
+
+export interface DiscretePathEffectProps extends ChildrenProps {
+  length: number;
+  deviation: number;
+  seed: number;
+}
+
+export interface DashPathEffectProps extends ChildrenProps {
+  intervals: number[];
+  phase?: number;
+}
+
+export interface Path1DPathEffectProps extends ChildrenProps {
+  path: PathDef;
+  advance: number;
+  phase: number;
+  style: SkEnum<typeof Path1DEffectStyle>;
+}
+
+export interface Path2DPathEffectProps extends ChildrenProps {
+  matrix: SkMatrix;
+  path: PathDef;
+}
+
+export interface Line2DPathEffectProps extends ChildrenProps {
+  width: number;
+  matrix: SkMatrix;
+}

package/src/dom/types/Shaders.ts

@@ -0,0 +1,86 @@
+import type {
+  Color,
+  FilterMode,
+  MipmapMode,
+  SkImage,
+  SkRect,
+  SkRuntimeEffect,
+  TileMode,
+  Uniforms,
+  Vector,
+} from "../../skia/types";
+
+import type {
+  SkEnum,
+  TransformProps,
+  ChildrenProps,
+  RectCtor,
+  Fit,
+} from "./Common";
+
+export interface ShaderProps extends TransformProps, ChildrenProps {
+  source: SkRuntimeEffect;
+  uniforms: Uniforms;
+}
+
+export interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
+  tx: SkEnum<typeof TileMode>;
+  ty: SkEnum<typeof TileMode>;
+  fm: SkEnum<typeof FilterMode>;
+  mm: SkEnum<typeof MipmapMode>;
+  fit: Fit;
+  rect?: SkRect;
+  image: SkImage;
+}
+
+export interface ColorProps {
+  color: Color;
+}
+
+export interface TurbulenceProps {
+  freqX: number;
+  freqY: number;
+  octaves: number;
+  seed: number;
+  tileWidth: number;
+  tileHeight: number;
+}
+
+export interface FractalNoiseProps {
+  freqX: number;
+  freqY: number;
+  octaves: number;
+  seed: number;
+  tileWidth: number;
+  tileHeight: number;
+}
+
+export interface GradientProps extends TransformProps {
+  colors: Color[];
+  positions?: number[];
+  mode?: SkEnum<typeof TileMode>;
+  flags?: number;
+}
+
+export interface LinearGradientProps extends GradientProps {
+  start: Vector;
+  end: Vector;
+}
+
+export interface RadialGradientProps extends GradientProps {
+  c: Vector;
+  r: number;
+}
+
+export interface SweepGradientProps extends GradientProps {
+  c: Vector;
+  start?: number;
+  end?: number;
+}
+
+export interface TwoPointConicalGradientProps extends GradientProps {
+  start: Vector;
+  startR: number;
+  end: Vector;
+  endR: number;
+}

package/src/dom/types/SkDOM.ts

@@ -0,0 +1,202 @@
+import type {
+  SkImageFilter,
+  SkMaskFilter,
+  SkShader,
+  SkColorFilter,
+  SkPathEffect,
+  SkPaint,
+} from "../../skia/types";
+
+import type { ChildrenProps, GroupProps, PaintProps } from "./Common";
+import type {
+  BlendImageFilterProps,
+  BlurImageFilterProps,
+  DropShadowImageFilterProps,
+  OffsetImageFilterProps,
+  RuntimeShaderImageFilterProps,
+  DisplacementMapImageFilterProps,
+  MorphologyImageFilterProps,
+  BlendProps,
+} from "./ImageFilters";
+import type { DeclarationNode, RenderNode } from "./Node";
+import type {
+  BlendColorFilterProps,
+  MatrixColorFilterProps,
+  LerpColorFilterProps,
+} from "./ColorFilters";
+import type {
+  ImageProps,
+  CircleProps,
+  PathProps,
+  CustomDrawingNodeProps,
+  LineProps,
+  OvalProps,
+  PatchProps,
+  PointsProps,
+  RectProps,
+  RoundedRectProps,
+  VerticesProps,
+  TextProps,
+  DiffRectProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  PictureProps,
+  ImageSVGProps,
+  DrawingNodeProps,
+  BoxProps,
+  BoxShadowProps,
+} from "./Drawings";
+import type { BlurMaskFilterProps } from "./MaskFilters";
+import type {
+  FractalNoiseProps,
+  SweepGradientProps,
+  ImageShaderProps,
+  LinearGradientProps,
+  ShaderProps,
+  TurbulenceProps,
+  TwoPointConicalGradientProps,
+  RadialGradientProps,
+  ColorProps,
+} from "./Shaders";
+import type {
+  CornerPathEffectProps,
+  DashPathEffectProps,
+  DiscretePathEffectProps,
+  Line2DPathEffectProps,
+  Path1DPathEffectProps,
+  Path2DPathEffectProps,
+} from "./PathEffects";
+
+type ImageFilterNode<P> = DeclarationNode<P, SkImageFilter>;
+
+type PathEffectNode<P> = DeclarationNode<P, SkPathEffect>;
+type NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;
+
+type DrawingNode<P extends GroupProps> = RenderNode<P>;
+
+export interface SkDOM {
+  Group(props?: GroupProps): RenderNode<GroupProps>;
+  Paint(props: PaintProps): DeclarationNode<PaintProps, SkPaint>;
+
+  // Drawings
+  Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;
+  Image(props: ImageProps): DrawingNode<ImageProps>;
+  Circle(props: CircleProps): DrawingNode<CircleProps>;
+  Path(props: PathProps): DrawingNode<PathProps>;
+  CustomDrawing(
+    props: CustomDrawingNodeProps
+  ): DrawingNode<CustomDrawingNodeProps>;
+  Line(props: LineProps): DrawingNode<LineProps>;
+  Oval(props: OvalProps): DrawingNode<OvalProps>;
+  Patch(props: PatchProps): DrawingNode<PatchProps>;
+  Points(props: PointsProps): DrawingNode<PointsProps>;
+  Rect(props: RectProps): DrawingNode<RectProps>;
+  RRect(props: RoundedRectProps): DrawingNode<RoundedRectProps>;
+  Vertices(props: VerticesProps): DrawingNode<VerticesProps>;
+  Text(props: TextProps): DrawingNode<TextProps>;
+  TextPath(props: TextPathProps): DrawingNode<TextPathProps>;
+  TextBlob(props: TextBlobProps): DrawingNode<TextBlobProps>;
+  Glyphs(props: GlyphsProps): DrawingNode<GlyphsProps>;
+  DiffRect(props: DiffRectProps): DrawingNode<DiffRectProps>;
+  Picture(props: PictureProps): DrawingNode<PictureProps>;
+  ImageSVG(props: ImageSVGProps): DrawingNode<ImageSVGProps>;
+
+  // BlurMaskFilters
+  BlurMaskFilter(
+    props: BlurMaskFilterProps
+  ): DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
+
+  // ImageFilters
+  BlendImageFilter(
+    props: BlendImageFilterProps
+  ): ImageFilterNode<BlendImageFilterProps>;
+  BlurImageFilter(
+    props: BlurImageFilterProps
+  ): ImageFilterNode<BlurImageFilterProps>;
+  OffsetImageFilter(
+    props: OffsetImageFilterProps
+  ): ImageFilterNode<OffsetImageFilterProps>;
+  DropShadowImageFilter(
+    props: DropShadowImageFilterProps
+  ): ImageFilterNode<DropShadowImageFilterProps>;
+  MorphologyImageFilter(
+    props: MorphologyImageFilterProps
+  ): ImageFilterNode<MorphologyImageFilterProps>;
+  DisplacementMapImageFilter(
+    props: DisplacementMapImageFilterProps
+  ): ImageFilterNode<DisplacementMapImageFilterProps>;
+  RuntimeShaderImageFilter(
+    props: RuntimeShaderImageFilterProps
+  ): ImageFilterNode<RuntimeShaderImageFilterProps>;
+
+  // ColorFilters
+  MatrixColorFilter(
+    props: MatrixColorFilterProps
+  ): DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
+  BlendColorFilter(
+    props: BlendColorFilterProps
+  ): DeclarationNode<BlendColorFilterProps, SkColorFilter>;
+  LumaColorFilter(): DeclarationNode<null, SkColorFilter>;
+  LinearToSRGBGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
+  SRGBToLinearGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
+  LerpColorFilter(
+    props: LerpColorFilterProps
+  ): DeclarationNode<LerpColorFilterProps, SkColorFilter>;
+
+  // Shaders
+  Shader(props: ShaderProps): DeclarationNode<ShaderProps, SkShader>;
+  ImageShader(
+    props: ImageShaderProps
+  ): DeclarationNode<ImageShaderProps, SkShader>;
+  ColorShader(props: ColorProps): DeclarationNode<ColorProps, SkShader>;
+  Turbulence(
+    props: TurbulenceProps
+  ): DeclarationNode<TurbulenceProps, SkShader>;
+  FractalNoise(
+    props: FractalNoiseProps
+  ): DeclarationNode<FractalNoiseProps, SkShader>;
+  LinearGradient(
+    props: LinearGradientProps
+  ): DeclarationNode<LinearGradientProps, SkShader>;
+  RadialGradient(
+    props: RadialGradientProps
+  ): DeclarationNode<RadialGradientProps, SkShader>;
+  SweepGradient(
+    props: SweepGradientProps
+  ): DeclarationNode<SweepGradientProps, SkShader>;
+  TwoPointConicalGradient(
+    props: TwoPointConicalGradientProps
+  ): DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+
+  // Path Effects
+  CornerPathEffect(
+    props: CornerPathEffectProps
+  ): NullablePathEffectNode<CornerPathEffectProps>;
+  DiscretePathEffect(
+    props: DiscretePathEffectProps
+  ): PathEffectNode<DiscretePathEffectProps>;
+  DashPathEffect(
+    props: DashPathEffectProps
+  ): PathEffectNode<DashPathEffectProps>;
+  Path1DPathEffect(
+    props: Path1DPathEffectProps
+  ): NullablePathEffectNode<Path1DPathEffectProps>;
+  Path2DPathEffect(
+    props: Path2DPathEffectProps
+  ): NullablePathEffectNode<Path2DPathEffectProps>;
+  SumPathEffect(): NullablePathEffectNode<null>;
+  Line2DPathEffect(
+    props: Line2DPathEffectProps
+  ): NullablePathEffectNode<Line2DPathEffectProps>;
+
+  // Mixed
+  Blend(
+    props: BlendProps
+  ): DeclarationNode<BlendProps, SkShader | SkImageFilter>;
+  BackdropFilter(props: ChildrenProps): RenderNode<ChildrenProps>;
+  Box(props: BoxProps): RenderNode<BoxProps>;
+  BoxShadow(
+    props: BoxShadowProps
+  ): DeclarationNode<BoxShadowProps, BoxShadowProps>;
+}

package/src/dom/types/index.ts

@@ -0,0 +1,11 @@
+export * from "./DrawingContext";
+export * from "./Node";
+export * from "./NodeType";
+export * from "./SkDOM";
+export * from "./Common";
+export * from "./Drawings";
+export * from "./ImageFilters";
+export * from "./ColorFilters";
+export * from "./MaskFilters";
+export * from "./PathEffects";
+export * from "./Shaders";

package/src/index.ts

@@ -6,3 +6,5 @@ export * from "./skia";
 export * from "./external";
 export * from "./values";
 export * from "./animation";
+export * from "./dom/types";
+export * from "./dom/nodes";

package/src/renderer/Canvas.tsx

@@ -24,7 +24,7 @@ import type { SkiaValue } from "../values";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
-import { Container } from "./nodes";
+import { Container } from "./Container";
 import { DependencyManager } from "./DependencyManager";
 import { CanvasProvider } from "./useCanvas";
 
@@ -58,7 +58,9 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const [tick, setTick] = useState(0);
-    const redraw = useCallback(() => setTick((t) => t + 1), []);
+    const redraw = useCallback(() => {
+      setTick((t) => t + 1);
+    }, []);
 
     const registerValues = useCallback(
       (values: Array<SkiaValue<unknown>>) => {
@@ -70,10 +72,9 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
       [ref]
     );
 
-    const container = useMemo(
-      () => new Container(new DependencyManager(registerValues), redraw),
-      [redraw, registerValues]
-    );
+    const container = useMemo(() => {
+      return new Container(Skia, new DependencyManager(registerValues), redraw);
+    }, [redraw, registerValues]);
 
     const root = useMemo(
       () => skiaReconciler.createContainer(container, 0, false, null),

package/src/renderer/Container.tsx

@@ -0,0 +1,31 @@
+import { JsiSkDOM } from "../dom/nodes";
+import type {
+  GroupProps,
+  DrawingContext,
+  RenderNode,
+  SkDOM,
+} from "../dom/types";
+import type { Skia } from "../skia/types";
+
+import type { DependencyManager } from "./DependencyManager";
+
+export class Container {
+  private _root: RenderNode<GroupProps>;
+  public Sk: SkDOM;
+  constructor(
+    Skia: Skia,
+    public depMgr: DependencyManager,
+    public redraw: () => void
+  ) {
+    this.Sk = new JsiSkDOM({ Skia, depMgr });
+    this._root = this.Sk.Group();
+  }
+
+  draw(ctx: DrawingContext) {
+    this._root.render(ctx);
+  }
+
+  get root() {
+    return this._root;
+  }
+}

package/src/renderer/DependencyManager.tsx

@@ -1,6 +1,6 @@
+import type { Node } from "../dom/types";
 import type { SkiaValue } from "../values";
 
-import type { Node } from "./nodes";
 import type { AnimatedProps } from "./processors";
 import { isSelector, isValue } from "./processors";
 import { mapKeys } from "./typeddash";
@@ -9,7 +9,7 @@ type Unsubscribe = () => void;
 type Mutator = (value: unknown) => void;
 
 type SubscriptionState = {
-  nodes: Map<Node, Mutator[]>;
+  nodes: Map<Node<unknown>, Mutator[]>;
   unsubscribe: null | Unsubscribe;
 };
 
@@ -24,6 +24,10 @@ export class DependencyManager {
     this.registerValues = registerValues;
   }
 
+  unsubscribeNodes(nodes: Node<unknown>[]) {
+    nodes.forEach((n) => this.unsubscribeNode(n));
+  }
+
   /**
    * Call to unsubscribe all value listeners from the given node based
    * on the current list of subscriptions for the node. This function
@@ -31,7 +35,7 @@ export class DependencyManager {
    * properties have changed.
    * @param node Node to unsubscribe value listeners from
    */
-  unsubscribeNode(node: Node) {
+  unsubscribeNode(node: Node<unknown>) {
     const subscriptions = Array.from(this.subscriptions.values()).filter((p) =>
       p.nodes.has(node)
     );
@@ -75,10 +79,7 @@ export class DependencyManager {
    * @param props Node's properties
    * @param onResolveProp Callback when a property value changes
    */
-  subscribeNode<P extends Record<string, unknown>>(
-    node: Node,
-    props: AnimatedProps<P>
-  ) {
+  subscribeNode<P>(node: Node<unknown>, props: AnimatedProps<P>) {
     // Get mutators from node's properties
     const propSubscriptions = initializePropertySubscriptions(node, props);
     if (propSubscriptions.length === 0) {
@@ -162,30 +163,37 @@ const initializePropertySubscriptions = <P,>(
   }> = [];
 
   mapKeys(props).forEach((key) => {
+    if (key === "children") {
+      return;
+    }
     const propvalue = props[key];
 
     if (isValue(propvalue)) {
       // Subscribe to changes
       nodePropSubscriptions.push({
         value: propvalue,
-        mutator: (v) => (node.resolvedProps[key] = v as P[typeof key]),
+        mutator: (v) => {
+          node.setProp(key, v as P[typeof key]);
+        },
       });
       // Set initial value
-      node.resolvedProps[key] = (propvalue as SkiaValue<P[typeof key]>).current;
+      node.setProp(key, (propvalue as SkiaValue<P[typeof key]>).current);
     } else if (isSelector(propvalue)) {
       // Subscribe to changes
       nodePropSubscriptions.push({
         value: propvalue.value,
-        mutator: (v) =>
-          (node.resolvedProps[key] = propvalue.selector(v) as P[typeof key]),
+        mutator: (v) => {
+          node.setProp(key, propvalue.selector(v) as P[typeof key]);
+        },
       });
       // Set initial value
-      node.resolvedProps[key] = propvalue.selector(
-        propvalue.value.current
-      ) as P[typeof key];
+      node.setProp(
+        key,
+        propvalue.selector(propvalue.value.current) as P[typeof key]
+      );
     } else {
       // Set initial value
-      node.resolvedProps[key] = propvalue as P[typeof key];
+      node.setProp(key, propvalue as P[typeof key]);
     }
   });