add custom width and height slider for ultimate sd upscaler

pull/378/head
Abdullah Alfaraj 2023-09-28 15:37:19 +03:00
parent 7d05004a5e
commit 018f7c2c5f
1 changed files with 85 additions and 41 deletions

View File

@ -188,6 +188,54 @@ export class UltimateSDUpscalerForm extends React.Component<{
this.props.store.updateProperty('is_installed', is_installed) this.props.store.updateProperty('is_installed', is_installed)
return is_installed return is_installed
} }
renderScaleSlider() {
switch (this.props.store.data.target_size_type) {
case ui_config.target_size_type.choices.indexOf(
'Scale from image size'
):
return (
<SpSliderWithLabel
label={ui_config.custom_scale.label}
output_value={this.props.store.data.custom_scale}
id={'custom_scale'}
out_min={ui_config.custom_scale.minimum}
out_max={ui_config.custom_scale.maximum}
onSliderInput={this.handleSliderChange}
steps={0.01}
slider_type={SliderType.Float}
/>
)
case ui_config.target_size_type.choices.indexOf('Custom size'):
return (
<>
<SpSliderWithLabel
label={ui_config.custom_width.label}
output_value={this.props.store.data.custom_width}
id={'custom_width'}
out_min={ui_config.custom_width.minimum}
out_max={ui_config.custom_width.maximum}
onSliderInput={this.handleSliderChange}
steps={ui_config.custom_width.step}
slider_type={SliderType.Integer}
/>
<SpSliderWithLabel
label={ui_config.custom_height.label}
output_value={this.props.store.data.custom_height}
id={'custom_height'}
out_min={ui_config.custom_height.minimum}
out_max={ui_config.custom_height.maximum}
onSliderInput={this.handleSliderChange}
steps={ui_config.custom_height.step}
slider_type={SliderType.Integer}
/>
</>
)
default:
return void 0
}
}
render() { render() {
if (!this.props.store.data.is_installed) { if (!this.props.store.data.is_installed) {
return ( return (
@ -269,47 +317,43 @@ export class UltimateSDUpscalerForm extends React.Component<{
onChange={this.handleMenuChange} onChange={this.handleMenuChange}
selected_index={this.props.store.data.target_size_type} selected_index={this.props.store.data.target_size_type}
/> />
<SpSliderWithLabel {this.renderScaleSlider()}
label={ui_config.custom_scale.label} <div>
output_value={this.props.store.data.custom_scale} <sp-checkbox
id={'custom_scale'} checked={
out_min={ui_config.custom_scale.minimum} this.props.store.data.save_upscaled_image
out_max={ui_config.custom_scale.maximum} ? true
onSliderInput={this.handleSliderChange} : undefined
steps={0.01} }
slider_type={SliderType.Float} onClick={(
/> event: React.ChangeEvent<HTMLInputElement>
) => {
<sp-checkbox this.props.store.updateProperty(
checked={ 'save_upscaled_image',
this.props.store.data.save_upscaled_image event.target.checked
? true )
: undefined }}
} >
onClick={(event: React.ChangeEvent<HTMLInputElement>) => { {ui_config.save_upscaled_image.label}
this.props.store.updateProperty( </sp-checkbox>
'save_upscaled_image', <sp-checkbox
event.target.checked checked={
) this.props.store.data.save_seams_fix_image
}} ? true
> : undefined
{ui_config.save_upscaled_image.label} }
</sp-checkbox> onClick={(
<sp-checkbox event: React.ChangeEvent<HTMLInputElement>
checked={ ) => {
this.props.store.data.save_seams_fix_image this.props.store.updateProperty(
? true 'save_seams_fix_image',
: undefined event.target.checked
} )
onClick={(event: React.ChangeEvent<HTMLInputElement>) => { }}
this.props.store.updateProperty( >
'save_seams_fix_image', {ui_config.save_seams_fix_image.label}
event.target.checked </sp-checkbox>
) </div>
}}
>
{ui_config.save_seams_fix_image.label}
</sp-checkbox>
{group_1_sliders} {group_1_sliders}
<SpMenu <SpMenu
title={'Seams Fix Type'} title={'Seams Fix Type'}