search

susielu / d3-annotation

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

EditMode not working properly in ShadowDOM #52

Open manuelroth opened 5 years ago

manuelroth commented 5 years ago

Hi @susielu , Thank you for this great d3 plugin. Really love working with it. I encountered a problem when using d3-annotation inside a shadowDOM:

Problem:

My svg element lives inside a shadowDOM. If the element is in editMode it is not possible to drag the annotation handles. I have created a codepen to reproduce the problem -> https://codepen.io/anon/pen/GzqvbY?editors=1010

Try to drag the annotation handles and check the console for the error message (Cannot read property 'ownerSVGElement' of null).

Possible solution

I did some debugging and found out that the drag handler is registered on all elements passing this selector g.annotations (see code here):

drag().container(select("g.annotations").node())

This doesn't play nicely with shadowDOM, because the svg element inside the shadowDOM is not visible from outside. A possible solution could be to make the selection relative to the annotation-group:

drag().container(group.selectAll("g.annotations").node())

I wanted to create a PR but failed to implement a working solution. Do you have an idea how we could fix this?

Kind regards, Manuel

susielu commented 5 years ago

Hey Manuel, thanks for posting this. I haven't worked with the shadowDOM before. Thanks for making a codepen example. I'll take a look.

manuelroth commented 5 years ago

Hi @susielu, just wanted to let you know that I used your library to cover communal elections in the canton of zurich (switzerland). Thank you so much, it let us build this in a very short time -> https://www.nzz.ch/zuerich/regierungsrat-und-kantonsrat-zuerich-die-resultate-der-wahlen-ld.1465859?h

Bildschirmfoto 2019-03-24 um 14 55 47

Kind regards, Manuel

susielu commented 5 years ago

Thanks Manuel, still haven't put aside time to look at the shadow dom example, were you able to get your use case to work around it?

susielu commented 5 years ago

Really great to see the example, thanks for sharing!

manuelroth commented 5 years ago

Yes, I was able to work around it. It would still be helpful for future use of the library though. I think its always cool to share back some implementation examples to an open source project.