title: QML how to get the position of Loader
body: <p>I want generate a binary tree like flow to show organization relationship info with QML.<a href="http://i.stack.imgur.com/yrBk5.png" rel="nofollow">enter image description here</a></p>
  
  <p>My way:   </p>
  
  <ol>
  <li>Create tree node like flow example.</li>
  <li>Line the tree nodes with Canvas like above picture. I want get the
  point and draw line after Loader.onLoaded.</li>
  </ol>
  
  <p>My question:</p>
  
  <p>After the first step has been done. In the second step, I can't get the right position point of the tree node.</p>
  
  <p>Details: </p>
  
  <p>According to Qt document, if I don't set the width and height of Loader explicitly, it will automatically set by its item size. However, I can't get the node position point in <code>Loader.onloaded()</code></p>
  
  <pre><code>import QtQuick 2.3
  import QtQuick.Window 2.2
  
  Window {
      id: appWindow
  
      visible: true
      width: 1066
      height: 600
  
      property var jsonData: [{"id":1,"pid":0},{"id":2,"pid":1},{"id":3,"pid":1},
          {"id":4,"pid":2},{"id":5,"pid":2},{"id":6,"pid":3},
          {"id":7,"pid":3},{"id":8,"pid":4},{"id":9,"pid":4},{"id":10,"pid":6}]
      property int maxRectangles: 5
      Component.onCompleted: {
          var color = Qt.lighter("red", maxRectangles / 7)
          pLoader.sourceComponent = rectangleComponent;
          var currItem = pLoader.item;
          currItem.color = "blue"
          currItem.text = 0
  
          var tmp = {};
          tmp[jsonData[0]["id"]] = currItem ;
  
          for(var index = 1; index &lt; jsonData.length; index++) {
              color = Qt.lighter("red", index / 7)
              var sItem = jsonData[index]["pid"];
              if(tmp[sItem].rComponent.sourceComponent === null){
                  tmp[sItem].rComponent.sourceComponent = rectangleComponent
                  attachData(tmp[sItem].rComponent.item,index, color);
                  tmp[jsonData[index]["id"]] = tmp[sItem].rComponent.item ;
              }
              else {
                  tmp[sItem].lComponent.sourceComponent = rectangleComponent
                  attachData(tmp[sItem].lComponent.item,index, color);
                  tmp[jsonData[index]["id"]] = tmp[sItem].lComponent.item ;
              }
          }
      }
      function attachData(item, text, color){
          item.text = text;
          item.color = color
      }
  
      Component {
          id: rectangleComponent
          Column{
              property alias rComponent: rightLoader
              property alias lComponent: leftLoader
              property alias color: rect.color
              property alias text: myText.text
              spacing: 40
              //anchors.horizontalCenter: parent.horizontalCenter
              Rectangle {
                  anchors.horizontalCenter: parent.horizontalCenter
                  id:rect
                  width: 100
                  height: 100
                  Text{
                      id:myText
                      font.pixelSize: 18
                      anchors.centerIn: parent
                      color:"white"
                  }
                  Component.onCompleted: {
                      console.log("Component.onCompleted", mapToItem(canvas, 0, 0))
                  }
  
                  MouseArea {
                      anchors.fill: parent
                      onClicked: {
                          updateDotPosition(parent)
                          //here, printed coordinate is my expected
                          //but i want line them after tree node loaded antomate
                          console.log("updateDotPosition", mapToItem(canvas, 0, 0))
                      }
                  }
              }
  
              Row{
                  spacing: 40
                  anchors.horizontalCenter: parent.horizontalCenter
                  Loader {
                      id:leftLoader
                      onLoaded: {
                          console.log("leftLoader", mapToItem(canvas, 0, 0))
                      }
                  }
                  Loader {
                      id:rightLoader
                      onLoaded: {
                          console.log("rightLoader", mapToItem(canvas, 0, 0))
                      }
                  }
              }
          }
      }
  
      Canvas{
          anchors.fill: parent
          id:canvas
          Loader {
              id:pLoader
              anchors.horizontalCenter: parent.horizontalCenter
              //sourceComponent: rectangleComponent
          }
      }
  
      Rectangle {
          id: testMapToItemDot
          width: 20
          height: width
          radius: width / 2
          z: 1
          color: "darkblue"
      }
  
      function updateDotPosition(itemToMap) {
          var pos = testMapToItemDot.mapFromItem(
                      itemToMap,
                      (itemToMap.width - testMapToItemDot.width) / 2,   // these parameters are optional - I want to move the dot to
                      (itemToMap.height - testMapToItemDot.height) / 2) // the center of the object, not upper left corner
          testMapToItemDot.x += pos.x
          testMapToItemDot.y += pos.y
      }
  }
  </code></pre>