gui-with-ecs.md

Source code: https://github.com/MrSmith33/voxelman/blob/master/source/voxelman/gui

Core widget components (https://github.com/MrSmith33/voxelman/blob/master/source/voxelman/gui/components.d):

WidgetTransform - main component of any widget. Stores parent reference, relative position, absolute position, size, min size, measured size, and extra flags
WidgetStyle - color and border color
WidgetName - string of widget name
WidgetType - string of widget type (for debugging)
WidgetContainer - children widgets
WidgetIsFocusable - if set becomes focusedWidget on pointer press. focusedWidget will receive key and char events.
WidgetEvents - stores handlers for any event for the widget. Typical events:
hidden - You can attach this flag to hide widget from rendering & input

Extra widget parts (https://github.com/MrSmith33/voxelman/blob/master/source/voxelman/gui/widgets.d):

ButtonState
ChildrenStash
ConditionData
DraggableSettings
DropDownData
IconData
ImageData
LinearLayoutSettings
ListData
ScrollableData
SingleLayoutSettings
TextData
UserCheckHandler
UserClickHandler - stores handlers for button click events
WidgetIndex
WidgetReference
TextEditorViewportData
TextEditorLineNumbersData

events:

GuiUpdateEvent
DrawEvent
PointerPressEvent
PointerReleaseEvent
PointerClickEvent
PointerDoubleClickEvent
PointerMoveEvent
ScrollEvent
DragEvent
DragBeginEvent
DragEndEvent
CharEnterEvent
KeyPressEvent
KeyReleaseEvent
PointerEnterEvent
PointerLeaveEvent
FocusGainEvent
FocusLoseEvent
MeasureEvent
LayoutEvent
GroupSelectionEvent

gui state: https://github.com/MrSmith33/voxelman/blob/master/source/voxelman/gui/guicontext.d#L21

struct GuiState
{
	WidgetId draggedWidget;     /// Will receive onDrag events
	WidgetId focusedWidget;     /// Will receive all key events if input is not grabbed by other widget
	WidgetId hoveredWidget;     /// Widget over which pointer is located
	WidgetId inputOwnerWidget;  /// If set, this widget will receive all pointer movement events
	WidgetId lastClickedWidget; /// Used for double-click checking. Is set before click event distribution
	WidgetId pressedWidget;

	ivec2 canvasSize;
	ivec2 prevPointerPos = ivec2(int.max, int.max);
	ivec2 pointerPressPos = ivec2(int.max, int.max);
	ivec2 curPointerPos;

	/// filled with curPointerPos - draggedWidget.absPos at the moment of press
	ivec2 draggedWidgetOffset;

	/// Icon is reset after widget leave event and before widget enter event.
	/// If widget wants to change icon, it must set cursorIcon in PointerEnterEvent handler.
	CursorIcon cursorIcon;

	string delegate() getClipboard;
	void delegate(string) setClipboard;
}

gui context https://github.com/MrSmith33/voxelman/blob/master/source/voxelman/gui/guicontext.d#L74

gui has multiple root widgets that cover the whole canvas. This way I can layer stuff. There is special overlay layer for storing context menus, drop-down lists, tooltips.

All window events are passed to gui context and then redistributed to specific widgets depending on gui state and cursor position.

Widgets are created with a function that creates entity, attaches all the needed components, sub-widgets, and links event handlers.

Widgets can be created with builder style API:

// how frame widget is created
FrameParts createFrame(WidgetProxy parent) // parent will contain new frame
{
  // create new widget as a child of parent
	WidgetProxy frame = parent.createChild(WidgetType("Frame"))
		.setVLayout(0, padding4(0)) // set vertical layout for header and container
		.addBackground(color_clouds) // set background color
		.consumeMouse;

	auto header = frame.createChild(WidgetType("Header"))
		.addBackground(color_white)
		.hexpand; // make header expand horizontally

	auto container = frame.createChild(WidgetType("Container")).hvexpand; // make container fill the rest of the frame

  // return widget parts. Caller will then add children to the container part.
	return FrameParts(frame, header, container);
}

WidgetProxy is wrapper for WidgetId + GuiContext, so we can propagate those through builder functions.

Layout is done by providing measure and layout event handlers.

Using ecs allows to add/remove components dynamically at runtime, changing widget behavior on demand.

MrSmith33/gui-with-ecs.md