LeaderLine not rendering, and no errors are being shown

[ianday]

Hi, I am attempting to create a basic diagramming tool in Angular 7 that uses ng_template to dynamically generate -divs- that represent nodes of a model. When I attempt to link two together with a LeaderLine, there is no error produced and no line displayed. I am sure that I have followed all of the steps.

[anseki]

Hi @ianday, thank you for the comment. Could you explain the "steps"?

[ianday]

Thanks @anseki - The method I am using looks like this (apologies, I couldn't get the fomatting right):

addNewRelationship(src: string, targ:string): void {

    // use the factory to retrieve the object created.
    const startElem = this.document.getElementById(src);    // which is 'plObj_1'
    const endElem = this.document.getElementById(targ);     // which is 'plObj_2'

    const line = new LeaderLine(startElem, endElem);            // instantiate and render the line
    line.size = 10;
    console.log(src + ' - ' + targ); }

My declarations are: import 'leader-line'; declare let LeaderLine: any;

Please let me know if you want any of the module files - would be happy to send. --Ian

[ianday]

Hi Anseki,

For reference, here are the source files for the module I am working with regarding issue #357.

Thanks,

Ian

From: anseki @.> Reply-To: anseki/leader-line @.> Date: Tuesday, September 20, 2022 at 10:53 PM To: anseki/leader-line @.> Cc: Ian Day @.>, Mention @.***> Subject: Re: [anseki/leader-line] LeaderLine not rendering, and no errors are being shown (Issue #357)

Hi @ianday, thank you for the comment. Could you explain the "steps"?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[anseki]

I copied your code and ran it. https://jsfiddle.net/cbuvx42g/ Then, that worked fine without problem.

Another part of your code may have a bug. For example, the addNewRelationship might be not called. Was the console.log() executed?

For reference, here are the source files for the module I am working with regarding issue #357.

Where are the source files?

[ianday]

Hi Anseki,

Thanks for your message, I have uploaded the repo to github and sent you an invitation as a collaborator (Please let me know if you didn’t receive it).

I have also included a brief video that will highlight the issue that I am facing.

Thanks again for taking a look at this.

Ian

From: anseki @.> Sent: Wednesday, September 21, 2022 7:43 PM To: anseki/leader-line @.> Cc: Ian Day @.>; Mention @.> Subject: Re: [anseki/leader-line] LeaderLine not rendering, and no errors are being shown (Issue #357)

I copied your code and ran it. https://jsfiddle.net/cbuvx42g/ Then, that worked fine without problem.

Another part of your code may have a bug. For example, the addNewRelationship might be not called. Was the console.log() executed?

For reference, here are the source files for the module I am working with regarding issue #357 https://github.com/anseki/leader-line/issues/357 .

Where are the source files?

— Reply to this email directly, view it on GitHub https://github.com/anseki/leader-line/issues/357#issuecomment-1254444513 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AC3F4W4NJLUIB2A6SEKFRQTV7PBSLANCNFSM6AAAAAAQRWRU5I . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AC3F4W4HUVWWFF52Z6GZ6FLV7PBSLA5CNFSM6AAAAAAQRWRU5KWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTSKYVG6C.gif Message ID: @.*** @.***> >

[anseki]

Sorry, my English is poor. Do you mean that my message (https://github.com/anseki/leader-line/issues/357#issuecomment-1254444513) didn't help you?

[ianday]

Thanks for your message, it did not.

I am using divs within a

and I think the SVG components are confused where to place the leader-line.

Thanks again,

Ian

From: anseki @.> Sent: Thursday, September 22, 2022 6:28 PM To: anseki/leader-line @.> Cc: Ian Day @.>; Mention @.> Subject: Re: [anseki/leader-line] LeaderLine not rendering, and no errors are being shown (Issue #357)

Sorry, my English is poor. Do you mean that my message (#357 (comment) https://github.com/anseki/leader-line/issues/357#issuecomment-1254444513 ) didn't help you?

— Reply to this email directly, view it on GitHub https://github.com/anseki/leader-line/issues/357#issuecomment-1255710104 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AC3F4WY5PJ4326WWHBVNJATV7UBSRANCNFSM6AAAAAAQRWRU5I . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AC3F4W43MI72SFYFNJGXDJTV7UBSRA5CNFSM6AAAAAAQRWRU5KWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTSK3COZQ.gif Message ID: @.*** @.***> >

[anseki]

Hmm... I'm confused. Sorry, my English is poor. Could you explain what happened? You said that the line was not shown. Then, I showed you the example code in JSFiddle. Didn't you try the code that I showed you? Or, Didn't the code work? Also, you didn't answer to my questions.

And why do you think that the SVG has problem about the place? You said that the line was not shown. BTW, could you post to via web (https://github.com/anseki/leader-line/issues/357) instead of email if possible?

[ianday]

Thank you for your message. I did manage to get it to work partially, the line drawn was off-screen. I needed to change the ‘z-index’ to get it to show, but it then showed it in the wrong location within my base div element.

I used: const svgSpaces = document.getElementByClassName('leader-line'); const svgSpace = svgSpaces.item(svgSpaces.length -1); svgSpaces.style.zIndex = 100; // bring to the front.

I think at this point I am going to try a different solution. Thank you for all your help.

[anseki]

Ok. :smile: Yes, you should use another solution instead, as you said. Good luck :v: