import QtQuick 1.0

//
// This file describes the graphics objects displayed within a TimelineTrack.
// It contains:
//     - a dragger displayed as a "rail" and used to set the start time of the animation associated with the timeline track (animation or animation group)
//       This dragger consists in 2 rectangle with one can be dragged along the x axis.
//     - an indicator used to highlight the area corresponding to the time range of the associated animation group.
//       For a timeline track on an animation group instance, the matching animation group is the associated one.
//       For a timeline track on an animation instance, the matching animation group is the parent of the associated animation.
//       This indicator will be displayed only when dragging the associated animation group.
//

Rectangle {

    id: timelineTrackGraphicsObject
    objectName: "timelineTrackGraphicsObject"

    height: 7

    Rectangle {

            id: animationGroupDraggerIndicator
            objectName: "animationGroupDraggerIndicator"

            //
            // This rectangle corresponds to the indicator used to highlight the area corresponding to the time range of the associated animation group.
            //

            property real xMin: 0
            property real xMax: 200

            x: xMin
            y: 0
            width: xMax-xMin
            height: 11
            color: "#00AEFF"
            opacity: 0.25

            state: "hidden"

            //
            // States of the animation group indicator:
            //     - "shown": when the indicator is displayed. Set when dragging the associated animation group.
            //     - "hidden": when the indicator is not displayed. Set when the associated animation group is not being dragged.
            //
            states: [
                State {
                    name: "shown"
                    PropertyChanges {
                        target: animationGroupDraggerIndicator
                        opacity: 0.25
                    }
                },
                State {
                    name: "hidden"
                    PropertyChanges {
                        target: animationGroupDraggerIndicator
                        opacity: 0
                    }
                }
            ]
        }

    Rectangle {

        id: animationRailDraggerBkg
        objectName: "animationRailDraggerBkg"

        //
        // This rectangle corresponds to the background part of the "rail" dragger.
        //

        signal entered
        signal exited

        gradient: Gradient {
            GradientStop { position: 0.0; color: "#B8BABC" }
            GradientStop { position: 1.0; color: "#D1D3D6" }
        }

        width: 100
        height: timelineTrackGraphicsObject.height
        radius: 3
        smooth: true
        state: "disabled" // In "disabled" state by default.

        MouseArea {
            id: animationRailDraggerBkgMouseArea
            hoverEnabled: true
            anchors.fill: animationRailDraggerBkg
            onEntered: { animationRailDraggerBkg.state = "enabled"; animationRailDraggerBkg.entered(); }
            onExited: { if ( !animationRailDraggerMouseArea.drag.active ) { animationRailDraggerBkg.state = "disabled"; animationRailDraggerBkg.exited(); } }
        }

        Rectangle {

            id: animationRailDragger
            objectName: "animationRailDragger"

            //
            // This rectangle corresponds to the draggable part of the "rail" dragger.
            //

            property real xMin: 0
            property real xMax: 200
            property bool canBeSnapped: false

            signal pressed
            signal released
            signal positionChanged

            gradient: Gradient {
                GradientStop { id: animationRailDraggerGradientStop1; position: 0.0; color: "#6A6A6A" }
                GradientStop { id: animationRailDraggerGradientStop2; position: 1.0; color: "#505050" }
            }

            x: xMin
            y: 0
            width: xMax-xMin
            height: animationRailDraggerBkg.height
            radius: animationRailDraggerBkg.radius
            smooth: animationRailDraggerBkg.smooth

            state: "unlocked"

            MouseArea {
                id: animationRailDraggerMouseArea
                hoverEnabled: true
                anchors.fill: animationRailDragger
                onPressed: { animationRailDragger.pressed(); animationRailDragger.canBeSnapped = true }
                onReleased: { animationRailDragger.released(); animationRailDragger.canBeSnapped = false; if ( !animationRailDraggerBkg.containsMouse) { animationRailDraggerBkg.state = "disabled"; animationRailDraggerBkg.exited(); } }
                onPositionChanged: animationRailDragger.positionChanged()
                onEntered: { animationRailDraggerBkgMouseArea.entered() }
                onExited: { animationRailDraggerBkgMouseArea.exited() }
            }

            states: [
                State {
                    name: "locked"
                    PropertyChanges {
                        target: animationRailDraggerMouseArea
                    }
                },
                State {
                    name: "unlocked"
                    PropertyChanges {
                        target: animationRailDraggerMouseArea
                        drag.target: animationRailDragger
                        drag.axis: Drag.XAxis
                        drag.minimumX: 0
                    }
                }
            ]
        }

        //
        // States of the "rail" dragger:
        //     - "disabled": when the mouse cursor is not over the "rail" dragger area.
        //     - "enabled": when the mouse cursor is over the "rail" dragger area.
        //
        states: [
            State {
                name: "disabled"
                PropertyChanges {
                    target: animationRailDraggerBkg
                    opacity: 0.01
                }
            },
            State {
                name: "enabled"
                PropertyChanges {
                    target: animationRailDraggerBkg
                    opacity: 1
                }
            }
        ]
    }
}