Added CSSPropertiesModel.

ecode: Improved inspect view.

README.md

@@ -342,9 +342,8 @@ Here is a small example on how the CSS looks like:
 
 Since eepp supports emscripten you can take a quick look on some of the examples, demos and tools that
 the library currently provides. Please be aware that you'll find some differences based on the limitations
-that emscripten have at the moment (no threads, no access to the file system, no custom cursors, etc).
-Note: please wait some seconds until the resources are loaded, currently there is no loading indicator.
-Also please use a modern browser with good WebGL and WASM support (Chrome/ium 70+ or Firefox 80+).
+that emscripten have at the moment (no access to the file system, no custom cursors, etc).
+Note: Please use a modern browser with good WebGL and WASM support (Chrome/ium 70+ or Firefox 80+).
 
 * **[ecode - Text Editor](https://cdn.ensoft.dev/eepp-demos/demo-fs.html?run=ecode.js)**
 

include/eepp/ui.hpp

@@ -76,6 +76,7 @@
 #include <eepp/ui/tools/uicolorpicker.hpp>
 #include <eepp/ui/tools/uidocfindreplace.hpp>
 
+#include <eepp/ui/models/csspropertiesmodel.hpp>
 #include <eepp/ui/models/filesystemmodel.hpp>
 #include <eepp/ui/models/model.hpp>
 #include <eepp/ui/models/modelselection.hpp>

include/eepp/ui/models/csspropertiesmodel.hpp

@@ -0,0 +1,88 @@
+#ifndef EE_UI_MODELS_CSSPROPERTIESMODEL_HPP
+#define EE_UI_MODELS_CSSPROPERTIESMODEL_HPP
+
+#include <eepp/ui/css/propertydefinition.hpp>
+#include <eepp/ui/css/stylesheetspecification.hpp>
+#include <eepp/ui/models/model.hpp>
+#include <eepp/ui/uiwidget.hpp>
+
+using namespace EE::UI::CSS;
+
+namespace EE { namespace UI { namespace Models {
+
+class CSSPropertiesModel final : public Model {
+  public:
+	static std::shared_ptr<CSSPropertiesModel> create( UIWidget* widget ) {
+		return std::make_shared<CSSPropertiesModel>( widget );
+	}
+
+	static std::shared_ptr<CSSPropertiesModel> create() {
+		return std::make_shared<CSSPropertiesModel>();
+	}
+
+	virtual size_t rowCount( const ModelIndex& ) const { return mData.size(); }
+
+	virtual size_t columnCount( const ModelIndex& ) const { return 2; }
+
+	virtual std::string columnName( const size_t& idx ) const {
+		return idx == 1 ? "Property" : "Value";
+	}
+
+	virtual Variant data( const ModelIndex& index, ModelRole role = ModelRole::Display ) const {
+		if ( mWidget == nullptr )
+			return {};
+		PropertyId propId = mData[index.row()];
+		const PropertyDefinition* def = mProps.at( propId );
+		if ( !def )
+			return {};
+		if ( role == ModelRole::Display ) {
+			switch ( index.column() ) {
+				case 1:
+					return Variant( mWidget->getPropertyString( def ) );
+				case 0:
+				default:
+					return Variant( def->getName().c_str() );
+			}
+		}
+		return {};
+	}
+
+	virtual void update() { onModelUpdate(); }
+
+	CSSPropertiesModel() {}
+
+	explicit CSSPropertiesModel( UIWidget* widget ) { setWidget( widget ); }
+
+	virtual ~CSSPropertiesModel() {
+		if ( mCloseCb )
+			mWidget->removeEventListener( mCloseCb );
+	}
+
+	void setWidget( UIWidget* widget ) {
+		if ( mWidget && mCloseCb )
+			mWidget->removeEventListener( mCloseCb );
+		mWidget = widget;
+		mData = widget ? widget->getPropertiesImplemented() : std::vector<PropertyId>();
+		for ( const auto& prop : mData ) {
+			const auto* def = StyleSheetSpecification::instance()->getProperty( (Uint32)prop );
+			if ( !def )
+				continue;
+			mProps[prop] = def;
+		}
+		if ( mWidget )
+			mCloseCb = mWidget->addEventListener( Event::OnClose,
+												  [this]( const Event* ) { mWidget = nullptr; } );
+	}
+
+	UIWidget* getWidget() const { return mWidget; }
+
+  protected:
+	UIWidget* mWidget{ nullptr };
+	std::vector<PropertyId> mData;
+	std::map<PropertyId, const PropertyDefinition*> mProps;
+	Uint32 mCloseCb{ 0 };
+};
+
+}}} // namespace EE::UI::Models
+
+#endif // EE_UI_MODELS_CSSPROPERTIESMODEL_HPP

projects/linux/ee.files

@@ -341,6 +341,7 @@
 ../../include/eepp/ui/doc/undostack.hpp
 ../../include/eepp/ui/keyboardshortcut.hpp
 ../../include/eepp/ui/marginmove/scale.hpp
+../../include/eepp/ui/models/csspropertiesmodel.hpp
 ../../include/eepp/ui/models/filesystemmodel.hpp
 ../../include/eepp/ui/models/itemlistmodel.hpp
 ../../include/eepp/ui/models/model.hpp

projects/linux/ee.includes

@@ -10,9 +10,3 @@
 /usr/lib64/gcc/x86_64-suse-linux/10/include
 ../../src/modules/eterm/src/
 ../../src/modules/eterm/include/
-../../src/modules/eterm/include/eterm/ui
-../../src/modules/eterm/src/eterm/ui
-../../include/eepp/ui/tools
-../../src/eepp/ui/tools
-../../src/eepp/ui
-../../include/eepp/ui

src/eepp/ui/uisplitter.cpp

@@ -124,9 +124,21 @@ bool UISplitter::applyProperty( const StyleSheetProperty& attribute ) {
 			setSplitPartition( StyleSheetLength( attribute.asString() ) );
 		case PropertyId::SplitterAlwaysShow:
 			setAlwaysShowSplitter( attribute.asBool() );
+		case PropertyId::Orientation: {
+			std::string val = attribute.asString();
+			String::toLowerInPlace( val );
+
+			if ( "horizontal" == val )
+				setOrientation( UIOrientation::Horizontal );
+			else if ( "vertical" == val )
+				setOrientation( UIOrientation::Vertical );
+			break;
+		}
 		default:
 			return UILayout::applyProperty( attribute );
 	}
+
+	return true;
 }
 
 std::string UISplitter::getPropertyString( const PropertyDefinition* propertyDef,
@@ -139,6 +151,8 @@ std::string UISplitter::getPropertyString( const PropertyDefinition* propertyDef
 			return getSplitPartition().toString();
 		case PropertyId::SplitterAlwaysShow:
 			return alwaysShowSplitter() ? "true" : "false";
+		case PropertyId::Orientation:
+			return getOrientation() == UIOrientation::Horizontal ? "horizontal" : "vertical";
 		default:
 			return UILayout::getPropertyString( propertyDef, propertyIndex );
 	}

src/eepp/ui/uitextinput.cpp

@@ -132,39 +132,16 @@ void UITextInput::draw() {
 
 		if ( mTextCache->getTextWidth() ) {
 			drawSelection( mTextCache );
-
-			//			if ( getClipType() == ClipType::PaddingBox ) {
-			//				clipSmartEnable( mScreenPos.x + mPaddingPx.Left, mScreenPos.y +
-			//mPaddingPx.Top, 								 mSize.getWidth() - mPaddingPx.Left - mPaddingPx.Right,
-			//								 mSize.getHeight() - mPaddingPx.Top - mPaddingPx.Bottom
-			//);
-			//			}
-
 			mTextCache->setAlign( getFlags() );
 			mTextCache->draw( (Float)mScreenPosi.x + (int)mRealAlignOffset.x + (int)mPaddingPx.Left,
 							  mFontLineCenter + (Float)mScreenPosi.y + (int)mRealAlignOffset.y +
 								  (int)mPaddingPx.Top,
 							  Vector2f::One, 0.f, getBlendMode() );
-
-			//			if ( getClipType() == ClipType::PaddingBox ) {
-			//				clipSmartDisable();
-			//			}
 		} else if ( !mHintCache->getString().empty() ) {
-			//			if ( getClipType() == ClipType::PaddingBox ) {
-			//				clipSmartEnable( mScreenPos.x + mPaddingPx.Left, mScreenPos.y +
-			//mPaddingPx.Top, 								 mSize.getWidth() - mPaddingPx.Left - mPaddingPx.Right,
-			//								 mSize.getHeight() - mPaddingPx.Top - mPaddingPx.Bottom
-			//);
-			//			}
-
 			mHintCache->draw( (Float)mScreenPosi.x + (int)mRealAlignOffset.x + (int)mPaddingPx.Left,
 							  mFontLineCenter + (Float)mScreenPosi.y + (int)mRealAlignOffset.y +
 								  (int)mPaddingPx.Top,
 							  Vector2f::One, 0.f, getBlendMode() );
-
-			//			if ( getClipType() == ClipType::PaddingBox ) {
-			//				clipSmartDisable();
-			//			}
 		}
 	}
 

src/tools/ecode/ecode.cpp

@@ -548,7 +548,7 @@ App::~App() {
 	eeSAFE_DELETE( mConsole );
 }
 
-void App::checkWidgetPick( UITreeView* widgetTree, bool wasHighlightOver ) {
+void App::checkWidgetPick( UITreeView* widgetTree, bool wasHighlightOver, UITableView* tableView ) {
 	Input* input = mWindow->getInput();
 	if ( input->getClickTrigger() & EE_BUTTON_LMASK ) {
 		Node* node = mUISceneNode->getEventDispatcher()->getMouseOverNode();
@@ -558,8 +558,8 @@ void App::checkWidgetPick( UITreeView* widgetTree, bool wasHighlightOver ) {
 		mUISceneNode->setHighlightOver( wasHighlightOver );
 		mUISceneNode->getEventDispatcher()->setDisableMousePress( false );
 	} else {
-		mUISceneNode->runOnMainThread( [this, widgetTree, wasHighlightOver]() {
-			checkWidgetPick( widgetTree, wasHighlightOver );
+		mUISceneNode->runOnMainThread( [this, widgetTree, wasHighlightOver, tableView]() {
+			checkWidgetPick( widgetTree, wasHighlightOver, tableView );
 		} );
 	}
 }
@@ -579,7 +579,10 @@ void App::createWidgetInspector() {
 			<CheckBox id="debug-draw-boxes" text='@string(debug_draw_boxes, "Draw Boxes")' margin-left="4dp" lg="center" />
 			<CheckBox id="debug-draw-debug-data" text='@string(debug_draw_debug_data, "Draw Debug Data")' margin-left="4dp" lg="center" />
 		</hbox>
-		<treeview lw="mp" lh="fixed" lw8="1" />
+		<Splitter layout_width="match_parent" lh="fixed" lw8="1" splitter-partition="50%">
+			<treeview lw="fixed" lh="mp" />
+			<tableview lw="fixed" lh="mp" />
+		</Splitter>
 	</vbox>
 	)xml",
 														 uiWin->getContainer() );
@@ -591,14 +594,26 @@ void App::createWidgetInspector() {
 	auto model = WidgetTreeModel::New( mUISceneNode );
 	widgetTree->setModel( model );
 	widgetTree->tryOpenModelIndex( model->getRoot() );
+	UITableView* tableView = cont->findByType<UITableView>( UI_TYPE_TABLEVIEW );
+	tableView->setAutoColumnsWidth( true );
+	tableView->setHeadersVisible( true );
+	widgetTree->setOnSelection( [&, tableView]( const ModelIndex& index ) {
+		Node* node = static_cast<Node*>( index.internalData() );
+		if ( node->isWidget() ) {
+			tableView->setModel( node->isWidget()
+									 ? CSSPropertiesModel::create( node->asType<UIWidget>() )
+									 : CSSPropertiesModel::create() );
+		}
+	} );
+
 	UIPushButton* button = cont->find<UIPushButton>( "pick_widget" );
-	button->addEventListener( Event::MouseClick, [&, widgetTree]( const Event* event ) {
+	button->addEventListener( Event::MouseClick, [&, widgetTree, tableView]( const Event* event ) {
 		if ( event->asMouseEvent()->getFlags() & EE_BUTTON_LMASK ) {
 			bool wasHighlightOver = mUISceneNode->getHighlightOver();
 			mUISceneNode->setHighlightOver( true );
 			mUISceneNode->getEventDispatcher()->setDisableMousePress( true );
-			mUISceneNode->runOnMainThread( [this, widgetTree, wasHighlightOver]() {
-				checkWidgetPick( widgetTree, wasHighlightOver );
+			mUISceneNode->runOnMainThread( [this, widgetTree, tableView, wasHighlightOver]() {
+				checkWidgetPick( widgetTree, wasHighlightOver, tableView );
 			} );
 		}
 	} );

src/tools/ecode/ecode.hpp

@@ -357,7 +357,7 @@ class App : public UICodeEditorSplitter::Client {
 
 	void initPluginManager();
 
-	void checkWidgetPick( UITreeView* widgetTree, bool wasHighlightOver );
+	void checkWidgetPick( UITreeView* widgetTree, bool wasHighlightOver, UITableView* tableView );
 
 	void onPluginEnabled( UICodeEditorPlugin* plugin );
 };