feat: close dialog and show toast for Export image

[yongjoon-km]

Save to feature closes dialog and showed toast message after exporting successful.
Export image feature better follow the same flow.

resolves #8008

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
excalidraw	✅ Ready (Inspect)	Visit Preview	May 15, 2024 6:30am
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	May 15, 2024 6:30am
excalidraw-package-example-with-nextjs	✅ Ready (Inspect)	Visit Preview	May 15, 2024 6:30am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview	May 15, 2024 6:30am

[ad1992]

Thanks @yongjoon-km for the contribution
Can you also add a toast when copyToClipboard is clicked?

[yongjoon-km]

Thanks @yongjoon-km for the contribution Can you also add a toast when copyToClipboard is clicked?

Hi @ad1992 , I also apply a toast to the Copy to clipboard. Thank you~

[ad1992]

Hey @yongjoon-km looks good ❤️

I feel the toast stays for too lon, should we reduce the duration ?
cc @dwelle

[yongjoon-km]

Hey @yongjoon-km looks good ❤️

I feel the toast stays for too lon, should we reduce the duration ? cc @dwelle

The default duration of the toast is 5 seconds.
I agree with you the toast stays too long. How about 1.5 seconds?
I found the similar duration configuration from here

excalidraw/packages/excalidraw/components/App.tsx

Lines 1963 to 1972 in 4dc975c

	private onIframeSrcCopy(element: ExcalidrawIframeElement) {
	if (element.customData?.generationData?.status === "done") {
	copyTextToSystemClipboard(element.customData.generationData.html);
	this.setToast({
	message: "copied to clipboard",
	closable: false,
	duration: 1500,
	});
	}
	}

[ad1992]

@yongjoon-km looking good ✨
I pushed minor tweaks to simplify, let me know if its good

[yongjoon-km]

@yongjoon-km looking good ✨ I pushed minor tweaks to simplify, let me know if its good

Thanks~! it looks good 👍

[dwelle]

hey @yongjoon-km. Sorry for jumping into this late. To give a bit more context, we've had a request for this once already I believe and there were two reasons why we're not closing the export dialog:

1. There is a use case where people want to export to two or more formats at once, e.g. PNG + SVG, or PNG but also copy to clipboard for sharing.

   But we are not tracking this, so it's unclear whether this use case is large enough to justify this.

   EDIT: thinking about it more, there may be more common cases like exporting in two different themes (light + dark) or two different scales, etc. So this requires further investigation.

2. The bigger reason is that we're showing a saving status indicator in the button which is important when exporting larger scenes which can take many seconds (in some cases even 20+ seconds) so that people know what's happening.

   We will start preventing window unload (tab close) as well, but even then we should make it clear that the file is still saving.

   So, even if we decided to ignore the reason (1), we'd at the very least need to come up with an alternative UI for showing the status indicator, before we would be able to merge this.

[dwelle]

Save to feature closes dialog and showed toast message after exporting successful.

That said, no matter if we close the dialog or not, you're making a fair point that the we don't indicate clearly that the saved was successful.

[yongjoon-km]

hey @yongjoon-km. Sorry for jumping into this late. To give a bit more context, we've had a request for this once already I believe and there were two reasons why we're not closing the export dialog:

1. There is a use case where people want to export to two or more formats at once, e.g. PNG + SVG, or PNG but also copy to clipboard for sharing.
   But we are not tracking this, so it's unclear whether this use case is large enough to justify this.
   EDIT: thinking about it more, there may be more common cases like exporting in two different themes (light + dark) or two different scales, etc. So this requires further investigation.
2. The bigger reason is that we're showing a saving status indicator in the button which is important when exporting larger scenes which can take many seconds (in some cases even 20+ seconds) so that people know what's happening.
   We will start preventing window unload (tab close) as well, but even then we should make it clear that the file is still saving.
   So, even if we decided to ignore the reason (1), we'd at the very least need to come up with an alternative UI for showing the status indicator, before we would be able to merge this.

Hello @dwelle , Thanks for pointing out previous history on this~

I tried to reproduce large file exporting by delaying inside the exportToSvg function, which I guess creating svg blob file can be delayed when canvas is large. In this case, the dialog I added doesn't just showed up unless file is actually saved.
Can you take a look my implementation executed before file is saved via browser-fs-access?
I think loading button will be waiting until the file is downloaded. If so we need to think about the use case 1 you mentioned.