Draggable Autoscroll with bezier connectors

[FatMunkey]

I am trying to have a bezier connector between two draggable divs.  I have used the code made by OUSblake at

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

.

 

So I can make it work, more or less. 

• Draggable works?  Check. 
• Autoscroll works? Check. 
• I can draw a bezier between my draggables?  Check. 

 

The problem happens when I drag either of the the Things to make the area Autoscroll.  The bezier seems to forget that it was attached to the divs.  When I scroll back so that both of them are in view the bezier re-connects - sort of.  The connection is apparently very loose because it breaks when you scroll the window with a mouse wheel or by using the scrollbar as well as when you scroll while dragging.

 

Editing this post again!  I just realized that the script only updates the curve onDrag!  That means it does not update when scrolling is happening.  Wondering now how to approach that. 

 

Really, Autoscroll is not what I originally wanted.  I want draggable on the divs so they can be moved..  But I wanted to also make the Playground pan and zoom.  So instead of scrolling by dragging only also pan and zoom the area like in a maps application.

 

Eventually, I want to take this proto-type and use it to create a content rich kind of "flow-chart".  Basically, think of Thing 1 and Thing 2 both being filled with content - text, images etc.  All of it will be added via DOM manipulation when buttons in an accordion menu are clicked.  Let's say that I open the menu and click on Thing 1.  it opens and is draggable and filled with content.  On thing 1 is button that says "Thing 2".  Click it and Thing 2 will open next to Thing 1 with a bezier connector between them.  You can think of it as a simplified version of a node editor.  I don't need for the user to be able to drag and drop the connectors between blocks.  I also don't need to have the user delete or cut the connectors.  (both of them are typically feature of node editors but not necessary for my design.)

 

So, anyway, that is the goal.  

 

None of that will work if I can't figure out how to stop these  things from losing the connection with the curve when you autoscroll.

 

Any help and suggestions will be appreciated!

 

 

See the Pen XYdKKq by FatMunkey (@FatMunkey) on CodePen

[GreenSock]

If I understand your goal correctly, wouldn't it be as simple as changing the CSS of #svg from position: fixed to position: absolute? 

[FatMunkey]

Well!  I seriously never thought of that!  Derp!  Works like a charm.  A hard flick and Throwprops tears it loose but, no sweat...turning it off.

 

Thanks for the answer!

[GreenSock]

16 minutes ago, FatMunkey said:

A hard flick and Throwprops tears it loose but, no sweat...turning it off.

 

Ah, if you want throwProps to work (and keep the line connected), you can simply add an onThrowUpdate that's the same as the onDrag: 

 

throwProps:true,
onThrowUpdate:updateBoxesPath

 

Glad you got things working. Happy dragging!

[FatMunkey]

(see the codepen above)

 

I have adapted the codepen into my little app with no changes other than where the code is (t's split up into a couple of different places due to where my draggles are.) 

 

My problem is that the path does not render at all.  In the inspector i can see the path "d" attribute changing as I move the draggable and the coordinates look correct.  I just cant see the path.

 

I have tried altering z-index for the container and wrapper and the path itself but that does not seem to help.

 

I'm stumped as to why this would happen.

 

I'm using google chrome.

 

 

[PointC]

I'm assuming you mean the path between thing1 and thing2 ? That looks fines to me in all browsers. I'm not sure if others will see the problem you're experiencing, but it looks okay to me.

[FatMunkey]

right.  It works in the codepen but it is not visible when I use the same code in my app.  

 

I could link to the git repo but there is a lot of code.  Probably spagetti-esque! 

[PointC]

ah... I misunderstood. I thought it was broken in the CodePen. I'm not sure what to tell you then -- seems odd.