This commit is contained in:
parent
5eab4fd47c
commit
b29cf74629
@ -42,12 +42,15 @@ const DraggableBox = ({
|
|||||||
const maxX = parentRect.width - boxRect.width;
|
const maxX = parentRect.width - boxRect.width;
|
||||||
const maxY = parentRect.height - boxRect.height;
|
const maxY = parentRect.height - boxRect.height;
|
||||||
|
|
||||||
setXPosition(Math.max(0, Math.min(relativeX, maxX)));
|
let newX = (Math.max(0, Math.min(relativeX, maxX)));
|
||||||
setYPosition(Math.max(0, Math.min(relativeY, maxY)));
|
let newY = (Math.max(0, Math.min(relativeY, maxY)));
|
||||||
|
|
||||||
|
setXPosition(newX);
|
||||||
|
setYPosition(newY);
|
||||||
if (setter) {
|
if (setter) {
|
||||||
setter({
|
setter({
|
||||||
x: relativeX,
|
x: newX,
|
||||||
y: relativeY
|
y: newY
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -78,7 +81,7 @@ const DraggableBox = ({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={dragRef}
|
ref={dragRef}
|
||||||
className={`absolute cursor-move bg-red-500 rounded-full w-4 h-4 text-white shadow-lg ${className}`}
|
className={`absolute cursor-pointer ${className}`}
|
||||||
style={{
|
style={{
|
||||||
transform: `translate(${xPosition}px, ${yPosition}px)`,
|
transform: `translate(${xPosition}px, ${yPosition}px)`,
|
||||||
userSelect: 'none',
|
userSelect: 'none',
|
||||||
|
5
app/routes/PhAngle.tsx
Normal file
5
app/routes/PhAngle.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import type { SVGProps } from 'react';
|
||||||
|
|
||||||
|
export function PhAngle(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" {...props}><path fill="currentColor" d="M96 72a8 8 0 0 1 8-8a104.11 104.11 0 0 1 104 104a8 8 0 0 1-16 0a88.1 88.1 0 0 0-88-88a8 8 0 0 1-8-8m144 120H80V32a8 8 0 0 0-16 0v32H32a8 8 0 0 0 0 16h32v120a8 8 0 0 0 8 8h168a8 8 0 0 0 0-16"></path></svg>);
|
||||||
|
}
|
@ -1,7 +1,7 @@
|
|||||||
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/cloudflare";
|
import type { MetaFunction } from "@remix-run/cloudflare";
|
||||||
import DragableBox from "./DragableBox";
|
import DragableBox from "./DragableBox";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { useLoaderData, useSearchParams } from "@remix-run/react";
|
import { PhAngle } from "./PhAngle";
|
||||||
|
|
||||||
export const meta: MetaFunction = () => {
|
export const meta: MetaFunction = () => {
|
||||||
return [
|
return [
|
||||||
@ -11,7 +11,6 @@ export const meta: MetaFunction = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const [searchParams] = useSearchParams();
|
|
||||||
const [selectorHeight, setSelectorHeight] = useState(0);
|
const [selectorHeight, setSelectorHeight] = useState(0);
|
||||||
const [selectorWidth, setSelectorWidth] = useState(0);
|
const [selectorWidth, setSelectorWidth] = useState(0);
|
||||||
const [selectorTop, setSelectorTop] = useState(0);
|
const [selectorTop, setSelectorTop] = useState(0);
|
||||||
@ -20,44 +19,59 @@ export default function Index() {
|
|||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
})
|
})
|
||||||
|
const [containerWidth, setContainerWidth] = useState<number | null>(null)
|
||||||
|
const [containerHeight, setContainerHeight] = useState<number | null>(null)
|
||||||
const [secondDragable, setSecondDragable] = useState({
|
const [secondDragable, setSecondDragable] = useState({
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 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])
|
||||||
|
|
||||||
|
|
||||||
// Use useEffect to calculate dimensions and position
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Calculate width
|
|
||||||
const width = Math.abs(secondDragable.x - firstDragable.x);
|
const width = Math.abs(secondDragable.x - firstDragable.x);
|
||||||
setSelectorWidth(width);
|
setSelectorWidth(width);
|
||||||
|
|
||||||
// Calculate height
|
|
||||||
const height = Math.abs(secondDragable.y - firstDragable.y);
|
const height = Math.abs(secondDragable.y - firstDragable.y);
|
||||||
setSelectorHeight(height);
|
setSelectorHeight(height);
|
||||||
|
|
||||||
// Calculate top position (minimum of y coordinates)
|
|
||||||
setSelectorTop(Math.min(firstDragable.y, secondDragable.y));
|
setSelectorTop(Math.min(firstDragable.y, secondDragable.y));
|
||||||
|
|
||||||
// Calculate left position (minimum of x coordinates)
|
|
||||||
setSelectorLeft(Math.min(firstDragable.x, secondDragable.x));
|
setSelectorLeft(Math.min(firstDragable.x, secondDragable.x));
|
||||||
}, [firstDragable, secondDragable]);
|
}, [firstDragable, secondDragable]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-screen justify-center items-center">
|
<div className="flex h-screen w-screen justify-center items-center">
|
||||||
<div 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">
|
||||||
<div
|
{containerHeight !== null && containerWidth !== null && (
|
||||||
className="border border-black absolute"
|
<>
|
||||||
style={{
|
<div
|
||||||
top: `${selectorTop}px`,
|
className="border border-black absolute"
|
||||||
left: `${selectorLeft}px`,
|
style={{
|
||||||
height: `${selectorHeight}px`,
|
top: `${selectorTop}px`,
|
||||||
width: `${selectorWidth}px`,
|
left: `${selectorLeft}px`,
|
||||||
}}
|
height: `${selectorHeight}px`,
|
||||||
/>
|
width: `${selectorWidth}px`,
|
||||||
<DragableBox initialX={0} initialY={0} setter={setFirstDragable} />
|
}}
|
||||||
<DragableBox initialX={100} initialY={100} setter={setSecondDragable} />
|
/>
|
||||||
|
<DragableBox initialX={0} initialY={0} setter={setFirstDragable}>
|
||||||
|
<PhAngle />
|
||||||
|
</DragableBox>
|
||||||
|
<DragableBox initialX={containerWidth} initialY={containerHeight} setter={setSecondDragable} >
|
||||||
|
<PhAngle />
|
||||||
|
</DragableBox>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{containerWidth} - {containerHeight}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user