Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GNB

Drawing Drag and drop connectors between SVG elements

Recommended Posts

New to GSAP

 

How can I use GSAP to draw connectors like the ones seen in software applications that use node based editing ?

Each node is like a box, when the user clicks, drags and drops from one node to another, a line connecting the two is created.

 

how this can be done in GSAP for an SVG illustration ?

 

 

Link to comment
Share on other sites

Hi @GNB

 

Are you talking about something like this?

bX9P9FM.png

 

If so, I would have to ask how your JavaScript skills are. It can end up becoming very complicated. The draggable part isn't too hard. Keeping track of what connects to what, and updating all those connectors when you drag a node is.

Link to comment
Share on other sites

Thanks for the reply.

 

Its exactly what I am looking for. 

 

I believe I have a pretty good understanding of Javascript and am currently learning NodeJS and ReactJS when I stumbled upon GSAP on a youtube video. They say ReactJS can add elements to SVG just like it handles HTML ! Am so amazed what GSAP can do for SVG Animation with not too complicated javascript.

 

I have not tried any SVG animation using Raphael, D3 or GSAP.  So would also like to know if HTML5 drag and drop events (drag, dragstart, dragenter, dragend...) would work on SVG elements too ?

 

Say if all the nodes and their connections can be stored in a JSON string/ Javascript Object, my biggest hurdle still is drawing these elastic lines from point 1 to point 2.

 

Could you give any pointers about how to do this in GSAP ?

 

Link to comment
Share on other sites

.

1 hour ago, GNB said:

I believe I have a pretty good understanding of Javascript and am currently learning NodeJS and ReactJS 

 

That's good. As I said earlier, the hardest part is keeping track of all the connections, so using something like React will work well as you can bind the data to your components.

 

1 hour ago, GNB said:

I have not tried any SVG animation using Raphael, D3 or GSAP.  So would also like to know if HTML5 drag and drop events (drag, dragstart, dragenter, dragend...) would work on SVG elements too ?

 

Drag events really don't work on SVG elements. But that's ok because GSAP has a draggable utility that works much better than native drag and drop. Here's a demo that allows you to drag points on a polygon around.

 

See the Pen QdbQjN?editors=0010 by osublake (@osublake) on CodePen

 

1 hour ago, GNB said:

my biggest hurdle still is drawing these elastic lines from point 1 to point 2.

 

Could you give any pointers about how to do this in GSAP ?

 

Sure. I can make a demo for you later today that shows how to do this.

 

  • Like 3
Link to comment
Share on other sites

On 9/19/2017 at 6:50 PM, OSUblake said:

Sure. I can make a demo for you later today that shows how to do this.

 

 

Looking forward to seeing that demo.

Link to comment
Share on other sites

Does this really take this long to get an answer on the "great" and "friendly" GSAP forum ?

Or did OSUBlake (superhero) got abducted or was asked to stand down ? ;-)

 

This post will double as "mock test" for the GSAP forum.

Test shows if it is really worth spending 50+ dollars and then face a sort of lock in.

 

Guess, will have to repeat the test from a different IP address ! :-D

 

 

 

 

Edited by GNB
refactored the message
Link to comment
Share on other sites

Howdy @GNB - I'm not quite sure what you were expecting, but @OSUblake is a very busy guy who does a TON to help people in these forums out of the kindness of his heart. I'm sure he'll get back to you when he can, but the snarky comments may be counterproductive if your goal is to get a prompt and generous answer from him. 

 

To be clear, we really try to keep these forums focused on GSAP-specific questions. I wish we had the resources to offer free general consulting for web development and animation challenges. We moderators/admins have spent thousands upon thousands of hours setting aside time in our days to help folks with their GSAP-related questions. The Club GreenSock membership stuff is totally optional, and it's *NOT* for getting premium support or anything like that. We do our best to serve even non-paying users (which, quite frankly, is the VAST majority). 

 

Hopefully if you poke around, you'll see that the tone in these forums is remarkably friendly and helpful compared to most other forums, and that GSAP is pretty unique in terms of a long-term commitment to ongoing development and support of a project like this. Two things make that possible: Club GreenSock and the generous volunteer efforts of the moderators who burn hours of their day helping complete strangers because that's just the type of people they are (and I like to think it's partially due to their enthusiasm about GSAP). 

 

Anyway, welcome to the forums - we're glad you're here. I don't personally have time to build out a solution for you for the connecting lines, but hopefully Blake has something up his sleeve that he can share at some point (he's known for having all sorts of crazy experiments laying around). :)

 

 

  • Like 4
