@shopify/react-native-skia 1.9.1 → 1.10.1

package/src/renderer/CanvasOld.tsx

@@ -0,0 +1,126 @@
+import React, {
+  useEffect,
+  useCallback,
+  useMemo,
+  forwardRef,
+  useRef,
+} from "react";
+import type {
+  RefObject,
+  ReactNode,
+  MutableRefObject,
+  ForwardedRef,
+  FunctionComponent,
+} from "react";
+import type { LayoutChangeEvent } from "react-native";
+
+import { SkiaDomView } from "../views";
+import type { SkiaBaseViewProps } from "../views";
+
+import { SkiaRoot } from "./Reconciler";
+
+export const useCanvasRef = () => useRef<SkiaDomView>(null);
+
+export interface CanvasOldProps extends SkiaBaseViewProps {
+  ref?: RefObject<SkiaDomView>;
+  children: ReactNode;
+  mode?: "default" | "continuous";
+}
+
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
+
+      if (resultValue) {
+        resultValue.value = { width, height };
+      }
+    },
+    [onLayout, resultValue]
+  );
+};
+
+export const CanvasOld = forwardRef<SkiaDomView, CanvasOldProps>(
+  (
+    {
+      children,
+      style,
+      debug,
+      mode = "default",
+      onSize: _onSize,
+      onLayout: _onLayout,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const onLayout = useOnSizeEvent(_onSize, _onLayout);
+    const innerRef = useCanvasRef();
+    const ref = useCombinedRefs(forwardedRef, innerRef);
+    const redraw = useCallback(() => {
+      innerRef.current?.redraw();
+    }, [innerRef]);
+    const getNativeId = useCallback(() => {
+      const id = innerRef.current?.nativeId ?? -1;
+      return id;
+    }, [innerRef]);
+
+    const root = useMemo(
+      () => new SkiaRoot(redraw, getNativeId),
+      [redraw, getNativeId]
+    );
+
+    // Render effect
+    useEffect(() => {
+      root.render(children);
+    }, [children, root, redraw]);
+
+    useEffect(() => {
+      return () => {
+        root.unmount();
+      };
+    }, [root]);
+
+    return (
+      <SkiaDomView
+        ref={ref}
+        style={style}
+        root={root.dom}
+        onLayout={onLayout}
+        debug={debug}
+        mode={mode}
+        {...props}
+      />
+    );
+  }
+) as FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;
+
+/**
+ * Combines a list of refs into a single ref. This can be used to provide
+ * both a forwarded ref and an internal ref keeping the same functionality
+ * on both of the refs.
+ * @param refs Array of refs to combine
+ * @returns A single ref that can be used in a ref prop.
+ */
+const useCombinedRefs = <T,>(
+  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
+) => {
+  const targetRef = React.useRef<T>(null);
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(targetRef.current);
+        } else {
+          ref.current = targetRef.current;
+        }
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};

package/src/sksg/Container.ts

@@ -14,7 +14,7 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
 
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
-  // const start = performance.now();
+  //const start = performance.now();
 
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
   replay(ctx, recording.commands);
@@ -87,13 +87,17 @@ class ReanimatedContainer extends Container {
       commands: record.commands,
       paintPool: record.paintPool,
     };
+    const { nativeId, Skia, recording } = this;
     if (animationValues.size > 0) {
-      const { nativeId, Skia, recording } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         drawOnscreen(Skia, nativeId, recording!);
       }, Array.from(animationValues));
     }
+    Rea.runOnUI(() => {
+      "worklet";
+      drawOnscreen(Skia, nativeId, recording!);
+    })();
   }
 }
 

package/src/sksg/HostConfig2.ts

