diff --git a/CHANGELOG.md b/CHANGELOG.md index c14c4f022487..fb46543de6fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -138,6 +138,9 @@ sending messages to the backend][6341]. - [List Editor Widget][6470]. Now you can edit lists by clicking buttons on nodes or by dragging the elements. +- [Fixed text visualisations which were being cut off at the last line.][6421] + +[6421]: https://github.com/enso-org/enso/pull/6421 #### EnsoGL (rendering engine) diff --git a/app/gui/view/examples/text-grid-visualization/src/lib.rs b/app/gui/view/examples/text-grid-visualization/src/lib.rs index cfc8c4f4ce10..f5f0494e016f 100644 --- a/app/gui/view/examples/text-grid-visualization/src/lib.rs +++ b/app/gui/view/examples/text-grid-visualization/src/lib.rs @@ -16,8 +16,6 @@ use ensogl::prelude::*; -use crate::text_visualization::TextGrid; - use ensogl::animation; use ensogl::application::Application; use ensogl::display::navigation::navigator::Navigator; @@ -25,8 +23,8 @@ use ensogl::system::web; use ensogl::system::web::traits::DocumentOps; use ensogl::system::web::traits::ElementOps; use ensogl_text_msdf::run_once_initialized; -use ide_view::graph_editor::builtin::visualization::native::text_visualization; use ide_view::graph_editor::builtin::visualization::native::text_visualization::text_provider; +use ide_view::graph_editor::builtin::visualization::native::text_visualization::TextGrid; diff --git a/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization.rs b/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization.rs index ac8ce22dd457..f99e2fd92cb1 100644 --- a/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization.rs +++ b/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization.rs @@ -61,7 +61,7 @@ const CHARS_PER_CHUNK: usize = 20; /// loaded in each direction around the visible grid. So a value of 5 with a base grid of 20x10 will /// load 25x15 grid. const CACHE_PADDING: u32 = 15; -const PADDING_TEXT: f32 = 5.0; +const PADDING_TEXT: f32 = 10.0; @@ -325,7 +325,7 @@ impl TextGrid { frp::extend! { network - scroll_positition <- all(&scrollbar_h.thumb_position, &scrollbar_v.thumb_position); + scroll_position <- all(&scrollbar_h.thumb_position, &scrollbar_v.thumb_position); longest_line_with_init <- all(&init, &text_provider.longest_line)._1(); lines_with_init <- all(&init, &text_provider.line_count)._1(); @@ -350,6 +350,12 @@ impl TextGrid { text_grid_content_size_y <- text_grid.content_size.map(|size| size.y).on_change(); text_grid_content_size_y_previous <- text_grid_content_size_y.previous(); + scrollbar_h.set_max <+ text_grid_content_size_x; + scrollbar_v.set_max <+ text_grid_content_size_y; + + scrollbar_h.set_thumb_size <+ frp.set_size.map(|size| size.x - 2.0 * PADDING_TEXT); + scrollbar_v.set_thumb_size <+ frp.set_size.map(|size| size.y - 2.0 * PADDING_TEXT); + horizontal_scrollbar_change_args <- all( text_grid_content_size_x, text_grid_content_size_x_previous, @@ -373,34 +379,20 @@ impl TextGrid { thumb_position * content_size_y_previous / content_size_y }); - size_update <- all(&frp.set_size, &text_grid.content_size); - scrollbar_sizes <- size_update.map(|(vis_size, content_size)| { - vis_size.iter().zip(content_size.iter()).map(|(vis_size, content_size)| { - if *content_size > 0.0 { - (vis_size / content_size).clamp(0.0,1.0) - } else { - 0.0 - } - }).collect_tuple::<(f32,f32)>() - }).unwrap(); - scrollbar_h.set_thumb_size <+ scrollbar_sizes._0(); - scrollbar_v.set_thumb_size <+ scrollbar_sizes._1(); - - viewport <- all_with4( + viewport <- all_with3( &init, - &scroll_positition, + &scroll_position, &frp.set_size, - &text_grid.content_size, - f!([dom_entry_root](_, scroll_position, vis_size, content_size) { + f!([dom_entry_root] (_, scroll_position, vis_size) { let (scroll_x, scroll_y) = *scroll_position; - let top = -scroll_y * content_size.y; + let top = -scroll_y; let bottom = top - vis_size.y; - let left = scroll_x * content_size.x; - let right = left + vis_size.x; + let left = scroll_x; + let right = left + vis_size.x; // Set DOM element size. - dom_entry_root.set_style_or_warn("top", format!("{}px", top + PADDING_TEXT)); - dom_entry_root.set_style_or_warn("left", format!("{}px", -left + PADDING_TEXT)); + dom_entry_root.set_style_or_warn("top", format!("{top}px")); + dom_entry_root.set_style_or_warn("left", format!("{}px", -left)); // Output viewport. let viewport = grid_view::Viewport {top, bottom, left, right}; diff --git a/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization/grid_view_entry.rs b/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization/grid_view_entry.rs index 61c7078baedc..f1d1a80591d4 100644 --- a/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization/grid_view_entry.rs +++ b/app/gui/view/graph-editor/src/builtin/visualization/native/text_visualization/grid_view_entry.rs @@ -77,6 +77,11 @@ impl Entry { let mut style = "position: absolute; white-space: pre; pointer-events: auto;".to_string(); write!(style, "left: {left}px; top: {top}px;").ok(); write!(style, "width: {width}px; height: {height}px;").ok(); + // The default line height in browsers is 1.2, which is great for multi-line text and + // elements whose height is greater than the line height. In this case, however, where the + // height and the font size are set to the same value, the default setting of 1.2 pushes + // the text below the allotted space. + write!(style, "line-height: 1").ok(); self.text.set_attribute_or_warn("style", style); }