@shopify/react-native-skia 0.1.171 → 0.1.173

package/lib/commonjs/views/SkiaView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t","save","scale","restore"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onDraw) {\n      const info: DrawingInfo = {\n        height: this.height,\n        width: this.width,\n        timestamp: Date.now(),\n        touches: touches.map((t) => [t]),\n      };\n      canvas.save();\n      canvas.scale(pd, pd);\n      this.props.onDraw(canvas, info);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":";;;;;;;AAAA;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,QAAN,SAAuBC,gCAAvB,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMAV,MAAM,CAACW,IAAP;MACAX,MAAM,CAACY,KAAP,CAAapB,EAAb,EAAiBA,EAAjB;MACA,KAAKM,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;MACAH,MAAM,CAACa,OAAP;IACD;EACF;;AAlB8D"}
+{"version":3,"names":["SkiaView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onDraw) {\n      const info: DrawingInfo = {\n        height: this.height,\n        width: this.width,\n        timestamp: Date.now(),\n        touches: touches.map((t) => [t]),\n      };\n      this.props.onDraw(canvas, info);\n    }\n  }\n}\n"],"mappings":";;;;;;;AAGA;;AAEO,MAAMA,QAAN,SAAuBC,gCAAvB,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMA,KAAKZ,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;IACD;EACF;;AAf8D"}

package/lib/commonjs/views/api.d.ts

@@ -0,0 +1,5 @@
+import type { ISkiaViewApi } from "./types";
+declare global {
+    var SkiaViewApi: ISkiaViewApi;
+}
+export declare const SkiaViewApi: ISkiaViewApi;

package/lib/commonjs/views/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./SkiaView";
+export * from "./SkiaPictureView";
+export * from "./SkiaDomView";
+export * from "./types";
+export * from "./useDrawCallback";
+export * from "./useTouchHandler";

package/lib/commonjs/views/types.d.ts

@@ -0,0 +1,91 @@
+import type { ViewProps } from "react-native";
+import type { GroupProps, RenderNode } from "../dom/types";
+import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
+import type { SkiaMutableValue, SkiaValue } from "../values";
+export declare type DrawMode = "continuous" | "default";
+export declare type NativeSkiaViewProps = ViewProps & {
+    mode?: DrawMode;
+    debug?: boolean;
+};
+export declare enum TouchType {
+    Start = 0,
+    Active = 1,
+    End = 2,
+    Cancelled = 3
+}
+export interface TouchInfo {
+    x: number;
+    y: number;
+    force: number;
+    type: TouchType;
+    id: number;
+    timestamp: number;
+}
+export interface DrawingInfo {
+    width: number;
+    height: number;
+    timestamp: number;
+    touches: Array<Array<TouchInfo>>;
+}
+export declare type ExtendedTouchInfo = TouchInfo & {
+    velocityX: number;
+    velocityY: number;
+};
+export declare type TouchHandlers = {
+    onStart?: (touchInfo: TouchInfo) => void;
+    onActive?: (touchInfo: ExtendedTouchInfo) => void;
+    onEnd?: (touchInfo: ExtendedTouchInfo) => void;
+};
+export declare type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
+export declare type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
+/**
+ * Listener interface for value changes
+ */
+export interface ValueListener {
+    addListener: (callback: () => void) => number;
+    removeListener: (id: number) => void;
+}
+export interface ISkiaViewApi {
+    setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
+    callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
+    registerValuesInView: (nativeId: number, values: SkiaValue<unknown>[]) => () => void;
+    requestRedraw: (nativeId: number) => void;
+    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
+}
+export interface SkiaBaseViewProps extends ViewProps {
+    /**
+     * Sets the drawing mode for the skia view. There are two drawing
+     * modes, "continuous" and "default", where the continuous mode will
+     * continuously redraw the view, and the default mode will only
+     * redraw when any of the regular react properties are changed like
+     * sizes and margins.
+     */
+    mode?: DrawMode;
+    /**
+     * When set to true the view will display information about the
+     * average time it takes to render.
+     */
+    debug?: boolean;
+    /**
+     * Pass an animated value to the onSize property to get updates when
+     * the Skia view is resized.
+     */
+    onSize?: SkiaMutableValue<SkSize>;
+}
+export interface SkiaDrawViewProps extends SkiaBaseViewProps {
+    /**
+     * Draw callback. Will be called whenever the view is invalidated and
+     * needs to redraw. This is either caused by a change in a react
+     * property, a touch event, or a call to redraw. If the view is in
+     * continuous mode the callback will be called 60 frames per second
+     * by the native view.
+     */
+    onDraw?: RNSkiaDrawCallback;
+}
+export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+    picture?: SkPicture;
+}
+export interface SkiaDomViewProps extends SkiaBaseViewProps {
+    root?: RenderNode<GroupProps>;
+    onTouch?: TouchHandler;
+}

