modern-text 0.3.7 → 0.3.8
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/dist/index.cjs +64 -67
- package/dist/index.d.cts +112 -119
- package/dist/index.d.mts +112 -119
- package/dist/index.d.ts +112 -119
- package/dist/index.js +4 -4
- package/dist/index.mjs +66 -68
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -176,11 +176,19 @@ class Character {
|
|
|
176
176
|
}
|
|
177
177
|
_getFontSfnt(fonts) {
|
|
178
178
|
const fontFamily = this.computedStyle.fontFamily;
|
|
179
|
-
|
|
180
|
-
if (
|
|
181
|
-
|
|
179
|
+
let sfnt;
|
|
180
|
+
if (fontFamily) {
|
|
181
|
+
if (!sfnt) {
|
|
182
|
+
const font = fonts?.[fontFamily];
|
|
183
|
+
if (font instanceof modernFont.Ttf || font instanceof modernFont.Woff) {
|
|
184
|
+
sfnt = font.sfnt;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
if (!sfnt) {
|
|
188
|
+
sfnt = modernFont.fonts.get(fontFamily)?.getSfnt();
|
|
189
|
+
}
|
|
182
190
|
}
|
|
183
|
-
return
|
|
191
|
+
return sfnt ?? modernFont.fonts.fallbackFont?.getSfnt();
|
|
184
192
|
}
|
|
185
193
|
updateGlyph(sfnt = this._getFontSfnt()) {
|
|
186
194
|
if (!sfnt) {
|
|
@@ -448,6 +456,10 @@ class Paragraph {
|
|
|
448
456
|
}
|
|
449
457
|
}
|
|
450
458
|
|
|
459
|
+
function definePlugin(options) {
|
|
460
|
+
return options;
|
|
461
|
+
}
|
|
462
|
+
|
|
451
463
|
class Measurer {
|
|
452
464
|
constructor(_text) {
|
|
453
465
|
this._text = _text;
|
|
@@ -643,65 +655,6 @@ class Measurer {
|
|
|
643
655
|
}
|
|
644
656
|
}
|
|
645
657
|
|
|
646
|
-
class Parser {
|
|
647
|
-
constructor(_text) {
|
|
648
|
-
this._text = _text;
|
|
649
|
-
}
|
|
650
|
-
parse() {
|
|
651
|
-
let { content, computedStyle: style } = this._text;
|
|
652
|
-
const paragraphs = [];
|
|
653
|
-
if (typeof content === "string") {
|
|
654
|
-
const paragraph = new Paragraph({}, style);
|
|
655
|
-
paragraph.addFragment(content);
|
|
656
|
-
paragraphs.push(paragraph);
|
|
657
|
-
} else {
|
|
658
|
-
content = Array.isArray(content) ? content : [content];
|
|
659
|
-
for (const p of content) {
|
|
660
|
-
if (typeof p === "string") {
|
|
661
|
-
const paragraph = new Paragraph({}, style);
|
|
662
|
-
paragraph.addFragment(p);
|
|
663
|
-
paragraphs.push(paragraph);
|
|
664
|
-
} else if (Array.isArray(p)) {
|
|
665
|
-
const paragraph = new Paragraph({}, style);
|
|
666
|
-
p.forEach((f) => {
|
|
667
|
-
if (typeof f === "string") {
|
|
668
|
-
paragraph.addFragment(f);
|
|
669
|
-
} else {
|
|
670
|
-
const { content: content2, ...fStyle } = f;
|
|
671
|
-
if (content2 !== void 0) {
|
|
672
|
-
paragraph.addFragment(content2, fStyle);
|
|
673
|
-
}
|
|
674
|
-
}
|
|
675
|
-
});
|
|
676
|
-
paragraphs.push(paragraph);
|
|
677
|
-
} else if ("fragments" in p) {
|
|
678
|
-
const { fragments, ...pStyle } = p;
|
|
679
|
-
const paragraph = new Paragraph(pStyle, style);
|
|
680
|
-
fragments.forEach((f) => {
|
|
681
|
-
const { content: content2, ...fStyle } = f;
|
|
682
|
-
if (content2 !== void 0) {
|
|
683
|
-
paragraph.addFragment(content2, fStyle);
|
|
684
|
-
}
|
|
685
|
-
});
|
|
686
|
-
paragraphs.push(paragraph);
|
|
687
|
-
} else if ("content" in p) {
|
|
688
|
-
const { content: pData, ...pStyle } = p;
|
|
689
|
-
if (pData !== void 0) {
|
|
690
|
-
const paragraph = new Paragraph(pStyle, style);
|
|
691
|
-
paragraph.addFragment(pData);
|
|
692
|
-
paragraphs.push(paragraph);
|
|
693
|
-
}
|
|
694
|
-
}
|
|
695
|
-
}
|
|
696
|
-
}
|
|
697
|
-
return paragraphs;
|
|
698
|
-
}
|
|
699
|
-
}
|
|
700
|
-
|
|
701
|
-
function definePlugin(options) {
|
|
702
|
-
return options;
|
|
703
|
-
}
|
|
704
|
-
|
|
705
658
|
const defaultReferImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4=";
|
|
706
659
|
function parseCharsPerRepeat(size, fontSize, total) {
|
|
707
660
|
if (size === "cover") {
|
|
@@ -1056,7 +1009,7 @@ const defaultTextStyles = {
|
|
|
1056
1009
|
// font
|
|
1057
1010
|
fontSize: 14,
|
|
1058
1011
|
fontWeight: "normal",
|
|
1059
|
-
fontFamily: "
|
|
1012
|
+
fontFamily: "",
|
|
1060
1013
|
fontStyle: "normal",
|
|
1061
1014
|
fontKerning: "normal",
|
|
1062
1015
|
// text
|
|
@@ -1107,7 +1060,6 @@ class Text {
|
|
|
1107
1060
|
__publicField(this, "glyphBox", new modernPath2d.BoundingBox());
|
|
1108
1061
|
__publicField(this, "pathBox", new modernPath2d.BoundingBox());
|
|
1109
1062
|
__publicField(this, "boundingBox", new modernPath2d.BoundingBox());
|
|
1110
|
-
__publicField(this, "parser", new Parser(this));
|
|
1111
1063
|
__publicField(this, "measurer", new Measurer(this));
|
|
1112
1064
|
__publicField(this, "plugins", /* @__PURE__ */ new Map());
|
|
1113
1065
|
__publicField(this, "fonts");
|
|
@@ -1133,7 +1085,53 @@ class Text {
|
|
|
1133
1085
|
return this;
|
|
1134
1086
|
}
|
|
1135
1087
|
updateParagraphs() {
|
|
1136
|
-
|
|
1088
|
+
let { content, computedStyle: style } = this;
|
|
1089
|
+
const paragraphs = [];
|
|
1090
|
+
if (typeof content === "string") {
|
|
1091
|
+
const paragraph = new Paragraph({}, style);
|
|
1092
|
+
paragraph.addFragment(content);
|
|
1093
|
+
paragraphs.push(paragraph);
|
|
1094
|
+
} else {
|
|
1095
|
+
content = Array.isArray(content) ? content : [content];
|
|
1096
|
+
for (const p of content) {
|
|
1097
|
+
if (typeof p === "string") {
|
|
1098
|
+
const paragraph = new Paragraph({}, style);
|
|
1099
|
+
paragraph.addFragment(p);
|
|
1100
|
+
paragraphs.push(paragraph);
|
|
1101
|
+
} else if (Array.isArray(p)) {
|
|
1102
|
+
const paragraph = new Paragraph({}, style);
|
|
1103
|
+
p.forEach((f) => {
|
|
1104
|
+
if (typeof f === "string") {
|
|
1105
|
+
paragraph.addFragment(f);
|
|
1106
|
+
} else {
|
|
1107
|
+
const { content: content2, ...fStyle } = f;
|
|
1108
|
+
if (content2 !== void 0) {
|
|
1109
|
+
paragraph.addFragment(content2, fStyle);
|
|
1110
|
+
}
|
|
1111
|
+
}
|
|
1112
|
+
});
|
|
1113
|
+
paragraphs.push(paragraph);
|
|
1114
|
+
} else if ("fragments" in p) {
|
|
1115
|
+
const { fragments, ...pStyle } = p;
|
|
1116
|
+
const paragraph = new Paragraph(pStyle, style);
|
|
1117
|
+
fragments.forEach((f) => {
|
|
1118
|
+
const { content: content2, ...fStyle } = f;
|
|
1119
|
+
if (content2 !== void 0) {
|
|
1120
|
+
paragraph.addFragment(content2, fStyle);
|
|
1121
|
+
}
|
|
1122
|
+
});
|
|
1123
|
+
paragraphs.push(paragraph);
|
|
1124
|
+
} else if ("content" in p) {
|
|
1125
|
+
const { content: pData, ...pStyle } = p;
|
|
1126
|
+
if (pData !== void 0) {
|
|
1127
|
+
const paragraph = new Paragraph(pStyle, style);
|
|
1128
|
+
paragraph.addFragment(pData);
|
|
1129
|
+
paragraphs.push(paragraph);
|
|
1130
|
+
}
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1134
|
+
this.paragraphs = paragraphs;
|
|
1137
1135
|
return this;
|
|
1138
1136
|
}
|
|
1139
1137
|
measure(dom = this.measureDom) {
|
|
@@ -1261,7 +1259,6 @@ exports.Character = Character;
|
|
|
1261
1259
|
exports.Fragment = Fragment;
|
|
1262
1260
|
exports.Measurer = Measurer;
|
|
1263
1261
|
exports.Paragraph = Paragraph;
|
|
1264
|
-
exports.Parser = Parser;
|
|
1265
1262
|
exports.Text = Text;
|
|
1266
1263
|
exports.defaultTextStyles = defaultTextStyles;
|
|
1267
1264
|
exports.definePlugin = definePlugin;
|
package/dist/index.d.cts
CHANGED
|
@@ -3,100 +3,6 @@ export * from 'modern-path2d';
|
|
|
3
3
|
import { Font, Sfnt, GlyphPathCommand } from 'modern-font';
|
|
4
4
|
export * from 'modern-font';
|
|
5
5
|
|
|
6
|
-
type Sizeable = `${number}%` | `${number}rem` | number;
|
|
7
|
-
type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
|
|
8
|
-
type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
|
|
9
|
-
type FontWeight = 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
10
|
-
type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
|
|
11
|
-
type FontKerning = 'none' | 'auto' | 'normal';
|
|
12
|
-
type TextWrap = 'wrap' | 'nowrap';
|
|
13
|
-
type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
|
|
14
|
-
type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
|
|
15
|
-
type TextTransform = 'none' | 'uppercase' | 'lowercase';
|
|
16
|
-
type TextDecoration = 'none' | 'underline' | 'line-through';
|
|
17
|
-
type ListStyleType = 'none' | 'disc';
|
|
18
|
-
type ListStyleImage = 'none' | string;
|
|
19
|
-
type ListStyleSize = 'cover' | Sizeable;
|
|
20
|
-
type ListStylePosition = 'inside' | 'outside';
|
|
21
|
-
type HighlightImage = 'none' | string;
|
|
22
|
-
type HighlightSize = 'cover' | Sizeable;
|
|
23
|
-
type HighlightStrokeWidth = Sizeable;
|
|
24
|
-
type HighlightOverflow = 'none' | 'visible' | 'hidden';
|
|
25
|
-
interface TextLineStyle {
|
|
26
|
-
writingMode: WritingMode;
|
|
27
|
-
textWrap: TextWrap;
|
|
28
|
-
textAlign: TextAlign;
|
|
29
|
-
textIndent: number;
|
|
30
|
-
lineHeight: number;
|
|
31
|
-
listStyleType: ListStyleType;
|
|
32
|
-
listStyleImage: ListStyleImage;
|
|
33
|
-
listStyleSize: ListStyleSize;
|
|
34
|
-
listStylePosition: ListStylePosition;
|
|
35
|
-
}
|
|
36
|
-
interface TextInlineStyle {
|
|
37
|
-
verticalAlign: VerticalAlign;
|
|
38
|
-
letterSpacing: number;
|
|
39
|
-
fontSize: number;
|
|
40
|
-
fontWeight: FontWeight;
|
|
41
|
-
fontFamily: string;
|
|
42
|
-
fontStyle: FontStyle;
|
|
43
|
-
fontKerning?: FontKerning;
|
|
44
|
-
textTransform: TextTransform;
|
|
45
|
-
textOrientation: TextOrientation;
|
|
46
|
-
textDecoration: TextDecoration;
|
|
47
|
-
highlightReferImage: HighlightImage;
|
|
48
|
-
highlightImage: HighlightImage;
|
|
49
|
-
highlightSize: HighlightSize;
|
|
50
|
-
highlightStrokeWidth: HighlightStrokeWidth;
|
|
51
|
-
highlightOverflow: HighlightOverflow;
|
|
52
|
-
}
|
|
53
|
-
interface TextDrawStyle {
|
|
54
|
-
color: string | CanvasGradient | CanvasPattern;
|
|
55
|
-
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
56
|
-
textStrokeWidth: number;
|
|
57
|
-
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
58
|
-
shadowColor: string;
|
|
59
|
-
shadowOffsetX: number;
|
|
60
|
-
shadowOffsetY: number;
|
|
61
|
-
shadowBlur: number;
|
|
62
|
-
translateX: number;
|
|
63
|
-
translateY: number;
|
|
64
|
-
skewX: number;
|
|
65
|
-
skewY: number;
|
|
66
|
-
}
|
|
67
|
-
interface TextStyle extends TextLineStyle, TextInlineStyle, TextDrawStyle {
|
|
68
|
-
}
|
|
69
|
-
interface FragmentContent extends Partial<TextStyle> {
|
|
70
|
-
content: string;
|
|
71
|
-
}
|
|
72
|
-
interface ParagraphContent extends Partial<TextStyle> {
|
|
73
|
-
fragments: FragmentContent[];
|
|
74
|
-
}
|
|
75
|
-
type TextContent = string | FragmentContent | ParagraphContent | (string | FragmentContent | ParagraphContent | (string | FragmentContent)[])[];
|
|
76
|
-
|
|
77
|
-
declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;
|
|
78
|
-
declare function uploadColor(style: Partial<TextStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
|
|
79
|
-
interface LinearGradient {
|
|
80
|
-
x0: number;
|
|
81
|
-
y0: number;
|
|
82
|
-
x1: number;
|
|
83
|
-
y1: number;
|
|
84
|
-
stops: {
|
|
85
|
-
offset: number;
|
|
86
|
-
color: string;
|
|
87
|
-
}[];
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
interface DrawShapePathsOptions extends Partial<TextStyle> {
|
|
91
|
-
ctx: CanvasRenderingContext2D;
|
|
92
|
-
path: Path2D;
|
|
93
|
-
fontSize: number;
|
|
94
|
-
clipRect?: BoundingBox;
|
|
95
|
-
}
|
|
96
|
-
declare function drawPath(options: DrawShapePathsOptions): void;
|
|
97
|
-
|
|
98
|
-
declare function setupView(ctx: CanvasRenderingContext2D, pixelRatio: number, boundingBox: BoundingBox): void;
|
|
99
|
-
|
|
100
6
|
declare class Fragment {
|
|
101
7
|
content: string;
|
|
102
8
|
style: Partial<TextStyle>;
|
|
@@ -154,18 +60,6 @@ declare class Paragraph {
|
|
|
154
60
|
addFragment(content: string, style?: Partial<TextStyle>): Fragment;
|
|
155
61
|
}
|
|
156
62
|
|
|
157
|
-
type PromiseLike<T> = T | Promise<T>;
|
|
158
|
-
interface Plugin {
|
|
159
|
-
name: string;
|
|
160
|
-
paths?: Path2D[];
|
|
161
|
-
getBoundingBox?: (text: Text) => BoundingBox | undefined;
|
|
162
|
-
updateOrder?: number;
|
|
163
|
-
update?: (text: Text) => PromiseLike<void>;
|
|
164
|
-
renderOrder?: number;
|
|
165
|
-
render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
|
|
166
|
-
}
|
|
167
|
-
declare function definePlugin(options: Plugin): Plugin;
|
|
168
|
-
|
|
169
63
|
interface MeasuredParagraph {
|
|
170
64
|
paragraphIndex: number;
|
|
171
65
|
left: number;
|
|
@@ -225,12 +119,6 @@ declare class Measurer {
|
|
|
225
119
|
measure(dom?: HTMLElement): MeasureDomResult;
|
|
226
120
|
}
|
|
227
121
|
|
|
228
|
-
declare class Parser {
|
|
229
|
-
protected _text: Text;
|
|
230
|
-
constructor(_text: Text);
|
|
231
|
-
parse(): Paragraph[];
|
|
232
|
-
}
|
|
233
|
-
|
|
234
122
|
interface TextRenderOptions {
|
|
235
123
|
view: HTMLCanvasElement;
|
|
236
124
|
pixelRatio?: number;
|
|
@@ -264,15 +152,14 @@ declare class Text {
|
|
|
264
152
|
glyphBox: BoundingBox;
|
|
265
153
|
pathBox: BoundingBox;
|
|
266
154
|
boundingBox: BoundingBox;
|
|
267
|
-
parser: Parser;
|
|
268
155
|
measurer: Measurer;
|
|
269
|
-
plugins: Map<string,
|
|
156
|
+
plugins: Map<string, TextPlugin>;
|
|
270
157
|
fonts?: Record<string, Font>;
|
|
271
158
|
get fontSize(): number;
|
|
272
159
|
get isVertical(): boolean;
|
|
273
160
|
get characters(): Character[];
|
|
274
161
|
constructor(options?: TextOptions);
|
|
275
|
-
use(plugin:
|
|
162
|
+
use(plugin: TextPlugin): this;
|
|
276
163
|
updateParagraphs(): this;
|
|
277
164
|
measure(dom?: HTMLElement | undefined): MeasureResult;
|
|
278
165
|
getGlyphBox(): BoundingBox;
|
|
@@ -283,15 +170,121 @@ declare class Text {
|
|
|
283
170
|
render(options: TextRenderOptions): this;
|
|
284
171
|
}
|
|
285
172
|
|
|
173
|
+
type Sizeable = `${number}%` | `${number}rem` | number;
|
|
174
|
+
type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
|
|
175
|
+
type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
|
|
176
|
+
type FontWeight = 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
177
|
+
type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
|
|
178
|
+
type FontKerning = 'none' | 'auto' | 'normal';
|
|
179
|
+
type TextWrap = 'wrap' | 'nowrap';
|
|
180
|
+
type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
|
|
181
|
+
type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
|
|
182
|
+
type TextTransform = 'none' | 'uppercase' | 'lowercase';
|
|
183
|
+
type TextDecoration = 'none' | 'underline' | 'line-through';
|
|
184
|
+
type ListStyleType = 'none' | 'disc';
|
|
185
|
+
type ListStyleImage = 'none' | string;
|
|
186
|
+
type ListStyleSize = 'cover' | Sizeable;
|
|
187
|
+
type ListStylePosition = 'inside' | 'outside';
|
|
188
|
+
type HighlightImage = 'none' | string;
|
|
189
|
+
type HighlightSize = 'cover' | Sizeable;
|
|
190
|
+
type HighlightStrokeWidth = Sizeable;
|
|
191
|
+
type HighlightOverflow = 'none' | 'visible' | 'hidden';
|
|
192
|
+
interface TextLineStyle {
|
|
193
|
+
writingMode: WritingMode;
|
|
194
|
+
textWrap: TextWrap;
|
|
195
|
+
textAlign: TextAlign;
|
|
196
|
+
textIndent: number;
|
|
197
|
+
lineHeight: number;
|
|
198
|
+
listStyleType: ListStyleType;
|
|
199
|
+
listStyleImage: ListStyleImage;
|
|
200
|
+
listStyleSize: ListStyleSize;
|
|
201
|
+
listStylePosition: ListStylePosition;
|
|
202
|
+
}
|
|
203
|
+
interface TextInlineStyle {
|
|
204
|
+
verticalAlign: VerticalAlign;
|
|
205
|
+
letterSpacing: number;
|
|
206
|
+
fontSize: number;
|
|
207
|
+
fontWeight: FontWeight;
|
|
208
|
+
fontFamily: string;
|
|
209
|
+
fontStyle: FontStyle;
|
|
210
|
+
fontKerning?: FontKerning;
|
|
211
|
+
textTransform: TextTransform;
|
|
212
|
+
textOrientation: TextOrientation;
|
|
213
|
+
textDecoration: TextDecoration;
|
|
214
|
+
highlightReferImage: HighlightImage;
|
|
215
|
+
highlightImage: HighlightImage;
|
|
216
|
+
highlightSize: HighlightSize;
|
|
217
|
+
highlightStrokeWidth: HighlightStrokeWidth;
|
|
218
|
+
highlightOverflow: HighlightOverflow;
|
|
219
|
+
}
|
|
220
|
+
interface TextDrawStyle {
|
|
221
|
+
color: string | CanvasGradient | CanvasPattern;
|
|
222
|
+
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
223
|
+
textStrokeWidth: number;
|
|
224
|
+
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
225
|
+
shadowColor: string;
|
|
226
|
+
shadowOffsetX: number;
|
|
227
|
+
shadowOffsetY: number;
|
|
228
|
+
shadowBlur: number;
|
|
229
|
+
translateX: number;
|
|
230
|
+
translateY: number;
|
|
231
|
+
skewX: number;
|
|
232
|
+
skewY: number;
|
|
233
|
+
}
|
|
234
|
+
interface TextStyle extends TextLineStyle, TextInlineStyle, TextDrawStyle {
|
|
235
|
+
}
|
|
236
|
+
interface FragmentContent extends Partial<TextStyle> {
|
|
237
|
+
content: string;
|
|
238
|
+
}
|
|
239
|
+
interface ParagraphContent extends Partial<TextStyle> {
|
|
240
|
+
fragments: FragmentContent[];
|
|
241
|
+
}
|
|
242
|
+
type TextContent = string | FragmentContent | ParagraphContent | (string | FragmentContent | ParagraphContent | (string | FragmentContent)[])[];
|
|
243
|
+
type PromiseLike<T> = T | Promise<T>;
|
|
244
|
+
interface TextPlugin {
|
|
245
|
+
name: string;
|
|
246
|
+
paths?: Path2D[];
|
|
247
|
+
getBoundingBox?: (text: Text) => BoundingBox | undefined;
|
|
248
|
+
updateOrder?: number;
|
|
249
|
+
update?: (text: Text) => PromiseLike<void>;
|
|
250
|
+
renderOrder?: number;
|
|
251
|
+
render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;
|
|
255
|
+
declare function uploadColor(style: Partial<TextStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
|
|
256
|
+
interface LinearGradient {
|
|
257
|
+
x0: number;
|
|
258
|
+
y0: number;
|
|
259
|
+
x1: number;
|
|
260
|
+
y1: number;
|
|
261
|
+
stops: {
|
|
262
|
+
offset: number;
|
|
263
|
+
color: string;
|
|
264
|
+
}[];
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
interface DrawShapePathsOptions extends Partial<TextStyle> {
|
|
268
|
+
ctx: CanvasRenderingContext2D;
|
|
269
|
+
path: Path2D;
|
|
270
|
+
fontSize: number;
|
|
271
|
+
clipRect?: BoundingBox;
|
|
272
|
+
}
|
|
273
|
+
declare function drawPath(options: DrawShapePathsOptions): void;
|
|
274
|
+
|
|
275
|
+
declare function setupView(ctx: CanvasRenderingContext2D, pixelRatio: number, boundingBox: BoundingBox): void;
|
|
276
|
+
|
|
286
277
|
declare function uploadColors(ctx: CanvasRenderingContext2D, text: Text): void;
|
|
287
278
|
|
|
279
|
+
declare function definePlugin(options: TextPlugin): TextPlugin;
|
|
280
|
+
|
|
288
281
|
declare function measureText(options: TextOptions): MeasureResult;
|
|
289
282
|
|
|
290
|
-
declare function highlight():
|
|
283
|
+
declare function highlight(): TextPlugin;
|
|
291
284
|
|
|
292
|
-
declare function listStyle():
|
|
285
|
+
declare function listStyle(): TextPlugin;
|
|
293
286
|
|
|
294
|
-
declare function render():
|
|
287
|
+
declare function render(): TextPlugin;
|
|
295
288
|
declare function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3;
|
|
296
289
|
|
|
297
290
|
declare function renderText(options: TextOptions & TextRenderOptions): Text;
|
|
@@ -299,4 +292,4 @@ declare function renderText(options: TextOptions & TextRenderOptions): Text;
|
|
|
299
292
|
declare function isNone(val: string | undefined): boolean;
|
|
300
293
|
declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
|
|
301
294
|
|
|
302
|
-
export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent,
|
|
295
|
+
export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasureDomResult, type MeasureResult, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, Measurer, Paragraph, type ParagraphContent, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextInlineStyle, type TextLineStyle, type TextOptions, type TextOrientation, type TextPlugin, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, highlight, isNone, listStyle, measureText, parseColor, render, renderText, setupView, uploadColor, uploadColors };
|