Component Group View with static header and without icons

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 #### Visual Environment
 
+- [Long names on the Node Searcher's list are truncated.][3373] The part of the
+  name that doesn't fit in the Searcher's window is replaced with an ellipsis
+  character ("…").
 - [Magnet Alignment algorithm is used while placing new nodes][3366]. When we
   find an available free space for a new node, the node gets aligned with the
   surrounding nodes horizontally and vertically. This helps to preserve a nice
@@ -145,6 +148,7 @@
 [3349]: https://github.com/enso-org/enso/pull/3349
 [3361]: https://github.com/enso-org/enso/pull/3361
 [3364]: https://github.com/enso-org/enso/pull/3364
+[3373]: https://github.com/enso-org/enso/pull/3373
 [3377]: https://github.com/enso-org/enso/pull/3377
 [3366]: https://github.com/enso-org/enso/pull/3366
 [3379]: https://github.com/enso-org/enso/pull/3379

app/gui/view/component-browser/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "ide-view-component-browser"
+version = "0.1.0"
+authors = ["Enso Team <[email protected]>"]
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+ide-view-component-group = { path = "component-group-view" }

app/gui/view/component-browser/component-group-view/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "ide-view-component-group"
+version = "0.1.0"
+authors = ["Enso Team <[email protected]>"]
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+enso-frp = { version = "0.1.0", path = "../../../../../lib/rust/frp" }
+ensogl-core = { version = "0.1.0", path = "../../../../../lib/rust/ensogl/core" }
+ensogl-gui-component = { version = "0.1.0", path = "../../../../../lib/rust/ensogl/component/gui" }
+ensogl-hardcoded-theme = { version = "0.1.0", path = "../../../../../lib/rust/ensogl/app/theme/hardcoded" }
+ensogl-list-view = { version = "0.1.0", path = "../../../../../lib/rust/ensogl/component/list-view" }
+ensogl-text = { version = "0.1.0", path = "../../../../../lib/rust/ensogl/component/text" }
+

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

@@ -0,0 +1,223 @@
+//! An EnsoGL implementation of a Component Group View.
+//!
+//! A Component Group View is displayed as a header (containing the name of a group of Enso
+//! components) and a list of entries below it (names of the components belonging to that group).
+
+#![recursion_limit = "512"]
+// === Standard Linter Configuration ===
+#![deny(non_ascii_idents)]
+#![warn(unsafe_code)]
+// === Non-Standard Linter Configuration ===
+#![warn(missing_copy_implementations)]
+#![warn(missing_debug_implementations)]
+#![warn(missing_docs)]
+#![warn(trivial_casts)]
+#![warn(trivial_numeric_casts)]
+#![warn(unused_import_braces)]
+#![warn(unused_qualifications)]
+
+use ensogl_core::prelude::*;
+
+use enso_frp as frp;
+use ensogl_core::application::Application;
+use ensogl_core::data::color::Rgba;
+use ensogl_core::display;
+use ensogl_core::display::shape::*;
+use ensogl_gui_component::component;
+use ensogl_gui_component::component::ComponentView;
+use ensogl_hardcoded_theme::application::component_browser::component_group as theme;
+use ensogl_list_view as list_view;
+use ensogl_list_view::entry;
+use ensogl_list_view::ListView;
+use ensogl_text as text;
+
+
+
+// ==========================
+// === Shapes Definitions ===
+// ==========================
+
+
+// === Background ===
+
+/// The background of the Component Group View.
+pub mod background {
+    use super::*;
+
+    ensogl_core::define_shape_system! {
+        below = [list_view::background];
+        (style:Style, color:Vector4) {
+            let sprite_width: Var<Pixels> = "input_size.x".into();
+            let sprite_height: Var<Pixels> = "input_size.y".into();
+            let color = Var::<Rgba>::from(color);
+            let shape = Rect((&sprite_width, &sprite_height)).fill(color);
+            shape.into()
+        }
+    }
+}
+
+
+
+// ===========
+// === FRP ===
+// ===========
+
+ensogl_core::define_endpoints_2! {
+    Input {
+        set_header_text(String),
+        set_entries(entry::AnyModelProvider<entry::Label>),
+        set_background_color(Rgba),
+        set_size(Vector2),
+    }
+    Output {}
+}
+
+impl component::Frp<Model> for Frp {
+    fn init(api: &Self::Private, _app: &Application, model: &Model, style: &StyleWatchFrp) {
+        let network = &api.network;
+        let input = &api.input;
+        let header_text_size = style.get_number(theme::header::text::size);
+        frp::extend! { network
+
+            // === Geometry ===
+
+            let header_geometry = HeaderGeometry::from_style(style, network);
+            size_and_header_geometry <- all(&input.set_size, &header_geometry);
+            eval size_and_header_geometry(((size, hdr_geom)) model.resize(*size, *hdr_geom));
+
+
+            // === Header ===
+
+            init <- source_();
+            header_text_size <- all(&header_text_size, &init)._0();
+            model.header.set_default_text_size <+ header_text_size.map(|v| text::Size(*v));
+            model.header.set_content <+ input.set_header_text;
+            eval input.set_background_color((c)
+                model.background.color.set(c.into()));
+
+
+            // === Entries ===
+
+            model.entries.set_background_color(Rgba(1.0, 1.0, 1.0, 0.0));
+            model.entries.show_background_shadow(false);
+            model.entries.set_background_corners_radius(0.0);
+            model.entries.set_background_color <+ input.set_background_color;
+            model.entries.set_entries <+ input.set_entries;
+        }
+        init.emit(());
+    }
+}
+
+
+
+// =======================
+// === Header Geometry ===
+// =======================
+
+#[derive(Debug, Copy, Clone, Default)]
+struct HeaderGeometry {
+    height:         f32,
+    padding_left:   f32,
+    padding_right:  f32,
+    padding_bottom: f32,
+}
+
+impl HeaderGeometry {
+    fn from_style(style: &StyleWatchFrp, network: &frp::Network) -> frp::Sampler<Self> {
+        let height = style.get_number(theme::header::height);
+        let padding_left = style.get_number(theme::header::padding::left);
+        let padding_right = style.get_number(theme::header::padding::right);
+        let padding_bottom = style.get_number(theme::header::padding::bottom);
+
+        frp::extend! { network
+            init <- source_();
+            theme <- all_with5(&init,&height,&padding_left,&padding_right,&padding_bottom,
+                |_,&height,&padding_left,&padding_right,&padding_bottom|
+                    Self{height,padding_left,padding_right,padding_bottom}
+            );
+            theme_sampler <- theme.sampler();
+        }
+        init.emit(());
+        theme_sampler
+    }
+}
+
+
+
+// =============
+// === Model ===
+// =============
+
+/// The Model of the [`View`] component.
+#[derive(Clone, CloneRef, Debug)]
+pub struct Model {
+    display_object: display::object::Instance,
+    header:         text::Area,
+    background:     background::View,
+    entries:        ListView<entry::Label>,
+}
+
+impl display::Object for Model {
+    fn display_object(&self) -> &display::object::Instance {
+        &self.display_object
+    }
+}
+
+impl component::Model for Model {
+    fn label() -> &'static str {
+        "ComponentGroupView"
+    }
+
+    fn new(app: &Application, logger: &Logger) -> Self {
+        let display_object = display::object::Instance::new(&logger);
+        let background = background::View::new(&logger);
+        let header = text::Area::new(app);
+        let entries = ListView::new(app);
+        display_object.add_child(&background);
+        display_object.add_child(&header);
+        display_object.add_child(&entries);
+
+        header.set_font("DejaVuSans-Bold");
+        let label_layer = &app.display.default_scene.layers.label;
+        header.add_to_scene_layer(label_layer);
+
+        Model { display_object, header, background, entries }
+    }
+}
+
+impl Model {
+    fn resize(&self, size: Vector2, header_geometry: HeaderGeometry) {
+        // === Background ===
+
+        self.background.size.set(size);
+
+
+        // === Header Text ===
+
+        let header_padding_left = header_geometry.padding_left;
+        let header_text_x = -size.x / 2.0 + header_padding_left;
+        let header_text_height = self.header.height.value();
+        let header_padding_bottom = header_geometry.padding_bottom;
+        let header_height = header_geometry.height;
+        let header_bottom_y = size.y / 2.0 - header_height;
+        let header_text_y = header_bottom_y + header_text_height + header_padding_bottom;
+        self.header.set_position_xy(Vector2(header_text_x, header_text_y));
+        let header_padding_right = header_geometry.padding_right;
+        self.header.set_truncation_width(size.x - header_padding_left - header_padding_right);
+
+
+        // === Entries ===
+
+        self.entries.resize(size - Vector2(0.0, header_height));
+        self.entries.set_position_y(-header_height / 2.0);
+    }
+}
+
+
+
+// ============
+// === View ===
+// ============
+
+/// The implementation of the visual component described in the module's documentation.
+pub type View = ComponentView<Model, Frp>;

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

