From ba4d97bb2c956b670fa2bd8cac72a86d05226efd Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Sun, 30 Jul 2023 10:49:12 -0700 Subject: [PATCH] Add checkbox for a transparent BG when exporting image --- .../export_dialog/export_dialog_message.rs | 1 + .../export_dialog_message_handler.rs | 26 +++++++++++++++++-- .../portfolio/document/document_message.rs | 1 + .../document/document_message_handler.rs | 22 +++++++++++----- 4 files changed, 41 insertions(+), 9 deletions(-) diff --git a/editor/src/messages/dialog/export_dialog/export_dialog_message.rs b/editor/src/messages/dialog/export_dialog/export_dialog_message.rs index 1c7b491bb7..eabb6a1685 100644 --- a/editor/src/messages/dialog/export_dialog/export_dialog_message.rs +++ b/editor/src/messages/dialog/export_dialog/export_dialog_message.rs @@ -9,6 +9,7 @@ pub enum ExportDialogMessage { FileName(String), FileType(FileType), ScaleFactor(f64), + TransparentBackground(bool), ExportBounds(ExportBounds), Submit, diff --git a/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs b/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs index cacf505034..146caea3c8 100644 --- a/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs +++ b/editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs @@ -2,7 +2,7 @@ use crate::messages::frontend::utility_types::{ExportBounds, FileType}; use crate::messages::layout::utility_types::layout_widget::{Layout, LayoutGroup, PropertyHolder, Widget, WidgetCallback, WidgetHolder, WidgetLayout}; use crate::messages::layout::utility_types::misc::LayoutTarget; use crate::messages::layout::utility_types::widgets::button_widgets::TextButton; -use crate::messages::layout::utility_types::widgets::input_widgets::{DropdownEntryData, DropdownInput, NumberInput, RadioEntryData, RadioInput, TextInput}; +use crate::messages::layout::utility_types::widgets::input_widgets::{CheckboxInput, DropdownEntryData, DropdownInput, NumberInput, RadioEntryData, RadioInput, TextInput}; use crate::messages::layout::utility_types::widgets::label_widgets::{Separator, SeparatorDirection, SeparatorType, TextLabel}; use crate::messages::prelude::*; @@ -15,6 +15,7 @@ pub struct ExportDialogMessageHandler { pub file_type: FileType, pub scale_factor: f64, pub bounds: ExportBounds, + pub transparent_background: bool, pub artboards: HashMap, pub has_selection: bool, } @@ -24,7 +25,8 @@ impl MessageHandler for ExportDialogMessageHandler { match message { ExportDialogMessage::FileName(name) => self.file_name = name, ExportDialogMessage::FileType(export_type) => self.file_type = export_type, - ExportDialogMessage::ScaleFactor(x) => self.scale_factor = x, + ExportDialogMessage::ScaleFactor(factor) => self.scale_factor = factor, + ExportDialogMessage::TransparentBackground(transparent_background) => self.transparent_background = transparent_background, ExportDialogMessage::ExportBounds(export_area) => self.bounds = export_area, ExportDialogMessage::Submit => responses.add_front(DocumentMessage::ExportDocument { @@ -32,6 +34,7 @@ impl MessageHandler for ExportDialogMessageHandler { file_type: self.file_type, scale_factor: self.scale_factor, bounds: self.bounds, + transparent_background: self.file_type != FileType::Jpg && self.transparent_background, }), } @@ -120,6 +123,24 @@ impl PropertyHolder for ExportDialogMessageHandler { })), ]; + let transparent_background = vec![ + WidgetHolder::new(Widget::TextLabel(TextLabel { + value: "Transparency".into(), + table_align: true, + ..Default::default() + })), + WidgetHolder::new(Widget::Separator(Separator { + separator_type: SeparatorType::Unrelated, + direction: SeparatorDirection::Horizontal, + })), + WidgetHolder::new(Widget::CheckboxInput(CheckboxInput { + checked: self.transparent_background, + disabled: self.file_type == FileType::Jpg, + on_update: WidgetCallback::new(move |value: &CheckboxInput| ExportDialogMessage::TransparentBackground(value.checked).into()), + ..Default::default() + })), + ]; + let resolution = vec![ WidgetHolder::new(Widget::TextLabel(TextLabel { value: "Scale Factor".into(), @@ -174,6 +195,7 @@ impl PropertyHolder for ExportDialogMessageHandler { LayoutGroup::Row { widgets: export_type }, LayoutGroup::Row { widgets: resolution }, LayoutGroup::Row { widgets: export_area }, + LayoutGroup::Row { widgets: transparent_background }, LayoutGroup::Row { widgets: button_widgets }, ])) } diff --git a/editor/src/messages/portfolio/document/document_message.rs b/editor/src/messages/portfolio/document/document_message.rs index 7778133e27..e3b8c71540 100644 --- a/editor/src/messages/portfolio/document/document_message.rs +++ b/editor/src/messages/portfolio/document/document_message.rs @@ -82,6 +82,7 @@ pub enum DocumentMessage { file_type: FileType, scale_factor: f64, bounds: ExportBounds, + transparent_background: bool, }, FlipSelectedLayers { flip_axis: FlipAxis, diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs index d85c9eab8a..ab4ae6545b 100644 --- a/editor/src/messages/portfolio/document/document_message_handler.rs +++ b/editor/src/messages/portfolio/document/document_message_handler.rs @@ -370,6 +370,7 @@ impl MessageHandler { let old_transforms = self.remove_document_transform(); @@ -383,7 +384,7 @@ impl MessageHandler String { + pub fn render_document(&mut self, size: DVec2, transform: DAffine2, transparent_background: bool, persistent_data: &PersistentData, render_mode: DocumentRenderMode) -> String { // Render the document SVG code let render_data = RenderData::new(&persistent_data.font_cache, ViewMode::Normal, None); @@ -1063,20 +1065,26 @@ impl DocumentMessageHandler { DocumentRenderMode::OnlyBelowLayerInFolder(below_layer_path) => (self.document_legacy.render_layers_below(below_layer_path, &render_data).unwrap(), None), DocumentRenderMode::LayerCutout(layer_path, background) => (self.document_legacy.render_layer(layer_path, &render_data).unwrap(), Some(background)), }; - let artboards = self.artboard_message_handler.artboards_document.render_root(&render_data); + let artboards = match transparent_background { + false => self.artboard_message_handler.artboards_document.render_root(&render_data), + true => "".into(), + }; let outside_artboards_color = outside.map_or_else( || if self.artboard_message_handler.artboard_ids.is_empty() { "ffffff" } else { "222222" }.to_string(), |col| col.rgba_hex(), ); - let outside_artboards = format!(r##""##, outside_artboards_color); + let outside_artboards = match transparent_background { + false => format!(r##""##, outside_artboards_color), + true => "".into(), + }; let matrix = transform .to_cols_array() .iter() .enumerate() .fold(String::new(), |acc, (i, entry)| acc + &(entry.to_string() + if i == 5 { "" } else { "," })); let svg = format!( - r#"{}{}{}{}"#, - size.x, size.y, "\n", outside_artboards, matrix, artboards, artwork + r#"{}{outside_artboards}{artboards}{artwork}"#, + size.x, size.y, "\n", ); svg