Skip to content

Commit

Permalink
Layout fractional sizes & flexBasis
Browse files Browse the repository at this point in the history 
<img width="238" alt="Screenshot 2024-10-24 at 1 37 24 PM" src="https://github.com/user-attachments/assets/a18eb07b-3bbe-47c4-b4d5-94bd18e87a28">

This adds support for 2 things:

1. Fractional values when using fill scale type. This allows sibling layouts to vary their sizes when compared to each other. This ONLY applies on the main axis (for example, only width if the main axis is row).

https://github.com/user-attachments/assets/d617f8d0-142a-499f-a1cf-226fd136ab41

2. Initial size (flex basis). Allows you to set auto which will cause a sibling layout to grow/shrink based on the size of its contents, and also pixel/percent values which prevent growing/shrinking based on its contents, but also will size the layout on top of the initial size value. For example, if you have 3 children all set to fill with 1fr width in a parent thats 300px wide, they would each be 100px. But if you set one of them with flex basis of 100px, it starts that child at 100px, then divides the remaining space up between all 3 children so they end up being 167, 67, 67.

An example of using auto is @LauraRive's planets example where hovering a layout causes it to expand (even though the size was not explicitly set).

An example of using pixel/percent addresses @JcToon's loader example where the sibling loaders set to fill should NOT change size as the size of their child layouts changes.

https://github.com/user-attachments/assets/2ef4f5cd-ff53-4eda-8d72-5a3dd898ac33

