fix(bannerbox): Removed hardcoded values in call to banner
This commit is contained in:
parent
b77490204d
commit
0c55a868eb
2 changed files with 21 additions and 7 deletions
|
@ -16,11 +16,11 @@ macro('bannerbox', {
|
||||||
String text='',
|
String text='',
|
||||||
Number margin=15,
|
Number margin=15,
|
||||||
Number dy=4,
|
Number dy=4,
|
||||||
Number repeat=10,
|
Number repeat=99,
|
||||||
Number spaces=12,
|
Number spaces=12,
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
## Example
|
## Example
|
||||||
|
|
||||||
<Example caption="Example of the bannerbox macro">
|
<Example caption="Example of the bannerbox macro">
|
||||||
|
@ -47,11 +47,25 @@ macro('bannerbox', {
|
||||||
| `text` | `` | `string` | The text to place repeat along the box path |
|
| `text` | `` | `string` | The text to place repeat along the box path |
|
||||||
| `margin` | `15` | `number` | Controls the margin the box will apply |
|
| `margin` | `15` | `number` | Controls the margin the box will apply |
|
||||||
| `dy` | `4` | `number` | Controls how far the text will be located above the path |
|
| `dy` | `4` | `number` | Controls how far the text will be located above the path |
|
||||||
| `repeat` | `10` | `number` | The number of text repetitions. See [banner macro][banner] |
|
| `repeat` | `99` | `number` | The number of text repetitions. See [banner macro][banner] |
|
||||||
| `spaces` | `12` | `number` | The number of spaces to place between repetitions. See [banner macro][banner] |
|
| `spaces` | `12` | `number` | The number of spaces to place between repetitions. See [banner macro][banner] |
|
||||||
|
|
||||||
## Notes
|
## Notes
|
||||||
|
|
||||||
Under the hood, this macro will [the banner macro][banner] to place the text on the box path.
|
Under the hood, this macro will [the banner macro][banner] to place the text on the box path.
|
||||||
|
|
||||||
|
The banner box will be larger than the box formed by the coordinates
|
||||||
|
provided to the macro,
|
||||||
|
The sides will be offset by approximately 1.4 times the `margin`.
|
||||||
|
|
||||||
|
If the total length of the text (based on `text`, `repeat`, and `spaces`)
|
||||||
|
is less than the length of the box path, the text will simply end,
|
||||||
|
leaving some of the box without text.
|
||||||
|
If the total length of text is greater than the length of the box path,
|
||||||
|
the remaining text will be truncated.
|
||||||
|
For this reason, using a `repeat` value greater than what is normally
|
||||||
|
needed might be a best practice to ensure that text completely surrounds
|
||||||
|
the bannerbox, even if the pattern is scaled down, allowing more text to
|
||||||
|
fit around the box.
|
||||||
|
|
||||||
[banner]: /reference/macros/banner
|
[banner]: /reference/macros/banner
|
||||||
|
|
|
@ -11,11 +11,10 @@ export const bannerboxMacros = {
|
||||||
boxClassName: 'stroke-xs stroke-note lashed',
|
boxClassName: 'stroke-xs stroke-note lashed',
|
||||||
dy: 4,
|
dy: 4,
|
||||||
spaces: 12,
|
spaces: 12,
|
||||||
repeat: 10,
|
repeat: 99,
|
||||||
...so,
|
...so,
|
||||||
}
|
}
|
||||||
const offset = Math.sqrt(2 * Math.pow(so.margin, 2))
|
const offset = Math.sqrt(2 * Math.pow(so.margin, 2))
|
||||||
|
|
||||||
const id = getId()
|
const id = getId()
|
||||||
paths[id] = new Path()
|
paths[id] = new Path()
|
||||||
.move(so.topLeft.shift(135, offset))
|
.move(so.topLeft.shift(135, offset))
|
||||||
|
@ -30,8 +29,9 @@ export const bannerboxMacros = {
|
||||||
path: paths[id],
|
path: paths[id],
|
||||||
text: so.text,
|
text: so.text,
|
||||||
className: so.textClassName,
|
className: so.textClassName,
|
||||||
repeat: 99,
|
repeat: so.repeat,
|
||||||
dy: 4,
|
spaces: so.spaces,
|
||||||
|
dy: so.dy,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue