Introduce `InteractiveText` (#3397)

This new element will let us react to click events on arbitrary ranges of some rendered text, e.g.: ```rs InteractiveText::new( "element-id", StyledText::new("Hello world, how is it going?").with_runs(vec![ cx.text_style().to_run(6), TextRun { background_color: Some(green()), ..cx.text_style().to_run(5) }, cx.text_style().to_run(18), ]), ) .on_click(vec![2..4, 1..3, 7..9], |range_ix, cx| { println!("Clicked range {range_ix}"); }) ``` As part of this, I also added the ability to give text runs a background color. Release Notes: - N/A

Antonio Scandurra committed 2 years ago

Commit 510320b2 parents df7b89b 7eeb80711 files · +262 −33Browse files

Unified · Split

11 files

crates/editor2/src/editor.rs +2 −0
crates/editor2/src/element.rs +1 −1
crates/gpui2/src/elements/text.rs +116 −19
crates/gpui2/src/style.rs +13 −1
crates/gpui2/src/styled.rs +7 −0
crates/gpui2/src/text_system.rs +9 −2
crates/gpui2/src/text_system/line.rs +59 −5
crates/gpui2/src/text_system/line_layout.rs +35 −0
crates/gpui2/src/window.rs +1 −2
crates/storybook2/src/stories/text.rs +18 −2
crates/ui2/src/components/label.rs +1 −1

crates/editor2/src/editor.rs+2−0

                 font_weight: FontWeight::NORMAL,
                 font_style: FontStyle::Normal,
                 line_height: relative(1.).into(),
+                background_color: None,
                 underline: None,
                 white_space: WhiteSpace::Normal,
             },
                 font_weight: FontWeight::NORMAL,
                 font_style: FontStyle::Normal,
                 line_height: relative(settings.buffer_line_height.value()),
+                background_color: None,
                 underline: None,
                 white_space: WhiteSpace::Normal,
             },

crates/editor2/src/element.rs+1−1

@@ -2452,7 +2452,7 @@ impl LineWithInvisibles { · 2451 unmodified lines
2452	len: line_chunk.len(),	2452	len: line_chunk.len(),
2453	font: text_style.font(),	2453	font: text_style.font(),
2454	color: text_style.color,	2454	color: text_style.color,
2455	background_color: None,	2455	background_color: text_style.background_color,
2456	underline: text_style.underline,	2456	underline: text_style.underline,
2457	});	2457	});
2458		2458

crates/gpui2/src/elements/text.rs+116−19

@@ -1,11 +1,11 @@
1	use crate::{	1	use crate::{
2	Bounds, Element, ElementId, IntoElement, LayoutId, Pixels, SharedString, Size, TextRun,	2	Bounds, DispatchPhase, Element, ElementId, IntoElement, LayoutId, MouseDownEvent, MouseUpEvent,
3	WhiteSpace, WindowContext, WrappedLine,	3	Pixels, Point, SharedString, Size, TextRun, WhiteSpace, WindowContext, WrappedLine,
4	};	4	};
5	use anyhow::anyhow;	5	use anyhow::anyhow;
6	use parking_lot::{Mutex, MutexGuard};	6	use parking_lot::{Mutex, MutexGuard};
7	use smallvec::SmallVec;	7	use smallvec::SmallVec;
8	use std::{cell::Cell, rc::Rc, sync::Arc};	8	use std::{cell::Cell, ops::Range, rc::Rc, sync::Arc};
9	use util::ResultExt;	9	use util::ResultExt;
10		10
11	impl Element for &'static str {	11	impl Element for &'static str {
@@ -69,23 +69,28 @@ impl IntoElement for SharedString { · 57 unmodified lines
69	}	69	}
70	}	70	}
71		71
		72	/// Renders text with runs of different styles.
		73	///
		74	/// Callers are responsible for setting the correct style for each run.
		75	/// For text with a uniform style, you can usually avoid calling this constructor
		76	/// and just pass text directly.
