pixi-glyphs 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/README.md +258 -0
- package/dist/Glyphs.d.ts +64 -0
- package/dist/defaultOptions.d.ts +3 -0
- package/dist/defaultStyle.d.ts +3 -0
- package/dist/errorMessaging.d.ts +4 -0
- package/dist/functionalUtils.d.ts +17 -0
- package/dist/index.d.ts +3 -0
- package/dist/layout.d.ts +25 -0
- package/dist/pixi-glyphs.js +2034 -0
- package/dist/pixi-glyphs.js.map +1 -0
- package/dist/pixi-glyphs.m.js +2013 -0
- package/dist/pixi-glyphs.m.js.map +1 -0
- package/dist/pixi-glyphs.modern.js +1997 -0
- package/dist/pixi-glyphs.modern.js.map +1 -0
- package/dist/pixi-glyphs.umd.js +2039 -0
- package/dist/pixi-glyphs.umd.js.map +1 -0
- package/dist/pixiUtils.d.ts +8 -0
- package/dist/stringUtil.d.ts +3 -0
- package/dist/style.d.ts +13 -0
- package/dist/tags.d.ts +14 -0
- package/dist/types.d.ts +226 -0
- package/package.json +100 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Mims Wright, JT Smith, Tommy Leunen
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
|
13
|
+
all copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
|
+
THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
# pixi-glyphs
|
|
2
|
+
|
|
3
|
+
[](https://nodei.co/npm/pixi-glyphs/)
|
|
4
|
+
|
|
5
|
+
`Glyphs` is a multi-style text component for [pixi.js](https://github.com/GoodBoyDigital/pixi.js) that supports multiple `TextStyle`s using HTML-like tags. Includes many additional features not found in `PIXI.Text` such as embedded images (sprites), underlines, justified layout, and more.
|
|
6
|
+
|
|
7
|
+
Inspired by the original [pixi-multistyle-text](https://github.com/tleunen/pixi-multistyle-text) and is the spiritual successor to [pixi-tagged-text](https://github.com/mimshwright/pixi-tagged-text).
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```javascript
|
|
12
|
+
// constructor
|
|
13
|
+
new Glyphs(text, styles, options);
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
- `text` - A string containing the text to display. The text can be decorated with tags just like html.
|
|
17
|
+
- `styles` - An object with tag names as keys and `PIXI.TextStyle`+ objects as the values. The key `"default"` is used to set base values for all text.
|
|
18
|
+
- `options` - An object with additional confirguration options.
|
|
19
|
+
|
|
20
|
+
All parameters are optional.
|
|
21
|
+
|
|
22
|
+
### Text & tags
|
|
23
|
+
|
|
24
|
+
#### Text
|
|
25
|
+
|
|
26
|
+
The text can be any UTF-8 string.
|
|
27
|
+
|
|
28
|
+
- Multiline strings are supported (using "\n" or multiline strings wrapped in backticks).
|
|
29
|
+
- Emoji's are supported.
|
|
30
|
+
- RTL languages are NOT officially supported but seem to work in a limited capacity.
|
|
31
|
+
|
|
32
|
+
You can get the text with tags stripped out with the `.untaggedText` implicit getter.
|
|
33
|
+
|
|
34
|
+
#### Tags
|
|
35
|
+
|
|
36
|
+
- Tags are html-like, e.g. `Normal text. <bold>Bold text</bold>`
|
|
37
|
+
- Self-closing tags are ok e.g. `<img />`
|
|
38
|
+
- Nesting tags is supported. Closing tags must match in a FILO order as opening tags. `<b>bold <i>bold italic</i></b>`
|
|
39
|
+
- Attibutes added to tags will override any existing styles on the tag. `<b>bold</b> <b fontStyle="italic">bold italic</b>`
|
|
40
|
+
- Tags that do not have a matching style are NOT treated as tags. `<i><bold>just italic!</bold></i>` would render as _<bold>just italic!</bold>_ if there were a style for `i` but not `bold`.
|
|
41
|
+
- No tag definitions are included by default. e.g. `<b>` won't be bold unless you include a style for `b` tags.
|
|
42
|
+
|
|
43
|
+
#### Styles
|
|
44
|
+
|
|
45
|
+
`styles` is a plain object containing one or more keys. Each key is the name of a tag to style. 'Global' styles that apply everywhere can be set under the `default` key. _Note, some values such as `wordWrapWidth` are ignored if they are included in any styles other than `default`._
|
|
46
|
+
|
|
47
|
+
The style objects are modified versions (supersets) of `PIXI.TextStyle` (referred to as `TextStyleExtended` in the source code). In addition to [the properties allowed in TextStyle](https://pixijs.download/dev/docs/PIXI.TextStyle.html), the following extended properties are added.
|
|
48
|
+
|
|
49
|
+
(By the way, there is an excellent [TextStyle visual editor](https://pixijs.io/pixi-text-style/) that you can use to preview how your style will appear. The style objects generated can be used in this component.)
|
|
50
|
+
|
|
51
|
+
- Everything in [`PIXI.TextStyle`](https://pixijs.download/dev/docs/PIXI.TextStyle.html)
|
|
52
|
+
- `align` - Has all the options from `PIXI.TextStyle` plus additional options for justified alignment:
|
|
53
|
+
- `"justify-left"`, `"justify-right"`, and `"justify-center"` are all types of jutified alignment and they only differ in how they treat the last line of text.
|
|
54
|
+
- `"justify-all"` justifies all lines of text even the last line.
|
|
55
|
+
- `"justify"` is an alias for `"justify-left"`.
|
|
56
|
+
- `valign` - Options are `"top"`, `"middle"`, `"bottom"`, `"baseline"`
|
|
57
|
+
- `textTransform` - Options are `"normal"`, `"capitalize"`, `"uppercase"`, `"lowercase"`
|
|
58
|
+
- `fontSize` - Has the added ability to use percentage-based sizes which are based on the `fontSize` in the parent tag. In the example: `<small fontSize="10">small<big fontSize="300%">big</big></small>`, "small" will be 10px and "big" will be 30px. The default `fontSize` is `26`px.
|
|
59
|
+
- `fontScaleWidth` - Percentage to scale the font e.g. `0.5` = 50%
|
|
60
|
+
- `fontScaleHeight` - Percentage to scale the font e.g. `1.25` = 125%
|
|
61
|
+
- `paragraphSpacing` - Additional spacing between paragraphs that is added when you use an explicit carriage return rather than letting the text wrap at the end of a line. Default is `0`. Can also be negative.
|
|
62
|
+
- `breakLines` - When `breakLines` is `false`, the text in the tag will ignore the `wordWrapWidth` property and never wrap to the next line unless you explicitly include a newline character. It essentially treats the whole tag as a single word. If a nested tag overrides this, only the text inside the nested tag will wrap. Default is `true`.
|
|
63
|
+
- `imgSrc` - ID of image to include in this tag (see `imgMap` under Options section)
|
|
64
|
+
- `imgDisplay` - How should the image be displayed. `"block"` is no scaling, `"icon"` scales the image to match the text-size and appear inline.
|
|
65
|
+
- `iconScale` - If you use `imgDisplay="icon"`, this value will scale the size of the icon relative to the text size. Default is `1.0` (or 100%)
|
|
66
|
+
- `textDecoration` - (i.e. underlines) Adds lines under, over, or through your text. Possible values are either `"normal"` or one or more of `"underline"`, `"overline"`, `"line-through"` (as a space separated string). Can also be set using the more fine-grained properties below. By default, decorations have `color` that matches the `fill` color of the text, `thickness` of `1` and `offset` `0`. **Note: You may need to enabled the `drawWhitespace` option in `options` to avoid seeing gaps in your text decorations between words.**
|
|
67
|
+
- `decorationColor` - overrides the default color (`fill`) for all decorations.
|
|
68
|
+
- `decorationThickness` - overrides the default thickness (`1`) for all decorations.
|
|
69
|
+
- `underlineColor` - Sets the color of the underline. Default is same as `fill`
|
|
70
|
+
- `underlineThickness` - Sets the thickness of the underline. Default is `1`.
|
|
71
|
+
- `underlineOffset` - Positions the underline above or below the default location. Default is `0`.
|
|
72
|
+
- `overlineColor` - Sets the color of the overline. Default is same as `fill`
|
|
73
|
+
- `overlineThickness` - Sets the thickness of the overline. Default is `1`.
|
|
74
|
+
- `overlineOffset` - Positions the overline above or below the default location. Default is `0`.
|
|
75
|
+
- `lineThroughColor` - Sets the color of the line-through. Default is same as `fill`
|
|
76
|
+
- `lineThroughThickness` - Sets the thickness of the line-through. Default is `1`.
|
|
77
|
+
- `lineThroughOffset` - Positions the line-through above or below the default location. Default is `0`.
|
|
78
|
+
- `adjustBaseline` - Adjusts the position of the text above or below the baseline. Default is `0`. Also see the `adjustFontBaseline` property in the options.
|
|
79
|
+
- `color` - An alias for `fill`. It's recommended you just use either `fill` or `color`, but if both are set, `fill` will be used. If tags are nested, `color` on an inner tag can override `fill` in an outer tag.
|
|
80
|
+
|
|
81
|
+
Additionally, the following changes have been made to the default style values:
|
|
82
|
+
|
|
83
|
+
- `wordWrap`: `false` -> `true`
|
|
84
|
+
- `wordWrapWidth`: `100` -> `500`,
|
|
85
|
+
- `fill`, `stroke`, & `dropShadowColor` - `"black"` -> `0x000000`
|
|
86
|
+
|
|
87
|
+
##### 'Default' `default` styles
|
|
88
|
+
|
|
89
|
+
Some styles (`fontSize`, `color`, etc.) are set by default when you call `new Glyphs()` but they can all be overridden. The most important default styles are:
|
|
90
|
+
|
|
91
|
+
```javascript
|
|
92
|
+
{
|
|
93
|
+
align: "left",
|
|
94
|
+
valign: "baseline",
|
|
95
|
+
wordWrap: true,
|
|
96
|
+
wordWrapWidth: 500,
|
|
97
|
+
fill: 0x000000,
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
To get a complete list, you can view the static property `Glyphs.defaultStyles` or look in the source code for `DEFAULT_STYLES`
|
|
102
|
+
|
|
103
|
+
### Options
|
|
104
|
+
|
|
105
|
+
The third parameter in the Glyphs constructor is a set of options.
|
|
106
|
+
|
|
107
|
+
- `debug` - If `true`, generates debug information which is overlaid on the text during `draw()`. default is `false`.
|
|
108
|
+
- `debugConsole` - If `true`, logs debug information to the console during `draw()`. default is `false`.
|
|
109
|
+
- `splitStyle` - Allows you to specify how the text should be split into `PIXI.Text` objects when rendered. This would affect things like animations that operate on each individual piece of text within the component. Possible values are are `"words"` (default) and `"characters"`.
|
|
110
|
+
- `imgMap` - An object that maps string ids like `"myImage"` to Sprite objects like `PIXI.Sprite.from("./myImage.png")`. This id will be used in the `imgSrc` style property to make a tag with that id render the sprite. As of v2.1.4, in addition to Sprites, you can also use any value supported by `Sprite.from()` or `Texture.from()` (including ImageHTMLElement or url strings). When a style contains `imgSrc="myImage"`, the matching sprite is used. By default, each of the keys you provide here will automatically be added as a style in the `tagStyles` (equivalent to `{ myImage: { imgSrc: "myImage"}}`) so you can add a tag `<myImage />`. default is `{}`.
|
|
111
|
+
- `adjustFontBaseline` - For fonts that do not align correctly with the baseline, this adjusts the position of the text relative to the baseline. This should be an object with font names for keys and a value which is a string percentage (of the font's _ascent_, or height above the baseline) or a numerical value in pixels to adjust the offset. E.g. `{"arial": "80%"}`. Since this value changes for each `fontFamily` and for each `fontSize` it's recomended that you use the percentage values. Default is no adjustments.
|
|
112
|
+
- `scaleIcons` - When `true`, images in the imgMap that use `imgDisplay: icon` will scale with the text when `fontScaleWidth` or `fontScaleHeight` are set. Default is `true`.
|
|
113
|
+
- `drawWhitespace` - When `true`, whitespace characters are rendered as their own Text objects. Default is `false`.
|
|
114
|
+
- `wrapEmoji` - When `true`, emoji characters are automatically wrapped in a special tag `<__EMOJI__>` which allows the user to specify styles for emoji only. A base style is automatically defined for `__EMOJI__` that sets the `font-family` to `sans-serif`. This helps to solve some issues with rendering on certain fonts that don't handle emojis well. Default is `true`. (This feature may be removed in future updates)
|
|
115
|
+
- `skipUpdates` - When `true`, `update()` will not be called when text or styles are changed; it must be called explicitly or overridden using the skipUpdate parameter in functions such as `setText()`. default is `false`.
|
|
116
|
+
- `skipDraw` - When `true`, `draw()` will not be called by `update()` it must be called explicitly or overridden using the `skipDraw` parameter, e.g. `myGlyphs.update(false)`. default is `false`.
|
|
117
|
+
- `supressConsole` - When `true`, prevents warnings and other messages from being logged to the console, however, this does **not** affect `debugConsole`.
|
|
118
|
+
- `errorHandler` - A handler function that will receive non-fatal warnings and errors generated by the component. **This will not catch any exceptions**, only internal messaging such as when you try use an unknown tag. The handler should be in the format `(e:ErrorMessage) => void` where `ErrorMessage` is an object with the shape `{ code: string, message: string, type: "warning" | "error" }`.
|
|
119
|
+
- `overdrawDecorations` - When using text decorations (e.g. `underline`) an additional length in pixels equal to `overdrawDecorations` will be added to _both_ sides of the line. Default is `0`.
|
|
120
|
+
|
|
121
|
+
To see a list of the default options, you can view the static property `Glyphs.defaultOptions` or look in the source code for `DEFAULT_OPTIONS`
|
|
122
|
+
|
|
123
|
+
## A note about the component architecture
|
|
124
|
+
|
|
125
|
+
`Glyphs` allows you to control text with multiple styles and embedded images as though it were a single Pixi component. It was inspired by [pixi-multistyle-text](https://github.com/tleunen/pixi-multistyle-text) but is structurally very different.
|
|
126
|
+
|
|
127
|
+
pixi-multistyle-text composes bitmap snapshots of text objects into a single canvas. Conversely, pixi-glyphs creates a separate `PIXI.Text` component for each word, or word segment. Using multiple `Text` components allows developers to have control over individual words or even characters for the purposes of animation or other effects. It also makes embedding sprites into the layout easier. Cosmetically, they're very similar, however, the overhead of creating multiple Text objects is much larger potentially making `Glyphs` a heavier slower component.
|
|
128
|
+
|
|
129
|
+
Another similar component is [@pixi/text-html](https://github.com/pixijs/html-text) which renders a bitmap from an HTML element using the browser's native rendering. While pixi-glyphs should theoretically render more consistently cross-browsers, this could be a good option if pixel perfection and cross-browser support is not a concern.
|
|
130
|
+
|
|
131
|
+
## Child DisplayObjects
|
|
132
|
+
|
|
133
|
+
Glyphs generates multiple display objects when it renders the text with `draw()`. Developers can access these children if desired for example to add additional interactivity or to animated individual elements.
|
|
134
|
+
|
|
135
|
+
**Please note that by default, these are recreated every time text or style properties change (technically, whenever `draw()` is called).** Manipulating the children directly may cause your view to become out of sync with the `text` and `styles` properties.
|
|
136
|
+
|
|
137
|
+
These properties are available:
|
|
138
|
+
|
|
139
|
+
- `textContainer` - The Container layer which holds all the text fields rendered by draw.
|
|
140
|
+
- `spriteContainer` - The Container layer which holds all the sprites rendered by draw if you're using an image map (`imgMap`).
|
|
141
|
+
- `debugContainer` - The SpContainerite layer which holds all debug overlay information (if you're using the `debug: true` setting).
|
|
142
|
+
- `decorationContainer` - The Container layer which holds all text decorations (underlines).
|
|
143
|
+
- `textFields` - An array containing all the text fields generated by draw.
|
|
144
|
+
- `sprites` - If you're using an image map (`imgMap`), this array stores references to all the Sprites generated by draw.
|
|
145
|
+
- `spriteTemplates` - The sprites in `sprites` and `spriteContainer` are actually _clones_ of the originals passed in via the `imgMap` option. To get the originals, access them this way.
|
|
146
|
+
- `decorations` - Array of Graphic objects which render the text decorations.
|
|
147
|
+
|
|
148
|
+
### Life-cycle & optional updates
|
|
149
|
+
|
|
150
|
+
In order to maximize performance of Glyphs, it helps to understand how it renders the input.
|
|
151
|
+
|
|
152
|
+
1. Constructor - creating the component is the first step. You can set `text`, `styles`, and `options` in the constructor.
|
|
153
|
+
2. `update()` - Update generates a list of plain JS object tokens that hold information on what type of text to create and where to position it. The tokens contain all the information you need to draw the text and are saved as the instance member `tokens` but also returned by the `update()` method. Aside from decoupling from the render code, this allows us to write tests to verify every step of the lexing, styling and layout independently without drawing anything at all. By default, this is called every time the text or style definitions are changed (e.g. `setTagStyles()`, `setText()`). This is a fairly expensive process but usually faster than `draw()`.
|
|
154
|
+
3. `draw()` - Draw creates the child objects based on the data generated by `update()`. It clears any existing children (if needed) then recreates and positions them. This is probably the costliest method in the life-cycle. By default, this is called automatically by `update()`.
|
|
155
|
+
4. Of course, you won't see anything on your screen until your component is added to a visible PIXI container that's part of the stage in a pixi app.
|
|
156
|
+
|
|
157
|
+
The methods that normally trigger an update are:
|
|
158
|
+
|
|
159
|
+
- `setText()` & `myText.text =` (implicit setter)
|
|
160
|
+
- `setTagStyles()` & `tagStyles =` (implicit setter)
|
|
161
|
+
- `setStyleForTag()`
|
|
162
|
+
- `setDefaultStyle()` & `defaultStyle =` (implicit setter)
|
|
163
|
+
- `removeStylesForTag()`
|
|
164
|
+
|
|
165
|
+
The methods that normally trigger a draw:
|
|
166
|
+
|
|
167
|
+
- `update()`
|
|
168
|
+
|
|
169
|
+
**Please note that direct changes to styles or other objects will not trigger an automatic update unless you use one of the above methods.** For example:
|
|
170
|
+
|
|
171
|
+
```typescript
|
|
172
|
+
const t = new Glyphs("<big>Big text</big>", { big: { fontSize: 25 } }); // renders "Big text" at 25px
|
|
173
|
+
|
|
174
|
+
t.getStyleForTag("big").fontSize = 100; // The change to the style wasn't detected. It still renders "Big text" at 25px
|
|
175
|
+
|
|
176
|
+
t.update(); // now it renders correctly.
|
|
177
|
+
|
|
178
|
+
t.textFields[0].visible = false; // Makes the word "Big" disappear.
|
|
179
|
+
|
|
180
|
+
t.draw(); // recreates the text fields restoring "Big"
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
#### `skipUpdates` & `skipDraw`
|
|
184
|
+
|
|
185
|
+
If performance is becoming an issue, you can use the `skipUpdates` and `skipDraw` flags in the options object with `new Glyphs()` to disable automatic updates and automatic drawing (more on that below). This gives you control over when the update() or draw() function will be called. However, the component can become out of sync with what you see on your screen so use this with caution.
|
|
186
|
+
|
|
187
|
+
Several other individual functions, such as `setText()` also give you the option to `skipUpdate` on an as needed basis.
|
|
188
|
+
|
|
189
|
+
```typescript
|
|
190
|
+
// Create a new Glyphs but disable automatic updates and draws.
|
|
191
|
+
const t = new Glyphs("", {}, {skipUpdate: true, skipDraw: true});
|
|
192
|
+
const words = ["lorem", "ipsum", ... ];
|
|
193
|
+
// add words until the length of text is > 500 characters.
|
|
194
|
+
while (t.untaggedText.length <= 500) {
|
|
195
|
+
t.text += words[i];
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// Normally, update() will draw() also, but we've disabled that.
|
|
199
|
+
// t.tokens will be up dated to match the new text but it will not appear on the screen.
|
|
200
|
+
t.update();
|
|
201
|
+
t.textContainer.length; // 0 - text fields never got created.
|
|
202
|
+
|
|
203
|
+
// Manually call draw to generate the PIXI.Text fields
|
|
204
|
+
t.draw();
|
|
205
|
+
t.textContainer.length; // This will now contain all the PIXI.Text objects created by draw.
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Destructor
|
|
209
|
+
|
|
210
|
+
Like with other Pixi components, when you're ready to remove your `Glyphs` object from the stage and make it ready for garbage collection, use the [`.destroy()`](https://pixijs.download/release/docs/PIXI.Container.html#destroy) method. Unlike some other Pixi components, `Glyphs` will automatically destroy its child objects, such as fragments of text and debug drawings (with the exception of `imgMap`, see below). Child objects can still be retained by passing options to the destructor, e.g. `.destroy(false)`.
|
|
211
|
+
|
|
212
|
+
### Destroying `imgMap` sources
|
|
213
|
+
|
|
214
|
+
`destroy()` will _not_ by default destroy the textures used for the `imgMap` since these are often shared between multiple `Glyphs` objects.
|
|
215
|
+
|
|
216
|
+
To destroy the source textures in `imgMap` use the method `.destroyImgMap()`. Please note that this must be called _before_ destroying the `Glyphs` instance and will throw an error if you try to call it on an already-destroyed instance.
|
|
217
|
+
|
|
218
|
+
## Contributing
|
|
219
|
+
|
|
220
|
+
If you'd like to contribute, a great place to start is to log an issue. If you are interested in bug-fixing, please take a look at the issues list and notify one of the owners that you're interested in working on it. Please make sure to test the code you write! If you're not sure how, just ask for help!
|
|
221
|
+
|
|
222
|
+
## Build instructions
|
|
223
|
+
|
|
224
|
+
```bash
|
|
225
|
+
yarn install
|
|
226
|
+
yarn build
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
The [node-canvas](https://www.npmjs.com/package/canvas) package, used for testing, has some additional dependencies. For Mac users, there's a homebrew Brewfile that you can install using `brew bundle`. For other users, see [the instructions for the package](https://www.npmjs.com/package/canvas). On Apple Silicon, [this issue](https://github.com/Automattic/node-canvas/issues/2433) was helpful with troubleshooting.
|
|
230
|
+
|
|
231
|
+
Yarn should automatically install peer dependencies (including the very important pixi.js) but in my experience, you may have to run `yarn install` again after adding any additional packages.
|
|
232
|
+
|
|
233
|
+
### VSCode Users
|
|
234
|
+
|
|
235
|
+
If you're using the [vscode-jest extension](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest), you may need [some additional packages](https://github.com/Automattic/node-canvas#compiling) to get the tests to run in your IDE. If you're on a Mac you can use `brew bundle install` to install these packages.
|
|
236
|
+
|
|
237
|
+
## Demo
|
|
238
|
+
|
|
239
|
+
You can view examples using the command:
|
|
240
|
+
|
|
241
|
+
```bash
|
|
242
|
+
yarn demo
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
This will start a simple HTTP server running locally on port 8080. Navigate to [http://localhost:8080/demo](http://localhost:8080/demo)
|
|
246
|
+
|
|
247
|
+
## Dependencies
|
|
248
|
+
|
|
249
|
+
The build process is slightly complex and some of the build dependencies are at the max major version that doesn't break. These depdencies seem to cause issues at certain versions...
|
|
250
|
+
|
|
251
|
+
| package | max version |
|
|
252
|
+
| -------------------------- | ----------- |
|
|
253
|
+
| jest, @types/jest, ts-jest | 26 |
|
|
254
|
+
| emoji-regex | 9 |
|
|
255
|
+
|
|
256
|
+
## License
|
|
257
|
+
|
|
258
|
+
MIT, see [LICENSE.md](http://github.com/rizen/pixi-glyphs/blob/main/LICENSE.md) for details.
|
package/dist/Glyphs.d.ts
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import * as PIXI from "pixi.js";
|
|
2
|
+
import { TaggedTextOptions, TextStyleSet, TextStyleExtended, TagWithAttributes, AttributesList, ImageMap, ImageSourceMap, SegmentToken, TextSegmentToken, ParagraphToken, TextDecorationMetrics, PixiTextTypes } from "./types";
|
|
3
|
+
export default class Glyphs<TextType extends PixiTextTypes = PIXI.Text> extends PIXI.Container {
|
|
4
|
+
static get defaultStyles(): TextStyleSet;
|
|
5
|
+
static get defaultOptions(): TaggedTextOptions;
|
|
6
|
+
private _options;
|
|
7
|
+
get options(): TaggedTextOptions;
|
|
8
|
+
private _needsUpdate;
|
|
9
|
+
get needsUpdate(): boolean;
|
|
10
|
+
private _needsDraw;
|
|
11
|
+
get needsDraw(): boolean;
|
|
12
|
+
private _tokens;
|
|
13
|
+
get tokens(): ParagraphToken;
|
|
14
|
+
get tokensFlat(): SegmentToken[];
|
|
15
|
+
private _text;
|
|
16
|
+
get text(): string;
|
|
17
|
+
set text(text: string);
|
|
18
|
+
setText(text: string, skipUpdate?: boolean): void;
|
|
19
|
+
get untaggedText(): string;
|
|
20
|
+
private _tagStyles;
|
|
21
|
+
get tagStyles(): TextStyleSet;
|
|
22
|
+
set tagStyles(styles: TextStyleSet);
|
|
23
|
+
setTagStyles(styles: TextStyleSet, skipUpdate?: boolean): void;
|
|
24
|
+
getStyleForTag(tag: string, attributes?: AttributesList): TextStyleExtended | undefined;
|
|
25
|
+
getStyleForTags(tags: TagWithAttributes[]): TextStyleExtended;
|
|
26
|
+
setStyleForTag(tag: string, styles: TextStyleExtended, skipUpdate?: boolean): boolean;
|
|
27
|
+
removeStylesForTag(tag: string, skipUpdate?: boolean): boolean;
|
|
28
|
+
get defaultStyle(): TextStyleExtended;
|
|
29
|
+
set defaultStyle(defaultStyles: TextStyleExtended);
|
|
30
|
+
setDefaultStyle(defaultStyles: TextStyleExtended, skipUpdate?: boolean): void;
|
|
31
|
+
private _textFields;
|
|
32
|
+
get textFields(): TextType[];
|
|
33
|
+
private _sprites;
|
|
34
|
+
get sprites(): PIXI.Sprite[];
|
|
35
|
+
private _decorations;
|
|
36
|
+
get decorations(): PIXI.Graphics[];
|
|
37
|
+
private _spriteTemplates;
|
|
38
|
+
get spriteTemplates(): ImageMap;
|
|
39
|
+
private _debugGraphics;
|
|
40
|
+
private _textContainer;
|
|
41
|
+
get textContainer(): PIXI.Container;
|
|
42
|
+
private _decorationContainer;
|
|
43
|
+
get decorationContainer(): PIXI.Container;
|
|
44
|
+
private _spriteContainer;
|
|
45
|
+
get spriteContainer(): PIXI.Container;
|
|
46
|
+
private _debugContainer;
|
|
47
|
+
get debugContainer(): PIXI.Container;
|
|
48
|
+
private logWarning;
|
|
49
|
+
constructor(text?: string, tagStyles?: TextStyleSet, options?: TaggedTextOptions);
|
|
50
|
+
destroyImgMap(): void;
|
|
51
|
+
destroy(options?: boolean | PIXI.DestroyOptions): void;
|
|
52
|
+
protected resetChildren(): void;
|
|
53
|
+
protected createSpriteTemplatesFromSourceMap(imgMap: ImageSourceMap): void;
|
|
54
|
+
private onImageTextureUpdate;
|
|
55
|
+
private updateIfShould;
|
|
56
|
+
update(skipDraw?: boolean): ParagraphToken;
|
|
57
|
+
private drawIfShould;
|
|
58
|
+
draw(): void;
|
|
59
|
+
protected createDrawingForTextDecoration(textDecoration: TextDecorationMetrics): PIXI.Graphics;
|
|
60
|
+
protected createTextField(text: string, style: TextStyleExtended): TextType;
|
|
61
|
+
protected createTextFieldForToken(token: TextSegmentToken): TextType;
|
|
62
|
+
toDebugString(): string;
|
|
63
|
+
drawDebug(): void;
|
|
64
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as PIXI from "pixi.js";
|
|
2
|
+
import { ErrorHandler } from "./types";
|
|
3
|
+
export declare const logWarning: (handler?: ErrorHandler, supressConsole?: boolean, target?: PIXI.Container) => (code: string, message: string) => void;
|
|
4
|
+
export declare const logError: (handler?: ErrorHandler, supressConsole?: boolean, target?: PIXI.Container) => (code: string, message: string) => void;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Nested } from "./types";
|
|
2
|
+
type Predicate<T> = (t: T) => boolean;
|
|
3
|
+
export declare const combineRecords: <A extends Record<string, unknown>, B extends Record<string, unknown> = A>(a: A, b: B) => A & B;
|
|
4
|
+
export declare const first: <T>(a: T[]) => T;
|
|
5
|
+
export declare const last: <T>(a: T[]) => T;
|
|
6
|
+
export declare const isDefined: Predicate<unknown | undefined>;
|
|
7
|
+
export declare const complement: <T>(predicate: Predicate<T>) => (input: T) => boolean;
|
|
8
|
+
export declare const pluck: <T, U>(key: keyof U) => (objects: U[]) => T[];
|
|
9
|
+
export declare const assoc: <T extends Record<string, U>, U>(key: keyof T) => (value: U) => (object: T) => T;
|
|
10
|
+
export declare const mapProp: <T, U>(k: keyof U) => (f: (t: T) => T) => (o: U) => U;
|
|
11
|
+
export declare const flatReduce: <T, U>(f: (acc: U, t: T) => U, acc: U) => (nested: Nested<T>) => U;
|
|
12
|
+
type FlatReduceRetrun<T, U> = (nested: Nested<T>) => U;
|
|
13
|
+
export declare const flatEvery: <T>(p: Predicate<T>) => FlatReduceRetrun<T, boolean>;
|
|
14
|
+
export declare const nestedMap: <T, U>(f: (t: T) => U) => (nested: Nested<T>) => Nested<U>;
|
|
15
|
+
export declare const countIf: <T>(p: Predicate<T>) => (a: T[]) => number;
|
|
16
|
+
export type Unary<Param, Return> = (p: Param) => Return;
|
|
17
|
+
export {};
|
package/dist/index.d.ts
ADDED
package/dist/layout.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Unary } from "./functionalUtils";
|
|
2
|
+
import { Align, Bounds, Point, StyledTokens, SegmentToken, SplitStyle, TextStyleExtended, ParagraphToken, LineToken, WordToken, Nested, VAlign, FontMap } from "./types";
|
|
3
|
+
export declare const updateOffsetForNewLine: (offset: Point, largestLineHeight: number, lineSpacing: number) => Point;
|
|
4
|
+
export declare const translatePoint: <P extends Point>(offset: Point) => (point: P) => P;
|
|
5
|
+
export declare const translateLine: (offset: Point) => (line: Bounds[]) => Bounds[];
|
|
6
|
+
export declare const translateWordPosition: (offset: Point) => (word: WordToken) => WordToken;
|
|
7
|
+
export declare const translateTokenLine: (offset: Point) => (line: LineToken) => LineToken;
|
|
8
|
+
export declare const lineWidth: (wordsInLine: Bounds[]) => number;
|
|
9
|
+
export declare const center: (x: number, context: number) => number;
|
|
10
|
+
export declare const concatBounds: (originalBounds?: Bounds, bounds?: Bounds) => Bounds;
|
|
11
|
+
export declare const getBoundsNested: Unary<Nested<SegmentToken>, Bounds>;
|
|
12
|
+
type AlignFunction = (line: Bounds[]) => Bounds[];
|
|
13
|
+
type AlignFunctionMaxWidth = (maxWidth: number) => AlignFunction;
|
|
14
|
+
export declare const alignLeft: AlignFunction;
|
|
15
|
+
export declare const alignRight: AlignFunctionMaxWidth;
|
|
16
|
+
export declare const alignCenter: AlignFunctionMaxWidth;
|
|
17
|
+
export declare const alignJustify: AlignFunctionMaxWidth;
|
|
18
|
+
export declare const alignLines: (align: Align, maxWidth: number, lines: ParagraphToken) => ParagraphToken;
|
|
19
|
+
export declare const verticalAlignInLines: (lines: ParagraphToken, lineSpacing: number, overrideValign?: VAlign) => ParagraphToken;
|
|
20
|
+
export declare const collapseWhitespacesOnEndOfLines: (lines: ParagraphToken) => ParagraphToken;
|
|
21
|
+
export declare const splitAroundWhitespace: (s: string) => string[];
|
|
22
|
+
export declare const splitText: (s: string, splitStyle: SplitStyle) => string[];
|
|
23
|
+
export declare const calculateTokens: (styledTokens: StyledTokens, splitStyle?: SplitStyle, scaleIcons?: boolean, adjustFontBaseline?: FontMap) => ParagraphToken;
|
|
24
|
+
export declare const getBaselineAdjustment: (style: TextStyleExtended, fontBaselineMap: FontMap | undefined, ascent: number) => number;
|
|
25
|
+
export {};
|