@shopify/react-native-skia 2.0.6 → 2.1.0

package/src/skia/types/Matrix4.ts

@@ -1,7 +1,7 @@
 type Point = { x: number; y: number };
 type Vec2 = readonly [number, number];
-type Vec3 = readonly [number, number, number];
-type Vec4 = readonly [number, number, number, number];
+export type Vec3 = readonly [number, number, number];
+export type Vec4 = readonly [number, number, number, number];
 
 export type Matrix3 = readonly [
   number,
@@ -471,3 +471,109 @@ export const invert4 = (m: Matrix4): Matrix4 => {
     b33 * invDet,
   ] as Matrix4;
 };
+
+const vecSub = (a: Vec3, b: Vec3): Vec3 => {
+  "worklet";
+  return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+};
+
+const vecCross = (a: Vec3, b: Vec3): Vec3 => {
+  "worklet";
+  return [
+    a[1] * b[2] - a[2] * b[1],
+    a[2] * b[0] - a[0] * b[2],
+    a[0] * b[1] - a[1] * b[0],
+  ];
+};
+
+const lookat = (eyeVec: Vec3, centerVec: Vec3, upVec: Vec3): Matrix4 => {
+  "worklet";
+  const f = normalizeVec(vecSub(centerVec, eyeVec));
+  const u = normalizeVec(upVec);
+  const s = normalizeVec(vecCross(f, u));
+  const uf = vecCross(s, f);
+
+  // Build the look-at matrix directly
+  const m: Matrix4 = [
+    s[0],
+    uf[0],
+    -f[0],
+    eyeVec[0],
+    s[1],
+    uf[1],
+    -f[1],
+    eyeVec[1],
+    s[2],
+    uf[2],
+    -f[2],
+    eyeVec[2],
+    0,
+    0,
+    0,
+    1,
+  ];
+
+  return invert4(m);
+};
+
+const perspectiveMatrix = (
+  near: number,
+  far: number,
+  angle: number
+): Matrix4 => {
+  "worklet";
+  const dInv = 1 / (far - near);
+  const halfAngle = angle / 2;
+  const cot = Math.cos(halfAngle) / Math.sin(halfAngle);
+  return [
+    cot,
+    0,
+    0,
+    0,
+    0,
+    cot,
+    0,
+    0,
+    0,
+    0,
+    (far + near) * dInv,
+    2 * far * near * dInv,
+    0,
+    0,
+    -1,
+    1,
+  ];
+};
+
+export interface CameraConfig {
+  eye: Vec3;
+  coa: Vec3;
+  up: Vec3;
+  near: number;
+  far: number;
+  angle: number;
+}
+
+export const setupCamera = (
+  area: Vec4,
+  zscale: number,
+  cam: CameraConfig
+): Matrix4 => {
+  "worklet";
+  const camera = lookat(cam.eye, cam.coa, cam.up);
+  const p = perspectiveMatrix(cam.near, cam.far, cam.angle);
+  const center: Vec3 = [(area[0] + area[2]) / 2, (area[1] + area[3]) / 2, 0];
+  const viewScale: Vec3 = [
+    (area[2] - area[0]) / 2,
+    (area[3] - area[1]) / 2,
+    zscale,
+  ];
+  const viewport = multiply4(
+    translate(center[0], center[1], center[2]),
+    scale(viewScale[0], viewScale[1], viewScale[2])
+  );
+  return multiply4(
+    multiply4(viewport, p),
+    multiply4(camera, invert4(viewport))
+  );
+};

package/src/skia/types/Recorder.ts

