/******************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Quick Ultralite module.
**
** $QT_BEGIN_LICENSE:COMM$
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
******************************************************************************/

import QtQuick 2.15
import QtQuick.Shapes 1.0

ShapesEntry {
    id: root
    text: "Quadratic curve\nwith gradient"

    Rectangle {
        color: "lightGray"
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: root.contentMargins
        width: root.contentHeight
        height: root.contentHeight

        Shape {
            id: shape
            width: parent.width
            height: 100
            anchors.verticalCenter: parent.verticalCenter

            ShapePath {
                strokeWidth: 4 * root.shapeScale
                strokeColor: "black"
                fillGradient: LinearGradient {
                    x1: 50 * root.shapeScale
                    y1: 100 * root.shapeScale
                    x2: (50 + pathQuad.controlX) * root.shapeScale / 2
                    y2: 50 * root.shapeScale

                    GradientStop {
                        position: 0
                        color: "#ffffffaa"
                    }

                    GradientStop {
                        position: 1
                        color: "#ffff7788"
                    }
                }

                startX: 50 * root.shapeScale
                startY: 100 * root.shapeScale
                closed: true
                PathQuad {
                    id: pathQuad
                    x: 150 * root.shapeScale
                    y: 100 * root.shapeScale
                    controlX: cp.x; controlY: cp.y
                }
            }
        }

        Rectangle {
            id: cp
            color: "red"
            width: 10
            height: 10
            SequentialAnimation on x {
                loops: Animation.Infinite
                running: true
                NumberAnimation {
                    from: 0
                    to: shape.width - cp.width
                    duration: 5000
                }
                NumberAnimation {
                    from: shape.width - cp.width
                    to: 0
                    duration: 5000
                }
            }
        }
    }
}