Diffs=
aec431eeb7 Layout fractional sizes & flexBasis (#8405)

Co-authored-by: Philip Chung <philterdesign@gmail.com>
  • Loading branch information
@philter
philter and philter committed Oct 26, 2024
1 parent 293ab0e commit bb710d5
Show file tree
Hide file tree
Showing 10 changed files with 145 additions and 9 deletions.
2 changes: 1 addition & 1 deletion .rive_head
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
a02ac789ca472a5ac72bb3f0a5585fd3f243f095
aec431eeb783ebd88e86d95b45788ab6263d286c
12 changes: 11 additions & 1 deletion dev/defs/layout/layout_component_style.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@
},
"flexBasis": {
"type": "double",
"initialValue": "1",
"initialValue": "0",
"animates": true,
"key": {
"int": 523,
Expand All @@ -314,6 +314,16 @@
"description": "Flex basis value.",
"bindable": true
},
"flexBasisUnitsValue": {
"type": "uint",
"initialValue": "3",
"group": "flexbasis",
"key": {
"int": 705,
"string": "flexbasisunitsvalue"
},
"description": "Flex basis unit value"
},
"aspectRatio": {
"type": "double",
"initialValue": "0",
Expand Down
28 changes: 26 additions & 2 deletions dev/defs/layout_component.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"int": 7,
"string": "w"
},
"description": "Initial width of the item."
"description": "Initial width of the item.",
"bindable": true
},
"height": {
"type": "double",
Expand All @@ -34,7 +35,8 @@
"int": 8,
"string": "h"
},
"description": "Initial height of the item."
"description": "Initial height of the item.",
"bindable": true
},
"styleId": {
"type": "Id",
Expand All @@ -46,6 +48,28 @@
"string": "styleid"
},
"description": "LayoutStyle that defines the styling for this LayoutComponent"
},
"fractionalWidth": {
"type": "double",
"initialValue": "1",
"animates": true,
"key": {
"int": 706,
"string": "fractionalwidth"
},
"description": "Initial fractional width of the item when using scaleType fill.",
"bindable": true
},
"fractionalHeight": {
"type": "double",
"initialValue": "1",
"animates": true,
"key": {
"int": 707,
"string": "fractionalheight"
},
"description": "Initial fractional height of the item when using scaleType fill.",
"bindable": true
}
}
}
26 changes: 26 additions & 0 deletions include/rive/generated/core_registry.hpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -792,6 +792,10 @@ class CoreRegistry
case NSlicerTileModeBase::stylePropertyKey:
object->as<NSlicerTileModeBase>()->style(value);
break;
case LayoutComponentStyleBase::flexBasisUnitsValuePropertyKey:
object->as<LayoutComponentStyleBase>()->flexBasisUnitsValue(
value);
break;
case LayoutComponentStyleBase::layoutWidthScaleTypePropertyKey:
object->as<LayoutComponentStyleBase>()->layoutWidthScaleType(
value);
Expand Down Expand Up @@ -1702,6 +1706,12 @@ class CoreRegistry
case LayoutComponentBase::heightPropertyKey:
object->as<LayoutComponentBase>()->height(value);
break;
case LayoutComponentBase::fractionalWidthPropertyKey:
object->as<LayoutComponentBase>()->fractionalWidth(value);
break;
case LayoutComponentBase::fractionalHeightPropertyKey:
object->as<LayoutComponentBase>()->fractionalHeight(value);
break;
case ArtboardBase::originXPropertyKey:
object->as<ArtboardBase>()->originX(value);
break;
Expand Down Expand Up @@ -2050,6 +2060,9 @@ class CoreRegistry
return object->as<NSlicerTileModeBase>()->patchIndex();
case NSlicerTileModeBase::stylePropertyKey:
return object->as<NSlicerTileModeBase>()->style();
case LayoutComponentStyleBase::flexBasisUnitsValuePropertyKey:
return object->as<LayoutComponentStyleBase>()
->flexBasisUnitsValue();
case LayoutComponentStyleBase::layoutWidthScaleTypePropertyKey:
return object->as<LayoutComponentStyleBase>()
->layoutWidthScaleType();
Expand Down Expand Up @@ -2697,6 +2710,10 @@ class CoreRegistry
return object->as<LayoutComponentBase>()->width();
case LayoutComponentBase::heightPropertyKey:
return object->as<LayoutComponentBase>()->height();
case LayoutComponentBase::fractionalWidthPropertyKey:
return object->as<LayoutComponentBase>()->fractionalWidth();
case LayoutComponentBase::fractionalHeightPropertyKey:
return object->as<LayoutComponentBase>()->fractionalHeight();
case ArtboardBase::originXPropertyKey:
return object->as<ArtboardBase>()->originX();
case ArtboardBase::originYPropertyKey:
Expand Down Expand Up @@ -2885,6 +2902,7 @@ class CoreRegistry
case NestedArtboardLayoutBase::instanceHeightScaleTypePropertyKey:
case NSlicerTileModeBase::patchIndexPropertyKey:
case NSlicerTileModeBase::stylePropertyKey:
case LayoutComponentStyleBase::flexBasisUnitsValuePropertyKey:
case LayoutComponentStyleBase::layoutWidthScaleTypePropertyKey:
case LayoutComponentStyleBase::layoutHeightScaleTypePropertyKey:
case LayoutComponentStyleBase::layoutAlignmentTypePropertyKey:
Expand Down Expand Up @@ -3173,6 +3191,8 @@ class CoreRegistry
case CubicDetachedVertexBase::outDistancePropertyKey:
case LayoutComponentBase::widthPropertyKey:
case LayoutComponentBase::heightPropertyKey:
case LayoutComponentBase::fractionalWidthPropertyKey:
case LayoutComponentBase::fractionalHeightPropertyKey:
case ArtboardBase::originXPropertyKey:
case ArtboardBase::originYPropertyKey:
case JoystickBase::xPropertyKey:
Expand Down Expand Up @@ -3388,6 +3408,8 @@ class CoreRegistry
return object->is<NSlicerTileModeBase>();
case NSlicerTileModeBase::stylePropertyKey:
return object->is<NSlicerTileModeBase>();
case LayoutComponentStyleBase::flexBasisUnitsValuePropertyKey:
return object->is<LayoutComponentStyleBase>();
case LayoutComponentStyleBase::layoutWidthScaleTypePropertyKey:
return object->is<LayoutComponentStyleBase>();
case LayoutComponentStyleBase::layoutHeightScaleTypePropertyKey:
Expand Down Expand Up @@ -3955,6 +3977,10 @@ class CoreRegistry
return object->is<LayoutComponentBase>();
case LayoutComponentBase::heightPropertyKey:
return object->is<LayoutComponentBase>();
case LayoutComponentBase::fractionalWidthPropertyKey:
return object->is<LayoutComponentBase>();
case LayoutComponentBase::fractionalHeightPropertyKey:
return object->is<LayoutComponentBase>();
case ArtboardBase::originXPropertyKey:
return object->is<ArtboardBase>();
case ArtboardBase::originYPropertyKey:
Expand Down
23 changes: 22 additions & 1 deletion include/rive/generated/layout/layout_component_style_base.hpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ class LayoutComponentStyleBase : public Component
static const uint16_t flexGrowPropertyKey = 521;
static const uint16_t flexShrinkPropertyKey = 522;
static const uint16_t flexBasisPropertyKey = 523;
static const uint16_t flexBasisUnitsValuePropertyKey = 705;
static const uint16_t aspectRatioPropertyKey = 524;
static const uint16_t layoutWidthScaleTypePropertyKey = 655;
static const uint16_t layoutHeightScaleTypePropertyKey = 656;
Expand Down Expand Up @@ -131,7 +132,8 @@ class LayoutComponentStyleBase : public Component
float m_Flex = 0.0f;
float m_FlexGrow = 0.0f;
float m_FlexShrink = 1.0f;
float m_FlexBasis = 1.0f;
float m_FlexBasis = 0.0f;
uint32_t m_FlexBasisUnitsValue = 3;
float m_AspectRatio = 0.0f;
uint32_t m_LayoutWidthScaleType = 0;
uint32_t m_LayoutHeightScaleType = 0;
Expand Down Expand Up @@ -468,6 +470,20 @@ class LayoutComponentStyleBase : public Component
flexBasisChanged();
}

