@shopify/react-native-skia 0.0.135

package/react-native-skia.podspec

@@ -0,0 +1,71 @@
+# @shopify/react-native-skia.podspec
+
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-skia"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.description  = <<-DESC
+                  @shopify/react-native-skia
+                   DESC
+  s.homepage     = "https://github.com/shopify/react-native-skia"
+  # brief license entry:
+  s.license      = "MIT"
+  # optional - use expanded license entry instead:
+  # s.license    = { :type => "MIT", :file => "LICENSE" }
+  s.authors      = { "Your Name" => "yourname@email.com" }
+  s.platforms    = { :ios => "9.0" }
+  s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
+
+  s.requires_arc = true
+  s.pod_target_xcconfig = {
+    'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) SK_GL=1 SK_METAL=1',
+    'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17'
+  }
+
+  s.frameworks = 'GLKit', 'MetalKit'
+
+  s.ios.vendored_frameworks = [
+    'libs/ios/libskia.xcframework', 
+    'libs/ios/libsvg.xcframework', 
+    'libs/ios/libskshaper.xcframework'
+  ]
+
+  # All iOS cpp/h files
+  s.source_files = [
+    "ios/**/*.{h,c,cc,cpp,m,mm,swift}",  
+  ]
+
+  s.subspec 'SkiaHeaders' do |ss|
+    ss.header_mappings_dir = 'cpp/skia'
+    ss.source_files = "cpp/skia/**/*.{h,cpp}"
+  end
+
+  s.subspec 'Utils' do |ss|
+    ss.header_mappings_dir = 'cpp/utils'
+    ss.source_files = "cpp/utils/**/*.{h,cpp}"
+  end
+
+  s.subspec 'Jsi' do |ss|
+    ss.header_mappings_dir = 'cpp/jsi'
+    ss.source_files = "cpp/jsi/**/*.{h,cpp}"
+  end
+
+  s.subspec 'Api' do |ss|
+    ss.header_mappings_dir = 'cpp/api'
+    ss.source_files = "cpp/api/**/*.{h,cpp}"
+  end
+
+  s.subspec 'RNSkia' do |ss|
+    ss.header_mappings_dir = 'cpp/rnskia'
+    ss.source_files = "cpp/rnskia/**/*.{h,cpp}"
+  end
+
+  s.dependency "React"
+  s.dependency "React-callinvoker"
+  s.dependency "React-Core"
+end
+

package/scripts/install-npm.js

@@ -0,0 +1,23 @@
+const fs = require("fs");
+const path = require("path");
+
+console.log("Updating symlinks for Android build...");
+
+const createSymlink = (p) => {
+  console.log(`Creating symlink to ${p}`, __dirname, process.cwd());
+  const srcDir = path.resolve(`./cpp/${p}`);
+  const dstDir = path.resolve(`./android/cpp/${p}`);
+
+  if (!fs.existsSync(dstDir) || !fs.lstatSync(dstDir).isSymbolicLink()) {
+    fs.symlinkSync(srcDir, dstDir, "junction");
+  }
+};
+
+// Copy common cpp files from the package root to the android folder
+createSymlink("api");
+createSymlink("jsi");
+createSymlink("rnskia");
+createSymlink("skia");
+createSymlink("utils");
+
+console.log("Symlinks created successfully.");

package/src/animation/decay/decay.ts

