Resizing visualizations

app/gui/view/component-browser/src/lib.rs

@@ -71,7 +71,7 @@ impl component::Model for Model {
         let scene = &app.display.default_scene;
         shapes_order_dependencies! {
             scene => {
-                component_list_panel::background -> documentation::overlay;
+                component_list_panel::background -> display::shape::compound::rectangle::shape;
             }
         }
 

app/gui/view/documentation/src/lib.rs

@@ -19,6 +19,7 @@
 #![warn(unused_import_braces)]
 #![warn(unused_qualifications)]
 
+use ensogl::display::shape::*;
 use ensogl::prelude::*;
 use ensogl::system::web::traits::*;
 
@@ -31,7 +32,6 @@ use ensogl::data::color;
 use ensogl::display;
 use ensogl::display::scene::Scene;
 use ensogl::display::shape::primitive::StyleWatch;
-use ensogl::display::shape::StyleWatchFrp;
 use ensogl::display::DomSymbol;
 use ensogl::system::web;
 use ensogl::Animation;
@@ -48,8 +48,6 @@ use ide_view_graph_editor as graph_editor;
 
 pub mod html;
 
-pub use visualization::container::overlay;
-
 
 
 // =================
@@ -91,7 +89,7 @@ pub struct Model {
     inner_dom:      DomSymbol,
     /// The purpose of this overlay is stop propagating mouse events under the documentation panel
     /// to EnsoGL shapes, and pass them to the DOM instead.
-    overlay:        overlay::View,
+    overlay:        Rectangle,
     display_object: display::object::Instance,
     event_handlers: Rc<RefCell<Vec<web::EventListenerHandle>>>,
 }
@@ -104,7 +102,9 @@ impl Model {
         let outer_dom = DomSymbol::new(&outer_div);
         let inner_div = web::document.create_div_or_panic();
         let inner_dom = DomSymbol::new(&inner_div);
-        let overlay = overlay::View::new();
+        let overlay = Rectangle::new().build(|r| {
+            r.set_color(INVISIBLE_HOVER_COLOR);
+        });
         let caption_div = web::document.create_div_or_panic();
         let caption_dom = DomSymbol::new(&caption_div);
         caption_dom.set_inner_html(&html::caption_html());
@@ -125,7 +125,6 @@ impl Model {
         inner_dom.dom().set_style_or_warn("overflow-x", "auto");
         inner_dom.dom().set_style_or_warn("pointer-events", "auto");
 
-        overlay.roundness.set(1.0);
         display_object.add_child(&outer_dom);
         outer_dom.add_child(&caption_dom);
         outer_dom.add_child(&inner_dom);
@@ -161,6 +160,7 @@ impl Model {
     /// Set size of the documentation view.
     fn set_size(&self, size: Vector2) {
         self.overlay.set_size(size);
+        self.overlay.set_xy(Vector2(-size.x / 2.0, -size.y / 2.0));
         self.outer_dom.set_dom_size(Vector2(size.x, size.y));
     }
 
@@ -204,7 +204,7 @@ impl Model {
 
     fn update_style(&self, style: Style) {
         self.set_size(Vector2(style.width, style.height));
-        self.overlay.radius.set(style.corner_radius);
+        self.overlay.set_corner_radius(style.corner_radius);
         self.outer_dom.set_style_or_warn("border-radius", format!("{}px", style.corner_radius));
         self.inner_dom.set_style_or_warn("border-radius", format!("{}px", style.corner_radius));
         let bg_color = style.background.to_javascript_string();

app/gui/view/graph-editor/src/component/node.rs

@@ -73,7 +73,7 @@ pub const COMMENT_MARGIN: f32 = 10.0;
 const INFINITE: f32 = 99999.0;
 const ERROR_VISUALIZATION_SIZE: (f32, f32) = visualization::container::DEFAULT_SIZE;
 
-const VISUALIZATION_OFFSET_Y: f32 = -120.0;
+const VISUALIZATION_OFFSET_Y: f32 = -20.0;
 
 const ENABLE_VIS_PREVIEW: bool = false;
 const VIS_PREVIEW_ONSET_MS: f32 = 4000.0;
@@ -545,9 +545,10 @@ impl NodeModel {
             .set_x(x_offset_to_node_center + width / 2.0 + CORNER_RADIUS + action_bar_width / 2.0);
         self.action_bar.frp.set_size(Vector2::new(action_bar_width, ACTION_BAR_HEIGHT));
 
-        let visualization_offset = visualization_offset(width);
+        let visualization_offset = visualization_offset();
         self.error_visualization.set_xy(visualization_offset);
         self.visualization.set_xy(visualization_offset);
+        self.visualization.frp.set_width(width);
 
         size
     }
@@ -950,8 +951,8 @@ fn x_offset_to_node_center(node_width: f32) -> f32 {
 
 /// Calculate a position where to render the [`visualization::Container`] of a node, relative to
 /// the node's origin.
-fn visualization_offset(node_width: f32) -> Vector2 {
-    Vector2(x_offset_to_node_center(node_width), VISUALIZATION_OFFSET_Y)
+fn visualization_offset() -> Vector2 {
+    Vector2(0.0, VISUALIZATION_OFFSET_Y)
 }
 
 #[profile(Debug)]
@@ -964,7 +965,7 @@ fn bounding_box(
     let node_bbox_pos = node_position + Vector2(x_offset_to_node_center, 0.0) - node_size / 2.0;
     let node_bbox = BoundingBox::from_position_and_size(node_bbox_pos, node_size);
     if let Some(visualization_size) = visualization_size {
-        let visualization_offset = visualization_offset(node_size.x);
+        let visualization_offset = visualization_offset();
         let visualization_pos = node_position + visualization_offset;
         let visualization_bbox_pos = visualization_pos - visualization_size / 2.0;
         let visualization_bbox =