72	pub struct StyledText {	77	pub struct StyledText {
73	text: SharedString,	78	text: SharedString,
74	runs: Option<Vec<TextRun>>,	79	runs: Option<Vec<TextRun>>,
75	}	80	}
76		81
77	impl StyledText {	82	impl StyledText {
78	/// Renders text with runs of different styles.	83	pub fn new(text: impl Into<SharedString>) -> Self {
79	///
80	/// Callers are responsible for setting the correct style for each run.
81	/// For text with a uniform style, you can usually avoid calling this constructor
82	/// and just pass text directly.
83	pub fn new(text: SharedString, runs: Vec<TextRun>) -> Self {
84	StyledText {	84	StyledText {
85	text,	85	text: text.into(),
86	runs: Some(runs),	86	runs: None,
87	}	87	}
88	}	88	}
		89
		90	pub fn with_runs(mut self, runs: Vec<TextRun>) -> Self {
		91	self.runs = Some(runs);
		92	self
		93	}
89	}	94	}
90		95
91	impl Element for StyledText {	96	impl Element for StyledText {
@@ -226,16 +231,73 @@ impl TextState { · 134 unmodified lines
226	line_origin.y += line.size(line_height).height;	231	line_origin.y += line.size(line_height).height;
227	}	232	}
228	}	233	}
		234
		235	fn index_for_position(&self, bounds: Bounds<Pixels>, position: Point<Pixels>) -> Option<usize> {
		236	if !bounds.contains_point(&position) {
		237	return None;
		238	}
		239
		240	let element_state = self.lock();
		241	let element_state = element_state
		242	.as_ref()
		243	.expect("measurement has not been performed");
		244
		245	let line_height = element_state.line_height;
		246	let mut line_origin = bounds.origin;
		247	for line in &element_state.lines {
		248	let line_bottom = line_origin.y + line.size(line_height).height;
		249	if position.y > line_bottom {
		250	line_origin.y = line_bottom;
		251	} else {
		252	let position_within_line = position - line_origin;
		253	return line.index_for_position(position_within_line, line_height);
		254	}
		255	}
		256
		257	None
		258	}
