Qml Node Action

Yunus

Hi all, I have a draggable node which I extract from first block with mouse, And for example I will release it on the second block. As soon as I release it, I want the program to do some action, let say it can give me "Hello World". How can I achieve this? Here is the code and image from the output.

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: 1000
height: 480
title: qsTr("Node Demo")
property var aNumber: 100
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) {

                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_out1.x+num1.x+16, num1.y+num1_out1.y+34, node.x+5, node.y+8, ctx);



            ctx.stroke();
        }
    }

    Rectangle {
        id: num1
        x: 40
        y: 34
        width: 130
        height: 58
        //first block
        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("FirstBlock")

            RadioButton {
                id: num1_out1
                x: 112
                y: 3
                text: qsTr("")
                enabled: false
                clip: true
                visible: true
                checked: true
                activeFocusOnPress: false
            }
            RadioButton {
                id: sum1_in4
                x: -18
                y: 0
                enabled: false
                checked: true
            }
        }
    }
    Rectangle{
        id:node
        width: 15
        height: 15
        x:160
        y:64
        Drag.active: sum1_drag_area.drag.active

        onXChanged: {
            spline_canvas.requestPaint();
        }

        onYChanged: {
            spline_canvas.requestPaint();
        }
        MouseArea {
            id: sum1_drag_area22
            x: 0
            y: 0
            width: parent.width
            height: parent.height
            drag.target: parent
        }
    RadioButton {
        id: sum1_in1
        x: 0
        y: 0
        enabled: false
        checked: true

}

    }

    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("SecondBlock")

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


        }


    }





}

}

0_1549287164222_Screenshot from 2019-02-04 16-25-28.png

ODБOï

hi,
@Yunus said in Qml Node Action:

As soon as I release it, I want the program to do some action

Mousearea has released signal
so you can call what you need like this :

onReleased : {/* call() */}

example will check if 'node' is inside 'num2' when you release it, hope it can help

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: 1000
    height: 480
    title: qsTr("Node Demo")
    property var aNumber: 100

    Item {
        id: node_edit
        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) {

                    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_out1.x+num1.x+16, num1.y+num1_out1.y+34, node.x+5, node.y+8, ctx);

                ctx.stroke();
            }
        }

        Rectangle {
            id: num1
            x: 40
            y: 34
            width: 130
            height: 58
            //first block
            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
                drag.target: parent
                anchors.fill: parent
            }

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

                RadioButton {
                    id: num1_out1
                    x: 112
                    y: 3
                    text: qsTr("")
                    enabled: false
                    clip: true
                    visible: true
                    checked: true
                    activeFocusOnPress: false
                }
                RadioButton {
                    id: sum1_in4
                    x: -18
                    y: 0
                    enabled: false
                    checked: true
                }
            }
        }
        Rectangle{
            id:node
            width: 15
            height: 15
            // Drag.active: sum1_drag_area.drag.active
            onXChanged: {
                spline_canvas.requestPaint();
            }
            onYChanged: {
                spline_canvas.requestPaint();
            }
            MouseArea {
                id: sum1_drag_area22
                drag.target: parent
                anchors.fill: parent
         // this can be done better manner (MouseArea has 'containsMouse' property ), but here is a version witout changing your structure/encapsulation
     
                function isInside(e, where){
                    if(e.x>=where.x&&e.x<=(where.x+where.width) && e.y>=where.y&& e.y<=(where.y+where.height)){
                        return true
                    }else{
                        return false
                    }
                }

                onMouseXChanged: {
                    if(isInside(node,num2)){
                        num2.color= "darkblue"
                    }else{
                        num2.color= "lightblue"
                    }
                }
                onReleased: {
                    console.log("Released")
                    if(isInside(node,num2)){
                        console.log("Released inside num2")
                    }
                }
            }
            RadioButton {
                id: sum1_in1
                enabled: false
                checked: true
            }

        }

        Rectangle {
            id: num2
            width: 130
            height: 58
            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
                anchors.fill: parent
                drag.target: parent
                hoverEnabled: true // > enable hovering
            }

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

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

    }
}

note : please use topic tool to properly past your code.
not really related but you can see Qt Quick - Positioning to avoid manual positioning

Yunus

@LeLev Thanks for your reply. I also tried it. But there happened some problems. My actual question is that how to merge small node and the second block. By the way blocks are movable too.