New selection box implementation for component groups #3520

vitvakatu · 2022-06-10T00:14:52Z

Pull Request Description

Task link.
[ci no changelog needed]

This PR implements a new selection box that will replace an old (not really working) one in the component browser. The old selection box wasn't working well with the headers of the component groups, so we were forced to make a much harder implementation.

The new implementation duplicates some visual components and places them in a separate layer. Then, a rectangular mask cuts off everything that is not "selected". This way:

We have more control over what the selected entries should look like.
We can easily support the multi-layer structure of the component groups with headers.
We avoid problems with nested masks that our renderer doesn't support at the moment.

To be more precise, we duplicate the following:

Background of the component group becomes the "fill" of the selection.
Entries text and icons - we can alter them easily.
Header background and header text. By placing them in separate scene layers we ensure correct rendering order.

2022-06-14.20-58-48.mp4

Important Notes

This PR implements the base of our future selection mechanism, selecting entries with a mouse and keyboard still has several issues that will be fixed in the future tasks.
The scrolling behavior will also be improved in future tasks. Right we only restrict the selection box position so that it never leaves the borders of the component group.
I added a new function to add shapes to new layers in a non-exclusive way (we had only add_exclusive) before. I have no idea how we didn't use this feature before even though we mention it a lot in the docs.
The demo scene restricts the position of the selection box for one-column component groups but does not for the wide component group.

Checklist

Please include the following checklist in your PR:

The documentation has been updated if necessary.
All code conforms to the
Scala,
Java,
and
Rust
style guides.
All code has been tested:
- Unit tests have been written where possible.
- If GUI codebase was changed: Enso GUI was tested when built using BOTH
  ./run ide dist and ./run ide watch.

vitvakatu · 2022-06-13T15:34:37Z

@wdanilo

The selection animation is too slow. Please make it 2x faster.
2. Could you show on a video what happens to the selection when you scroll the list so the selection goes out of scope (on both end), please?

Increased its speed by changing spring param (also exposed API to change it for ensogl::Animation)
Updated the screencast. For now, we just don't allow the selection to move beyond the scroll area.

@farmaazon all comments addressed.

farmaazon

One of my comments in the previous PR seems unaddressed: the one about not displaying selected_label when there is no selection layer.

wdanilo · 2022-06-14T10:56:12Z

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