@@ -0,0 +1,35 @@
+import type { DecayState, DefaultDecayConfig } from "./types";
+
+const VELOCITY_EPS = 1;
+const SLOPE_FACTOR = 0.1;
+
+export const decay = (
+  now: number,
+  state: DecayState,
+  config: DefaultDecayConfig
+): DecayState => {
+  const { lastTimestamp, startTimestamp, initialVelocity, current, velocity } =
+    state;
+  const nextState = { ...state };
+  const deltaTime = Math.min(now - lastTimestamp, 64);
+  const v =
+    velocity *
+    Math.exp(
+      -(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR
+    );
+  nextState.current = current + (v * config.velocityFactor * deltaTime) / 1000; // /1000 because time is in ms not in s
+  nextState.velocity = v;
+  nextState.lastTimestamp = now;
+
+  if (config.clamp) {
+    if (initialVelocity < 0 && nextState.current <= config.clamp[0]) {
+      nextState.current = config.clamp[0];
+      nextState.finished = true;
+    } else if (initialVelocity > 0 && nextState.current >= config.clamp[1]) {
+      nextState.current = config.clamp[1];
+      nextState.finished = true;
+    }
+  }
+  nextState.finished = Math.abs(v) < VELOCITY_EPS;
+  return nextState;
+};

package/src/animation/decay/index.ts

@@ -0,0 +1 @@
+export { runDecay } from "./runDecay";

package/src/animation/decay/runDecay.ts

@@ -0,0 +1,40 @@
+import { ValueApi } from "../../values/api";
+import type { SkiaMutableValue } from "../../values/types";
+
+import { decay } from "./decay";
+import type { DecayConfig, DefaultDecayConfig, DecayState } from "./types";
+
+/**
+ * Runs a decay animation from the current value to zero with the given decay
+ * configuration.
+ * @param value value to animate
+ * @param config Configuration or default configuration
+ * @returns Animation
+ */
+export const runDecay = (
+  value: SkiaMutableValue<number>,
+  config?: DecayConfig
+) => {
+  const resolvedConfig: DefaultDecayConfig = {
+    deceleration: 0.998,
+    velocityFactor: 1,
+    velocity: 0,
+    from: value.current,
+    ...config,
+  };
+  const updateFunction = (t: number, state: DecayState | undefined) => {
+    if (!state) {
+      return {
+        current: resolvedConfig.from,
+        finished: false,
+        lastTimestamp: t,
+        startTimestamp: t,
+        initialVelocity: resolvedConfig.velocity,
+        velocity: resolvedConfig.velocity,
+      };
+    }
+    return decay(t, state, resolvedConfig);
+  };
+  value.animation = ValueApi.createAnimation(updateFunction);
+  return value.animation;
+};

package/src/animation/decay/types.ts

@@ -0,0 +1,24 @@
+import type { AnimationState } from "../../values/types";
+
+export interface DecayConfig {
+  from?: number;
+  deceleration?: number;
+  velocityFactor?: number;
+  clamp?: number[];
+  velocity?: number;
+}
+
+export interface DefaultDecayConfig {
+  from: number;
+  deceleration: number;
+  velocityFactor: number;
+  clamp?: number[];
+  velocity: number;
+}
+
+export interface DecayState extends AnimationState {
+  lastTimestamp: number;
+  startTimestamp: number;
+  initialVelocity: number;
+  velocity: number;
+}

package/src/animation/functions/index.ts

@@ -0,0 +1,4 @@
+export * from "./interpolate";
+export * from "./interpolateColors";
+export * from "./interpolateVector";
+export * from "./interpolatePaths";

package/src/animation/functions/interpolate.ts

@@ -0,0 +1,184 @@
+/* eslint-disable max-len */
+export enum Extrapolate {
+  IDENTITY = "identity",
+  CLAMP = "clamp",
+  EXTEND = "extend",
+}
+
+interface InterpolationNarrowedInput {
+  leftEdgeInput: number;
+  rightEdgeInput: number;
+  leftEdgeOutput: number;
+  rightEdgeOutput: number;
+}
+
+export interface ExtrapolationConfig {
+  extrapolateLeft?: Extrapolate | string;
+  extrapolateRight?: Extrapolate | string;
+}
+
+interface RequiredExtrapolationConfig {
+  extrapolateLeft: Extrapolate;
+  extrapolateRight: Extrapolate;
+}
+
+export type ExtrapolationType =
+  | ExtrapolationConfig
+  | Extrapolate
+  | string
+  | undefined;
+
+function getVal(
+  type: Extrapolate,
+  coef: number,
+  val: number,
+  leftEdgeOutput: number,
+  rightEdgeOutput: number,
+  x: number
+): number {
+  switch (type) {
+    case Extrapolate.IDENTITY:
+      return x;
+    case Extrapolate.CLAMP:
+      if (coef * val < coef * leftEdgeOutput) {
+        return leftEdgeOutput;
+      }
+      return rightEdgeOutput;
+    case Extrapolate.EXTEND:
+    default:
+      return val;
+  }
+}
+
+function isExtrapolate(value: string): value is Extrapolate {
+  return (
+    value === Extrapolate.EXTEND ||
+    value === Extrapolate.CLAMP ||
+    value === Extrapolate.IDENTITY
+  );
+}
+
+// validates extrapolations type
+// if type is correct, converts it to ExtrapolationConfig
+export function validateInterpolationOptions(
+  type: ExtrapolationType
+): RequiredExtrapolationConfig {
+  // initialize extrapolationConfig with default extrapolation
+  const extrapolationConfig: RequiredExtrapolationConfig = {
+    extrapolateLeft: Extrapolate.EXTEND,
+    extrapolateRight: Extrapolate.EXTEND,
+  };
+
+  if (!type) {
+    return extrapolationConfig;
+  }
+
+  if (typeof type === "string") {
+    if (!isExtrapolate(type)) {
+      throw new Error(
+        `No supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+        interpolate(value, [inputRange], [outputRange], "clamp")`
+      );
+    }
+    extrapolationConfig.extrapolateLeft = type;
+    extrapolationConfig.extrapolateRight = type;
+    return extrapolationConfig;
+  }
+
+  // otherwise type is extrapolation config object
+  if (
+    (type.extrapolateLeft && !isExtrapolate(type.extrapolateLeft)) ||
+    (type.extrapolateRight && !isExtrapolate(type.extrapolateRight))
+  ) {
+    throw new Error(
+      `No supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+      interpolate(value, [inputRange], [outputRange], {
+        extrapolateLeft: Extrapolation.CLAMP,
+        extrapolateRight: Extrapolation.IDENTITY
+      }})`
+    );
+  }
+
+  Object.assign(extrapolationConfig, type);
+  return extrapolationConfig;
+}
+
+function internalInterpolate(
+  x: number,
+  narrowedInput: InterpolationNarrowedInput,
+  extrapolationConfig: RequiredExtrapolationConfig
+) {
+  const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput } =
+    narrowedInput;
+  if (rightEdgeInput - leftEdgeInput === 0) {
+    return leftEdgeOutput;
+  }
+  const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);
+  const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);
+  const coef = rightEdgeOutput >= leftEdgeOutput ? 1 : -1;
+
+  if (coef * val < coef * leftEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateLeft,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  } else if (coef * val > coef * rightEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateRight,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  }
+
+  return val;
+}
+
+// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
+export function interpolate(
+  x: number,
+  input: readonly number[],
+  output: readonly number[],
+  type?: ExtrapolationType
+): number {
+  if (input.length < 2 || output.length < 2) {
+    throw Error(
+      "Interpolation input and output should contain at least two values."
+    );
+  }
+
+  const extrapolationConfig = validateInterpolationOptions(type);
+  const { length } = input;
+  const narrowedInput: InterpolationNarrowedInput = {
+    leftEdgeInput: input[0],
+    rightEdgeInput: input[1],
+    leftEdgeOutput: output[0],
+    rightEdgeOutput: output[1],
+  };
+  if (length > 2) {
+    if (x > input[length - 1]) {
+      narrowedInput.leftEdgeInput = input[length - 2];
+      narrowedInput.rightEdgeInput = input[length - 1];
+      narrowedInput.leftEdgeOutput = output[length - 2];
+      narrowedInput.rightEdgeOutput = output[length - 1];
+    } else {
+      for (let i = 1; i < length; ++i) {
+        if (x <= input[i]) {
+          narrowedInput.leftEdgeInput = input[i - 1];
+          narrowedInput.rightEdgeInput = input[i];
+          narrowedInput.leftEdgeOutput = output[i - 1];
+          narrowedInput.rightEdgeOutput = output[i];
+          break;
+        }
+      }
+    }
+  }
+
+  return internalInterpolate(x, narrowedInput, extrapolationConfig);
+}

