diff --git a/README.md b/README.md index cdb908afe..cfa9b099e 100644 --- a/README.md +++ b/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)** diff --git a/include/eepp/ui.hpp b/include/eepp/ui.hpp index 067a5889e..18509272b 100644 --- a/include/eepp/ui.hpp +++ b/include/eepp/ui.hpp @@ -76,6 +76,7 @@ #include #include +#include #include #include #include diff --git a/include/eepp/ui/models/csspropertiesmodel.hpp b/include/eepp/ui/models/csspropertiesmodel.hpp new file mode 100644 index 000000000..f824763a8 --- /dev/null +++ b/include/eepp/ui/models/csspropertiesmodel.hpp @@ -0,0 +1,88 @@ +#ifndef EE_UI_MODELS_CSSPROPERTIESMODEL_HPP +#define EE_UI_MODELS_CSSPROPERTIESMODEL_HPP + +#include +#include +#include +#include + +using namespace EE::UI::CSS; + +namespace EE { namespace UI { namespace Models { + +class CSSPropertiesModel final : public Model { + public: + static std::shared_ptr create( UIWidget* widget ) { + return std::make_shared( widget ); + } + + static std::shared_ptr create() { + return std::make_shared(); + } + + 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(); + 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 mData; + std::map mProps; + Uint32 mCloseCb{ 0 }; +}; + +}}} // namespace EE::UI::Models + +#endif // EE_UI_MODELS_CSSPROPERTIESMODEL_HPP diff --git a/projects/linux/ee.files b/projects/linux/ee.files index eb5f3e784..ea97e95ae 100644 --- a/projects/linux/ee.files +++ b/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 diff --git a/projects/linux/ee.includes b/projects/linux/ee.includes index 33d722d85..4a587d98d 100644 --- a/projects/linux/ee.includes +++ b/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 diff --git a/src/eepp/ui/uisplitter.cpp b/src/eepp/ui/uisplitter.cpp index 894c8ab4c..6408a2aba 100644 --- a/src/eepp/ui/uisplitter.cpp +++ b/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 ); } diff --git a/src/eepp/ui/uitextinput.cpp b/src/eepp/ui/uitextinput.cpp index 6d04f38a5..6b0967771 100644 --- a/src/eepp/ui/uitextinput.cpp +++ b/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(); - // } } } diff --git a/src/tools/ecode/ecode.cpp b/src/tools/ecode/ecode.cpp index 3fbeafba5..7bb1d3a4a 100644 --- a/src/tools/ecode/ecode.cpp +++ b/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() { - + + + + )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( UI_TYPE_TABLEVIEW ); + tableView->setAutoColumnsWidth( true ); + tableView->setHeadersVisible( true ); + widgetTree->setOnSelection( [&, tableView]( const ModelIndex& index ) { + Node* node = static_cast( index.internalData() ); + if ( node->isWidget() ) { + tableView->setModel( node->isWidget() + ? CSSPropertiesModel::create( node->asType() ) + : CSSPropertiesModel::create() ); + } + } ); + UIPushButton* button = cont->find( "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 ); } ); } } ); diff --git a/src/tools/ecode/ecode.hpp b/src/tools/ecode/ecode.hpp index add1fe23a..d164397b6 100644 --- a/src/tools/ecode/ecode.hpp +++ b/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 ); };