[ts-sdk] Add width, height to Image component (#1126)

Author: wkazmierczak

ts/examples/node-examples/src/dynamic-text.tsx

@@ -49,7 +49,7 @@ function ExampleApp() {
       <PartialText text="Example partial text that transition in 1 second" transitionMs={1_000} />
       <PartialText text="Example partial text that transition in 2 second" transitionMs={2_000} />
       <PartialText text="Example partial text that transition in 5 second" transitionMs={5_000} />
-      <Image imageId="image_1" />
+      <Image imageId="image_1" style={{ width: 600 }} />
     </View>
   );
 }

ts/examples/node-examples/src/web-view.tsx

@@ -36,7 +36,6 @@ async function run() {
   await smelter.registerImage('logo', {
     assetType: 'svg',
     url: 'https://smelter.dev/images/smelter-logo.svg',
-    resolution: { width: 800, height: 200 },
   });
   await smelter.registerWebRenderer(WEBSITE_INSTANCE, {
     url: `file://${path.join(__dirname, './web-view.html')}`,

ts/smelter-core/src/api/renderer.ts

@@ -6,18 +6,10 @@ export function intoRegisterImage(image: Renderers.RegisterImage): Api.ImageSpec
     url: image.url,
     path: image.serverPath,
   };
-  if (image.assetType === 'svg') {
-    return {
-      asset_type: 'svg',
-      resolution: image.resolution,
-      ...source,
-    };
-  } else {
-    return {
-      asset_type: image.assetType,
-      ...source,
-    };
-  }
+  return {
+    asset_type: image.assetType,
+    ...source,
+  };
 }
 
 export function intoRegisterWebRenderer(

ts/smelter-web-wasm/src/compositor/api.ts

@@ -1,28 +1,10 @@
 import type { Output } from '@swmansion/smelter-core';
 import type { Api, Renderers } from '@swmansion/smelter';
 
-export type RegisterImage =
-  | {
-      assetType: 'png';
-      url: string;
-    }
-  | {
-      assetType: 'jpeg';
-      url: string;
-    }
-  | {
-      assetType: 'svg';
-      url: string;
-      resolution?: Api.Resolution;
-    }
-  | {
-      assetType: 'gif';
-      url: string;
-    }
-  | {
-      assetType: 'auto';
-      url: string;
-    };
+export type RegisterImage = {
+  assetType: 'png' | 'jpeg' | 'svg' | 'gif' | 'auto';
+  url: string;
+};
 
 export type RegisterShader = Renderers.RegisterShader;
 

ts/smelter/src/api.generated.ts

@@ -432,6 +432,14 @@ export type Component =
        * Id of an image. It identifies an image registered using a [`register image`](../routes.md#register-image) request.
        */
       image_id: RendererId;
+      /**
+       * Width of the image in pixels. If `height` is not explicitly provided, the image will automatically adjust its height to maintain its original aspect ratio relative to the width.
+       */
+      width?: number | null;
+      /**
+       * Height of the image in pixels. If `width` is not explicitly provided, the image will automatically adjust its width to maintain its original aspect ratio relative to the height.
+       */
+      height?: number | null;
     }
   | {
       type: "text";

ts/smelter/src/components/Image.ts

@@ -19,7 +19,23 @@ export type ImageProps = Omit<ComponentBaseProps, 'children'> &
         source: string;
         imageId?: never; // Ensuring 'imageId' cannot be used alongside 'source'
       }
-  );
+  ) & {
+    /**
+     * Component styling properties.
+     */
+    style?: ImageStyleProps;
+  };
+
+type ImageStyleProps = {
+  /**
+   * Width of the image in pixels. If `height` is not explicitly provided, the image will automatically adjust its height to maintain its original aspect ratio relative to the width.
+   */
+  width?: number;
+  /**
+   * Height of the image in pixels. If `width` is not explicitly provided, the image will automatically adjust its width to maintain its original aspect ratio relative to the height.
+   */
+  height?: number;
+};
 
 type ImageSceneBuliderProps = Omit<ImageProps, 'imageId'> & { imageId: string };
 
@@ -105,6 +121,8 @@ function sceneBuilder(props: ImageSceneBuliderProps, _children: SceneComponent[]
     type: 'image',
     id: props.id,
     image_id: props.imageId,
+    width: props.style?.width,
+    height: props.style?.height,
   };
 }
 

ts/smelter/src/types/resource.ts

@@ -2,33 +2,11 @@ import type * as Api from '../api.js';
 
 export type RegisterShader = Api.ShaderSpec;
 
-export type RegisterImage =
-  | {
-      assetType: 'png';
-      url?: string;
-      serverPath?: string;
-    }
-  | {
-      assetType: 'jpeg';
-      url?: string;
-      serverPath?: string;
-    }
-  | {
-      assetType: 'svg';
-      url?: string;
-      serverPath?: string;
-      resolution?: Api.Resolution;
-    }
-  | {
-      assetType: 'gif';
-      url?: string;
-      serverPath?: string;
-    }
-  | {
-      assetType: 'auto';
-      url?: string;
-      serverPath?: string;
-    };
+export type RegisterImage = {
+  assetType: 'png' | 'jpeg' | 'svg' | 'gif' | 'auto';
+  url?: string;
+  serverPath?: string;
+};
 
 export type ImageAssetType = RegisterImage['assetType'];