Jump to content
GreenSock

GNB

Drawing Drag and drop connectors between SVG elements

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all,

 

I was also shocked myself reading the OP comments. ¯\_(ツ)_/¯

 

I’ve been interested in this subject matter for some time. So since this thread was recently bumped and new to me, maybe some of the following research will be useful to someone. But more importantly hopefully allow people visiting this discussion to better understand the complexity of what is actually being asked in this thread.

 

• jquery.flowchart https://github.com/sdrdis/jquery.flowchart

• Total.js Flow https://github.com/totaljs/flow

• Rete.js (formerly D3NE) https://github.com/retejs/rete

• RPD https://github.com/shamansir/rpd

• JSPlumb https://github.com/jsplumb/jsplumb
• LeaderLine https://anseki.github.io/leader-line/

• Etc.,

 

Most of the above JS frameworks offer events, callbacks etc., in addition to the connector logic so they might be good inclusive starting points or alternatives for someone wishing to develop something?

 

Here is also an (old) logic based article discussing Angular:

https://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

https://github.com/ashleydavis/AngularJS-FlowChart

 

Even though that article is old it should still be relative regarding general logic to React and Vue workflows also. I believe some of the above JS frameworks also have examples using these as well if you look around.

 

All of the above seem pretty relative as example approaches. Of course it could be simplified if you are willing to write your own connector and drag drop logic based upon your specific needs and requirements. But if not then some of those may help people.

 

Of course @OSUblake has the talent to roll his own complete approach, but I would definitely not think anyone should expect that of him to be offered freely here in this thread (regardless of how ridiculously talented he is :—) and beyond what he already demonstrated and offered here already.

 

As everyone should quickly see from the above examples this is not something that will be easily explained or offered through a simple thread query. As these systems can be quite complex when you factor in all the needed logic even for basic systems, which can differ vastly between each usage case and requirements.

 

The above should afford people viable approaches to this, so hopefully something will be useful to someone (13K+ views?). ¯\_(ツ)_/¯

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

@Shrug ¯\_(ツ)_/¯ nailed it! One of the best posts on this forum ever. ?

 

That Angular flowchart article does a great job showing the complexity of a project like this.

 

A good resource for source code that does flowchart type stuff with SVG is Joint.js. If I remember correctly, that's where I learned how to do Bezier curve between the connections.

https://www.jointjs.com/opensource

 

  • Like 3
Link to comment
Share on other sites

Thanks for that Joint.js reference. I had also known of it and was gonna post it also but didn’t notice or realize they offered an open source version (cool I better re-look at some others too). There are also others which are only payment or subscription based.

 

Along with a lot of other frameworks related specifically to flowcharts and diagraming which offer connectors but those may or may not have the required events, callbacks etc., logic included. You can even find some nice D3.js, etc., examples which are relative. Many options to choose from but of course no one size fits all. So it just simply can't be definitively answered in a simple forum post to satisfy everyone or every need for such a broad topic. ;--)

 

On 6/20/2019 at 4:44 PM, OSUblake said:

One of the best posts on this forum ever.

 

Nah I don’t accept that, my post was basic.

 

Not to name drop (and in no particular order) but virtually every snippet and code logic discussion posted by any of these users are generally encapsulated with nuggets of pure brilliance and learning opportunities: @GreenSock , @Carl , @ZachSaucier  @OSUblake , @PointC , @Jonathan , @mikel , @chrisgannon@Dipscom , @elegantseagulls , @Rodrigo , @Shaun Gorneau , @Sahil , @Acccent , @Diaco , @Victor Work , @Visual-Q, ++++ so many others. Including many single post wonders by people which are never to be heard from again. Many thanks to all !

 

These people and many others are all Greensock forum heroes, and much more worthy of such high praise for their daily posts. But I'm still glad you liked the post, thanks.

  • Like 9
Link to comment
Share on other sites

6 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Not to name drop

 

giphy.gif

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

Shhh .. I was trying to be discreet. ?

 

<non-discreetness>

But in full disclosure I meant to name drop and blatantly thank all those folks (+more) for all they do around here. Indeed most their posts are full of nuggets of gold. Anyone viewing this thread (13K+) please note the forum search and taking time to back read through any of these peeps posts is like GSAP gold just laying there. Pure GSAP goodness to be had by all, so be sure to profit from it.

</non-discreetness>

 

I thought it was fitting in light of the original tone of the thread.

 

  • Like 5
  • Haha 1
Link to comment
Share on other sites

19 hours ago, Shrug ¯\_(ツ)_/¯ said:

I thought it was fitting in light of the original tone of the thread.

 

It is good to see a fellow smiley face around here.

 

You have one up on me, since my avatar does not have any hands. But that's what mustaches are for. :)

  • Like 1
  • Haha 5
Link to comment
Share on other sites

 @OSUblake Any chance you have an example of the draggable Bezier connector but between 2 rects instead of circles? I am trying to update the code you gave but am not able to get the line to match up to the rects correctly.

 

Thanks,

D

Link to comment
Share on other sites

 

Welcome to the forum @dylanlarrivee

 

3 hours ago, dylanlarrivee said:

between 2 rects instead of circles

 

If you're speaking is this example:

 

It looks like you could maybe just set the _gsTransform += half the size of the your desired rect dimension in the updatePath function.

 

var x1 = handles[0]._gsTransform.x+10;
var y1 = handles[0]._gsTransform.y+10;
var x4 = handles[1]._gsTransform.x+10;
var y4 = handles[1]._gsTransform.y+10;

 

