You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.8 KiB
62 lines
1.8 KiB
import "../../style/actions/arrow_action.css"
|
|
import Draggable from "react-draggable"
|
|
import arrowPng from "../../assets/icon/arrow.svg"
|
|
import { useRef } from "react"
|
|
|
|
export interface ArrowActionProps {
|
|
onHeadDropped: (headBounds: DOMRect) => void
|
|
onHeadPicked: (headBounds: DOMRect) => void
|
|
onHeadMoved: (headBounds: DOMRect) => void
|
|
}
|
|
|
|
export default function ArrowAction({
|
|
onHeadDropped,
|
|
onHeadPicked,
|
|
onHeadMoved,
|
|
}: ArrowActionProps) {
|
|
const arrowHeadRef = useRef<HTMLDivElement>(null)
|
|
|
|
return (
|
|
<div className="arrow-action">
|
|
<img className="arrow-action-icon" src={arrowPng} alt="add arrow" />
|
|
|
|
<Draggable
|
|
nodeRef={arrowHeadRef}
|
|
onStart={() => {
|
|
const headBounds =
|
|
arrowHeadRef.current!.getBoundingClientRect()
|
|
onHeadPicked(headBounds)
|
|
}}
|
|
onStop={() => {
|
|
const headBounds =
|
|
arrowHeadRef.current!.getBoundingClientRect()
|
|
onHeadDropped(headBounds)
|
|
}}
|
|
onDrag={() => {
|
|
const headBounds =
|
|
arrowHeadRef.current!.getBoundingClientRect()
|
|
onHeadMoved(headBounds)
|
|
}}
|
|
position={{ x: 0, y: 0 }}>
|
|
<div ref={arrowHeadRef} className="arrow-head-pick" />
|
|
</Draggable>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ScreenHead() {
|
|
return (
|
|
<div
|
|
style={{ backgroundColor: "black", height: "5px", width: "25px" }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function MoveToHead() {
|
|
return (
|
|
<svg viewBox={"0 0 50 50"} width={20} height={20}>
|
|
<polygon points={"50 0, 0 0, 25 40"} fill="#000" />
|
|
</svg>
|
|
)
|
|
}
|