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

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

• 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 1

Share this post


Link to post
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

Share this post


Link to post
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. ;--)

 

1 hour ago, 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 ,  @OSUblake , @PointC , @Jonathan , @mikel , @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 8

Share this post


Link to post
Share on other sites
6 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Not to name drop

 

giphy.gif

  • Like 1
  • Haha 3

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks, Electron looks quite interesting...

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×