@shopify/react-native-skia 0.1.228 → 0.1.230

package/src/animation/timing/functions/bezier.ts

@@ -1,165 +0,0 @@
-// eslint-disable-next-line max-len
-// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/bezier.js
-
-const NEWTON_ITERATIONS = 4;
-const NEWTON_MIN_SLOPE = 0.001;
-const SUBDIVISION_PRECISION = 0.0000001;
-const SUBDIVISION_MAX_ITERATIONS = 10;
-
-const kSplineTableSize = 11;
-const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
-
-const float32ArraySupported = typeof Float32Array === "function";
-
-function a(aA1: number, aA2: number): number {
-  return 1.0 - 3.0 * aA2 + 3.0 * aA1;
-}
-
-function b(aA1: number, aA2: number): number {
-  return 3.0 * aA2 - 6.0 * aA1;
-}
-
-function c(aA1: number): number {
-  return 3.0 * aA1;
-}
-
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-function calcBezier(aT: number, aA1: number, aA2: number): number {
-  return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
-}
-
-// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
-function getSlope(aT: number, aA1: number, aA2: number): number {
-  return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
-}
-
-function binarySubdivide({
-  aX,
-  _aA,
-  _aB,
-  mX1,
-  mX2,
-}: {
-  aX: number;
-  _aA: number;
-  _aB: number;
-  mX1: number;
-  mX2: number;
-}): number {
-  let currentX;
-  let currentT;
-  let i = 0;
-  let aA = _aA;
-  let aB = _aB;
-  do {
-    currentT = aA + (aB - aA) / 2.0;
-    currentX = calcBezier(currentT, mX1, mX2) - aX;
-    if (currentX > 0.0) {
-      aB = currentT;
-    } else {
-      aA = currentT;
-    }
-  } while (
-    Math.abs(currentX) > SUBDIVISION_PRECISION &&
-    ++i < SUBDIVISION_MAX_ITERATIONS
-  );
-
-  return currentT;
-}
-
-function newtonRaphsonIterate(
-  aX: number,
-  _aGuessT: number,
-  mX1: number,
-  mX2: number
-): number {
-  let aGuessT = _aGuessT;
-  for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
-    const currentSlope = getSlope(aGuessT, mX1, mX2);
-    if (currentSlope === 0.0) {
-      return aGuessT;
-    }
-
-    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
-    aGuessT -= currentX / currentSlope;
-  }
-
-  return aGuessT;
-}
-
-export function bezier(
-  mX1: number,
-  mY1: number,
-  mX2: number,
-  mY2: number
-): (x: number) => number {
-  if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
-    throw new Error("bezier x values must be in [0, 1] range");
-  }
-
-  // Precompute samples table
-  const sampleValues = float32ArraySupported
-    ? new Float32Array(kSplineTableSize)
-    : new Array(kSplineTableSize);
-  if (mX1 !== mY1 || mX2 !== mY2) {
-    for (let i = 0; i < kSplineTableSize; ++i) {
-      sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
-    }
-  }
-
-  function getTForX(aX: number): number {
-    let intervalStart = 0.0;
-    let currentSample = 1;
-    const lastSample = kSplineTableSize - 1;
-
-    for (
-      ;
-      currentSample !== lastSample && sampleValues[currentSample] <= aX;
-      ++currentSample
-    ) {
-      intervalStart += kSampleStepSize;
-    }
-
-    --currentSample;
-
-    // Interpolate to provide an initial guess for t
-    const dist =
-      (aX - sampleValues[currentSample]) /
-      (sampleValues[currentSample + 1] - sampleValues[currentSample]);
-    const guessForT = intervalStart + dist * kSampleStepSize;
-
-    const initialSlope = getSlope(guessForT, mX1, mX2);
-    if (initialSlope >= NEWTON_MIN_SLOPE) {
-      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
-    }
-
-    if (initialSlope === 0.0) {
-      return guessForT;
-    }
-
-    return binarySubdivide({
-      aX,
-      _aA: intervalStart,
-      _aB: intervalStart + kSampleStepSize,
-      mX1,
-      mX2,
-    });
-  }
-
-  return function (x: number): number {
-    if (mX1 === mY1 && mX2 === mY2) {
-      return x; // linear
-    }
-
-    // Because JavaScript number are imprecise, we should guarantee the extremes are right.
-    if (x === 0) {
-      return 0;
-    }
-
-    if (x === 1) {
-      return 1;
-    }
-
-    return calcBezier(getTForX(x), mY1, mY2);
-  };
-}

