Skip to content

Commit c23f577

Browse files
erik-perrierik-perri
authored
Merge pull request #12 from sourcetoad/static-positioning
Static positioning
2 parents 080164f + d42a404 commit c23f577

32 files changed

+623
-175
lines changed

‎.eslintrc.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ module.exports = {
1111
parser: '@typescript-eslint/parser',
1212
plugins: ['@typescript-eslint'],
1313
extends: [
14-
'plugin:@typescript-eslint/recommended',
15-
'plugin:@typescript-eslint/recommended-requiring-type-checking',
14+
'plugin:@typescript-eslint/recommended-type-checked',
1615
'plugin:@typescript-eslint/strict',
1716
],
1817
},
@@ -26,5 +25,6 @@ module.exports = {
2625
rules: {
2726
'prettier/prettier': ['error'],
2827
'simple-import-sort/imports': 'error',
28+
'no-console': ['error', { allow: ['error', 'info', 'warn'] }],
2929
},
3030
};

‎.github/workflows/check-code.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ jobs:
1919
name: Check Code (Node ${{ matrix.node }})
2020

2121
steps:
22-
- uses: actions/checkout@v3
23-
- uses: actions/setup-node@v3
22+
- uses: actions/checkout@v4
23+
- uses: actions/setup-node@v4
2424
with:
2525
node-version: ${{ matrix.node }}
2626
cache: 'npm'

‎.github/workflows/publish.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ jobs:
1010

1111
name: Publish
1212
steps:
13-
- uses: actions/checkout@v3
13+
- uses: actions/checkout@v4
1414

1515
- name: Setup node
16-
uses: actions/setup-node@v3
16+
uses: actions/setup-node@v4
1717
with:
1818
node-version: 18
1919
cache: 'npm'
@@ -27,7 +27,7 @@ jobs:
2727
env:
2828
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
2929

30-
- uses: actions/setup-node@v3
30+
- uses: actions/setup-node@v4
3131
with:
3232
registry-url: 'https://npm.pkg.github.com'
3333

‎README.md‎

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,61 @@ npx add-badges <input-glob> <badge-text> [options]
3535

