|  |  | 
 |  |  |  | 
 |  |  | const Edit = (props) => { | 
 |  |  |     const [dragging, setDragging] = useState(false); | 
 |  |  |     const [dragImage, setDragImage] = useState(null); | 
 |  |  |      | 
 |  |  |     const [dragSprite, setDragSprite] = useState(null); | 
 |  |  |     const { mapContainer } = props; | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         const handleMouseMove = (e) => { | 
 |  |  |             if (dragging) { | 
 |  |  |                 props.onDrop(e.clientX, e.clientY); | 
 |  |  |                 props.onDrop(dragSprite, e.clientX, e.clientY); | 
 |  |  |                 setDragging(false); | 
 |  |  |                 props.onCancel(); | 
 |  |  |             } | 
 |  |  |         }; | 
 |  |  |         window.addEventListener('mousemove', handleMouseMove); | 
 |  |  | 
 |  |  |  | 
 |  |  |     const onDragStart = (e) => { | 
 |  |  |         setDragging(true) | 
 |  |  |         props.onCancel(); | 
 |  |  |         const sprite = PIXI.Sprite.from(agv); | 
 |  |  |         sprite.anchor.set(0.5); | 
 |  |  |         setDragSprite(sprite); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return ( |