Ensure mouse corners match custom control corner size #6562
Conversation
|
we are going to talk about this, i m just busy right now. |
| @@ -88,24 +88,32 @@ | |||
| x, y; | |||
|
|
|||
| for (var control in coords) { | |||
| // handle custom control corner sizes | |||
| var controlObject = fabric.Object.prototype.controls[control]; | |||
| var cornerHyp = controlObject.cornerSize | |||
There was a problem hiding this comment.
what about extending the controls to return their own corner shape? is a bit more complicated but would solve the problem of both different sized controls and corners that are rectangular.
controlObject.cornerSizeX and cornerSizeY and would also change the math down to something i can't calculate now on the top of my head. But definitely doable
|
@asturur What do you think about this? I wasn't sure how if you wanted cornerSize vs cornerSizeX, cornerSizeY. I also added touchCornerSizeX,Y. More still needs to be done but wanted your thoughts on which direction to take if you want to change some things. |
|
Hey sorry for not coming back. |
|
Just let me know if you have concerns. The chief thing I'm not sure about
is handling rectangle vs. square since I didn't really need the rectangle
for my square icon. But having one more prop doesn't really bother me.
…On September 23, 2020 12:33:08 PM Andrea Bogazzi ***@***.***> wrote:
Hey sorry for not coming back.
I need this exact same feature, and i m a bit short of time.
I want to be sure this PR fix your use case and my use case and i m trying
to get the chance to do this at work.—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
|
The idea looks good completely. |
|
@asturur What do you mean by "try if the calculations are correct"? I adjusted the sizes and noticed that the mouse was properly changing the cursor when within the rectangle. I'm not sure if you mean just verified that things were working? I used basic trig to make the calculations. |
| br: { | ||
| x: centerX + cosHalfOffset, | ||
| y: centerY + sinHalfOffset, | ||
| }, |
There was a problem hiding this comment.
this bunch of numbers here i remember they work with square and are a simplified version. Once the object is rotated i believe with a strongly rectangular controls, this does not work.
This same thing overly complicated the padding logic elsewhere.
the x and the y coordiante of each point when rotated are both affected by cos and sin of the 2 offsets.
There was a problem hiding this comment.
There should be some debug code to uncomment to see those points on the canvas.
There was a problem hiding this comment.
Yes, I think I understand the original code now. It's using the complementary angle to triangulate the other corner (which both angles are 45 when in a square, which is why stuff works but it's almost hard-coding to run the original way). Things were working with right angles when I'd rotate so thanks for challenging me to check other rotations.
I'm not sure about debug code though. I did find things below a getImageLines call that I was able to uncomment and see some squares show up so that was hepful.
There was a problem hiding this comment.
@asturur Is there anything else you'd like to see here? I tried adding padding to a shape and the rectangular corner worked, even when rotating.
|
Testing this now and trying to merge it. |
|
There is some issue with rendering changing only some controls. |
|
Changes i applied:
|
|
I like the rename... I was concerned about it but didn't want to change things without your approval so glad that's good! |
Pertains to issue 6556. I've added code to ensure that the mouse will highlight over all parts of the custom corner size instead of the original corner size.
I also added a test based on just changing the size of one corner.
I'm not sure if more should be done for the touch code, as I'm unfamiliar with it.
This has morphed to also provide support for rectangular custom controls (a feature desired for 4.0 that didn't make it).
Closes #6556