51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { FocalPoint } from "~/types/imagevault"
|
|
import "./focalPointPicker.css"
|
|
import useFocalPoint from "~/hooks/useFocalPoint"
|
|
|
|
export interface FocalPointPickerProps {
|
|
focalPoint?: FocalPoint
|
|
imageSrc: string
|
|
onChange: (focalPoint: FocalPoint) => void
|
|
}
|
|
|
|
export default function FocalPointPicker({
|
|
focalPoint,
|
|
imageSrc,
|
|
onChange,
|
|
}: FocalPointPickerProps) {
|
|
const { ref, x, y, onMove, canMove, setCanMove } = useFocalPoint({
|
|
focalPoint,
|
|
onChange,
|
|
})
|
|
|
|
const imagesArray = Array.from({ length: 4 })
|
|
|
|
return (
|
|
<div className="container">
|
|
<div className="focalPointWrapper" ref={ref} onMouseMove={onMove}>
|
|
<button
|
|
className="focalPointButton"
|
|
style={{
|
|
left: `${x}%`,
|
|
top: `${y}%`,
|
|
cursor: canMove ? "grabbing" : "grab",
|
|
}}
|
|
onMouseDown={() => setCanMove(true)}
|
|
onMouseUp={() => setCanMove(false)}
|
|
></button>
|
|
<img className="focalPointImage" src={imageSrc} alt="" />
|
|
</div>
|
|
<div className="examples">
|
|
{imagesArray.map((_, idx) => (
|
|
<img
|
|
key={idx}
|
|
src={imageSrc}
|
|
alt=""
|
|
style={{ objectPosition: `${x}% ${y}%` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|