mo8it, 6 months ago

@janriemer Are you looking for the length of c?

What values are given?

janriemer, 5 months ago

@mo8it Basically yes. I try to calculate CSS relative position from the top-left parent rect for the red inner rect (think of CSS' top and left properties) when you drag the red inner rect.

And with my different calculations I've tried, I always manage it that all values cancel each other out, so when you try to drag the red inner most rectangle...nothing happens (but the code gets executed).😳

mo8it, 5 months ago

@janriemer Well, then from what you drew, the length of c is for sure not length of a - length of b. Or are these vectors? In that case, yes, |a - b| = |c|

janriemer, 5 months ago

@mo8it Yes, I've drawn them as vectors, so the formular is correct (validated, because variables have been canceling each other out). 🙂

janriemer, 5 months ago

@mo8it Values that are given:

• mouse position (dynamic, because when dragged, changes)
• mid-point of red inner rect (dynamic, because when dragged, changes)
• point at the top-left of red inner rect (dynamic, because when dragged, changes) <-- this is the thing I need to set, when dragged
• point at the top-left of parent rect (static)
• size of each rect (static)

I feel I'm creating an equation, where I have one variable on left side and one on the right side and they cancel each other out.

janriemer, 5 months ago

@mo8it I think I need to focus on the parent rect more and calculate from there and then derive values from this for the inner rect.

Otherwise my "values cancel each other out" will never stop, I fear. 😄

dpom, 5 months ago

@janriemer @mo8it If you capture the mouse position and center point when the drag is initiated, and calculate the starting position of the upper left corner by subtracting width/2 from x and adding height/2 to y, then after that, the (∆x, ∆y) of the mouse position (relative to its starting position) is also the (∆x, ∆y) for every other point on the rectangle (relative to their respective starting positions).

janriemer, 5 months ago

@dpom YES, thank you, Dusty!❤️🙏

I've come to more or less the same conclusion now (before reading your post). 😄

The crucial missing peace for me has been this: capture the mouse position and center point when the drag is initiated.

For context: I'm using bevy_drag&drop:
https://lib.rs/crates/bevy_dragndrop

but it has a bug in it and I'm trying to fix it. Currently, it doesn't store the starting mouse position and center point at drag-initiation at all, so I thought this shouldn't be necessary

@mo8it

janriemer, 5 months ago

@dpom @mo8it Yaaay, drag&drop works now! :awesome:

Thank you for your help in this! 🙂

Please see the video and screenshot below on how it's solved now.

(Video in the second toot, because apparently you can't attach both video and image in Mastodon).

#Bevy #BevyEngine

janriemer, 5 months ago

@dpom @mo8it

A window showing a grey rectangle that is placed with some offset to the corners of the window. In it is a small purple rectangle that is dragged with the mouse cursor. During the drag, the cursor stays at the original relative position within the dragged rectangle. Before this bugfix, it always jumped at the mid-point of the dragged rectangle.