glitcheclipse

Most of the open source libraries I have found do not support types for Angular 2+ and will not load correctly if typescript cannot interpret the JavaScript. Trying to find a library that does or is native to angular that is not a paid solution isn't as common unfortunately. If you know of one, I am all ears.

The older post link has a node example that looks very useful. Thank you. I've seen the recommendations for the 3rd party libraries. Libraries like Jointjs are ideal, but they are extremely expensive if you are just a single developer designing your own thing and not doing this as part of a larger company. Thank you for the help. This should get me going.

Thank you for a starting point. I didn't think it was going to be easy, but if I could find a library that could specifically do what I wanted to do I wouldn't be trying to create it. From an interaction standpoint. Generally a user will only be trying to connect one node to another (so one line). I would like to give the option for them to select multiple starting nodes and connect to a single node. But that is the extent of the interactive "connection" piece I am envisioning. From a loading standpoint though, they could build elaborate systems of nodes and on load that would need to draw all the connected nodes and relatively fast. But that would just be looping through the saved paths and getting them to draw much like the video is doing on click. I wouldn't need the curved path as as a starting point. A straight line would do to start with. Thank you again. I'll start with the DrawSVG and venture into this new world of graphics and see how much trouble I can get into.

I am just getting introduced to GSAP and I basically have it set up in angular was able to get a circle svg moving. Yeah me. I am looking into this animation library because I have a need to create a node system for my app. Between the nodes I will need to create an animated line that will start from the node I click on and terminate at a different node clicked as an endpoint. You've seen the flow chart systems I am sure, so something similar to that. But I will also need to disconnect the line when it is dragged off of a node. Drawing the animated line is I need guidance on. Since I am brand new to this I have no idea where to start, but after watching a conference video online where GSAP was talked about I believe it might be what I am looking for and would allow me some other options as my interactive node diagram grows. I am not worried about the coordinate system for mouse clicks. I can handle that. But I need to know how to draw the animation and where to start. The closest example I can find to what I am wanting to accomplish is referenced in this conference video from a few years ago. refer to time 1:05 in the intro. https://www.youtube.com/watch?v=30li6w62eCo There is a tree visualization in that video as an example. I am not looking for anything that complicated, but I would need the user to interactively draw the lines from a node to another node (or element) in a tree to connect it and disconnect it. I feel that if this could be created as an example, that it was completely possible. I just need a starting point. Thank you and I am excited to get started.