feat: Support customising canvas actions 🎉

[h7y]

I've used the action names for canvasActions attributes to conditionally disable the respective action, except for export since it doesn't have an action. I'm not sure whether this is the right way to do it. Looking for feedback :)

I'll add tests & make changes to docs after initial feedback.

Example with export hidden

Addresses 1/3 of #3012

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/excalidraw/excalidraw/5bCyps1CiVWQF32Pjyb16W4rUXmf
✅ Preview: https://excalidraw-git-support-hiding-ui-elements-1-excalidraw.vercel.app

[ad1992]

Since these prop will be one time options (only applicable during mount) I am thinking if we should instead rename the prop to

UIOptions: {
   canvasActions: {}
   }
 }

and later shapes and selectedShapeActions can also be added to the same instead of having individual props

[h7y]

Perfect! I'll add tests and make changes to docs.

[ad1992]

The spacing looks weird when only loadScene is allowed and collab is supported

I am ok with not disabling drag and drop when loadScene is false.

color picker and theme also comes under canvas actions so lets add background, theme attributes under canvas actions for that.

[ad1992]

The consumer will still be able to pass the actions which we don't support unless using typescript. I am ok with it to start with, we can whitelist it if needed later to prevent it.

[ad1992]

color picker and theme also comes under canvas actions so lets add background, theme attributes under canvas actions for that.

I added a prop for background. I see that theme is already controlled by the theme prop, should we add this anyway or should we move that prop to canvasActions?

Yep the theme prop is for whether the host wants to control it, this is for the host wants this functionality at all (nothing about controlling it from host) so we should support it, else host will have to unnecessary pass theme prop as a hack for not showing the theme button. However the logic wise on the code side it will be same (don't allow theme to be updated when this prop is false which means don't show the theme button)

[ad1992]

The spacing looks weird when only loadScene is allowed and collab is supported

This we will have to check how we can we fix it as the spacing looks little weird when just one option is shown along with collab. But it can go in a separate PR as an improvement.

[ad1992]

Thanks a lot for working on this @h7y ❤️

[h7y]

Thank you so much for the review @ad1992! ❤️