Grid View with Scrolling (#3588)

**Note**: This PR also contains content of previous Grid View PR. We decided to discard the previous, because this one did some refactoring of old one, and it's not a big addition.

Added a scrollable::GridView component, which just embeds the GridView in ScrollArea. Also, re-worked the idea of text layers.

https://user-images.githubusercontent.com/3919101/179020359-512ee127-c333-4f86-bff5-f1cb4154e03c.mp4

.prettierignore

@@ -33,3 +33,4 @@ enso/
 
 # Popular IDEs
 .idea
+.bsp

CHANGELOG.md

@@ -61,6 +61,10 @@
   component][3385]. Use the <code>set_font</code> and
   <code>set_bold_bytes</code> respectively.
 - [Fixed a text rendering issue in nested sublayer][3486].
+- [Added a new component: Grid View.][3588] It's parametrized by Entry object,
+  display them arranged in a Grid. It does not instantiate all entries, only
+  those visible, and re-use created entries during scrolling thus achieving
+  great performance.
 
 #### Enso Standard Library
 
@@ -253,6 +257,7 @@
 [3573]: https://github.com/enso-org/enso/pull/3573
 [3583]: https://github.com/enso-org/enso/pull/3583
 [3581]: https://github.com/enso-org/enso/pull/3581
+[3588]: https://github.com/enso-org/enso/pull/3588
 
 #### Enso Compiler
 

app/gui/src/controller/searcher.rs

@@ -25,7 +25,6 @@ use flo_stream::Subscriber;
 use parser::Parser;
 
 
-
 // ==============
 // === Export ===
 // ==============

app/gui/view/component-browser/searcher-list-panel/src/lib.rs

@@ -447,7 +447,7 @@ impl Model {
         if let Some(navigator) = self.navigator.borrow().as_ref() {
             navigator.disable()
         } else {
-            tracing::log::warn!(
+            tracing::warn!(
                 "Navigator was not initialised on ComponentBrowserPanel. \
             Scroll events will not be handled correctly."
             )

build-config.yaml

@@ -1,6 +1,6 @@
 # Options intended to be common for all developers.
 
-wasm-size-limit: 5.06 MiB
+wasm-size-limit: 5.13 MiB
 
 required-versions:
   cargo-watch: ^8.1.1

lib/rust/ensogl/component/Cargo.toml

@@ -12,6 +12,7 @@ ensogl-file-browser = { path = "file-browser" }
 ensogl-flame-graph = { path = "flame-graph" }
 ensogl-label = { path = "label" }
 ensogl-list-view = { path = "list-view" }
+ensogl-grid-view = { path = "grid-view" }
 ensogl-scroll-area = { path = "scroll-area" }
 ensogl-scrollbar = { path = "scrollbar" }
 ensogl-selector = { path = "selector" }

lib/rust/ensogl/component/grid-view/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "ensogl-grid-view"
+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-shadow = { path = "../shadow" }
+ensogl-text = { path = "../text" }
+ensogl-scroll-area = { path = "../scroll-area" }
+itertools = "0.10.3"
+
+[dev-dependencies]
+approx = "0.5.1"

lib/rust/ensogl/component/grid-view/src/entry.rs

@@ -0,0 +1,54 @@
+//! A module with an [`Entry`] abstraction for [`crate::GridView`]. `GridView` can be parametrized
+//! by any entry with the specified API.
+
+use crate::prelude::*;
+
+use enso_frp as frp;
+use ensogl_core::application::Application;
+use ensogl_core::display;
+use ensogl_core::display::scene::Layer;
+
+
+
+// ===========
+// === FRP ===
+// ===========
+
+ensogl_core::define_endpoints_2! { <Model: (frp::node::Data), Params: (frp::node::Data)>
+    Input {
+        set_model(Model),
+        set_size(Vector2),
+        set_params(Params),
+    }
+    Output {}
+}
+
+/// FRP Api of a specific Entry.
+pub type EntryFrp<E> = Frp<<E as Entry>::Model, <E as Entry>::Params>;
+
+
+
+// =============
+// === Trait ===
+// =============
+
+/// The abstraction of Entry for [`crate::GridView`].
+///
+/// The entry may be any [`display::Object`] which can provide the [`EntryFRP`] API.
+pub trait Entry: CloneRef + Debug + display::Object + 'static {
+    /// The model of this entry. The entry should be a representation of data from the Model.
+    /// For example, the entry being just a caption can have [`String`] as its model - the text to
+    /// be displayed.
+    type Model: Clone + Debug + Default;
+
+    /// A type parametrizing the various aspects of the entry, independed of the Model (for example
+    /// the text color). The parameters are set in [`crate::GridView`] and shared between all
+    /// entries.
+    type Params: Clone + Debug + Default;
+
+    /// An Entry constructor.
+    fn new(app: &Application, text_layer: &Option<Layer>) -> Self;
+
+    /// FRP endpoints getter.
+    fn frp(&self) -> &EntryFrp<Self>;
+}