@akinon/pz-virtual-try-on 2.0.40-rc.0 → 2.0.40

package/CHANGELOG.md

@@ -1,36 +1,11 @@
 # @akinon/pz-virtual-try-on
 
-## 2.0.40-rc.0
-
-### Patch Changes
-
-- 9db81a71: ZERO-4365: Remove brand `@theme/*` alias imports from library packages
-- Updated dependencies [0cf9ea23]
-- Updated dependencies [324f97d5]
-- Updated dependencies [51ea0688]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08f]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f4]
-- Updated dependencies [57d7eb30]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a71]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d0]
-- Updated dependencies [4ac7b2a1]
-- Updated dependencies [e9598c71]
-- Updated dependencies [4998a963]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b2]
-  - @akinon/next@2.0.40-rc.0
+## 2.0.40
+
+### Patch Changes
+
+- 7a0e0c17: ZERO-4720: Preserve uploaded and generated image proportions during resizing and display.
+  - @akinon/next@2.0.40
 
 ## 2.0.39
 

package/jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/*.test.ts']
+};

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@akinon/pz-virtual-try-on",
-  "version": "2.0.40-rc.0",
+  "version": "2.0.40",
   "license": "MIT",
   "main": "src/index.ts",
+  "scripts": {
+    "test": "jest"
+  },
   "peerDependencies": {
     "next-auth": "^5.0.0-beta",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/next": "2.0.40-rc.0",
+    "@akinon/next": "2.0.40",
     "clsx": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-image-crop": "^11.0.5",

package/src/utils/image-compression.test.ts

@@ -0,0 +1,26 @@
+import { getScaledImageDimensions } from './image-compression';
+
+describe('getScaledImageDimensions', () => {
+  it.each([
+    [4000, 3000, 2048, 2048, 1536],
+    [3000, 4000, 2048, 1536, 2048],
+    [1200, 1600, 2048, 1200, 1600]
+  ])(
+    'preserves the aspect ratio for %sx%s images',
+    (width, height, maxDimension, expectedWidth, expectedHeight) => {
+      const result = getScaledImageDimensions(width, height, maxDimension);
+
+      expect(result).toEqual({
+        width: expectedWidth,
+        height: expectedHeight
+      });
+      expect(result.width / result.height).toBeCloseTo(width / height, 5);
+    }
+  );
+
+  it('rejects invalid dimensions before drawing to canvas', () => {
+    expect(() => getScaledImageDimensions(0, 1000, 2048)).toThrow(
+      'Image dimensions must be positive'
+    );
+  });
+});

package/src/utils/image-compression.ts

@@ -1,26 +1,42 @@
+export const getScaledImageDimensions = (
+  width: number,
+  height: number,
+  maxDimension: number
+): { width: number; height: number } => {
+  if (width <= 0 || height <= 0 || maxDimension <= 0) {
+    throw new Error('Image dimensions must be positive');
+  }
+
+  const scale = Math.min(1, maxDimension / Math.max(width, height));
+
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale))
+  };
+};
+
 export const compressImageToUnder1MB = (file: File): Promise<File> => {
   return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     const img = new Image();
+    const imageUrl = URL.createObjectURL(file);
 
     img.onload = () => {
       const MAX_SIZE = 1048576;
+      URL.revokeObjectURL(imageUrl);
 
       if (!ctx) {
         reject(new Error('Canvas context not available'));
         return;
       }
 
-      let { width, height } = img;
-      let quality = 0.9;
-
       const maxDimension = 2048;
-      if (width > maxDimension || height > maxDimension) {
-        const scale = Math.min(maxDimension / width, maxDimension / height);
-        width = Math.floor(width * scale);
-        height = Math.floor(height * scale);
-      }
+      const { width, height } = getScaledImageDimensions(
+        img.naturalWidth,
+        img.naturalHeight,
+        maxDimension
+      );
 
       canvas.width = width;
       canvas.height = height;
@@ -55,12 +71,14 @@ export const compressImageToUnder1MB = (file: File): Promise<File> => {
         );
       };
 
-      attemptCompression(quality);
+      attemptCompression(0.9);
     };
 
-    img.onerror = () =>
+    img.onerror = () => {
+      URL.revokeObjectURL(imageUrl);
       reject(new Error('Failed to load image for compression'));
-    img.src = URL.createObjectURL(file);
+    };
+    img.src = imageUrl;
   });
 };
 
@@ -69,8 +87,10 @@ export const convertWebPToJPEG = (file: File): Promise<File> => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     const img = new Image();
+    const imageUrl = URL.createObjectURL(file);
 
     img.onload = () => {
+      URL.revokeObjectURL(imageUrl);
       canvas.width = img.naturalWidth;
       canvas.height = img.naturalHeight;
 
@@ -104,7 +124,10 @@ export const convertWebPToJPEG = (file: File): Promise<File> => {
       );
     };
 
-    img.onerror = () => reject(new Error('Failed to load image'));
-    img.src = URL.createObjectURL(file);
+    img.onerror = () => {
+      URL.revokeObjectURL(imageUrl);
+      reject(new Error('Failed to load image'));
+    };
+    img.src = imageUrl;
   });
 };

package/src/utils/index.ts

@@ -147,7 +147,8 @@ export const fileToBase64 = (file: File): Promise<string> => {
 
 export {
   compressImageToUnder1MB,
-  convertWebPToJPEG
+  convertWebPToJPEG,
+  getScaledImageDimensions
 } from './image-compression';
 
 export {

package/src/views/basket-async-modal.tsx

@@ -276,7 +276,7 @@ export function BasketAsyncModal({
                           src={hookData.uploadedImage}
                           alt="Uploaded"
                           className={twMerge(
-                            'rounded-[4px] w-auto',
+                            'rounded-[4px] max-w-full h-auto object-contain',
                             settings?.customStyles
                               ?.basketAsyncModalProcessingImage
                           )}
@@ -350,7 +350,7 @@ export function BasketAsyncModal({
                             src={hookData.uploadedImage}
                             alt="Uploaded"
                             className={twMerge(
-                              'w-full rounded-[4px]',
+                              'w-full h-auto object-contain rounded-[4px]',
                               settings?.customStyles?.basketAsyncModalErrorImage
                             )}
                           />
@@ -515,7 +515,7 @@ export function BasketAsyncModal({
                               src={result.generated}
                               alt={`Result ${index + 1}`}
                               className={twMerge(
-                                'w-full h-full group-hover:scale-105 transition-transform duration-200',
+                                'w-full h-full object-contain group-hover:scale-105 transition-transform duration-200',
                                 settings?.customStyles
                                   ?.basketAsyncModalResultImage
                               )}

package/src/views/virtual-try-on-multiple-result-modal.tsx

@@ -9,7 +9,6 @@ import type {
   VirtualTryOnPluginSettings,
   VirtualTryOnResponse
 } from '../types';
-import { Image } from '@akinon/next/components/image';
 import { useSubmitVirtualTryOnFeedbackMutation } from '../data/endpoints';
 import { parseVirtualTryOnError } from '../utils';
 import { useLocalization } from '@akinon/next/hooks';
@@ -398,12 +397,10 @@ export function VirtualTryOnMultipleResultModal({
                         </p>
                       </div>
                     ) : (
-                      <Image
+                      <img
                         src={result.generated}
                         alt={`Try-on result for ${product.name}`}
-                        fill
-                        aspectRatio={3 / 4}
-                        sizes="(max-width: 768px) 100vw, 33vw"
+                        className="absolute inset-0 w-full h-full object-contain"
                       />
                     )}
                   </div>

package/src/views/virtual-try-on-result-modal.tsx

@@ -408,7 +408,7 @@ export function VirtualTryOnResultModal({
                               imageUrl: tryOnResult.generated,
                               alt: 'Virtual try-on result',
                               className: twMerge(
-                                'w-full rounded-[4px]',
+                                'w-full h-auto object-contain rounded-[4px]',
                                 settings?.customStyles?.resultImage
                               )
                             }
@@ -418,7 +418,7 @@ export function VirtualTryOnResultModal({
                             src={tryOnResult.generated}
                             alt="Virtual try-on result"
                             className={twMerge(
-                              'w-full rounded-[4px]',
+                              'w-full h-auto object-contain rounded-[4px]',
                               settings?.customStyles?.resultImage
                             )}
                           />

package/src/views/virtual-try-on-upload-modal.tsx

@@ -1034,7 +1034,7 @@ export function VirtualTryOnUploadModal({
                               src={uploadedImage || ''}
                               alt="Uploaded image"
                               className={twMerge(
-                                'rounded-[4px] w-auto pointer-events-none select-none',
+                                'rounded-[4px] max-w-full h-auto object-contain pointer-events-none select-none',
                                 settings?.customStyles?.cropImage
                               )}
                             />