@@ -26,6 +26,7 @@ import type {
   TextBlobProps,
   TextPathProps,
   VerticesProps,
+  SkottieProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer/processors/Animations/Animations";
 
@@ -82,6 +83,7 @@ export interface BaseRecorder {
   drawPicture(props: AnimatedProps<PictureProps>): void;
   drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;
   drawParagraph(props: AnimatedProps<ParagraphProps>): void;
+  drawSkottie(props: AnimatedProps<SkottieProps>): void;
   drawAtlas(props: AnimatedProps<AtlasProps>): void;
 }
 

package/src/skia/types/Skia.ts

@@ -33,6 +33,7 @@ import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
 import type { Video } from "./Video";
 import type { NativeBufferFactory } from "./NativeBuffer";
 import type { JsiRecorder } from "./Recorder";
+import type { SkottieFactory } from "./Skottie";
 
 export interface SkiaContext {
   getSurface(): SkSurface;
@@ -102,6 +103,7 @@ export interface Skia {
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
   ParagraphBuilder: ParagraphBuilderFactory;
+  Skottie: SkottieFactory;
   Video: (url: string) => Promise<Video> | Video;
   Context(surface: bigint, width: number, height: number): SkiaContext;
   NativeBuffer: NativeBufferFactory;

package/src/skia/types/Skottie.ts

@@ -0,0 +1,266 @@
+import type { SkCanvas } from "./Canvas";
+import type { SkColor } from "./Color";
+import type { SkData } from "./Data";
+import type { SkJSIInstance } from "./JsiInstance";
+import type { StrokeJoin } from "./Paint";
+import type { TextAlign, TextDirection } from "./Paragraph";
+import type { SkPoint } from "./Point";
+import type { SkRect } from "./Rect";
+import type { SkSize } from "./Size";
+import type { SkTypeface } from "./Typeface";
+
+export enum LineBreakType {
+  SoftLineBreak,
+  HardtLineBreak,
+}
+
+export enum VerticalTextAlign {
+  Top,
+  TopBaseline,
+  // Skottie vertical alignment extensions
+  // Visual alignement modes -- these are using tight visual bounds for the paragraph.
+  VisualTop, // visual top    -> text box top
+  VisualCenter, // visual center -> text box center
+  VisualBottom, // visual bottom -> text box bottom
+}
+
+export enum ResizePolicy {
+  // Use the specified text size.
+  None,
+  // Resize the text such that the extent box fits (snuggly) in the text box,
+  // both horizontally and vertically.
+  ScaleToFit,
+  // Same kScaleToFit if the text doesn't fit at the specified font size.
+  // Otherwise, same as kNone.
+  DownscaleToFit,
+}
+
+export enum InputState {
+  Down,
+  Up,
+  Move,
+  Right,
+  Left,
+}
+
+export enum ModifierKey {
+  None,
+  Shift,
+  Control,
+  Option,
+  Command,
+  FirstPress,
+}
+
+export interface AnimationMarker {
+  name: string;
+  t0: number; // 0.0 to 1.0
+  t1: number; // 0.0 to 1.0
+}
+
+export interface ColorProperty {
+  /**
+   * Property identifier, usually the node name.
+   */
+  key: string;
+  /**
+   * Property value (RGBA, 255-based).
+   */
+  value: SkColor;
+}
+
+/**
+ * Named opacity property.
+ */
+export interface OpacityProperty {
+  /**
+   * Property identifier, usually the node name.
+   */
+  key: string;
+  /**
+   * Property value (0..100).
+   */
+  value: number;
+}
+
+/**
+ * Text property value.
+ */
+export interface TextValue {
+  /**
+   * The text string payload.
+   */
+  text: string;
+  /**
+   * Font size.
+   */
+  size: number;
+}
+
+/**
+ * Named text property.
+ */
+export interface TextProperty {
+  /**
+   * Property identifier, usually the node name.
+   */
+  key: string;
+  /**
+   * Property value.
+   */
+  value: TextValue;
+}
+
+/**
+ * Transform property value. Maps to AE styled transform.
+ */
+export interface TransformValue {
+  /**
+   * Anchor point for transform. x and y value.
+   */
+  anchor: SkPoint;
+  /**
+   * Position of transform. x and y value.
+   */
+  position: SkPoint;
+  /**
+   * Scale of transform. x and y value.
+   */
+  scale: SkPoint;
+  /**
+   * Rotation of transform in degrees.
+   */
+  rotation: number;
+  /**
+   * Skew to apply during transform.
+   */
+  skew: number;
+  /**
+   * Direction of skew in degrees.
+   */
+  skewAxis: number;
+}
+
+/**
+ * Named transform property for Skottie property observer.
+ */
+export interface TransformProperty {
+  /**
+   * Property identifier, usually the node name.
+   */
+  key: string;
+  /**
+   * Property value.
+   */
+  value: TransformValue;
+}
+
+/**
+ * Collection of slot IDs sorted by value type
+ */
+export interface SlotInfo {
+  colorSlotIDs: string[];
+  scalarSlotIDs: string[];
+  vec2SlotIDs: string[];
+  imageSlotIDs: string[];
+  textSlotIDs: string[];
+}
+
+/**
+ * Text property for ManagedAnimation's slot support
+ */
+export interface SlottableTextProperty {
+  typeface?: SkTypeface;
+  text?: string;
+  textSize?: number;
+
+  minTextSize?: number;
+  maxTextSize?: number;
+  strokeWidth?: number;
+  lineHeight?: number;
+  lineShift?: number;
+  ascent?: number;
+  maxLines?: number;
+
+  horizAlign?: TextAlign;
+  vertAlign?: VerticalTextAlign;
+  strokeJoin?: StrokeJoin;
+  direction?: TextDirection;
+  linebreak?: LineBreakType;
+  resize?: ResizePolicy;
+
+  boundingBox?: SkRect;
+  fillColor?: SkColor;
+  strokeColor?: SkColor;
+}
+
+export interface SkSkottieAnimation extends SkJSIInstance<"SkottieAnimation"> {
+  /**
+   * Returns the animation duration in seconds.
+   */
+  duration(): number;
+  /**
+   * Returns the animation frame rate (frames / second).
+   */
+  fps(): number;
+
+  /**
+   * Draws current animation frame. Must call seek or seekFrame first.
+   * @param canvas
+   * @param dstRect
+   */
+  render(canvas: SkCanvas, dstRect?: SkRect): void;
+
+  /**
+   * Update the animation state to match |t|, specified as a frame index
+   * i.e. relative to duration() * fps().
+   *
+   * Returns the rectangle that was affected by this animation.
+   *
+   * @param frame - Fractional values are allowed and meaningful - e.g.
+   *                0.0 -> first frame
+   *                1.0 -> second frame
+   *                0.5 -> halfway between first and second frame
+   * @param damageRect - will copy damage frame into this if provided.
+   */
+  seekFrame(frame: number, damageRect?: SkRect): void;
+
+  size(): SkSize;
+
+  version(): string;
+
+  getSlotInfo(): SlotInfo;
+
+  setColorSlot(key: string, color: SkColor): boolean;
+  setScalarSlot(key: string, scalar: number): boolean;
+  setVec2Slot(key: string, vec2: SkPoint): boolean;
+  setTextSlot(key: string, text: SlottableTextProperty): boolean;
+  setImageSlot(key: string, assetName: string): boolean;
+
+  getColorSlot(key: string): SkColor | null;
+  getScalarSlot(key: string): number | null;
+  getVec2Slot(key: string): SkPoint | null;
+  getTextSlot(key: string): SlottableTextProperty | null;
+
+  getColorProps(): ColorProperty[];
+  getTextProps(): TextProperty[];
+  getOpacityProps(): OpacityProperty[];
+  getTransformProps(): TransformProperty[];
+
+  setColor(key: string, color: SkColor): boolean;
+  setText(key: string, text: string, size: number): boolean;
+  setOpacity(key: string, opacity: number): boolean;
+  setTransform(
+    key: string,
+    anchor: SkPoint,
+    position: SkPoint,
+    scale: SkPoint,
+    rotation: number,
+    skew: number,
+    skewAxis: number
+  ): boolean;
+}
+
+export interface SkottieFactory {
+  Make(json: string, assets?: Record<string, SkData>): SkSkottieAnimation;
+}

package/src/skia/types/index.ts

@@ -32,3 +32,4 @@ export * from "./Matrix4";
 export * from "./NativeBuffer";
 export * from "./Recorder";
 export * from "./Video";
+export * from "./Skottie";