Drag clickable circles and their letters in x-direction

[bchinfosieeuw]

I have a two files (Circle.qml and Letter.qml). On click of the mousearea a circle is placed along with the text of letter, because the Circle.qml refers to the Letter.qml file. Now I want to move the letter in x-direction on drag of the Circle in x-direction. I have tried this with a timer using beneath code, but you can click different circles with their own letters; each of the circle/letter combinations have to be movable independently. Now sometimes the link between circle and letter is not made, and sometimes the same circle is linked with multiple letters causing all these letters of other circles to be moved in x-direction. My questions:
- how can I get the program working as I described?
- do I follow the right approach (for example using a timer)?
- if not, which approach should I follow?


Circle.qml

Rectangle {
        id: circle
        x: ...
        y: ...
        radius:  {
                //linkscoretoanalysis.source = "Letter.qml";
                Global.j++
                Global.scoretoanalysisXarray[Global.i] = circle.x+8;
        }
        MouseArea {

Rectangle {
        id: circle
        x: ...
        y: ...
        radius:  {
                //linkscoretoanalysis.source = "Letter.qml";
                Global.j++
                Global.scoretoanalysisXarray[Global.i] = circle.x+8;
        }
        MouseArea {

To copy to clipboard, switch view to plain text mode 

Letter.qml

Text {
        id: letter
        x: ...
        y: ...
        text: {
            if(Global.i > 0){
                Global.i++
            }
            ...
       }
       MouseArea {
             onClicked: {
                mytimer.running = true;
                Global.timerbool = true;
            }
            Timer {
                id: mytimer
                interval: 1
                repeat: true
                running: true
                onTriggered: {
                    letter.x = Global.scoretoanalysisXarray[Global.i];
 
                    if(Global.i < Global.j){
                        Global.i=1
                        Global.j=1
                        console.log("if1");
                    }
 
                    if(Global.timerbool == false){
                        mytimer.running = false;
                    }
                }
            }

Text {
        id: letter
        x: ...
        y: ...
        text: {
            if(Global.i > 0){
                Global.i++
            }
            ...
       }
       MouseArea {
             onClicked: {
                mytimer.running = true;
                Global.timerbool = true;
            }
            Timer {
                id: mytimer
                interval: 1
                repeat: true
                running: true
                onTriggered: {
                    letter.x = Global.scoretoanalysisXarray[Global.i];

                    if(Global.i < Global.j){
                        Global.i=1
                        Global.j=1
                        console.log("if1");
                    }

                    if(Global.timerbool == false){
                        mytimer.running = false;
                    }
                }
            }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

You have all kinds of "Global" stuff in there, maybe some values from a "pragma library" JS file?

If the letter is to be bound to a circle, why not just do that using anchors?

Cheers,
_

[bchinfosieeuw]

Can you refer me to a website that explains using anchors on items in different files? Or provide some source? What I have now is

Letter {
        id: myletter
        anchors.left: circle.right
    }

Letter {
        id: myletter
        anchors.left: circle.right
    }

To copy to clipboard, switch view to plain text mode 

[wysota]

e.g.

Circle {
  Letter {
    anchors.left: parent.right
    anchors.verticalCenter: parent.verticalCenter
  }
}

Circle {
  Letter {
    anchors.left: parent.right
    anchors.verticalCenter: parent.verticalCenter
  }
}

To copy to clipboard, switch view to plain text mode 

[bchinfosieeuw]

Wysota, where do I have to place that code?

[wysota]

Wherever you want to declare a circle with a letter attached to it.

[bchinfosieeuw]

Obviously I cannot place it in Circle.qml or Letter.qml. Do I have to place it in main.qml? Given the clickable circles and their letters of my first post, where do I have to put the code in order to attach the letters to their circles on dragging?

[wysota]

Maybe it's best if you again describe what exactly you want to achieve. Apparently I misunderstood you. Just please don't use code when explaining - just describe what your task is and how you intend to achieve it.

[bchinfosieeuw]

In Circle.qml there is a mousearea inside a rectangle (called circle) to be able to click several circles on the screen. In Letter.qml there is also such a mousearea to click text on the screen. There is used a Loader to put letters on the screen when a new circle is made; the letters belong to these circles and should be moved synchronous in x-direction on dragging the circles. Anda Skoa said I could best connect the letters with the circles using anchors. Now I'm asking how to use the anchors because the letters and circles are in different files and can be clicked on the screen dynamically.
Thanks in advance.

[bchinfosieeuw]

In Circle.qml there is a mousearea inside a rectangle (called circle) to be able to click several circles on the screen. In Letter.qml there is also such a mousearea to click text (letters) on the screen. There is used a Loader to put letters on the screen when a new circle is made; the letters belong to these circles and should be moved synchronous in x-direction on dragging the circles. Maybe I could best connect the letters with the circles using anchors. But how to use the anchors? (the letters and circles are in different files and can be clicked on the screen dynamically.)
Should I use Global variables and put
import "... .js" as Global
above the file?
How should I use another approach using anchors?

[wysota]

"Files" correspond to "types". What you want is to control "instances" so it doesn't matter which "files" their types had been declared in. What matters is where you create instances of those types as you need to operate on instances and not types. Have a look at Component element and its createObject() method.