🚧Create ShapeButton control #213

CalvinWilkinson · 2022-03-04T20:22:14Z

I have done the items below . . .

I have updated the title by replacing the '<title>' section.

Description

Create a button control that contains all of the mouse functionality of the regular Button control. This will basically be a Button without the Label.

Eventually, this button can hold different shapes. But for right now, only implement a rectangle shape.

Also, refactor the Button class to inherit all of the new ShapeButton functionality with the extra label functionality added. This will simplify testing and implementation.

Also, improve mouse over calculations with the ShapeButton by making sure that the mouse is not considered to be over the button if it is on the outside of the radius of one of the corners but inside the rectangle bounds of the button. This can easily be done by maintaining circle data for each corner and checking if the mouse is inside of the corner circle relative to if its contained by the entire control bounds vs the rectangle formed by the corner circle centers.

Rounded Corner Rectangle Point Containment

This GIF demonstrates how to figure out if a point in space, (mouse location) is contained in a rounded corner rectangle.
This is how it's calculated in the rectangle shader.

Containment Concept

The idea here is to use the information in the GIF above to figure out if a point (mouse location) is contained inside and ONLY inside the Rounded Corner Rectangle. What this means is that if the point is located outer bounds and not in the invalid inner zones, then the point MUST be inside the shape.

The issue is trying to figure out if the mouse is a corner of the rectangle but not outside of the radius for that corner.
To figure out if the point is inside of a corner but not inside the invalid zone, check if the point is contained by the circle, and in the quadrant of that circle, and if the distance is less than the radius of the corner. If all of those conditions are true, then the point is inside of the shape.

If used for mouse location containment, (which is for this scenario), most of the time the mouse will not be inside of the outer bounds of the control. Also, most of the time, the mouse will pass into the outer bounds area via the longer horizontal or vertical sections of the button rather than by the corners themselves. This means the order of checks can be optimized based on the majority of mouse entries over the control.

Optimization 1:
If the point is outside of the outer bounds, then there is no point in checking anything else. The point cannot be contained.

Optimization 2:
If the point is inside of the inner bounds, then it HAS to be in the shape and it is impossible that the mouse could be in the invalid inner zones. This means you do not have to do further calculations of any of the corners.

Optimization 3:
If the point is in any of the corner circles, then it cannot be in any other corner circle so other corner circle calculations do not need to be performed.

Use the following order of checks to best take advantage of the optimizations above:

Optimization 1
Optimization 2
Optimization 3

💡TIP💡
Create an exact copy of the Button code and refactor it appropriately by removing the label functionality and cleaning things up. This goes for the Button unit tests as well. Once this is cleaned up, refactoring the Button class to inherit from the ShapeButton will be much easier.

Acceptance Criteria

This issue is finished when:

ShapeButton created and working
ShapeButton contains no text or label options
Mouse over calculates work properly and takes corner radius sections into account
Button class refactor to use the new ShapeButton
Code documentation added if required
Unit tests added
All unit tests pass

ToDo Items

Draft pull request created and linked to this issue
Priority label added to issue (low priority, medium priority, or high priority)
Issue linked to the proper project
Issue linked to proper milestone

Issue Dependencies

No response

Related Work

No response