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,24 +317,17 @@ 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}
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}
/>
<sp-checkbox <sp-checkbox
checked={ checked={
this.props.store.data.save_upscaled_image this.props.store.data.save_upscaled_image
? true ? true
: undefined : undefined
} }
onClick={(event: React.ChangeEvent<HTMLInputElement>) => { onClick={(
event: React.ChangeEvent<HTMLInputElement>
) => {
this.props.store.updateProperty( this.props.store.updateProperty(
'save_upscaled_image', 'save_upscaled_image',
event.target.checked event.target.checked
@ -301,7 +342,9 @@ export class UltimateSDUpscalerForm extends React.Component<{
? true ? true
: undefined : undefined
} }
onClick={(event: React.ChangeEvent<HTMLInputElement>) => { onClick={(
event: React.ChangeEvent<HTMLInputElement>
) => {
this.props.store.updateProperty( this.props.store.updateProperty(
'save_seams_fix_image', 'save_seams_fix_image',
event.target.checked event.target.checked
@ -310,6 +353,7 @@ export class UltimateSDUpscalerForm extends React.Component<{
> >
{ui_config.save_seams_fix_image.label} {ui_config.save_seams_fix_image.label}
</sp-checkbox> </sp-checkbox>
</div>
{group_1_sliders} {group_1_sliders}
<SpMenu <SpMenu
title={'Seams Fix Type'} title={'Seams Fix Type'}