applybounds for parentNode

[Bartzel]

Good day!
I have a <g> element with several SVG stuff in it; a line and 3 circles. Depending on what's selected, different stuff happens. When you drag the line or the left circle, all other elements are moved with it. This works great, but the bounds are still only on the currently dragged element and all other moving elements will go right thru the bounds.

What i would like, is something like: this.target.parentNode.applyBounds('#stage'); But this returns an error (applyBounds is not a function). If i console.log this.target.parentNode, it does show the correct <g> element. How would i get it working?

 

 

[Carl]

Hi and welcome to the GreenSock forums,

 

Sounds like you're doing some pretty fancy stuff. Cool.

Without a demo its kind of hard to know what you are doing or what will work.

What you are asking for isn't an existing feature but it sounds like it would be possible if you dynamically wrapped everything you want to move together in a new <g> and then make that <g> the target of your Draggable with whatever bounds you need.

 

If you are looking for something else please provide a reduced test case with 2 or 3 simple shapes and the minimal amount of code to see what is happening.

You can fork this demo below which already loads Draggable

 

See the Pen mKYzvP?editors=0011 by GreenSock (@GreenSock) on CodePen

 

• click "edit on codepen"
• click "fork"
• add your code
• save
• post the link

 

Thanks!

 

 

[Bartzel]

Thanks! I stripped it down a bit and it's good enough for an example  The right dot will increase the size of the circle and with the line or center dot, you can drag the group. This is where the bounds only apply to the element that's currently being dragged. I would like to extend this to the group. It can be found here:

 

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

 

[Carl]

Thanks for the demo. It took a good 30 minutes for me to figure out what all the code was doing. Unfortunately for something with this level of complexity it would probably take a few hours to try to understand it fully and re-work the code to a place where maybe it would work as you expect.

 

Although, its pretty cool how you were able to get so much functionality into one Draggable.create(), I'm struggling to figure out how to effectively add in some level of updating the bounds of one of the elements based on the size of the others.

 

This isn't too say you're doing anything wrong, I just think I'd take a different approach and it would probably take quite awhile to even see if it would work.

 

Perhaps someone else can take a stab at it. Often times others see solutions that I don't. And like you suggested perhaps there is something in the API that could handle this or be added to handle it.

[Bartzel]

Hahaha, yeah... it turned out to be quite a complex thing in the end. Reason it has so much code, is because i want to set as much as possible in the JS. There will be many copies, once it all works like it should, and this way you can set most of the stuff up using the top variables.

As for the dragging functionality and calculations, i don't even understand half of it but i've been messing with it until it worked That's also why i was hesitant to create a codepen. In the end, i don't think it has to be an overly complex solution. If only i can acces the parent <g> and apply the bounds somehow... 

[GreenSock]

Yeah, this is definitely isn't a trivial task, but I took a crack at it for you: 

 

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

 

A few things to note:

• I simplified a lot of the code using some boilerplate functions for creating SVGs and setting attributes.
• I used a liveSnap to implement the bounds manually. 
• It was simpler to just use a Draggable for the overall group, and use the center, line, and outer edge elements as the "trigger". That way, the bounds are applied to the overall group very easily. 
• This whole thing would have been super simple if it wasn't for the custom logic necessary to limit the outer circle based on its radius in relation to the edges. That was the tricky piece - definitely an edge case.

I sure hope that helps. Hopefully you'll see enough value to join Club GreenSock

[Bartzel]

That's awesome, thanks a lot! I hope this will be ok with the client. They can be quite a pain in the #ss... I'll try my best to convince them, as this works much better. And try to make them greedy bastards get a Greensock plan  Thanks again!

[Bartzel]

One last question; since the X / Y / CX / CY are no longer being used, how would you reset the items to their original position? I used to do this by animating the X, Y etc. and the circle radius back to the original positions and size. This still seems to work, but after the reset, weird stuff starts happening while dragging and resizing (the line moves in a totally different direction and the right dot is outside of the circle).

I editted the CodePen to show what i mean:

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

[Bartzel]

Figured it out!  Simply resetting the transform: matrix(####) back to the original values does the trick! I was messing around with the clearProps: all, which gave some really odd results. Works just fine now!

[Carl]

Great! Thanks for letting us know you solved it. Very helpful.