QML Component not moved enough left?

[eragon]

I am having an issue positioning my custom QML component correctly. The component is an label with a line coming out of it (an annotation).

To get the line to point to a specific point all I need to do is set the components x to target.x - width. Ie, move the whole component left. But this is not moving it far enough left. Any idea why?

I get this result where the annotation line should point to the blue rectangle:

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Shapes 1.0

Item {

    property int slant: 10;
    property int voffset: 50;
    property int hoffset: 150;
    property point target: Qt.point(300, 300);

    implicitWidth: annotationLbl.implicitWidth + (slant*4);
    implicitHeight: annotationLbl.implicitHeight + (slant*2);
    x: target.x - width;
    y: target.y - height;

    // Draw line on right
    Shape {
        id: annotationLine
        x: parent.width - slant
        y: parent.height * 0.5
        ShapePath {
            strokeWidth: 2
            strokeColor: "Red"
            fillColor: "transparent"
            startX: 0; startY: 0
            PathLine { x: hoffset*0.15; y: 0 }
            PathLine { x: hoffset*0.35; y: voffset-annotationLbl.height }
        }
    }

    // Draw label shape
    Shape {
        id: annotationShp
        width: parent.width
        height: parent.height
        anchors.centerIn: parent
        ShapePath {
            strokeWidth: 0
            strokeColor: "transparent"
            fillColor: "Red"
            startX: slant; startY: 0
            PathLine { x: width; y: 0 }
            PathLine { x: width - slant; y: height }
            PathLine { x: 0; y: height }
        }

        Label {
            id: annotationLbl
            anchors.centerIn: parent
            text: "Foo"
        }
    }
}

Usage:

Annotation {
    target: Qt.point(300, 300);
}

[CKurdu]

Hi,
I don't understand your logic exactly but codes below working with correct left coordinate according to target.

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Shapes 1.0

Item {
    id: root
    property int slant: 10;
    property int voffset: 50;
    property int hoffset: 100;
    property point target: Qt.point(300, 300);

    implicitWidth: annotationLbl.implicitWidth + (slant*4);
    implicitHeight: annotationLbl.implicitHeight + (slant*2);
    x: target.x - width - hoffset
    y: target.y - height - voffset

    // Draw line on right
    Shape {
        id: annotationLine
        x: parent.width - slant
        y: parent.height * 0.5
        ShapePath {
            strokeWidth: 2
            strokeColor: "Red"
            fillColor: "transparent"
            startX: 0; startY: 0
            PathLine { x: hoffset*0.30; y: 0 }
            PathLine { x: hoffset + slant * 2; y: root.height/2 + voffset}
        }
    }

    // Draw label shape
    Shape {
        id: annotationShp
        width: parent.width
        height: parent.height
        anchors.centerIn: parent
        ShapePath {
            strokeWidth: 0
            strokeColor: "transparent"
            fillColor: "Red"
            startX: slant; startY: 0
            PathLine { x: width; y: 0 }
            PathLine { x: width - slant; y: height }
            PathLine { x: 0; y: height }
        }

        Label {
            id: annotationLbl
            anchors.centerIn: parent
            text: "Foo"
            font.pixelSize:10
        }
    }
}

Why don't you make it with anchors? It seems right to use it.