anseki / leader-line Goto Github PK

I love your leader-line tool and have implemented it successfully. However, do have the ability to target intersections between lines? Like when these two things join you can call out another arrow to that point in time.

Hello

I really like this plugin as its perfect for a small project i'm working on. Does 95% of the job very well except for 1 little issue. I have a fixed menu on the left which can be expanded / collapsed as desired. When this menu expands / collapses, the lines become disconnected with their elements. If it were 1 line i would have used the position method to update its position. but i will have 10s of lines between different elements. How can i update position of all these at once when menu is opened / closed? I have the screen shots attached to show before and after menu opens and closes.

Also, i want to add some extra classes to the SVG elements (add to leader-line class). How can i do this?

Thanks for your help and support.

Is there any way to add an ID to leader line?

Thank you.

Is it possible to get the reference to the DOM element instance?

Hi,

I am trying to delete all leader-lines before unmounting a component in React.
After successfully invoking line.remove() and unmounting the component the lines are actually gone (they have been removed from the DOM).

But on screen resize the console gets full of:

A disconnected element was passed. index.js:2178
TypeError: n is null. leader-line.js:4:12474

As I understand, the lines (which supposedly do not exist anymore) are trying to find out the position of their respective start and end anchors (which of course do not exist anymore, since the component containing them has been unmounted).

Why could this be happening?
Isn't the method remove() the correct way to get rid of the lines?

Thanks a lot in advance!

Hi,

First of all this is an amazing library, but i noticed that we are not able to draw lines on a popup window. The line is drawn below it , is there a workaround for this ?.

Thanks in advance.

could I add custom data like data-user property to the svg dom like this?

const leaderLineOptions = {
  "data-user": 'my_user_id'
};
new LeaderLine(start, end, leaderLineOptions);

Hi!

First, I'd like to say that this library is pretty cool and the documentation is great as well. The only aspect I am missing is about working examples showing Leader-line and Plaindraggable working together. I applied both on my project and when I move the draggable object (SVG circle) the lines are staying fixed on their initial position. I don't understand this behavior, would you mind to help with that?

I tried to find coding examples everywhere but did't have success.

Thank you!

Hi, This is more of a question than an issue. Is there an option to set z-index for the line and plugs separately? Please check the image below. I had to set z-index of the leaderline higher than the rectangle html element in order for the plugs to appear above the element. But I dont want the line to appear over the element. Can anyone please help me? Thanks in advance.

Hi Anseki,

This library is excellent no issues no bugs, just perfect.

I need a help for my project.
I'm using 'panzoom' library to zoom and drag elements in side a div.
i have to draw a line between two elements, using your excellent library i drew line.
but the problem is after i zoom out or drag the elements aside, the drawn line is still stuck there.
i know issue is not with leaderline library.
but would need your help to fix the issue.

Thank You

I am using a zoom function on my app. It is updating the Leader Line with the position method, but when you're zooming out things turn funny... see image.

I think a fix would be to constrain Leader Line to the div that is zooming so that they zoom out with the rest of the page, is this possible? Any thoughts?

Hi,

Is there a way to start or end a line in a corner (e.g top-right , bottom-right etc)

Best Regards

Indunil

Demo does not in FF, throws this error:
TypeError: Value being assigned to SVGRect.x is not a finite floating-point value

Hi develop team,

Can I draw the connector between to div inside the parent container, which has the scroll bar?

Thank you

Which browsers does this lib support? I can't find anything in the readme?

Hi,

I went through the documentation and didnt come across about attaching events to lines. I mean events like right click, mouse over etc.

Are there event handling support added already or

is there a possibility to add 'id' attributes to lines, so then it is possible to bind events to individual lines.

Best Regards

Indunil

I'm having some issues with z-index because the lines are added to the body element and I have a div that needs to pop up over everything on the page. I can't get it to work as the lines will always be on top. I could hide the lines but the div needs to be semi-transparent and I'd prefer if they could appear through the background.

If I could append the lines to a certain element that would solve the problem but I can't seem to find anywhere to do this.

Hi again Anseki!

