hosting arrows in an arbitrary HTML element instead of `document.body`

[jan-dolejsi]

I see that all the examples host the arrow in the body.

document.body.appendChild(arrow.node);

It works well in simple web pages, but I run into issues in two scenarios:

• in some more complex web page layouts (based on Material IO web components) the arrows initially paint with an offset and the user has to scroll the page a bit to get the arrows re-painted in the right position. While scrolling the page, the arrows jitter and lag behind the scrolling.
• if the page is nested in an environment such as VS Code / Jupyter notebook visualization widget, the arrows do not show at all (perhaps there is a confusion about document.body, or the environment bans modifications of the body, not sure)

I tried to append the arrows to another element such as

document.getElementById('someContainerDivId').appendChild(arrow.node);

... but then the arrows did not show at all. No error in the console.

Can you see what happens if the arrows are added to an arbitrary div (let's say a div that contains the arrow start/end element)?
Otherwise the package is pretty awesome!

[sasza2]

OK thanks. I'll check it

[sasza2]

@jan-dolejsi could you check this branch https://github.com/sasza2/arrows/tree/fix/remove-scroll-and-position-to-fixed ?
and please look at example: examples/container/index.html

[jan-dolejsi]

It is better. The arrows' initial position is in the right spot and the lagging during scrolling is gone.

I still did not figure out how to load the script correctly inside the Jupyter notebook VS Code renderer, but that would be unrelated to this issue as I now see the error:

Uncaught ReferenceError: arrowCreate is not defined
 at createArrow (<anonymous>:3:7)
    at <anonymous>:238:5
    at domEval (index.js:1066:15)
    at renderHTML (index.js:1082:3)
    at async Object.renderOutputItem (index.js:1336:11)
    at async q.renderOutputItem (notebookWebviewPreloads.js:3:18335)
    at async Object.h (notebookWebviewPreloads.js:3:22801)
    at async Object.render (notebookWebviewPreloads.js:3:22370)
    at async ce.render (notebookWebviewPreloads.js:3:33402)

.. while the same HTML renders the arrows when displayed by a regular browser window.

But this issue can be closed now (and shipped :-]). Thanks!