Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draw segments in two strokes #87

Merged
merged 1 commit into from
May 2, 2024
Merged

draw segments in two strokes #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/__tests__/__snapshots__/RangesDisplay.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`RangesDisplay renders default 1`] = `
>
<RNSVGDefs>
<RNSVGPath
d="M 40 150 A 110 110 0 0 1 260 150"
d="M 40 150 A 110 110 0 0 1 150 40 A 110 110 0 0 1 260 150"
fill={
{
"payload": 4278190080,
Expand All @@ -21,7 +21,7 @@ exports[`RangesDisplay renders default 1`] = `
name="TextPath-1.25-0"
/>
<RNSVGPath
d="M 258.3288528313429 169.10129954336233 A 110 110 0 0 1 41.671147168657114 130.89870045663764"
d="M 258.3288528313429 169.10129954336233 A 110 110 0 0 1 130.89870045663767 258.3288528313429 A 110 110 0 0 1 41.671147168657114 130.89870045663764"
fill={
{
"payload": 4278190080,
Expand All @@ -31,7 +31,7 @@ exports[`RangesDisplay renders default 1`] = `
name="TextPath-2.5-1"
/>
<RNSVGPath
d="M 46.633811713550074 112.37778423417645 A 110 110 0 0 1 253.36618828644993 187.62221576582357"
d="M 46.633811713550074 112.37778423417645 A 110 110 0 0 1 187.6222157658235 46.63381171355006 A 110 110 0 0 1 253.36618828644993 187.62221576582357"
fill={
{
"payload": 4278190080,
Expand All @@ -41,7 +41,7 @@ exports[`RangesDisplay renders default 1`] = `
name="TextPath-3.75-2"
/>
<RNSVGPath
d="M 245.2627944162883 204.99999999999991 A 110 110 0 0 1 54.737205583711784 94.99999999999993"
d="M 245.2627944162883 204.99999999999991 A 110 110 0 0 1 95.00000000000009 245.2627944162883 A 110 110 0 0 1 54.737205583711784 94.99999999999993"
fill={
{
"payload": 4278190080,
Expand Down
4 changes: 2 additions & 2 deletions src/components/__tests__/__snapshots__/Segment.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`Segment renders default 1`] = `
}
>
<RNSVGPath
d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 217.81476007338057 140.79116908177593 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
fill={null}
propList={
[
Expand All @@ -28,7 +28,7 @@ exports[`Segment renders default 1`] = `
strokeWidth={2}
/>
<RNSVGPath
d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
d="M 190.71067811865476 190.71067811865476 A 100 100 0 0 0 217.81476007338057 140.79116908177593 A 100 100 0 0 0 213.35804264972018 84.16320504546997"
fill={null}
propList={
[
Expand Down
5 changes: 5 additions & 0 deletions src/utils/__tests__/__snapshots__/arcHelpers.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`arc helpers returns d path for an arc - opposite angle needed for ratings range display 1`] = `"M 248.4271208749459 113.04091428474516 A 104 104 0 0 1 239.4680573482968 95.73865497772863 A 104 104 0 0 1 227.43893458527793 80.41112412784959"`;

exports[`arc helpers returns d path for an arc 1`] = `"M 248.4271208749459 113.04091428474516 A 104 104 0 0 0 239.4680573482968 95.73865497772863 A 104 104 0 0 0 227.43893458527793 80.41112412784959"`;
8 changes: 2 additions & 6 deletions src/utils/__tests__/arcHelpers.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,10 @@ describe('arc helpers', () => {
});

it('returns d path for an arc', () => {
expect(drawArc(152, 152, 104, 136.5, 158)).toEqual(
'M 248.4271208749459 113.04091428474516 A 104 104 0 0 0 227.43893458527793 80.41112412784959'
);
expect(drawArc(152, 152, 104, 136.5, 158)).toMatchSnapshot();
});

it('returns d path for an arc - opposite angle needed for ratings range display', () => {
expect(drawArc(152, 152, 104, 136.5, 158, true)).toEqual(
'M 248.4271208749459 113.04091428474516 A 104 104 0 0 1 227.43893458527793 80.41112412784959'
);
expect(drawArc(152, 152, 104, 136.5, 158, true)).toMatchSnapshot();
});
});
26 changes: 22 additions & 4 deletions src/utils/arcHelpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,31 @@ export const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {

export const drawArc = (x, y, radius, startAngle, endAngle, range = false) => {
const start = polarToCartesian(x, y, radius, endAngle);
const midPoint = polarToCartesian(x, y, radius, (startAngle + endAngle) / 2);
const end = polarToCartesian(x, y, radius, startAngle);

const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';

const sweepFlag = range ? 1 : 0;

const d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y].join(' ');

const d = [
'M',
start.x,
start.y,
'A',
radius,
radius,
0,
0,
sweepFlag,
midPoint.x,
midPoint.y,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lines 21-28 are the new entries to the path

'A',
radius,
radius,
0,
0,
sweepFlag,
end.x,
end.y
].join(' ');
return d;
};
Loading