229	}	259	}
230		260
231	struct InteractiveText {	261	pub struct InteractiveText {
232	element_id: ElementId,	262	element_id: ElementId,
233	text: StyledText,	263	text: StyledText,
		264	click_listener: Option<Box<dyn Fn(InteractiveTextClickEvent, &mut WindowContext<'_>)>>,
234	}	265	}
235		266
236	struct InteractiveTextState {	267	struct InteractiveTextClickEvent {
		268	mouse_down_index: usize,
		269	mouse_up_index: usize,
		270	}
		271
		272	pub struct InteractiveTextState {
237	text_state: TextState,	273	text_state: TextState,
238	clicked_range_ixs: Rc<Cell<SmallVec<[usize; 1]>>>,	274	mouse_down_index: Rc<Cell<Option<usize>>>,
		275	}
		276
		277	impl InteractiveText {
		278	pub fn new(id: impl Into<ElementId>, text: StyledText) -> Self {
		279	Self {
		280	element_id: id.into(),
		281	text,
		282	click_listener: None,
		283	}
		284	}
		285
		286	pub fn on_click(
		287	mut self,
		288	ranges: Vec<Range<usize>>,
		289	listener: impl Fn(usize, &mut WindowContext<'_>) + 'static,
		290	) -> Self {
		291	self.click_listener = Some(Box::new(move \|event, cx\| {
		292	for (range_ix, range) in ranges.iter().enumerate() {
		293	if range.contains(&event.mouse_down_index) && range.contains(&event.mouse_up_index)
		294	{
		295	listener(range_ix, cx);
		296	}
		297	}
		298	}));
		299	self
		300	}
239	}	301	}
240		302
241	impl Element for InteractiveText {	303	impl Element for InteractiveText {
@@ -247,27 +309,62 @@ impl Element for InteractiveText { · 5 unmodified lines
247	cx: &mut WindowContext,	309	cx: &mut WindowContext,
248	) -> (LayoutId, Self::State) {	310	) -> (LayoutId, Self::State) {
249	if let Some(InteractiveTextState {	311	if let Some(InteractiveTextState {
250	text_state,	312	mouse_down_index, ..
251	clicked_range_ixs,
252	}) = state	313	}) = state
253	{	314	{
254	let (layout_id, text_state) = self.text.layout(Some(text_state), cx);	315	let (layout_id, text_state) = self.text.layout(None, cx);
255	let element_state = InteractiveTextState {	316	let element_state = InteractiveTextState {
256	text_state,	317	text_state,
257	clicked_range_ixs,	318	mouse_down_index,
258	};	319	};
259	(layout_id, element_state)	320	(layout_id, element_state)
260	} else {	321	} else {
261	let (layout_id, text_state) = self.text.layout(None, cx);	322	let (layout_id, text_state) = self.text.layout(None, cx);
262	let element_state = InteractiveTextState {	323	let element_state = InteractiveTextState {
263	text_state,	324	text_state,
264	clicked_range_ixs: Rc::default(),	325	mouse_down_index: Rc::default(),
265	};	326	};
266	(layout_id, element_state)	327	(layout_id, element_state)
267	}	328	}
268	}	329	}
269		330
270	fn paint(self, bounds: Bounds<Pixels>, state: &mut Self::State, cx: &mut WindowContext) {	331	fn paint(self, bounds: Bounds<Pixels>, state: &mut Self::State, cx: &mut WindowContext) {
		332	if let Some(click_listener) = self.click_listener {
		333	let text_state = state.text_state.clone();
		334	let mouse_down = state.mouse_down_index.clone();
		335	if let Some(mouse_down_index) = mouse_down.get() {
		336	cx.on_mouse_event(move \|event: &MouseUpEvent, phase, cx\| {
		337	if phase == DispatchPhase::Bubble {
		338	if let Some(mouse_up_index) =
		339	text_state.index_for_position(bounds, event.position)
		340	{
		341	click_listener(
		342	InteractiveTextClickEvent {
		343	mouse_down_index,
		344	mouse_up_index,
		345	},
		346	cx,
		347	)
		348	}
		349
		350	mouse_down.take();
		351	cx.notify();
		352	}
		353	});
		354	} else {
		355	cx.on_mouse_event(move \|event: &MouseDownEvent, phase, cx\| {
		356	if phase == DispatchPhase::Bubble {
		357	if let Some(mouse_down_index) =
		358	text_state.index_for_position(bounds, event.position)
		359	{
		360	mouse_down.set(Some(mouse_down_index));
		361	cx.notify();
		362	}
		363	}
		364	});
		365	}
		366	}
		367
271	self.text.paint(bounds, &mut state.text_state, cx)	368	self.text.paint(bounds, &mut state.text_state, cx)
272	}	369	}
273	}	370	}

crates/gpui2/src/style.rs+13−1

     pub line_height: DefiniteLength,
     pub font_weight: FontWeight,
     pub font_style: FontStyle,
+    pub background_color: Option<Hsla>,
     pub underline: Option<UnderlineStyle>,
     pub white_space: WhiteSpace,
 }
             line_height: phi(),
             font_weight: FontWeight::default(),
             font_style: FontStyle::default(),
+            background_color: None,
             underline: None,
             white_space: WhiteSpace::Normal,
         }
             self.color.fade_out(factor);
         }
+        if let Some(background_color) = style.background_color {
+            self.background_color = Some(background_color);
+        }
         if let Some(underline) = style.underline {
             self.underline = Some(underline);
         }
                 style: self.font_style,
             },
             color: self.color,
