How to design this widget?

agoose77

Hi everyone,
I'm designing a UI frontend to a compositional programming framework, and I am a little unsure of how best to design the code node widget.

Mockup

Widget mockup

I've currently composed the widget as follows:

NodeWidget
- QGraphicsLinearLayout
   - HeaderWidget ['drone']
   - FieldWidget ['score.pull_out']
      - QGraphicsLinearLayout
         - SubFieldWidget ['pre_triggered']
         - SubFieldWidget ['triggered']

A stripped down implementation can be found here

The problem

I am not sure how to right/left justify the text place the circular "sockets" over the border of the root NodeWidget.

In a previous effort, I effectively implemented the layout in NodeWidget by manually moving each FieldWidget instance, and then resizing the NodeWidget. This made it possible to do all the formatting by hand, but prevented me from using any of the nicer layout options available in Qt.

Is there a way of using QGraphicsLinearLayout for this problem, or do I need to the placement by hand? The socket widget will need to receive mouse events from user interaction.

Many thanks in advance,
Angus Hollands

mrjj

@agoose77
Hi
If the only interaction you need is clicking the socket, have you considered simply painting
the whole thing in paint and keep a list of sockets area for click hit testing?
It would make it far more light and very easy to draw overlapping things.
Just a thought as i dont know all the requirements or if you use any of the widgets signals etc.

agoose77

Thanks for the reply mrjj,

In the end, it turns out that positioning a graphicsitem outside the rect of the parent does not prevent it receiving events, so I have taken that approach!

I would do something simpler, but I plan to add more involved interaction than just sockets, so I wanted to take a more extensible approach!

mrjj

@agoose77
Then a composite widget is the way to go as you have done.
Just as a note from other post in case you want inspiration.
https://github.com/paceholder/nodeeditor