Link to comment
Share on other sites

May be its this cultural thing, but in my side of the world if you make a fool of someone and make them wait in a queue and dont reply, its natural to get a snarky question or worse, if they feel they will not be answered.

 

After reading the reply from @Jack the Super-visor, it feels like I am a transit passenger waiting in line at the Houston International Airport for TSA screening. One of the 'friendliest and the most helpful' Airport in the world. -- "We are happy to welcome you to our Airport. Where Questions will be answered in the order they were recieved, snarky comments will be counterproductive to get the visa stamped to enter the region. Club members will get premium services, but our agents reserve the right to deny any and all services. A non refundable fee of $50 applies for applying for premium services.  And if you dont cheer us at facebook in the last 20 years or if we find you did not promote us on social media, you can expect your application/questions rejected. "

 

1 hour ago, GreenSock said:

I'm not quite sure what you were expecting

 

From a `Friendly and Helpful forum with a Friendly tone`, I was expecting @OSUBlake to fulfil his promise. OSUBlake promised a prompt reply on Tuesday. But as of Friday there were no replies.

 

1 hour ago, GreenSock said:

 @OSUblake is a very busy guy

 

Aren't we all very busy ? Anyway, I am.  

If @OSUBlake is very busy why did he volunteer to post a reply "later today" ?

He could have just said "I am a busy guy" and be done with it aye?

 

1 hour ago, GreenSock said:

 if your goal is to get a prompt and generous answer from him. 

 

Being polite was not enough, do these people need an extra serving of french fries or something to incite generosity despite being dishonest about their replies ?
 

Link to comment
Share on other sites

Geez! You're not the only person I said I would help later that night.

 

 

Notice how @Sahil did not resort to calling me a liar when I did not promptly reply back later that night.

 

I've had limited internet access the past couple of days because they are redoing some of the utilities damaged by Hurricane Irma. What more do you want of me? Send smoke signals?

 

I said I would help you out. Let me get caught up on some other stuff I missed, and I will post a demo when it's ready.

 

  • Like 4
Link to comment
Share on other sites

Yes, @OSUblake, the least you could do is send some smoke signals while your utilities are being repaired after a natural disaster. Please also write a binary parsing mechanism hooked up to a satellite so this never happens again. Short puff = 0, Long puff = 1. Sure, it may take a day to string together enough signals to form a cohesive sentence, much less a full codepen demo, but hey, we're all busy. 

 

"...an extra serving of french fries" - Mmm, sounds good. ;)

  • Haha 5
Link to comment
Share on other sites

For the record, @GNB, I totally see why it'd be a bit frustrating if you were told you'd have an answer in a specific timeframe and didn't get it. Understandable.  @OSUblake is typically awesome with getting people above-and-beyond answers, but hopefully it's clear now that there was good reason for him not being able to get back to you within that time frame he mentioned (natural disaster).

 

Anyway, I just wanted to make sure I acknowledged the fact that he did specify a time frame and it didn't happen which was cause for your original frustration. 

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

A pretty advanced demo of a node based editor. It uses a single Draggable instance to control everything. Based on a larger project I was working on. I need to add in a couple more features like deleting connectors and mouse wheel zoom. 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Pretty neat!

 

There's a lot of uses for an editor like that. The demo I made is based off of BuildBox, which is for game design. 

 

Here's one that is for Three.js rendering. I was thinking about doing something similar to that, but for SVG filters as it has a similar workflow. 

 

jnL779P.jpg

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

I am trying to modify the example of the draggable Bezier connector (

See the Pen GMrExO by osublake (@osublake) on CodePen

) and get the curve to "hang" downwards like the cables in the image Carl posted. 

My solution after some trial and error and some more googling (

See the Pen LaKpeX by anon (@anon) on CodePen

) feels very static to me, but I am stuck on how to improve it.

Anyone got a clue?

Link to comment
Share on other sites

Good job making the adaptations. How exactly did you want to improve it? Are you trying to make it swing or something based on momentum? Pretty much anything is possible, but we really try to keep these forums focused on GSAP-specific questions. Got one of those? We'd be glad to help. 

