[2023-04-17] GUI Team Demo Day

[wdanilo]

List Editor Implementation

I finished the first visual implementation of List Editor, a list component allowing adding, removing and reordering its items.

Primary and secondary axis

The implementation currently only supports horizontal layout, but it's designed to also support
vertical layout. It uses "primary" and "secondary" to describe the list's axis. The primary axis
is where the items are laid out, while the secondary axis is perpendicular to it.

          ▲                          
secondary │ ╭─────╮ ╭─────╮ ╭─────╮
     axis │ ╰─────╯ ╰─────╯ ╰─────╯
          ┼────────────────────────▶
                primary axis

Reordering items

To initialize item dragging, it must first be dragged along the secondary axis to detach it from
its current position. Then, it can be freely dragged and placed back in the list by dropping it
next to other items.

This behavior is designed so because list items may be interactive widgets, such as sliders,
that need to receive mouse events like horizontal dragging. However, as mouse dragging is not
precise, the following algorithm is implemented:

1. When the mouse is pressed, the press position is stored.
2. When the mouse is moved, the algorithm checks if the mouse primary axis offset is greater
   than [ListEditor::primary_axis_no_drag_threshold]. If it is, the dragging is disabled until
   the mouse is released and all following mouse events are passed to the item.
3. If dragging is not disabled, when the mouse is moved, the algorithm checks if the mouse
   secondary axis offset is greater than [ListEditor::secondary_axis_drag_threshold]. If it is, the
   dragging is initialized and the item starts to follow the mouse.
   The [ListEditor::primary_axis_no_drag_threshold] decays with time after the mouse is pressed
   to provide the user with precise control over the widgets. The decay time is controlled by
   [ListEditor::primary_axis_no_drag_threshold_decay].

To better illustrate this behavior, the following illustration uses the "x" symbol to denote
mouse press position:

ListEditor::primary_axis_no_drag_threshold
               ▶───◀
               ┆   ┆    
╭─────────╮ ╭──┼───┼──╮ ╭─────────╮
│         │ │  ├╌╌╌┼╌╌┼╌┼╌╌╌╌╌╌╌╌╌┼╌╌▼
│         │ │  ┆ x ┆  │ │         │  │ ListEditor::secondary_axis_drag_threshold
│         │ │  └╌╌╌┴╌╌┼╌┼╌╌╌╌╌╌╌╌╌┼╌╌▲
╰─────────╯ ╰─────────╯ ╰─────────╯

Removing items

In order to remove an item, it should be dragged out of the list along the secondary axis by at
least the size of the list along the secondary axis multiplied by
[ListEditor::thrashing_offset_ratio].

            ╭─────────╮
            │         │   
╭─────────╮ │    x    │ ╭─────────╮
│         │ │         │ │         │
│         │ ╰─────────╯╌┼╌╌╌╌╌╌╌╌╌┼╌╌▼ ListEditor::secondary_axis_drag_threshold
│         │             │         │  │ * ListEditor height
╰─────────╯             ╰─────────╯╌╌▲

Demo

Screen.Recording.2023-04-17.at.14.18.38.mov

What's left to be done?

A few points remain to be finished:

1. Investigating why CI build fails. It looks like we've hit a Rust compiler bug and @kazcw is investigating it now.
2. Making insertion button nicer and placing it on the right side of the list.
3. Adding insertion style to mouse - to allow inserting new elements between existing elements.
4. Extending the API with more function.

All the above points should not take more than ~2 days.

[MichaelMauderer]

Last week, I was doing more work on the IDE controller side, namely implementing #6179: adding integration logic for what happens after pressing the Play button.

[Procrat]

Last week, I implemented most of the visual aspects of the play button. Clicking it shows a spinner icon and it's only visible on execution environments that have one or more execution contexts disabled.

play-button.mp4

[farmaazon]

Integrated the List Editor with vector editor widget. So far, adding is supported. The PR will be created once the Wojciech's PR will be merged.

vector-editor-adding-presentation-2023-04-17_15.10.05.mp4

[JaroslavTulach]

Engine+LS Performance

• If cascades 5x slower than case-of due to limit of recursive inlining #5709 - now the speed of if is on par with case
• sort handles incomparable values #5998 (comment)
  • dates sorting faster by 36%
  • objects sorting faster by 64%
• Cleanup SQL versions repo #6232
• Any.== slowed down by gigantic EqualsNode specializations #6191

[vitvakatu]

• Fixed an annoying bug with the DevTools shortcut in Electron: Allow opening dev-tools using keyboard shortcut in Electron #6262
• Small style fix for context switch button: Use red color for context switch button #6266
• Working on read-only mode: Read-only mode for Views #6182

The current state of the read-only mode is on the video:

2023-04-17.18-06-31.mp4

When read-only mode is active, user can't:

• Rename the project
• Edit the nodes
• Edit the code in code editor
• Create or remove nodes
• Enter and leave nodes
• Connect, disconnect, or reconnect nodes

[kazcw]

I'/e been working on layer issues and making use of Rectangle:

• Fixed problems when moving objects between layers caused by insufficient dirty-flag invalidation.
• Added support for per-instance pointer_events_enabled, which will allow broader use of Rectangle.
• Started replacing one-off symbols with Rectangle.

[mwu-tow]

1. Deep linking support for Windows: the PR is ready for the review, works for me locally both on Windows and macOS.
2. Certificate renewal at Sectigo: The certificate has been renewed, today we received the confirmation. I will replace the certificate on the CI servers on Saturday.
3. Updating CI configuration, so the trivial merges are no longer requiring another full rebuild.

[Frizi]

I've been continuing work on widgets in nodes.

• Fixed text label rendering to have the same total length, regardless if text is split into multiple widgets or is in one node.
• Fixed multiple edge drawing issues, mostly related to the dependency on position of ports, which are using layout.
• Mostly implemented edge dragging on widget ports.
• Still finishing few remaining edge-drag-adjacent issues with nodes, mainly related to text color or hover areas.