3636
See [fast-glob](https://github.com/mrmlnc/fast-glob) for glob details.
3737

38-
### Options
39-
40-
See [samples](https://github.com/sourcetoad/add-badge/blob/master/SAMPLES.md) for some previews.
41-
42-
| Option | Description | Default |
43-
|----------------------|--------------------------------------------------------------------------|------------------------|
44-
| `--font-file` | Text font file | Roboto Black (Bundled) |
45-
| `--font-size` | Text size (pt, scaled for images not 192px) | 28 |
46-
| `--text-color` | Text color (`transparent` for transparent) | #666666 |
47-
| `--background-color` | Badge background color | #ffffff |
48-
| `--gravity` | Badge gravity (northwest, north, northeast, southwest, south, southeast) | southeast |
49-
| `--shadow-color` | Badge shadow color | rgba(0,0,0,0.6) |
50-
| `--dry-run`/`-d` | Does not perform actions | |
38+
## Options
39+
40+
See [samples](https://github.com/sourcetoad/add-badge/blob/master/SAMPLES.md) for previews.
41+
42+
### Font File `--font-file`
43+
44+
The font file path to use for the badge text.
45+
46+
Type: `file`
47+
Default: `Roboto Black (Bundled)`
48+
49+
### Font Size `--font-size`
50+
51+
The font size to use for the badge text. The size will be scaled up or down if the image is not 192px.
52+
53+
Type: `point`
54+
Default: `28`
55+
56+
### Text Color `--text-color`
57+
58+
The color to use for the badge text. Use `transparent` for transparent text.
59+
60+
Type: `color`
61+
Default: `#666666`
62+
63+
### Background Color `--background-color`
64+
65+
The color to use for the badge background.
66+
67+
Type: `color`
68+
Default: `#ffffff`
69+
70+
### Shadow Color `--shadow-color`
71+
72+
The color to use for the badge shadow.
73+
74+
Type: `color`
75+
Default: `rgba(0,0,0,0.6)`
76+
77+
### Gravity `--gravity`
78+
79+
The gravity to use for the badge. The badge will be placed in the corner specified by the gravity.
80+
81+
Type: `northwest | north | northeast | southwest | south | southeast`
82+
Default: `southeast`
83+
84+
### Position `--position`
85+
86+
If set, the badge will be placed manually instead of automatically. If only one number is provided, the badge will be placed on the gravity axis at the position. If two are provided, the first will be the `x` position and the second will be the `y` position.
87+
88+
Numbers are in percent of the image's dimensions (integer).
89+
90+
Type: `number | number,number`
91+
Default: `undefined`
92+
93+
### Dry Run `--dry-run`/`-d`
94+
95+
If set, the command will only preview the files that would be changed.

‎SAMPLES.md‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,38 @@
22

33
### Gravity
44

5-
| `--gravity northwest` | `--gravity north` | `--gravity northeast` |
6-
|---------------------------------------------------------------|-----------------------------------------------------------|---------------------------------------------------------------|
5+
| `--gravity=northwest` | `--gravity=north` | `--gravity=northeast` |
6+
|:--------------------------------------------------------------|:----------------------------------------------------------|:--------------------------------------------------------------|
77
| ![](./samples/output/ic_launcher-xxxhdpi-northwest.png) | ![](./samples/output/ic_launcher-xxxhdpi-north.png) | ![](./samples/output/ic_launcher-xxxhdpi-northeast.png) |
88
| ![](./samples/output/ic_launcher_round-xxxhdpi-northwest.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-north.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-northeast.png) |
99

10-
| `--gravity southwest` | `--gravity south` | `--gravity southeast` |
11-
|---------------------------------------------------------------|-----------------------------------------------------------|-----------------------------------------------------|
10+
| `--gravity=southwest` | `--gravity=south` | `--gravity=southeast` |
11+
|:--------------------------------------------------------------|:----------------------------------------------------------|:----------------------------------------------------|
1212
| ![](./samples/output/ic_launcher-xxxhdpi-southwest.png) | ![](./samples/output/ic_launcher-xxxhdpi-south.png) | ![](./samples/output/ic_launcher-xxxhdpi.png) |
1313
| ![](./samples/output/ic_launcher_round-xxxhdpi-southwest.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-south.png) | ![](./samples/output/ic_launcher_round-xxxhdpi.png) |
1414

15-
### Size
15+
### Position
1616

17-
| Adaptive | MDPI | MDPI Round |
18-
|---------------------------------------------------|--------------------------------------------|--------------------------------------------------|
19-
| ![](./samples/output/ic_launcher_foreground.webp) | ![](./samples/output/ic_launcher-mdpi.png) | ![](./samples/output/ic_launcher_round-mdpi.png) |
17+
| `--position=0` <br/> `--gravity=northeast` | `--position=50` <br/> `--gravity=northeast` | `--position=100` <br/> `--gravity=northeast` |
18+
|:-------------------------------------------------------------------------|:--------------------------------------------------------------------------|:---------------------------------------------------------------------------|
19+
| ![](./samples/output/ic_launcher_round-xxxhdpi-position-northeast-0.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-position-northeast-50.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-position-northeast-100.png) |
20+
21+
| `--position=10` <br/> `--gravity=north` | `--position=10,50` <br/> `--gravity=north` |
22+
|:----------------------------------------------------------------------|:-------------------------------------------------------------------------|
23+
| ![](./samples/output/ic_launcher_round-xxxhdpi-position-north-10.png) | ![](./samples/output/ic_launcher_round-xxxhdpi-position-north-10x50.png) |
2024

2125
### Appearance
2226

23-
| `--background-color "rgba(0,0,0,0.75)"` `--text-color transparent` |
24-
|--------------------------------------------------------------------|
25-
| ![](./samples/output/ic_launcher-xxxhdpi-dark-transparent.png) |
27+
| `--background-color="rgba(0,0,0,0.75)"` <br/> `--text-color=transparent` | `--shadow-color="hsl(78,100%,37%)"` <br/> `--text-color=transparent` |
28+
|:-------------------------------------------------------------------------|:---------------------------------------------------------------------|
29+
| ![](./samples/output/ic_launcher-xxxhdpi-dark-transparent.png) | ![](./samples/output/ic_launcher-xxxhdpi-shadow.png) |
2630

27-
| `--font-size 50` |
28-
|------------------------------------------------------------|
31+
| `--font-size=50` |
32+
|:-----------------------------------------------------------|
2933
| ![](./samples/output/ic_launcher_round-xxxhdpi-larger.png) |
34+
35+
### Size
36+
37+
| Adaptive | MDPI | MDPI Round |
38+
|:--------------------------------------------------|:-------------------------------------------|:-------------------------------------------------|
39+
| ![](./samples/output/ic_launcher_foreground.webp) | ![](./samples/output/ic_launcher-mdpi.png) | ![](./samples/output/ic_launcher_round-mdpi.png) |

‎__tests__/utils/calculateCircularBadgePosition.test.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { describe, expect, it } from 'vitest';
2+
3+
import BadgeGravity from '../../src/types/BadgeGravity';
4+
import calculateCircularBadgePosition from '../../src/utils/calculateCircularBadgePosition';
5+
6+
describe('calculateManualBadgePosition', () => {
7+
const container = { height: 100, width: 100 };
8+
const badge = { height: 10, width: 10 };
9+
const circleRadius = 30;
10+
11+
it.each([
12+
[
13+
'north',
14+
{
15+
gravity: BadgeGravity.North,
16+
expected: { point: { x: 45, y: 20 }, rotation: 0 },
17+
},
18+
],
19+
[
20+
'northeast',
21+
{
22+
gravity: BadgeGravity.Northeast,
23+
expected: { point: { x: 60, y: 26 }, rotation: 45 },
24+
},
25+
],
26+
[
27+
'northwest',
28+
{
29+
gravity: BadgeGravity.Northwest,
30+
expected: { point: { x: 26, y: 26 }, rotation: -45 },
31+
},
32+
],
33+
[
34+
'south',
35+
{
36+
gravity: BadgeGravity.South,
37+
expected: { point: { x: 45, y: 70 }, rotation: 0 },
38+
},
39+
],
40+
[
41+
'southeast',
42+
{
43+
gravity: BadgeGravity.Southeast,
44+
expected: { point: { x: 60, y: 60 }, rotation: -45 },
45+
},
46+
],
47+
[
48+
'southwest',
49+
{
50+
gravity: BadgeGravity.Southwest,
51+
expected: { point: { x: 26, y: 60 }, rotation: 45 },
52+
},
53+
],
54+
])('works for %s', (_, { gravity, expected }) => {
55+
const result = calculateCircularBadgePosition(
56+
container,
57+
badge,
58+
circleRadius,
59+
gravity,
60+
);
61+
62+
expect(result.rotation).toEqual(expected.rotation);
63+
expect(
64+
Math.round(result.point.x),
65+
`Expected x to be ${expected.point.x} but was ${Math.round(result.point.x)}`,
66+
).toEqual(expected.point.x);
67+
expect(
68+
Math.round(result.point.y),
69+
`Expected y to be ${expected.point.y} but was ${Math.round(result.point.y)}`,
70+
).toEqual(expected.point.y);
71+
});
72+
});

0 commit comments

Comments
 (0)