@shopify/react-native-skia 0.1.158 → 0.1.160

package/src/dom/nodes/JsiSkDOM.ts

@@ -127,232 +127,346 @@ export class JsiSkDOM implements SkDOM {
   constructor(private ctx: NodeContext) {}
 
   Layer(props?: ChildrenProps) {
-    return new LayerNode(this.ctx, props ?? {});
+    return global.SkiaDomApi && global.SkiaDomApi.LayerNode
+      ? global.SkiaDomApi.LayerNode(props ?? {})
+      : new LayerNode(this.ctx, props ?? {});
   }
 
   Group(props?: GroupProps) {
-    return new GroupNode(this.ctx, props ?? {});
+    return global.SkiaDomApi && global.SkiaDomApi.GroupNode
+      ? global.SkiaDomApi.GroupNode(props ?? {})
+      : new GroupNode(this.ctx, props ?? {});
   }
 
   Paint(props: PaintProps) {
-    return new PaintNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PaintNode
+      ? global.SkiaDomApi.PaintNode(props ?? {})
+      : new PaintNode(this.ctx, props);
   }
 
   // Drawings
   Fill(props?: DrawingNodeProps) {
-    return new FillNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.FillNode
+      ? global.SkiaDomApi.FillNode(props ?? {})
+      : new FillNode(this.ctx, props);
   }
 
   Image(props: ImageProps) {
-    return new ImageNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ImageNode
+      ? global.SkiaDomApi.ImageNode(props ?? {})
+      : new ImageNode(this.ctx, props);
   }
 
   Circle(props: CircleProps) {
-    return new CircleNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.CircleNode
+      ? global.SkiaDomApi.CircleNode(props ?? {})
+      : new CircleNode(this.ctx, props);
   }
 
   Path(props: PathProps) {
-    return new PathNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PathNode
+      ? global.SkiaDomApi.PathNode(props ?? {})
+      : new PathNode(this.ctx, props);
   }
 
   CustomDrawing(props: CustomDrawingNodeProps) {
-    return new CustomDrawingNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.CustomDrawingNode
+      ? global.SkiaDomApi.CustomDrawingNode(props ?? {})
+      : new CustomDrawingNode(this.ctx, props);
   }
 
   Line(props: LineProps) {
-    return new LineNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.LineNode
+      ? global.SkiaDomApi.LineNode(props ?? {})
+      : new LineNode(this.ctx, props);
   }
 
   Oval(props: OvalProps) {
-    return new OvalNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.OvalNode
+      ? global.SkiaDomApi.OvalNode(props ?? {})
+      : new OvalNode(this.ctx, props);
   }
 
   Patch(props: PatchProps) {
-    return new PatchNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PatchNode
+      ? global.SkiaDomApi.PatchNode(props ?? {})
+      : new PatchNode(this.ctx, props);
   }
 
   Points(props: PointsProps) {
-    return new PointsNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PointsNode
+      ? global.SkiaDomApi.PointsNode(props ?? {})
+      : new PointsNode(this.ctx, props);
   }
 
   Rect(props: RectProps) {
-    return new RectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RectNode
+      ? global.SkiaDomApi.RectNode(props)
+      : new RectNode(this.ctx, props);
   }
 
   RRect(props: RoundedRectProps) {
-    return new RRectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RRectNode
+      ? global.SkiaDomApi.RRectNode(props)
+      : new RRectNode(this.ctx, props);
   }
 
   Vertices(props: VerticesProps) {
-    return new VerticesNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.VerticesNode
+      ? global.SkiaDomApi.VerticesNode(props)
+      : new VerticesNode(this.ctx, props);
   }
 
   Text(props: TextProps) {
-    return new TextNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TextNode
+      ? global.SkiaDomApi.TextNode(props)
+      : new TextNode(this.ctx, props);
   }
 
   TextPath(props: TextPathProps) {
-    return new TextPathNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TextPathNode
+      ? global.SkiaDomApi.TextPathNode(props)
+      : new TextPathNode(this.ctx, props);
   }
 
   TextBlob(props: TextBlobProps) {
-    return new TextBlobNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TextBlobNode
+      ? global.SkiaDomApi.TextBlobNode(props)
+      : new TextBlobNode(this.ctx, props);
   }
 
   Glyphs(props: GlyphsProps) {
-    return new GlyphsNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.GlyphsNode
+      ? global.SkiaDomApi.GlyphsNode(props)
+      : new GlyphsNode(this.ctx, props);
   }
 
   DiffRect(props: DiffRectProps) {
-    return new DiffRectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DiffRectNode
+      ? global.SkiaDomApi.DiffRectNode(props)
+      : new DiffRectNode(this.ctx, props);
   }
 
   Picture(props: PictureProps) {
-    return new PictureNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PictureNode
+      ? global.SkiaDomApi.PictureNode(props)
+      : new PictureNode(this.ctx, props);
   }
 
   ImageSVG(props: ImageSVGProps) {
-    return new ImageSVGNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ImageSVGNode
+      ? global.SkiaDomApi.ImageSVGNode(props)
+      : new ImageSVGNode(this.ctx, props);
   }
 
   // BlurMaskFilters
   BlurMaskFilter(props: BlurMaskFilterProps) {
-    return new BlurMaskFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlurMaskFilterNode
+      ? global.SkiaDomApi.BlurMaskFilterNode(props)
+      : new BlurMaskFilterNode(this.ctx, props);
   }
 
   // ImageFilters
   BlendImageFilter(props: BlendImageFilterProps) {
-    return new BlendImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlendImageFilterNode
+      ? global.SkiaDomApi.BlendImageFilterNode(props)
+      : new BlendImageFilterNode(this.ctx, props);
   }
 
   DropShadowImageFilter(props: DropShadowImageFilterProps) {
-    return new DropShadowImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DropShadowImageFilterNode
+      ? global.SkiaDomApi.DropShadowImageFilterNode(props)
+      : new DropShadowImageFilterNode(this.ctx, props);
   }
 
   DisplacementMapImageFilter(props: DisplacementMapImageFilterProps) {
-    return new DisplacementMapImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DisplacementMapImageFilterNode
+      ? global.SkiaDomApi.DisplacementMapImageFilterNode(props)
+      : new DisplacementMapImageFilterNode(this.ctx, props);
   }
 
   BlurImageFilter(props: BlurImageFilterProps) {
-    return new BlurImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlurImageFilterNode
+      ? global.SkiaDomApi.BlurImageFilterNode(props)
+      : new BlurImageFilterNode(this.ctx, props);
   }
 
   OffsetImageFilter(props: OffsetImageFilterProps) {
-    return new OffsetImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.OffsetImageFilterNode
+      ? global.SkiaDomApi.OffsetImageFilterNode(props)
+      : new OffsetImageFilterNode(this.ctx, props);
   }
 
   MorphologyImageFilter(props: MorphologyImageFilterProps) {
-    return new MorphologyImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.MorphologyImageFilterNode
+      ? global.SkiaDomApi.MorphologyImageFilterNode(props)
+      : new MorphologyImageFilterNode(this.ctx, props);
   }
 
   RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps) {
-    return new RuntimeShaderImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RuntimeShaderImageFilterNode
+      ? global.SkiaDomApi.RuntimeShaderImageFilterNode(props)
+      : new RuntimeShaderImageFilterNode(this.ctx, props);
   }
 
   // Color Filters
   MatrixColorFilter(props: MatrixColorFilterProps) {
-    return new MatrixColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.MatrixColorFilterNode
+      ? global.SkiaDomApi.MatrixColorFilterNode(props)
+      : new MatrixColorFilterNode(this.ctx, props);
   }
 
   BlendColorFilter(props: BlendColorFilterProps) {
-    return new BlendColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlendColorFilterNode
+      ? global.SkiaDomApi.BlendColorFilterNode(props)
+      : new BlendColorFilterNode(this.ctx, props);
   }
 
   LumaColorFilter() {
-    return new LumaColorFilterNode(this.ctx);
+    return global.SkiaDomApi && global.SkiaDomApi.LumaColorFilterNode
+      ? global.SkiaDomApi.LumaColorFilterNode()
+      : new LumaColorFilterNode(this.ctx);
   }
 
   LinearToSRGBGammaColorFilter() {
-    return new LinearToSRGBGammaColorFilterNode(this.ctx);
+    return global.SkiaDomApi &&
+      global.SkiaDomApi.LinearToSRGBGammaColorFilterNode
+      ? global.SkiaDomApi.LinearToSRGBGammaColorFilterNode()
+      : new LinearToSRGBGammaColorFilterNode(this.ctx);
   }
 
   SRGBToLinearGammaColorFilter() {
-    return new SRGBToLinearGammaColorFilterNode(this.ctx);
+    return global.SkiaDomApi &&
+      global.SkiaDomApi.SRGBToLinearGammaColorFilterNode
+      ? global.SkiaDomApi.SRGBToLinearGammaColorFilterNode()
+      : new SRGBToLinearGammaColorFilterNode(this.ctx);
   }
 
   LerpColorFilter(props: LerpColorFilterProps) {
-    return new LerpColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.LerpColorFilterNode
+      ? global.SkiaDomApi.LerpColorFilterNode(props)
+      : new LerpColorFilterNode(this.ctx, props);
   }
 
   // Shaders
   Shader(props: ShaderProps) {
-    return new ShaderNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ShaderNode
+      ? global.SkiaDomApi.ShaderNode(props)
+      : new ShaderNode(this.ctx, props);
   }
 
   ImageShader(props: ImageShaderProps) {
-    return new ImageShaderNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ImageShaderNode
+      ? global.SkiaDomApi.ImageShaderNode(props)
+      : new ImageShaderNode(this.ctx, props);
   }
 
   ColorShader(props: ColorProps) {
-    return new ColorNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ColorShaderNode
+      ? global.SkiaDomApi.ColorShaderNode(props)
+      : new ColorNode(this.ctx, props);
   }
 
   SweepGradient(props: SweepGradientProps) {
-    return new SweepGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.SweepGradientNode
+      ? global.SkiaDomApi.SweepGradientNode(props)
+      : new SweepGradientNode(this.ctx, props);
   }
 
   Turbulence(props: TurbulenceProps) {
-    return new TurbulenceNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TurbulenceNode
+      ? global.SkiaDomApi.TurbulenceNode(props)
+      : new TurbulenceNode(this.ctx, props);
   }
 
   FractalNoise(props: FractalNoiseProps) {
-    return new FractalNoiseNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.FractalNoiseNode
+      ? global.SkiaDomApi.FractalNoiseNode(props)
+      : new FractalNoiseNode(this.ctx, props);
   }
 
   LinearGradient(props: LinearGradientProps) {
-    return new LinearGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.LinearGradientNode
+      ? global.SkiaDomApi.LinearGradientNode(props)
+      : new LinearGradientNode(this.ctx, props);
   }
 
   RadialGradient(props: RadialGradientProps) {
-    return new RadialGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RadialGradientNode
+      ? global.SkiaDomApi.RadialGradientNode(props)
+      : new RadialGradientNode(this.ctx, props);
   }
 
   TwoPointConicalGradient(props: TwoPointConicalGradientProps) {
-    return new TwoPointConicalGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TwoPointConicalGradientNode
+      ? global.SkiaDomApi.TwoPointConicalGradientNode(props)
+      : new TwoPointConicalGradientNode(this.ctx, props);
   }
 
   // Path Effects
   CornerPathEffect(props: CornerPathEffectProps) {
-    return new CornerPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.CornerPathEffectNode
+      ? global.SkiaDomApi.CornerPathEffectNode(props)
+      : new CornerPathEffectNode(this.ctx, props);
   }
 
   DiscretePathEffect(props: DiscretePathEffectProps) {
-    return new DiscretePathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DiscretePathEffectNode
+      ? global.SkiaDomApi.DiscretePathEffectNode(props)
+      : new DiscretePathEffectNode(this.ctx, props);
   }
 
   DashPathEffect(props: DashPathEffectProps) {
-    return new DashPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DashPathEffectNode
+      ? global.SkiaDomApi.DashPathEffectNode(props)
+      : new DashPathEffectNode(this.ctx, props);
   }
 
   Path1DPathEffect(props: Path1DPathEffectProps) {
-    return new Path1DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.Path1DPathEffectNode
+      ? global.SkiaDomApi.Path1DPathEffectNode(props)
+      : new Path1DPathEffectNode(this.ctx, props);
   }
 
   Path2DPathEffect(props: Path2DPathEffectProps) {
-    return new Path2DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.Path2DPathEffectNode
+      ? global.SkiaDomApi.Path2DPathEffectNode(props)
+      : new Path2DPathEffectNode(this.ctx, props);
   }
 
   SumPathEffect() {
-    return new SumPathEffectNode(this.ctx);
+    return global.SkiaDomApi && global.SkiaDomApi.SumPathEffectNode
+      ? global.SkiaDomApi.SumPathEffectNode()
+      : new SumPathEffectNode(this.ctx);
   }
 
   Line2DPathEffect(props: Line2DPathEffectProps) {
-    return new Line2DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.Line2DPathEffectNode
+      ? global.SkiaDomApi.Line2DPathEffectNode(props)
+      : new Line2DPathEffectNode(this.ctx, props);
   }
 
   Blend(props: BlendProps) {
-    return new BlendNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlendNode
+      ? global.SkiaDomApi.BlendNode(props)
+      : new BlendNode(this.ctx, props);
   }
 
   BackdropFilter(props: ChildrenProps) {
-    return new BackdropFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BackdropFilterNode
+      ? global.SkiaDomApi.BackdropFilterNode(props)
+      : new BackdropFilterNode(this.ctx, props);
   }
 
   Box(props: BoxProps) {
-    return new BoxNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BoxNode
+      ? global.SkiaDomApi.BoxNode(props)
+      : new BoxNode(this.ctx, props);
   }
 
   BoxShadow(props: BoxShadowProps) {
-    return new BoxShadowNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BoxShadowNode
+      ? global.SkiaDomApi.BoxShadowNode(props)
+      : new BoxShadowNode(this.ctx, props);
   }
 }

