Description
When attempting to import custom images (previously exported images) for noun parts (accessory, noggles, head, body, or background) via the import/load feature, the uploaded image does not appear in the preview. Instead, only an empty grid (checkerboard pattern) is shown, making it impossible to verify the import before finalizing.
Steps to Reproduce
- Open the Noundry Studio app.
- Navigate to the import feature for any noun part (e.g., accessory, head, etc.).
- Upload or drag-and-drop an image file (e.g., PNG).
- Observe the preview area.
Expected Behavior
The uploaded image should be displayed in the preview grid, scaled appropriately to fit the canvas (e.g., 32x32 pixels), allowing users to see the image before importing it into the noun part.
Actual Behavior
The preview shows only the empty grid without the uploaded image. The import process may still complete, but without visual feedback, users cannot confirm the image was loaded correctly.
Environment
- Browser:Chrome , Safari latest
- OS: [e.g., macOS 14.5]
- App Version: Latest from main branch
- Image Format Tested: PNG (previous exported)
Additional Context
- This affects all noun parts that support custom image import.
- The issue appears to be in the
PartImporter component, where the image is drawn to the canvas without proper scaling.
- A potential fix involves updating the
drawImage call in apps/studio/src/components/PartImporter.tsx to scale the image to the canvas dimensions.
Screenshots
Related Files
apps/studio/src/components/PartImporter.tsx (likely the source of the issue)apps/studio/src/utils/canvas/drawCanvas.ts (related canvas drawing utilities)
Description
When attempting to import custom images (previously exported images) for noun parts (accessory, noggles, head, body, or background) via the import/load feature, the uploaded image does not appear in the preview. Instead, only an empty grid (checkerboard pattern) is shown, making it impossible to verify the import before finalizing.
Steps to Reproduce
Expected Behavior
The uploaded image should be displayed in the preview grid, scaled appropriately to fit the canvas (e.g., 32x32 pixels), allowing users to see the image before importing it into the noun part.
Actual Behavior
The preview shows only the empty grid without the uploaded image. The import process may still complete, but without visual feedback, users cannot confirm the image was loaded correctly.
Environment
Additional Context
PartImportercomponent, where the image is drawn to the canvas without proper scaling.drawImagecall inapps/studio/src/components/PartImporter.tsxto scale the image to the canvas dimensions.Screenshots
Related Files
apps/studio/src/components/PartImporter.tsx(likely the source of the issue)apps/studio/src/utils/canvas/drawCanvas.ts(related canvas drawing utilities)