Obtain coordinates of dynamically created Component

Question

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.

EDIT 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
        }
    }
}

Answer 1

I know only one way to get a dynamically created object, which has not been attached to any variable or property - you need to find it by name or known index in data property of it's parent.

For example. Your Component.onCreated will change like this:

 Component.onCompleted: {
                var dynamicRectangle2 = Qt.createComponent("Test2.qml");
                dynamicRectangle2.createObject(parent, {x:100, y: 100, objectName: "dynamic_rectangle"})

                var index = indexOfObject("dynamic_rectangle", parent)
                if (index == -1)
                    console.debug("couldn't find an object")
                else
                    console.debug("object found at: (" + parent.data[index].x + "," + parent.data[index].y + ")")
            }

Function indexOfObject:

    // Searches for object with objectName inside parent's property 'data'
    // @param objName object name to search for
    // @param parent object where to search
    // @return -1 if not found, index if found
    function indexOfObject(objName, parent) {
        for (var i = 0 ; i < parent.data.length; i++) {
            if (parent.data[i].objectName === objName)
                return i
        }
        return -1
    }

Answer 2

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)
        }
    }
}