enso-org · mergify · Dec 22, 2022 · Nov 24, 2022 · Nov 28, 2022 · Nov 28, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -112,8 +112,11 @@
   steps towards migrating the Cloud Dashboard from the existing React (web-only)
   implementation towards a shared structure that can be used in both the Desktop
   and Web versions of the IDE.
+- [Added a new component: Dropdown][3985]. A list of selectable labeled entries,
+  suitable for single and multi-select scenarios.
 
 [3857]: https://github.com/enso-org/enso/pull/3857
+[3985]: https://github.com/enso-org/enso/pull/3985
 
 #### Enso Standard Library
 

diff --git a/Cargo.lock b/Cargo.lock
@@ -128,7 +128,7 @@ struct Layers {
 impl Layers {
     /// Constructor.
     pub fn new(base_layer: &Layer) -> Self {
-        let mask = Layer::new_with_cam("mask", &base_layer.camera());
+        let mask = base_layer.create_mask_sublayer("mask");
         let main = base_layer.create_sublayer("main");
         let text = main.create_sublayer("text");
         main.set_mask(&mask);

@@ -265,7 +265,7 @@ impl component::Model for Model {
         let enterable_elements = default();
         let colors = default();
         let requested_section_info = default();
-        let base_layer = &app.display.default_scene.layers.node_searcher_text;
+        let base_layer = &app.display.default_scene.layers.node_searcher;
         let grid_layer = base_layer.create_sublayer("grid_layer");
         let selection_layer = base_layer.create_sublayer("selection_layer");
         display_object.add_child(&grid);

@@ -340,7 +340,7 @@ impl Model {
 
                 port_shape.set_x(unit * index as f32);
                 if DEBUG {
-                    port_shape.set_y(DEBUG_PORT_OFFSET)
+                    port_shape.set_y(DEBUG_PORT_OFFSET);
                 }
 
                 if is_header {

@@ -102,8 +102,8 @@ impl Shape {
         let viz = viz::View::new();
 
         let width_padded = size.x + 2.0 * PADDING_X;
-        hover.set_size(Vector2::new(width_padded, hover_height));
-        viz.set_size(Vector2::new(width_padded, size.y));
+        hover.set_size((width_padded, hover_height));
+        viz.set_size((width_padded, size.y));
         hover.set_x(size.x / 2.0);
         viz.set_x(size.x / 2.0);
         viz.color.set(color::Rgba::transparent().into());

diff --git a/build-config.yaml b/build-config.yaml
@@ -1,6 +1,6 @@
 # Options intended to be common for all developers.
 
-wasm-size-limit: 15.20 MiB
+wasm-size-limit: 15.34 MiB
 
 required-versions:
   cargo-watch: ^8.1.1

@@ -7,6 +7,7 @@ edition = "2021"
 [dependencies]
 ensogl-button = { path = "button" }
 ensogl-drop-down-menu = { path = "drop-down-menu" }
+ensogl-drop-down = { path = "drop-down" }
 ensogl-drop-manager = { path = "drop-manager" }
 ensogl-file-browser = { path = "file-browser" }
 ensogl-flame-graph = { path = "flame-graph" }

@@ -0,0 +1,13 @@
+[package]
+name = "ensogl-drop-down"
+version = "0.1.0"
+authors = ["Enso Team <[email protected]>"]
+edition = "2021"
+
+[dependencies]
+enso-frp = { path = "../../../frp" }
+ensogl-core = { path = "../../core" }
+ensogl-hardcoded-theme = { path = "../../app/theme/hardcoded" }
+ensogl-grid-view = { path = "../grid-view" }
+ensogl-text = { path = "../text" }
+ensogl-gui-component = { path = "../gui" }
@@ -0,0 +1,208 @@
+//! A module defining the drop-down specific grid-view [`Entry`].
+
+use ensogl_core::display::shape::*;
+use ensogl_grid_view::prelude::*;
+
+use ensogl_core::application::command::FrpNetworkProvider;
+use ensogl_core::application::frp::API;
+use ensogl_core::application::Application;
+use ensogl_core::data::color;
+use ensogl_core::display;
+use ensogl_core::display::scene::Layer;
+use ensogl_grid_view::entry;
+use ensogl_grid_view::entry::EntryFrp;
+use ensogl_text as text;
+
+
+
+// ===================
+// === EntryParams ===
+// ===================
+
+/// The parameters of [`Dropdown`]` grid entries.
+#[allow(missing_docs)]
+#[derive(Clone, Debug)]
+pub struct EntryParams {
+    pub focus_color:         color::Lcha,
+    pub font:                ImString,
+    pub text_offset:         f32,
+    pub text_size:           text::Size,
+    pub text_color:          color::Lcha,
+    pub selected_text_color: color::Lcha,
+    pub corners_radius:      f32,
+    pub min_width:           f32,
+    pub max_width:           f32,
+}
+
+impl Default for EntryParams {
+    fn default() -> Self {
+        Self {
+            focus_color:         color::Lcha::from(color::Rgba(1.0, 1.0, 1.0, 0.2)),
+            font:                text::font::DEFAULT_FONT.into(),
+            text_offset:         7.0,
+            text_size:           text::Size(12.0),
+            text_color:          color::Lcha::from(color::Rgba(1.0, 1.0, 1.0, 0.7)),
+            selected_text_color: color::Lcha::from(color::Rgba(1.0, 1.0, 1.0, 1.0)),
+            corners_radius:      0.0,
+            min_width:           40.0,
+            max_width:           160.0,
+        }
+    }
+}
+
+
+
+// ==================
+// === EntryModel ===
+// ==================
+
+/// The model of [`SimpleGridView`]`s entries.
+#[allow(missing_docs)]
+#[derive(Clone, CloneRef, Debug, Default)]
+pub struct EntryModel {
+    pub text:     ImString,
+    pub selected: Immutable<bool>,
+}
+
+impl EntryModel {
+    /// Create a new entry model with given text contents.
+    pub fn new(text: ImString, selected: bool) -> Self {
+        Self { text, selected: Immutable(selected) }
+    }
+}
+
+
+
+// =============
+// === Entry ===
+// =============
+
+// === EntryData ===
+
+/// An internal structure of [`Entry`], which may be passed to FRP network.
+#[allow(missing_docs)]
+#[derive(Clone, Debug)]
+pub struct EntryData {
+    display_object: display::object::Instance,
+    label_thin:     text::Text,
+    label_bold:     text::Text,
+}
+
+impl EntryData {
+    fn new(app: &Application, text_layer: Option<&Layer>) -> Self {
+        let display_object = display::object::Instance::new();
+        let label_thin = app.new_view::<ensogl_text::Text>();
+        let label_bold = app.new_view::<ensogl_text::Text>();
+        label_thin.set_long_text_truncation_mode(true);
+        label_bold.set_long_text_truncation_mode(true);
+        label_bold.set_property_default(text::Weight::Bold);
+        display_object.add_child(&label_thin);
+        if let Some(layer) = text_layer {
+            label_thin.add_to_scene_layer(layer);
+            label_bold.add_to_scene_layer(layer);
+        }
+        Self { display_object, label_thin, label_bold }
+    }
+
+    fn update_selected(&self, selected: bool) {
+        if selected {
+            self.display_object.remove_child(&self.label_thin);
+            self.display_object.add_child(&self.label_bold);
+        } else {
+            self.display_object.remove_child(&self.label_bold);
+            self.display_object.add_child(&self.label_thin);
+        }
+    }
+
+    fn update_layout(&self, contour: entry::Contour, text_size: text::Size, text_offset: f32) {
+        let label_pos = Vector2(text_offset - contour.size.x / 2.0, text_size.value / 2.0);
+        self.label_thin.set_xy(label_pos);
+        self.label_bold.set_xy(label_pos);
+    }
+}
+
+
+// === Entry ===
+
+/// A [`SimpleGridView`] entry - a label with background.
+#[derive(Clone, CloneRef, Debug)]
+pub struct Entry {
+    frp:  EntryFrp<Self>,
+    data: Rc<EntryData>,
+}
+
+impl ensogl_grid_view::Entry for Entry {
+    type Model = EntryModel;
+    type Params = EntryParams;
+
+    fn new(app: &Application, text_layer: Option<&Layer>) -> Self {
+        let data = Rc::new(EntryData::new(app, text_layer));
+        let frp = EntryFrp::<Self>::new();
+        let input = &frp.private().input;
+        let out = &frp.private().output;
+        let network = frp.network();
+
+        out.hover_highlight_color.emit(color::Lcha::transparent());
+
+        enso_frp::extend! { network
+            size <- input.set_size.on_change();
+            font <- input.set_params.map(|p| p.font.clone_ref()).on_change();
+            text_offset <- input.set_params.map(|p| p.text_offset).on_change();
+            focus_color <- input.set_params.map(|p| p.focus_color).on_change();
+            text_color <- input.set_params.map(|p| p.text_color).on_change();
+            text_size <- input.set_params.map(|p| p.text_size).on_change();
+            corners_radius <- input.set_params.map(|p| p.corners_radius).on_change();
+            selected_text_color <- input.set_params.map(|p| p.selected_text_color).on_change();
+            max_width <- input.set_params.map(|p| p.max_width).on_change();
+
+            contour <- all_with(&size, &corners_radius, |&size, &corners_radius|
+                entry::Contour { size, corners_radius }
+            );
+            layout <- all(contour, text_size, text_offset);
+            eval layout ((&(c, ts, to)) data.update_layout(c, ts, to));
+            selected <- input.set_model.map(|m| *m.selected);
+            eval selected ((&s) data.update_selected(s));
+
+            text_size <- text_size.ref_into_some();
+            data.label_thin.set_property_default <+ text_size;
+            data.label_bold.set_property_default <+ text_size;
+            data.label_thin.set_property_default <+ text_color.ref_into_some();
+            data.label_bold.set_property_default <+ selected_text_color.ref_into_some();
+            data.label_thin.set_font <+ font;
+            data.label_bold.set_font <+ font;
+
+            desired_entry_width <- data.label_bold.width.map2(&text_offset, |w, offset| w + offset);
+            limited_entry_width <- desired_entry_width.map2(&input.set_params, |width, params| {
+                // Using min/max to avoid a panic in clamp when min_width > max_width. In those
+                // cases, the max value is returned instead.
+                #[allow(clippy::manual_clamp)]
+                width.max(params.min_width).min(params.max_width)
+            });
+            trace limited_entry_width;
+            out.minimum_column_width <+ limited_entry_width;
+
+            view_width <- max_width.map2(&text_offset, |width, offset| Some(width - offset));
+            data.label_thin.set_view_width <+ view_width;
+            data.label_bold.set_view_width <+ view_width;
+
+            content <- input.set_model.map(|m| m.text.clone_ref());;
+            data.label_thin.set_content <+ content;
+            data.label_bold.set_content <+ content;
+
+            out.contour <+ contour;
+            out.highlight_contour <+ contour;
+            out.selection_highlight_color <+ focus_color;
+        }
+        Self { frp, data }
+    }
+
+    fn frp(&self) -> &EntryFrp<Self> {
+        &self.frp
+    }
+}
+
+impl display::Object for Entry {
+    fn display_object(&self) -> &display::object::Instance {
+        &self.data.display_object
+    }
+}