started MainMenu widget; render border under TabLayout

res/ui/layouts/test.rdl

@@ -1,3 +1,35 @@
+Panel
+    regionAlign: top
+    userCanResize: false
+    heightType: wrapContent
+
+    MainMenu
+        MainMenuItem
+            margin: 2
+            caption: "File"
+
+            ListMenu
+                size: 200, 200
+                isPopup: true
+
+                ListMenuItem caption: "New"
+                ListMenuItem caption: "Open"
+                ListMenuItem caption: "Save"
+
+        MainMenuItem
+            margin: 2
+            caption: "Edit"
+
+            ListMenu
+                isPopup: true
+                widthtype: wrapContent
+                size: 200, 200
+
+                ListMenuItem caption: "Copy"
+                ListMenuItem caption: "Cut"
+                ListMenuItem caption: "Paste"
+                ListMenuItem caption: "Delete"
+
 Panel
     userCanResize: true
     regionAlign: right
@@ -382,3 +414,44 @@ Dialog
             Button caption: "Action 2" margin: 10
             Button caption: "Action 3" margin: 10
             Button caption: "Close dialog" margin: 10 name: "closeDialogButton"
+
+Panel
+    userCanResize: true
+    regionAlign: bottom
+    size: 300, 300
+    finalFocusRegion: true
+    darkSplit: true
+    finalFocus: true
+    background: action
+    minSize: 150, 150
+
+    TabLayout
+        orientation: horizontal
+        height: 21
+        regionAlign: top
+        margin: 5
+
+        TabButton
+            checked: true
+            caption: "Tab 1"
+            width: 100
+
+        TabButton
+            caption: "Tab 2"
+            width: 100
+
+    Panel
+        regionAlign: client
+        size: 500, 200
+        # top: 25
+        # Panel
+        #     userCanResize: true
+        #     regionAlign: left
+        #     size: 300, 300
+        #     caption: "Frames"
+
+        # Panel
+        #     userCanResize: true
+        #     regionAlign: client
+        #     size: 300, 300
+        #     caption: "Variables"

res/ui/themes/light/theme.rdl

@@ -405,6 +405,49 @@ DropListMenu(Button)
         right               : 82, 105, 6, 25
         offsets             : [-2, -2], 4
 
+MainMenuItem(DropListMenu)
+    split                   : 44, 35, 3, 21
+    iconOffsets             : 2, -1
+    iconGaps                : 2
+    textLeftMargin          : 9
+    textRightMargin         : 9
+
+    Leave
+        left                : 55, 180, 5, 21
+        center              : 68, 180, 5, 21
+        right               : 81, 180, 5, 21
+
+        Text
+            offset          : 0, -1
+            color           : 0, 0, 0
+
+    Enter
+        left                : 55, 131, 5, 21
+        center              : 68, 131, 5, 21
+        right               : 81, 131, 5, 21
+
+        Text
+            offset          : 0, -1
+            color           : 0, 0, 0
+
+    Click
+        left                : 55, 131, 5, 21
+        center              : 68, 131, 5, 21
+        right               : 81, 131, 5, 21
+
+        Text
+            offset          : 0, -1
+            color           : 0, 0, 0
+
+    Focus
+        left                : 55, 180, 5, 21
+        center              : 68, 180, 5, 21
+        right               : 81, 180, 5, 21
+        offsets             : [0, 0], 0
+
+TabLayout
+    borderColor             : 0, 0, 0, 10
+
 TabButton(Button)
     split                   : 44, 35, 3, 21
     iconOffsets             : 6, 1

src/rpui/alignment.d

@@ -25,6 +25,25 @@ enum VerticalAlign {
     bottom,
 }
 
