Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Obtain coordinates of dynamically created Component



  • I have a main drop area which when loaded creates a new rectangle component dynamically. The newly created rectangle component is draggable inside the drag area. But, I don't know how to get the coordinates of the new rectangle component on the drag area when the rectangle is dragged/dropped.

    I somehow need the new coordinate data in the Drop Area code

    Code for the Drop Area

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Layouts 1.3
    
    Page{
        
        id: page1
    
        // On Dropped
        function onDropAreaDropped(drag){
            console.log(JSON.stringify(drag))
        }
    
        // On Entered
        function onDropAreaEntered(drag){
            console.log(JSON.stringify(drag))
        }
    
        // This is the Drop area code
        Rectangle{
            id: dropRectangle
            color: "beige"
            width: parent.width
            height: parent.height
    
            DropArea {
                id: dropArea
                anchors.fill: parent
                onEntered: onDropAreaEntered(drag)
                onDropped: onDropAreaDropped(drag)
            }
    
            // This creates the new rectangle component
            Component.onCompleted: {
                var dynamicRectangle2 = Qt.createComponent("Test2.qml");
                dynamicRectangle2.createObject(parent, {x:100, y: 100})
            }
        }
    }
    
    

    Code for Test2.qml - Rectangle component

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    
    Page {
        id : somepageid
    
        Rectangle{
            id:dragRect
    
            height: 40
            width: 60
            color: "blue"
          
            // Need this x and y coordinate data in the drop area component
            onXChanged: {
                console.log(dragRect.x)
            }
            onYChanged: {
                console.log(dragRect.y)
            }
    
            MouseArea{
                id: mArea
                anchors.fill: parent
                drag.target: dragRect
            }
        }
    }
    


  • I have solved the problem by using signals and slots. I connected the signals emitted from Mouse actions in the new rectangle to the slots mentioned in the main area using

            // This creates the new rectangle component
            Component.onCompleted: {
                var dynamicRectangle2 = Qt.createComponent("Test2.qml");
    
                // Assign new variable to the created object
                // Use this variable to connect the signals and slots
                var newRect =  dynamicRectangle2.createObject(root, {x:100, y: 100})
                newRect.dragged.connect(onDropAreaEntered)
                newRect.dropped.connect(onDropAreaDropped)
            }
    

    Here are the complete codes

    Drop Area

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Layouts 1.3
    
    Page{
    
        id: root
    
        // On Dropped
        function onDropAreaDropped(x,y){
            console.log("Dropped" , x, y)
        }
    
        // On Entered
        function onDropAreaEntered(x,y){
            console.log("Dragging" , x, y)
        }
    
        // This is the Drop area code
        Rectangle{
            id: dropRectangle
            color: "beige"
            width: parent.width
            height: parent.height
    
            DropArea {
                id: dropArea
                anchors.fill: parent
                onEntered: onDropAreaEntered(drag)
                onDropped: onDropAreaDropped(drag)
            }
    
            // This creates the new rectangle component
            Component.onCompleted: {
                var dynamicRectangle2 = Qt.createComponent("Test2.qml");
    
                // Assign new variable to the created object
                // Use this variable to connect the signals and slots
                var newRect =  dynamicRectangle2.createObject(root, {x:100, y: 100})
                newRect.dragged.connect(onDropAreaEntered)
                newRect.dropped.connect(onDropAreaDropped)
            }
        }
    
    }
    

    Code for Test2.qml - Rectangle component

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    
    Rectangle{
        id:dragRect
    
        height: 40
        width: 60
        color: "blue"
    
        signal dragged(double x, double y);
        signal dropped(double x, double y);
    
        MouseArea{
            id: mArea
            anchors.fill: parent
            drag.target: dragRect
    
            onReleased: {
                dragRect.dropped(dragRect.x, dragRect.y)
            }
    
            onPositionChanged: {
                dragRect.dragged(dragRect.x, dragRect.y)
            }
        }
    }
    


  • I have solved the problem by using signals and slots. I connected the signals emitted from Mouse actions in the new rectangle to the slots mentioned in the main area using

            // This creates the new rectangle component
            Component.onCompleted: {
                var dynamicRectangle2 = Qt.createComponent("Test2.qml");
    
                // Assign new variable to the created object
                // Use this variable to connect the signals and slots
                var newRect =  dynamicRectangle2.createObject(root, {x:100, y: 100})
                newRect.dragged.connect(onDropAreaEntered)
                newRect.dropped.connect(onDropAreaDropped)
            }
    

    Here are the complete codes

    Drop Area

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Layouts 1.3
    
    Page{
    
        id: root
    
        // On Dropped
        function onDropAreaDropped(x,y){
            console.log("Dropped" , x, y)
        }
    
        // On Entered
        function onDropAreaEntered(x,y){
            console.log("Dragging" , x, y)
        }
    
        // This is the Drop area code
        Rectangle{
            id: dropRectangle
            color: "beige"
            width: parent.width
            height: parent.height
    
            DropArea {
                id: dropArea
                anchors.fill: parent
                onEntered: onDropAreaEntered(drag)
                onDropped: onDropAreaDropped(drag)
            }
    
            // This creates the new rectangle component
            Component.onCompleted: {
                var dynamicRectangle2 = Qt.createComponent("Test2.qml");
    
                // Assign new variable to the created object
                // Use this variable to connect the signals and slots
                var newRect =  dynamicRectangle2.createObject(root, {x:100, y: 100})
                newRect.dragged.connect(onDropAreaEntered)
                newRect.dropped.connect(onDropAreaDropped)
            }
        }
    
    }
    

    Code for Test2.qml - Rectangle component

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    
    Rectangle{
        id:dragRect
    
        height: 40
        width: 60
        color: "blue"
    
        signal dragged(double x, double y);
        signal dropped(double x, double y);
    
        MouseArea{
            id: mArea
            anchors.fill: parent
            drag.target: dragRect
    
            onReleased: {
                dragRect.dropped(dragRect.x, dragRect.y)
            }
    
            onPositionChanged: {
                dragRect.dragged(dragRect.x, dragRect.y)
            }
        }
    }
    

Log in to reply