mui
feat: add auto-scroll to canvas elements when selected from panel
Closes #3338
Adds auto-scroll to page canvas when element selected from the component panel.
- [x] I've read and followed the contributing guide on how to create great pull requests.
- [x] I've updated the relevant documentation for any new or updated feature.
- [x] I've linked relevant GitHub issue with "Closes #
". - [x] I've added a visual demonstration in the form of a screenshot or video.
https://private-user-images.githubusercontent.com/59088937/317851041-0b8699fa-d446-4cfc-91df-bf9ca8ce5678.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTE3MDk1MzAsIm5iZiI6MTcxMTcwOTIzMCwicGF0aCI6Ii81OTA4ODkzNy8zMTc4NTEwNDEtMGI4Njk5ZmEtZDQ0Ni00Y2ZjLTkxZGYtYmY5Y2E4Y2U1Njc4Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzI5VDEwNDcxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM5YjEwZjQ4MjdmMjhmNzcxOTY3MmE0ZGZjNGZkOTgyZWFiNGE0ZTcyYzBhOTZhOTBmOWZlNmI4ZmQ2MjVhNmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.MczwPnIotR_WIBMlcwKDUFz-4bzKNvK8_ObJroH5Msg
But it's not scrolling to the elements for me on Google Chrome?
Do you see any error or if possible can you also try on some other browser? I'm using brave which basically chrome and it's working fine for me.
But it's not scrolling to the elements for me on Google Chrome?
Do you see any error or if possible can you also try on some other browser? I'm using brave which basically chrome and it's working fine for me.
No errors at all, I tried to debug but couldn't find what's wrong so far... doesn't seem to work for me in other browsers either. I've asked some team members to see if it works for them - if it does we can probably merge this and I can investigate my case later.
Doesn't seem to work for me either in Brave:
https://github.com/mui/mui-toolpad/assets/19550456/54217a70-641e-41d5-88c6-88aa53710ab0
But it's not scrolling to the elements for me on Google Chrome?
Do you see any error or if possible can you also try on some other browser? I'm using brave which basically chrome and it's working fine for me.
Ah, I just realized that I had the process.env.EXPERIMENTAL_INLINE_CANVAS flag on.
So for that mode we probably just have to target a different ref to be able to scroll,overlayRef.current seems to work!
Other than that the logic should be the same. Sorry for forgetting about that experimental mode!
Thank you for looking into this feature. Works well (on classic canvas mode). The inline canvas will be the default soon, we should make sure the scroll keeps working under that mode. I've also pushed an integration test for scroll behavior on your PR.
For context: the inline canvas mode removes the iframe from the Toolpad editor in which the Toolpad app runs and runs the Toolpad editor + Toolpad application in the same React tree. The ultimate goal for this is to eventually be able to run Toolpad as a React component inside of Next.js (or any other React runtime). You can try out this mode out by adding a .env file that contains:
EXPERIMENTAL_INLINE_CANVAS=1
Currently the code for this contains some complexity to support both modes but we should be able to simplify as soon as the iframe is discontinued. Apologies for the inconvenience.
Hi, guys. Sorry was away for past few days. I'm good with the changes for the new canvas made the changes in both old canvas and new canvas container can you guys take a look.
I'm not sure to remove the code/refactor the changes for the old canvas container, if needed please let me know will do the needful changes
@Janpot @apedroferreira
great work, thank you! I've resetted the changes to the test fixture as it seems to be unnecessary