package/src/animation/functions/interpolateColors.ts

@@ -0,0 +1,57 @@
+import { mix } from "../../renderer/processors/math";
+import type { Color, SkColor } from "../../skia";
+import { Skia } from "../../skia";
+
+import { interpolate } from "./interpolate";
+
+const interpolateColorsRGB = (
+  value: number,
+  inputRange: number[],
+  outputRange: SkColor[]
+) => {
+  const r = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[0]),
+    "clamp"
+  );
+  const g = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[1]),
+    "clamp"
+  );
+  const b = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[2]),
+    "clamp"
+  );
+  const a = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[3]),
+    "clamp"
+  );
+  return new Float32Array([r, g, b, a]);
+};
+
+export const interpolateColors = (
+  value: number,
+  inputRange: number[],
+  _outputRange: Color[]
+) => {
+  const outputRange = _outputRange.map((cl) => Skia.Color(cl));
+  return interpolateColorsRGB(value, inputRange, outputRange);
+};
+
+export const mixColors = (value: number, x: Color, y: Color) => {
+  const c1 = Skia.Color(x);
+  const c2 = Skia.Color(y);
+  return new Float32Array([
+    mix(value, c1[0], c2[0]),
+    mix(value, c1[1], c2[1]),
+    mix(value, c1[2], c2[2]),
+    mix(value, c1[3], c2[3]),
+  ]);
+};

package/src/animation/functions/interpolatePaths.ts

