reference_qml/GeneralBizUI/controls/slider/ParamSettingSliderView.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Window
import FusionUI
import GeneralBiz
import FunctionPanel

import VECreator
import GeneralBizUI
/**************************************************************************

*   @fileName      ParamSettingSliderView.qml

*   @projectName   JianyingPro & CapCut

*   @date          2022-10-17

*   @author        linyang.yl

* @brief Encapsulate PanelLabel VESpinBoxSlider VEKeyFrame (optional) logic

* - The height of the slider is [automatically calculated], do not specify the height outside

* - Column is commonly used externally to layout multiple parameter sliders

*                  - Usage

                        Column {

                            spacing: root.sliderSpacing

                            anchors {

                                left: parent.left

                                right: parent.right

                            }

                            // Multiple sliders with consistent behavior can be fitted with a Repeater

                            Repeater {

                                model: xxx

                                ParamSettingSliderView {

                                    width: parent.width

                                }

                            }

                        }

* - Use the state machine model to implement "one-click" configuration slider line wrapping

* - Use alias as much as possible to maintain consistency with the native usage posture

* - For the scenes where [no line breaks], the upper and lower kMargin (4) margins are set according to the design draft.

* Therefore, when laying out the external margins, you only need to consider the spacing of [line wrapping scenario]

* If the design draft is not to be broken, then set spacing = not to be broken spacing - 2 * kMargin

*   @copyright     Copyright © 2022 Bytedance All rights reserved.

**************************************************************************/

