search

susielu / react-annotation

Use react-annotation with built-in annotation types, or extend it to make custom annotations. It is made for annotations in SVG.
http://react-annotation.susielu.com/
Apache License 2.0
395 stars 34 forks source link

example of onDragEnd #23

Closed LarsVoith closed 5 years ago

LarsVoith commented 5 years ago

Could you provide an example of onDragEnd? Im currently trying this, but i am unable to get it to work.

      <AnnotationCallout
              x={320}
              y={140}
              dy={117}
              dx={162}
              color={"#ff0032"}
              className="show-bg"
              editMode={true}
              note={{
                "title" : "001",
                "dataTest":"123",
                "lineType" : null,
                "padding" : 15,
                "titleColor" : "#ff0032"}}
              connector={{"end" : "arrow"}}
              events={{onDragEnd: (props) => {console.log(props)}}}
       />
susielu commented 5 years ago

onDragEnd onDragStart and onDrag are custom event types that are exposed as props you need to change your code to this for it to work: 

      <AnnotationCallout
              x={320}
              y={140}
              dy={117}
              dx={162}
              color={"#ff0032"}
              className="show-bg"
              editMode={true}
              note={{
                "title" : "001",
                "dataTest":"123",
                "lineType" : null,
                "padding" : 15,
                "titleColor" : "#ff0032"}}
              connector={{"end" : "arrow"}}
              onDragEnd: {(props) => {console.log(props)}
       />