@shopify/react-native-skia 0.1.143 → 0.1.145

package/src/renderer/Canvas.tsx

@@ -20,6 +20,7 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
+import type { SkiaValue } from "../values";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -38,8 +39,7 @@ skiaReconciler.injectIntoDevTools({
 const render = (element: ReactNode, root: OpaqueRoot, container: Container) => {
   skiaReconciler.updateContainer(element, root, null, () => {
     hostDebug("updateContainer");
-
-    container.depMgr.subscribe();
+    container.depMgr.update();
   });
 };
 
@@ -60,9 +60,19 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     const [tick, setTick] = useState(0);
     const redraw = useCallback(() => setTick((t) => t + 1), []);
 
+    const registerValues = useCallback(
+      (values: Array<SkiaValue<unknown>>) => {
+        if (ref.current === null) {
+          throw new Error("Canvas ref is not set");
+        }
+        return ref.current.registerValues(values);
+      },
+      [ref]
+    );
+
     const container = useMemo(
-      () => new Container(new DependencyManager(ref), redraw),
-      [redraw, ref]
+      () => new Container(new DependencyManager(registerValues), redraw),
+      [redraw, registerValues]
     );
 
     const root = useMemo(
@@ -78,6 +88,8 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
       );
     }, [children, root, redraw, container, canvasCtx]);
 
