Layouting improvements for UIImage and HTML elements.

Default StyleSheetUnit is now Dp when it's not specified (this is not used very often but in HTML mode we need to respect the DPI).
Fix MarkdownView fonts color when on Light theme.

bin/assets/layouts/test.css

@@ -309,6 +309,7 @@ CheckBox:checked {
 }
 
 #test_4 > RelativeLayout > TextView {
+	margin-left: 0dp;
 	transition: all 0.2s;
 }
 

bin/assets/ui/breeze.css

@@ -52,6 +52,11 @@
 	droppable-hovering-color: #FFFFFF20;
 }
 
+markdownview > *,
+body {
+	color: var(--font);
+}
+
 b,
 strong {
 	font-style: bold;
@@ -149,6 +154,13 @@ br {
 
 img {
 	scale-type: fit-inside;
+	layout-width: wrap_content;
+	layout-height: wrap_content;
+}
+
+markdownview {
+	background-color: var(--list-back);
+	padding: 4dp;
 }
 
 markdownview h1,
@@ -157,6 +169,7 @@ markdownview h2 {
 }
 
 markdownview img {
+	max-width: 100%;
 	max-height: 100vh;
 }
 

include/eepp/ui/uiimage.hpp

@@ -59,6 +59,8 @@ class EE_API UIImage : public UIWidget {
 
 	virtual void onSizeChange();
 
+	virtual void onSizePolicyChange();
+
 	virtual void onAlignChange();
 
 	void onAutoSize();

include/eepp/ui/uilayout.hpp

@@ -48,6 +48,8 @@ class EE_API UILayout : public UIWidget {
 	void setLayoutDirty();
 
 	bool setMatchParentIfNeededVerticalGrowth();
+
+	void onAutoSizeChild( UIWidget* child );
 };
 
 }} // namespace EE::UI

include/eepp/ui/uistyle.hpp

@@ -71,6 +71,8 @@ class EE_API UIStyle : public UIState {
 
 	UnorderedSet<UIWidget*>& getStructurallyVolatileChildren();
 
+	const CSS::StyleSheetProperty* getProperty( const CSS::PropertyId& id );
+
 	bool hasProperty( const CSS::PropertyId& propertyId ) const;
 
 	bool hasLocalProperty( CSS::PropertyId propId ) const;

include/eepp/ui/uiwidget.hpp

@@ -1272,6 +1272,7 @@ class EE_API UIWidget : public UINode {
 	friend class UIManager;
 	friend class UISceneNode;
 	friend class UIEventDispatcher;
+	friend class UILayout;
 
 	std::string mTag;
 	UITheme* mTheme;

src/eepp/ui/css/stylesheetlength.cpp

@@ -117,7 +117,7 @@ StyleSheetLength::Unit StyleSheetLength::unitFromString( std::string unitStr ) {
 		case UnitHashes::Dpr:
 			return Unit::Dpr;
 	}
-	return Unit::Px;
+	return Unit::Dp;
 }
 
 std::string StyleSheetLength::unitToString( const StyleSheetLength::Unit& unit ) {

src/eepp/ui/doc/markdownhelper.cpp

@@ -14,7 +14,6 @@ std::string Markdown::toXHTML( std::string_view markdown, Dialect dialect, int f
 		( dialect == Dialect::CommonMark ? MD_DIALECT_COMMONMARK : MD_DIALECT_GITHUB ) | flags;
 	md_html( markdown.data(), markdown.size(), process_output, &out, dialectFlag,
 			 MD_HTML_FLAG_XHTML );
-
 	return out;
 }
 

src/eepp/ui/uihtmltable.cpp

@@ -1,3 +1,4 @@
+#include "eepp/ui/uistyle.hpp"
 #include <algorithm>
 #include <eepp/ui/uihtmltable.hpp>
 
@@ -27,6 +28,12 @@ void UIHTMLTable::updateLayout() {
 	mPacking = true;
 	setMatchParentIfNeededVerticalGrowth();
 
+	const StyleSheetProperty* prop = nullptr;
+	if ( getLayoutWidthPolicy() == SizePolicy::Fixed && mStyle &&
+		 ( prop = mStyle->getProperty( PropertyId::Width ) ) ) {
+		setInternalPixelsSize( { lengthFromValue( *prop, mSize.x ), mSize.getHeight() } );
+	}
+
 	UIHTMLTableHead* head = nullptr;
 	UIHTMLTableBody* body = nullptr;
 	UIHTMLTableFooter* footer = nullptr;

src/eepp/ui/uiimage.cpp

@@ -88,24 +88,70 @@ UIImage* UIImage::setDrawable( Drawable* drawable, bool ownIt ) {
 }
 
 void UIImage::onAutoSize() {
-	if ( NULL != mDrawable ) {
-		if ( ( mFlags & UI_AUTO_SIZE ) && Sizef::Zero == getPixelsSize() )
-			setInternalPixelsSize( mDrawable->getPixelsSize().asInt().asFloat() );
+	if ( nullptr == mDrawable )
+		return;
 
-		Sizef size( getPixelsSize() );
+	Sizef drawableSize = mDrawable->getPixelsSize();
+	if ( drawableSize.getWidth() <= 0 || drawableSize.getHeight() <= 0 )
+		return;
 
-		if ( mWidthPolicy == SizePolicy::WrapContent ) {
-			size.x =
-				( (int)mDrawable->getPixelsSize().getWidth() + mPaddingPx.Left + mPaddingPx.Right );
+	Sizef size( getPixelsSize() );
+	Sizef initialSize( size );
+
+	if ( ( mFlags & UI_AUTO_SIZE ) && Sizef::Zero == getPixelsSize() )
+		size = drawableSize.asInt().asFloat();
+
+	if ( mWidthPolicy == SizePolicy::WrapContent && mHeightPolicy == SizePolicy::WrapContent ) {
+		size.x = (int)drawableSize.getWidth() + mPaddingPx.Left + mPaddingPx.Right;
+		size.y = (int)drawableSize.getHeight() + mPaddingPx.Top + mPaddingPx.Bottom;
+
+		if ( !mMaxWidthEq.empty() ) {
+			Float maxWidth =
+				lengthFromValue( mMaxWidthEq, CSS::PropertyRelativeTarget::ContainingBlockWidth );
+
+			if ( size.x > maxWidth ) {
+				Float scale =
+					( maxWidth - mPaddingPx.Left - mPaddingPx.Right ) / drawableSize.getWidth();
+				size.x = maxWidth;
+				size.y =
+					(int)( drawableSize.getHeight() * scale ) + mPaddingPx.Top + mPaddingPx.Bottom;
+			}
 		}
 
-		if ( mHeightPolicy == SizePolicy::WrapContent ) {
-			size.y = ( (int)mDrawable->getPixelsSize().getHeight() + mPaddingPx.Top +
-					   mPaddingPx.Bottom );
-		}
+		if ( !mMaxHeightEq.empty() ) {
+			Float maxHeight =
+				lengthFromValue( mMaxHeightEq, CSS::PropertyRelativeTarget::ContainingBlockHeight );
 
-		setPixelsSize( size );
+			if ( size.y > maxHeight ) {
+				Float scale =
+					( maxHeight - mPaddingPx.Top - mPaddingPx.Bottom ) / drawableSize.getHeight();
+				size.y = maxHeight;
+				size.x =
+					(int)( drawableSize.getWidth() * scale ) + mPaddingPx.Left + mPaddingPx.Right;
+			}
+		}
+	} else if ( mWidthPolicy == SizePolicy::WrapContent ) {
+		Float contentHeight = std::max( 0.f, size.y - mPaddingPx.Top - mPaddingPx.Bottom );
+		size.x = (int)( contentHeight * ( drawableSize.getWidth() / drawableSize.getHeight() ) ) +
+				 mPaddingPx.Left + mPaddingPx.Right;
+		if ( !mMaxWidthEq.empty() ) {
+			size.x = std::min(
+				size.x,
+				lengthFromValue( mMaxWidthEq, CSS::PropertyRelativeTarget::ContainingBlockWidth ) );
+		}
+	} else if ( mHeightPolicy == SizePolicy::WrapContent ) {
+		Float contentWidth = std::max( 0.f, size.x - mPaddingPx.Left - mPaddingPx.Right );
+		size.y = (int)( contentWidth * ( drawableSize.getHeight() / drawableSize.getWidth() ) ) +
+				 mPaddingPx.Top + mPaddingPx.Bottom;
+		if ( !mMaxHeightEq.empty() ) {
+			size.y = std::min(
+				size.y, lengthFromValue( mMaxHeightEq,
+										 CSS::PropertyRelativeTarget::ContainingBlockHeight ) );
+		}
 	}
+
+	if ( initialSize != size )
+		setInternalPixelsSize( size );
 }
 
 void UIImage::calcDestSize() {
@@ -234,6 +280,11 @@ void UIImage::onSizeChange() {
 	UIWidget::onSizeChange();
 }
 
+void UIImage::onSizePolicyChange() {
+	onAutoSize();
+	UIWidget::onSizePolicyChange();
+}
+
 void UIImage::onAlignChange() {
 	UIWidget::onAlignChange();
 	onAutoSize();
@@ -352,6 +403,10 @@ bool UIImage::applyProperty( const StyleSheetProperty& attribute ) {
 		case PropertyId::Tint:
 			setColor( attribute.asColor() );
 			break;
+		case PropertyId::Width:
+		case PropertyId::Height:
+			unsetFlags( UI_AUTO_SIZE );
+			return UIWidget::applyProperty( attribute );
 		default:
 			return UIWidget::applyProperty( attribute );
 	}

src/eepp/ui/uilayout.cpp

@@ -122,4 +122,8 @@ bool UILayout::setMatchParentIfNeededVerticalGrowth() {
 	return sizeChanged;
 }
 
+void UILayout::onAutoSizeChild( UIWidget* child ) {
+	child->onAutoSize();
+}
+
 }} // namespace EE::UI

src/eepp/ui/uinode.cpp

@@ -332,7 +332,7 @@ void UINode::setMaxSizeEq( const std::string& maxWidthEq, const std::string& max
 void UINode::setMaxWidthEq( const std::string& maxWidthEq ) {
 	if ( mMaxWidthEq != maxWidthEq ) {
 		mMaxWidthEq = maxWidthEq;
-		setSize( mDpSize );
+		onSizeChange();
 	}
 }
 
@@ -343,7 +343,7 @@ const std::string& UINode::getMaxHeightEq() const {
 void UINode::setMaxHeightEq( const std::string& maxHeightEq ) {
 	if ( mMaxHeightEq != maxHeightEq ) {
 		mMaxHeightEq = maxHeightEq;
-		setSize( mDpSize );
+		onSizeChange();
 	}
 }
 
@@ -1576,12 +1576,20 @@ Float UINode::getPropertyRelativeTargetContainerLength(
 	const Uint32& propertyIndex ) const {
 	Float containerLength = defaultValue;
 	switch ( relativeTarget ) {
-		case PropertyRelativeTarget::ContainingBlockWidth:
-			containerLength = getParent() ? getParent()->getPixelsSize().getWidth() : 0;
+		case PropertyRelativeTarget::ContainingBlockWidth: {
+			Node* parent = getParent(); // Text spans cannot be considered containing blocks
+			while ( parent->isType( UI_TYPE_TEXTSPAN ) )
+				parent = parent->getParent();
+			containerLength = parent ? parent->getPixelsSize().getWidth() : 0;
 			break;
-		case PropertyRelativeTarget::ContainingBlockHeight:
-			containerLength = getParent() ? getParent()->getPixelsSize().getHeight() : 0;
+		}
+		case PropertyRelativeTarget::ContainingBlockHeight: {
+			Node* parent = getParent(); // Text spans cannot be considered containing blocks
+			while ( parent->isType( UI_TYPE_TEXTSPAN ) )
+				parent = parent->getParent();
+			containerLength = parent ? parent->getPixelsSize().getHeight() : 0;
 			break;
+		}
 		case PropertyRelativeTarget::LocalBlockWidth:
 			containerLength = getPixelsSize().getWidth();
 			break;

src/eepp/ui/uirichtext.cpp

@@ -492,6 +492,9 @@ void UIRichText::rebuildRichText() {
 				 widget->getLayoutWidthPolicy() == SizePolicy::MatchParent ) {
 				widget->setPixelsSize( mSize.getWidth() - margin.Left - margin.Right,
 									   widget->getPixelsSize().getHeight() );
+			} else if ( widget->getLayoutWidthPolicy() == SizePolicy::WrapContent ||
+						widget->getLayoutHeightPolicy() == SizePolicy::WrapContent ) {
+				onAutoSizeChild( widget );
 			}
 
 			Sizef size = widget->getPixelsSize();

src/eepp/ui/uistyle.cpp

@@ -209,6 +209,15 @@ UnorderedSet<UIWidget*>& UIStyle::getStructurallyVolatileChildren() {
 	return mStructurallyVolatileChildren;
 }
 
+const CSS::StyleSheetProperty* UIStyle::getProperty( const CSS::PropertyId& id ) {
+	const CSS::StyleSheetProperty* prop = nullptr;
+	if ( mGlobalDefinition && ( prop = mGlobalDefinition->getProperty( (Uint32)id ) ) )
+		return prop;
+	if ( mElementStyle )
+		prop = mElementStyle->getPropertyById( id );
+	return prop;
+}
+
 bool UIStyle::hasProperty( const CSS::PropertyId& propertyId ) const {
 	return ( mGlobalDefinition && mGlobalDefinition->getProperty( (Uint32)propertyId ) ) ||
 		   ( mElementStyle && mElementStyle->getPropertyById( propertyId ) );

src/eepp/ui/uiwidget.cpp

@@ -1640,11 +1640,21 @@ bool UIWidget::applyProperty( const StyleSheetProperty& attribute ) {
 			notifyLayoutAttrChange();
 			break;
 		case PropertyId::Width:
+			if ( mStyle ) {
+				mStyle->setStyleSheetProperty(
+					StyleSheetProperty( "layout-width", attribute.value(), true,
+										StyleSheetSelectorRule::SpecificityImportant ) );
+			}
 			setLayoutWidthPolicy( SizePolicy::Fixed );
 			setSize( eefloor( lengthFromValueAsDp( attribute ) ), getSize().getHeight() );
 			notifyLayoutAttrChange();
 			break;
 		case PropertyId::Height:
+			if ( mStyle ) {
+				mStyle->setStyleSheetProperty(
+					StyleSheetProperty( "layout-height", attribute.value(), true,
+										StyleSheetSelectorRule::SpecificityImportant ) );
+			}
 			setLayoutHeightPolicy( SizePolicy::Fixed );
 			setSize( getSize().getWidth(), eefloor( lengthFromValueAsDp( attribute ) ) );
 			notifyLayoutAttrChange();

src/eepp/ui/uiwidgetcreator.cpp

@@ -1,6 +1,6 @@
+#include <eepp/ui/tools/uidiffview.hpp>
 #include <eepp/ui/tools/uiimageviewer.hpp>
 #include <eepp/ui/tools/uitextureviewer.hpp>
-#include <eepp/ui/tools/uidiffview.hpp>
 #include <eepp/ui/uicheckbox.hpp>
 #include <eepp/ui/uicodeeditor.hpp>
 #include <eepp/ui/uicombobox.hpp>
@@ -165,7 +165,9 @@ void UIWidgetCreator::createBaseWidgetList() {
 			return UILinearLayout::NewVerticalWidthMatchParent( "article" );
 		};
 		registeredWidget["center"] = [] {
-			return UILinearLayout::NewVerticalWidthMatchParent( "center" );
+			auto center = UIRichText::NewWithTag( "center" );
+			center->setLayoutWidthPolicy( SizePolicy::WrapContent );
+			return center;
 		};
 		registeredWidget["html"] = [] {
 			return UILinearLayout::NewVerticalWidthMatchParent( "html" );

src/tools/ecode/ecode.cpp

@@ -2290,6 +2290,9 @@ void App::closeEditors() {
 
 	saveProject();
 
+	mSplitter->setCurrentEditor( nullptr );
+	mSplitter->setCurrentWidget( nullptr );
+
 	std::vector<UICodeEditor*> editors = mSplitter->getAllEditors();
 	while ( !editors.empty() ) {
 		UICodeEditor* editor = editors[0];