Mirrors/eepp
1
0
Fork 0
mirror of https://github.com/SpartanJ/eepp.git synced 2026-08-10 08:41:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

Margin and padding CSS transitions fixes.

Browse Source 
--HG--
branch : dev
This commit is contained in:
Martín Lucas Golini
2019-01-09 02:13:06 -03:00
parent 6b05bae813
commit 8f4b94ee3d
7 changed files with 145 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
bin/assets/layouts/test.css
View File

@@ -67,7 +67,12 @@ Tooltip {
textColor: black;
}
#tpad {
#lvbox > * {
layout_marginTop: 8dp;
}
#lvbox > #tpad {
layout_marginTop: 0dp;
borderWidth: 2dp;
borderColor: #66666666;
backgroundColor: #33FF3333;
@@ -75,7 +80,7 @@ Tooltip {
transition: scale 0.25s, rotation 0.25s 0.25s, borderColor 0.25s, backgroundColor 0.25s, borderRadius 0.25s;
}
#tpad:hover {
#lvbox > #tpad:hover {
scale: 1.1;
rotation: -3;
backgroundColor: #FF333333;

16
bin/assets/layouts/test.xml
View File

@@ -3,22 +3,22 @@
<hbox id="test_1" layout_width="match_parent" layout_height="match_parent">
<vbox id="lvbox" layout_width="match_parent" layout_weight="0.5" layout_height="match_parent" backgroundColor="#222" padding="12dp">
<TextView id="tpad" layout_width="wrap_content" layout_height="wrap_content" text="testing padding" textSize="24dp" padding="12dp" />
<TextView id="tpad2" layout_width="wrap_content" layout_height="wrap_content" layout_marginTop="8dp" text="testing padding" textSize="24dp" backgroundColor="#333" gravity="center" />
<CheckBox layout_width="wrap_content" layout_height="wrap_content" layout_marginTop="8dp" text="testing padding" textSize="24dp" padding="12dp" backgroundColor="#333" />
<RadioButton layout_width="wrap_content" layout_height="wrap_content" layout_marginTop="8dp" text="testing padding" textSize="24dp" padding="12dp" backgroundColor="#333" />
<TextInput layout_width="300dp" layout_height="wrap_content" layout_marginTop="8dp" text="testing padding" textSize="24dp" padding="24dp" />
<Image id="tres" layout_width="32dp" layout_height="32dp" src="file://assets/tiles/1.png" backgroundColor="#444" layout_marginTop="8dp" scaleType="fit_inside" padding="8dp" />
<DropDownList layout_width="300dp" layout_height="wrap_content" layout_marginTop="8dp" text="testing padding" textSize="16dp" padding="8dp">
<TextView id="tpad2" layout_width="wrap_content" layout_height="wrap_content" text="testing padding" textSize="24dp" backgroundColor="#333" gravity="center" />
<CheckBox layout_width="wrap_content" layout_height="wrap_content" text="testing padding" textSize="24dp" padding="12dp" backgroundColor="#333" />
<RadioButton layout_width="wrap_content" layout_height="wrap_content" text="testing padding" textSize="24dp" padding="12dp" backgroundColor="#333" />
<TextInput layout_width="300dp" layout_height="wrap_content" text="testing padding" textSize="24dp" padding="24dp" />
<Image id="tres" layout_width="32dp" layout_height="32dp" src="file://assets/tiles/1.png" backgroundColor="#444" scaleType="fit_inside" padding="8dp" />
<DropDownList layout_width="300dp" layout_height="wrap_content" text="testing padding" textSize="16dp" padding="8dp">
<item>Test</item>
<item>Test 2</item>
<item>Test 3</item>
</DropDownList>
<ComboBox layout_width="300dp" layout_height="wrap_content" layout_marginTop="8dp" text="testing padding" textSize="16dp" padding="8dp">
<ComboBox layout_width="300dp" layout_height="wrap_content" text="testing padding" textSize="16dp" padding="8dp">
<item>Test</item>
<item>Test 2</item>
<item>Test 3</item>
</ComboBox>
<TextView layout_width="match_parent" layout_height="wrap_content" text="testing match_parent" layout_marginTop="8dp" textSize="24dp" backgroundColor="#333" gravity="center" />
<TextView layout_width="match_parent" layout_height="wrap_content" text="testing match_parent" textSize="24dp" backgroundColor="#333" gravity="center" />
</vbox>
<vbox id="rvbox" layout_width="match_parent" layout_weight="0.5" layout_height="match_parent" backgroundColor="#323232" padding="12dp">
<RelativeLayout id="rrl" layout_width="match_parent" layout_height="match_parent" backgroundColor="#999" padding="24dp">

