[canvaskit] Add docs/types for Skottie and Particles

This should be it. Caught up with 0.18.0

Change-Id: Ibe846d756601e42e315ab510807abd4bbd9cf30d
Bug: skia:10717
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/322323
Reviewed-by: Kevin Lubick <kjlubick@google.com>

Author: kjlubick

modules/canvaskit/canvaskit/types/canvaskit-wasm-tests.ts

@@ -4,15 +4,10 @@ import CanvasKitInit from "canvaskit-wasm/bin/canvaskit";
 import {
     CanvasKit,
     Paragraph,
-    PathCommand,
-    PositionWithAffinity,
-    PosTan,
     ShapedText,
     SkAnimatedImage,
     SkCanvas,
     SkColorFilter,
-    SkContourMeasure,
-    SkContourMeasureIter,
     SkFont,
     SkFontMgr,
     SkImage,
@@ -23,18 +18,10 @@ import {
     SkPath,
     SkPathEffect,
     SkPicture,
-    SkPictureRecorder,
-    SkPoint,
     SkShader,
-    SkSurface,
     SkTextBlob,
     SkTypeface,
     SkVertices,
-    TonalColorsOutput,
-    TypedArray,
-    URange,
-    Vector3,
-    VectorN,
 } from "canvaskit-wasm";
 
 CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + file}).then((CK: CanvasKit) => {
@@ -53,13 +40,15 @@ CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + fi
     maskFilterTests(CK);
     matrixTests(CK);
     paintTests(CK);
-    paragraphBuilderTests(CK);
     paragraphTests(CK);
+    paragraphBuilderTests(CK);
+    particlesTests(CK);
     pathEffectTests(CK);
     pathTests(CK);
     pictureTests(CK);
     rectangleTests(CK);
     runtimeEffectTests(CK);
+    skottieTests(CK);
     shaderTests(CK);
     shapedTextTests(CK);
     surfaceTests(CK);
@@ -515,6 +504,32 @@ function paragraphBuilderTests(CK: CanvasKit, fontMgr?: SkFontMgr, paint?: SkPai
     builder2.addPlaceholder(10, 20, CK.PlaceholderAlignment.Top, CK.TextBaseline.Ideographic, 3);
 }
 
+function particlesTests(CK: CanvasKit, canvas?: SkCanvas) {
+    if (!canvas) return;
+
+    const par = CK.MakeParticles('some json'); // $ExpectType Particles
+    par.draw(canvas);
+    par.effectUniforms()[0] = 1.2;
+    const a = par.getEffectUniform(1); // $ExpectType ParticlesUniform
+    const b = par.getEffectUniformCount(); // $ExpectType number
+    const c = par.getEffectUniformFloatCount(); // $ExpectType number
+    const d = par.getEffectUniformName(3); // $ExpectType string
+    const e = par.getParticleUniform(3); // $ExpectType ParticlesUniform
+    const f = par.getParticleUniformCount(); // $ExpectType number
+    const g = par.getParticleUniformFloatCount(); // $ExpectType number
+    const h = par.getParticleUniformName(3); // $ExpectType string
+    par.particleUniforms()[2] = 4.5;
+    par.setPosition([3, 5]);
+    par.setRate(3);
+    par.start(0, true);
+    par.update(2);
+
+    const buff = new ArrayBuffer(10);
+    const par2 = CK.MakeParticles('other json', { // $ExpectType Particles
+        'flightAnim.gif': buff,
+    });
+}
+
 function pathEffectTests(CK: CanvasKit) {
     const pe1 = CK.SkPathEffect.MakeCorner(2); // $ExpectType SkPathEffect | null
     const pe2 = CK.SkPathEffect.MakeDash([2, 4]); // $ExpectType SkPathEffect
@@ -599,6 +614,32 @@ function runtimeEffectTests(CK: CanvasKit) {
     const s4 = rt.makeShaderWithChildren([4, 5], true, [s1, s2], someMatr); // $ExpectType SkShader
 }
 
+function skottieTests(CK: CanvasKit, canvas?: SkCanvas) {
+    if (!canvas) return;
+
+    const anim = CK.MakeAnimation('some json'); // $ExpectType SkottieAnimation
+    const a = anim.duration(); // $ExpectType number
+    const b = anim.fps(); // $ExpectType number
+    const c = anim.version(); // $ExpectType string
+    const d = anim.size(); // $ExpectType SkPoint
+    const rect = anim.seek(0.5);
+    anim.seek(0.6, rect);
+    const rect2 = anim.seekFrame(12.3);
+    anim.seekFrame(12.3, rect2);
+    anim.render(canvas);
+    anim.render(canvas, rect);
+
+    const buff = new ArrayBuffer(10);
+    const mAnim = CK.MakeManagedAnimation('other json', { // $ExpectType ManagedSkottieAnimation
+        'flightAnim.gif': buff,
+    });
+    mAnim.setColor('slider', CK.WHITE);
+    mAnim.setOpacity('slider', 0.8);
+    const e = mAnim.getMarkers();  // $ExpectType object[]
+    const f = mAnim.getColorProps();  // $ExpectType object[]
+    const g = mAnim.getOpacityProps();  // $ExpectType object[]
+}
+
 function shaderTests(CK: CanvasKit) {
     const s1 = CK.SkShader.Color([0.8, 0.2, 0.5, 0.9], // $ExpectType SkShader
                                  CK.SkColorSpace.SRGB);

modules/canvaskit/canvaskit/types/index.d.ts

@@ -331,6 +331,32 @@ export interface CanvasKit {
                    colors?: Float32Array | ColorIntArray | null, indices?: number[] | null,
                    isVolatile?: boolean): SkVertices;
 
+    /**
+     * Returns a Skottie animation built from the provided json string.
+     * Requires that Skottie be compiled into CanvasKit.
+     * @param json
+     */
+    MakeAnimation(json: string): SkottieAnimation;
+
+    /**
+     * Returns a managed Skottie animation built from the provided json string and assets.
+     * Requires that Skottie be compiled into CanvasKit.
+     * @param json
+     * @param assets - a dictionary of named blobs: { key: ArrayBuffer, ... }
+     * @param filterPrefix - an optional string acting as a name filter for selecting "interesting"
+     *                       Lottie properties (surfaced in the embedded player controls)
+     */
+    MakeManagedAnimation(json: string, assets?: Record<string, ArrayBuffer>,
+                         filterPrefix?: string): ManagedSkottieAnimation;
+
+    /**
+     * Returns a Particles effect built from the provided json string and assets.
+     * Requires that Particles be compiled into CanvasKit
+     * @param json
+     * @param assets
+     */
+    MakeParticles(json: string, assets?: Record<string, ArrayBuffer>): Particles;
+
     /**
      * Returns the underlying data from SkData as a Uint8Array.
      * @param data
@@ -566,6 +592,14 @@ export interface MallocObj {
     toTypedArray(): TypedArray;
 }
 
+export interface ManagedSkottieAnimation extends SkottieAnimation {
+    setColor(key: string, color: InputColor): void;
+    setOpacity(key: string, opacity: number): void;
+    getMarkers(): object[];
+    getColorProps(): object[];
+    getOpacityProps(): object[];
+}
+
 /**
  * See Paragraph.h for more information on this class. This is only available if Paragraph has
  * been compiled in.
@@ -674,6 +708,105 @@ export interface PositionWithAffinity {
     affinity: Affinity;
 }
 
+/**
+ * See SkParticleEffect.h for more details.
+ */
+export interface Particles extends EmbindObject<Particles> {
+    /**
+     * Draws the current state of the particles on the given canvas.
+     * @param canvas
+     */
+    draw(canvas: SkCanvas): void;
+
+    /**
+     * Returns a Float32Array bound to the WASM memory of these uniforms. Changing these
+     * floats will change the corresponding uniforms instantly.
+     */
+    effectUniforms(): Float32Array;
+
+    /**
+     * Returns the nth uniform from the effect.
+     * @param index
+     */
+    getEffectUniform(index: number): ParticlesUniform;
+
+    /**
+     * Returns the number of uniforms on the effect.
+     */
+    getEffectUniformCount(): number;
+
+    /**
+     * Returns the number of float uniforms on the effect.
+     */
+    getEffectUniformFloatCount(): number;
+
+    /**
+     * Returns the name of the nth effect uniform.
+     * @param index
+     */
+    getEffectUniformName(index: number): string;
+
+    /**
+     * Returns the nth uniform on the particles.
+     * @param index
+     */
+    getParticleUniform(index: number): ParticlesUniform;
+
+    /**
+     * Returns the count of uniforms on the particles.
+     */
+    getParticleUniformCount(): number;
+
+    /**
+     * Returns the number of float uniforms on the particles.
+     */
+    getParticleUniformFloatCount(): number;
+
+    /**
+     * Returns the name of the nth particle uniform.
+     * @param index
+     */
+    getParticleUniformName(index: number): string;
+
+    /**
+     * Returns a Float32Array bound to the WASM memory of these uniforms. Changing these
+     * floats will change the corresponding uniforms instantly.
+     */
+    particleUniforms(): Float32Array;
+
+    /**
+     * Sets the base position of the effect.
+     * @param point
+     */
+    setPosition(point: SkPoint): void;
+
+    /**
+     * Sets the base rate of the effect.
+     * @param rate
+     */
+    setRate(rate: number): void;
+
+    /**
+     * Starts playing the effect.
+     * @param now
+     * @param looping
+     */
+    start(now: number, looping: boolean): void;
+
+    /**
+     * Updates the effect using the new time.
+     * @param now
+     */
+    update(now: number): void;
+}
+
+export interface ParticlesUniform {
+    columns: number;
+    rows: number;
+    /** The index into the uniforms array that this uniform begins. */
+    slot: number;
+}
+
 /**
  * A simple wrapper around SkTextBlob and the simple Text Shaper.
  */
@@ -2181,6 +2314,48 @@ export interface SkVertices extends EmbindObject<SkVertices> {
     uniqueID(): number;
 }
 
+export interface SkottieAnimation extends EmbindObject<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?: InputRect): void;
+
+    /**
+     * [deprecated] - use seekFrame
+     * @param t - value from [0.0, 1.0]; 0 is first frame, 1 is final frame.
+     * @param damageRect - will copy damage frame into this if provided.
+     */
+    seek(t: number, damageRect?: SkRect): SkRect;
+
+    /**
+     * 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): SkRect;
+
+    size(): SkPoint;
+    version(): string;
+}
+
 /**
  * Options used for SkPath.stroke(). If an option is omitted, a sensible default will be used.
  */