+    fn set_strong_color(&self, color: color::Rgba) {
+        if let Some(shape) = &self.shape {
+            shape.strong_color.set(color.into());
+        }
+    }
+
+    fn set_weak_color(&self, color: color::Rgba) {
+        if let Some(shape) = &self.shape {
+            shape.weak_color.set(color.into());
+        }


"strong" and "weak" color sounds strange. Let's name it "active_color" and "inactive_color" instead.

They are not active or inactive, they are used by icons with multiple colored parts involved. This is described in the docs of icon::Any (this shape variable), I've also added it to the docs of the Colors struct.

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

wdanilo · 2022-06-14T10:59:07Z

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

+//! So instead we duplicate component group entries in a special `selection` scene layer (or
+//! rather, in a multiple scene layers to ensure render ordering) and use [layers masking][mask]
+//! to cut off everything except the selection shape. We duplicate the following:
+//! - Entry text and icon (see [entry][] module).
+//! - A background of the component group [background][].
+//! - (for component groups with header) A background of the header [selection_header_background][].


Please use some grammar-fixing tool. There is a lot of places with missing commas and small grammar issues. Apply to all doc comments, please.

wdanilo · 2022-06-14T10:59:42Z

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

+// === Selection ===
+
+/// A shape of selection box. It is used as a mask to show only specific parts of the selection
+/// layers. See module-level documentation.


See module-level documentation. -> See module-level documentation to learn more.. Please apply to other docs as well.

Funny, I had your variant in the first version of the code, and then I thought it was too long.

wdanilo · 2022-06-14T11:00:45Z

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

+        let params =
+            entry::Params { colors: colors.clone_ref(), selection_layer: default() };


We prefer 2 expressions with 2 variables than one multiline expression. Please, refactor colors to a separate variable, and make it one-liner.

wdanilo · 2022-06-14T11:00:56Z

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

+    pub fn new(logger: &Logger, normal_parent: &Layer, selected_parent: &Layer) -> Self {
+        let normal = LayersInner::new(logger, normal_parent);
+        let selection = LayersInner::new(logger, selected_parent);
+


why this newline?

wdanilo · 2022-06-14T11:01:30Z

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

+            let params =
+                entry::Params { colors: colors.clone_ref(), selection_layer: default() };


multi-line exprs. Please apply to other places in the code.

Done. There are a few places with multiline expressions in the code, but it's impossible to change it without making the code way uglier.

wdanilo · 2022-06-14T11:02:10Z

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

+/// The selection animation is faster than default one because of the increased spring force.
+const SELECTION_ANIMATION_SPRING_FORCE: f32 = 30_000.0;


Leave here a multiplier intead. So if we change the spring force globally thsi will update automatically.

wdanilo · 2022-06-14T11:03:39Z

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

+    /// This is an example code to position the selection box on scene.
+    /// `multiview.selection_position_target` returns a group-local position, so we transform it
+    /// to global one and then restrict the y coordinate so that the selection box would not go
+    /// below the scroll area bottom.


It's really hard to read these sentences. Please make them shorter and run them trough a grammar checking tool. Gramarly is cool. If you need pro license, Ola will buy you one.

…nt group

It should fix a spotted bug when selecting entries in the wide component group

vitvakatu · 2022-06-15T12:02:21Z

QA acceptance passed, merging it now.

[Task link](https://www.pivotaltracker.com/story/show/182194574). [ci no changelog needed] This PR implements a new selection box that will replace an old (not really working) one in the component browser. The old selection box wasn't working well with the headers of the component groups, so we were forced to make a much harder implementation. The new implementation duplicates some visual components and places them in a separate layer. Then, a rectangular mask cuts off everything that is not "selected". This way: - We have more control over what the selected entries should look like. - We can easily support the multi-layer structure of the component groups with headers. - We avoid problems with nested masks that our renderer doesn't support at the moment. To be more precise, we duplicate the following: - Background of the component group becomes the "fill" of the selection. - Entries text and icons - we can alter them easily. - Header background and header text. By placing them in separate scene layers we ensure correct rendering order. https://user-images.githubusercontent.com/6566674/173657899-1067f538-4329-44f9-9dc2-78c8a4708b5a.mp4 # Important Notes - This PR implements the base of our future selection mechanism, selecting entries with a mouse and keyboard still has several issues that will be fixed in the future tasks. - The scrolling behavior will also be improved in future tasks. Right we only restrict the selection box position so that it never leaves the borders of the component group. - I added a new function to `add` shapes to new layers in a non-exclusive way (we had only `add_exclusive`) before. I have no idea how we didn't use this feature before even though we mention it a lot in the docs. - The demo scene restricts the position of the selection box for one-column component groups but does not for the wide component group.

vitvakatu added 30 commits April 15, 2022 11:42

Add new wide_component_group module

bc29d23

removing basic component group code

302755f

basic setup of three list views

f280c87

wip: Filtering lists

e76f5d3

implemented ModelProvider

a26719b

implemented "an upside-down" view

7e3440d

reverse list items

be6bbfe

implement "only one selection" restriction

b973363

Add a slider to a demo scene

ac3b8c0

found memory issue with listview

20cb268

Add wide cgv to the demo scene

720ddb7

wip

5b34ff1

Implement resize depending on entries count

56f5059

Add "no items" label

2556d7c

show/hide no items label

b8b0cd7

Move everything to FRP

dfb49ea

Add resizing animation

5d723f8

Trying to optimize demo scene

43a3cf6

Polishing the code

c571485

Make selections nicer

7f455ff

Merge branch 'develop' into wip/vitvakatu/cgv-three-column-181414466

e072790

Self-review

6631641

bump wasm binary size limit

ad87f9e

Merge branch 'develop' into wip/vitvakatu/cgv-three-column-181414466

311b1a7

Merge branch 'develop' into wip/vitvakatu/cgv-three-column-181414466

ef83367

Use new selection abstraction in wide component group

bdd6fe2

Fix items indexing when accepting the selection/suggestion

8fbcf1e

Use type aliases instead of usize

f96d194

Refactoring

3ed60f6

rustfmt

61b2093

vitvakatu added 4 commits June 13, 2022 15:57

Remove hardcoded selection and selection_mask layers

166bd99

Refactor component_group design scene

57c25d3

Merge branch 'develop' into wip/vitvakatu/selection-182194574

0599e17

Increase wasm-size-limit

767023c

vitvakatu requested review from 4e6, PabloBuchu and jdunkerley as code owners June 13, 2022 15:21

Remove unneeded linen wrap

7a8e2ae

vitvakatu requested a review from farmaazon June 13, 2022 15:32

farmaazon approved these changes Jun 14, 2022

View reviewed changes

wdanilo approved these changes Jun 14, 2022

View reviewed changes

vitvakatu added 8 commits June 14, 2022 14:52

Fixing style & formatting, addressing review comments

8476eb6

Fix more docs grammar

bed758e

Fix multiline expressions

2100be1

Fix colors according to design doc

269b0b5

Change the size of selection when it covers the header of the compone…

6bea51f

…nt group

Merge branch 'develop' into wip/vitvakatu/selection-182194574

d51e702

Fix enso-formatter and apply it

78414f1

Select entries when mouse enters the list view even without movement

2caba86

It should fix a spotted bug when selecting entries in the wide component group

vitvakatu added the CI: Ready to merge This PR is eligible for automatic merge label Jun 15, 2022

Merge branch 'develop' into wip/vitvakatu/selection-182194574

bbec1cb

MichaelMauderer approved these changes Jun 15, 2022

View reviewed changes

mergify bot merged commit 71b3a9f into develop Jun 15, 2022

mergify bot deleted the wip/vitvakatu/selection-182194574 branch June 15, 2022 14:21

vitvakatu mentioned this pull request Nov 30, 2022

Skip and Freeze macros in IDE #3913

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New selection box implementation for component groups #3520

New selection box implementation for component groups #3520

vitvakatu commented Jun 10, 2022 •

edited

Loading

vitvakatu commented Jun 13, 2022

farmaazon left a comment

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022 •

edited

Loading

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022 •

edited

Loading

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022

wdanilo Jun 14, 2022

vitvakatu Jun 14, 2022

vitvakatu commented Jun 15, 2022

		let params =
		entry::Params { colors: colors.clone_ref(), selection_layer: default() };

		/// The selection animation is faster than default one because of the increased spring force.
		const SELECTION_ANIMATION_SPRING_FORCE: f32 = 30_000.0;

New selection box implementation for component groups #3520

New selection box implementation for component groups #3520

Conversation

vitvakatu commented Jun 10, 2022 • edited Loading

Pull Request Description

Important Notes

Checklist

vitvakatu commented Jun 13, 2022

farmaazon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vitvakatu Jun 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vitvakatu Jun 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vitvakatu commented Jun 15, 2022

vitvakatu commented Jun 10, 2022 •

edited

Loading

vitvakatu Jun 14, 2022 •

edited

Loading

vitvakatu Jun 14, 2022 •

edited

Loading