+    const paint = useMemo(() => Skia.Paint(), []);
+
     // Draw callback
     const onDraw = useDrawCallback(
       (canvas, info) => {
@@ -92,7 +104,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ) {
           canvasCtx.size.current = { width, height };
         }
-        const paint = Skia.Paint();
+        paint.reset();
         const ctx = {
           width,
           height,
@@ -101,7 +113,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           paint,
           opacity: 1,
           ref,
-          center: Skia.Point(width / 2, height / 2),
+          center: { x: width / 2, y: height / 2 },
           Skia,
         };
         container.draw(ctx);
@@ -112,7 +124,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     useEffect(() => {
       return () => {
         skiaReconciler.updateContainer(null, root, null, () => {
-          container.depMgr.unsubscribe();
+          container.depMgr.remove();
         });
       };
     }, [container, root]);

package/src/renderer/DependencyManager.tsx

@@ -1,62 +1,193 @@
-import type { RefObject } from "react";
-
-import type { SkiaView } from "../views";
 import type { SkiaValue } from "../values";
 
-import { isSelector, isValue } from "./processors";
 import type { Node } from "./nodes";
+import type { AnimatedProps } from "./processors";
+import { isSelector, isValue } from "./processors";
+import { mapKeys } from "./typeddash";
 
 type Unsubscribe = () => void;
-type Props = { [key: string]: unknown };
+type Mutator = (value: unknown) => void;
+
+type SubscriptionState = {
+  nodes: Map<Node, Mutator[]>;
+  unsubscribe: null | Unsubscribe;
+};
 
 export class DependencyManager {
-  ref: RefObject<SkiaView>;
-  subscriptions: Map<
-    Node,
-    { values: SkiaValue<unknown>[]; unsubscribe: null | Unsubscribe }
-  > = new Map();
-
-  constructor(ref: RefObject<SkiaView>) {
-    this.ref = ref;
-  }
+  registerValues: (values: Array<SkiaValue<unknown>>) => () => void;
+  subscriptions: Map<SkiaValue<unknown>, SubscriptionState> = new Map();
+  unregisterDependantValues: null | Unsubscribe = null;
 
-  unSubscribeNode(node: Node) {
-    const subscription = this.subscriptions.get(node);
-    if (subscription && subscription.unsubscribe) {
-      subscription.unsubscribe();
-    }
-    this.subscriptions.delete(node);
+  constructor(
+    registerValues: (values: Array<SkiaValue<unknown>>) => () => void
+  ) {
+    this.registerValues = registerValues;
   }
 
-  subscribeNode(node: Node, props: Props) {
-    const values = Object.values(props)
-      .filter((v) => isValue(v) || isSelector(v))
-      .map((v) => (isSelector(v) ? v.value : (v as SkiaValue<unknown>)));
+  /**
+   * Call to unsubscribe all value listeners from the given node based
+   * on the current list of subscriptions for the node. This function
+   * is typically called when the node is unmounted or when one or more
+   * properties have changed.
+   * @param node Node to unsubscribe value listeners from
+   */
+  unsubscribeNode(node: Node) {
+    const subscriptions = Array.from(this.subscriptions.values()).filter((p) =>
+      p.nodes.has(node)
+    );
 
-    if (values.length > 0) {
-      this.subscriptions.set(node, { values, unsubscribe: null });
+    if (subscriptions) {
+      subscriptions.forEach((si) => {
+        // Delete node from subscription
+        si.nodes.delete(node);
+
+        // Remove subscription if there are no listeneres left on the value
+        if (si.nodes.size === 0) {
+          // There are no more nodes subscribing to this value, we can call
+          // unsubscribe on it.
+          if (!si.unsubscribe) {
+            throw new Error("Failed to unsubscribe to value subscription");
+          }
+          si.unsubscribe && si.unsubscribe();
+
+          // Remove from subscription states as well
+          const element = Array.from(this.subscriptions.entries()).find(
+            ([_, sub]) => sub === si
+          );
+          if (!element) {
+            throw new Error("Failed to find value subscription");
+          }
+          if (!this.subscriptions.delete(element[0])) {
+            throw new Error("Failed to delete value subscription");
+          }
+        }
+      });
     }
   }
 
-  subscribe() {
-    if (this.ref.current === null) {
-      throw new Error("Canvas ref is not set");
+  /**
+   * Adds listeners to the provided values so that the node is notified
+   * when a value changes. This is done in an optimized way so that this
+   * class only needs to listen to the value once and then forwards the
+   * change to the node and its listener. This method is typically called
+   * 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 extends Record<string, unknown>>(
+    node: Node,
+    props: AnimatedProps<P>
+  ) {
+    // Get mutators from node's properties
+    const propSubscriptions = initializePropertySubscriptions(node, props);
+    if (propSubscriptions.length === 0) {
+      return;
     }
-    this.subscriptions.forEach((subscription) => {
-      if (subscription.unsubscribe === null) {
-        subscription.unsubscribe = this.ref.current!.registerValues(
-          subscription.values
-        );
+
+    // Install all mutators for the node
+    propSubscriptions.forEach((ps) => {
+      // Do we already have a state for this SkiaValue
+      let subscriptionState = this.subscriptions.get(ps.value);
+      if (!subscriptionState) {
+        // Let's create a new subscription state for the skia value
+        subscriptionState = {
+          nodes: new Map(),
+          unsubscribe: null,
+        };
+        // Add single subscription to the new value
+        subscriptionState.unsubscribe = ps.value.addListener((v) => {
+          subscriptionState!.nodes.forEach((mutators) =>
+            mutators.forEach((m) => m(v))
+          );
+        });
+        this.subscriptions.set(ps.value, subscriptionState);
       }
+      // subscription mutators
+      subscriptionState.nodes.set(
+        node,
+        propSubscriptions
+          .filter((m) => m.value === ps.value)
+          .map((m) => m.mutator)
+      );
     });
   }
 
-  unsubscribe() {
-    this.subscriptions.forEach(({ unsubscribe }) => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
+  /**
+   * Called when the hosting container is mounted or updated. This ensures that we have
+   * a ref to the underlying SkiaView so that we can registers redraw listeners
+   * on values used in the current View automatically.
+   */
+  update() {
+    // Remove any previous registrations
+    if (this.unregisterDependantValues) {
+      this.unregisterDependantValues();
+    }
+
+    // Register redraw requests on the SkiaView for each unique value
+    this.unregisterDependantValues = this.registerValues(
+      Array.from(this.subscriptions.keys())
+    );
+  }
+
+  /**
+   * Called when the hosting container is unmounted or recreated. This ensures that we remove
+   * all subscriptions to Skia values so that we don't have any listeners left after
+   * the component is removed.
+   */
+  remove() {
+    // 1) Unregister redraw requests
+    if (this.unregisterDependantValues) {
+      this.unregisterDependantValues();
+      this.unregisterDependantValues = null;
+    }
+
+    // 2) Unregister nodes
+    Array.from(this.subscriptions.values()).forEach((si) => {
+      Array.from(si.nodes.keys()).forEach((node) => this.unsubscribeNode(node));
     });
+
+    // 3) Clear the rest of the subscriptions
     this.subscriptions.clear();
   }
 }
+
+const initializePropertySubscriptions = <P,>(
+  node: Node<P>,
+  props: AnimatedProps<P>
+) => {
+  const nodePropSubscriptions: Array<{
+    value: SkiaValue<unknown>;
+    mutator: Mutator;
+  }> = [];
+
+  mapKeys(props).forEach((key) => {
+    const propvalue = props[key];
+
+    if (isValue(propvalue)) {
+      // Subscribe to changes
+      nodePropSubscriptions.push({
+        value: propvalue,
+        mutator: (v) => (node.resolvedProps[key] = v as P[typeof key]),
+      });
+      // Set initial value
+      node.resolvedProps[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]),
+      });
+      // Set initial value
+      node.resolvedProps[key] = propvalue.selector(
+        propvalue.value.current
+      ) as P[typeof key];
+    } else {
+      // Set initial value
+      node.resolvedProps[key] = propvalue as P[typeof key];
+    }
+  });
+
+  return nodePropSubscriptions;
+};

package/src/renderer/HostConfig.ts

@@ -101,7 +101,7 @@ const removeNode = (parent: Node, child: Node) => {
   bustBranchMemoization(parent);
   const index = parent.children.indexOf(child);
   parent.children.splice(index, 1);
-  child.depMgr.unSubscribeNode(child);
+  child.depMgr.unsubscribeNode(child);
   // unsubscribe to all children as well
   for (const c of child.children) {
     removeNode(child, c);

package/src/renderer/components/backdrop/BackdropFilter.tsx

@@ -8,7 +8,7 @@ import { getInput } from "../imageFilters/getInput";
 import type { GroupProps } from "../Group";
 import { Group } from "../Group";
 
-const disableFilterMemoization = (children: Node<unknown>[]) => {
+const disableFilterMemoization = (children: Node[]) => {
   children.forEach((child) => {
     child.memoizable = false;
     disableFilterMemoization(child.children);

package/src/renderer/nodes/Declaration.tsx

@@ -3,7 +3,7 @@ import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors";
-import { isAnimated, materialize } from "../processors";
+import { isAnimated } from "../processors";
 import type { DependencyManager } from "../DependencyManager";
 import type { SkJSIInstance } from "../../skia/types";
 
@@ -28,9 +28,8 @@ export const useDeclaration = <P,>(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useCallback(cb, deps ?? []);
 
-export const isDeclarationNode = (
-  node: Node
-): node is DeclarationNode<unknown> => node instanceof DeclarationNode;
+export const isDeclarationNode = <P,>(node: Node): node is DeclarationNode<P> =>
+  node instanceof DeclarationNode;
 
 export interface DeclarationProps<P> {
   onDeclare: DeclarationCallback<P>;
@@ -54,14 +53,13 @@ export class DeclarationNode<P> extends Node<P> {
     super.props = props;
   }
 
-  get props() {
-    return this._props;
+  get props(): P {
+    return this.resolvedProps;
   }
 
   draw(ctx: DrawingContext) {
     const children = this.visit(ctx);
-    const props = materialize(this.props);
-    const obj = this.onDeclare(props, children, ctx);
+    const obj = this.onDeclare(this.props, children, ctx);
     return obj;
   }
 }

package/src/renderer/nodes/Drawing.tsx

@@ -3,7 +3,6 @@ import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors/Animations/Animations";
-import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia/types";
 import type { DependencyManager } from "../DependencyManager";
 import { processPaint } from "../processors";
@@ -25,8 +24,8 @@ export const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useCallback(cb, deps ?? []);
 
-export type DrawingProps<T> = {
-  onDraw: DrawingCallback<T>;
+export type DrawingProps<P> = {
+  onDraw: DrawingCallback<P>;
   skipProcessing?: boolean;
   children?: ReactNode | ReactNode[];
 };
@@ -47,20 +46,19 @@ export class DrawingNode<P> extends Node<P> {
   }
 
   draw(ctx: DrawingContext) {
-    const drawingProps = materialize(this.props);
     if (this.skipProcessing) {
-      this.onDraw(ctx, drawingProps, this);
+      this.onDraw(ctx, this.props, this);
     } else {
       const declarations = this.visit(ctx);
       const paint = processPaint(
         ctx.Skia,
         ctx.paint.copy(),
         ctx.opacity,
-        drawingProps,
+        this.props,
         declarations
       );
       [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {
-        this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);
+        this.onDraw({ ...ctx, paint: currentPaint }, this.props, this);
       });
     }
   }

package/src/renderer/nodes/Node.ts

@@ -12,29 +12,31 @@ type DeclarationResult = SkJSIInstance<string> | null;
 
 export abstract class Node<P = unknown> {
   readonly children: Node[] = [];
-  _props: AnimatedProps<P>;
+  // This cast is ok because we understand that the dependency manager will setup the initial props
+  resolvedProps: P = {} as P;
   memoizable = false;
   memoized: DeclarationResult | null = null;
   parent?: Node;
   depMgr: DependencyManager;
 
   constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {
-    this._props = props;
     this.depMgr = depMgr;
-    this.depMgr.unSubscribeNode(this);
-    this.depMgr.subscribeNode(this, props);
+    this.updatePropSubscriptions(props);
   }
 
   abstract draw(ctx: DrawingContext): void | DeclarationResult;
 
-  set props(props: AnimatedProps<P>) {
-    this.depMgr.unSubscribeNode(this);
+  updatePropSubscriptions(props: AnimatedProps<P>) {
     this.depMgr.subscribeNode(this, props);
-    this._props = props;
   }
 
-  get props() {
-    return this._props;
+  set props(props: AnimatedProps<P>) {
+    this.depMgr.unsubscribeNode(this);
+    this.updatePropSubscriptions(props);
+  }
+
+  get props(): P {
+    return this.resolvedProps;
   }
 
   visit(ctx: DrawingContext, children?: Node[]) {

package/src/renderer/processors/Animations/Animations.ts

@@ -1,5 +1,4 @@
 import type { SkiaSelector, SkiaValue } from "../../../values";
-import { mapKeys } from "../../typeddash";
 
 export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   if (value === undefined || value === null) {
@@ -37,28 +36,16 @@ export const isSelector = <T, R>(
 
 export const isAnimated = <T>(props: AnimatedProps<T>) => {
   for (const value of Object.values(props)) {
-    if (isValue(value)) {
+    if (isValue(value) || isSelector(value)) {
       return true;
     }
   }
   return false;
 };
 
-export const materialize = <T>(props: AnimatedProps<T>) => {
-  const result = { ...props };
-  mapKeys(props).forEach((key) => {
-    const prop = props[key];
-    if (isValue(prop)) {
-      result[key] = (prop as SkiaValue<T[typeof key]>).current;
-    } else if (isSelector(prop)) {
-      result[key] = prop.selector(prop.value.current) as T[typeof key];
-    }
-  });
-  return result as T;
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
+
 export type AnimatedProps<T> = {
   [K in keyof T]: AnimatedProp<T[K]>;
 };

package/src/skia/types/Paint/Paint.ts

@@ -34,6 +34,12 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
    */
   copy(): SkPaint;
 
+  /**
+   * Sets all SkPaint contents to their initial values. This is equivalent to replacing
+     SkPaint with the result of SkPaint().
+   */
+  reset(): void;
+
   /**
    * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values
    * (sRGB gamut, and encoded with the sRGB transfer function).

package/src/skia/web/Host.ts

@@ -21,7 +21,7 @@ export abstract class BaseHostObject<T, N extends string>
   implements SkJSIInstance<N>
 {
   readonly __typename__: N;
-  readonly ref: T;
+  ref: T;
 
   constructor(CanvasKit: CanvasKit, ref: T, typename: N) {
     super(CanvasKit);

package/src/skia/web/JsiSkPaint.ts

@@ -30,6 +30,10 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     return new JsiSkPaint(this.CanvasKit, this.ref.copy());
   }
 
+  reset() {
+    this.ref = new this.CanvasKit.Paint();
+  }
+
   getColor() {
     return this.ref.getColor();
   }