@@ -0,0 +1,247 @@
+/*global NodeJS*/
+import type { Fiber, HostConfig } from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+
+import type { NodeType } from "../dom/types";
+import { shallowEq } from "../renderer/typeddash";
+
+import type { Container } from "./Container";
+import type { Node } from "./Node";
+
+const DEBUG = false;
+export const debug = (...args: Parameters<typeof console.log>) => {
+  if (DEBUG) {
+    console.log(...args);
+  }
+};
+
+type Instance = Node<unknown>;
+
+type Props = object;
+type TextInstance = Node<unknown>;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = unknown;
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+
+type SkiaHostConfig = HostConfig<
+  NodeType,
+  Props,
+  Container,
+  Instance,
+  TextInstance,
+  SuspenseInstance,
+  HydratableInstance,
+  PublicInstance,
+  HostContext,
+  UpdatePayload,
+  ChildSet,
+  TimeoutHandle,
+  NoTimeout
+>;
+
+const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  parent.children.push(child);
+};
+
+const removeNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  parent.children.splice(parent.children.indexOf(child), 1);
+};
+
+const insertBefore = (
+  parent: Node<unknown>,
+  child: Node<unknown>,
+  before: Node<unknown>
+) => {
+  parent.children.splice(parent.children.indexOf(before), 0, child);
+};
+
+export const sksgHostConfig: SkiaHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  supportsPersistence: false,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  appendChildToContainer(container, child) {
+    debug("appendChildToContainer");
+    container.root.push(child);
+  },
+
+  appendChild(parent, child) {
+    debug("appendChild", parent, child);
+    appendNode(parent, child);
+  },
+
+  getRootHostContext: (_rootContainerInstance: Container) => {
+    debug("getRootHostContext");
+    return null;
+  },
+
+  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
+    debug("getChildHostContext");
+    return null;
+  },
+
+  shouldSetTextContent(_type, _props) {
+    return false;
+  },
+
+  createTextInstance(
+    _text,
+    _rootContainerInstance,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createTextInstance");
+    // return SpanNode({}, text) as SkNode;
+    throw new Error("Text nodes are not supported yet");
+  },
+
+  createInstance(
+    type,
+    propsWithChildren,
+    _container,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createInstance", type);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { children, ...props } = propsWithChildren as any;
+    debug("createInstance", type);
+    const instance = {
+      type,
+      props,
+      children: [],
+    };
+    return instance;
+  },
+
+  appendInitialChild(parentInstance, child) {
+    debug("appendInitialChild");
+    appendNode(parentInstance, child);
+  },
+
+  finalizeInitialChildren(
+    parentInstance,
+    _type,
+    _props,
+    _rootContainerInstance,
+    _hostContext
+  ) {
+    debug("finalizeInitialChildren", parentInstance);
+    return false;
+  },
+
+  commitMount() {
+    // if finalizeInitialChildren = true
+    debug("commitMount");
+  },
+
+  prepareForCommit(_containerInfo) {
+    debug("prepareForCommit");
+    return null;
+  },
+
+  resetAfterCommit(container) {
+    debug("resetAfterCommit");
+    container.redraw();
+  },
+
+  getPublicInstance(node: Instance) {
+    debug("getPublicInstance");
+    return node;
+  },
+
+  prepareUpdate: (
+    _instance,
+    type,
+    oldProps,
+    newProps,
+    rootContainerInstance,
+    _hostContext
+  ) => {
+    debug("prepareUpdate");
+    const propsAreEqual = shallowEq(oldProps, newProps);
+    if (propsAreEqual) {
+      return null;
+    }
+    debug("update ", type);
+    return rootContainerInstance;
+  },
+
+  commitUpdate(
+    instance,
+    _updatePayload,
+    type,
+    prevProps,
+    nextProps,
+    _internalHandle
+  ) {
+    debug("commitUpdate: ", type);
+    if (shallowEq(prevProps, nextProps)) {
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { children, ...props } = nextProps as any;
+    instance.props = props;
+  },
+
+  commitTextUpdate: (
+    _textInstance: TextInstance,
+    _oldText: string,
+    _newText: string
+  ) => {
+    //  textInstance.instance = newText;
+  },
+
+  clearContainer: (container) => {
+    debug("clearContainer");
+    container.root = [];
+  },
+
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+
+  removeChild: (parent, child) => {
+    removeNode(parent, child);
+  },
+
+  removeChildFromContainer: (container, child) => {
+    container.root.splice(container.root.indexOf(child), 1);
+  },
+
+  insertInContainerBefore: (container, child, before) => {
+    container.root.splice(container.root.indexOf(before), 0, child);
+  },
+
+  insertBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  },
+
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
+
+  getInstanceFromNode: function (_node): Fiber | null | undefined {
+    return null;
+  },
+  prepareScopeUpdate: function (_scopeInstance, _instance): void {},
+  getInstanceFromScope: function (_scopeInstance): Instance | null {
+    return null;
+  },
+};

package/src/sksg/Recorder/Core.ts

