Is there way to get clicked annotation data?

Answered

Hi, so I need to get the data of an annotation when clicked, I have tried with addEventListener ‘mousedown’ event and it work for most case, but the issue comes when some annotations are overlapping.

codesandbox example: https://codesandbox.io/s/vertically-stacked-axes-forked-smkd8v?file=/src/App.tsx

In the codesandbox example, you will see that M1 and M2 are overlapping, if I were to click on M2, the click event will return both M1 and M2, but I only want M2 to be return since I only click on M2.

I couldn’t make the clicking to work on codesandbox but I’m sure you get the idea. I have tested it on my local and I got that issue.

Please let me know if you got any other question, thank you.

Version

3.2.446

JavaScript BoxAnnotation javascript onclick

Nung Khual asked 11 months ago

You must login to post comments

Answers (1)

Best Answer

There is a clicked event on annotations which simplifies the code somewhat, but reacting to only the top annotation is still a bit of a challenge. I’ve shown one approach in a fork of your codesandbox here https://codesandbox.io/s/vertically-stacked-axes-forked-x9crl2

The key is that internally SciChart checks if each annotation is clicked in reverse order, which means descending z order. Therefore by setting a flag on the first click and using it to ignore subsequent – you get what you want. Because we are using SciChart’s internal click handling, all the events are part of the same call, so we can use setTimeout to clear the flag immediately after this has finished.

Here is the click handling

box.clicked.subscribe((data) => {
  // Click events are sent to annotations in reverse order, ie highest in z order first
  // Only process the first click
  if (!isClicked) {
    console.log(text);
    textAnn.text = text + " clicked";
    isClicked = true;
    // reset the flag.  This occurs after the current processing (which includes all the potential click events) has finished
    setTimeout(() => {
      isClicked = false;
    }, 0);
    // reset the text after a while
    setTimeout(() => {
      textAnn.text = text;
    }, 1000);
  }
});

I’ve added a task for us to think about if we could make this easier.

Regards
David