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