package/lib/commonjs/views/useDrawCallback.d.ts

@@ -0,0 +1,8 @@
+import type { DependencyList } from "react";
+import type { RNSkiaDrawCallback } from "./types";
+/**
+ * Creates a memoized callback for the onDraw handler of a Skia component.
+ * @param callback The callback to memoize.
+ * @param deps Dependencies for the callback.
+ * */
+export declare const useDrawCallback: (callback: RNSkiaDrawCallback, deps?: DependencyList) => RNSkiaDrawCallback;

package/lib/commonjs/views/useTouchHandler.d.ts

@@ -0,0 +1,22 @@
+import type { DependencyList } from "react";
+import type { TouchHandlers, TouchHandler } from "./types";
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler only handles single touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+export declare const useTouchHandler: (handlers: TouchHandlers, deps?: DependencyList) => TouchHandler;
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler handles multiple touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+export declare const useMultiTouchHandler: (handlers: TouchHandlers, deps?: DependencyList) => TouchHandler;

package/lib/commonjs/web/LoadSkiaWeb.d.ts

@@ -0,0 +1,6 @@
+import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit-wasm";
+declare global {
+    var CanvasKit: CanvasKitType;
+}
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions) => Promise<void>;

package/lib/commonjs/web/WithSkiaWeb.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ComponentType } from "react";
+import { Suspense } from "react";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+interface WithSkiaProps {
+    fallback?: ComponentProps<typeof Suspense>["fallback"];
+    getComponent: () => Promise<{
+        default: ComponentType;
+    }>;
+    opts?: Parameters<typeof LoadSkiaWeb>[0];
+}
+export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => JSX.Element;
+export {};

package/lib/commonjs/web/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";

package/lib/module/animation/decay/decay.d.ts

@@ -0,0 +1,2 @@
+import type { DecayState, DefaultDecayConfig } from "./types";
+export declare const decay: (now: number, state: DecayState, config: DefaultDecayConfig) => DecayState;

package/lib/module/animation/decay/index.d.ts

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

package/lib/module/animation/decay/runDecay.d.ts

@@ -0,0 +1,10 @@
+import type { SkiaMutableValue } from "../../values/types";
+import type { DecayConfig } 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 declare const runDecay: (value: SkiaMutableValue<number>, config?: DecayConfig) => import("../../values/types").SkiaAnimation;

package/lib/module/animation/decay/types.d.ts

@@ -0,0 +1,21 @@
+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/lib/module/animation/functions/index.d.ts

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

package/lib/module/animation/functions/interpolate.d.ts

@@ -0,0 +1,17 @@
+export declare enum Extrapolate {
+    IDENTITY = "identity",
+    CLAMP = "clamp",
+    EXTEND = "extend"
+}
+export interface ExtrapolationConfig {
+    extrapolateLeft?: Extrapolate | string;
+    extrapolateRight?: Extrapolate | string;
+}
+interface RequiredExtrapolationConfig {
+    extrapolateLeft: Extrapolate;
+    extrapolateRight: Extrapolate;
+}
+export declare type ExtrapolationType = ExtrapolationConfig | Extrapolate | string | undefined;
+export declare function validateInterpolationOptions(type: ExtrapolationType): RequiredExtrapolationConfig;
+export declare function interpolate(x: number, input: readonly number[], output: readonly number[], type?: ExtrapolationType): number;
+export {};

package/lib/module/animation/functions/interpolateColors.d.ts

@@ -0,0 +1,3 @@
+import type { Color } from "../../skia";
+export declare const interpolateColors: (value: number, inputRange: number[], _outputRange: Color[]) => Float32Array;
+export declare const mixColors: (value: number, x: Color, y: Color) => Float32Array;

package/lib/module/animation/functions/interpolatePaths.d.ts

