Positioning

Component stability: Beta

Position abstraction layer. This component was made because it's not really easy to understand anchors especially relative ones. Biggest problem about SetPoint is that even if you fully understand it, it's not easy to imagine where the element will be placed just by looking at it:

element:SetPoint('TOPLEFT', window, 'BOTTOMRIGHT', -10, 10);

StdUi provides several wrappers around it. You don't need to use them, feel free to use SetPoint if you wish.

Common:

• x - horizontal offset, positive value will move element to the right
• y - vertical offset, positive value will move element to the top

Above/Below

• StdUi:GlueBelow(element, reference, x, y, align) - positions element below the reference.
• StdUi:GlueAbove(element, reference, x, y, align) - positions element above the reference.

align can be one of:

• 'LEFT' - anchors element to the left side
• 'RIGHT' - anchors element to the right side
• nil - anchors element to the center

Demo:

---@type StdUi
local StdUi = LibStub('StdUi');

local window = StdUi:Window(UIParent, 'Title', 400, 100);
window:SetPoint('CENTER');

local pAL = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAbove, Left');
local pAC = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAbove, Center');
local pAR = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAbove, Right');

StdUi:GlueAbove(pAL, window, 0, 0, 'LEFT');
StdUi:GlueAbove(pAC, window, 0, 0);
StdUi:GlueAbove(pAR, window, 0, 0, 'RIGHT');

local pBL = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueBelow, Left');
local pBC = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueBelow, Center');
local pBR = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueBelow, Right');

StdUi:GlueBelow(pBL, window, 0, 0, 'LEFT');
StdUi:GlueBelow(pBC, window, 0, 0);
StdUi:GlueBelow(pBR, window, 0, 0, 'RIGHT');

Top/Bottom/Right/Left

• StdUi:GlueTop(element, reference, x, y, align) - positions element on the top of the reference.
• StdUi:GlueBottom(element, reference, x, y, align) - positions element at the bottom of the reference.
• StdUi:GlueRight(element, reference, x, y, inside) - positions element on the right side of reference.
• StdUi:GlueLeft(element, reference, x, y, inside) - positions element on the left side of reference.

align can be one of: * 'LEFT' - anchors element to the left side * 'RIGHT' - anchors element to the right side * nil - anchors element to the center

inside - indicates if element should be inside or outside of element.

Demo:

---@type StdUi
local StdUi = LibStub('StdUi');

local window = StdUi:Window(UIParent, 'Title', 400, 400);
window.titlePanel:Hide();
window:SetPoint('CENTER');

local pAL = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueTop, Left');
local pAC = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueTop, Center');
local pAR = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueTop, Right');

StdUi:GlueTop(pAL, window, 0, 0, 'LEFT');
StdUi:GlueTop(pAC, window, 0, 0);
StdUi:GlueTop(pAR, window, 0, 0, 'RIGHT');

local pBL = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueBottom, Left');
local pBC = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueBottom, Center');
local pBR = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueBottom, Right');

StdUi:GlueBottom(pBL, window, 0, 0, 'LEFT');
StdUi:GlueBottom(pBC, window, 0, 0);
StdUi:GlueBottom(pBR, window, 0, 0, 'RIGHT');

local pLI = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueLeft, Inside');
local pRI = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueRight, Inside');
local pLO = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueLeft, Outside');
local pRO = StdUi:PanelWithLabel(window, 80, 40, nil, 'GlueRight, Outside');

StdUi:GlueLeft(pLI, window, 0, 0, true);
StdUi:GlueRight(pRI, window, 0, 0, true);

StdUi:GlueLeft(pLO, window, 0, 0);
StdUi:GlueRight(pRO, window, 0, 0);

After/Before

this is equivalent of setting 2 anchors.

• StdUi:GlueAfter(element, reference, topX, topY, bottomX, bottomY) - positions element after the reference.
• StdUi:GlueBefore(element, reference, topX, topY, bottomX, bottomY) - positions element before the reference.

Demo:

Notice that providing both anchors actually stretches the element in height to match reference.

---@type StdUi
local StdUi = LibStub('StdUi');

local window = StdUi:Window(UIParent, 'Title', 400, 400);
window:SetPoint('CENTER');

local pAtop = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAfter, Just Top');
local pAbottom = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAfter, Just Bottom');
local pAboth = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAfter, Both Anchors');

StdUi:GlueAfter(pAboth, window, 0, 0, 0, 0);
StdUi:GlueAfter(pAtop, pAboth, 0, 0);
StdUi:GlueAfter(pAbottom, pAboth, nil, nil, 0, 0);

local pBtop = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAfter, Just Top');
local pBbottom = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAfter, Just Bottom');
local pBboth = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAfter, Both Anchors');

StdUi:GlueBefore(pBboth, window, 0, 0, 0, 0);
StdUi:GlueBefore(pBtop, pBboth, 0, 0);
StdUi:GlueBefore(pBbottom, pBboth, nil, nil, 0, 0);

Across

Across placement is equivalent of setting TOPLEFT and BOTTOMRIGHT anchor:

• StdUi:GlueAcross(element, reference, topX, topY, bottomX, bottomY) - positions element after the reference.

Demo:

---@type StdUi
local StdUi = LibStub('StdUi');

local window = StdUi:Window(UIParent, 'Title', 400, 400);
window:SetPoint('CENTER');

local acc = StdUi:PanelWithLabel(window, 80, 30, nil, 'GlueAfter, Just Top');

StdUi:GlueAcross(acc, window, 30, -30, -30, 30);

Opposite

Anchors the element to the opposite reference anchor ex. for TOP, opposite anchor is BOTTOM.

• StdUi:GlueAcross(element, reference, x, y, anchor) - positions element on the opposite side of reference anchor.

Demo:

---@type StdUi
local StdUi = LibStub('StdUi');

local window = StdUi:Window(UIParent, 'Title', 400, 400);
window:SetPoint('CENTER');

local otop = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Top');
local obottom = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Bottom');
local oright = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Right');
local oleft = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Left');

StdUi:GlueOpposite(otop, window, 0, 0, 'TOP');
StdUi:GlueOpposite(obottom, window, 0, 0, 'BOTTOM');
StdUi:GlueOpposite(oright, window, 0, 0, 'RIGHT');
StdUi:GlueOpposite(oleft, window, 0, 0, 'LEFT');

local otopleft = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Top Left');
local obottomleft = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Bottom Left');
local otopright = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Top Right');
local obottomright = StdUi:PanelWithLabel(window, 100, 40, nil, 'GlueOpposite, Bottom Right');

StdUi:GlueOpposite(otopleft, window, 0, 0, 'TOPLEFT');
StdUi:GlueOpposite(obottomleft, window, 0, 0, 'BOTTOMLEFT');
StdUi:GlueOpposite(otopright, window, 0, 0, 'TOPRIGHT');
StdUi:GlueOpposite(obottomright, window, 0, 0, 'BOTTOMRIGHT');