modern-text 0.2.30 → 0.2.31

package/dist/index.d.cts

@@ -1,66 +1,74 @@
 import { BoundingBox, Path2D, Vector2, VectorLike, Matrix3 } from 'modern-path2d';
+export * from 'modern-path2d';
 import { Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
 
+type Sizeable = `${number}%` | `${number}rem` | number;
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
 type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
 type FontWeight = 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
-type FontKerning = 'auto' | 'none' | 'normal';
+type FontKerning = 'none' | 'auto' | 'normal';
 type TextWrap = 'wrap' | 'nowrap';
 type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
 type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'super' | 'text-top' | 'text-bottom';
-type TextTransform = 'uppercase' | 'lowercase' | 'none';
+type TextTransform = 'none' | 'uppercase' | 'lowercase';
 type TextDecoration = 'none' | 'underline' | 'line-through';
+type ListStyleType = 'none' | 'disc';
+type ListStyleImage = 'none' | string;
+type ListStyleSize = 'cover' | Sizeable;
+type ListStylePosition = 'inside' | 'outside';
+type HighlightImage = 'none' | string;
+type HighlightSize = 'cover' | Sizeable;
+type HighlightStrokeWidth = Sizeable;
+type HighlightOverflow = 'none' | 'visible' | 'hidden';
 interface TextLayoutStyle {
     writingMode: WritingMode;
-    textOrientation: TextOrientation;
+    verticalAlign: VerticalAlign;
+    lineHeight: number;
+    letterSpacing: number;
     fontSize: number;
     fontWeight: FontWeight;
     fontFamily: string;
     fontStyle: FontStyle;
-    fontKerning: FontKerning;
+    fontKerning?: FontKerning;
     textWrap: TextWrap;
     textAlign: TextAlign;
-    verticalAlign: VerticalAlign;
     textTransform: TextTransform;
-    lineHeight: number;
-    letterSpacing: number;
+    textOrientation: TextOrientation;
 }
 interface TextDrawStyle {
     color: string | CanvasGradient | CanvasPattern;
     backgroundColor: string | CanvasGradient | CanvasPattern;
+    textDecoration: TextDecoration;
     textStrokeWidth: number;
     textStrokeColor: string | CanvasGradient | CanvasPattern;
-    textDecoration: TextDecoration;
     shadowColor: string;
     shadowOffsetX: number;
     shadowOffsetY: number;
     shadowBlur: number;
 }
-interface TextStyle extends TextLayoutStyle, TextDrawStyle {
+interface TextListStyle {
+    listStyleType: ListStyleType;
+    listStyleImage: ListStyleImage;
+    listStyleSize: ListStyleSize;
+    listStylePosition: ListStylePosition;
+}
+interface TextHighlightStyle {
+    highlightImage: HighlightImage;
+    highlightSize: HighlightSize;
+    highlightStrokeWidth: HighlightStrokeWidth;
+    highlightOverflow: HighlightOverflow;
+}
+interface TextStyle extends TextLayoutStyle, TextDrawStyle, TextListStyle, TextHighlightStyle {
 }
 interface FragmentContent extends Partial<TextStyle> {
     content: string;
-    highlight?: FragmentHighlight;
 }
 interface ParagraphContent extends Partial<TextStyle> {
     fragments: FragmentContent[];
 }
 type TextContent = string | FragmentContent | ParagraphContent | (string | FragmentContent | ParagraphContent | (string | FragmentContent)[])[];
-type TextEffect = Partial<TextDrawStyle & {
-    offsetX: number;
-    offsetY: number;
-    skewX: number;
-    skewY: number;
-}>;
-type TextDeformation = () => void;
-interface FragmentHighlight {
-    url: string;
-    strokeWidth?: number;
-    repeatXByFontsize?: number;
-    overflowXHidden?: boolean;
-}
 
 declare function parseColor(ctx: CanvasRenderingContext2D, source: string | CanvasGradient | CanvasPattern, box: BoundingBox): string | CanvasGradient | CanvasPattern;
 declare function uploadColor(style: Partial<TextDrawStyle>, box: BoundingBox, ctx: CanvasRenderingContext2D): void;
@@ -75,14 +83,6 @@ interface LinearGradient {
     }[];
 }
 
-interface DrawShapePathsOptions extends Partial<TextEffect> {
-    ctx: CanvasRenderingContext2D;
-    path: Path2D;
-    fontSize: number;
-    clipRect?: BoundingBox;
-}
-declare function drawPath(options: DrawShapePathsOptions): void;
-
 declare class Fragment {
     content: string;
     style: Partial<TextStyle>;
@@ -90,7 +90,6 @@ declare class Fragment {
     boundingBox: BoundingBox;
     characters: Character[];
     computedStyle: TextStyle;
-    highlight?: FragmentHighlight;
     get computedContent(): string;
     constructor(content: string, style: Partial<TextStyle> | undefined, parent: Paragraph);
     updateComputedStyle(): this;
@@ -144,117 +143,6 @@ declare class Paragraph {
     addFragment(content: string, style?: Partial<TextStyle>): Fragment;
 }
 
-interface TextRenderOptions {
-    view: HTMLCanvasElement;
-    pixelRatio?: number;
-}
-interface TextOptions {
-    content?: TextContent;
-    style?: Partial<TextStyle>;
-    effects?: TextEffect[];
-    deformation?: TextDeformation;
-    measureDom?: HTMLElement;
-}
-declare const defaultTextStyles: TextStyle;
-declare class Text {
-    content: TextContent;
-    style: Partial<TextStyle>;
-    effects?: TextEffect[];
-    deformation?: TextDeformation;
-    measureDom?: HTMLElement;
-    needsUpdate: boolean;
-    computedStyle: {
-        writingMode: WritingMode;
-        textOrientation: TextOrientation;
-        fontSize: number;
-        fontWeight: FontWeight;
-        fontFamily: string;
-        fontStyle: FontStyle;
-        fontKerning: FontKerning;
-        textWrap: TextWrap;
-        textAlign: TextAlign;
-        verticalAlign: VerticalAlign;
-        textTransform: TextTransform;
-        lineHeight: number;
-        letterSpacing: number;
-        color: string | CanvasGradient | CanvasPattern;
-        backgroundColor: string | CanvasGradient | CanvasPattern;
-        textStrokeWidth: number;
-        textStrokeColor: string | CanvasGradient | CanvasPattern;
-        textDecoration: TextDecoration;
-        shadowColor: string;
-        shadowOffsetX: number;
-        shadowOffsetY: number;
-        shadowBlur: number;
-    };
-    paragraphs: Paragraph[];
-    boundingBox: BoundingBox;
-    renderBoundingBox: BoundingBox;
-    parser: Parser;
-    measurer: Measurer;
-    deformer: Deformer;
-    effector: Effector;
-    highlighter: Highlighter;
-    renderer2D: Renderer2D;
-    get fontSize(): number;
-    get characters(): Character[];
-    constructor(options?: TextOptions);
-    measure(dom?: HTMLElement | undefined): MeasuredResult;
-    requestUpdate(): this;
-    update(): this;
-    render(options: TextRenderOptions): this;
-}
-
-declare class Feature {
-    _text: Text;
-    constructor(_text: Text);
-}
-
-declare class Deformer extends Feature {
-    deform(): void;
-}
-
-interface EffectOptions {
-    ctx: CanvasRenderingContext2D;
-}
-declare class Effector extends Feature {
-    getTransform2D(style: TextEffect): Matrix3;
-    getBoundingBox(): BoundingBox;
-    draw(options: EffectOptions): this;
-}
-
-interface HighlightGroup {
-    highlight: FragmentHighlight;
-    box: BoundingBox;
-    baseline: number;
-    fontSize: number;
-}
-declare const defaultHighlightRefer = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4=";
-declare class Highlighter extends Feature {
-    protected static _refer: string;
-    static parsedRefer: Path2D[];
-    static get refer(): string;
-    static set refer(refer: string);
-    paths: {
-        clipRect?: BoundingBox;
-        path: Path2D;
-    }[];
-    getReferBoundingBox(): BoundingBox;
-    getBoundingBox(): BoundingBox | undefined;
-    highlight(perChar?: boolean): void;
-    protected _parseSvg(url: string): {
-        paths: Path2D[];
-        box: BoundingBox;
-    };
-    protected _parseGroup(group: HighlightGroup): {
-        clipRect?: BoundingBox;
-        path: Path2D;
-    }[];
-    draw({ ctx }: {
-        ctx: CanvasRenderingContext2D;
-    }): this;
-}
-
 interface MeasuredParagraph {
     paragraphIndex: number;
     left: number;
@@ -287,7 +175,9 @@ interface MeasuredResult {
     paragraphs: Paragraph[];
     boundingBox: BoundingBox;
 }
-declare class Measurer extends Feature {
+declare class Measurer {
+    protected _text: Text;
+    constructor(_text: Text);
     protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
     /**
      * <section style="...">
@@ -312,24 +202,119 @@ declare class Measurer extends Feature {
     measure(dom?: HTMLElement): MeasuredResult;
 }
 
-declare class Parser extends Feature {
+declare class Parser {
+    protected _text: Text;
+    constructor(_text: Text);
     parse(): Paragraph[];
 }
 
-declare class Reflector extends Feature {
+interface TextRenderOptions {
+    view: HTMLCanvasElement;
+    pixelRatio?: number;
+}
+interface TextOptions {
+    content?: TextContent;
+    style?: Partial<TextStyle>;
+    measureDom?: HTMLElement;
+    effects?: TextEffect[];
+    highlight?: HighlightOptions;
+}
+declare const defaultTextStyles: TextStyle;
+declare class Text {
+    content: TextContent;
+    style: Partial<TextStyle>;
+    measureDom?: HTMLElement;
+    needsUpdate: boolean;
+    computedStyle: {
+        writingMode: WritingMode;
+        verticalAlign: VerticalAlign;
+        lineHeight: number;
+        letterSpacing: number;
+        fontSize: number;
+        fontWeight: FontWeight;
+        fontFamily: string;
+        fontStyle: FontStyle;
+        fontKerning?: FontKerning;
+        textWrap: TextWrap;
+        textAlign: TextAlign;
+        textTransform: TextTransform;
+        textOrientation: TextOrientation;
+        color: string | CanvasGradient | CanvasPattern;
+        backgroundColor: string | CanvasGradient | CanvasPattern;
+        textDecoration: TextDecoration;
+        textStrokeWidth: number;
+        textStrokeColor: string | CanvasGradient | CanvasPattern;
+        shadowColor: string;
+        shadowOffsetX: number;
+        shadowOffsetY: number;
+        shadowBlur: number;
+        listStyleType: ListStyleType;
+        listStyleImage: ListStyleImage;
+        listStyleSize: ListStyleSize;
+        listStylePosition: ListStylePosition;
+        highlightImage: HighlightImage;
+        highlightSize: HighlightSize;
+        highlightStrokeWidth: HighlightStrokeWidth;
+        highlightOverflow: HighlightOverflow;
+    };
+    paragraphs: Paragraph[];
+    boundingBox: BoundingBox;
+    renderBoundingBox: BoundingBox;
+    parser: Parser;
+    measurer: Measurer;
+    plugins: Map<string, Plugin>;
+    get fontSize(): number;
+    get characters(): Character[];
+    constructor(options?: TextOptions);
+    use(plugin: Plugin): this;
+    measure(dom?: HTMLElement | undefined): MeasuredResult;
+    requestUpdate(): this;
+    update(): this;
+    render(options: TextRenderOptions): this;
+}
+
+interface Plugin {
+    name: string;
+    paths?: Path2D[];
+    getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    updateOrder?: number;
+    update?: (text: Text) => void;
+    renderOrder?: number;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => void;
 }
+declare function plugin(options: Plugin): Plugin;
 
-interface Render2dOptions {
-    pixelRatio: number;
-    ctx: CanvasRenderingContext2D;
+type TextEffect = Partial<TextDrawStyle & {
+    offsetX: number;
+    offsetY: number;
+    skewX: number;
+    skewY: number;
+}>;
+declare function effect(effects?: TextEffect[]): Plugin;
+declare function getTransform2D(text: Text, style: TextEffect): Matrix3;
+
+interface HighlightOptions {
+    referImage?: string;
 }
-declare class Renderer2D extends Feature {
-    setupView(options: Render2dOptions): this;
-    uploadColors(options: Pick<Render2dOptions, 'ctx'>): this;
-    fillBackground(options: Pick<Render2dOptions, 'ctx'>): this;
-    draw(options: Pick<Render2dOptions, 'ctx'>): this;
+declare function highlight(options?: HighlightOptions): Plugin;
+
+declare function listStyle(): Plugin;
+
+interface DrawShapePathsOptions extends Partial<TextEffect> {
+    ctx: CanvasRenderingContext2D;
+    path: Path2D;
+    fontSize: number;
+    clipRect?: BoundingBox;
 }
+declare function drawPath(options: DrawShapePathsOptions): void;
+
+declare function fillBackground(ctx: CanvasRenderingContext2D, text: Text): void;
+
+declare function setupView(ctx: CanvasRenderingContext2D, pixelRatio: number, boundingBox: BoundingBox): void;
+
+declare function uploadColors(ctx: CanvasRenderingContext2D, text: Text): void;
 
+declare function isNone(val: string | undefined): boolean;
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
 
-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, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, parseColor, uploadColor };
+export { Character, type DrawShapePathsOptions, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type HighlightImage, type HighlightOptions, type HighlightOverflow, type HighlightSize, type HighlightStrokeWidth, type LinearGradient, type ListStyleImage, type ListStylePosition, type ListStyleSize, type ListStyleType, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, type Plugin, type Sizeable, Text, type TextAlign, type TextContent, type TextDecoration, type TextDrawStyle, type TextEffect, type TextHighlightStyle, type TextLayoutStyle, type TextListStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultTextStyles, drawPath, effect, fillBackground, filterEmpty, getTransform2D, highlight, isNone, listStyle, parseColor, plugin, setupView, uploadColor, uploadColors };