-            background_color: None,
+            background_color: self.background_color,
             underline: self.underline.clone(),
         }
     }
     pub color: Option<Hsla>,
     pub font_weight: Option<FontWeight>,
     pub font_style: Option<FontStyle>,
+    pub background_color: Option<Hsla>,
     pub underline: Option<UnderlineStyle>,
     pub fade_out: Option<f32>,
 }
             color: Some(other.color),
             font_weight: Some(other.font_weight),
             font_style: Some(other.font_style),
+            background_color: other.background_color,
             underline: other.underline.clone(),
             fade_out: None,
         }
             self.font_style = other.font_style;
         }
+        if other.background_color.is_some() {
+            self.background_color = other.background_color;
+        }
         if other.underline.is_some() {
             self.underline = other.underline;
         }

crates/gpui2/src/styled.rs+7−0

@@ -361,6 +361,13 @@ pub trait Styled: Sized { · 360 unmodified lines
361	self	361	self
362	}	362	}
363		363
		364	fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
		365	self.text_style()
		366	.get_or_insert_with(Default::default)
		367	.background_color = Some(bg.into());
		368	self
		369	}
		370
364	fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {	371	fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
365	self.text_style()	372	self.text_style()
366	.get_or_insert_with(Default::default)	373	.get_or_insert_with(Default::default)

crates/gpui2/src/text_system.rs+9−2

         let mut decoration_runs = SmallVec::<[DecorationRun; 32]>::new();
         for run in runs {
             if let Some(last_run) = decoration_runs.last_mut() {
-                if last_run.color == run.color && last_run.underline == run.underline {
+                if last_run.color == run.color
+                    && last_run.underline == run.underline
+                    && last_run.background_color == run.background_color
+                {
                     last_run.len += run.len as u32;
                     continue;
                 }
             decoration_runs.push(DecorationRun {
                 len: run.len as u32,
                 color: run.color,
+                background_color: run.background_color,
                 underline: run.underline.clone(),
             });
         }
                 }
                 if decoration_runs.last().map_or(false, |last_run| {
-                    last_run.color == run.color && last_run.underline == run.underline
+                    last_run.color == run.color
+                        && last_run.underline == run.underline
+                        && last_run.background_color == run.background_color
                 }) {
                     decoration_runs.last_mut().unwrap().len += run_len_within_line as u32;
                 } else {
                     decoration_runs.push(DecorationRun {
                         len: run_len_within_line as u32,
                         color: run.color,
+                        background_color: run.background_color,
                         underline: run.underline.clone(),
                     });
                 }

crates/gpui2/src/text_system/line.rs+59−5

 use crate::{
-    black, point, px, BorrowWindow, Bounds, Hsla, LineLayout, Pixels, Point, Result, SharedString,
+    black, point, px, size, transparent_black, BorrowWindow, Bounds, Corners, Edges, Hsla,
-    UnderlineStyle, WindowContext, WrapBoundary, WrappedLineLayout,
+    LineLayout, Pixels, Point, Result, SharedString, UnderlineStyle, WindowContext, WrapBoundary,
+    WrappedLineLayout,
 };
 use derive_more::{Deref, DerefMut};
 use smallvec::SmallVec;
 pub struct DecorationRun {
     pub len: u32,
     pub color: Hsla,
+    pub background_color: Option<Hsla>,
     pub underline: Option<UnderlineStyle>,
 }
     let mut run_end = 0;
     let mut color = black();
     let mut current_underline: Option<(Point<Pixels>, UnderlineStyle)> = None;
+    let mut current_background: Option<(Point<Pixels>, Hsla)> = None;
     let text_system = cx.text_system().clone();
     let mut glyph_origin = origin;
     let mut prev_glyph_position = Point::default();
             if wraps.peek() == Some(&&WrapBoundary { run_ix, glyph_ix }) {
                 wraps.next();
+                if let Some((background_origin, background_color)) = current_background.take() {
+                    cx.paint_quad(
+                        Bounds {
+                            origin: background_origin,
+                            size: size(glyph_origin.x - background_origin.x, line_height),
+                        },
+                        Corners::default(),
+                        background_color,
+                        Edges::default(),
+                        transparent_black(),
+                    );
+                }
                 if let Some((underline_origin, underline_style)) = current_underline.take() {
                     cx.paint_underline(
                         underline_origin,
                         glyph_origin.x - underline_origin.x,
                         &underline_style,
-                    )?;
+                    );
                 }
                 glyph_origin.x = origin.x;
             }
             prev_glyph_position = glyph.position;
+            let mut finished_background: Option<(Point<Pixels>, Hsla)> = None;
             let mut finished_underline: Option<(Point<Pixels>, UnderlineStyle)> = None;
             if glyph.index >= run_end {
                 if let Some(style_run) = decoration_runs.next() {
+                    if let Some((_, background_color)) = &mut current_background {
+                        if style_run.background_color.as_ref() != Some(background_color) {
+                            finished_background = current_background.take();
+                        }
+                    }
+                    if let Some(run_background) = style_run.background_color {
+                        current_background
+                            .get_or_insert((point(glyph_origin.x, origin.y), run_background));
+                    }
                     if let Some((_, underline_style)) = &mut current_underline {
                         if style_run.underline.as_ref() != Some(underline_style) {
                             finished_underline = current_underline.take();
                     color = style_run.color;
                 } else {
                     run_end = layout.len;
+                    finished_background = current_background.take();
                     finished_underline = current_underline.take();
                 }
             }
+            if let Some((background_origin, background_color)) = finished_background {
+                cx.paint_quad(
+                    Bounds {
+                        origin: background_origin,
+                        size: size(glyph_origin.x - background_origin.x, line_height),
+                    },
+                    Corners::default(),
+                    background_color,
+                    Edges::default(),
+                    transparent_black(),
+                );
+            }
             if let Some((underline_origin, underline_style)) = finished_underline {
                 cx.paint_underline(
                     underline_origin,
                     glyph_origin.x - underline_origin.x,
                     &underline_style,
-                )?;
+                );
             }
             let max_glyph_bounds = Bounds {
         }
     }
+    if let Some((background_origin, background_color)) = current_background.take() {
+        let line_end_x = origin.x + wrap_width.unwrap_or(Pixels::MAX).min(layout.width);
+        cx.paint_quad(
+            Bounds {
+                origin: background_origin,
+                size: size(line_end_x - background_origin.x, line_height),
+            },
+            Corners::default(),
+            background_color,
+            Edges::default(),
+            transparent_black(),
+        );
+    }
     if let Some((underline_start, underline_style)) = current_underline.take() {
         let line_end_x = origin.x + wrap_width.unwrap_or(Pixels::MAX).min(layout.width);
         cx.paint_underline(
             underline_start,
             line_end_x - underline_start.x,
             &underline_style,
-        )?;
+        );
     }
     Ok(())