@@ -27,6 +27,7 @@ import type {
 
 // export enum CommandType {
 //   // Context
+//   Group = "Group",
 //   SavePaint = "SavePaint",
 //   RestorePaint = "RestorePaint",
 //   SaveCTM = "SaveCTM",

package/src/sksg/Recorder/Player.ts

@@ -49,7 +49,7 @@ import {
 } from "./Core";
 import type { DrawingContext } from "./DrawingContext";
 
-const play = (ctx: DrawingContext, command: Command) => {
+function play(ctx: DrawingContext, command: Command) {
   "worklet";
   if (isGroup(command)) {
     command.children.forEach((child) => play(ctx, child));
@@ -154,7 +154,7 @@ const play = (ctx: DrawingContext, command: Command) => {
       ctx.paints.pop();
     });
   }
-};
+}
 
 export const replay = (ctx: DrawingContext, commands: Command[]) => {
   "worklet";

package/src/sksg/Recorder/Recorder.ts

@@ -69,7 +69,6 @@ export class Recorder {
       const prop = props[key];
       if (isSharedValue(prop)) {
         this.animationValues.add(prop);
-        props[key] = prop.value;
         animatedProps[key] = prop;
         hasAnimatedProps = true;
       }

package/src/sksg/Recorder/commands/Box.ts

@@ -1,4 +1,4 @@
-import { deflate, inflate } from "../../../dom/nodes";
+import { deflate, inflate, processColor } from "../../../dom/nodes";
 import type { BoxProps, BoxShadowProps } from "../../../dom/types";
 import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
 import type { Command } from "../Core";
@@ -31,7 +31,7 @@ export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
-      lPaint.setColor(Skia.Color(color));
+      lPaint.setColor(processColor(Skia, color));
       lPaint.setAlphaf(paint.getAlphaf() * opacity);
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)

package/src/sksg/Recorder/commands/ColorFilters.ts

@@ -1,4 +1,4 @@
-import { enumKey } from "../../../dom/nodes";
+import { enumKey, processColor } from "../../../dom/nodes";
 import type {
   BlendColorFilterProps,
   LerpColorFilterProps,
@@ -59,7 +59,7 @@ export const pushColorFilter = (
   if (isColorFilter(command, NodeType.BlendColorFilter)) {
     const { props } = command;
     const { mode } = props;
-    const color = ctx.Skia.Color(props.color);
+    const color = processColor(ctx.Skia, props.color);
     cf = ctx.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
   } else if (isColorFilter(command, NodeType.MatrixColorFilter)) {
     const { matrix } = command.props;

package/src/sksg/Recorder/commands/Drawing.ts

@@ -5,6 +5,7 @@ import {
   inflate,
   NodeType,
   processCircle,
+  processColor,
   processPath,
   processRect,
   processRRect,
@@ -87,7 +88,7 @@ export const drawBox = (
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
-      lPaint.setColor(Skia.Color(color));
+      lPaint.setColor(processColor(Skia, color));
       lPaint.setAlphaf(paint.getAlphaf() * opacity);
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
@@ -105,7 +106,7 @@ export const drawBox = (
       canvas.save();
       canvas.clipRRect(box, ClipOp.Intersect, false);
       const lPaint = Skia.Paint();
-      lPaint.setColor(Skia.Color(color));
+      lPaint.setColor(processColor(Skia, color));
       lPaint.setAlphaf(paint.getAlphaf() * opacity);
 
       lPaint.setMaskFilter(
@@ -170,7 +171,7 @@ export const drawVertices = (ctx: DrawingContext, props: VerticesProps) => {
     vertexMode,
     props.vertices,
     textures,
-    colors ? colors.map((c) => ctx.Skia.Color(c)) : undefined,
+    colors ? colors.map((c) => processColor(ctx.Skia, c)) : undefined,
     indices
   );
   const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
@@ -258,7 +259,7 @@ export const drawPatch = (ctx: DrawingContext, props: PatchProps) => {
     patch[0].c1,
   ];
   const colors = props.colors
-    ? props.colors.map((c) => ctx.Skia.Color(c))
+    ? props.colors.map((c) => processColor(ctx.Skia, c))
     : undefined;
   ctx.canvas.drawPatch(points, colors, texture, mode, ctx.paint);
 };

package/src/sksg/Recorder/commands/ImageFilters.ts

@@ -1,4 +1,4 @@
-import { enumKey, processRadius } from "../../../dom/nodes";
+import { enumKey, processColor, processRadius } from "../../../dom/nodes";
 import type {
   BlendImageFilterProps,
   BlurImageFilterProps,
@@ -113,7 +113,7 @@ const declareDropShadowImageFilter = (
 ) => {
   "worklet";
   const { dx, dy, blur, shadowOnly, color: cl, inner } = props;
-  const color = ctx.Skia.Color(cl);
+  const color = processColor(ctx.Skia, cl);
   let factory;
   if (inner) {
     factory = MakeInnerShadow.bind(null, ctx.Skia, shadowOnly);

package/src/sksg/Recorder/commands/Paint.ts

@@ -1,4 +1,4 @@
-import { enumKey } from "../../../dom/nodes";
+import { enumKey, processColor } from "../../../dom/nodes";
 import type { PaintProps } from "../../../dom/types";
 import {
   BlendMode,
@@ -8,22 +8,6 @@ import {
 } from "../../../skia/types";
 import type { SkPaint, Skia } from "../../../skia/types";
 
-export const processColor = (
-  Skia: Skia,
-  color: number | string | Float32Array | number[]
-) => {
-  "worklet";
-  if (typeof color === "string" || typeof color === "number") {
-    return Skia.Color(color);
-  } else if (Array.isArray(color) || color instanceof Float32Array) {
-    return color instanceof Float32Array ? color : new Float32Array(color);
-  } else {
-    throw new Error(
-      `Invalid color type: ${typeof color}. Expected number, string, or array.`
-    );
-  }
-};
-
 export const setPaintProperties = (
   Skia: Skia,
   paint: SkPaint,

package/src/sksg/Recorder/commands/Shaders.ts

@@ -2,6 +2,7 @@ import {
   enumKey,
   fitRects,
   getRect,
+  processColor,
   processGradientProps,
   processTransformProps,
   rect2rect,
@@ -49,7 +50,7 @@ const declareShader = (ctx: DrawingContext, props: ShaderProps) => {
 const declareColorShader = (ctx: DrawingContext, props: ColorProps) => {
   "worklet";
   const { color } = props;
-  const shader = ctx.Skia.Shader.MakeColor(ctx.Skia.Color(color));
+  const shader = ctx.Skia.Shader.MakeColor(processColor(ctx.Skia, color));
   ctx.shaders.push(shader);
 };
 

package/lib/commonjs/renderer/Canvas2.d.ts

@@ -1,10 +0,0 @@
-import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import type { SkSize } from "../skia/types";
-export interface Canvas2Props extends ViewProps {
-    debug?: boolean;
-    opaque?: boolean;
-    onSize?: SharedValue<SkSize>;
-    mode?: "continuous" | "default";
-}
-export declare const Canvas2: import("react").ForwardRefExoticComponent<Canvas2Props & import("react").RefAttributes<unknown>>;

package/lib/commonjs/renderer/Canvas2.js

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Canvas2 = void 0;
-var _react = require("react");
-var _SkiaViewNativeId = require("../views/SkiaViewNativeId");
-var _SkiaPictureViewNativeComponent = _interopRequireDefault(require("../specs/SkiaPictureViewNativeComponent"));
-var _Reconciler = require("../sksg/Reconciler");
-var _skia = require("../skia");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const NativeSkiaPictureView = _SkiaPictureViewNativeComponent.default;
-
-// TODO: no need to go through the JS thread for this
-const useOnSizeEvent = (resultValue, onLayout) => {
-  return (0, _react.useCallback)(event => {
-    if (onLayout) {
-      onLayout(event);
-    }
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    if (resultValue) {
-      resultValue.value = {
-        width,
-        height
-      };
-    }
-  }, [onLayout, resultValue]);
-};
-const Canvas2 = exports.Canvas2 = /*#__PURE__*/(0, _react.forwardRef)(({
-  mode,
-  debug,
-  opaque,
-  children,
-  onSize,
-  onLayout: _onLayout,
-  ...viewProps
-}, ref) => {
-  const rafId = (0, _react.useRef)(null);
-  const onLayout = useOnSizeEvent(onSize, _onLayout);
-  // Native ID
-  const nativeId = (0, _react.useMemo)(() => {
-    return _SkiaViewNativeId.SkiaViewNativeId.current++;
-  }, []);
-
-  // Root
-  const root = (0, _react.useMemo)(() => new _Reconciler.SkiaSGRoot(_skia.Skia, nativeId), [nativeId]);
-
-  // Render effects
-  (0, _react.useEffect)(() => {
-    root.render(children);
-  }, [children, root]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      root.unmount();
-    };
-  }, [root]);
-  const requestRedraw = (0, _react.useCallback)(() => {
-    rafId.current = requestAnimationFrame(() => {
-      root.render(children);
-      if (mode === "continuous") {
-        requestRedraw();
-      }
-    });
-  }, [children, mode, root]);
-  (0, _react.useEffect)(() => {
-    if (mode === "continuous") {
-      requestRedraw();
-    }
-    return () => {
-      if (rafId.current !== null) {
-        cancelAnimationFrame(rafId.current);
-      }
-    };
-  }, [mode, requestRedraw]);
-
-  // Component methods
-  (0, _react.useImperativeHandle)(ref, () => ({
-    makeImageSnapshot: rect => {
-      return SkiaViewApi.makeImageSnapshot(nativeId, rect);
-    },
-    makeImageSnapshotAsync: rect => {
-      return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
-    },
-    redraw: () => {
-      SkiaViewApi.requestRedraw(nativeId);
-    },
-    getNativeId: () => {
-      return nativeId;
-    }
-  }));
-  return /*#__PURE__*/React.createElement(NativeSkiaPictureView, _extends({
-    collapsable: false,
-    nativeID: `${nativeId}`,
-    debug: debug,
-    opaque: opaque,
-    onLayout: onLayout
-  }, viewProps));
-});
-//# sourceMappingURL=Canvas2.js.map