modern-text 0.2.31 → 0.2.33

package/dist/index.cjs

@@ -368,6 +368,13 @@ class Character {
     } else {
       min ?? (min = modernPath2d.Vector2.MAX);
       max ?? (max = modernPath2d.Vector2.MIN);
+      const { left, top } = this.boundingBox;
+      const right = left + this.glyphWidth;
+      const bottom = top + this.glyphHeight;
+      min.x = Math.min(min.x, left);
+      min.y = Math.min(min.y, top);
+      max.x = Math.max(max.x, right);
+      max.y = Math.max(max.y, bottom);
       return { min, max };
     }
   }
@@ -732,18 +739,18 @@ class Parser {
   }
 }
 
-function plugin(options) {
+function definePlugin(options) {
   return options;
 }
 
 const tempV1 = new modernPath2d.Vector2();
 const tempM1 = new modernPath2d.Matrix3();
 const tempM2 = new modernPath2d.Matrix3();
-function effect(effects) {
-  return plugin({
+function effect() {
+  return definePlugin({
     name: "effect",
     getBoundingBox: (text) => {
-      const { characters, fontSize } = text;
+      const { characters, fontSize, effects } = text;
       const boxes = [];
       characters.forEach((character) => {
         effects?.forEach((style) => {
@@ -770,7 +777,7 @@ function effect(effects) {
       return boxes.length ? modernPath2d.BoundingBox.from(...boxes) : void 0;
     },
     render: (ctx, text) => {
-      const { characters, renderBoundingBox } = text;
+      const { characters, renderBoundingBox, effects } = text;
       if (effects) {
         effects.forEach((style) => {
           uploadColor(style, renderBoundingBox, ctx);
@@ -850,7 +857,7 @@ function highlight(options = {}) {
   const referPaths = modernPath2d.parseSvg(config.referImage);
   const paths = [];
   const clipRects = [];
-  return plugin({
+  return definePlugin({
     name: "highlight",
     paths,
     update: (text) => {
@@ -958,10 +965,12 @@ function parseScale(size, fontSize, total) {
 }
 function listStyle() {
   const paths = [];
-  return plugin({
+  return definePlugin({
     name: "listStyle",
+    paths,
     update: (text) => {
-      const { paragraphs, computedStyle: style, fontSize } = text;
+      paths.length = 0;
+      const { paragraphs, computedStyle: style, fontSize, isVertical } = text;
       let listStyleSize = style.listStyleSize;
       let image;
       if (!isNone(style.listStyleImage)) {
@@ -980,24 +989,34 @@ function listStyle() {
       if (!image) {
         return;
       }
-      const paddingLeft = fontSize * 0.45;
+      const padding = fontSize * 0.45;
       const imagePaths = modernPath2d.parseSvg(image);
       const imageBox = modernPath2d.getPathsBoundingBox(imagePaths);
       paragraphs.forEach((paragraph) => {
         const box = paragraph.fragments[0]?.characters[0]?.getGlyphBoundingBox();
         if (box) {
-          const scale = parseScale(listStyleSize, style.fontSize, box.height);
-          const reScale = box.height / imageBox.height * scale;
           const m = new modernPath2d.Matrix3();
-          m.translate(-imageBox.left - imageBox.width, -imageBox.top);
-          m.scale(reScale, reScale);
-          m.translate(0, box.height / 2 - imageBox.height * reScale / 2);
-          m.translate(box.left - paddingLeft, box.top);
+          if (isVertical) {
+            const scale = parseScale(listStyleSize, style.fontSize, box.width);
+            const reScale = box.width / imageBox.height * scale;
+            m.translate(-imageBox.left, -imageBox.top);
+            m.rotate(Math.PI / 2);
+            m.scale(reScale, reScale);
+            m.translate(box.width / 2 - imageBox.height * reScale / 2, 0);
+            m.translate(box.left, box.top - padding);
+          } else {
+            const scale = parseScale(listStyleSize, style.fontSize, box.height);
+            const reScale = box.height / imageBox.height * scale;
+            m.translate(-imageBox.left, -imageBox.top);
+            m.translate(-imageBox.width, 0);
+            m.scale(reScale, reScale);
+            m.translate(0, box.height / 2 - imageBox.height * reScale / 2);
+            m.translate(box.left - padding, box.top);
+          }
           paths.push(...imagePaths.map((p) => p.clone().matrix(m)));
         }
       });
-    },
-    paths
+    }
   });
 }
 
@@ -1051,6 +1070,7 @@ class Text {
   constructor(options = {}) {
     __publicField(this, "content");
     __publicField(this, "style");
+    __publicField(this, "effects");
     __publicField(this, "measureDom");
     __publicField(this, "needsUpdate", true);
     __publicField(this, "computedStyle", { ...defaultTextStyles });
@@ -1060,15 +1080,19 @@ class Text {
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
-    const { content = "", style = {}, measureDom } = options;
+    const { content = "", style = {}, measureDom, effects } = options;
     this.content = content;
     this.style = style;
     this.measureDom = measureDom;
-    this.use(effect(options.effects)).use(highlight(options.highlight)).use(listStyle());
+    this.effects = effects;
+    this.use(effect()).use(highlight(options.highlight)).use(listStyle());
   }
   get fontSize() {
     return this.computedStyle.fontSize;
   }
+  get isVertical() {
+    return this.computedStyle.writingMode.includes("vertical");
+  }
   get characters() {
     return this.paragraphs.flatMap((p) => p.fragments.flatMap((f) => f.characters));
   }
@@ -1149,6 +1173,7 @@ exports.Paragraph = Paragraph;
 exports.Parser = Parser;
 exports.Text = Text;
 exports.defaultTextStyles = defaultTextStyles;
+exports.definePlugin = definePlugin;
 exports.drawPath = drawPath;
 exports.effect = effect;
 exports.fillBackground = fillBackground;
@@ -1158,7 +1183,6 @@ exports.highlight = highlight;
 exports.isNone = isNone;
 exports.listStyle = listStyle;
 exports.parseColor = parseColor;
-exports.plugin = plugin;
 exports.setupView = setupView;
 exports.uploadColor = uploadColor;
 exports.uploadColors = uploadColors;

package/dist/index.d.cts

@@ -223,6 +223,7 @@ declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
     style: Partial<TextStyle>;
+    effects?: TextEffect[];
     measureDom?: HTMLElement;
     needsUpdate: boolean;
     computedStyle: {
@@ -264,6 +265,7 @@ declare class Text {
     measurer: Measurer;
     plugins: Map<string, Plugin>;
     get fontSize(): number;
+    get isVertical(): boolean;
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
@@ -282,7 +284,7 @@ interface Plugin {
     renderOrder?: number;
     render?: (ctx: CanvasRenderingContext2D, text: Text) => void;
 }
-declare function plugin(options: Plugin): Plugin;
+declare function definePlugin(options: Plugin): Plugin;
 
 type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
@@ -290,7 +292,7 @@ type TextEffect = Partial<TextDrawStyle & {
     skewX: number;
     skewY: number;
 }>;
-declare function effect(effects?: TextEffect[]): Plugin;
+declare function effect(): Plugin;
 declare function getTransform2D(text: Text, style: TextEffect): Matrix3;
 
 interface HighlightOptions {
@@ -317,4 +319,4 @@ 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, 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 };
+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, definePlugin, drawPath, effect, fillBackground, filterEmpty, getTransform2D, highlight, isNone, listStyle, parseColor, setupView, uploadColor, uploadColors };

package/dist/index.d.mts

@@ -223,6 +223,7 @@ declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
     style: Partial<TextStyle>;
+    effects?: TextEffect[];
     measureDom?: HTMLElement;
     needsUpdate: boolean;
     computedStyle: {
@@ -264,6 +265,7 @@ declare class Text {
     measurer: Measurer;
     plugins: Map<string, Plugin>;
     get fontSize(): number;
+    get isVertical(): boolean;
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
@@ -282,7 +284,7 @@ interface Plugin {
     renderOrder?: number;
     render?: (ctx: CanvasRenderingContext2D, text: Text) => void;
 }
-declare function plugin(options: Plugin): Plugin;
+declare function definePlugin(options: Plugin): Plugin;
 
 type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
@@ -290,7 +292,7 @@ type TextEffect = Partial<TextDrawStyle & {
     skewX: number;
     skewY: number;
 }>;
-declare function effect(effects?: TextEffect[]): Plugin;
+declare function effect(): Plugin;
 declare function getTransform2D(text: Text, style: TextEffect): Matrix3;
 
 interface HighlightOptions {
@@ -317,4 +319,4 @@ 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, 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 };
+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, definePlugin, drawPath, effect, fillBackground, filterEmpty, getTransform2D, highlight, isNone, listStyle, parseColor, setupView, uploadColor, uploadColors };

package/dist/index.d.ts

@@ -223,6 +223,7 @@ declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
     style: Partial<TextStyle>;
+    effects?: TextEffect[];
     measureDom?: HTMLElement;
     needsUpdate: boolean;
     computedStyle: {
@@ -264,6 +265,7 @@ declare class Text {
     measurer: Measurer;
     plugins: Map<string, Plugin>;
     get fontSize(): number;
+    get isVertical(): boolean;
     get characters(): Character[];
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
@@ -282,7 +284,7 @@ interface Plugin {
     renderOrder?: number;
     render?: (ctx: CanvasRenderingContext2D, text: Text) => void;
 }
-declare function plugin(options: Plugin): Plugin;
+declare function definePlugin(options: Plugin): Plugin;
 
 type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
@@ -290,7 +292,7 @@ type TextEffect = Partial<TextDrawStyle & {
     skewX: number;
     skewY: number;
 }>;
-declare function effect(effects?: TextEffect[]): Plugin;
+declare function effect(): Plugin;
 declare function getTransform2D(text: Text, style: TextEffect): Matrix3;
 
 interface HighlightOptions {
@@ -317,4 +319,4 @@ 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, 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 };
+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, definePlugin, drawPath, effect, fillBackground, filterEmpty, getTransform2D, highlight, isNone, listStyle, parseColor, setupView, uploadColor, uploadColors };