@@ -0,0 +1,19 @@
+import type { SkPath } from "../../skia/types";
+import type { ExtrapolationType } from "./interpolate";
+/**
+ * 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 declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SkPath;

package/lib/module/animation/functions/interpolateVector.d.ts

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

package/lib/module/animation/index.d.ts

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

package/lib/module/animation/spring/Spring.d.ts

@@ -0,0 +1,65 @@
+import type { SpringConfig } from "./types";
+export declare const Spring: {
+    Config: {
+        Gentle: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        Wobbly: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        WobblySlow: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        Stiff: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        Default: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+    };
+    Gentle: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    Wobbly: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    WobblySlow: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    Stiff: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    Default: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+};

package/lib/module/animation/spring/functions/index.d.ts

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

package/lib/module/animation/spring/functions/spring.d.ts

@@ -0,0 +1,10 @@
+import type { SpringConfig } from "../types";
+import type { TimingConfig } from "../../types";
+/**
+ * @description Returns a cached jsContext function for a spring with duration
+ * @param mass The mass of the spring
+ * @param stiffness The stiffness of the spring
+ * @param damping Spring damping
+ * @param velocity The initial velocity
+ */
+export declare const createSpringEasing: (params: Partial<SpringConfig>) => TimingConfig;

package/lib/module/animation/spring/index.d.ts

@@ -0,0 +1,3 @@
+export { Spring } from "./Spring";
+export { runSpring } from "./runSpring";
+export { useSpring } from "./useSpring";

package/lib/module/animation/spring/runSpring.d.ts

@@ -0,0 +1,16 @@
+import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
+import type { AnimationParams, SpringConfig, AnimationCallback } from "../types";
+/**
+ * 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 configuration
+ * @returns an animation value that can be used to start/stop
+ * the animation.
+ */
+export declare const runSpring: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: SpringConfig, callback?: AnimationCallback) => SkiaAnimation;

package/lib/module/animation/spring/types.d.ts

@@ -0,0 +1,6 @@
+export interface SpringConfig {
+    mass?: number;
+    stiffness?: number;
+    velocity?: number;
+    damping?: number;
+}

package/lib/module/animation/spring/useSpring.d.ts

@@ -0,0 +1,10 @@
+import type { SkiaValue } from "../../values/types";
+import type { SpringConfig, AnimationParams, AnimationCallback } from "../types";
+/**
+ * Creats a spring based animation value that will run whenever
+ * the animation parameters change.
+ * @param toOrParams
+ * @param config
+ * @returns
+ */
+export declare const useSpring: (toOrParams: number | AnimationParams, config?: SpringConfig, callback?: AnimationCallback) => SkiaValue<number>;

package/lib/module/animation/timing/Easing.d.ts

@@ -0,0 +1,19 @@
+export declare class Easing {
+    static step0(n: number): number;
+    static step1(n: number): number;
+    static linear(t: number): number;
+    static ease(t: number): number;
+    static quad(t: number): number;
+    static cubic(t: number): number;
+    static poly(n: number): (t: number) => number;
+    static sin(t: number): number;
+    static circle(t: number): number;
+    static exp(t: number): number;
+    static elastic(bounciness?: number): (t: number) => number;
+    static back(s?: number): (t: number) => number;
+    static bounce(t: number): number;
+    static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
+    static in(easing: (t: number) => number): (t: number) => number;
+    static out(easing: (t: number) => number): (t: number) => number;
+    static inOut(easing: (t: number) => number): (t: number) => number;
+}

package/lib/module/animation/timing/createTiming.d.ts

@@ -0,0 +1,17 @@
+import type { TimingConfig, RequiredAnimationParams, AnimationCallback } from "../types";
+import type { SkiaMutableValue } from "../../values/types";
+/**
+ * Creates an animation that is driven by a clock 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. If loop is set to true, the animation will continue
+ * to run until stopped.
+ *
+ * @param params Animation parameters
+ * @param config Spring or timing configuration
+ * @param value Optional value that the animation will update
+ * @params an animation value that can be used to start/stop
+ * the animation.
+ */
+export declare const createTiming: (params: RequiredAnimationParams & Required<TimingConfig>, value?: SkiaMutableValue<number>, callback?: AnimationCallback) => import("../../values/types").SkiaAnimation;

package/lib/module/animation/timing/functions/bezier.d.ts

@@ -0,0 +1 @@
+export declare function bezier(mX1: number, mY1: number, mX2: number, mY2: number): (x: number) => number;

package/lib/module/animation/timing/functions/getResolvedParams.d.ts

@@ -0,0 +1,7 @@
+import type { RequiredAnimationParams, AnimationParams, TimingConfig } from "../../types";
+/**
+ * Resolves parameters from optional values to a single object
+ * @param toOrParams Params or to value
+ * @param config timing/spring configuration
+ */
+export declare const getResolvedParams: (toOrParams: number | AnimationParams, config?: TimingConfig) => RequiredAnimationParams & Required<TimingConfig>;

