74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
|
import DragableBox from "./DragableBox";
|
||
|
|
import { useEffect, useRef, useState } from "react";
|
||
|
|
import { PhAngle } from "./PhAngle";
|
||
|
|
|
||
|
|
export default function CropSelector() {
|
||
|
|
const [selectorHeight, setSelectorHeight] = useState(0);
|
||
|
|
const [selectorWidth, setSelectorWidth] = useState(0);
|
||
|
|
const [selectorTop, setSelectorTop] = useState(0);
|
||
|
|
const [selectorLeft, setSelectorLeft] = useState(0);
|
||
|
|
const [firstDragable, setFirstDragable] = useState({
|
||
|
|
x: 0,
|
||
|
|
y: 0
|
||
|
|
})
|
||
|
|
const [containerWidth, setContainerWidth] = useState<number | null>(null)
|
||
|
|
const [containerHeight, setContainerHeight] = useState<number | null>(null)
|
||
|
|
const [secondDragable, setSecondDragable] = useState({
|
||
|
|
x: 0,
|
||
|
|
y: 0
|
||
|
|
})
|
||
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const updateContainerSize = () => {
|
||
|
|
if (containerRef.current) {
|
||
|
|
setContainerWidth(containerRef.current.offsetWidth);
|
||
|
|
setContainerHeight(containerRef.current.offsetHeight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.addEventListener('resize', updateContainerSize);
|
||
|
|
return () => window.removeEventListener('resize', updateContainerSize);
|
||
|
|
}, [containerRef])
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const width = Math.abs(secondDragable.x - firstDragable.x);
|
||
|
|
setSelectorWidth(width);
|
||
|
|
const height = Math.abs(secondDragable.y - firstDragable.y);
|
||
|
|
setSelectorHeight(height);
|
||
|
|
setSelectorTop(Math.min(firstDragable.y, secondDragable.y));
|
||
|
|
setSelectorLeft(Math.min(firstDragable.x, secondDragable.x));
|
||
|
|
}, [firstDragable, secondDragable]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-screen w-screen justify-center items-center">
|
||
|
|
<div ref={containerRef} className="relative w-1/3 h-1/3 border-black border">
|
||
|
|
{containerHeight !== null && containerWidth !== null && (
|
||
|
|
<>
|
||
|
|
<div
|
||
|
|
className="border border-black absolute"
|
||
|
|
style={{
|
||
|
|
top: `${selectorTop}px`,
|
||
|
|
left: `${selectorLeft}px`,
|
||
|
|
height: `${selectorHeight}px`,
|
||
|
|
width: `${selectorWidth}px`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<DragableBox initialX={0} initialY={0} setter={setFirstDragable}>
|
||
|
|
<PhAngle />
|
||
|
|
</DragableBox>
|
||
|
|
<DragableBox initialX={containerWidth} initialY={containerHeight} setter={setSecondDragable} >
|
||
|
|
<PhAngle />
|
||
|
|
</DragableBox>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<p>{containerWidth} - {containerHeight}</p>
|
||
|
|
<p>firstDragable: {...Object.entries(firstDragable)}</p>
|
||
|
|
<p>secondDragable: {...Object.entries(secondDragable)}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|