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 } } ] }