Explaining the context menu and dropdown algorithm

Tu support context menus, dropdowns, and tooltip, we implemented BlSteppedLayout BlNodeBasedLayout subclass: #BlSteppedLayout instanceVariableNames: 'anchorBounds handle areaBuilders suboptimalAreaFinder analyzer' 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 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 what are 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 fixed size (150.0@300.0) and also fits on the screen. It's relative bounds to the previous menu element is (0@50) corner: (150@100), indicating to which part of the first menu element it want to be placed.

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