Spaces:
Configuration error
Configuration error
File size: 1,483 Bytes
74aacd5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import React from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { appState, croperState, settingState } from '../../store/Atoms'
import Slider from '../Editor/Slider'
import SettingBlock from '../Settings/SettingBlock'
const ImageResizeScale = () => {
const [setting, setSettingState] = useRecoilState(settingState)
const app = useRecoilValue(appState)
const croper = useRecoilValue(croperState)
const handleSliderChange = (value: number) => {
setSettingState(old => {
return { ...old, sdScale: value }
})
}
const scaledWidth = () => {
let width = app.imageWidth
if (setting.showCroper) {
width = croper.width
}
return Math.round((width * setting.sdScale) / 100)
}
const scaledHeight = () => {
let height = app.imageHeight
if (setting.showCroper) {
height = croper.height
}
return Math.round((height * setting.sdScale) / 100)
}
return (
<SettingBlock
className="sub-setting-block"
title="Resize"
titleSuffix={
<div className="resize-title-tile">{` ${scaledWidth()}x${scaledHeight()}`}</div>
}
desc="Resize the image before inpainting, the area outside the mask will not lose quality."
input={
<Slider
label=""
width={70}
min={50}
max={100}
value={setting.sdScale}
onChange={handleSliderChange}
/>
}
/>
)
}
export default ImageResizeScale
|