konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.07k stars 896 forks source link

What is the correct way to fire a custom event using react-konva #1740

Closed rrrepos closed 3 months ago

rrrepos commented 3 months ago

I am trying out how best to fire an event named 'foo'. The following is the relevant code:

const App = () => {
  const Shape1 = (props) => {

    const onDragMove = (e) => {
        ...
       const target = e.target
       const shape2 = e.target.getLayer().findOne('#shape2')
      if(shape2) {
           shape2.fire('foo')
    }
     return <Rect  id="shape1" .... onDragMove={onDragMove} />
  }

  const Shape2 = (props) => {
     return <Circle id="shape2" ... onFoo={(e)=>{console.log('foo received')} />
  }

// return the canvas
   return (
     <Stage>
          <Layer>
                   <Shape1  x={..} y={..} width={..} height={..}/>
                   <Shape2  x={..} y={..} radius={..} />
          </Layer>
     </Stage>
) 

The custom event does not get fired. What is the error I am doing? Thanks

rrrepos commented 3 months ago

My bad. It works now