From 44eb8cdf8d3a8523a8294fbb4da60e908db14320 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Lucas=20Golini?= Date: Fri, 29 Nov 2019 23:33:22 -0300 Subject: [PATCH] Transitions WIP. --HG-- branch : dev-css-refactor --- .clang-format | 1 + include/eepp/scene/node.hpp | 2 + include/eepp/ui/uitextview.hpp | 2 + include/eepp/ui/uiwidget.hpp | 6 +- src/eepp/scene/node.cpp | 4 + src/eepp/ui/css/propertydefinition.cpp | 3 +- src/eepp/ui/css/shorthanddefinition.cpp | 70 ++++----- src/eepp/ui/css/stylesheet.cpp | 11 +- .../ui/css/stylesheetpropertytransition.cpp | 139 +++++++++++------- src/eepp/ui/css/stylesheetstyle.cpp | 18 +-- src/eepp/ui/css/transitiondefinition.cpp | 42 ++++-- src/eepp/ui/uistyle.cpp | 133 +++++++++++++---- src/eepp/ui/uitextview.cpp | 43 ++++-- src/eepp/ui/uiwidget.cpp | 22 +-- 14 files changed, 317 insertions(+), 179 deletions(-) diff --git a/.clang-format b/.clang-format index f8ec53f5c..7a55b3db5 100644 --- a/.clang-format +++ b/.clang-format @@ -8,6 +8,7 @@ ColumnLimit: '100' CompactNamespaces: 'true' ConstructorInitializerAllOnOneLineOrOnePerLine: 'true' ContinuationIndentWidth: '4' +IndentCaseLabels: 'true' IndentWidth: '4' PointerAlignment: Left SpacesInParentheses: 'true' diff --git a/include/eepp/scene/node.hpp b/include/eepp/scene/node.hpp index 8db1f4801..3e27a3c49 100644 --- a/include/eepp/scene/node.hpp +++ b/include/eepp/scene/node.hpp @@ -278,6 +278,8 @@ class EE_API Node : public Transformable { void removeActionsByTag( const Uint32& tag ); + std::vector getActionsByTag( const Uint32& tag ); + void clearActions(); Transform getLocalTransform() const; diff --git a/include/eepp/ui/uitextview.hpp b/include/eepp/ui/uitextview.hpp index e48eb1288..4224ef785 100644 --- a/include/eepp/ui/uitextview.hpp +++ b/include/eepp/ui/uitextview.hpp @@ -80,6 +80,8 @@ class EE_API UITextView : public UIWidget { void setFontStyleConfig( const UIFontStyleConfig& fontStyleConfig ); virtual bool applyProperty( const StyleSheetProperty& attribute, const Uint32& state = UIState::StateFlagNormal ); + + virtual std::string getPropertyString( const PropertyDefinition* propertyDef ); protected: Text * mTextCache; String mString; diff --git a/include/eepp/ui/uiwidget.hpp b/include/eepp/ui/uiwidget.hpp index 7d816aa8a..2aa2595a4 100644 --- a/include/eepp/ui/uiwidget.hpp +++ b/include/eepp/ui/uiwidget.hpp @@ -194,9 +194,11 @@ class EE_API UIWidget : public UINode, public CSS::StyleSheetElement { std::vector querySelectorAll( const std::string& selector ); - virtual std::string getPropertyString( const std::string& property ); + std::string getPropertyString( const std::string& property ); virtual std::string getPropertyString( const PropertyDefinition* propertyDef ); + + bool isSceneNodeLoading() const; protected: friend class UIManager; friend class UISceneNode; @@ -255,8 +257,6 @@ class EE_API UIWidget : public UINode, public CSS::StyleSheetElement { void reportStyleStateChange(); - bool isSceneNodeLoading() const; - std::string getLayoutWidthRulesString() const; std::string getLayoutHeightRulesString() const; diff --git a/src/eepp/scene/node.cpp b/src/eepp/scene/node.cpp index 5359bc3f1..1b8e33552 100644 --- a/src/eepp/scene/node.cpp +++ b/src/eepp/scene/node.cpp @@ -1296,6 +1296,10 @@ void Node::removeActionsByTag( const Uint32& tag ) { getActionManager()->removeActionsByTagFromTarget( this, tag ); } +std::vector Node::getActionsByTag( const Uint32& tag ) { + return getActionManager()->getActionsByTagFromTarget( this, tag ); +} + void Node::clearActions() { getActionManager()->removeAllActionsFromTarget( this ); } diff --git a/src/eepp/ui/css/propertydefinition.cpp b/src/eepp/ui/css/propertydefinition.cpp index de03b7a86..bf50e815f 100644 --- a/src/eepp/ui/css/propertydefinition.cpp +++ b/src/eepp/ui/css/propertydefinition.cpp @@ -51,7 +51,8 @@ const PropertyRelativeTarget& PropertyDefinition::getRelativeTarget() const { return mRelativeTarget; } -PropertyDefinition& PropertyDefinition::setRelativeTarget( const PropertyRelativeTarget& relativeTarget ) { +PropertyDefinition& +PropertyDefinition::setRelativeTarget( const PropertyRelativeTarget& relativeTarget ) { mRelativeTarget = relativeTarget; return *this; } diff --git a/src/eepp/ui/css/shorthanddefinition.cpp b/src/eepp/ui/css/shorthanddefinition.cpp index b427e2b16..a363d51b8 100644 --- a/src/eepp/ui/css/shorthanddefinition.cpp +++ b/src/eepp/ui/css/shorthanddefinition.cpp @@ -54,45 +54,45 @@ ShorthandDefinition::parseShorthand( const ShorthandDefinition* shorthand, std:: const std::vector propNames( shorthand->getProperties() ); switch ( shorthand->getType() ) { - case ShorthandType::Box: { - if ( propNames.size() != 4 ) { - eePRINTL( "ShorthandType::Box properties must be 4 for %s", - shorthand->getName().c_str() ); - return properties; - } + case ShorthandType::Box: { + if ( propNames.size() != 4 ) { + eePRINTL( "ShorthandType::Box properties must be 4 for %s", + shorthand->getName().c_str() ); + return properties; + } - auto ltrbSplit = String::split( value, ' ', true ); + auto ltrbSplit = String::split( value, ' ', true ); - if ( ltrbSplit.size() >= 2 ) { - for ( size_t i = 0; i < ltrbSplit.size(); i++ ) - properties.emplace_back( StyleSheetProperty( propNames[i], ltrbSplit[i] ) ); - } else if ( ltrbSplit.size() == 1 ) { - for ( size_t i = 0; i < propNames.size(); i++ ) - properties.emplace_back( StyleSheetProperty( propNames[i], ltrbSplit[0] ) ); - } + if ( ltrbSplit.size() >= 2 ) { + for ( size_t i = 0; i < ltrbSplit.size(); i++ ) + properties.emplace_back( StyleSheetProperty( propNames[i], ltrbSplit[i] ) ); + } else if ( ltrbSplit.size() == 1 ) { + for ( size_t i = 0; i < propNames.size(); i++ ) + properties.emplace_back( StyleSheetProperty( propNames[i], ltrbSplit[0] ) ); + } - break; - } - case ShorthandType::Background: { - if ( Color::isColorString( value ) ) { - int pos = getIndexEndingWith( propNames, "-color" ); - if ( pos != -1 ) - properties.emplace_back( StyleSheetProperty( propNames[pos], value ) ); - } else { - int pos = getIndexEndingWith( propNames, "-image" ); - if ( pos != -1 ) - properties.emplace_back( StyleSheetProperty( propNames[pos], value ) ); + break; } - break; - } - case ShorthandType::Transition: { - break; - } - case ShorthandType::Vector2: { - break; - } - default: - break; + case ShorthandType::Background: { + if ( Color::isColorString( value ) ) { + int pos = getIndexEndingWith( propNames, "-color" ); + if ( pos != -1 ) + properties.emplace_back( StyleSheetProperty( propNames[pos], value ) ); + } else { + int pos = getIndexEndingWith( propNames, "-image" ); + if ( pos != -1 ) + properties.emplace_back( StyleSheetProperty( propNames[pos], value ) ); + } + break; + } + case ShorthandType::Transition: { + break; + } + case ShorthandType::Vector2: { + break; + } + default: + break; } return properties; diff --git a/src/eepp/ui/css/stylesheet.cpp b/src/eepp/ui/css/stylesheet.cpp index 3d362c58c..e8df40e5e 100644 --- a/src/eepp/ui/css/stylesheet.cpp +++ b/src/eepp/ui/css/stylesheet.cpp @@ -1,7 +1,7 @@ #include -#include -#include #include +#include +#include #include namespace EE { namespace UI { namespace CSS { @@ -12,7 +12,7 @@ void StyleSheet::addStyle( const StyleSheetStyle& node ) { auto nodeIt = mNodes.find( node.getSelector().getName() ); if ( nodeIt == mNodes.end() ) { - mNodes[ node.getSelector().getName() ] = node; + mNodes[node.getSelector().getName()] = node; } else { StyleSheetStyle& currentNode = nodeIt->second; @@ -54,7 +54,8 @@ void StyleSheet::combineStyleSheet( const StyleSheet& styleSheet ) { } } -StyleSheetStyleVector StyleSheet::getElementStyles( StyleSheetElement * element , const bool& applyPseudo ) { +StyleSheetStyleVector StyleSheet::getElementStyles( StyleSheetElement* element, + const bool& applyPseudo ) { StyleSheetStyleVector styles; for ( const auto& it : mNodes ) { @@ -73,4 +74,4 @@ const StyleSheetStyleList& StyleSheet::getStyles() const { return mNodes; } -}}} +}}} // namespace EE::UI::CSS diff --git a/src/eepp/ui/css/stylesheetpropertytransition.cpp b/src/eepp/ui/css/stylesheetpropertytransition.cpp index 608c1e084..9aba73ebb 100644 --- a/src/eepp/ui/css/stylesheetpropertytransition.cpp +++ b/src/eepp/ui/css/stylesheetpropertytransition.cpp @@ -8,13 +8,14 @@ namespace EE { namespace UI { namespace CSS { bool StyleSheetPropertyTransition::transitionSupported( const PropertyType& type ) { switch ( type ) { - case PropertyType::NumberFloat: - case PropertyType::NumberInt: - case PropertyType::NumberLength: - case PropertyType::Color: - return true; - default: - return false; + case PropertyType::NumberFloat: + case PropertyType::NumberInt: + case PropertyType::NumberLength: + case PropertyType::Color: + case PropertyType::Vector2: + return true; + default: + return false; } } @@ -39,13 +40,11 @@ StyleSheetPropertyTransition::StyleSheetPropertyTransition( const PropertyDefini mType( type ) {} Action* StyleSheetPropertyTransition::clone() const { - return StyleSheetPropertyTransition::New( mProperty, mStartValue, mEndValue, mDuration, - mType ); + return StyleSheetPropertyTransition::New( mProperty, mStartValue, mEndValue, mDuration, mType ); } Action* StyleSheetPropertyTransition::reverse() const { - return StyleSheetPropertyTransition::New( mProperty, mEndValue, mStartValue, mDuration, - mType ); + return StyleSheetPropertyTransition::New( mProperty, mEndValue, mStartValue, mDuration, mType ); } void StyleSheetPropertyTransition::start() { @@ -83,53 +82,87 @@ void StyleSheetPropertyTransition::onUpdate( const Time& ) { UIWidget* node = mNode->asType(); switch ( mProperty->getType() ) { - case PropertyType::NumberFloat: - case PropertyType::NumberInt: { - Float start = node->convertLength( mStartValue, 0 ); - Float end = node->convertLength( mEndValue, 0 ); - Time time = - mElapsed.asMicroseconds() > mDuration.asMicroseconds() ? mDuration : mElapsed; - Float value = easingCb[mType]( time.asMilliseconds(), start, end - start, - mDuration.asMilliseconds() ); - if ( mProperty->getType() == PropertyType::NumberFloat ) { - node->applyProperty( - StyleSheetProperty( mProperty, String::format( "%fpx", value ) ) ); - } else { - node->applyProperty( StyleSheetProperty( - mProperty, String::format( "%dpx", static_cast( value ) ) ) ); + case PropertyType::NumberFloat: + case PropertyType::NumberInt: { + Float start = node->convertLength( mStartValue, 0 ); + Float end = node->convertLength( mEndValue, 0 ); + Time time = + mElapsed.asMicroseconds() > mDuration.asMicroseconds() ? mDuration : mElapsed; + Float value = easingCb[mType]( time.asMilliseconds(), start, end - start, + mDuration.asMilliseconds() ); + if ( mProperty->getType() == PropertyType::NumberFloat ) { + node->applyProperty( + StyleSheetProperty( mProperty, String::format( "%.2fpx", value ) ) ); + } else { + node->applyProperty( StyleSheetProperty( + mProperty, String::format( "%dpx", static_cast( value ) ) ) ); + } + break; } - break; - } - case PropertyType::Color: { - break; - } - case PropertyType::NumberLength: { - Float containerLength = 0; - switch ( mProperty->getRelativeTarget() ) { - case PropertyRelativeTarget::ContainingBlockWidth: - containerLength = node->getParent()->getPixelsSize().getWidth(); + case PropertyType::Color: { + Color startColor( mStartValue ); + Color endColor( mEndValue ); + Time time = + mElapsed.asMicroseconds() > mDuration.asMicroseconds() ? mDuration : mElapsed; + Float progress = + easingCb[mType]( time.asMilliseconds(), 0, 1, mDuration.asMilliseconds() ); + Color resColor( startColor ); + resColor.r = static_cast( eemin( + static_cast( startColor.r + ( endColor.r - startColor.r ) * progress ), + 255 ) ); + resColor.g = static_cast( eemin( + static_cast( startColor.g + ( endColor.g - startColor.g ) * progress ), + 255 ) ); + resColor.b = static_cast( eemin( + static_cast( startColor.b + ( endColor.b - startColor.b ) * progress ), + 255 ) ); + resColor.a = static_cast( eemin( + static_cast( startColor.a + ( endColor.a - startColor.a ) * progress ), + 255 ) ); + node->applyProperty( StyleSheetProperty( mProperty, resColor.toHexString() ) ); break; - case PropertyRelativeTarget::ContainingBlockHeight: - containerLength = node->getParent()->getPixelsSize().getHeight(); - case PropertyRelativeTarget::LocalBlockWidth: - containerLength = node->getPixelsSize().getWidth(); + } + case PropertyType::NumberLength: { + Float containerLength = 0; + switch ( mProperty->getRelativeTarget() ) { + case PropertyRelativeTarget::ContainingBlockWidth: + containerLength = node->getParent()->getPixelsSize().getWidth(); + break; + case PropertyRelativeTarget::ContainingBlockHeight: + containerLength = node->getParent()->getPixelsSize().getHeight(); + case PropertyRelativeTarget::LocalBlockWidth: + containerLength = node->getPixelsSize().getWidth(); + break; + case PropertyRelativeTarget::LocalBlockHeight: + containerLength = node->getPixelsSize().getHeight(); + default: + break; + } + Float start = node->convertLength( mStartValue, containerLength ); + Float end = node->convertLength( mEndValue, containerLength ); + Time time = + mElapsed.asMicroseconds() > mDuration.asMicroseconds() ? mDuration : mElapsed; + Float value = easingCb[mType]( time.asMilliseconds(), start, end - start, + mDuration.asMilliseconds() ); + node->applyProperty( + StyleSheetProperty( mProperty, String::format( "%.2fpx", value ) ) ); break; - case PropertyRelativeTarget::LocalBlockHeight: - containerLength = node->getPixelsSize().getHeight(); + } + case PropertyType::Vector2: { + Vector2f start( StyleSheetProperty( mProperty, mStartValue ).asVector2f() ); + Vector2f end( StyleSheetProperty( mProperty, mEndValue ).asVector2f() ); + Time time = + mElapsed.asMicroseconds() > mDuration.asMicroseconds() ? mDuration : mElapsed; + Float x = easingCb[mType]( time.asMilliseconds(), start.x, end.x - start.x, + mDuration.asMilliseconds() ); + Float y = easingCb[mType]( time.asMilliseconds(), start.y, end.y - start.y, + mDuration.asMilliseconds() ); + node->applyProperty( + StyleSheetProperty( mProperty, String::format( "%.2f, %.2f", x, y ) ) ); + break; + } default: break; - } - Float start = node->convertLength( mStartValue, containerLength ); - Float end = node->convertLength( mEndValue, containerLength ); - Time time = - mElapsed.asMicroseconds() > mDuration.asMicroseconds() ? mDuration : mElapsed; - Float value = easingCb[mType]( time.asMilliseconds(), start, end - start, - mDuration.asMilliseconds() ); - node->applyProperty( StyleSheetProperty( mProperty, String::format( "%fpx", value ) ) ); - break; - } - default: - break; } } } diff --git a/src/eepp/ui/css/stylesheetstyle.cpp b/src/eepp/ui/css/stylesheetstyle.cpp index 5db6fd7f7..debe46a0e 100644 --- a/src/eepp/ui/css/stylesheetstyle.cpp +++ b/src/eepp/ui/css/stylesheetstyle.cpp @@ -2,13 +2,11 @@ namespace EE { namespace UI { namespace CSS { -StyleSheetStyle::StyleSheetStyle() -{} +StyleSheetStyle::StyleSheetStyle() {} -StyleSheetStyle::StyleSheetStyle( const std::string& selector, const StyleSheetProperties& properties ) : - mSelector( selector ), - mProperties( properties ) -{ +StyleSheetStyle::StyleSheetStyle( const std::string& selector, + const StyleSheetProperties& properties ) : + mSelector( selector ), mProperties( properties ) { for ( auto& it : mProperties ) { it.second.setSpecificity( mSelector.getSpecificity() ); it.second.setVolatile( !mSelector.isCacheable() ); @@ -20,7 +18,6 @@ std::string StyleSheetStyle::build() { css += mSelector.getName() + " {"; - for ( auto& it : mProperties ) { StyleSheetProperty& prop = it.second; @@ -32,7 +29,6 @@ std::string StyleSheetStyle::build() { return css; } - const StyleSheetSelector& StyleSheetStyle::getSelector() const { return mSelector; } @@ -50,12 +46,12 @@ StyleSheetProperty StyleSheetStyle::getPropertyByName( const std::string& name ) return StyleSheetProperty(); } -void StyleSheetStyle::setProperty( const StyleSheetProperty & property ) { - mProperties[ property.getName() ] = property; +void StyleSheetStyle::setProperty( const StyleSheetProperty& property ) { + mProperties[property.getName()] = property; } void StyleSheetStyle::clearProperties() { mProperties.clear(); } -}}} +}}} // namespace EE::UI::CSS diff --git a/src/eepp/ui/css/transitiondefinition.cpp b/src/eepp/ui/css/transitiondefinition.cpp index 7814f6685..4337305a0 100644 --- a/src/eepp/ui/css/transitiondefinition.cpp +++ b/src/eepp/ui/css/transitiondefinition.cpp @@ -1,9 +1,10 @@ -#include #include +#include namespace EE { namespace UI { namespace CSS { -std::map TransitionDefinition::parseTransitionProperties( const std::vector& styleSheetProperties ) { +std::map TransitionDefinition::parseTransitionProperties( + const std::vector& styleSheetProperties ) { std::vector properties; std::vector