Cannot read properties of null (reading 'removeChild')

[dianamarginean]

hi.

I'm using Annotorius with OSD in my angular project and come across the following error.

So this happened after I added an event on mouse move where I get the currently selected annotation, change its svg and then select the annotation again( this last step was added only because the changes were not visible just only after the selection was made. I don't know why...)

Any Ideas how to get rid of the error or how to change a svg in real time from ts file?

[rsimon]

Hi,

hm, hard to tell what's going on there. But in any case: you would't change anything about the annotation. On the one hand because the annotation object isn't directly tied to the SVG; on the other hand, the internal state is (roughly...) immutable. Whatever you get back through the API is just clones of the data objects.

If you want to change an annotation, you'd need to alter the annotation like above, but then re-add the annotation using anno.addAnnotation(). If your modified annotation shares the same ID with the original, it will replace the previous version, and changes should be visible in realtime.

[DiegoPino]

@dianamarginean note sure what the use case is here and what you really are trying to accomplish, but I'm pretty sure you can't just swap the SVG from the DOM element, the annotation is an internal structure/object and the SVG (rendered) is just its representation.

What we do is something like this (works but might not be the prettiest code!), Get a current one and modify (or start from scratch), (see ::toAnnotation), add it and then select it.

https://github.com/esmero/format_strawberryfield/blob/97e4111829bb8fba388e713ba26a7ae636dc8f17/js/iiif-openseadragon_strawberry.js#L491-L499

Also, DOM wise: Existing SVGs can not be modified (most of the time) via simply replacing a value/string. There is a whole SVG way. See here https://github.com/esmero/format_strawberryfield/blob/97e4111829bb8fba388e713ba26a7ae636dc8f17/js/iiif-openseadragon_strawberry.js#L233-L240

[rsimon]

Thanks @DiegoPino, yes that's exactly the right way to do it. Also reminds me - I really need to check your OpenCV features! (And in general: good to see you around here :-)

[dianamarginean]

thank you guys

[Edo2610]

Hi @dianamarginean since you are using Annotorious with OSD in Angular can you help me with my problem?

https://github.com/annotorious/annotorious-openseadragon/issues/181#issue-1841424947