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 deltaX = newPosition.x - selectorPosition.x;
const deltaY = newPosition.y - selectorPosition.y; const deltaY = newPosition.y - selectorPosition.y;
setFirstDragable(prev => ({ setFirstDragable({
x: Math.min(firstDragable.x, secondDragable.x) + deltaX, x: Math.min(firstDragable.x, secondDragable.x) + deltaX,
y: Math.min(firstDragable.y, secondDragable.y) + deltaY y: Math.min(firstDragable.y, secondDragable.y) + deltaY
})); });
setSecondDragable(prev => ({ setSecondDragable({
x: Math.max(firstDragable.x, secondDragable.x) + deltaX, x: Math.max(firstDragable.x, secondDragable.x) + deltaX,
y: Math.max(firstDragable.y, secondDragable.y) + deltaY y: Math.max(firstDragable.y, secondDragable.y) + deltaY
})); });
}; };
return ( return (
<div className="flex flex-col h-screen w-screen justify-center items-center"> <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">
<div ref={containerRef} className="relative w-1/3 h-1/3 border-black border"> <DragableBox
<DragableBox position={selectorPosition}
position={selectorPosition} mode="box"
mode="box" width={selectorWidth}
width={selectorWidth} height={selectorHeight}
height={selectorHeight} coordSetter={setSelectorPosition}
coordSetter={setSelectorPosition} onDrag={handleSelectorDrag}
onDrag={handleSelectorDrag} className="border border-black"
className="border border-black" />
/> <DragableBox position={firstDragable} coordSetter={setFirstDragable} mode="handle">
<DragableBox position={firstDragable} coordSetter={setFirstDragable} mode="handle"> <PhAngle />
<PhAngle /> </DragableBox>
</DragableBox> <DragableBox position={secondDragable} coordSetter={setSecondDragable} mode="handle">
<DragableBox position={secondDragable} coordSetter={setSecondDragable} mode="handle"> <PhAngle />
<PhAngle /> </DragableBox>
</DragableBox> </div>
</div>
</Suspense>
</div> </div>
); );
} }