search

anseki / leader-line

Draw a leader line in your web page.
http://anseki.github.io/leader-line/
MIT License
3.03k stars 423 forks source link

Adding another option for `startPlug` or `endPlug` in **my personal fork** of `leader-line` #345

Closed djpasseyjr closed 2 years ago

djpasseyjr commented 2 years ago

Hi, I have a site that uses leader-line. Can you help me understand how leader-line works? Can you send me the files and line numbers that I need to change in order to render a customized svg endPlug option?

Here is what I tried:

// Select my custom svg for the startPlug/endPlug: <g id="leader-line-plus"> ... </g>
// I made this myself. It is a circle with a plus sign inside.
// It has an ID that matches `leader-line` start and end plug svgs
plus = document.getElementById("leader-line-plus")

// I select the element that contains the leader-line start and end plug svgs
lldefs = document.getElementById("leader-line-defs")
lldef_tag = lldefs.firstElementChild.nextElementSibling

// Add my custom svg to the defs
lldef_tag.appendChild(plus)

But the problem is when I call

line = new LeaderLine(div2, div1, {endPlug: "plus"})
// Leader line does not recognize "plus"
// It switches to the default `endPlug` and doesn't use my custom end plug
// HELP: line.endPlug == "arrow1" but I want line.endPlug == "plus"

What can I do to fix this? Where does this happen in the code?

anseki commented 2 years ago

Hi @djpasseyjr, thank you for the comment. I don't know whether you want to customize the library or change current SVG. If you want to customize the library for the option, you have to edit symbols.html to recognize your new symbol (*Plug options) and compile the library with customized files. Or, if you want to change current SVG only, you can edit the symbol that you will choose in svg#leader-line-defs > defs (e.g. #leader-line-arrow1).

djpasseyjr commented 2 years ago

This is perfect. I didn't think of editing the existing svgs. I'm just making a prototype so a hacky solutions is fine for now! I'm going to give that a shot. I'll let you know if it works.

anseki commented 2 years ago

I'm glad if I could help you. :smile: Could you close this issue when it is solved?

djpasseyjr commented 2 years ago

It worked! Thanks for the help.

If I used:

<script src="path/to/leader-line.min.js"></script>

Then I could create my own svg with id="leader-line-arrow1" in my document and it was preferred to the arrow1 svg defined in the .min.js file. If I run into problems having multiple elements with the same ID I can always change the one in the min.js file.

anseki commented 2 years ago

:smile: