@pompadour/react-native-skia 1.4.0

package/src/Platform/Platform.web.tsx

@@ -0,0 +1,150 @@
+import type { RefObject, CSSProperties } from "react";
+import React, { useLayoutEffect, useMemo, useRef } from "react";
+import type { LayoutChangeEvent, ViewComponent, ViewProps } from "react-native";
+
+import type { DataModule } from "../skia/types";
+import { isRNModule } from "../skia/types";
+
+import type { IPlatform } from "./IPlatform";
+
+// eslint-disable-next-line max-len
+// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js
+const DOM_LAYOUT_HANDLER_NAME = "__reactLayoutHandler";
+type OnLayout = ((event: LayoutChangeEvent) => void) | undefined;
+type Div = HTMLDivElement & {
+  __reactLayoutHandler: OnLayout;
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+const getObserver = () => {
+  if (resizeObserver == null) {
+    resizeObserver = new window.ResizeObserver(function (entries) {
+      entries.forEach((entry) => {
+        const node = entry.target as Div;
+        const { left, top, width, height } = entry.contentRect;
+        const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
+        if (typeof onLayout === "function") {
+          // setTimeout 0 is taken from react-native-web (UIManager)
+          setTimeout(
+            () =>
+              onLayout({
+                timeStamp: Date.now(),
+                nativeEvent: { layout: { x: left, y: top, width, height } },
+                currentTarget: 0,
+                target: 0,
+                bubbles: false,
+                cancelable: false,
+                defaultPrevented: false,
+                eventPhase: 0,
+                isDefaultPrevented() {
+                  throw new Error("Method not supported on web.");
+                },
+                isPropagationStopped() {
+                  throw new Error("Method not supported on web.");
+                },
+                persist() {
+                  throw new Error("Method not supported on web.");
+                },
+                preventDefault() {
+                  throw new Error("Method not supported on web.");
+                },
+                stopPropagation() {
+                  throw new Error("Method not supported on web.");
+                },
+                isTrusted: true,
+                type: "",
+              }),
+            0
+          );
+        }
+      });
+    });
+  }
+  return resizeObserver;
+};
+
+const useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {
+  const observer = getObserver();
+
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node !== null) {
+      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
+    }
+  }, [ref, onLayout]);
+
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node != null && observer != null) {
+      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === "function") {
+        observer.observe(node);
+      } else {
+        observer.unobserve(node);
+      }
+    }
+    return () => {
+      if (node != null && observer != null) {
+        observer.unobserve(node);
+      }
+    };
+  }, [observer, ref]);
+};
+
+const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
+  const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);
+  const ref = useRef<Div>(null);
+  useElementLayout(ref, onLayout);
+  const cssStyles = useMemo(() => {
+    return {
+      alignItems: "stretch" as const,
+      backgroundColor: "transparent" as const,
+      border: "0 solid black" as const,
+      boxSizing: "border-box" as const,
+      display: "flex" as const,
+      flexBasis: "auto" as const,
+      flexDirection: "column" as const,
+      flexShrink: 0,
+      listStyle: "none" as const,
+      margin: 0,
+      minHeight: 0,
+      minWidth: 0,
+      padding: 0,
+      position: "relative" as const,
+      textDecoration: "none" as const,
+      zIndex: 0,
+      ...style,
+    };
+  }, [style]);
+
+  return (
+    <div ref={ref} style={cssStyles}>
+      {children}
+    </div>
+  );
+}) as unknown as typeof ViewComponent;
+
+export const Platform: IPlatform = {
+  OS: "web",
+  PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1, // window is not defined on node
+  resolveAsset: (source: DataModule) => {
+    if (isRNModule(source)) {
+      if (typeof source === "number" && typeof require === "function") {
+        const {
+          getAssetByID,
+        } = require("react-native/Libraries/Image/AssetRegistry");
+        const { httpServerLocation, name, type } = getAssetByID(source);
+        const uri = `${httpServerLocation}/${name}.${type}`;
+        return uri;
+      }
+      throw new Error(
+        "Asset source is a number - this is not supported on the web"
+      );
+    }
+    return source.default;
+  },
+  findNodeHandle: () => {
+    throw new Error("findNodeHandle is not supported on the web");
+  },
+  View,
+};