Item {
    id: root
    Accessible.name: {
        return VEQmlHelper.GetAutomationIDName(this)
    }
    property bool isWrap: CAPCUT   // Set whether Label and SpinBoxSlider are displayed in new lines
    property real labelWidth: 50
    property real spinBoxSliderHeight: 22
    property bool keyFrameVisible: false
    property bool inPanelKeyBtn: false
    property bool showHelp: false
    property string helpText
    property bool needLeftMarginInWrap: sliderType === VESpinBoxSlider.SliderType.Degree  // Degree mode, need to leave blank on the left

    property real kLeftMargin: 56 // In the case of no line breaking, the spacing for the text part is left
    readonly property real kRightMargin: 4 // In the scene where there is a keyframe button, the spacing left between the keyframe button
    // Fill in the upper and lower margins in scenes where text does not wrap lines, so when using column layout, you do not need to consider both overseas and domestic spacing settings at the same time when using the column layout.
    readonly property real kMargin: 4
    
    property string spinboxSliderAccessibleName : "slider"

    property var checkValueViewModel: null
    property bool checkScaleX: false
    property bool checkScaleY: false

    // PanelLabel attribute, supports setting VIP icon
    property alias text: panelLabel.text
    property alias textColor: panelLabel.textColor
    property alias isVipFun: panelLabel.isVipFun
    property alias isLimitFreeFunc: panelLabel.isLimitFreeFunc
    property alias useImplicitWidth: panelLabel.useImplicitWidth
    property alias vipIdentifier: panelLabel.vipIdentifier

    // SpinBoxSlider property, see: VESpinBoxSlider.qml, only alias bridge is used here.
    property alias curValue: spinboxSlider.curValue
    property alias maxValue: spinboxSlider.maxValue
    property alias minValue: spinboxSlider.minValue
    property alias maxValueSlider: spinboxSlider.maxValueSlider
    property alias minValueSlider: spinboxSlider.minValueSlider
    property alias separateEditLimit: spinboxSlider.separateEditLimit
    property alias maxEditValue: spinboxSlider.maxEditValue
    property alias minEditValue: spinboxSlider.minEditValue
    property alias alignmentLimit: spinboxSlider.alignmentLimit
    property alias minRangeValue: spinboxSlider.minRangeValue
    property alias minRangeText: spinboxSlider.minRangeText
    property alias markValue: spinboxSlider.markValue
    property alias decimals: spinboxSlider.decimals
    property alias textInputDecimals: spinboxSlider.textInputDecimals
    property alias stepSize: spinboxSlider.stepSize
    property alias wheelStepSize: spinboxSlider.wheelStepSize
    property alias unitChar: spinboxSlider.unitChar
    property alias throttleInterval: spinboxSlider.throttleInterval
    property alias spinBoxWidth: spinboxSlider.width
    property alias spinBoxRoundingMode: spinboxSlider.spinBoxRoundingMode
    property alias disableColor: spinboxSlider.disableColor
    property alias isBackgroudGradient: spinboxSlider.isBackgroudGradient
    property alias sliderHeight: spinboxSlider.sliderHeight
    property alias textInputUpdateValue: spinboxSlider.textInputUpdateValue
    property alias inputMethod: spinboxSlider.inputMethod
    property alias isMix: spinboxSlider.isMix
    property alias isAdjusting: spinboxSlider.isAdjusting
    property alias autoPauseWhenAdjusting: spinboxSlider.autoPauseWhenAdjusting
    property alias sliderType: spinboxSlider.sliderType
    property alias spinBoxLeftMargin: spinboxSlider.spinBoxLeftMargin
    property alias triggerPart: spinboxSlider.triggerPart
    property alias progressColor: spinboxSlider.progressColor
    property alias backgroudGradientStartColor: spinboxSlider.backgroudGradientStartColor
    property alias backgroudGradientEndColor: spinboxSlider.backgroudGradientEndColor
    property alias backgroundColor: spinboxSlider.backgroundColor
    property alias degreeTable : spinboxSlider.degreeTable
    property alias linear : spinboxSlider.linear
    property alias hideBeginPort : spinboxSlider.hideBeginPort
    property alias hideEndPort : spinboxSlider.hideEndPort
    property alias markColor : spinboxSlider.markColor
    property alias markWidth : spinboxSlider.markWidth
    property alias markAbsorbRange : spinboxSlider.markAbsorbRange
    property alias useDisableIcon : spinboxSlider.useDisableIcon
    property alias spinboxTextColor : spinboxSlider.textColor
    property alias spinboxSelectedTextColor: spinboxSlider.selectedTextColor
    property alias spinboxSelectionColor: spinboxSlider.selectionColor
    property alias spinboxcCursorColor: spinboxSlider.cursorColor
    property alias spinButtonColor: spinboxSlider.spinButtonColor
    property alias sliderButtonDefaultIcon: spinboxSlider.sliderButtonDefaultIcon
    property alias sliderButtonHighlightIcon: spinboxSlider.sliderButtonHighlightIcon
    property alias sliderBackgoundColor: spinboxSlider.sliderBackgoundColor
    property alias isSpinBoxLightTheme: spinboxSlider.isSpinBoxLightTheme

    // VEKeyFrame property
    property alias keyFrameEnabled: keyFrame.keyFrameEnabled
    property alias leftBtnActived: keyFrame.leftBtnActived
    property alias rightBtnActived: keyFrame.rightBtnActived
    property alias addedPoint: keyFrame.addedPoint
    property alias parentViewModel : keyFrame.parentViewModel
    property alias propertyType : keyFrame.propertyType
    property alias materialID : keyFrame.materialID
    property alias category : keyFrame.category

    signal doubleClicked() // Support double-clicking the slider text part to reset to default value
    signal accepted(var curValue, var isSlider, var shiftDown, var actionType)
    signal valueChanged(var curValue, var isSlider, var shiftDown, var actionType)
    signal editingFinished(var curValue)
    signal inSliderEditing(var state)
    signal outOfUpperBounds()
    signal beforeMaualChangeValue()
    signal sliderOrButtonPress()
    signal sliderOrButtonRelease()
    signal vipIconClicked()

    Item {
        id: paramSettingControl
        anchors.fill: parent
        PanelLabel {
            id: panelLabel
            text: parent.text
            width: labelWidth
            inTopLeft: root.isWrap
            onDoubleClicked: {
                root.doubleClicked();
            }
            onVipIconClicked: root.vipIconClicked()
        }
        
        Loader {
            width: 32
            height: 32
            anchors.left: panelLabel.right
            anchors.leftMargin: -4
            anchors.verticalCenter: panelLabel.verticalCenter
            active: showHelp
            visible: active

            sourceComponent: Image {
                id:  helpTipIcon
                anchors.fill: parent
                source: "qrc:/ArticleVideo/resources/guide_btn.svg"
                sourceSize: Qt.size(32, 32)
                fillMode: Image.PreserveAspectFit
                verticalAlignment: Label.AlignVCenter

                LVToolTip {
                    id: helpTip
                    anchors.fill: parent
                    text: root.helpText
                }
            }
        }

        VESpinBoxSlider {
            id: spinboxSlider
            Accessible.name: root.spinboxSliderAccessibleName            

            height: root.visible ? spinBoxSliderHeight : 0
            curValue: 50
            minValue: 0
            maxValue: 100
            minValueSlider: minValue
            maxValueSlider: maxValue
            textInputDecimals: 0
            stepSize: 1.0
            throttleInterval: 30
            sliderType: VESpinBoxSlider.SliderType.Normal
            unitChar: ""
            spinBoxRoundingMode: 2  // Some values ​​in the middle layer adopt the Round method, which defaults to Round.
            autoPauseWhenAdjusting: keyFrameEnabled && keyFrameVisible
            inSetKeyBtns: keyFrame.inSetKeyBtn || root.inPanelKeyBtn
            checkValueViewModel: root.checkValueViewModel
            checkScaleX: root.checkScaleX
            checkScaleY: root.checkScaleY

            onAccepted: (curValue, isSlider, withShift, actionType) => {
                if (isSlider) {
                    root.triggerPart = VESpinBoxSlider.TriggerPart.Slider
                }
                root.accepted(curValue, isSlider, withShift, actionType)
            }

            onValueChanged:  (curValue, isSlider, withShift, actionType) => {
                root.valueChanged(curValue, isSlider, withShift, actionType)
            }
            onOutOfUpperBounds: {
                root.outOfUpperBounds()
            }
            onBeforeMaualChangeValue: {
                root.beforeMaualChangeValue()
            }
            onSliderOrButtonPress: {
                root.sliderOrButtonPress()
            }
            onSliderOrButtonRelease: {
                root.sliderOrButtonRelease()
            }
            onInSpinBoxEditing: (state) =>{
                  keyFrame.inEditingSet = state
                  root.inSliderEditing(state)
            }
        }
        VEKeyFrame {
            id: keyFrame
            visible: keyFrameVisible
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            z: 1
        }
    }

    states: [
        State {
            when: isWrap
            AnchorChanges {
                target: spinboxSlider
                anchors.top: panelLabel.bottom
                anchors.left: paramSettingControl.left
                anchors.right: keyFrameVisible ? keyFrame.left : paramSettingControl.right
            }
            PropertyChanges {
                target: spinboxSlider
                anchors.rightMargin: keyFrameVisible ? kRightMargin : 0
                anchors.leftMargin: needLeftMarginInWrap ? kMargin : 0
            }
            PropertyChanges {
                target: root
                height: root.visible ? panelLabel.height + spinBoxSliderHeight : 0
                labelWidth: panelLabel.implicitWidth
            }
            AnchorChanges {
                target: keyFrame
                anchors.top: paramSettingControl.top
            }
            PropertyChanges {
                target: keyFrame
                anchors.topMargin: panelLabel.height
            }
        },
        State {
            when: !isWrap
            AnchorChanges {
                target: spinboxSlider
                anchors.left: parent.left
                anchors.right: keyFrameVisible ? keyFrame.left : parent.right
            }
            PropertyChanges {
                target: spinboxSlider
                anchors.leftMargin: kLeftMargin
                anchors.rightMargin: keyFrameVisible ? kRightMargin : 0
            }
            PropertyChanges {
                target: paramSettingControl
                anchors.topMargin: root.visible ? kMargin : 0
                anchors.bottomMargin: root.visible ? kMargin : 0
            }
            PropertyChanges {
                target: root
                height: root.visible ? spinBoxSliderHeight + 2 * kMargin : 0
            }
            AnchorChanges {
                target: keyFrame
                anchors.top: paramSettingControl.top
            }
            AnchorChanges {
                target: panelLabel
                anchors.verticalCenter: paramSettingControl.verticalCenter
            }
        }
    ]
}