UI Editor

[nobdt1]

RmlUi are there any portals provided to edit widgets on the interface conveniently and save the layouts of the widgets? My purpose is to make a UI Editor.

[mikke89]

I'm not sure I understand your question. Generally, I don't think there are any online rcss editors, but you might get decent results with any css editor. Also take a look at the faq documentation on hot reloading.

[nobdt1]

I am just starting with RmlUi, so there are many things I am not familiar with. CSS editor may not meet my needs.

I think, to build a “what you see is what you get” UI editor, we need to solve at least the following problems:

1. Add a toolbar and a menu in the interface, so if you press the button on the toolbar, a “window” will pop up in the “workspace”

2. Click the window in the “workspace”, you can set the size, color and background of the "window"

3. Click Menu—Save, you can save all the contents in the form of RML and RCSs files

[nobdt1]

Looking through the code, the DebuggerPlugin is a bit like what I want

[nobdt1]

I want to be able to drag and drop onto the form in Edit mode. Is there any way to do that other than setting handle-move_target?

[mikke89]

All of these things should be perfectly doable using the library and a bit of programming. There's no magic to it, just need to interface with the library. I think starting with the debugger plugin would be a nice place to start indeed, and then you can keep adding more features to edit and modify the contents. There are many RCSS solutions for a given layout, so you have to think about how to generate that as well.

We have pretty good drag and drop support with events, so make sure to read the documentation and drag tutorial and it should be a breeze!

Make sure to post some results when things start to come together! :)

[nobdt1]

Thank you for your reply. I have modified the example of DROP

void DragListener::ProcessEvent(Rml::Event& event)
{
	if (event == Rml::EventId::Dragdrop)
	{
		Rml::Element* dest_container = event.GetCurrentElement();
		Rml::Element* dest_element = event.GetTargetElement();
		Rml::Element* drag_element = static_cast< Rml::Element* >(event.GetParameter< void* >("drag_element", nullptr));

		Rml::ElementPtr element = drag_element->GetParentNode()->RemoveChild(drag_element);
		dest_container->AppendChild(std::move(element));

		using namespace Rml;
		Vector2f mouse_pos(event.GetParameter("mouse_x", 0.0f), event.GetParameter("mouse_y", 0.0f));
		drag_element->SetProperty(PropertyId::Position, Property(Style::Position::Absolute));
		drag_element->SetProperty(PropertyId::Left, Property(mouse_pos.x - dest_container->GetAbsoluteLeft(), Property::PX));
		drag_element->SetProperty(PropertyId::Top, Property(mouse_pos.y - dest_container->GetAbsoluteTop(), Property::PX));
...

Realize the control random position of drag and drop, but the coordinates have a certain error, it seems that also need to subtract some distance

[mikke89]

Alright, looks like you're making good progress.

[kinbei]

There is a simple demo available.