Set text color based on its fill when it's being edited

editor/src/document/document_message_handler.rs

@@ -15,10 +15,11 @@ use crate::message_prelude::*;
 use crate::viewport_tools::vector_editor::vector_shape::VectorShape;
 use crate::EditorError;
 
+use graphene::color::Color;
 use graphene::document::Document as GrapheneDocument;
 use graphene::layers::folder_layer::FolderLayer;
 use graphene::layers::layer_info::LayerDataType;
-use graphene::layers::style::ViewMode;
+use graphene::layers::style::{Fill, ViewMode};
 use graphene::{DocumentError, DocumentResponse, LayerId, Operation as DocumentOperation};
 
 use glam::{DAffine2, DVec2};
@@ -1156,11 +1157,13 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 				let text = self.graphene_document.layer(&path).unwrap().as_text().unwrap();
 				responses.push_back(DocumentOperation::SetTextEditability { path, editable }.into());
 				if editable {
+					let color = if let Fill::Solid(solid_color) = text.style.fill() { *solid_color } else { Color::BLACK };
 					responses.push_back(
 						FrontendMessage::DisplayEditableTextbox {
 							text: text.text.clone(),
 							line_width: text.line_width,
 							font_size: text.size,
+							color,
 						}
 						.into(),
 					);

editor/src/frontend/frontend_message.rs

@@ -20,7 +20,7 @@ pub enum FrontendMessage {
 	DisplayDialogError { title: String, description: String },
 	DisplayDialogPanic { panic_info: String, title: String, description: String },
 	DisplayDocumentLayerTreeStructure { data_buffer: RawBuffer },
-	DisplayEditableTextbox { text: String, line_width: Option<f64>, font_size: f64 },
+	DisplayEditableTextbox { text: String, line_width: Option<f64>, font_size: f64, color: Color },
 	DisplayRemoveEditableTextbox,
 
 	// Trigger prefix: cause a browser API to do something

frontend/src/components/panels/Document.vue

@@ -400,6 +400,7 @@ export default defineComponent({
 			this.textInput.style.width = displayEditableTextbox.line_width ? `${displayEditableTextbox.line_width}px` : "max-content";
 			this.textInput.style.height = "auto";
 			this.textInput.style.fontSize = `${displayEditableTextbox.font_size}px`;
+			this.textInput.style.color = displayEditableTextbox.color.toRgbaCSS();
 
 			this.textInput.oninput = (): void => {
 				if (this.textInput) this.editor.instance.update_bounds(textInputCleanup(this.textInput.innerText));

frontend/src/dispatcher/js-messages.ts

@@ -303,6 +303,9 @@ export class DisplayEditableTextbox extends JsMessage {
 	readonly line_width!: undefined | number;
 
 	readonly font_size!: number;
+
+	@Type(() => Color)
+	readonly color!: Color;
 }
 
 export class DisplayRemoveEditableTextbox extends JsMessage {}