+RegionAlign oppositeRegionAlign(in RegionAlign regionAlign) {
+    switch (regionAlign) {
+        case RegionAlign.top:
+            return RegionAlign.bottom;
+
+        case RegionAlign.bottom:
+            return RegionAlign.top;
+
+        case RegionAlign.left:
+            return RegionAlign.right;
+
+        case RegionAlign.right:
+            return RegionAlign.left;
+
+        default:
+            return regionAlign;
+    }
+}
+
 float alignBox(in Align align_, in float width, in float containerWidth) {
     switch (align_) {
         case Align.center:

src/rpui/rpdl_widget_factory.d

@@ -37,6 +37,8 @@ import rpui.widgets.dialog.widget;
 import rpui.widgets.tree_list.widget;
 import rpui.widgets.tree_list_node.widget;
 import rpui.widgets.canvas.widget;
+import rpui.widgets.main_menu.widget;
+import rpui.widgets.main_menu_item.widget;
 
 /// Factory for construction view from rpdl layout data.
 final class RpdlWidgetFactory {
@@ -135,6 +137,12 @@ final class RpdlWidgetFactory {
             case "Canvas":
                 return createWidget!Canvas(widgetNode, parentWidget);
 
+            case "MainMenu":
+                return createWidget!MainMenu(widgetNode, parentWidget);
+
+            case "MainMenuItem":
+                return createWidget!MainMenuItem(widgetNode, parentWidget);
+
             default:
                 throw new Error("Unspecified widget type " ~ widgetNode.name);
         }

src/rpui/widgets/chain_layout/widget.d

@@ -9,7 +9,7 @@ import rpui.widget;
 import rpui.widgets.stack_layout.stack_locator;
 import rpui.widgets.chain_layout.renderer;
 
-class ChainLayout : Widget {
+final class ChainLayout : Widget {
     private StackLocator stackLocator;
 
     this(in string style = "ChainLayout") {

src/rpui/widgets/drop_list_menu/widget.d

@@ -41,6 +41,10 @@ class DropListMenu : Button, MenuActions {
     override void onProgress(in ProgressEvent event) {
         super.onProgress(event);
         dropMenuDelegate.onProgress(vec2(0, size.y));
+
+        if (menu.isVisible) {
+            isClick = true;
+        }
     }
 
     override void onMouseDown(in MouseDownEvent event) {

src/rpui/widgets/main_menu/widget.d

@@ -0,0 +1,38 @@
+module rpui.widgets.main_menu.widget;
+
+import rpui.primitives;
+import rpui.events;
+import rpui.widget;
+import rpui.widgets.stack_layout.stack_locator;
+
+final class MainMenu : Widget {
+    private StackLocator stackLocator;
+
+    this(in string style = "ChainLayout") {
+        super(style);
+
+        heightType = SizeType.wrapContent;
+        skipFocus = true;
+        stackLocator.attach(this);
+        stackLocator.orientation = Orientation.horizontal;
+        finalFocus = true;
+    }
+
+    override void onProgress(in ProgressEvent event) {
+        super.onProgress(event);
+
+        locator.updateLocationAlign();
+        locator.updateVerticalLocationAlign();
+        locator.updateRegionAlign();
+        locator.updateAbsolutePosition();
+
+        updateSize();
+    }
+
+    override void updateSize() {
+        super.updateSize();
+
+        stackLocator.updateWidgetsPosition();
+        stackLocator.updateSize();
+    }
+}

src/rpui/widgets/main_menu_item/widget.d

@@ -0,0 +1,10 @@
+module rpui.widgets.main_menu_item.widget;
+
+import rpui.widgets.drop_list_menu.widget;
+
+final class MainMenuItem : DropListMenu {
+    this(in string style = "MainMenuItem", in string iconsGroup = "icons") {
+        super(style, iconsGroup);
+        skipFocus = true;
+    }
+}

src/rpui/widgets/panel/render_system.d

@@ -7,6 +7,7 @@ import rpui.widgets.panel.transforms_system;
 import gapi.texture;
 import gapi.vec;
 import gapi.geometry;
+import rpui.primitives;
 import rpui.render.components;
 import rpui.render.components_factory;
 import rpui.render.renderer;
@@ -124,33 +125,32 @@ final class PanelRenderSystem : RenderSystem {
     }
 
     private void renderHeader() {
-        if (!widget.userCanHide)
-            return;
+        if (widget.userCanHide) {
+            renderTexAtlasQuad(
+                theme,
+                renderData.headerBackground.geometry,
+                renderData.headerBackground.texture,
+                renderData.headerBackground.texCoords[widget.headerState].normilizedTexCoords,
+                transforms.headerBackground
+            );
 
-        renderTexAtlasQuad(
-            theme,
-            renderData.headerBackground.geometry,
-            renderData.headerBackground.texture,
-            renderData.headerBackground.texCoords[widget.headerState].normilizedTexCoords,
-            transforms.headerBackground
-        );
+            Texture2DCoords markTexCoords;
 
-        Texture2DCoords markTexCoords;
+            if (widget.isOpen) {
+                markTexCoords = renderData.headerOpenMarkTexCoords;
+            } else {
+                markTexCoords = renderData.headerCloseMarkTexCoords;
+            }
 
-        if (widget.isOpen) {
-            markTexCoords = renderData.headerOpenMarkTexCoords;
-        } else {
-            markTexCoords = renderData.headerCloseMarkTexCoords;
+            renderTexAtlasQuad(
+                theme,
+                renderData.headerMark.geometry,
+                renderData.headerMark.texture,
+                markTexCoords,
+                transforms.headerMark
+            );
         }
 
-        renderTexAtlasQuad(
-            theme,
-            renderData.headerMark.geometry,
-            renderData.headerMark.texture,
-            markTexCoords,
-            transforms.headerMark
-        );
-
         renderUiText(
             theme,
             renderData.headerText.render,

src/rpui/widgets/panel/transforms_system.d

@@ -57,25 +57,27 @@ final class PanelTransformsSystem : TransformsSystem {
     }
 
     private void updateHeaderTransforms() {
-        if (!widget.userCanHide)
-            return;
-
+        vec2 textPosition;
         const headerSize = vec2(widget.size.x, widget.measure.headerHeight);
 
-        transforms.headerBackground = updateQuadTransforms(
-            widget.view.cameraView,
-            widget.absolutePosition,
-            headerSize
-        );
-
-        transforms.headerMark = updateQuadTransforms(
-            widget.view.cameraView,
-            widget.absolutePosition + renderData.headerMarkPosition,
-            renderData.headerMarkSize
-        );
-
-        const textPosition = widget.absolutePosition +
-            vec2(renderData.headerMarkPosition.x + renderData.headerMarkSize.x, 0);
+        if (widget.userCanHide) {
+            transforms.headerBackground = updateQuadTransforms(
+                widget.view.cameraView,
+                widget.absolutePosition,
+                headerSize
+            );
+
+            transforms.headerMark = updateQuadTransforms(
+                widget.view.cameraView,
+                widget.absolutePosition + renderData.headerMarkPosition,
+                renderData.headerMarkSize
+            );
+
+            textPosition = widget.absolutePosition +
+                vec2(renderData.headerMarkPosition.x + renderData.headerMarkSize.x, 0);
+        } else {
+            textPosition = widget.absolutePosition + vec2(renderData.headerMarkPosition.x, 0);
+        }
 
         with (renderData.headerText.attrs[widget.headerState]) {
             caption = widget.caption;
@@ -93,8 +95,8 @@ final class PanelTransformsSystem : TransformsSystem {
     }
 
     private void updateSplitTransforms() {
-        if (!widget.userCanResize && !widget.showSplit)
-            return;
+        // if (!widget.userCanResize && !widget.showSplit)
+            // return;
 
         const splitTransforms = getSplitTransforms();
 
@@ -123,7 +125,7 @@ final class PanelTransformsSystem : TransformsSystem {
 
         const thickness = widget.split.thickness;
 
-        switch (widget.regionAlign) {
+        switch (widget.splitRegionAlign) {
             case RegionAlign.top:
                 outerPosition = widget.absolutePosition + vec2(0, widget.size.y - thickness);
                 innerPosition = outerPosition - vec2(0, thickness);

src/rpui/widgets/panel/widget.d

@@ -50,6 +50,13 @@ class Panel : Widget, FocusScrollNavigation {
     @field bool showHorizontalScrollButton = true;
 
     @field utf32string caption = "";
+    @field RegionAlign splitAlign = RegionAlign.client;
+
+    package @property inout(RegionAlign) splitRegionAlign() inout {
+        return regionAlign == RegionAlign.client || regionAlign == RegionAlign.none
+            ? oppositeRegionAlign(splitAlign)
+            : regionAlign;
+    }
 
     struct Measure {
         float headerHeight;