package/src/dom/nodes/RenderNode.ts

@@ -293,7 +293,7 @@ const concatPaint = (
     paint.setColor(color);
   } else {
     const cl = paint.getColor();
-    cl[3] *= opacity;
+    cl[3] = opacity;
     paint.setColor(cl);
   }
   if (strokeWidth !== undefined) {

package/src/renderer/Canvas.tsx

@@ -1,10 +1,10 @@
 import React, {
   useEffect,
-  useState,
   useCallback,
   useMemo,
   forwardRef,
   useRef,
+  useState,
 } from "react";
 import type {
   RefObject,
@@ -15,13 +15,12 @@ import type {
 } from "react";
 import type { OpaqueRoot } from "react-reconciler";
 import ReactReconciler from "react-reconciler";
+import { Platform } from "react-native";
 
-import { SkiaView, useDrawCallback } from "../views";
+import { SkiaDomView } from "../views";
 import type { TouchHandler } from "../views";
-import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
-import type { SkiaValue, SkiaMutableValue } from "../values";
-import type { SkSize } from "../skia/types";
+import type { SkiaValue } from "../values";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -44,25 +43,34 @@ const render = (element: ReactNode, root: OpaqueRoot, container: Container) => {
   });
 };
 
-export const useCanvasRef = () => useRef<SkiaView>(null);
+export const useCanvasRef = () => useRef<SkiaDomView>(null);
+
+const createDependencyManager = (
+  registerValues: (values: Array<SkiaValue<unknown>>) => () => void
+) =>
+  global.SkiaDomApi && global.SkiaDomApi.DependencyManager
+    ? global.SkiaDomApi.DependencyManager(registerValues)
+    : new DependencyManager(registerValues);
 