For instance if your rect is 20.

 

<rect class="handle" x="0" y="0" width="20" height="20" />
<rect class="handle" x="0" y="0" width="20" height="20" />

 

Maybe that will help get you heading toward your goals, or someone else will have a better suggestion if thats not performant enough. This thread might be played out with custom requests though. I think @OSUblake specifically might be tired of it, similar to other threads, (ha, ha). ??

 

  • Like 2
  • Thanks 1
  • Haha 2
Link to comment
Share on other sites

  • 3 weeks later...

I love this thread, sitting on a train and reading it since I am looking for something exactly like this to try to make workflow building more intuitive...

if you ever seen how the node editor in Blender works, this is what I would like to achieve for various functions in a workflow engine to work.

But as a learning exercise I would like to build it myself... and I want it on a platform not bound to specific hardware/os so Java/JavaScript seems to be the most natural way to go...

favmarked to look closer at it at a l ater time :)

Link to comment
Share on other sites

1 hour ago, Dhurgan said:

But as a learning exercise I would like to build it myself... and I want it on a platform not bound to specific hardware/os so Java/JavaScript seems to be the most natural way to go...

 

This is really only specific to JavaScript, so it probably wouldn't translate well to other languages like Java.

 

To make a cross platform app with JavaScript, the easiest solution might be to use electron.

https://electronjs.org/

 

 

  • Like 4
Link to comment
Share on other sites

Thanks, Electron looks quite interesting...

 

Link to comment
Share on other sites

  • 1 month later...
On 9/19/2017 at 5:50 PM, OSUblake said:

.

 

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.

 

 

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.

 

 

 

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

 

thank you very much, i used the principle on a project and has helped me a lot

  • Like 1
Link to comment
Share on other sites

  • 3 months later...
  • 4 months later...
On 9/26/2017 at 12:09 AM, OSUblake said:

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. 

 

 

 

 

Hey @OSUblake, here's someone who sincerely appreciates the efforts you make! Especially in this thread haha :)

I tried recreating this example using the latest GSAP release inside an Angular app and I think it almost works. The only part I wasn't able to get to were inside the `Connector.updatePath()` method. In there you use `inputHandle._gsTransform`, however the `_gsTransform` property doesn't seem to be present on the `inputHandle` and `outputHandle` elements...

Do you know where this property `_gsTransform` migrated to? It seems a "gREENsOCK" property?

Link to comment
Share on other sites

15 minutes ago, ropsth said:

Hey @OSUblake, here's someone who sincerely appreciates the efforts you make! Especially in this thread haha :)

I tried recreating this example using the latest GSAP release inside an Angular app and I think it almost works. The only part I wasn't able to get to were inside the `Connector.updatePath()` method. In there you use `inputHandle._gsTransform`, however the `_gsTransform` property doesn't seem to be present on the `inputHandle` and `outputHandle` elements...

Do you know where this property `_gsTransform` migrated to? It seems a "gREENsOCK" property?

 

Of course after finally deciding to drop a message you fix the problem lol.

 

I was able to make it work using the `_gsap` property in the `inputHandle`. That has a `x` and `y` property. 

 

Really beautiful example, thank you!

Link to comment
Share on other sites

18 minutes ago, ropsth said:

Hey @OSUblake, here's someone who sincerely appreciates the efforts you make! Especially in this thread haha :)

 

Pro tip: I'll answer anyone's question if they make a bare minimal effort to try and understand my code. Any attempt... that's all I ask, but I can tell you've already done that! 😉

 

20 minutes ago, ropsth said:

The only part I wasn't able to get to were inside the `Connector.updatePath()` method. In there you use `inputHandle._gsTransform`, however the `_gsTransform` property doesn't seem to be present on the `inputHandle` and `outputHandle` elements...

 

Yes, that changed with v3....

 

4 minutes ago, ropsth said:

I was able to make it work using the `_gsap` property in the `inputHandle`. That has a `x` and `y` property. 

 

You should never use an underscore to access something in v3 of gsap. There is a proper way to access everything now. Check out the getProperty() function.

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

And check out the Reusable getter function at the bottom. It will cache the target to improve performance.

var getter = gsap.getProperty(inputHandle);
var x = getter("x");
var y = getter("y")

 

If you need more help, just let me know.

  • Like 5
Link to comment
Share on other sites

  • 1 year later...
On 9/26/2017 at 3:39 AM, OSUblake said:

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. 

 

 

 

 

hey @OSUblake,this is great. This is exactly what I am trying to make. However, the code is very complex and difficult to understand, and a lot of the functions have been deprecated I think. Could you please update this with more comments and explanations and also include the delete feature if you have implemented it. I have making div dynamically that are draggable and I want to connect them. 

Link to comment
Share on other sites

  • 1 year later...

Hey @OSUblake - signed up just to say thank you. The demo you did back in time helped me a lot. If I can buy you coffee or something, just share a link.

  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

I know this is a really really old thread but I was just doing some initial research into "linked nodes".

Didn't even occur to me to have a look on the gsap forum. 

 

Lucky I found this thread, which is out of date but gave so much useful information (thanks @OSUblake & @Shrug ¯\_(ツ)_/¯). 

It's amazing how much content there now is on these forums and the breadth of the topics discussed and solved.

 

Lesson one - whatever the problem gsap might have a solution - always worth a look on these forums .

 

:)

 

 

 

  • Like 1
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.
×