@shopify/react-native-skia 1.9.0 → 1.10.0

package/src/renderer/Canvas.tsx

@@ -1,32 +1,24 @@
-import React, {
-  useEffect,
+import {
+  forwardRef,
   useCallback,
+  useEffect,
+  useImperativeHandle,
   useMemo,
-  forwardRef,
   useRef,
 } from "react";
-import type {
-  RefObject,
-  ReactNode,
-  MutableRefObject,
-  ForwardedRef,
-  FunctionComponent,
-} from "react";
-import type { LayoutChangeEvent } from "react-native";
+import type { LayoutChangeEvent, ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
 
-import { SkiaDomView } from "../views";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import type { SkRect, SkSize } from "../skia/types";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
 import type { SkiaBaseViewProps } from "../views";
 
-import { SkiaRoot } from "./Reconciler";
-
-export const useCanvasRef = () => useRef<SkiaDomView>(null);
-
-export interface CanvasProps extends SkiaBaseViewProps {
-  ref?: RefObject<SkiaDomView>;
-  children: ReactNode;
-  mode?: "default" | "continuous";
-}
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
+// TODO: no need to go through the JS thread for this
 const useOnSizeEvent = (
   resultValue: SkiaBaseViewProps["onSize"],
   onLayout?: (event: LayoutChangeEvent) => void
@@ -46,39 +38,40 @@ const useOnSizeEvent = (
   );
 };
 
-export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
+export interface CanvasProps extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  onSize?: SharedValue<SkSize>;
+  mode?: "continuous" | "default";
+}
+
+export const Canvas = forwardRef(
   (
     {
-      children,
-      style,
+      mode,
       debug,
-      mode = "default",
-      onSize: _onSize,
+      opaque,
+      children,
+      onSize,
       onLayout: _onLayout,
-      ...props
-    },
-    forwardedRef
+      ...viewProps
+    }: CanvasProps,
+    ref
   ) => {
-    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 rafId = useRef<number | null>(null);
+    const onLayout = useOnSizeEvent(onSize, _onLayout);
+    // Native ID
+    const nativeId = useMemo(() => {
+      return SkiaViewNativeId.current++;
+    }, []);
 
-    const root = useMemo(
-      () => new SkiaRoot(redraw, getNativeId),
-      [redraw, getNativeId]
-    );
+    // Root
+    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
-    // Render effect
+    // Render effects
     useEffect(() => {
       root.render(children);
-    }, [children, root, redraw]);
+    }, [children, root]);
 
     useEffect(() => {
       return () => {
@@ -86,41 +79,50 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       };
     }, [root]);
 
+    const requestRedraw = useCallback(() => {
+      rafId.current = requestAnimationFrame(() => {
+        root.render(children);
+        if (mode === "continuous") {
+          requestRedraw();
+        }
+      });
+    }, [children, mode, root]);
+
+    useEffect(() => {
+      if (mode === "continuous") {
+        console.warn("The `mode` property in `Canvas` is deprecated.");
+        requestRedraw();
+      }
+      return () => {
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+        }
+      };
+    }, [mode, requestRedraw]);
+    // Component methods
+    useImperativeHandle(ref, () => ({
+      makeImageSnapshot: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+      },
+      makeImageSnapshotAsync: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+      },
+      redraw: () => {
+        SkiaViewApi.requestRedraw(nativeId);
+      },
+      getNativeId: () => {
+        return nativeId;
+      },
+    }));
     return (
-      <SkiaDomView
-        ref={ref}
-        style={style}
-        root={root.dom}
-        onLayout={onLayout}
+      <NativeSkiaPictureView
+        collapsable={false}
+        nativeID={`${nativeId}`}
         debug={debug}
-        mode={mode}
-        {...props}
+        opaque={opaque}
+        onLayout={onLayout}
+        {...viewProps}
       />
     );
   }
-) as FunctionComponent<CanvasProps & 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/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,10 +14,9 @@ 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);
-  //console.log(recording.commands);
   replay(ctx, recording.commands);
   const picture = rec.finishRecordingAsPicture();
   //const end = performance.now();
@@ -42,7 +41,7 @@ export abstract class Container {
       this.recording.paintPool,
       canvas
     );
-    //console.log(this._recording);
+    //console.log(this.recording.commands);
     replay(ctx, this.recording.commands);
   }
 
@@ -88,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",
@@ -68,6 +69,7 @@ import type {
 // }
 export enum CommandType {
   // Context
+  Group,
   SavePaint,
   RestorePaint,
   SaveCTM,
@@ -133,6 +135,15 @@ export const isCommand = <T extends CommandType>(
   return command.type === type;
 };
 
+interface GroupCommand extends Command<CommandType.Group> {
+  children: Command[];
+}
+
+export const isGroup = (command: Command): command is GroupCommand => {
+  "worklet";
+  return command.type === CommandType.Group;
+};
+
 interface Props {
   [CommandType.DrawImage]: ImageProps;
   [CommandType.DrawCircle]: CircleProps;

package/src/sksg/Recorder/Player.ts

@@ -43,14 +43,18 @@ import {
   CommandType,
   isCommand,
   isDrawCommand,
+  isGroup,
   materializeProps,
   type Command,
 } 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));
+    return;
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   materializeProps(command as any);
   if (isCommand(command, CommandType.SaveBackdropFilter)) {
@@ -150,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

@@ -46,8 +46,13 @@ interface AnimationValues {
 
 export class Recorder {
   commands: Command[] = [];
+  cursors: Command[][] = [];
   animationValues: Set<SharedValue<unknown>> = new Set();
 
+  constructor() {
+    this.cursors.push(this.commands);
+  }
+
   getRecording(): Recording & AnimationValues {
     return {
       commands: this.commands,
@@ -64,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;
       }
@@ -85,7 +89,17 @@ export class Recorder {
         command.animatedProps = animatedProps;
       }
     }
-    this.commands.push(command);
+    this.cursors[this.cursors.length - 1].push(command);
+  }
+
+  saveGroup() {
+    const children: Command[] = [];
+    this.add({ type: CommandType.Group, children });
+    this.cursors.push(children);
+  }
+
+  restoreGroup() {
+    this.cursors.pop();
   }
 
   savePaint(props: AnimatedProps<PaintProps>) {