inline uint32_t flexBasisUnitsValue() const
{
return m_FlexBasisUnitsValue;
}
void flexBasisUnitsValue(uint32_t value)
{
if (m_FlexBasisUnitsValue == value)
{
return;
}
m_FlexBasisUnitsValue = value;
flexBasisUnitsValueChanged();
}

inline float aspectRatio() const { return m_AspectRatio; }
void aspectRatio(float value)
{
Expand Down Expand Up @@ -1100,6 +1116,7 @@ class LayoutComponentStyleBase : public Component
m_FlexGrow = object.m_FlexGrow;
m_FlexShrink = object.m_FlexShrink;
m_FlexBasis = object.m_FlexBasis;
m_FlexBasisUnitsValue = object.m_FlexBasisUnitsValue;
m_AspectRatio = object.m_AspectRatio;
m_LayoutWidthScaleType = object.m_LayoutWidthScaleType;
m_LayoutHeightScaleType = object.m_LayoutHeightScaleType;
Expand Down Expand Up @@ -1233,6 +1250,9 @@ class LayoutComponentStyleBase : public Component
case flexBasisPropertyKey:
m_FlexBasis = CoreDoubleType::deserialize(reader);
return true;
case flexBasisUnitsValuePropertyKey:
m_FlexBasisUnitsValue = CoreUintType::deserialize(reader);
return true;
case aspectRatioPropertyKey:
m_AspectRatio = CoreDoubleType::deserialize(reader);
return true;
Expand Down Expand Up @@ -1408,6 +1428,7 @@ class LayoutComponentStyleBase : public Component
virtual void flexGrowChanged() {}
virtual void flexShrinkChanged() {}
virtual void flexBasisChanged() {}
virtual void flexBasisUnitsValueChanged() {}
virtual void aspectRatioChanged() {}
virtual void layoutWidthScaleTypeChanged() {}
virtual void layoutHeightScaleTypeChanged() {}
Expand Down
36 changes: 36 additions & 0 deletions include/rive/generated/layout_component_base.hpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,16 @@ class LayoutComponentBase : public Drawable
static const uint16_t widthPropertyKey = 7;
static const uint16_t heightPropertyKey = 8;
static const uint16_t styleIdPropertyKey = 494;
static const uint16_t fractionalWidthPropertyKey = 706;
static const uint16_t fractionalHeightPropertyKey = 707;

protected:
bool m_Clip = false;
float m_Width = 0.0f;
float m_Height = 0.0f;
uint32_t m_StyleId = -1;
float m_FractionalWidth = 1.0f;
float m_FractionalHeight = 1.0f;

public:
inline bool clip() const { return m_Clip; }
Expand Down Expand Up @@ -91,13 +95,37 @@ class LayoutComponentBase : public Drawable
styleIdChanged();
}