-export interface CanvasProps extends ComponentProps<typeof SkiaView> {
-  ref?: RefObject<SkiaView>;
+export interface CanvasProps extends ComponentProps<typeof SkiaDomView> {
+  ref?: RefObject<SkiaDomView>;
   children: ReactNode;
   onTouch?: TouchHandler;
-  onSize?: SkiaMutableValue<SkSize>;
 }
 
-export const Canvas = forwardRef<SkiaView, CanvasProps>(
-  ({ children, style, debug, mode, onTouch, onSize }, forwardedRef) => {
-    const size = useValue({ width: 0, height: 0 });
-    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
+export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
+  (
+    { children, style, debug, mode, onTouch, onSize, ...props },
+    forwardedRef
+  ) => {
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
-    const [tick, setTick] = useState(0);
+    const [, setTick] = useState(0);
     const redraw = useCallback(() => {
-      setTick((t) => t + 1);
-    }, []);
+      Platform.OS === "web"
+        ? setTick((tick) => tick + 1)
+        : innerRef.current?.redraw();
+    }, [innerRef]);
 
     const registerValues = useCallback(
       (values: Array<SkiaValue<unknown>>) => {
@@ -75,7 +83,11 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     );
 
     const container = useMemo(() => {
-      return new Container(Skia, new DependencyManager(registerValues), redraw);
+      return new Container(
+        Skia,
+        createDependencyManager(registerValues),
+        redraw
+      );
     }, [redraw, registerValues]);
 
     const root = useMemo(
@@ -92,50 +104,15 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ),
       [container]
     );
+
     // Render effect
     useEffect(() => {
       render(
-        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,
+        <CanvasProvider value={{ Skia }}>{children}</CanvasProvider>,
         root,
         container
       );
-    }, [children, root, redraw, container, canvasCtx]);
-
-    const paint = useMemo(() => Skia.Paint(), []);
-
-    // Draw callback
-    const onDraw = useDrawCallback(
-      (canvas, info) => {
-        // TODO: if tree is empty (count === 1) maybe we should not render?
-        const { width, height, timestamp } = info;
-        if (onTouch) {
-          onTouch(info.touches);
-        }
-        if (
-          width !== canvasCtx.size.current.width ||
-          height !== canvasCtx.size.current.height
-        ) {
-          canvasCtx.size.current = { width, height };
-          if (onSize) {
-            onSize.current = { width, height };
-          }
-        }
-        paint.reset();
-        const ctx = {
-          width,
-          height,
-          timestamp,
-          canvas,
-          paint,
-          opacity: 1,
-          ref,
-          center: { x: width / 2, y: height / 2 },
-          Skia,
-        };
-        container.draw(ctx);
-      },
-      [tick, onTouch]
-    );
+    }, [children, root, redraw, container]);
 
     useEffect(() => {
       return () => {
@@ -146,12 +123,15 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     }, [container, root]);
 
     return (
-      <SkiaView
+      <SkiaDomView
         ref={ref}
         style={style}
-        onDraw={onDraw}
+        root={container.root}
+        onTouch={onTouch}
+        onSize={onSize}
         mode={mode}
         debug={debug}
+        {...props}
       />
     );
   }

package/src/renderer/DependencyManager.tsx

@@ -24,10 +24,6 @@ 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
@@ -77,7 +73,6 @@ export class DependencyManager {
    * when the node is mounted and when one or more props on the node changes.
    * @param node Node to subscribe to value changes for
    * @param props Node's properties
-   * @param onResolveProp Callback when a property value changes
    */
   subscribeNode<P>(node: Node<unknown>, props: AnimatedProps<P>) {
     // Get mutators from node's properties