Graphite icon indicating copy to clipboard operation
Graphite copied to clipboard

Export dialog option to set background color

Open Keavon opened this issue 2 years ago • 5 comments

It would be great to have another option in the export dialog: Background. It could be set to Artboard Background, Black, White, and Transparent.

  • JPG would make Transparent grayed out.
  • SVG would need to add a colored rectangle behind everything with dimensions equal to the viewBox bounds (except when Transparent is chosen).

Keavon avatar Jun 30 '22 01:06 Keavon

I would like to work on this issue

brainwo avatar Oct 08 '22 15:10 brainwo

@brainwo sounds good! I have some changes in flight that touch the frontend code, so I'll break that out into a separate PR and merge it shortly before it affects your work.

Keavon avatar Oct 08 '22 17:10 Keavon

Once #786 is merged in a few minutes, that'll unblock you @brainwo.

Keavon avatar Oct 08 '22 17:10 Keavon

@brainwo now you're unblocked! And feel free to check out that PR if you need any hints about those parts of the code related to the background color when exporting images.

Keavon avatar Oct 08 '22 18:10 Keavon

Ok, sorry for the long delay @brainwo. We did a lot of work in the past month that dealt with document rasterization, including the Imaginate and Node Graph Frame tools and layer types, plus the Eyedropper tool. As such, the code you dealt with has changed in form a sizable amount. I'd be happy to update your PR with the new base for you but that'll take some of my time that I need to prioritize in the next few days. Or if you would want to take a shot at it, that would be most welcome also.

I am also thinking more about the ideal UX for this. Since we already have the ability to set the color of artboards, we should probably defer to that color. But that leaves a few considerations:

  • If a user wants transparent, it can be a hassle to set the artboard background to transparent since it sort of disappears. And we may want to remove the possibility of setting the opacity on artboards at all. And setting a semi-transparent color probably isn't that useful and could be achieved by drawing a full-artboard-sized rectangle behind the artwork. Therefore a "Transparent" choice in the Export dialog may be a helpful option that can ignore the artboard color and make it transparent.
  • JPG doesn't support transparency
  • SVG only supports transparency, meaning a rectangle must be drawn with the viewBox bounds to provide a background color. If the user doesn't want that rectangle, we shouldn't pollute the SVG with a transparent rectangle, instead it should be absent.
  • With an infinite canvas, the user can't set the background color and might want transparent but also might want another color. But we could perhaps add the ability to set the background color for the document, and users can fake it with a rectangle.
  • With one or more artboards, the space outside the artboards is rendered as #222222 but should probably be exported as either black or transparent. Or maybe it should ideally be never exported by constraining the "All Artwork" and "Selection" options to only one artboard at a time. But that's not worth implementing quite yet.

So with these considerations, I'm thinking the best way to achieve this is with just a single checkbox that changes based on context:

  • Document is an infinite canvas:
    • JPG: Checkbox is not shown and the white background color is used
    • SVG or PNG: Checkbox is labeled "Transparent Background" and makes the background transparent
  • Document has artboard(s):
    • JPG: Checkbox is not shown and the artboard color is used and the area outside the artboards is black
    • SVG or PNG: Checkbox is labeled "Transparent Artboard Background" which sets the artboard to its own color or transparent, and the outside area is always transparent instead of black

Sorry to change the requirements out from under you and make you redo some work when dealing with the merge conflicts. As mentioned before, I'm happy to take this over if you'd rather not deal with the rework. But if you're up for it, that would be phenomenal and much appreciated!

Keavon avatar Nov 07 '22 01:11 Keavon

Now that artboards have background colors, the use case for this becomes more rare: only when you're using an infinite canvas and don't want to create an artboard. It should be ok to close this for now with the potential to someday revisit it.

Keavon avatar Mar 15 '24 01:03 Keavon