QML Node editor proof of concept. Works with my gtk themes, but may not work with others (non-dynamic spacing)

node_editor.qml

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Extras 1.4
import QtQuick.Window 2.2
import QtPositioning 5.5

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Node Demo")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    Item {
        id: node_edit
        x: 0
        y: 0
        width: window.width
        height: window.height

        Canvas {
            id: spline_canvas
            width: node_edit.width
            height: node_edit.height
            onPaint:{
                function do_spline(x1, y1, x2, y2, context) {
                    x1 += 16;
                    x2 += 16;
                    y1 += 34;
                    y2 += 34;
                    context.moveTo(x1, y1);
                    if(x1>x2) {
                        context.bezierCurveTo((x1-x2)+x1,y1,x2-(x1-x2),y2, x2, y2);
                    } else {
                        context.bezierCurveTo((x1+x2)/2,y1,(x1+x2)/2, y2, x2, y2);
                    }
                }

                var ctx = spline_canvas.getContext("2d");
                ctx.clearRect(0, 0, spline_canvas.width, spline_canvas.height);
                ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
                ctx.lineWidth = 1;
                ctx.beginPath();
                // num1 -> sum1
                do_spline(num1.x+num1_out1.x, num1.y+num1_out1.y, sum1.x+sum1_in1.x, sum1.y+sum1_in1.y, ctx);
                do_spline(num2.x+num2_out1.x, num2.y+num2_out1.y, sum1.x+sum1_in2.x, sum1.y+sum1_in2.y, ctx);
                do_spline(sum1.x+sum1_out1.x, sum1.y+sum1_out1.y, subtract1.x+subtract1_in1.x, subtract1.y+subtract1_in1.y, ctx);
                do_spline(subtract1.x+subtract1_out1.x, subtract1.y+subtract1_out1.y, output1.x+output1_in1.x, output1.y+output1_in1.y, ctx);
                ctx.stroke();
            }
        }

        Rectangle {
            id: num1
            x: 40
            y: 34
            width: 130
            height: 58
            //title: qsTr("Number")
            color: "lightblue"

            Drag.active: num1_drag_area.drag.active
            Drag.hotSpot.x: 130/2
            Drag.hotSpot.y: 58/2

            onXChanged: {
                spline_canvas.requestPaint();
            }

            onYChanged: {
                spline_canvas.requestPaint();
            }

            MouseArea {
                id: num1_drag_area
                x: 0
                y: 0
                width: 130
                height: 58
                drag.target: parent
            }

            GroupBox {
                id: num1_group
                x: 0
                y: 0
                width: num1.width
                height: num1.height
                title: qsTr("Number")

                RadioButton {
                    id: num1_out1
                    x: 112
                    y: 3
                    text: qsTr("")
                    enabled: false
                    clip: true
                    visible: true
                    checked: true
                    activeFocusOnPress: false
                }

                TextField {
                    id: textField1
                    x: 0
                    y: 0
                    text: "1"
                    placeholderText: qsTr("Number")
                    inputMask: qsTr("")
                }
            }


        }

        Rectangle {
            id: num2
            x: 40
            y: 114
            width: 130
            height: 58
            //title: qsTr("Number")
            color: "lightblue"

            Drag.active: num2_drag_area.drag.active
            Drag.hotSpot.x: 130/2
            Drag.hotSpot.y: 58/2

            onXChanged: {
                spline_canvas.requestPaint();
            }

            onYChanged: {
                spline_canvas.requestPaint();
            }

            MouseArea {
                id: num2_drag_area
                x: 0
                y: 0
                width: 130
                height: 58
                drag.target: parent
            }

            GroupBox {
                id: num2_group
                x: 0
                y: 0
                width: num2.width
                height: num2.height
                title: qsTr("Number")

                RadioButton {
                    id: num2_out1
                    x: 112
                    y: 3
                    text: qsTr("")
                    enabled: false
                    clip: true
                    visible: true
                    checked: true
                    activeFocusOnPress: false
                }

                TextField {
                    id: textField2
                    x: 0
                    y: 0
                    text: "2"
                    placeholderText: qsTr("Number")
                    inputMask: qsTr("")
                }
            }


        }

        Rectangle {
            id: sum1
            x: 214
            y: 60
            width: 142
            height: 88
            //title: qsTr("Number")
            color: "lightblue"

            Drag.active: sum1_drag_area.drag.active
            Drag.hotSpot.x: 130/2
            Drag.hotSpot.y: 58/2

            onXChanged: {
                spline_canvas.requestPaint();
            }

            onYChanged: {
                spline_canvas.requestPaint();
            }

            MouseArea {
                id: sum1_drag_area
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                drag.target: parent
            }

            GroupBox {
                id: sum1_group
                x: 0
                y: 0
                width: sum1.width
                height: sum1.height
                title: qsTr("Sum")

                RadioButton {
                    id: sum1_in1
                    x: -18
                    y: 0
                    enabled: false
                    checked: true
                }

                RadioButton {
                    id: sum1_in2
                    x: -18
                    y: 33
                    enabled: false
                    checked: true
                }

                TextField {
                    id: textField3
                    x: 12
                    y: 0
                    text: "Number 1"
                    readOnly: true
                    placeholderText: qsTr("Text Field")
                }

                TextField {
                    id: textField4
                    x: 12
                    y: 30
                    text: "Number 2"
                    readOnly: true
                    placeholderText: qsTr("Text Field")
                }

                RadioButton {
                    id: sum1_out1
                    x: 124
                    y: 17
                    enabled: false
                    checked: true
                }
            }


        }

        Rectangle {
            id: output1
            x: 475
            y: 312
            width: 134
            height: 55
            //title: qsTr("Number")
            color: "lightblue"

            Drag.active: output1_drag_area.drag.active
            Drag.hotSpot.x: 130/2
            Drag.hotSpot.y: 58/2

            onXChanged: {
                spline_canvas.requestPaint();
            }

            onYChanged: {
                spline_canvas.requestPaint();
            }

            MouseArea {
                id: output1_drag_area
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                drag.target: parent
            }

            GroupBox {
                id: output1_group
                x: 0
                y: 0
                width: output1.width
                height: output1.height
                RadioButton {
                    id: output1_in1
                    x: -17
                    y: 0
                    text: qsTr("")
                    enabled: false
                    checked: true
                    activeFocusOnPress: false
                }

                TextField {
                    id: textField5
                    x: 13
                    y: 0
                    text: 1*textField1.text + 1*textField2.text - 1*textField7.text
                    readOnly: true
                    inputMask: qsTr("")
                    placeholderText: qsTr("Number")
                }
                title: qsTr("Output")
            }


        }

        Rectangle {
            id: subtract1
            x: 426
            y: 133
            width: 142
            height: 88
            //title: qsTr("Number")
            color: "lightblue"

            Drag.active: subtract1_drag_area.drag.active
            Drag.hotSpot.x: 130/2
            Drag.hotSpot.y: 58/2

            onXChanged: {
                spline_canvas.requestPaint();
            }

            onYChanged: {
                spline_canvas.requestPaint();
            }

            MouseArea {
                id: subtract1_drag_area
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                drag.target: parent
            }

            GroupBox {
                id: subtract1_group
                x: 0
                y: 0
                width: 142
                height: 88
                RadioButton {
                    id: subtract1_in1
                    x: -18
                    y: 0
                    enabled: false
                    checked: true
                }

                RadioButton {
                    id: subtract1_in2
                    x: -18
                    y: 33
                    enabled: false
                }

                TextField {
                    id: textField6
                    x: 12
                    y: 0
                    text: "Number 1"
                    readOnly: true
                    placeholderText: qsTr("Text Field")
                }

                TextField {
                    id: textField7
                    x: 12
                    y: 30
                    text: "3"
                    readOnly: false
                    placeholderText: qsTr("Number")
                }

                RadioButton {
                    id: subtract1_out1
                    x: 124
                    y: 17
                    enabled: false
                    checked: true
                }
                title: qsTr("Subtraction")
            }


        }
    }
}