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.
53 lines
1.7 KiB
53 lines
1.7 KiB
import "../../style/actions/arrow_action.css"
|
|
import Draggable from "react-draggable"
|
|
import {RefObject, useRef} from "react"
|
|
import Xarrow, {useXarrow, Xwrapper} from "react-xarrows"
|
|
|
|
export interface ArrowActionProps {
|
|
originRef: RefObject<HTMLDivElement>
|
|
onArrowDropped: (arrowHead: DOMRect) => void
|
|
}
|
|
|
|
export default function ArrowAction({
|
|
originRef,
|
|
onArrowDropped,
|
|
}: ArrowActionProps) {
|
|
const arrowHeadRef = useRef<HTMLDivElement>(null)
|
|
const updateXarrow = useXarrow()
|
|
|
|
return (
|
|
<div className="arrow-action">
|
|
<div className="arrow-action-pin"/>
|
|
|
|
<Xwrapper>
|
|
<Draggable
|
|
nodeRef={arrowHeadRef}
|
|
onDrag={updateXarrow}
|
|
onStop={() => {
|
|
const headBounds =
|
|
arrowHeadRef.current!.getBoundingClientRect()
|
|
updateXarrow()
|
|
onArrowDropped(headBounds)
|
|
}}
|
|
position={{x: 0, y: 0}}>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
}}
|
|
ref={arrowHeadRef}
|
|
className="arrow-head-pick"
|
|
onMouseDown={updateXarrow}/>
|
|
</Draggable>
|
|
|
|
<div className={"arrow-head-xarrow"}>
|
|
<Xarrow
|
|
start={originRef}
|
|
end={arrowHeadRef}
|
|
startAnchor={"auto"}
|
|
/>
|
|
</div>
|
|
</Xwrapper>
|
|
</div>
|
|
)
|
|
}
|