trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: change aspect ratio calculations in OpenImage dialog

Browse source
This commit is contained in:
trafficlunar 2024-12-27 21:42:10 +00:00
parent e4719200d3
commit d6473ba930
1 changed files with 4 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/dialogs/OpenImage.tsx
View file

@ -37,17 +37,11 @@ function OpenImage({ close }: DialogProps) {
}
}, [acceptedFiles]);
const onDimensionChange = (e: React.ChangeEvent<HTMLInputElement>, isWidth: boolean) => {
const onDimensionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newDimension = Number(e.target.value);
if (newDimension < 1 || newDimension > 10000) return;
setImageDimensions(() => {
if (isWidth) {
return { width: newDimension, height: Math.round(newDimension / aspectRatio) };
} else {
return { width: Math.round(newDimension / aspectRatio), height: newDimension };
}
});
setImageDimensions(() => ({ width: newDimension, height: Math.round(newDimension / aspectRatio) }));
};
const onSubmit = () => {
@ -99,18 +93,12 @@ function OpenImage({ close }: DialogProps) {
<div>
<Label htmlFor="width">Width (blocks)</Label>
<Input type="number" id="width" placeholder="Width" value={imageDimensions.width} onChange={(e) => onDimensionChange(e, true)} />
<Input type="number" id="width" placeholder="Width" value={imageDimensions.width} onChange={(e) => onDimensionChange(e)} />
</div>
<div>
<Label htmlFor="height">Height (blocks)</Label>
<Input
type="number"
id="height"
placeholder="Height"
value={imageDimensions.height}
onChange={(e) => onDimensionChange(e, false)}
/>
<Input type="number" id="height" placeholder="Height" value={imageDimensions.height} onChange={(e) => onDimensionChange(e)} />
</div>
</div>
</>