@@ -0,0 +1,20 @@
+#![recursion_limit = "1024"]
+// === Standard Linter Configuration ===
+#![deny(non_ascii_idents)]
+#![warn(unsafe_code)]
+// === Non-Standard Linter Configuration ===
+#![warn(missing_copy_implementations)]
+#![warn(missing_debug_implementations)]
+#![warn(missing_docs)]
+#![warn(trivial_casts)]
+#![warn(trivial_numeric_casts)]
+#![warn(unused_import_braces)]
+#![warn(unused_qualifications)]
+
+
+// ==============
+// === Export ===
+// ==============
+
+pub use ide_view_component_group as component_group_view;
+

app/gui/view/debug_scene/Cargo.toml

@@ -8,5 +8,6 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
+debug-scene-component-group = { path = "component-group" }
 debug-scene-interface = { path = "interface" }
 debug-scene-visualization = { path = "visualization" }

app/gui/view/debug_scene/component-group/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "debug-scene-component-group"
+version = "0.1.0"
+authors = ["Enso Team <[email protected]>"]
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+enso-frp = { path = "../../../../../lib/rust/frp" }
+ensogl-core = { path = "../../../../../lib/rust/ensogl/core" }
+ensogl-hardcoded-theme = { path = "../../../../../lib/rust/ensogl/app/theme/hardcoded" }
+ensogl-list-view = { path = "../../../../../lib/rust/ensogl/component/list-view" }
+ensogl-text-msdf-sys = { path = "../../../../../lib/rust/ensogl/component/text/msdf-sys" }
+ide-view-component-group = { path = "../../component-browser/component-group-view" }
+wasm-bindgen = { version = "0.2.78", features = ["nightly"] }