crates/gpui2/src/text_system/line_layout.rs+35−0

@@ -198,6 +198,41 @@ impl WrappedLineLayout { · 197 unmodified lines
198	pub fn runs(&self) -> &[ShapedRun] {	198	pub fn runs(&self) -> &[ShapedRun] {
199	&self.unwrapped_layout.runs	199	&self.unwrapped_layout.runs
200	}	200	}
		201
		202	pub fn index_for_position(
		203	&self,
		204	position: Point<Pixels>,
		205	line_height: Pixels,
		206	) -> Option<usize> {
		207	let wrapped_line_ix = (position.y / line_height) as usize;
		208
		209	let wrapped_line_start_x = if wrapped_line_ix > 0 {
		210	let wrap_boundary_ix = wrapped_line_ix - 1;
		211	let wrap_boundary = self.wrap_boundaries[wrap_boundary_ix];
		212	let run = &self.unwrapped_layout.runs[wrap_boundary.run_ix];
		213	run.glyphs[wrap_boundary.glyph_ix].position.x
		214	} else {
		215	Pixels::ZERO
		216	};
		217
		218	let wrapped_line_end_x = if wrapped_line_ix < self.wrap_boundaries.len() {
		219	let next_wrap_boundary_ix = wrapped_line_ix;
		220	let next_wrap_boundary = self.wrap_boundaries[next_wrap_boundary_ix];
		221	let run = &self.unwrapped_layout.runs[next_wrap_boundary.run_ix];
		222	run.glyphs[next_wrap_boundary.glyph_ix].position.x
		223	} else {
		224	self.unwrapped_layout.width
		225	};
		226
		227	let mut position_in_unwrapped_line = position;
		228	position_in_unwrapped_line.x += wrapped_line_start_x;
		229	if position_in_unwrapped_line.x > wrapped_line_end_x {
		230	None
		231	} else {
		232	self.unwrapped_layout
		233	.index_for_x(position_in_unwrapped_line.x)
		234	}
		235	}
201	}	236	}
202		237
203	pub(crate) struct LineLayoutCache {	238	pub(crate) struct LineLayoutCache {

crates/gpui2/src/window.rs+1−2

         origin: Point<Pixels>,
         width: Pixels,
         style: &UnderlineStyle,
-    ) -> Result<()> {
+    ) {
         let scale_factor = self.scale_factor();
         let height = if style.wavy {
             style.thickness * 3.
                 wavy: style.wavy,
             },
         );
-        Ok(())
     }
     /// Paint a monochrome (non-emoji) glyph into the scene for the current frame at the current z-index.