package/lib/module/animation/timing/functions/index.d.ts

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

package/lib/module/animation/timing/functions/timing.d.ts

@@ -0,0 +1,17 @@
+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 declare const timing: (t: number, duration: number, easing: (t: number) => number, loop: boolean, yoyo: boolean, state: AnimationState) => {
+    current: number;
+    finished: boolean;
+};

package/lib/module/animation/timing/functions/types.d.ts

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

package/lib/module/animation/timing/index.d.ts

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

package/lib/module/animation/timing/runTiming.d.ts

@@ -0,0 +1,16 @@
+import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
+import type { AnimationParams, TimingConfig, AnimationCallback } from "../types";
+/**
+ * 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 declare const runTiming: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaAnimation;

package/lib/module/animation/timing/useLoop.d.ts

@@ -0,0 +1,8 @@
+import type { TimingConfig } from "../types";
+/**
+ * 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 declare const useLoop: (config?: TimingConfig) => import("../..").SkiaValue<number>;

package/lib/module/animation/timing/useTiming.d.ts

@@ -0,0 +1,10 @@
+import type { SkiaValue } from "../../values/types";
+import type { AnimationParams, TimingConfig, AnimationCallback } from "../types";
+/**
+ * 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 declare const useTiming: (toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaValue<number>;

package/lib/module/animation/types.d.ts

@@ -0,0 +1,18 @@
+export interface SpringConfig {
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+    velocity?: number;
+}
+export interface TimingConfig {
+    duration?: number;
+    easing?: (t: number) => number;
+}
+export interface AnimationParams {
+    from?: number;
+    to?: number;
+    loop?: boolean;
+    yoyo?: boolean;
+}
+export declare type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> & Pick<AnimationParams, "from">;
+export declare type AnimationCallback = (current: number) => void;

package/lib/module/dom/nodes/DrawingNode.d.ts

@@ -0,0 +1,14 @@
+import type { DrawingContext, DrawingNodeProps, Node, NodeType, RenderNode } from "../types";
+import type { NodeContext } from "./Node";
+import { JsiRenderNode } from "./RenderNode";
+export declare abstract class JsiDrawingNode<P extends DrawingNodeProps, C> extends JsiRenderNode<P> implements RenderNode<P> {
+    protected derived?: C;
+    constructor(ctx: NodeContext, type: NodeType, props: P);
+    setProps(props: P): void;
+    setProp<K extends keyof P>(name: K, value: P[K]): boolean;
+    addChild(child: Node<unknown>): void;
+    insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
+    renderNode(ctx: DrawingContext): void;
+    protected abstract draw(ctx: DrawingContext): void;
+    protected abstract deriveProps(): C;
+}

package/lib/module/dom/nodes/DrawingNode.js

@@ -56,7 +56,11 @@ export class JsiDrawingNode extends JsiRenderNode {
 
     this.children().map(child => {
       if (child instanceof PaintNode) {
-        const paint = child.materialize();
+        const declCtx = ctx.declarationCtx;
+        declCtx.save();
+        child.decorate(declCtx);
+        const paint = declCtx.paints.pop();
+        declCtx.restore();
         this.draw({ ...ctx,
           paint
         });

package/lib/module/dom/nodes/DrawingNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiDeclarationNode","PaintNode","JsiRenderNode","JsiDrawingNode","constructor","ctx","type","props","derived","deriveProps","setProps","setProp","name","value","hasChanged","addChild","child","Error","insertChildBefore","before","renderNode","paint","draw","children","map","materialize"],"sources":["DrawingNode.ts"],"sourcesContent":["import type {\n  DrawingContext,\n  DrawingNodeProps,\n  Node,\n  NodeType,\n  RenderNode,\n} from \"../types\";\n\nimport type { NodeContext } from \"./Node\";\nimport { JsiDeclarationNode } from \"./Node\";\nimport { PaintNode } from \"./PaintNode\";\nimport { JsiRenderNode } from \"./RenderNode\";\n\nexport abstract class JsiDrawingNode<P extends DrawingNodeProps, C>\n  extends JsiRenderNode<P>\n  implements RenderNode<P>\n{\n  protected derived?: C;\n\n  constructor(ctx: NodeContext, type: NodeType, props: P) {\n    super(ctx, type, props);\n    this.derived = this.deriveProps();\n  }\n\n  setProps(props: P) {\n    super.setProps(props);\n    this.derived = this.deriveProps();\n  }\n\n  setProp<K extends keyof P>(name: K, value: P[K]) {\n    const hasChanged = super.setProp(name, value);\n    if (hasChanged) {\n      this.derived = this.deriveProps();\n    }\n    return hasChanged;\n  }\n\n  addChild(child: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.addChild(child);\n    this.derived = this.deriveProps();\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.insertChildBefore(child, before);\n    this.derived = this.deriveProps();\n  }\n\n  renderNode(ctx: DrawingContext): void {\n    if (this.props.paint) {\n      this.draw({ ...ctx, paint: this.props.paint });\n    } else {\n      this.draw(ctx);\n    }\n    this.children().map((child) => {\n      if (child instanceof PaintNode) {\n        const paint = child.materialize();\n        this.draw({ ...ctx, paint });\n      }\n    });\n  }\n\n  protected abstract draw(ctx: DrawingContext): void;\n  protected abstract deriveProps(): C;\n}\n"],"mappings":";;AASA,SAASA,kBAAT,QAAmC,QAAnC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA,OAAO,MAAeC,cAAf,SACGD,aADH,CAGP;EAGEE,WAAW,CAACC,GAAD,EAAmBC,IAAnB,EAAmCC,KAAnC,EAA6C;IACtD,MAAMF,GAAN,EAAWC,IAAX,EAAiBC,KAAjB;;IADsD;;IAEtD,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDC,QAAQ,CAACH,KAAD,EAAW;IACjB,MAAMG,QAAN,CAAeH,KAAf;IACA,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDE,OAAO,CAAoBC,IAApB,EAA6BC,KAA7B,EAA0C;IAC/C,MAAMC,UAAU,GAAG,MAAMH,OAAN,CAAcC,IAAd,EAAoBC,KAApB,CAAnB;;IACA,IAAIC,UAAJ,EAAgB;MACd,KAAKN,OAAL,GAAe,KAAKC,WAAL,EAAf;IACD;;IACD,OAAOK,UAAP;EACD;;EAEDC,QAAQ,CAACC,KAAD,EAA6B;IACnC,IAAI,EAAEA,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMS,QAAN,CAAeC,KAAf;IACA,KAAKR,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDS,iBAAiB,CAACF,KAAD,EAAuBG,MAAvB,EAAoD;IACnE,IAAI,EAAEH,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMY,iBAAN,CAAwBF,KAAxB,EAA+BG,MAA/B;IACA,KAAKX,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDW,UAAU,CAACf,GAAD,EAA4B;IACpC,IAAI,KAAKE,KAAL,CAAWc,KAAf,EAAsB;MACpB,KAAKC,IAAL,CAAU,EAAE,GAAGjB,GAAL;QAAUgB,KAAK,EAAE,KAAKd,KAAL,CAAWc;MAA5B,CAAV;IACD,CAFD,MAEO;MACL,KAAKC,IAAL,CAAUjB,GAAV;IACD;;IACD,KAAKkB,QAAL,GAAgBC,GAAhB,CAAqBR,KAAD,IAAW;MAC7B,IAAIA,KAAK,YAAYf,SAArB,EAAgC;QAC9B,MAAMoB,KAAK,GAAGL,KAAK,CAACS,WAAN,EAAd;QACA,KAAKH,IAAL,CAAU,EAAE,GAAGjB,GAAL;UAAUgB;QAAV,CAAV;MACD;IACF,CALD;EAMD;;AAjDH"}
+{"version":3,"names":["JsiDeclarationNode","PaintNode","JsiRenderNode","JsiDrawingNode","constructor","ctx","type","props","derived","deriveProps","setProps","setProp","name","value","hasChanged","addChild","child","Error","insertChildBefore","before","renderNode","paint","draw","children","map","declCtx","declarationCtx","save","decorate","paints","pop","restore"],"sources":["DrawingNode.ts"],"sourcesContent":["import type {\n  DrawingContext,\n  DrawingNodeProps,\n  Node,\n  NodeType,\n  RenderNode,\n} from \"../types\";\n\nimport type { NodeContext } from \"./Node\";\nimport { JsiDeclarationNode } from \"./Node\";\nimport { PaintNode } from \"./PaintNode\";\nimport { JsiRenderNode } from \"./RenderNode\";\n\nexport abstract class JsiDrawingNode<P extends DrawingNodeProps, C>\n  extends JsiRenderNode<P>\n  implements RenderNode<P>\n{\n  protected derived?: C;\n\n  constructor(ctx: NodeContext, type: NodeType, props: P) {\n    super(ctx, type, props);\n    this.derived = this.deriveProps();\n  }\n\n  setProps(props: P) {\n    super.setProps(props);\n    this.derived = this.deriveProps();\n  }\n\n  setProp<K extends keyof P>(name: K, value: P[K]) {\n    const hasChanged = super.setProp(name, value);\n    if (hasChanged) {\n      this.derived = this.deriveProps();\n    }\n    return hasChanged;\n  }\n\n  addChild(child: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.addChild(child);\n    this.derived = this.deriveProps();\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.insertChildBefore(child, before);\n    this.derived = this.deriveProps();\n  }\n\n  renderNode(ctx: DrawingContext): void {\n    if (this.props.paint) {\n      this.draw({ ...ctx, paint: this.props.paint });\n    } else {\n      this.draw(ctx);\n    }\n    this.children().map((child) => {\n      if (child instanceof PaintNode) {\n        const declCtx = ctx.declarationCtx;\n        declCtx.save();\n        child.decorate(declCtx);\n        const paint = declCtx.paints.pop()!;\n        declCtx.restore();\n        this.draw({ ...ctx, paint });\n      }\n    });\n  }\n\n  protected abstract draw(ctx: DrawingContext): void;\n  protected abstract deriveProps(): C;\n}\n"],"mappings":";;AASA,SAASA,kBAAT,QAAmC,QAAnC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA,OAAO,MAAeC,cAAf,SACGD,aADH,CAGP;EAGEE,WAAW,CAACC,GAAD,EAAmBC,IAAnB,EAAmCC,KAAnC,EAA6C;IACtD,MAAMF,GAAN,EAAWC,IAAX,EAAiBC,KAAjB;;IADsD;;IAEtD,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDC,QAAQ,CAACH,KAAD,EAAW;IACjB,MAAMG,QAAN,CAAeH,KAAf;IACA,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDE,OAAO,CAAoBC,IAApB,EAA6BC,KAA7B,EAA0C;IAC/C,MAAMC,UAAU,GAAG,MAAMH,OAAN,CAAcC,IAAd,EAAoBC,KAApB,CAAnB;;IACA,IAAIC,UAAJ,EAAgB;MACd,KAAKN,OAAL,GAAe,KAAKC,WAAL,EAAf;IACD;;IACD,OAAOK,UAAP;EACD;;EAEDC,QAAQ,CAACC,KAAD,EAA6B;IACnC,IAAI,EAAEA,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMS,QAAN,CAAeC,KAAf;IACA,KAAKR,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDS,iBAAiB,CAACF,KAAD,EAAuBG,MAAvB,EAAoD;IACnE,IAAI,EAAEH,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMY,iBAAN,CAAwBF,KAAxB,EAA+BG,MAA/B;IACA,KAAKX,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDW,UAAU,CAACf,GAAD,EAA4B;IACpC,IAAI,KAAKE,KAAL,CAAWc,KAAf,EAAsB;MACpB,KAAKC,IAAL,CAAU,EAAE,GAAGjB,GAAL;QAAUgB,KAAK,EAAE,KAAKd,KAAL,CAAWc;MAA5B,CAAV;IACD,CAFD,MAEO;MACL,KAAKC,IAAL,CAAUjB,GAAV;IACD;;IACD,KAAKkB,QAAL,GAAgBC,GAAhB,CAAqBR,KAAD,IAAW;MAC7B,IAAIA,KAAK,YAAYf,SAArB,EAAgC;QAC9B,MAAMwB,OAAO,GAAGpB,GAAG,CAACqB,cAApB;QACAD,OAAO,CAACE,IAAR;QACAX,KAAK,CAACY,QAAN,CAAeH,OAAf;QACA,MAAMJ,KAAK,GAAGI,OAAO,CAACI,MAAR,CAAeC,GAAf,EAAd;QACAL,OAAO,CAACM,OAAR;QACA,KAAKT,IAAL,CAAU,EAAE,GAAGjB,GAAL;UAAUgB;QAAV,CAAV;MACD;IACF,CATD;EAUD;;AArDH"}

package/lib/module/dom/nodes/GroupNode.d.ts

@@ -0,0 +1,7 @@
+import type { DrawingContext, GroupProps } from "../types";
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+export declare class GroupNode extends JsiRenderNode<GroupProps> {
+    constructor(ctx: NodeContext, props: GroupProps);
+    renderNode(ctx: DrawingContext): void;
+}