@@ -0,0 +1,87 @@
+import type { SkPath } from "../../skia/types";
+import { exhaustiveCheck } from "../../renderer/typeddash";
+
+import type { ExtrapolationType } from "./interpolate";
+import { validateInterpolationOptions, Extrapolate } from "./interpolate";
+
+const lerp = (
+  value: number,
+  from: number,
+  to: number,
+  p1: SkPath,
+  p2: SkPath
+) => {
+  const t = (value - from) / (to - from);
+  return p2.interpolate(p1, t)!;
+};
+
+/**
+ * Maps an input value within a range to an output path within a path range.
+ * @param value - The input value.
+ * @param inputRange - The range of the input value.
+ * @param outputRange - The range of the output path.
+ * @param options - Extrapolation options
+ * @returns The output path.
+ * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
+ * const path1 = new Path();
+ * path1.moveTo(0, 0);
+ * path1.lineTo(100, 0);
+ * const path2 = new Path();
+ * path2.moveTo(0, 0);
+ * path2.lineTo(0, 100);
+ * const path = interpolatePath(0.5, [0, 1], [path1, path2]);
+ */
+export const interpolatePaths = (
+  value: number,
+  input: number[],
+  outputRange: SkPath[],
+  options?: ExtrapolationType
+) => {
+  const extrapolation = validateInterpolationOptions(options);
+  if (value < input[0]) {
+    switch (extrapolation.extrapolateLeft) {
+      case Extrapolate.CLAMP:
+        return outputRange[0];
+      case Extrapolate.EXTEND:
+        return lerp(value, input[0], input[1], outputRange[0], outputRange[1]);
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateLeft);
+    }
+  } else if (value > input[input.length - 1]) {
+    switch (extrapolation.extrapolateRight) {
+      case Extrapolate.CLAMP:
+        return outputRange[outputRange.length - 1];
+      case Extrapolate.EXTEND:
+        return lerp(
+          value,
+          input[input.length - 2],
+          input[input.length - 1],
+          outputRange[input.length - 2],
+          outputRange[input.length - 1]
+        );
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateRight);
+    }
+  }
+  let i = 0;
+  for (; i <= input.length - 1; i++) {
+    if (value >= input[i] && value <= input[i + 1]) {
+      break;
+    }
+  }
+  return lerp(
+    value,
+    input[i],
+    input[i + 1],
+    outputRange[i],
+    outputRange[i + 1]
+  );
+};

package/src/animation/functions/interpolateVector.ts

@@ -0,0 +1,26 @@
+import type { Vector } from "../../skia/types";
+
+import { interpolate } from "./interpolate";
+
+export const interpolateVector = (
+  value: number,
+  inputRange: readonly number[],
+  outputRange: readonly Vector[],
+  options?: Parameters<typeof interpolate>[3]
+) => ({
+  x: interpolate(
+    value,
+    inputRange,
+    outputRange.map((v) => v.x),
+    options
+  ),
+  y: interpolate(
+    value,
+    inputRange,
+    outputRange.map((v) => v.y),
+    options
+  ),
+});
+
+export const mixVector = (value: number, from: Vector, to: Vector) =>
+  interpolateVector(value, [0, 1], [from, to]);

package/src/animation/index.ts

@@ -0,0 +1,4 @@
+export * from "./timing";
+export * from "./spring";
+export * from "./decay";
+export * from "./functions";

package/src/animation/spring/Spring.ts

@@ -0,0 +1,61 @@
+import type { SpringConfig } from "./types";
+
+/*
+  Spring animation configurations
+*/
+const Config = {
+  Gentle: {
+    mass: 1,
+    stiffness: 170,
+    damping: 19,
+    velocity: 0,
+  },
+  Wobbly: {
+    mass: 1,
+    stiffness: 180,
+    damping: 12,
+    velocity: 0,
+  },
+  WobblySlow: {
+    mass: 4,
+    stiffness: 180,
+    damping: 25,
+    velocity: 0,
+  },
+  Stiff: {
+    mass: 1,
+    stiffness: 200,
+    damping: 20,
+    velocity: 0,
+  },
+  Default: {
+    mass: 1,
+    stiffness: 100,
+    damping: 10,
+    velocity: 0,
+  },
+};
+
+export const Spring = {
+  Config,
+  Gentle: (config: SpringConfig = {}) => ({
+    ...Config.Gentle,
+    ...config,
+  }),
+  Wobbly: (config: SpringConfig = {}) => ({
+    ...Config.Wobbly,
+    ...config,
+  }),
+  WobblySlow: (config: SpringConfig = {}) => ({
+    ...Config.WobblySlow,
+    ...config,
+  }),
+  Stiff: (config: SpringConfig = {}) => ({
+    ...Config.Stiff,
+    ...config,
+  }),
+  Default: (config: SpringConfig = {}) => ({
+    ...Config.Default,
+    ...config,
+  }),
+};

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

@@ -0,0 +1 @@
+export { createSpringEasing } from "./spring";