Explaining the context menu and dropdown algorithm

To support context menus, dropdowns, and tooltip, we implemented BlSteppedLayout BlNodeBasedLayout subclass: #BlSteppedLayout instanceVariableNames: 'anchorBounds handle areaBuilders suboptimalAreaFinder analyzer preferredChildWeight' classVariableNames: '' package: 'Bloc-Layout-Stepped' . This layout is responsible for placing (sub-)context menus next to each other. The following example shows a possible context menu that is opened from the red circle. The blue and green menus have its submenus that are relative to their menu items. You can drag the red circle and menu items to observe how the stepped layout place all three (blue, green, yellow) menu elements.

The layout algorithm steps

Let's explore the previous context menu step by step, considering a screen of (800.0@600.0) extent as represented below. It already knows the anchor bounds in red, which is the place around which the first context menu element should be placed. It also knows the available areas to place the first context menu element. You can mouse hover those gray rectangles to see position and bounds of individual areas.

The first context menu element has fixed size (150.0@300.0) and therefore fits on the screen:

The second context menu element has a fixed size of (150.0@300.0) and also fits on the screen. Its bounds relative to the previous menu element are (0@50) corner: (150@100), indicating to which part of the first menu element it wants to be placed.

Similarly, the third context menu element has a fixed size of (100.0@200.0) and also fits on the screen. Its bounds relative to the previous menu element are (0@50) corner: (200@100), indicating to which part of the second menu element it wants to be placed.