package/src/Platform/index.ts

@@ -0,0 +1 @@
+export * from "./Platform";

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,189 @@
+/* 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 {
+  "worklet";
+  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 {
+  "worklet";
+  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 {
+  "worklet";
+  // 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
+) {
+  "worklet";
+  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 {
+  "worklet";
+  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,61 @@
+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[]
+) => {
+  "worklet";
+  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"
+  );
+  // TODO: once Float32Array are supported in the reanimated integration we can switch there
+  return [r, g, b, a];
+};
+
+export const interpolateColors = (
+  value: number,
+  inputRange: number[],
+  _outputRange: Color[]
+) => {
+  "worklet";
+  const outputRange = _outputRange.map((cl) => Skia.Color(cl));
+  return interpolateColorsRGB(value, inputRange, outputRange);
+};
+
+export const mixColors = (value: number, x: Color, y: Color) => {
+  "worklet";
+  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,92 @@
+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,
+  output?: SkPath
+) => {
+  "worklet";
+  const t = (value - from) / (to - from);
+  return p2.interpolate(p1, t, output)!;
+};
+
+/**
+ * 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,
+  output?: SkPath
+) => {
+  "worklet";
+  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],
+    output
+  );
+};

package/src/animation/functions/interpolateVector.ts

@@ -0,0 +1,31 @@
+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]
+) => {
+  "worklet";
+  return {
+    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) => {
+  "worklet";
+  return interpolateVector(value, [0, 1], [from, to]);
+};

package/src/animation/index.ts

@@ -0,0 +1 @@
+export * from "./functions";

package/src/dom/nodes/DrawingNode.ts

@@ -0,0 +1,74 @@
+import type {
+  DrawingContext,
+  DrawingNodeProps,
+  Node,
+  NodeType,
+  RenderNode,
+} from "../types";
+
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+import { PaintNode } from "./PaintNode";
+import { JsiRenderNode } from "./RenderNode";
+
+export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
+  extends JsiRenderNode<P>
+  implements RenderNode<P>
+{
+  protected derived?: C;
+
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, type, props);
+    this.derived = this.deriveProps();
+  }
+
+  setProps(props: P) {
+    super.setProps(props);
+    this.derived = this.deriveProps();
+  }
+
+  setProp<K extends keyof P>(name: K, value: P[K]) {
+    const hasChanged = super.setProp(name, value);
+    if (hasChanged) {
+      this.derived = this.deriveProps();
+    }
+    return hasChanged;
+  }
+
+  addChild(child: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add ${child.type} to ${this.type}`);
+    }
+    super.addChild(child);
+    this.derived = this.deriveProps();
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add ${child.type} to ${this.type}`);
+    }
+    super.insertChildBefore(child, before);
+    this.derived = this.deriveProps();
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    if (this.props.paint) {
+      this.draw({ ...ctx, paint: this.props.paint });
+    } else {
+      this.draw(ctx);
+    }
+    this.children().map((child) => {
+      if (child instanceof PaintNode) {
+        const declCtx = ctx.declarationCtx;
+        declCtx.save();
+        child.decorate(declCtx);
+        const paint = declCtx.paints.pop()!;
+        declCtx.restore();
+        this.draw({ ...ctx, paint });
+      }
+    });
+  }
+
+  protected abstract draw(ctx: DrawingContext): void;
+  protected abstract deriveProps(): C;
+}

package/src/dom/nodes/GroupNode.ts

@@ -0,0 +1,19 @@
+import type { DrawingContext, GroupProps } from "../types";
+import { NodeType } from "../types";
+
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+
+export class GroupNode extends JsiRenderNode<GroupProps> {
+  constructor(ctx: NodeContext, props: GroupProps) {
+    super(ctx, NodeType.Group, props);
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    this.children().map((child) => {
+      if (child instanceof JsiRenderNode) {
+        child.render(ctx);
+      }
+    });
+  }
+}