PathView: disable dragging/flicking between certain path elements because of wrong direction?

Andreas P

Hi,
I want a PathView to rotate its 5 items on a circle (or actually a triangle) around the y-axis. See this screenshot:

So they all should have the same y-value (y=300 in the example code below) on every path position. I realized that this doesn't work: the items started flickering while being dragged. So I had to change some values to 299 and 298. Now I still got the problem, that the items move to the wrong direction, if I touch them in the upper half to flick or drag them. If I touch them in the lower half, they move to the correct direction. I assume the reason is, that the PathView thinks I want to drag an item along the path (800|298)->(100|298) (blue and yellow rectangle in the screenshot) although I touch the front item (red rectangle).
If it's not clear what my problem is, try the code below.

Is it possible to disable dragging and flicking for that specific path section? How?
Or is there a different solution? If I move my finger to the right, I want the items to move right at the front and left at the back, as displayed in the screenshot. No matter if I touch the upper or lower half.
Sadly none of the other path elements (PathQuad, PathCubic etc.) contains a z-value.

Rectangle {
        x: 50; y: 50
        width: 900; height: 600
        color: "grey"

        PathView {
            id: pathView
            anchors.fill: parent
            model: myModel
            delegate: myDelegate
            dragMargin: 300
            path: Path {
                startX: 450; startY: 300
                PathAttribute { name: "elementScale"; value: 1.0 }
                PathAttribute { name: "elementZ"; value: 2 }

                PathLine { x: 650; y: 299 }
                PathPercent { value: 0.2 }
                PathAttribute { name: "elementScale"; value: 0.7 }
                PathAttribute { name: "elementZ"; value: 1 }

                PathLine { x: 800; y: 298 }
                PathPercent { value: 0.4 }
                PathAttribute { name: "elementScale"; value: 0.5 }
                PathAttribute { name: "elementZ"; value: 0 }

                // adding this just inverts the drag/flick direction between upper and lower half
                /*PathLine { x: 450; y: 301 }
                PathPercent { value: 0.5 }
                PathAttribute { name: "elementScale"; value: 0.5 }
                PathAttribute { name: "elementZ"; value: -1 }*/

                PathLine { x: 100; y: 298 }
                PathPercent { value: 0.6 }
                PathAttribute { name: "elementScale"; value: 0.5 }
                PathAttribute { name: "elementZ"; value: 0 }

                PathLine { x: 250; y: 299 }
                PathPercent { value: 0.8 }
                PathAttribute { name: "elementScale"; value: 0.7 }
                PathAttribute { name: "elementZ"; value: 1 }

                PathLine { x: 450; y: 300 }
                PathPercent { value: 1.0 }
            }
        }

        Component {
            id: myDelegate
            Rectangle {
                width: 400; height: 600
                color: modelColor

                scale: PathView.elementScale
                z: PathView.elementZ
            }
        }

        ListModel {
            id: myModel
            ListElement  {
                modelColor: "red"
            }
            ListElement  {
                modelColor: "green"
            }
            ListElement  {
                modelColor: "blue"
            }
            ListElement  {
                modelColor: "yellow"
            }
            ListElement  {
                modelColor: "orange"
            }
        }

        Rectangle {
            width: parent.width; height: 1
            y: 300
            color: "black"
        }
    }

Andreas P

I just thought of maybe adding a MouseArea above the upper half and somehow redirect its events to the PathView. But this way I will probably lose the flick functionality, and furthermore one of those 5 rectangles will contain a MultiTouchArea, so that's no solution, I think. (Yeah I won't be able to drag/flick the items when starting my touch inside the MultiTouchArea.)

Diracsbracket

@Andreas-P
Your path def is unnecessarily complicated. The code below does what you are trying to achieve, it seems?

What about something like:

Rectangle {
        x: 50; y: 50
        width: 900; height: 600
        color: "grey"

        PathView {
            id: pathView
            anchors.fill: parent
            model: myModel
            delegate: myDelegate
            dragMargin: 300

            snapMode: PathView.SnapToItem
            maximumFlickVelocity: width

            preferredHighlightBegin:0.5
            preferredHighlightEnd:0.5

            clip: true

            path: Path {
                id:flowViewPath

                readonly property real yCoord: pathView.height/2

                startX: 0
                startY: flowViewPath.yCoord

                PathAttribute{name:"elementZ"; value: 0}
                PathAttribute{name:"elementScale"; value: 0.3}

                PathLine {
                    x: pathView.width*0.5
                    y: flowViewPath.yCoord
                }

                PathAttribute{name:"elementZ";value:100}
                PathAttribute{name:"elementScale";value:1.0}

                PathLine {
                    x: pathView.width
                    y: flowViewPath.yCoord
                }

                PathAttribute{name:"elementZ";value:0}
                PathAttribute{name:"elementScale";value:0.3}

                PathPercent{value:1.0}
            }
        }

        Component {
            id: myDelegate
            Rectangle {
                width: 400; height: 600
                color: modelColor

                scale: PathView.elementScale
                z: PathView.elementZ
            }
        }

        ListModel {
            id: myModel
            ListElement  {modelColor: "red"}
            ListElement  {modelColor: "green"}
            ListElement  {modelColor: "blue"}
            ListElement  {modelColor: "yellow"}
            ListElement  {modelColor: "orange"}
        }

        Rectangle {
            width: parent.width;
            height: 1
            x: 0
            y: flowViewPath.yCoord
            color: "black"
        }
    }

Andreas P

Yes, this indeed does what I wanted to do. It's the first time I'm working with a PathView and it looks like I thought too complicated. Thank you very much!