feat(Circle): Add counterclockwise parameter to Circle class

[lbordowitz]

Description

This resolves issue #9653 to implement orientation to the circle. I have also taken the liberty of tidying the documentation, per #9654 , to emphasize that the angle is in degrees and will stay that way.

In Action

I used npm start node and the following code snippet for index.mjs:

const canvas = new fabric.StaticCanvas(null, { width: 500, height: 500 });
    const circle1 = new fabric.Circle({
      left: 100,
      top: 100,
      radius: 20,
      originX: 'center',
      originY: 'center',
      fill: 'rgba(0,0,0,0)',
      noScaleCache: false,
      strokeUniform: true,
      strokeWidth: 1,
      stroke: '#00ff00',
      selectable: false,
      hasControls: false,
      lockScalingX: true,
      lockScalingY: true,
      startAngle: 45,
      endAngle: 270,
    })
    const circle2 = new fabric.Circle({
      left: 200,
      top: 100,
      radius: 20,
      originX: 'center',
      originY: 'center',
      fill: 'rgba(0,0,0,0)',
      noScaleCache: false,
      strokeUniform: true,
      strokeWidth: 1,
      stroke: '#00ff00',
      selectable: false,
      hasControls: false,
      lockScalingX: true,
      lockScalingY: true,
      startAngle: 45,
      endAngle: 270,
      clockwise: false,
    })
    canvas.add(circle1, circle2);
    canvas.renderAll();

This is the resulting snapshot:

Note that they sweep out complementary angles.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[ShaMan123]

Looks good
I am not sure if how we should name the flag
Maybe it doesn't matter
Anyways we want to align to MDN at least with the default value, I would align also with the flag name
What do you think?

[ShaMan123]

The PR is missing a changelog entry and prettier (npm run prettier:write)
You can read the contribution guide for more context

[ShaMan123]

We might want to add the visual as a test, @asturur ?

[ShaMan123]

Looks good

[asturur]

Just to make clear how things seems obvious but aren't, i understood this would behave completely different,
a circle from 0 to 30 in counter clockwise for me would have created a sector of 30 degrees turning counter clockwise and not a circle of 360-30.

[asturur]

I m ok also without the visual test, since for now.
I would like to use this occasion to try to add the token with the permissions to actually execute those extra checks from forks, i ll merge it monday/tuesday when i can try to work on the token

[ShaMan123]

@asturur I will not merge n case you want to work on the tokens

[asturur]

The token thing is not as easy as it seems.
Or at least is not so straight forward.
I created a personal token and i added it in the repo, with granular permission on how to write.
Now i have to figure out how to make it appear as an env variable in the actions and have the apis use it.