modern-text 0.2.2 → 0.2.4

package/dist/index.d.cts

@@ -1,6 +1,6 @@
-import { Sfnt } from 'modern-font';
+import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
-import { BoundingBox, Path2D } from 'modern-path2d';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
 type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
@@ -52,14 +52,32 @@ type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
     offsetY: number;
 }>;
-interface TextDeformation {
-    type: string;
-    intensities?: number[];
-}
+type TextDeformation = () => void;
 interface FragmentHighlight {
     url: string;
 }
 
+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;
+interface LinearGradient {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    stops: {
+        offset: number;
+        color: string;
+    }[];
+}
+
+interface DrawShapePathsOptions extends Partial<TextEffect> {
+    ctx: CanvasRenderingContext2D;
+    paths: Path2D[];
+    fontSize: number;
+    fill?: boolean;
+}
+declare function drawPaths(options: DrawShapePathsOptions): void;
+
 declare class Fragment {
     content: string;
     style: Partial<TextStyle>;
@@ -82,7 +100,7 @@ declare class Character {
     path: Path2D<any>;
     textWidth: number;
     textHeight: number;
-    font: Sfnt;
+    commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
     underlinePosition: number;
@@ -100,10 +118,24 @@ declare class Character {
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _updateFont(): this;
+    protected _font(): Sfnt | undefined;
     protected _updateGlyph(font: Sfnt): this;
+    protected _decoration(): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
     updatePath(): this;
     update(): this;
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }
 
@@ -118,6 +150,66 @@ 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;
+    protected _parser: Parser;
+    protected _measurer: Measurer;
+    protected _deformer: Deformer;
+    protected _effector: Effector;
+    protected _highlighter: Highlighter;
+    protected _renderer2D: Renderer2D;
+    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);
@@ -190,16 +282,14 @@ interface MeasuredResult {
 declare class Measurer extends Feature {
     protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
     /**
-     * <div style="...">
+     * <section style="...">
      *   <ul>
      *     <li style="...">
-     *       <div>
-     *         <span style="...">...</span>
-     *         <span>...</span>
-     *       </div>
+     *       <span style="...">...</span>
+     *       <span>...</span>
      *     </li>
      *   </ul>
-     * </div>
+     * </section>
      */
     createDom(): {
         dom: HTMLElement;
@@ -218,6 +308,9 @@ declare class Parser extends Feature {
     parse(): Paragraph[];
 }
 
+declare class Reflector extends Feature {
+}
+
 interface Render2dOptions {
     pixelRatio: number;
     ctx: CanvasRenderingContext2D;
@@ -229,62 +322,28 @@ declare class Renderer2D extends Feature {
     draw(options: Pick<Render2dOptions, 'ctx'>): this;
 }
 
-interface TextRenderOptions {
-    view: HTMLCanvasElement;
-    pixelRatio?: number;
-}
-interface TextOptions {
-    content?: TextContent;
-    style?: Partial<TextStyle>;
-    effects?: TextEffect[];
-    deformation?: TextDeformation;
-}
-declare const defaultTextStyles: TextStyle;
-declare class Text {
-    content: TextContent;
-    style: Partial<TextStyle>;
-    effects?: TextEffect[];
-    deformation?: TextDeformation;
-    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;
-    protected _parser: Parser;
-    protected _measurer: Measurer;
-    protected _deformer: Deformer;
-    protected _effector: Effector;
-    protected _highlighter: Highlighter;
-    protected _renderer2D: Renderer2D;
-    get characters(): Character[];
-    constructor(options?: TextOptions);
-    measure(dom?: HTMLElement): MeasuredResult;
-    requestUpdate(): this;
-    update(): this;
-    render(options: TextRenderOptions): this;
-}
+declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
+declare function getRotationPoint(point: any, rotation: number): {
+    x: number;
+    y: number;
+};
+declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
+    x: number;
+    y: number;
+};
+declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
+    x: number;
+    y: number;
+};
+declare function getPointPosition(point: {
+    x: number;
+    y: number;
+}, startPoint: {
+    x: number;
+    y: number;
+}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
+    x: number;
+    y: number;
+};
 
-export { Text, type TextOptions, type TextRenderOptions, defaultTextStyles };
+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

@@ -1,6 +1,6 @@
-import { Sfnt } from 'modern-font';
+import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
-import { BoundingBox, Path2D } from 'modern-path2d';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
 type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
@@ -52,14 +52,32 @@ type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
     offsetY: number;
 }>;
-interface TextDeformation {
-    type: string;
-    intensities?: number[];
-}
+type TextDeformation = () => void;
 interface FragmentHighlight {
     url: string;
 }
 
+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;
+interface LinearGradient {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    stops: {
+        offset: number;
+        color: string;
+    }[];
+}
+
+interface DrawShapePathsOptions extends Partial<TextEffect> {
+    ctx: CanvasRenderingContext2D;
+    paths: Path2D[];
+    fontSize: number;
+    fill?: boolean;
+}
+declare function drawPaths(options: DrawShapePathsOptions): void;
+
 declare class Fragment {
     content: string;
     style: Partial<TextStyle>;
@@ -82,7 +100,7 @@ declare class Character {
     path: Path2D<any>;
     textWidth: number;
     textHeight: number;
-    font: Sfnt;
+    commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
     underlinePosition: number;
@@ -100,10 +118,24 @@ declare class Character {
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _updateFont(): this;
+    protected _font(): Sfnt | undefined;
     protected _updateGlyph(font: Sfnt): this;
+    protected _decoration(): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
     updatePath(): this;
     update(): this;
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }
 
@@ -118,6 +150,66 @@ 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;
+    protected _parser: Parser;
+    protected _measurer: Measurer;
+    protected _deformer: Deformer;
+    protected _effector: Effector;
+    protected _highlighter: Highlighter;
+    protected _renderer2D: Renderer2D;
+    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);
@@ -190,16 +282,14 @@ interface MeasuredResult {
 declare class Measurer extends Feature {
     protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
     /**
-     * <div style="...">
+     * <section style="...">
      *   <ul>
      *     <li style="...">
-     *       <div>
-     *         <span style="...">...</span>
-     *         <span>...</span>
-     *       </div>
+     *       <span style="...">...</span>
+     *       <span>...</span>
      *     </li>
      *   </ul>
-     * </div>
+     * </section>
      */
     createDom(): {
         dom: HTMLElement;
@@ -218,6 +308,9 @@ declare class Parser extends Feature {
     parse(): Paragraph[];
 }
 
+declare class Reflector extends Feature {
+}
+
 interface Render2dOptions {
     pixelRatio: number;
     ctx: CanvasRenderingContext2D;
@@ -229,62 +322,28 @@ declare class Renderer2D extends Feature {
     draw(options: Pick<Render2dOptions, 'ctx'>): this;
 }
 
-interface TextRenderOptions {
-    view: HTMLCanvasElement;
-    pixelRatio?: number;
-}
-interface TextOptions {
-    content?: TextContent;
-    style?: Partial<TextStyle>;
-    effects?: TextEffect[];
-    deformation?: TextDeformation;
-}
-declare const defaultTextStyles: TextStyle;
-declare class Text {
-    content: TextContent;
-    style: Partial<TextStyle>;
-    effects?: TextEffect[];
-    deformation?: TextDeformation;
-    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;
-    protected _parser: Parser;
-    protected _measurer: Measurer;
-    protected _deformer: Deformer;
-    protected _effector: Effector;
-    protected _highlighter: Highlighter;
-    protected _renderer2D: Renderer2D;
-    get characters(): Character[];
-    constructor(options?: TextOptions);
-    measure(dom?: HTMLElement): MeasuredResult;
-    requestUpdate(): this;
-    update(): this;
-    render(options: TextRenderOptions): this;
-}
+declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
+declare function getRotationPoint(point: any, rotation: number): {
+    x: number;
+    y: number;
+};
+declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
+    x: number;
+    y: number;
+};
+declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
+    x: number;
+    y: number;
+};
+declare function getPointPosition(point: {
+    x: number;
+    y: number;
+}, startPoint: {
+    x: number;
+    y: number;
+}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
+    x: number;
+    y: number;
+};
 
-export { Text, type TextOptions, type TextRenderOptions, defaultTextStyles };
+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 };