Update breadcrumb bar design

CHANGELOG.md

@@ -39,8 +39,8 @@
 - [Added Heatmap visualization.][1438] Just as Scatter Plot, it supports
   visualizing Table, and vectors.
 - [Added Heatmap visualization.][1438]
-- [Add backgrounds to the project name and status bar][1447]. Both now have a
-  background with drop shadow for better readability.
+- [Add a background to the status bar][1447].
+- [Display breadcrumbs behind nodes and other objects][1471].
 - [Image visualization.][1367]. Visualizations for the Enso Image library. Now
   You can display Image type and string with image encoded in base64. Histogram
   visualization has been adjusted, allowing to display the values of the

src/rust/ensogl/lib/core/src/display/scene.rs

@@ -648,13 +648,13 @@ impl HardcodedLayers {
         tooltip_background.set_camera(layers.main.camera());
         tooltip_text.set_camera(layers.main.camera());
         below_main.set_camera(layers.main.camera());
+        layers.add_layers_order_dependency(&breadcrumbs_background,&breadcrumbs_text);
+        layers.add_layers_order_dependency(&breadcrumbs_text,&viz);
         layers.add_layers_order_dependency(&viz,&below_main);
         layers.add_layers_order_dependency(&below_main,&layers.main);
         layers.add_layers_order_dependency(&layers.main,&cursor);
         layers.add_layers_order_dependency(&cursor,&label);
-        layers.add_layers_order_dependency(&label,&breadcrumbs_background);
-        layers.add_layers_order_dependency(&breadcrumbs_background,&breadcrumbs_text);
-        layers.add_layers_order_dependency(&breadcrumbs_text,&tooltip_background);
+        layers.add_layers_order_dependency(&label,&tooltip_background);
         layers.add_layers_order_dependency(&tooltip_background,&tooltip_text);
         layers.add_layers_order_dependency(&tooltip_text,&viz_fullscreen);
         Self {layers,viz,cursor,label,viz_fullscreen,below_main,breadcrumbs_background,

src/rust/ensogl/lib/theme/src/lib.rs

@@ -295,7 +295,7 @@ define_themes! { [light:0, dark:1]
                 left  = Lcha(0.0,0.0,0.0,0.5) , Lcha(1.0,0.0,0.0,0.5);
                 right = Lcha(0.0,0.0,0.0,0.2) , Lcha(1.0,0.0,0.0,0.2);
             }
-            background = graph_editor::node::background , graph_editor::node::background;
+            background = application::background , application::background;
             background {
                 corner_radius = 8.0 , 8.0;
                 shadow = shadow , shadow;

src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs

@@ -21,7 +21,6 @@ use ensogl::display::shape::*;
 use ensogl::display::style;
 use ensogl::display;
 use ensogl::gui::cursor;
-use ensogl_gui_components::shadow;
 use logger::Logger;
 use std::cmp::Ordering;
 
@@ -34,9 +33,10 @@ use std::cmp::Ordering;
 const GLYPH_WIDTH        : f32 = 7.224_609_4;
 const VERTICAL_MARGIN    : f32 = GLYPH_WIDTH;
 const HORIZONTAL_MARGIN  : f32 = GLYPH_WIDTH;
-const HORIZONTAL_PADDING : f32 = 12.0;
+const BACKGROUND_PADDING : f32 = 8.0;
 const TEXT_SIZE          : f32 = 12.0;
-const HEIGHT             : f32 = VERTICAL_MARGIN
+/// The height of the breadcrumb bar's content. The background may be higher.
+pub const HEIGHT         : f32 = VERTICAL_MARGIN
                                + breadcrumb::VERTICAL_MARGIN
                                + breadcrumb::PADDING
                                + LINE_HEIGHT
@@ -83,11 +83,8 @@ mod background {
 
             let bg_color          = style.get_color(&theme);
             let bg                = shape.fill(bg_color);
-            let shadow_parameters = shadow::parameters_from_style_path(style,theme.sub("shadow"));
-            let shadow            = shadow::from_shape_with_parameters
-                (shape.into(),shadow_parameters);
 
-            (shadow + bg).into()
+            bg.into()
         }
     }
 }
@@ -174,11 +171,16 @@ pub struct BreadcrumbsModel {
     frp_inputs            : FrpInputs,
     current_index         : Rc<Cell<usize>>,
     camera                : Camera2d,
+    /// Describes an empty space on the left of all the content. This space will be covered by the
+    /// background and is intended to make room for windows control buttons.
+    gap_width             : f32,
 }
 
 impl BreadcrumbsModel {
     /// Constructor.
-    pub fn new(app:Application, frp:&Frp) -> Self {
+    /// The `gap_width` describes an empty space on the left of all the content. This space will be
+    /// covered by the background and is intended to make room for windows control buttons.
+    pub fn new(app:Application, frp:&Frp, gap_width:f32) -> Self {
         let scene                 = app.display.scene();
         let project_name          = app.new_view();
         let logger                = Logger::new("Breadcrumbs");
@@ -195,7 +197,7 @@ impl BreadcrumbsModel {
         scene.layers.breadcrumbs_background.add_exclusive(&background);
 
         Self{logger,display_object, root,app,breadcrumbs,project_name,breadcrumbs_container,
-            frp_inputs,current_index,camera,background}.init()
+            frp_inputs,current_index,camera,background,gap_width}.init()
     }
 
     fn init(self) -> Self {
@@ -213,7 +215,8 @@ impl BreadcrumbsModel {
         let camera     = &self.camera;
         let screen     = camera.screen();
         let x_position = -screen.width/2.0;
-        let y_position = screen.height/2.0;
+        // We add half a pixel to the y offset as a quick fix for misaligned text.
+        let y_position = screen.height/2.0 - 0.5;
         self.root.set_position(Vector3(x_position.round(), y_position.round(), 0.0));
     }
 
@@ -224,19 +227,20 @@ impl BreadcrumbsModel {
     fn update_layout(&self) {
         let project_name_width = self.project_name.width.value().round();
 
-        self.project_name.set_position_x(HORIZONTAL_PADDING);
-        self.breadcrumbs_container.set_position_x(HORIZONTAL_PADDING + project_name_width);
+        self.project_name.set_position_x(self.gap_width);
+        self.breadcrumbs_container.set_position_x(self.gap_width + project_name_width);
 
-        let background_width  = HORIZONTAL_PADDING
-                              + project_name_width
-                              + self.breadcrumbs_container_width()
-                              + HORIZONTAL_PADDING;
-        let background_height = HEIGHT;
-        let width_with_shadow = background_width + MAGIC_SHADOW_MARGIN * 2.0;
+        let width              = self.gap_width
+                               + project_name_width
+                               + self.breadcrumbs_container_width();
+        let background_width   = width + 2.0 * BACKGROUND_PADDING;
+        let background_height  =
+            crate::MACOS_TRAFFIC_LIGHTS_CONTENT_HEIGHT + BACKGROUND_PADDING * 2.0;
+        let width_with_shadow  = background_width  + MAGIC_SHADOW_MARGIN * 2.0;
         let height_with_shadow = background_height + MAGIC_SHADOW_MARGIN * 2.0;
         self.background.size.set(Vector2(width_with_shadow,height_with_shadow));
-        self.background.set_position_x(background_width/2.0);
-        self.background.set_position_y(-background_height/2.0);
+        self.background.set_position_x(width/2.0);
+        self.background.set_position_y(-HEIGHT/2.0);
     }
 
     fn get_breadcrumb(&self, index:usize) -> Option<Breadcrumb> {
@@ -408,10 +412,12 @@ pub struct Breadcrumbs {
 
 impl Breadcrumbs {
     /// Constructor.
-    pub fn new(app:Application) -> Self {
+    /// The `gap_width` describes an empty space on the left of all the content. This space will be
+    /// covered by the background and is intended to make room for windows control buttons.
+    pub fn new(app:Application,gap_width:f32) -> Self {
         let scene   = app.display.scene().clone_ref();
         let frp     = Frp::new();
-        let model   = Rc::new(BreadcrumbsModel::new(app,&frp));
+        let model   = Rc::new(BreadcrumbsModel::new(app,&frp,gap_width));
         let network = &frp.network;
 
         // === Breadcrumb selection ===

src/rust/ide/view/graph-editor/src/lib.rs

@@ -79,12 +79,25 @@ pub mod prelude {
 // === Constants ===
 // =================
 
-const SNAP_DISTANCE_THRESHOLD          : f32 = 10.0;
-const VIZ_PREVIEW_MODE_TOGGLE_TIME_MS  : f32 = 300.0;
-const MACOS_TRAFFIC_LIGHTS_CONTENT     : f32 = 52.0;
-const MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET : f32 = 13.0;
-const MACOS_TRAFFIC_LIGHTS_WIDTH       : f32 =
-    MACOS_TRAFFIC_LIGHTS_CONTENT + 2.0 * MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET;
+const SNAP_DISTANCE_THRESHOLD              : f32 = 10.0;
+const VIZ_PREVIEW_MODE_TOGGLE_TIME_MS      : f32 = 300.0;
+const MACOS_TRAFFIC_LIGHTS_CONTENT_WIDTH   : f32 = 52.0;
+const MACOS_TRAFFIC_LIGHTS_CONTENT_HEIGHT  : f32 = 12.0;
+/// Horizontal and vertical offset between traffic lights and window border
+const MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET     : f32 = 13.0;
+const MACOS_TRAFFIC_LIGHTS_VERTICAL_CENTER : f32 =
+    - MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET - MACOS_TRAFFIC_LIGHTS_CONTENT_HEIGHT / 2.0;
+
+fn breadcrumbs_gap_width() -> f32 {
+    let is_macos     = ARGS.platform.map(|p|p.is_macos()) == Some(true);
+    let is_frameless = ARGS.frame == Some(false);
+    if is_macos && is_frameless {
+        MACOS_TRAFFIC_LIGHTS_CONTENT_WIDTH + MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET
+    }
+    else {
+        0.0
+    }
+}
 
 
 
@@ -1256,7 +1269,7 @@ impl GraphEditorModel {
         let vis_registry   = visualization::Registry::with_default_visualizations();
         let visualisations = default();
         let touch_state    = TouchState::new(network,&scene.mouse.frp);
-        let breadcrumbs    = component::Breadcrumbs::new(app.clone_ref());
+        let breadcrumbs    = component::Breadcrumbs::new(app.clone_ref(),breadcrumbs_gap_width());
         let app            = app.clone_ref();
         let frp            = frp.output.clone_ref();
         let navigator      = Navigator::new(&scene,&scene.camera());
@@ -1270,11 +1283,8 @@ impl GraphEditorModel {
 
     fn init(self) -> Self {
         self.add_child(&self.breadcrumbs);
-        let is_macos     = ARGS.platform.map(|p|p.is_macos()) == Some(true);
-        let is_frameless = ARGS.frame == Some(false);
-        let x_offset     = if is_macos && is_frameless { MACOS_TRAFFIC_LIGHTS_WIDTH }
-                           else                        { MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET };
-        let y_offset     = -MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET;
+        let x_offset = MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET;
+        let y_offset = MACOS_TRAFFIC_LIGHTS_VERTICAL_CENTER + component::breadcrumbs::HEIGHT / 2.0;
         self.breadcrumbs.set_position_x(x_offset);
         self.breadcrumbs.set_position_y(y_offset);
         self.scene().add_child(&self.tooltip);