inline float fractionalWidth() const { return m_FractionalWidth; }
void fractionalWidth(float value)
{
if (m_FractionalWidth == value)
{
return;
}
m_FractionalWidth = value;
fractionalWidthChanged();
}

inline float fractionalHeight() const { return m_FractionalHeight; }
void fractionalHeight(float value)
{
if (m_FractionalHeight == value)
{
return;
}
m_FractionalHeight = value;
fractionalHeightChanged();
}

Core* clone() const override;
void copy(const LayoutComponentBase& object)
{
m_Clip = object.m_Clip;
m_Width = object.m_Width;
m_Height = object.m_Height;
m_StyleId = object.m_StyleId;
m_FractionalWidth = object.m_FractionalWidth;
m_FractionalHeight = object.m_FractionalHeight;
Drawable::copy(object);
}

Expand All @@ -117,6 +145,12 @@ class LayoutComponentBase : public Drawable
case styleIdPropertyKey:
m_StyleId = CoreUintType::deserialize(reader);
return true;
case fractionalWidthPropertyKey:
m_FractionalWidth = CoreDoubleType::deserialize(reader);
return true;
case fractionalHeightPropertyKey:
m_FractionalHeight = CoreDoubleType::deserialize(reader);
return true;
}
return Drawable::deserialize(propertyKey, reader);
}
Expand All @@ -126,6 +160,8 @@ class LayoutComponentBase : public Drawable
virtual void widthChanged() {}
virtual void heightChanged() {}
virtual void styleIdChanged() {}
virtual void fractionalWidthChanged() {}
virtual void fractionalHeightChanged() {}
};
} // namespace rive

Expand Down
1 change: 1 addition & 0 deletions include/rive/layout/layout_component_style.hpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ class LayoutComponentStyle : public LayoutComponentStyleBase
YGUnit maxHeightUnits();
YGUnit minWidthUnits();
YGUnit minHeightUnits();
YGUnit flexBasisUnits();
#endif

void markLayoutNodeDirty();
Expand Down
2 changes: 2 additions & 0 deletions include/rive/layout_component.hpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,8 @@ class LayoutComponent : public LayoutComponentBase,
void widthChanged() override;
void heightChanged() override;
void styleIdChanged() override;
void fractionalWidthChanged() override;
void fractionalHeightChanged() override;

Vec2D measureLayout(float width,
LayoutMeasureMode widthMode,
Expand Down
6 changes: 6 additions & 0 deletions src/layout/layout_component_style.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,10 +195,16 @@ YGUnit LayoutComponentStyle::minWidthUnits()
{
return YGUnit(minWidthUnitsValue());
}

YGUnit LayoutComponentStyle::minHeightUnits()
{
return YGUnit(minHeightUnitsValue());
}
YGUnit LayoutComponentStyle::flexBasisUnits()
{
return YGUnit(flexBasisUnitsValue());
}

void LayoutComponentStyle::markLayoutNodeDirty()
{
if (parent()->is<LayoutComponent>())
Expand Down
Loading

0 comments on commit bb710d5

Please sign in to comment.