Add lines to particular div instead of window itself

[manojdcoder]

Is it possible to configure the parent container (which is window by default)? Only portions of my screen is scrollable, so the arrows overlap with main content when the start / end point is scrolled behind the main content.

Thanks for the wonderful library!

[anseki]

Write parentNode instead of parentNde. I already pointed the strange property in https://github.com/anseki/leader-line/issues/54#issuecomment-520717947.

[manojdcoder]

Sorry that was a typo. I can of course do

props.svg.parentNode.removeChild(props.svg);

But I will have to edit the remove method in the library file for this purpose. I was just hoping if there is a different workaround, that doesn't require editing the source file.

[anseki]

Sorry, I couldn't understand you well... Your example didn't throw an exception error when the window is resized. Could you show me an example to reproduce that?

[manojdcoder]

@anseki You don't have to wait for window resize. After appending the SVG to a wrapper div, calling remove itself throws exception because the library tries to remove SVG from body element always.

[anseki]

Yes, of course the library has to remove the element. That is correct behavior. Sorry, I couldn't understand what is problem. Could you show me an example to reproduce the problem with resizing window?

[anseki]

I don't know your situation. And I couldn't understand what is problem. Then I don't know what you want to do. Anyway, this is example to avoid that error simply. https://jsfiddle.net/30kuar95/ The error is thrown because you moved the elements, it is very simple. Also, your code tries to remove line1 twice.

[manojdcoder]

@anseki I was able to reproduce the issue, for various reasons I'm having to re-render the whole container (including the wrapper div), when I do that I hit this error.

The library keeps track of all active lines until it's removed by calling remove() method. But we can't do that as the library would try to remove it from document element, but it's being appended to wrapper div.

https://jsfiddle.net/z0638dyo/

[anseki]

I see... You used DOM#remove method instead of LeaderLine#remove method, is it right? If so, of course the library can't work because that doesn't expect removing elements directly as all libraries which make DOM component. Then, you have to use the LeaderLine#remove method to remove the instance, never change the DOM component. Also, you should use methods that are supported by each library.

[kd2801]

Hi. There is an issue with this example https://jsfiddle.net/op2gnk0t/ as well as when I am implementing the same. Whenever I am resizing the window, arrows tend to change their position. In my case as soon as I open console, arrows position are updated and they shift upwards. Please help.

[anseki]

Hi @kd2801, thank you for the comment. Add this line to your code.

LeaderLine.positionByWindowResize = false;

[fxck]

Ran into this as well, managed to hack around it by changing all instances of leader-line's document.body.appendChild and document.body.removeChild to perform it on document.getElementById('leaderline-container') instead, and also using offsetLeft / offsetTop instead of getBoundingClientRect(), because in my case I was trying to make leader-line work along panzoom, so I needed the original coordinates of the start / end elements, rather than those affected by panzoom's css transform.

I'm not sure if this would work for everyone, but seems to be working for my particular use case (incidentally my container element is absolutely positioned and the size of the body, which probably helps)

https://www.youtube.com/watch?v=TxWNVDvFIiY

[anseki]

Hi @fxck, thank you for the information :smile:

[steve-heine]

@fxck, have you found a way to add the lines to a scaled div?

I've been doing the exact same thing as you. If I scale the image div after adding the lines, it's fine, but when adding the lines to a scaled div (via panzoom) I've been running into issues getting the coordinates to be correct.

[fxck]

look up use of getBoundingClientRect(), and create the bBox object from offsetWidth and offsetHeight for width and height and sum of offsetTop and left for all offsetParents, with something like

  function getOffset(element) {
    var offsetLeft = 0;
    var offsetTop  = 0;

    while (element)
    {
        offsetLeft += element.offsetLeft;
        offsetTop  += element.offsetTop;

        element = element.offsetParent;
    }

    return [offsetLeft, offsetTop];
  }

for top, left, right, bottom, x, y

[steve-heine]

@fxck tested your fork of the lib and it worked perfect for me. Thanks!

[fxck]

Sure, just use it with caution, it's only a quick monkeypatch for my one use case and I don't really plan to maintain it / keep it up to date with this repo.

[wwzill0928]

有人可以告诉怎么把父级容器body换成自己的指定的吗

[anseki]

Hi @wwzill0928, thank you for the comment. Sorry, I can't understand the language.