modern-text 0.2.1 → 0.2.3
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 +496 -469
- package/dist/index.d.cts +114 -65
- package/dist/index.d.mts +114 -65
- package/dist/index.d.ts +114 -65
- package/dist/index.js +2 -2
- package/dist/index.mjs +479 -472
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { BoundingBox, Path2D } from 'modern-path2d';
|
|
2
|
+
export * from 'modern-path2d';
|
|
1
3
|
import { Sfnt } from 'modern-font';
|
|
2
4
|
export * from 'modern-font';
|
|
3
|
-
import { BoundingBox, Path2D } from 'modern-path2d';
|
|
4
5
|
|
|
5
6
|
type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
|
|
6
7
|
type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
|
|
@@ -60,6 +61,27 @@ interface FragmentHighlight {
|
|
|
60
61
|
url: string;
|
|
61
62
|
}
|
|
62
63
|
|
|
64
|
+
declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;
|
|
65
|
+
declare function uploadColor(style: Partial<TextDrawStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
|
|
66
|
+
interface LinearGradient {
|
|
67
|
+
x0: number;
|
|
68
|
+
y0: number;
|
|
69
|
+
x1: number;
|
|
70
|
+
y1: number;
|
|
71
|
+
stops: {
|
|
72
|
+
offset: number;
|
|
73
|
+
color: string;
|
|
74
|
+
}[];
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
interface DrawShapePathsOptions extends Partial<TextEffect> {
|
|
78
|
+
ctx: CanvasRenderingContext2D;
|
|
79
|
+
paths: Path2D[];
|
|
80
|
+
fontSize: number;
|
|
81
|
+
fill?: boolean;
|
|
82
|
+
}
|
|
83
|
+
declare function drawPaths(options: DrawShapePathsOptions): void;
|
|
84
|
+
|
|
63
85
|
declare class Fragment {
|
|
64
86
|
content: string;
|
|
65
87
|
style: Partial<TextStyle>;
|
|
@@ -118,6 +140,66 @@ declare class Paragraph {
|
|
|
118
140
|
addFragment(content: string, style?: Partial<TextStyle>): Fragment;
|
|
119
141
|
}
|
|
120
142
|
|
|
143
|
+
interface TextRenderOptions {
|
|
144
|
+
view: HTMLCanvasElement;
|
|
145
|
+
pixelRatio?: number;
|
|
146
|
+
}
|
|
147
|
+
interface TextOptions {
|
|
148
|
+
content?: TextContent;
|
|
149
|
+
style?: Partial<TextStyle>;
|
|
150
|
+
effects?: TextEffect[];
|
|
151
|
+
deformation?: TextDeformation;
|
|
152
|
+
measureDom?: HTMLElement;
|
|
153
|
+
}
|
|
154
|
+
declare const defaultTextStyles: TextStyle;
|
|
155
|
+
declare class Text {
|
|
156
|
+
content: TextContent;
|
|
157
|
+
style: Partial<TextStyle>;
|
|
158
|
+
effects?: TextEffect[];
|
|
159
|
+
deformation?: TextDeformation;
|
|
160
|
+
measureDom?: HTMLElement;
|
|
161
|
+
needsUpdate: boolean;
|
|
162
|
+
computedStyle: {
|
|
163
|
+
writingMode: WritingMode;
|
|
164
|
+
textOrientation: TextOrientation;
|
|
165
|
+
fontSize: number;
|
|
166
|
+
fontWeight: FontWeight;
|
|
167
|
+
fontFamily: string;
|
|
168
|
+
fontStyle: FontStyle;
|
|
169
|
+
fontKerning: FontKerning;
|
|
170
|
+
textWrap: TextWrap;
|
|
171
|
+
textAlign: TextAlign;
|
|
172
|
+
verticalAlign: VerticalAlign;
|
|
173
|
+
textTransform: TextTransform;
|
|
174
|
+
lineHeight: number;
|
|
175
|
+
letterSpacing: number;
|
|
176
|
+
color: string | CanvasGradient | CanvasPattern;
|
|
177
|
+
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
178
|
+
textStrokeWidth: number;
|
|
179
|
+
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
180
|
+
textDecoration: TextDecoration;
|
|
181
|
+
shadowColor: string;
|
|
182
|
+
shadowOffsetX: number;
|
|
183
|
+
shadowOffsetY: number;
|
|
184
|
+
shadowBlur: number;
|
|
185
|
+
};
|
|
186
|
+
paragraphs: Paragraph[];
|
|
187
|
+
boundingBox: BoundingBox;
|
|
188
|
+
renderBoundingBox: BoundingBox;
|
|
189
|
+
protected _parser: Parser;
|
|
190
|
+
protected _measurer: Measurer;
|
|
191
|
+
protected _deformer: Deformer;
|
|
192
|
+
protected _effector: Effector;
|
|
193
|
+
protected _highlighter: Highlighter;
|
|
194
|
+
protected _renderer2D: Renderer2D;
|
|
195
|
+
get characters(): Character[];
|
|
196
|
+
constructor(options?: TextOptions);
|
|
197
|
+
measure(dom?: HTMLElement | undefined): MeasuredResult;
|
|
198
|
+
requestUpdate(): this;
|
|
199
|
+
update(): this;
|
|
200
|
+
render(options: TextRenderOptions): this;
|
|
201
|
+
}
|
|
202
|
+
|
|
121
203
|
declare class Feature {
|
|
122
204
|
_text: Text;
|
|
123
205
|
constructor(_text: Text);
|
|
@@ -190,16 +272,14 @@ interface MeasuredResult {
|
|
|
190
272
|
declare class Measurer extends Feature {
|
|
191
273
|
protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
|
|
192
274
|
/**
|
|
193
|
-
* <
|
|
275
|
+
* <section style="...">
|
|
194
276
|
* <ul>
|
|
195
277
|
* <li style="...">
|
|
196
|
-
* <
|
|
197
|
-
*
|
|
198
|
-
* <span>...</span>
|
|
199
|
-
* </div>
|
|
278
|
+
* <span style="...">...</span>
|
|
279
|
+
* <span>...</span>
|
|
200
280
|
* </li>
|
|
201
281
|
* </ul>
|
|
202
|
-
* </
|
|
282
|
+
* </section>
|
|
203
283
|
*/
|
|
204
284
|
createDom(): {
|
|
205
285
|
dom: HTMLElement;
|
|
@@ -218,6 +298,9 @@ declare class Parser extends Feature {
|
|
|
218
298
|
parse(): Paragraph[];
|
|
219
299
|
}
|
|
220
300
|
|
|
301
|
+
declare class Reflector extends Feature {
|
|
302
|
+
}
|
|
303
|
+
|
|
221
304
|
interface Render2dOptions {
|
|
222
305
|
pixelRatio: number;
|
|
223
306
|
ctx: CanvasRenderingContext2D;
|
|
@@ -229,62 +312,28 @@ declare class Renderer2D extends Feature {
|
|
|
229
312
|
draw(options: Pick<Render2dOptions, 'ctx'>): this;
|
|
230
313
|
}
|
|
231
314
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
fontStyle: FontStyle;
|
|
256
|
-
fontKerning: FontKerning;
|
|
257
|
-
textWrap: TextWrap;
|
|
258
|
-
textAlign: TextAlign;
|
|
259
|
-
verticalAlign: VerticalAlign;
|
|
260
|
-
textTransform: TextTransform;
|
|
261
|
-
lineHeight: number;
|
|
262
|
-
letterSpacing: number;
|
|
263
|
-
color: string | CanvasGradient | CanvasPattern;
|
|
264
|
-
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
265
|
-
textStrokeWidth: number;
|
|
266
|
-
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
267
|
-
textDecoration: TextDecoration;
|
|
268
|
-
shadowColor: string;
|
|
269
|
-
shadowOffsetX: number;
|
|
270
|
-
shadowOffsetY: number;
|
|
271
|
-
shadowBlur: number;
|
|
272
|
-
};
|
|
273
|
-
paragraphs: Paragraph[];
|
|
274
|
-
boundingBox: BoundingBox;
|
|
275
|
-
renderBoundingBox: BoundingBox;
|
|
276
|
-
protected _parser: Parser;
|
|
277
|
-
protected _measurer: Measurer;
|
|
278
|
-
protected _deformer: Deformer;
|
|
279
|
-
protected _effector: Effector;
|
|
280
|
-
protected _highlighter: Highlighter;
|
|
281
|
-
protected _renderer2D: Renderer2D;
|
|
282
|
-
get characters(): Character[];
|
|
283
|
-
constructor(options: TextOptions);
|
|
284
|
-
measure(dom?: HTMLElement): MeasuredResult;
|
|
285
|
-
requestUpdate(): this;
|
|
286
|
-
update(): this;
|
|
287
|
-
render(options: TextRenderOptions): this;
|
|
288
|
-
}
|
|
315
|
+
declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
|
|
316
|
+
declare function getRotationPoint(point: any, rotation: number): {
|
|
317
|
+
x: number;
|
|
318
|
+
y: number;
|
|
319
|
+
};
|
|
320
|
+
declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
|
|
321
|
+
x: number;
|
|
322
|
+
y: number;
|
|
323
|
+
};
|
|
324
|
+
declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
|
|
325
|
+
x: number;
|
|
326
|
+
y: number;
|
|
327
|
+
};
|
|
328
|
+
declare function getPointPosition(point: {
|
|
329
|
+
x: number;
|
|
330
|
+
y: number;
|
|
331
|
+
}, startPoint: {
|
|
332
|
+
x: number;
|
|
333
|
+
y: number;
|
|
334
|
+
}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
|
|
335
|
+
x: number;
|
|
336
|
+
y: number;
|
|
337
|
+
};
|
|
289
338
|
|
|
290
|
-
export { Text, type TextOptions, type TextRenderOptions, defaultTextStyles };
|
|
339
|
+
export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { BoundingBox, Path2D } from 'modern-path2d';
|
|
2
|
+
export * from 'modern-path2d';
|
|
1
3
|
import { Sfnt } from 'modern-font';
|
|
2
4
|
export * from 'modern-font';
|
|
3
|
-
import { BoundingBox, Path2D } from 'modern-path2d';
|
|
4
5
|
|
|
5
6
|
type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
|
|
6
7
|
type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
|
|
@@ -60,6 +61,27 @@ interface FragmentHighlight {
|
|
|
60
61
|
url: string;
|
|
61
62
|
}
|
|
62
63
|
|
|
64
|
+
declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;
|
|
65
|
+
declare function uploadColor(style: Partial<TextDrawStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
|
|
66
|
+
interface LinearGradient {
|
|
67
|
+
x0: number;
|
|
68
|
+
y0: number;
|
|
69
|
+
x1: number;
|
|
70
|
+
y1: number;
|
|
71
|
+
stops: {
|
|
72
|
+
offset: number;
|
|
73
|
+
color: string;
|
|
74
|
+
}[];
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
interface DrawShapePathsOptions extends Partial<TextEffect> {
|
|
78
|
+
ctx: CanvasRenderingContext2D;
|
|
79
|
+
paths: Path2D[];
|
|
80
|
+
fontSize: number;
|
|
81
|
+
fill?: boolean;
|
|
82
|
+
}
|
|
83
|
+
declare function drawPaths(options: DrawShapePathsOptions): void;
|
|
84
|
+
|
|
63
85
|
declare class Fragment {
|
|
64
86
|
content: string;
|
|
65
87
|
style: Partial<TextStyle>;
|
|
@@ -118,6 +140,66 @@ declare class Paragraph {
|
|
|
118
140
|
addFragment(content: string, style?: Partial<TextStyle>): Fragment;
|
|
119
141
|
}
|
|
120
142
|
|
|
143
|
+
interface TextRenderOptions {
|
|
144
|
+
view: HTMLCanvasElement;
|
|
145
|
+
pixelRatio?: number;
|
|
146
|
+
}
|
|
147
|
+
interface TextOptions {
|
|
148
|
+
content?: TextContent;
|
|
149
|
+
style?: Partial<TextStyle>;
|
|
150
|
+
effects?: TextEffect[];
|
|
151
|
+
deformation?: TextDeformation;
|
|
152
|
+
measureDom?: HTMLElement;
|
|
153
|
+
}
|
|
154
|
+
declare const defaultTextStyles: TextStyle;
|
|
155
|
+
declare class Text {
|
|
156
|
+
content: TextContent;
|
|
157
|
+
style: Partial<TextStyle>;
|
|
158
|
+
effects?: TextEffect[];
|
|
159
|
+
deformation?: TextDeformation;
|
|
160
|
+
measureDom?: HTMLElement;
|
|
161
|
+
needsUpdate: boolean;
|
|
162
|
+
computedStyle: {
|
|
163
|
+
writingMode: WritingMode;
|
|
164
|
+
textOrientation: TextOrientation;
|
|
165
|
+
fontSize: number;
|
|
166
|
+
fontWeight: FontWeight;
|
|
167
|
+
fontFamily: string;
|
|
168
|
+
fontStyle: FontStyle;
|
|
169
|
+
fontKerning: FontKerning;
|
|
170
|
+
textWrap: TextWrap;
|
|
171
|
+
textAlign: TextAlign;
|
|
172
|
+
verticalAlign: VerticalAlign;
|
|
173
|
+
textTransform: TextTransform;
|
|
174
|
+
lineHeight: number;
|
|
175
|
+
letterSpacing: number;
|
|
176
|
+
color: string | CanvasGradient | CanvasPattern;
|
|
177
|
+
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
178
|
+
textStrokeWidth: number;
|
|
179
|
+
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
180
|
+
textDecoration: TextDecoration;
|
|
181
|
+
shadowColor: string;
|
|
182
|
+
shadowOffsetX: number;
|
|
183
|
+
shadowOffsetY: number;
|
|
184
|
+
shadowBlur: number;
|
|
185
|
+
};
|
|
186
|
+
paragraphs: Paragraph[];
|
|
187
|
+
boundingBox: BoundingBox;
|
|
188
|
+
renderBoundingBox: BoundingBox;
|
|
189
|
+
protected _parser: Parser;
|
|
190
|
+
protected _measurer: Measurer;
|
|
191
|
+
protected _deformer: Deformer;
|
|
192
|
+
protected _effector: Effector;
|
|
193
|
+
protected _highlighter: Highlighter;
|
|
194
|
+
protected _renderer2D: Renderer2D;
|
|
195
|
+
get characters(): Character[];
|
|
196
|
+
constructor(options?: TextOptions);
|
|
197
|
+
measure(dom?: HTMLElement | undefined): MeasuredResult;
|
|
198
|
+
requestUpdate(): this;
|
|
199
|
+
update(): this;
|
|
200
|
+
render(options: TextRenderOptions): this;
|
|
201
|
+
}
|
|
202
|
+
|
|
121
203
|
declare class Feature {
|
|
122
204
|
_text: Text;
|
|
123
205
|
constructor(_text: Text);
|
|
@@ -190,16 +272,14 @@ interface MeasuredResult {
|
|
|
190
272
|
declare class Measurer extends Feature {
|
|
191
273
|
protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
|
|
192
274
|
/**
|
|
193
|
-
* <
|
|
275
|
+
* <section style="...">
|
|
194
276
|
* <ul>
|
|
195
277
|
* <li style="...">
|
|
196
|
-
* <
|
|
197
|
-
*
|
|
198
|
-
* <span>...</span>
|
|
199
|
-
* </div>
|
|
278
|
+
* <span style="...">...</span>
|
|
279
|
+
* <span>...</span>
|
|
200
280
|
* </li>
|
|
201
281
|
* </ul>
|
|
202
|
-
* </
|
|
282
|
+
* </section>
|
|
203
283
|
*/
|
|
204
284
|
createDom(): {
|
|
205
285
|
dom: HTMLElement;
|
|
@@ -218,6 +298,9 @@ declare class Parser extends Feature {
|
|
|
218
298
|
parse(): Paragraph[];
|
|
219
299
|
}
|
|
220
300
|
|
|
301
|
+
declare class Reflector extends Feature {
|
|
302
|
+
}
|
|
303
|
+
|
|
221
304
|
interface Render2dOptions {
|
|
222
305
|
pixelRatio: number;
|
|
223
306
|
ctx: CanvasRenderingContext2D;
|
|
@@ -229,62 +312,28 @@ declare class Renderer2D extends Feature {
|
|
|
229
312
|
draw(options: Pick<Render2dOptions, 'ctx'>): this;
|
|
230
313
|
}
|
|
231
314
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
fontStyle: FontStyle;
|
|
256
|
-
fontKerning: FontKerning;
|
|
257
|
-
textWrap: TextWrap;
|
|
258
|
-
textAlign: TextAlign;
|
|
259
|
-
verticalAlign: VerticalAlign;
|
|
260
|
-
textTransform: TextTransform;
|
|
261
|
-
lineHeight: number;
|
|
262
|
-
letterSpacing: number;
|
|
263
|
-
color: string | CanvasGradient | CanvasPattern;
|
|
264
|
-
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
265
|
-
textStrokeWidth: number;
|
|
266
|
-
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
267
|
-
textDecoration: TextDecoration;
|
|
268
|
-
shadowColor: string;
|
|
269
|
-
shadowOffsetX: number;
|
|
270
|
-
shadowOffsetY: number;
|
|
271
|
-
shadowBlur: number;
|
|
272
|
-
};
|
|
273
|
-
paragraphs: Paragraph[];
|
|
274
|
-
boundingBox: BoundingBox;
|
|
275
|
-
renderBoundingBox: BoundingBox;
|
|
276
|
-
protected _parser: Parser;
|
|
277
|
-
protected _measurer: Measurer;
|
|
278
|
-
protected _deformer: Deformer;
|
|
279
|
-
protected _effector: Effector;
|
|
280
|
-
protected _highlighter: Highlighter;
|
|
281
|
-
protected _renderer2D: Renderer2D;
|
|
282
|
-
get characters(): Character[];
|
|
283
|
-
constructor(options: TextOptions);
|
|
284
|
-
measure(dom?: HTMLElement): MeasuredResult;
|
|
285
|
-
requestUpdate(): this;
|
|
286
|
-
update(): this;
|
|
287
|
-
render(options: TextRenderOptions): this;
|
|
288
|
-
}
|
|
315
|
+
declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
|
|
316
|
+
declare function getRotationPoint(point: any, rotation: number): {
|
|
317
|
+
x: number;
|
|
318
|
+
y: number;
|
|
319
|
+
};
|
|
320
|
+
declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
|
|
321
|
+
x: number;
|
|
322
|
+
y: number;
|
|
323
|
+
};
|
|
324
|
+
declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
|
|
325
|
+
x: number;
|
|
326
|
+
y: number;
|
|
327
|
+
};
|
|
328
|
+
declare function getPointPosition(point: {
|
|
329
|
+
x: number;
|
|
330
|
+
y: number;
|
|
331
|
+
}, startPoint: {
|
|
332
|
+
x: number;
|
|
333
|
+
y: number;
|
|
334
|
+
}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
|
|
335
|
+
x: number;
|
|
336
|
+
y: number;
|
|
337
|
+
};
|
|
289
338
|
|
|
290
|
-
export { Text, type TextOptions, type TextRenderOptions, defaultTextStyles };
|
|
339
|
+
export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { BoundingBox, Path2D } from 'modern-path2d';
|
|
2
|
+
export * from 'modern-path2d';
|
|
1
3
|
import { Sfnt } from 'modern-font';
|
|
2
4
|
export * from 'modern-font';
|
|
3
|
-
import { BoundingBox, Path2D } from 'modern-path2d';
|
|
4
5
|
|
|
5
6
|
type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
|
|
6
7
|
type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
|
|
@@ -60,6 +61,27 @@ interface FragmentHighlight {
|
|
|
60
61
|
url: string;
|
|
61
62
|
}
|
|
62
63
|
|
|
64
|
+
declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;
|
|
65
|
+
declare function uploadColor(style: Partial<TextDrawStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
|
|
66
|
+
interface LinearGradient {
|
|
67
|
+
x0: number;
|
|
68
|
+
y0: number;
|
|
69
|
+
x1: number;
|
|
70
|
+
y1: number;
|
|
71
|
+
stops: {
|
|
72
|
+
offset: number;
|
|
73
|
+
color: string;
|
|
74
|
+
}[];
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
interface DrawShapePathsOptions extends Partial<TextEffect> {
|
|
78
|
+
ctx: CanvasRenderingContext2D;
|
|
79
|
+
paths: Path2D[];
|
|
80
|
+
fontSize: number;
|
|
81
|
+
fill?: boolean;
|
|
82
|
+
}
|
|
83
|
+
declare function drawPaths(options: DrawShapePathsOptions): void;
|
|
84
|
+
|
|
63
85
|
declare class Fragment {
|
|
64
86
|
content: string;
|
|
65
87
|
style: Partial<TextStyle>;
|
|
@@ -118,6 +140,66 @@ declare class Paragraph {
|
|
|
118
140
|
addFragment(content: string, style?: Partial<TextStyle>): Fragment;
|
|
119
141
|
}
|
|
120
142
|
|
|
143
|
+
interface TextRenderOptions {
|
|
144
|
+
view: HTMLCanvasElement;
|
|
145
|
+
pixelRatio?: number;
|
|
146
|
+
}
|
|
147
|
+
interface TextOptions {
|
|
148
|
+
content?: TextContent;
|
|
149
|
+
style?: Partial<TextStyle>;
|
|
150
|
+
effects?: TextEffect[];
|
|
151
|
+
deformation?: TextDeformation;
|
|
152
|
+
measureDom?: HTMLElement;
|
|
153
|
+
}
|
|
154
|
+
declare const defaultTextStyles: TextStyle;
|
|
155
|
+
declare class Text {
|
|
156
|
+
content: TextContent;
|
|
157
|
+
style: Partial<TextStyle>;
|
|
158
|
+
effects?: TextEffect[];
|
|
159
|
+
deformation?: TextDeformation;
|
|
160
|
+
measureDom?: HTMLElement;
|
|
161
|
+
needsUpdate: boolean;
|
|
162
|
+
computedStyle: {
|
|
163
|
+
writingMode: WritingMode;
|
|
164
|
+
textOrientation: TextOrientation;
|
|
165
|
+
fontSize: number;
|
|
166
|
+
fontWeight: FontWeight;
|
|
167
|
+
fontFamily: string;
|
|
168
|
+
fontStyle: FontStyle;
|
|
169
|
+
fontKerning: FontKerning;
|
|
170
|
+
textWrap: TextWrap;
|
|
171
|
+
textAlign: TextAlign;
|
|
172
|
+
verticalAlign: VerticalAlign;
|
|
173
|
+
textTransform: TextTransform;
|
|
174
|
+
lineHeight: number;
|
|
175
|
+
letterSpacing: number;
|
|
176
|
+
color: string | CanvasGradient | CanvasPattern;
|
|
177
|
+
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
178
|
+
textStrokeWidth: number;
|
|
179
|
+
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
180
|
+
textDecoration: TextDecoration;
|
|
181
|
+
shadowColor: string;
|
|
182
|
+
shadowOffsetX: number;
|
|
183
|
+
shadowOffsetY: number;
|
|
184
|
+
shadowBlur: number;
|
|
185
|
+
};
|
|
186
|
+
paragraphs: Paragraph[];
|
|
187
|
+
boundingBox: BoundingBox;
|
|
188
|
+
renderBoundingBox: BoundingBox;
|
|
189
|
+
protected _parser: Parser;
|
|
190
|
+
protected _measurer: Measurer;
|
|
191
|
+
protected _deformer: Deformer;
|
|
192
|
+
protected _effector: Effector;
|
|
193
|
+
protected _highlighter: Highlighter;
|
|
194
|
+
protected _renderer2D: Renderer2D;
|
|
195
|
+
get characters(): Character[];
|
|
196
|
+
constructor(options?: TextOptions);
|
|
197
|
+
measure(dom?: HTMLElement | undefined): MeasuredResult;
|
|
198
|
+
requestUpdate(): this;
|
|
199
|
+
update(): this;
|
|
200
|
+
render(options: TextRenderOptions): this;
|
|
201
|
+
}
|
|
202
|
+
|
|
121
203
|
declare class Feature {
|
|
122
204
|
_text: Text;
|
|
123
205
|
constructor(_text: Text);
|
|
@@ -190,16 +272,14 @@ interface MeasuredResult {
|
|
|
190
272
|
declare class Measurer extends Feature {
|
|
191
273
|
protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
|
|
192
274
|
/**
|
|
193
|
-
* <
|
|
275
|
+
* <section style="...">
|
|
194
276
|
* <ul>
|
|
195
277
|
* <li style="...">
|
|
196
|
-
* <
|
|
197
|
-
*
|
|
198
|
-
* <span>...</span>
|
|
199
|
-
* </div>
|
|
278
|
+
* <span style="...">...</span>
|
|
279
|
+
* <span>...</span>
|
|
200
280
|
* </li>
|
|
201
281
|
* </ul>
|
|
202
|
-
* </
|
|
282
|
+
* </section>
|
|
203
283
|
*/
|
|
204
284
|
createDom(): {
|
|
205
285
|
dom: HTMLElement;
|
|
@@ -218,6 +298,9 @@ declare class Parser extends Feature {
|
|
|
218
298
|
parse(): Paragraph[];
|
|
219
299
|
}
|
|
220
300
|
|
|
301
|
+
declare class Reflector extends Feature {
|
|
302
|
+
}
|
|
303
|
+
|
|
221
304
|
interface Render2dOptions {
|
|
222
305
|
pixelRatio: number;
|
|
223
306
|
ctx: CanvasRenderingContext2D;
|
|
@@ -229,62 +312,28 @@ declare class Renderer2D extends Feature {
|
|
|
229
312
|
draw(options: Pick<Render2dOptions, 'ctx'>): this;
|
|
230
313
|
}
|
|
231
314
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
fontStyle: FontStyle;
|
|
256
|
-
fontKerning: FontKerning;
|
|
257
|
-
textWrap: TextWrap;
|
|
258
|
-
textAlign: TextAlign;
|
|
259
|
-
verticalAlign: VerticalAlign;
|
|
260
|
-
textTransform: TextTransform;
|
|
261
|
-
lineHeight: number;
|
|
262
|
-
letterSpacing: number;
|
|
263
|
-
color: string | CanvasGradient | CanvasPattern;
|
|
264
|
-
backgroundColor: string | CanvasGradient | CanvasPattern;
|
|
265
|
-
textStrokeWidth: number;
|
|
266
|
-
textStrokeColor: string | CanvasGradient | CanvasPattern;
|
|
267
|
-
textDecoration: TextDecoration;
|
|
268
|
-
shadowColor: string;
|
|
269
|
-
shadowOffsetX: number;
|
|
270
|
-
shadowOffsetY: number;
|
|
271
|
-
shadowBlur: number;
|
|
272
|
-
};
|
|
273
|
-
paragraphs: Paragraph[];
|
|
274
|
-
boundingBox: BoundingBox;
|
|
275
|
-
renderBoundingBox: BoundingBox;
|
|
276
|
-
protected _parser: Parser;
|
|
277
|
-
protected _measurer: Measurer;
|
|
278
|
-
protected _deformer: Deformer;
|
|
279
|
-
protected _effector: Effector;
|
|
280
|
-
protected _highlighter: Highlighter;
|
|
281
|
-
protected _renderer2D: Renderer2D;
|
|
282
|
-
get characters(): Character[];
|
|
283
|
-
constructor(options: TextOptions);
|
|
284
|
-
measure(dom?: HTMLElement): MeasuredResult;
|
|
285
|
-
requestUpdate(): this;
|
|
286
|
-
update(): this;
|
|
287
|
-
render(options: TextRenderOptions): this;
|
|
288
|
-
}
|
|
315
|
+
declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
|
|
316
|
+
declare function getRotationPoint(point: any, rotation: number): {
|
|
317
|
+
x: number;
|
|
318
|
+
y: number;
|
|
319
|
+
};
|
|
320
|
+
declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
|
|
321
|
+
x: number;
|
|
322
|
+
y: number;
|
|
323
|
+
};
|
|
324
|
+
declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
|
|
325
|
+
x: number;
|
|
326
|
+
y: number;
|
|
327
|
+
};
|
|
328
|
+
declare function getPointPosition(point: {
|
|
329
|
+
x: number;
|
|
330
|
+
y: number;
|
|
331
|
+
}, startPoint: {
|
|
332
|
+
x: number;
|
|
333
|
+
y: number;
|
|
334
|
+
}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
|
|
335
|
+
x: number;
|
|
336
|
+
y: number;
|
|
337
|
+
};
|
|
289
338
|
|
|
290
|
-
export { Text, type TextOptions, type TextRenderOptions, defaultTextStyles };
|
|
339
|
+
export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
|