Link to comment
Share on other sites

What I wanted was for it to look less rigid, if that makes any sense. Swinging and a texture would be amazing, but I am too new to the library to pull it off.

 

I realize now though that this is not gsap specific question, so I am not sure how relevant my question is.

Link to comment
Share on other sites

Yeah, I personally love challenges like this but I just don't have the bandwidth to devote time to it at the moment. Perhaps someone else is inclined to jump in, but like I said we generally try to keep these forums GSAP-focused as much as possible. Good luck with your project!

Link to comment
Share on other sites

  • 2 months later...

Dear OSUblake,

 

this is a great system to develop workflow , but how we can detect "after wiring processes" that the input or output is actually wired and to what exactly , this would help in developing great workflow system 

Link to comment
Share on other sites

14 hours ago, Ayman said:

this is a great system to develop workflow , but how we can detect "after wiring processes" that the input or output is actually wired and to what exactly , this would help in developing great workflow system 

 

Hi Ayman,

 

I just noticed your PM. I made these demos more as demonstration of how to visually manipulate connectors.

 

As I stated earlier in this thread, handling the logic to make it fully functional is really complicated and beyond the help that can I offer in this forum. I think using a declarative framework like React could really simplify a lot of the complexity.

 

And I know there are other libraries that can do this sort of thing. I would try figuring out what this tool is using. It looks like a good starting point.

http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json

 

 

  • Like 3
Link to comment
Share on other sites

On 9/22/2017 at 6:37 AM, GNB said:

May be its this cultural thing, but in my side of the world if you make a fool of someone and make them wait in a queue and dont reply, its natural to get a snarky question or worse, if they feel they will not be answered. 

 

Sorry, I know this thread is years old, but i had to respond to this rude "cultural thing". Complaining that someone ( @OSUblake ) didn't take their own personal free time to help them with an in depth, time consuming question, with not even a whiff of being thankful or understanding.

 

How dare you Blake not respond later that night while still suffering the effects of Hurricane Irma? You will always get at least one person who expects they should be waited on like your their coding butler manservant.

 

Don't worry Blake I'm sure there are plenty of users in the forum who are grateful for your help!

 

:)

  • Like 4
Link to comment
Share on other sites

15 hours ago, OSUblake said:

 

Hi Ayman,

 

I just noticed your PM. I made these demos more as demonstration of how to visually manipulate connectors.

 

As I stated earlier in this thread, handling the logic to make it fully functional is really complicated and beyond the help that can I offer in this forum. I think using a declarative framework like React could really simplify a lot of the complexity.

 

And I know there are other libraries that can do this sort of thing. I would try figuring out what this tool is using. It looks like a good starting point.

http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json

 

 

Thank you Blake,

 

Appreciate your response , I just wanted to get a confirmation if it will be possible if I use Vue to reference a connector inside SVG and detect if it is connected and from where, if this is possible in react I assume it would be possible using Vue.js , excuse me if I'm asking very obvious questions, but I need the direction to plan how to move, appreciate it in advance.. 

Link to comment
Share on other sites

1 hour ago, Ayman said:

Appreciate your response , I just wanted to get a confirmation if it will be possible if I use Vue to reference a connector inside SVG and detect if it is connected and from where, if this is possible in react I assume it would be possible using Vue.js , excuse me if I'm asking very obvious questions, but I need the direction to plan how to move, appreciate it in advance.. 

 

Sure, Vue should work just fine. I just said React because that's what the OP said, but any framework that simplifies building data-driven interfaces should be fine e.g. React, Vue, Angular, Svelte, LitElemet, etc.

 

  • Like 2
Link to comment
Share on other sites

8 hours ago, Jonathan said:

Sorry, I know this thread is years old, but i had to respond to this rude "cultural thing". Complaining that someone ( @OSUblake ) didn't take their own personal free time to help them with an in depth, time consuming question, with not even a whiff of being thankful or understanding.

 

How dare you Blake not respond later that night while still suffering the effects of Hurricane Irma? You will always get at least one person who expects they should be waited on like your their coding butler manservant.

 

Haha. I get a kick out of watching people demand free stuff, and this "cultural thing" comment definitely takes the cake.

 

10/10

 

This is why we can't have nice things.

 

  • Like 2
  • Haha 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×