package/src/animation/timing/functions/getResolvedParams.ts

@@ -1,50 +0,0 @@
-import type {
-  RequiredAnimationParams,
-  AnimationParams,
-  TimingConfig,
-} from "../../types";
-
-const DefaultParameters = {
-  to: 1,
-  loop: false,
-  yoyo: false,
-  immediate: true,
-};
-
-const DefaultTimingConfig = {
-  duration: 1000,
-  easing: (t: number) => t,
-};
-
-/**
- * Resolves parameters from optional values to a single object
- * @param toOrParams Params or to value
- * @param config timing/spring configuration
- */
-export const getResolvedParams = (
-  toOrParams: number | AnimationParams,
-  config?: TimingConfig
-): RequiredAnimationParams & Required<TimingConfig> => {
-  let resolvedParameters: RequiredAnimationParams = {
-    ...DefaultParameters,
-  };
-
-  if (typeof toOrParams === "number") {
-    resolvedParameters.to = toOrParams;
-  } else {
-    resolvedParameters = {
-      from: toOrParams.from ?? resolvedParameters.from,
-      to: toOrParams.to ?? resolvedParameters.to,
-      loop: toOrParams.loop ?? resolvedParameters.loop,
-      yoyo: toOrParams.yoyo ?? resolvedParameters.yoyo,
-    };
-  }
-
-  const resolvedConfig: Required<TimingConfig> = { ...DefaultTimingConfig };
-  if (config) {
-    resolvedConfig.duration = config.duration ?? DefaultTimingConfig.duration;
-    resolvedConfig.easing = config.easing ?? DefaultTimingConfig.easing;
-  }
-
-  return { ...resolvedParameters, ...resolvedConfig };
-};

package/src/animation/timing/functions/index.ts

@@ -1,4 +0,0 @@
-export { bezier } from "./bezier";
-export { timing } from "./timing";
-export * from "./types";
-export * from "./getResolvedParams";

package/src/animation/timing/functions/timing.ts

@@ -1,44 +0,0 @@
-import type { AnimationState } from "../../../values/types";
-
-/**
- * Calculates and returns a timing value based on the
- * input parameters. The timing value is a number between
- * 0 and 1.
- * @param t
- * @param duration
- * @param easing
- * @param loop
- * @param yoyo
- * @param onStop
- * @returns
- */
-export const timing = (
-  t: number,
-  duration: number,
-  easing: (t: number) => number,
-  loop: boolean,
-  yoyo: boolean,
-  state: AnimationState
-) => {
-  let current = t / duration;
-  let { finished } = state;
-  // Side effect to stop animation when duration is reached (if loop is false)
-  if (current >= 1.0 && !loop) {
-    finished = true;
-    current = 1.0;
-  }
-  // calculate return value
-  let n = current % 1;
-  if (yoyo) {
-    n = current % 2.0 >= 1.0 ? 1 - (current % 1) : current % 1;
-  } else if (!loop) {
-    if (current >= 1.0) {
-      n = 1.0;
-    }
-  }
-  current = easing(Math.max(0, Math.min(1, n)));
-  return {
-    current,
-    finished,
-  };
-};

package/src/animation/timing/functions/types.ts

@@ -1,8 +0,0 @@
-export type EasingFunction = (value: number) => number;
-
-export interface TimingConfig {
-  from?: number;
-  to?: number;
-  duration?: number;
-  easing?: EasingFunction;
-}

package/src/animation/timing/index.ts

@@ -1,4 +0,0 @@
-export { Easing } from "./Easing";
-export { useTiming } from "./useTiming";
-export { useLoop } from "./useLoop";
-export { runTiming } from "./runTiming";