One more time, thanks and congratulations for creating and sharing with us this amazing tool. I am sorry to bother you again with doubts and questions.
I was wondering if would be possible to use the lines with another draggable library. I found one called Displace.js that is very simple to use and lightweight, and it was easier to get for example my draggable element to go outside its div. I was trying to do the same with PlainDraggable and didn't get, unfortunately.

I need to build something like this:
https://codepen.io/A8-XPs/pen/JwWLOd

They need to be interactive for the user, which will be able to hold a circle and drag wherever he wants on the website, and the lines need to follow the circle, creating a deformation in the shape (this is intended). I can't find a way to make the circles to go outside their parent div (this is the first difficult). Also, the circles must be still draggable after we bring it outside of its parent div.

I apologize again to disturb you and would like to kindly request the possibility of help with samples.
I have those shapes in SVG but also considered to make them with span elements in absolute position, I planned to make the lines (paths) to be created with the leader-line and of course the visual result would be similar but not exactly the same (I can define the svg paths to be transparent).

I had difficult to create shared draggable elements, as the example that I sent you some of the circles are the start point for multiple items. Or, in the oval shape example the start point of a line is the end point to another.

Thank you very much!

I tried using this within a scrollable bootstrap modal, but since the svg's are seemingly attached to the body of the document, it does not scroll with the rest of the page. Is there a way around this?

Hey! Super cool library! :) I couldn't find any TypeScript typings, is there a possibility you're gonna include them in the npm package?

Hi Can you please provide the Unminified Js file.

I need it so I can attach a parent element to the leaderline

Hi, this is more a question than issue, but I'm curious if there's a straightforward way of making the 'bends' in the lines for the 'grid' paths more fluid? Otherwise I'm really enjoying this library, thanks!

Is there any way for these arrows to be draggable? So I'd love to be able to drag the arrow pointer from one div to the next. I am creating a mapping tool of source columns to destination columns, so this would be very useful.

Hi,

Is it possible to create the line dynamically ?
Please check this example: https://gojs.net/latest/intro/ports.html#DrawingNewLinks
Creating the new lines between the nodes in the UI. if it is possible kindly provide any example.

Regards,
Sundeep Gullapudi.

P.S : Your work is cool 👍 Both Leader Line and Plain Draggable libraries are awesome.

Thanks for the great library!

It would be nice to be able to import this into a larger app being bundled by webpack/rollup. Right now the global variable that's defined requires a legacy library plugin to get it in.

There may be an easy way to do this; if so, my apologies.

I'd like to find a way to offset a plug from its target element by an arbitrary amount of pixels. I see that you can set the x,y coords relative to element but without knowing which side or point the plug will be at there's not a way to find which direction the offset should be in.

The pathLabel is showed upside down as you can see in the image:

Only happens when the arrow direction is from right to left.
Did I do anything wrong?

Thanks!

Would it be possible to register an event listener for when the line is clicked? I'd like to remove a line when clicked

There is no option to specify where to append the line SVG. It would be good to be able to specify a specific element / viewport to append the SVG.

This would fix the issue if you draw the lines inside a scrollable element. Currently if it is inside a scrollable element we have to run the position method while scrolling which isn't very performant and the line is drawn on top which makes it able to go outside the element instead of disappearing underneath while it is scrolled.

Hi anseki,
I use npm install --save leader-line to install the leader-line into my vue-cli project, but I can not import LeaderLine into the code, the LeaderLine is an empty object.
However, I also try to solve this issue according #8, but those two solution also does not work. I can not get the window.LeaderLine object, but I can get the window.LeaderLineAttachment object. What is the usage of it? And can I use it to get the LeaderLine object?
Looking forward to your help.
Thanks and Best Regards,
West.

Is it possible to change the target container where the svg paths will be added to?

�Which APIs can listen the mouse events (enter,click...)，thks.

Hi,

More than an issue, I m finding a method to cntrol z-index of leader lines. In my case I have a custom developed modal appearing in front of page content, leader lines (while attached elements are behind the modal) are appearing in front of modal,

Can this be controlled with CSS ?

Best Regards

Indubuk

