Back up authored 2D makeup materials and local hair segmentation model

4f675f0 verified 19 days ago

13.7 kB

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

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