rannes.dev/image-converter-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

suspense not needed
All checks were successful
Deploy to Cloudflare Pages / deploy (push) Successful in 28s
Details

Browse Source
This commit is contained in:
christian 2024-11-03 22:41:10 +01:00
parent 86ba372227
commit 521dabe17a
1 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/routes/CropSelector.tsx
View File

@ -40,38 +40,36 @@ export default function CropSelector() {
const deltaX = newPosition.x - selectorPosition.x;
const deltaY = newPosition.y - selectorPosition.y;
setFirstDragable(prev => ({
setFirstDragable({
x: Math.min(firstDragable.x, secondDragable.x) + deltaX,
y: Math.min(firstDragable.y, secondDragable.y) + deltaY
}));
});
setSecondDragable(prev => ({
setSecondDragable({
x: Math.max(firstDragable.x, secondDragable.x) + deltaX,
y: Math.max(firstDragable.y, secondDragable.y) + deltaY
}));
});
};
return (
<div className="flex flex-col h-screen w-screen justify-center items-center">
<Suspense fallback={<p>Loading...</p>}>
<div ref={containerRef} className="relative w-1/3 h-1/3 border-black border">
<DragableBox
position={selectorPosition}
mode="box"
width={selectorWidth}
height={selectorHeight}
coordSetter={setSelectorPosition}
onDrag={handleSelectorDrag}
className="border border-black"
/>
<DragableBox position={firstDragable} coordSetter={setFirstDragable} mode="handle">
<PhAngle />
</DragableBox>
<DragableBox position={secondDragable} coordSetter={setSecondDragable} mode="handle">
<PhAngle />
</DragableBox>
</div>
</Suspense>
<div ref={containerRef} className="relative w-1/3 h-1/3 border-black border">
<DragableBox
position={selectorPosition}
mode="box"
width={selectorWidth}
height={selectorHeight}
coordSetter={setSelectorPosition}
onDrag={handleSelectorDrag}
className="border border-black"
/>
<DragableBox position={firstDragable} coordSetter={setFirstDragable} mode="handle">
<PhAngle />
</DragableBox>
<DragableBox position={secondDragable} coordSetter={setSecondDragable} mode="handle">
<PhAngle />
</DragableBox>
</div>
</div>
);
}