Dear Andrew,
As mentioned in the previous question. we are getting ready to implement a comprehensive annotation and labeling functionality to our application. Although I know how to add scalable custom-annotations (your team guided us with the implementation in the past), an important part of of annotation functionality is. ability to edit the annotations. But I am having trouble accessing and interacting the the annotations.
How can I access the svg polygon nodes from the custom annotation and drag and move them? I have attched a video to show the existing functionality.
Best,
Pramod
- pramod butte asked 4 months ago
- You must login to post comments
Hello, if I understood correctly, you want to do some custom transformation of an SVG element within an annotation.
So, to access the underlying SVG element of an annotation you can get its reference using the svg property:
const customSvgReference = customAnnotation.svg
Also, check out this method, it may help to adjust an annotation dynamically:
https://www.scichart.com/documentation/js/current/typedoc/classes/customannotation.html#updatesvg
Another point – note that SciChartSurface internally disables pointer events on the SVG layer to apply the chart-specific interactivity.
So to capture mouse events on the SVG elements consider setting the pointer-events CSS property appropriately within your custom annotation SVG.
- Jim Risen answered 4 months ago
- last edited 4 months ago
- You must login to post comments
Jim’s approach of enabling mouse events on the svg and handling it directly on the svg is probably the easiest, as this is rather outside the scope of scichart. However, there might be a way to use scichart apis to achieve this:
Annotations have an onDragStarted method called on mouseDown, which they use to determine which dragging point (if any) was selected. You would need to implement your own hitTest logic to work out which node within your svg is selected. There is then a calcDragDistance method which is called on mouseMove. This tracks the previous point to determine how far the mouse has moved and updates the annotation accordingly.
You can also override the svgStringAdornerTemplate function which returns the svg that draws the selection box and drag handles. This could be made to show selection UI only for the selected node.
Regards
David
- David Burleigh answered 4 months ago
- You must login to post comments
Thank you for your prompt response.
I am of course able to access the SVG, and I did notice pointer-event was ‘none’ and changed it to ‘all’.
The challenge is detecting, converting and monitoring the mouse input from the annotation / plot coordinates to svg coordinates. also I cannot seem to attach a event-listener to the svg. Is there a math logic which allows translating from plot/annotation coordinates to svg coordinates?
Best,
Pramod
- pramod butte answered 4 months ago
There are utility functions translateFromCanvasToSeriesViewRect and the inverse translateFromSeriesViewRectToCanvas. The key is that annotation coordinates are (usually) relative to the seriesViewRect but annotation borders and adorners (the selection box and drag handles) are positioned on a different svg root which is relative to the entire canvas. This is so drag handles are not clipped by the seriesViewRect. You might find it easier to do this within a custom Modifier, rather than just through the annotation api. The docs on that have more detail on how to do these kind of coordinate conversions. If you’re still stuck, please open a support ticket where I can share a few more SciChart internals that may help you.
- You must login to post comments
Thanks David, do you have any examples? or more documentation?
- pramod butte answered 4 months ago
- You must login to post comments
Hi David,
i managed to get the ability to modify the svg. but the function which translate the pixel to data only work when in full view mode. in case I zoom in the hittestInfo does not work. I know there must be a conversion in coordinate system when zoomed in, but i am unable to find any specific documenation.
Usually, the problem is when you morph the svg towards x=0 or y =0 … you have reset the data coordinates where the svg is inserted. This is a customAnnotation which is able to zoom with the heatmap). this works great when I am at zoom level =1. the pixel co0rdinates of the svg are one to one translated to data using,
const hitTestInfo = this.heatmapSeries.hitTestProvider.hitTest(Math.floor(newPoint.x ), Math.floor(newPoint.y))
but this does not work when zoomed as shown in the video.
Best,
Pramod
- pramod butte answered 4 months ago
- You must login to post comments
Please login first to submit.