21
include/eepp/scene/actions/marginmove.hpp
View File

@@ -11,7 +11,15 @@ namespace EE { namespace Scene { namespace Actions {
class EE_API MarginMove : public Action {
public:
static MarginMove * New( const Rect& start, const Rect& end, const Time& duration, const Ease::Interpolation& type = Ease::Linear );
enum InterpolateFlag {
Left = 1 << 0,
Top = 1 << 1,
Right = 1 << 2,
Bottom = 1 << 3,
All = Left | Top | Right | Bottom
};
static MarginMove * New( const Rect& start, const Rect& end, const Time& duration, const Ease::Interpolation& type = Ease::Linear, const Uint32& interpolateFlag = InterpolateFlag::All );
void start() override;
@@ -27,22 +35,22 @@ class EE_API MarginMove : public Action {
Interpolation1d getInterpolationLeft() const;
void setInterpolationLeft(const Interpolation1d & getInterpolationLeft);
void setInterpolationLeft(const Interpolation1d & interpolationLeft);
Interpolation1d getInterpolationRight() const;
void setInterpolationRight(const Interpolation1d & getInterpolationRight);
void setInterpolationRight(const Interpolation1d & interpolationRight);
Interpolation1d getInterpolationTop() const;
void setInterpolationTop(const Interpolation1d & getInterpolationTop);
void setInterpolationTop(const Interpolation1d & interpolationTop);
Interpolation1d getInterpolationBottom() const;
void setInterpolationBottom(const Interpolation1d & getInterpolationBottom);
void setInterpolationBottom(const Interpolation1d & interpolationBottom);
protected:
MarginMove( const Rect & start, const Rect & end, const Time & duration, const Ease::Interpolation & type );
MarginMove( const Rect & start, const Rect & end, const Time & duration, const Ease::Interpolation & type, const Uint32& interpolateFlag );
void onStart() override;
@@ -50,6 +58,7 @@ class EE_API MarginMove : public Action {
MarginMove();
Uint32 mFlags;
Interpolation1d mInterpolationLeft;
Interpolation1d mInterpolationRight;
Interpolation1d mInterpolationTop;

4
include/eepp/scene/actions/paddingtransition.hpp
View File

@@ -8,12 +8,12 @@ namespace EE { namespace Scene { namespace Actions {
class EE_API PaddingTransition : public MarginMove {
public:
static PaddingTransition * New( const Rectf& start, const Rectf& end, const Time& duration, const Ease::Interpolation& type = Ease::Linear );
static PaddingTransition * New( const Rectf& start, const Rectf& end, const Time& duration, const Ease::Interpolation& type = Ease::Linear, const Uint32& interpolateFlag = InterpolateFlag::All );
Action * clone() const override;
protected:
PaddingTransition( const Rectf& start, const Rectf& end, const Time & duration, const Ease::Interpolation & type );
PaddingTransition( const Rectf& start, const Rectf& end, const Time & duration, const Ease::Interpolation & type, const Uint32& interpolateFlag );
void onUpdate( const Time& time ) override;
private:

92
src/eepp/scene/actions/marginmove.cpp
View File

@@ -4,8 +4,8 @@ using namespace EE::UI;
namespace EE { namespace Scene { namespace Actions {
MarginMove * MarginMove::New( const Rect & start, const Rect & end, const Time& duration, const Ease::Interpolation& type ) {
return eeNew( MarginMove, ( start, end, duration, type ) );
MarginMove * MarginMove::New( const Rect & start, const Rect & end, const Time& duration, const Ease::Interpolation& type, const Uint32& interpolateFlag ) {
return eeNew( MarginMove, ( start, end, duration, type, interpolateFlag ) );
}
MarginMove::MarginMove()
@@ -43,18 +43,34 @@ void MarginMove::setInterpolationLeft(const Interpolation1d & interpolationLeft)
mInterpolationLeft = interpolationLeft;
}
MarginMove::MarginMove( const Rect& start, const Rect & end, const Time& duration, const Ease::Interpolation& type ) {
mInterpolationLeft.clear().add( start.Left, duration ).add( end.Left ).setType( type );
mInterpolationRight.clear().add( start.Right, duration ).add( end.Right ).setType( type );
mInterpolationTop.clear().add( start.Top, duration ).add( end.Top ).setType( type );
mInterpolationBottom.clear().add( start.Bottom, duration ).add( end.Bottom ).setType( type );
MarginMove::MarginMove( const Rect& start, const Rect & end, const Time& duration, const Ease::Interpolation& type, const Uint32& interpolateFlag ) :
mFlags( interpolateFlag )
{
if ( mFlags & InterpolateFlag::Left )
mInterpolationLeft.clear().add( start.Left, duration ).add( end.Left ).setType( type );
if ( mFlags & InterpolateFlag::Right )
mInterpolationRight.clear().add( start.Right, duration ).add( end.Right ).setType( type );
if ( mFlags & InterpolateFlag::Top )
mInterpolationTop.clear().add( start.Top, duration ).add( end.Top ).setType( type );
if ( mFlags & InterpolateFlag::Bottom )
mInterpolationBottom.clear().add( start.Bottom, duration ).add( end.Bottom ).setType( type );
}
void MarginMove::start() {
mInterpolationLeft.start();
mInterpolationRight.start();
mInterpolationTop.start();
mInterpolationBottom.start();
if ( mFlags & InterpolateFlag::Left )
mInterpolationLeft.start();
if ( mFlags & InterpolateFlag::Right )
mInterpolationRight.start();
if ( mFlags & InterpolateFlag::Top )
mInterpolationTop.start();
if ( mFlags & InterpolateFlag::Bottom )
mInterpolationBottom.start();
onStart();
@@ -62,10 +78,17 @@ void MarginMove::start() {
}
void MarginMove::stop() {
mInterpolationLeft.stop();
mInterpolationRight.stop();
mInterpolationTop.stop();
mInterpolationBottom.stop();
if ( mFlags & InterpolateFlag::Left )
mInterpolationLeft.stop();
if ( mFlags & InterpolateFlag::Right )
mInterpolationRight.stop();
if ( mFlags & InterpolateFlag::Top )
mInterpolationTop.stop();
if ( mFlags & InterpolateFlag::Bottom )
mInterpolationBottom.stop();
onStop();
@@ -73,22 +96,28 @@ void MarginMove::stop() {
}
void MarginMove::update( const Time& time ) {
mInterpolationLeft.update( time );
mInterpolationRight.update( time );
mInterpolationTop.update( time );
mInterpolationBottom.update( time );
if ( mFlags & InterpolateFlag::Left )
mInterpolationLeft.update( time );
if ( mFlags & InterpolateFlag::Right )
mInterpolationRight.update( time );
if ( mFlags & InterpolateFlag::Top )
mInterpolationTop.update( time );
if ( mFlags & InterpolateFlag::Bottom )
mInterpolationBottom.update( time );
onUpdate( time );
}
bool MarginMove::isDone() {
return mInterpolationLeft.ended() &&
mInterpolationRight.ended() &&
mInterpolationTop.ended() &&
mInterpolationBottom.ended();
return ( ( mFlags & InterpolateFlag::Left ) ? mInterpolationLeft.ended() : true ) &&
( ( mFlags & InterpolateFlag::Right ) ? mInterpolationRight.ended() : true ) &&
( ( mFlags & InterpolateFlag::Top ) ? mInterpolationTop.ended() : true ) &&
( ( mFlags & InterpolateFlag::Bottom ) ? mInterpolationBottom.ended() : true );
}
void MarginMove::onStart() {
if ( NULL != mNode && mNode->isWidget() ) {
onUpdate( Time::Zero );
@@ -97,17 +126,20 @@ void MarginMove::onStart() {
void MarginMove::onUpdate( const Time& ) {
if ( NULL != mNode && mNode->isWidget() ) {
static_cast<UIWidget*>( mNode )->setLayoutMargin(
Rect( mInterpolationLeft.getPosition(),
mInterpolationTop.getPosition(),
mInterpolationRight.getPosition(),
mInterpolationBottom.getPosition()
) );
UIWidget * widget = static_cast<UIWidget*>( mNode );
widget->setLayoutMargin(
Rect( ( mFlags & InterpolateFlag::Left ) ? mInterpolationLeft.getPosition() : widget->getLayoutMargin().Left,
( mFlags & InterpolateFlag::Top ) ? mInterpolationTop.getPosition() : widget->getLayoutMargin().Top,
( mFlags & InterpolateFlag::Right ) ? mInterpolationRight.getPosition() : widget->getLayoutMargin().Right,
( mFlags & InterpolateFlag::Bottom ) ? mInterpolationBottom.getPosition() : widget->getLayoutMargin().Bottom
) );
}
}
Action * MarginMove::clone() const {
MarginMove * action = eeNew( MarginMove, () );
action->mFlags = mFlags;
action->setInterpolationLeft( mInterpolationLeft );
action->setInterpolationRight( mInterpolationRight );
action->setInterpolationTop( mInterpolationTop );

38
src/eepp/scene/actions/paddingtransition.cpp
View File

@@ -4,35 +4,47 @@ using namespace EE::UI;
namespace EE { namespace Scene { namespace Actions {
PaddingTransition * PaddingTransition::New( const Rectf& start, const Rectf& end, const Time& duration, const Ease::Interpolation& type ) {
return eeNew( PaddingTransition, ( start, end, duration, type ) );
PaddingTransition * PaddingTransition::New( const Rectf& start, const Rectf& end, const Time& duration, const Ease::Interpolation& type, const Uint32& interpolateFlag ) {
return eeNew( PaddingTransition, ( start, end, duration, type, interpolateFlag ) );
}
PaddingTransition::PaddingTransition()
{}
PaddingTransition::PaddingTransition( const Rectf& start, const Rectf& end, const Time& duration, const Ease::Interpolation& type ) :
PaddingTransition::PaddingTransition( const Rectf& start, const Rectf& end, const Time& duration, const Ease::Interpolation& type, const Uint32& interpolateFlag ) :
MarginMove()
{
mInterpolationLeft.clear().add( start.Left, duration ).add( end.Left ).setType( type );
mInterpolationRight.clear().add( start.Right, duration ).add( end.Right ).setType( type );
mInterpolationTop.clear().add( start.Top, duration ).add( end.Top ).setType( type );
mInterpolationBottom.clear().add( start.Bottom, duration ).add( end.Bottom ).setType( type );
mFlags = interpolateFlag;
if ( mFlags & InterpolateFlag::Left )
mInterpolationLeft.clear().add( start.Left, duration ).add( end.Left ).setType( type );
if ( mFlags & InterpolateFlag::Right )
mInterpolationRight.clear().add( start.Right, duration ).add( end.Right ).setType( type );
if ( mFlags & InterpolateFlag::Top )
mInterpolationTop.clear().add( start.Top, duration ).add( end.Top ).setType( type );
if ( mFlags & InterpolateFlag::Bottom )
mInterpolationBottom.clear().add( start.Bottom, duration ).add( end.Bottom ).setType( type );
}
void PaddingTransition::onUpdate(const Time &) {
if ( NULL != mNode && mNode->isWidget() ) {
static_cast<UIWidget*>( mNode )->setPadding(
Rectf( mInterpolationLeft.getPosition(),
mInterpolationTop.getPosition(),
mInterpolationRight.getPosition(),
mInterpolationBottom.getPosition()
) );
UIWidget * widget = static_cast<UIWidget*>( mNode );
widget->setPadding(
Rectf( ( mFlags & InterpolateFlag::Left ) ? mInterpolationLeft.getPosition() : widget->getLayoutMargin().Left,
( mFlags & InterpolateFlag::Top ) ? mInterpolationTop.getPosition() : widget->getLayoutMargin().Top,
( mFlags & InterpolateFlag::Right ) ? mInterpolationRight.getPosition() : widget->getLayoutMargin().Right,
( mFlags & InterpolateFlag::Bottom ) ? mInterpolationBottom.getPosition() : widget->getLayoutMargin().Bottom
) );
}
}
Action * PaddingTransition::clone() const {
PaddingTransition * action = eeNew( PaddingTransition, () );
action->mFlags = mFlags;
action->setInterpolationLeft( mInterpolationLeft );
action->setInterpolationRight( mInterpolationRight );
action->setInterpolationTop( mInterpolationTop );

38
src/eepp/ui/uiwidget.cpp
View File

@@ -861,21 +861,28 @@ bool UIWidget::setAttribute( const NodeAttribute& attribute, const Uint32& state
}
} else if ( String::startsWith( name, "layout_margin" ) ) {
Rect margin;
Uint32 marginFlag = 0;
if ( "layout_margin" == name )
if ( "layout_margin" == name ) {
margin = attribute.asRect();
else if ( "layout_marginleft" == name )
marginFlag = Actions::MarginMove::All;
} else if ( "layout_marginleft" == name ) {
margin = Rect( attribute.asDpDimensionI(), mLayoutMargin.Top, mLayoutMargin.Right, mLayoutMargin.Bottom );
else if ( "layout_marginright" == name )
marginFlag = Actions::MarginMove::Left;
} else if ( "layout_marginright" == name ) {
margin = Rect( mLayoutMargin.Left, mLayoutMargin.Top, attribute.asDpDimensionI(), mLayoutMargin.Bottom );
else if ( "layout_margintop" == name )
marginFlag = Actions::MarginMove::Right;
} else if ( "layout_margintop" == name ) {
margin = Rect( mLayoutMargin.Left, attribute.asDpDimensionI(), mLayoutMargin.Right, mLayoutMargin.Bottom );
else if ( "layout_marginbottom" == name )
marginFlag = Actions::MarginMove::Top;
} else if ( "layout_marginbottom" == name ) {
margin = Rect( mLayoutMargin.Left, mLayoutMargin.Top, mLayoutMargin.Right, attribute.asDpDimensionI() );
marginFlag = Actions::MarginMove::Bottom;
}
if ( !isSceneNodeLoading() && NULL != mStyle && mStyle->hasTransition( state, attribute.getName() ) ) {
UIStyle::TransitionInfo transitionInfo( mStyle->getTransition( state, attribute.getName() ) );
Action * action = Actions::MarginMove::New( mLayoutMargin, margin, transitionInfo.duration, transitionInfo.timingFunction );
Action * action = Actions::MarginMove::New( mLayoutMargin, margin, transitionInfo.duration, transitionInfo.timingFunction, marginFlag );
NodeAttribute oldAttribute = mStyle->getAttribute( UIState::StateFlagNormal, attribute.getName() );
if ( oldAttribute.isEmpty() && mStyle->getPreviousState() == UIState::StateFlagNormal ) {
@@ -1025,21 +1032,28 @@ bool UIWidget::setAttribute( const NodeAttribute& attribute, const Uint32& state
setBlendMode( attribute.asBlendMode() );
} else if ( String::startsWith( name, "padding" ) ) {
Rectf padding;
Uint32 paddingFlag = 0;
if ( "padding" == name )
if ( "padding" == name ) {
padding = ( attribute.asRectf() );
else if ( "paddingleft" == name )
paddingFlag = Actions::PaddingTransition::All;
} else if ( "paddingleft" == name ) {
padding = Rectf( attribute.asDpDimension(), mPadding.Top, mPadding.Right, mPadding.Bottom );
else if ( "paddingright" == name )
paddingFlag = Actions::PaddingTransition::Left;
} else if ( "paddingright" == name ) {
padding = Rectf( mPadding.Left, mPadding.Top, attribute.asDpDimension(), mPadding.Bottom );
else if ( "paddingtop" == name )
paddingFlag = Actions::PaddingTransition::Right;
} else if ( "paddingtop" == name ) {
padding = Rectf( mPadding.Left, attribute.asDpDimension(), mPadding.Right, mPadding.Bottom );
else if ( "paddingbottom" == name )
paddingFlag = Actions::PaddingTransition::Top;
} else if ( "paddingbottom" == name ) {
padding = Rectf( mPadding.Left, mPadding.Top, mPadding.Right, attribute.asDpDimension() );
paddingFlag = Actions::PaddingTransition::Bottom;
}
if ( !isSceneNodeLoading() && NULL != mStyle && mStyle->hasTransition( state, attribute.getName() ) ) {
UIStyle::TransitionInfo transitionInfo( mStyle->getTransition( state, attribute.getName() ) );
Action * action = Actions::PaddingTransition::New( mPadding, padding, transitionInfo.duration, transitionInfo.timingFunction );
Action * action = Actions::PaddingTransition::New( mPadding, padding, transitionInfo.duration, transitionInfo.timingFunction, paddingFlag );
NodeAttribute oldAttribute = mStyle->getAttribute( UIState::StateFlagNormal, attribute.getName() );
if ( oldAttribute.isEmpty() && mStyle->getPreviousState() == UIState::StateFlagNormal ) {