Flexbox aligned components shouldn't overlap

I use code like this

        Rectangle<int> r({ getWidth() /2 , 0 },
					 { x2 , getHeight() });

    	FlexBox flex;
    	flex.flexDirection = FlexBox::Direction::row;
    	flex.flexWrap = FlexBox::Wrap::noWrap;
    	flex.items.add(FlexItem(*dryVU).withFlex(1, 1, 30).withMargin(FlexItem::Margin(20,0, 20,0)));
    	flex.items.add(FlexItem(*dryFader).withFlex(0,1,50).withMargin(FlexItem::Margin(0, 0, 20, 0)));
    	flex.items.add(FlexItem(*wetVU).withFlex(1, 1, 30).withMargin(FlexItem::Margin(20, 0, 20, 0)));
    	flex.items.add(FlexItem(*wetFader).withFlex(0,1,50).withMargin(FlexItem::Margin(0, 0, 20, 0)));
    	flex.performLayout(BorderSize<int>(10).subtractedFrom(r));

This code, layouts the given components in 4 columns.

And the result is, depending on the given rectangle, that sometimes the right-border will overlap with the left-border of a component with 1 pixel. The rounding algorithm should be changed, so that components (which always have integer coordinates) will always have a zero pixel gap (if not defined differently)

i modified the juce demo to reconstruct the problem

I removed the margin, and made the items half-transparent.

Sometimes the components will overlap, sometimes not.

Please have a look at the screenshot:

bump

This is fixed on the develop branch.

1 Like

Thank you very much, looks good!