|  |  | 
 |  |  |             antialias: true, | 
 |  |  |         }) | 
 |  |  |     }) | 
 |  |  |     const [mapContainer, setMapContainer] = React.useState(() => { | 
 |  |  |         const mapContainer = new PIXI.Container(); | 
 |  |  |         mapContainer.name = "mapContainer"; | 
 |  |  |         mapContainer.data = {}; | 
 |  |  |         app.stage.addChild(mapContainer); | 
 |  |  |         return mapContainer; | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     const [windowSize, setWindowSize] = React.useState({ | 
 |  |  |         width: window.innerWidth, | 
 |  |  |         height: window.innerHeight, | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     let mapContainer = new PIXI.Container(); | 
 |  |  |     mapContainer.name = "mapContainer"; | 
 |  |  |     mapContainer.data = {}; | 
 |  |  |     app.stage.addChild(mapContainer); | 
 |  |  |  | 
 |  |  |     React.useEffect(() => { | 
 |  |  |         const handleResize = () => { | 
 |  |  | 
 |  |  |         setEditModalVisible(true); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const onDrop = (x, y) => { | 
 |  |  |         const bunny = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png'); | 
 |  |  |         bunny.anchor.set(0.5); | 
 |  |  |         bunny.x = x; | 
 |  |  |         bunny.y = y; | 
 |  |  |         app.stage.addChild(bunny); | 
 |  |  |     const onDrop = (sprite, x, y) => { | 
 |  |  |         const rect = app.view.getBoundingClientRect(); | 
 |  |  |         sprite.anchor.set(0.5); | 
 |  |  |         sprite.x = x - rect.left; | 
 |  |  |         sprite.y = y - rect.top; | 
 |  |  |         mapContainer.addChild(sprite); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  | 
 |  |  |                 } | 
 |  |  |                 refCurr={mapRef.current} | 
 |  |  |                 onDrop={onDrop} | 
 |  |  |                 mapContainer={mapContainer} | 
 |  |  |             /> | 
 |  |  |         </> | 
 |  |  |     ) |