// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.15
import QtQuick.Shapes 1.0

ShapesEntry {
    id: root
    text: "Cubic curve"

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

        Shape {
            id: shape
            anchors.fill: parent

            ShapePath {
                strokeWidth: 4 * root.shapeScale
                strokeColor: "black"
                fillColor: "#55ff7788"

                startX: 50 * root.shapeScale
                startY: 150 * root.shapeScale
                PathCubic {
                    x: 150 * root.shapeScale
                    y: 150 * root.shapeScale
                    control1X: cp1.x; control1Y: cp1.y
                    control2X: cp2.x; control2Y: cp2.y
                }
            }
        }

        Rectangle {
            id: cp1
            color: "red"
            width: 10; height: 10
            SequentialAnimation {
                loops: Animation.Infinite
                running: true
                NumberAnimation {
                    target: cp1
                    property: "x"
                    from: 0
                    to: shape.width - cp1.width
                    duration: 5000
                }
                NumberAnimation {
                    target: cp1
                    property: "x"
                    from: shape.width - cp1.width
                    to: 0
                    duration: 5000
                }
                NumberAnimation {
                    target: cp1
                    property: "y"
                    from: 0
                    to: shape.height - cp1.height
                    duration: 5000
                }
                NumberAnimation {
                    target: cp1
                    property: "y"
                    from: shape.height - cp1.height
                    to: 0
                    duration: 5000
                }
            }
        }

        Rectangle {
            id: cp2
            color: "blue"
            width: 10; height: 10
            x: shape.width - width
            SequentialAnimation {
                loops: Animation.Infinite
                running: true
                NumberAnimation {
                    target: cp2
                    property: "y"
                    from: 0
                    to: shape.height - cp2.height
                    duration: 5000
                }
                NumberAnimation {
                    target: cp2
                    property: "y"
                    from: shape.height - cp2.height
                    to: 0
                    duration: 5000
                }
                NumberAnimation {
                    target: cp2
                    property: "x"
                    from: shape.width - cp2.width
                    to: 0
                    duration: 5000
                }
                NumberAnimation {
                    target: cp2
                    property: "x"
                    from: 0
                    to: shape.width - cp2.width
                    duration: 5000
                }
            }
        }
    }
}