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

moved CropSelector to component
All checks were successful
Deploy to Cloudflare Pages / deploy (push) Successful in 30s
Details

Browse Source
This commit is contained in:
christian 2024-11-02 23:38:33 +01:00
parent 497bc4fd01
commit ff646a0cff
2 changed files with 75 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
app/routes/CropSelector.tsx Normal file
View File

@ -0,0 +1,73 @@
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>
);
}

71
app/routes/_index.tsx
View File

@ -1,7 +1,5 @@
import type { MetaFunction } from "@remix-run/cloudflare";
import DragableBox from "./DragableBox";
import { useEffect, useRef, useState } from "react";
import { PhAngle } from "./PhAngle";
import CropSelector from "./CropSelector";
export const meta: MetaFunction = () => {
return [
@ -11,71 +9,6 @@ export const meta: MetaFunction = () => {
};
export default function Index() {
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>
);
<CropSelector />);
}