I installed leader line via npm, then imported and used it in my main.js file; however, when I try to then draw a line between two elements after the app has been mounted I receive this error:
[Vue warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_1__assets_leaderLine_js__.default is not a constructor"

main.js file has:

import LeaderLine from 'leader-line'
Vue.use(LeaderLine)

Hi,

how can this library be imported in e.g. a React app with Webpack?

Thanks.

Is there a way to use this library with create-react-app ?
The only way I was able to use it was including it in a script tag inside index.html
and then inside of my component I had to use window.LeaderLine
This seems very hacky

Is it possible to define a custom svg element to use as a plug? For instance, I have a sketchy-looking arrowhead I'd like to use.

Is there events such as hover, click for a line?

I want to show 'delete icon' when hover on a line and remove a line when click on a line.

您好，看了之前的Issues,#2，但是还是不是很清楚如何引用，你说的用skeleton-loader这个的作用是什么？不是很明白，我是直接npm安装，然后直接import,这样在vue created中使用是不可以的。还望指点，谢谢！

Hi!

Could you add support for tooltips? It would be much like the labels but would only show when hovering over the leader line.

is there any option to draw line from one box (div) to another div, i mean by pointer of mouse, is there any way to do it ?

Reference Ex: http://sebastien.drouyer.com/jquery.flowchart-demo/ "Two operators" Example

Hi, I am trying to achieve something like above(The connection from right of top box to left of bottom box) with startSocketGravity and endSocketGravity. But All I could achieve is this.

If there is an option to add radius to grid path its also ok for me. After a lot of tweaking, I decided to ask for help from you guys. Could you please guide me? Thanks in advance.

thanks for his lib. it's great in what it does.

I'd like to leave a line in place for a while once drawn and move an object along it. I think I can do this pretty easy if I can get the path back from this library for a line created. Any advice?

Hi Team,
I am just trying this basic code and using http-server(https://www.npmjs.com/package/http-server) for hosting my app and facing below issue in console:

leader-line.min.js:2 Uncaught Error: `start` and `end` are required.
    at Ze (leader-line.min.js:2)
    at Ye.setOptions (leader-line.min.js:2)
    at new Ye (leader-line.min.js:2)
    at index.html:17

Here is my basic test code:

<html>
<head>
    <script src="leader-line.min.js"></script>
    <script>
        var startElement = document.getElementById('start'),
            endElement = document.getElementById('end');
        new LeaderLine(startElement, endElement, { color: 'red', size: 8 });
    </script>
</head>
<body>
    <div id="start">start</div>
    <div id="end">end</div>
</body>
</html>

If you have something like a sticky footer and have an arrow pointing from element X on the page to element Y in the sticky footer, when the user scrolls down the page the arrow will stay bound to element X however the length will not change to accommodate the now greater distance between X and Y, therefore resulting in the arrow moving further and further away from Y the more you scroll.

Hi,

I have implemented your great leader-line tool. but when i am using it and i suddenly change the position of the connecting endpoint the line doesn't move but instead it draws a new line. please could you help so if the endpoint position moves by and element getting smaller or any other element change size the leadline sticks to the endpoint

Thank you
Mand

Wrong lines are drawn. This is corrected by resizing the window.

jQuery(window).scroll(function() {
   var hT = jQuery('#n-1').offset().top,
       hH = jQuery('n-1').outerHeight(),
       wH = jQuery(window).height(),
       wS = jQuery(this).scrollTop();
   if (wS > (hT+hH-wH)){
       
       line.show('draw', {
        animOptions: {
          duration: 3000,
          timing: [0.5, 0, 1, 0.42]
        }
       }
       ); 
       if (typeof(Event) === 'function') {
  window.dispatchEvent(new Event('resize'));
} else {

  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}
   }
});

But it doesn't work on Safari.

Hi,

I have two questions:

• is there a way to manage the animation speed?
• when setting dash to true, is it possible to set the stroke-linecap to round instead of square?

Thanks a lot in advance!

Is there any easy way to do this? Been playing around and by disabling the check I can get it to render an SVG but the it has no size, obviously due to the x/y coords being the same as it's the same element. Any painless ways to change the style to have an arch that returns to the element it came from?