package/src/animation/timing/runTiming.ts

@@ -1,36 +0,0 @@
-import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
-import type {
-  AnimationParams,
-  TimingConfig,
-  AnimationCallback,
-} from "../types";
-
-import { getResolvedParams } from "./functions";
-import { createTiming } from "./createTiming";
-/**
- * @deprecated Use Reanimated 3 for animations:
- * https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * Creates a new animation on an existing value that will be driven by
- * an animation value. The value will be run from / to the value in
- * params and modified by the provided easing curve for the length of
- * the duration. When the value has reached its desired "to" value the
- * animation will be stopped.
- *
- * @param value The value to animate
- * @param toOrParams To value or Animation parameters
- * @param config Spring or timing configuration
- * @returns an animation value that can be used to start/stop
- * the animation.
- */
-export const runTiming = (
-  value: SkiaMutableValue<number>,
-  toOrParams: number | AnimationParams,
-  config?: TimingConfig,
-  callback?: AnimationCallback
-): SkiaAnimation => {
-  const resolvedParameters = getResolvedParams(toOrParams, config);
-  const animation = createTiming(resolvedParameters, value, callback);
-  value.animation = animation;
-  return animation;
-};

package/src/animation/timing/useLoop.ts

@@ -1,21 +0,0 @@
-import type { TimingConfig } from "../types";
-
-import { useTiming } from "./useTiming";
-
-/**
- * @deprecated Use Reanimated 3 for animations:
- * https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * Configures a looped timing value. The value will go back and forth
- * between 0 and 1 and back.
- * @param config Timing configuration for easing and duration
- * @returns A value that can be used for further animations
- */
-export const useLoop = (config?: TimingConfig) =>
-  useTiming(
-    {
-      yoyo: true,
-      loop: true,
-    },
-    config
-  );

package/src/animation/timing/useTiming.ts

@@ -1,71 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-
-import type { SkiaValue, SkiaAnimation } from "../../values/types";
-import type {
-  AnimationParams,
-  TimingConfig,
-  AnimationCallback,
-} from "../types";
-import { useValue } from "../../values/hooks/useValue";
-
-import { getResolvedParams } from "./functions";
-import { createTiming } from "./createTiming";
-
-/**
- * @deprecated Use Reanimated 3 for animations:
- * https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * Creats an animation value that will run whenever
- * the animation parameters change. The animation start immediately.
- * @param toOrParams
- * @param config
- * @returns A value that is animated
- */
-export const useTiming = (
-  toOrParams: number | AnimationParams,
-  config?: TimingConfig,
-  callback?: AnimationCallback
-): SkiaValue<number> => {
-  // Resolve parameters - keep a cached version to avoid
-  // unnecesary re-renders.
-  const prevCfgRef = useRef<ReturnType<typeof getResolvedParams>>();
-  const resolvedParameters = useMemo(() => {
-    const nextParams = getResolvedParams(toOrParams, config);
-    if (!equals(prevCfgRef.current, nextParams)) {
-      prevCfgRef.current = nextParams;
-    }
-    return prevCfgRef.current!;
-  }, [config, toOrParams]);
-
-  // Create value
-  const value = useValue(resolvedParameters.from ?? 0);
-
-  // Create timing animation - keep a cached version to avoid
-  // uneccessary recreation of animations
-  const prevAnimationRef = useRef<SkiaAnimation>();
-  const prevParamsRef = useRef<typeof resolvedParameters>();
-  const animation = useMemo(() => {
-    if (!equals(prevParamsRef.current, resolvedParameters)) {
-      prevParamsRef.current = resolvedParameters;
-      prevAnimationRef.current = createTiming(
-        resolvedParameters,
-        value,
-        callback
-      );
-    }
-    return prevAnimationRef.current!;
-  }, [callback, resolvedParameters, value]);
-
-  // Run animation on the value - and stop it on unmount
-  useEffect(() => {
-    value.animation = animation;
-    return () => (value.animation = undefined);
-  }, [animation, value]);
-
-  // Return the value that is animated
-  return value;
-};
-
-const equals = <T1, T2>(a: T1, b: T2) => {
-  return JSON.stringify(a) === JSON.stringify(b);
-};