crates/storybook2/src/stories/text.rs+18−2

@@ -1,5 +1,6 @@
1	use gpui::{	1	use gpui::{
2	blue, div, red, white, Div, ParentElement, Render, Styled, View, VisualContext, WindowContext,	2	blue, div, green, red, white, Div, InteractiveText, ParentElement, Render, Styled, StyledText,
		3	TextRun, View, VisualContext, WindowContext,
3	};	4	};
4	use ui::v_stack;	5	use ui::v_stack;
5		6
@@ -55,6 +56,21 @@ impl Render for TextStory { · 49 unmodified lines
55	"flex-row. width 96. The quick brown fox jumps over the lazy dog. ",	56	"flex-row. width 96. The quick brown fox jumps over the lazy dog. ",
56	"Meanwhile, the lazy dog decided it was time for a change. ",	57	"Meanwhile, the lazy dog decided it was time for a change. ",
57	"He started daily workout routines, ate healthier and became the fastest dog in town.",	58	"He started daily workout routines, ate healthier and became the fastest dog in town.",
58	)))	59	))).child(
		60	InteractiveText::new(
		61	"interactive",
		62	StyledText::new("Hello world, how is it going?").with_runs(vec![
		63	cx.text_style().to_run(6),
		64	TextRun {
		65	background_color: Some(green()),
		66	..cx.text_style().to_run(5)
		67	},
		68	cx.text_style().to_run(18),
		69	]),
		70	)
		71	.on_click(vec![2..4, 1..3, 7..9], \|range_ix, cx\| {
		72	println!("Clicked range {range_ix}");
		73	})
		74	)
59	}	75	}
60	}	76	}

crates/ui2/src/components/label.rs+1−1

@@ -150,7 +150,7 @@ impl RenderOnce for HighlightedLabel { · 149 unmodified lines
150	LabelSize::Default => this.text_ui(),	150	LabelSize::Default => this.text_ui(),
151	LabelSize::Small => this.text_ui_sm(),	151	LabelSize::Small => this.text_ui_sm(),
152	})	152	})
153	.child(StyledText::new(self.label, runs))	153	.child(StyledText::new(self.label).with_runs(runs))
154	}	154	}
155	}	155	}
156		156

Introduce `InteractiveText` (#3397)

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code