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

fix: change aspect ratio calculations (again)

Browse source
This commit is contained in:
trafficlunar 2024-12-28 16:34:22 +00:00
parent 602b9b201d
commit 5c856d55c4
1 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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