package/src/dom/nodes/drawings/CustomDrawingNode.ts

@@ -1,21 +0,0 @@
-import type { CustomDrawingNodeProps, DrawingContext } from "../../types";
-import { NodeType } from "../../types";
-import { JsiDrawingNode } from "../DrawingNode";
-import type { NodeContext } from "../Node";
-
-export class CustomDrawingNode extends JsiDrawingNode<
-  CustomDrawingNodeProps,
-  null
-> {
-  constructor(ctx: NodeContext, props: CustomDrawingNodeProps) {
-    super(ctx, NodeType.Drawing, props);
-  }
-
-  deriveProps() {
-    return null;
-  }
-
-  draw(ctx: DrawingContext) {
-    this.props.drawing(ctx);
-  }
-}

package/src/renderer/DependencyManager.tsx

@@ -1,196 +0,0 @@
-import type { Node } from "../dom/types";
-import type { SkiaValue } from "../values";
-
-import type { AnimatedProps } from "./processors";
-import { isSelector, isValue } from "./processors";
-import { mapKeys } from "./typeddash";
-
-type Unsubscribe = () => void;
-type Mutator = (value: unknown) => void;
-
-type SubscriptionState = {
-  nodes: Map<Node<unknown>, Mutator[]>;
-  unsubscribe: null | Unsubscribe;
-};
-
-export class DependencyManager {
-  registerValues: (values: Array<SkiaValue<unknown>>) => () => void;
-  subscriptions: Map<SkiaValue<unknown>, SubscriptionState> = new Map();
-  unregisterDependantValues: null | Unsubscribe = null;
-
-  constructor(
-    registerValues: (values: Array<SkiaValue<unknown>>) => () => void
-  ) {
-    this.registerValues = registerValues;
-  }
-
-  /**
-   * 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<unknown>) {
-    const subscriptions = Array.from(this.subscriptions.values()).filter((p) =>
-      p.nodes.has(node)
-    );
-
-    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");
-          }
-        }
-      });
-    }
-  }
-
-  /**
-   * 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
-   */
-  subscribeNode<P>(node: Node<unknown>, props: AnimatedProps<P>) {
-    // Get mutators from node's properties
-    const propSubscriptions = initializePropertySubscriptions(node, props);
-    if (propSubscriptions.length === 0) {
-      return;
-    }
-
-    // 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)
-      );
-    });
-  }
-
-  /**
-   * 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) => {
-    if (key === "children") {
-      return;
-    }
-    const propvalue = props[key];
-
-    if (isValue(propvalue)) {
-      // Subscribe to changes
-      nodePropSubscriptions.push({
-        value: propvalue,
-        mutator: (v) => {
-          node.setProp(key, v as P[typeof key]);
-        },
-      });
-      // Set initial value
-      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.setProp(key, propvalue.selector(v) as P[typeof key]);
-        },
-      });
-      // Set initial value
-      node.setProp(
-        key,
-        propvalue.selector(propvalue.value.current) as P[typeof key]
-      );
-    } else {
-      // Set initial value
-      node.setProp(key, propvalue as P[typeof key]);
-    }
-  });
-
-  return nodePropSubscriptions;
-};

package/src/renderer/components/Drawing.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-
-import type { CustomDrawingNodeProps } from "../../dom/types";
-
-/**
- * @deprecated If you are looking to use the Skia imperative API, you can use:
- * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
- * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
- */
-export const Drawing = (props: CustomDrawingNodeProps) => {
-  return <skDrawing {...props} />;
-};

package/src/specs/SkiaDrawViewNativeComponent.ts

@@ -1,10 +0,0 @@
-import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
-import type { ViewProps } from "react-native";
-
-export interface NativeProps extends ViewProps {
-  mode: string;
-  debug?: boolean;
-}
-
-// eslint-disable-next-line import/no-default-export
-export default codegenNativeComponent<NativeProps>("SkiaDrawView");