From 9e54b205091d8da141046fe485d1407a63a0b218 Mon Sep 17 00:00:00 2001 From: zplata Date: Tue, 7 Nov 2023 16:30:14 +0000 Subject: [PATCH] Add types for ImageAsset and FontAsset Community contribution PR: https://github.com/rive-app/rive-wasm/pull/337 Building on top of this contribution to expose the FontAsset types to the high-level API, which doesn't come by default when including it in `rive_advanced.mjs.d.ts` because the types exposed on high-level currently have to be set in `rive.ts` (otherwise, only the low-level API runtimes can access the types from `rive_advanced.mjs.d.ts`). Switched the OOB assets example to use TS to test this Diffs= 237f41f2a Add types for ImageAsset and FontAsset (#6213) Co-authored-by: Zachary Plata Co-authored-by: cdelguercio --- .rive_head | 2 +- .../out_of_band_example/index.html | 2 +- .../{index.js => index.ts} | 25 +++++++++++-------- js/src/rive.ts | 6 +++++ js/src/rive_advanced.mjs.d.ts | 20 +++++++++++++++ 5 files changed, 43 insertions(+), 12 deletions(-) rename js/examples/_frameworks/out_of_band_example/{index.js => index.ts} (82%) diff --git a/.rive_head b/.rive_head index c9622a79..1fe2d7c0 100644 --- a/.rive_head +++ b/.rive_head @@ -1 +1 @@ -f21ebc98ccb32677eae36f23f89391f93767ca51 +237f41f2ab8a33d1bda0eea9b0d00f7ca3f5bf66 diff --git a/js/examples/_frameworks/out_of_band_example/index.html b/js/examples/_frameworks/out_of_band_example/index.html index f0690deb..f2e98333 100644 --- a/js/examples/_frameworks/out_of_band_example/index.html +++ b/js/examples/_frameworks/out_of_band_example/index.html @@ -1,6 +1,6 @@ - + diff --git a/js/examples/_frameworks/out_of_band_example/index.js b/js/examples/_frameworks/out_of_band_example/index.ts similarity index 82% rename from js/examples/_frameworks/out_of_band_example/index.js rename to js/examples/_frameworks/out_of_band_example/index.ts index 8d193c53..a406da5d 100644 --- a/js/examples/_frameworks/out_of_band_example/index.js +++ b/js/examples/_frameworks/out_of_band_example/index.ts @@ -5,6 +5,9 @@ import { Alignment, Layout, EventType, + FileAsset, + ImageAsset, + FontAsset, decodeImage, decodeFont, } from "@rive-app/canvas"; @@ -14,6 +17,9 @@ import { // Alignment, // Layout, // EventType, +// FileAsset, +// ImageAsset, +// FontAsset, // decodeImage, // decodeFont, } from "@rive-app/webgl"; import SampleFile from "./asset_load_check.riv"; @@ -26,7 +32,7 @@ async function loadFile() { } -const randomImageAsset = (asset) => { +const randomImageAsset = (asset: ImageAsset) => { fetch("https://picsum.photos/1000/1500").then( async (res) => { const image = await decodeImage(new Uint8Array(await res.arrayBuffer())); @@ -35,7 +41,7 @@ const randomImageAsset = (asset) => { } ); }; -const randomFontAsset = (asset) => { +const randomFontAsset = (asset: FontAsset) => { const urls = [ "https://cdn.rive.app/runtime/flutter/IndieFlower-Regular.ttf", @@ -56,16 +62,16 @@ const randomFontAsset = (asset) => { async function main() { const bytes = await loadFile(); - const body = document.querySelector("body"); - const el = document.createElement("canvas"); + const body = document.querySelector("body") as HTMLBodyElement; + const el = document.createElement("canvas") as HTMLCanvasElement; el.onclick = () => { randomImageAsset(imageAsset); randomFontAsset(fontAsset); }; el.id = `canvas`; - el.width = "1600"; - el.height = "800"; + el.width = 1600; + el.height = 800; body.appendChild(el); let imageAsset, fontAsset; @@ -78,8 +84,7 @@ async function main() { fit: Fit.Contain, alignment: Alignment.Center, }), - loadCDNAssets: true, - assetLoader: (asset, bytes) => { + assetLoader: (asset: FileAsset, bytes: Uint8Array) => { console.log("Tell our asset importer if we are going to load the asset contents", { name: asset.name, fileExtension: asset.fileExtension, @@ -95,11 +100,11 @@ async function main() { if (asset.isImage) { imageAsset = asset; - randomImageAsset(asset); + randomImageAsset(asset as ImageAsset); return true; } else if (asset.isFont) { fontAsset = asset; - randomFontAsset(asset); + randomFontAsset(asset as FontAsset); return true; } return false; diff --git a/js/src/rive.ts b/js/src/rive.ts index 813285f6..abe8be88 100644 --- a/js/src/rive.ts +++ b/js/src/rive.ts @@ -2,6 +2,12 @@ import * as rc from "./rive_advanced.mjs"; import * as packageData from "package.json"; import { registerTouchInteractions, sanitizeUrl, BLANK_URL } from "./utils"; +// Note: Re-exporting a few types from rive_advanced.mjs to expose for high-level +// API usage without re-defining their type definition here. May want to revisit +// and see if we want to expose both types from rive.ts and rive_advanced.mjs in +// the future +export type { FileAsset, FontAsset, ImageAsset } from './rive_advanced.mjs'; + /** * Generic type for a parameterless void callback */ diff --git a/js/src/rive_advanced.mjs.d.ts b/js/src/rive_advanced.mjs.d.ts index 0aa534fe..3f597932 100644 --- a/js/src/rive_advanced.mjs.d.ts +++ b/js/src/rive_advanced.mjs.d.ts @@ -875,6 +875,10 @@ export declare class Vec2D { delete(): void; } +/** + * Rive class representing a FileAsset with relevant metadata fields to describe + * an asset associated wtih the Rive File + */ export declare class FileAsset { name: string; fileExtension: string; @@ -883,6 +887,22 @@ export declare class FileAsset { cdnUuid: string; } +/** + * Rive class extending the FileAsset that exposes a `setRenderImage()` API with a + * decoded Image (via the `decodeImage()` API) to set a new Image on the Rive FileAsset + */ +export declare class ImageAsset extends FileAsset { + setRenderImage(image: Image): void; +} + +/** + * Rive class extending the FileAsset that exposes a `setFont()` API with a + * decoded Font (via the `decodeFont()` API) to set a new Font on the Rive FileAsset + */ +export declare class FontAsset extends FileAsset { + setFont(font: Font): void; +} + export declare class FileAssetLoader {} export declare class CustomFileAssetLoader extends FileAssetLoader {