modern-text 0.6.2 → 0.7.0

package/dist/index.cjs

@@ -103,10 +103,10 @@ function uploadColors(ctx, text) {
   });
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const set1 = /* @__PURE__ */ new Set(["\xA9", "\xAE", "\xF7"]);
@@ -148,28 +148,28 @@ class Character {
     this.content = content;
     this.index = index;
     this.parent = parent;
-    __publicField$4(this, "path", new modernPath2d.Path2D());
-    __publicField$4(this, "lineBox", new modernPath2d.BoundingBox());
-    __publicField$4(this, "inlineBox", new modernPath2d.BoundingBox());
-    __publicField$4(this, "glyphBox");
-    __publicField$4(this, "advanceWidth", 0);
-    __publicField$4(this, "advanceHeight", 0);
-    __publicField$4(this, "underlinePosition", 0);
-    __publicField$4(this, "underlineThickness", 0);
-    __publicField$4(this, "strikeoutPosition", 0);
-    __publicField$4(this, "strikeoutSize", 0);
-    __publicField$4(this, "ascender", 0);
-    __publicField$4(this, "descender", 0);
-    __publicField$4(this, "typoAscender", 0);
-    __publicField$4(this, "typoDescender", 0);
-    __publicField$4(this, "typoLineGap", 0);
-    __publicField$4(this, "winAscent", 0);
-    __publicField$4(this, "winDescent", 0);
-    __publicField$4(this, "xHeight", 0);
-    __publicField$4(this, "capHeight", 0);
-    __publicField$4(this, "baseline", 0);
-    __publicField$4(this, "centerDiviation", 0);
-    __publicField$4(this, "fontStyle");
+    __publicField$5(this, "path", new modernPath2d.Path2D());
+    __publicField$5(this, "lineBox", new modernPath2d.BoundingBox());
+    __publicField$5(this, "inlineBox", new modernPath2d.BoundingBox());
+    __publicField$5(this, "glyphBox");
+    __publicField$5(this, "advanceWidth", 0);
+    __publicField$5(this, "advanceHeight", 0);
+    __publicField$5(this, "underlinePosition", 0);
+    __publicField$5(this, "underlineThickness", 0);
+    __publicField$5(this, "strikeoutPosition", 0);
+    __publicField$5(this, "strikeoutSize", 0);
+    __publicField$5(this, "ascender", 0);
+    __publicField$5(this, "descender", 0);
+    __publicField$5(this, "typoAscender", 0);
+    __publicField$5(this, "typoDescender", 0);
+    __publicField$5(this, "typoLineGap", 0);
+    __publicField$5(this, "winAscent", 0);
+    __publicField$5(this, "winDescent", 0);
+    __publicField$5(this, "xHeight", 0);
+    __publicField$5(this, "capHeight", 0);
+    __publicField$5(this, "baseline", 0);
+    __publicField$5(this, "centerDiviation", 0);
+    __publicField$5(this, "fontStyle");
   }
   get center() {
     return this.glyphBox?.center;
@@ -460,10 +460,10 @@ function needsFetch(source) {
   return source.startsWith("http://") || source.startsWith("https://") || source.startsWith("blob://");
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class Fragment {
@@ -471,7 +471,7 @@ class Fragment {
     this.content = content;
     this.style = style;
     this.parent = parent;
-    __publicField$3(this, "inlineBox", new modernPath2d.BoundingBox());
+    __publicField$4(this, "inlineBox", new modernPath2d.BoundingBox());
     this.updateComputedStyle().initCharacters();
   }
   get computedContent() {
@@ -496,18 +496,18 @@ class Fragment {
   }
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class Paragraph {
   constructor(style, parentStyle) {
     this.style = style;
     this.parentStyle = parentStyle;
-    __publicField$2(this, "lineBox", new modernPath2d.BoundingBox());
-    __publicField$2(this, "fragments", []);
+    __publicField$3(this, "lineBox", new modernPath2d.BoundingBox());
+    __publicField$3(this, "fragments", []);
     this.updateComputedStyle();
   }
   updateComputedStyle() {
@@ -528,21 +528,17 @@ function definePlugin(options) {
   return options;
 }
 
-class Measurer {
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const _Measurer = class _Measurer {
   _styleToDomStyle(style) {
     const _style = { ...style };
     for (const key in style) {
-      if ([
-        "width",
-        "height",
-        "fontSize",
-        "letterSpacing",
-        "textStrokeWidth",
-        "textIndent",
-        "shadowOffsetX",
-        "shadowOffsetY",
-        "shadowBlur"
-      ].includes(key)) {
+      if (_Measurer.pxStyles.has(key)) {
         _style[key] = `${style[key]}px`;
       } else {
         _style[key] = style[key];
@@ -563,27 +559,64 @@ class Measurer {
   createParagraphDom(paragraphs, rootStyle) {
     const documentFragment = document.createDocumentFragment();
     const dom = document.createElement("section");
+    const style = { ...rootStyle };
+    const isHorizontal = rootStyle.writingMode.includes("horizontal");
+    switch (rootStyle.textAlign) {
+      case "start":
+      case "left":
+        style.justifyContent = "start";
+        break;
+      case "center":
+        style.justifyContent = "center";
+        break;
+      case "end":
+      case "right":
+        style.justifyContent = "end";
+        break;
+    }
+    switch (rootStyle.verticalAlign) {
+      case "top":
+        style.alignItems = "top";
+        break;
+      case "middle":
+        style.alignItems = "center";
+        break;
+      case "bottom":
+        style.alignItems = "end";
+        break;
+    }
+    const isFlex = Boolean(style.justifyContent || style.alignItems);
     Object.assign(dom.style, {
+      display: isFlex ? "inline-flex" : void 0,
       width: "max-content",
       height: "max-content",
       whiteSpace: "pre-wrap",
       wordBreak: "break-all",
-      ...this._styleToDomStyle(rootStyle),
+      ...this._styleToDomStyle(style),
       position: "fixed",
       visibility: "hidden"
     });
     const ul = document.createElement("ul");
     Object.assign(ul.style, {
+      verticalAlign: "inherit",
       listStyleType: "inherit",
       padding: "0",
-      margin: "0"
+      margin: "0",
+      width: isFlex && isHorizontal ? "100%" : void 0,
+      height: isFlex && !isHorizontal ? "100%" : void 0
     });
     paragraphs.forEach((paragraph) => {
       const li = document.createElement("li");
-      Object.assign(li.style, this._styleToDomStyle(paragraph.style));
+      Object.assign(li.style, {
+        verticalAlign: "inherit",
+        ...this._styleToDomStyle(paragraph.style)
+      });
       paragraph.fragments.forEach((fragment) => {
         const span = document.createElement("span");
-        Object.assign(span.style, this._styleToDomStyle(fragment.style));
+        Object.assign(span.style, {
+          verticalAlign: "inherit",
+          ...this._styleToDomStyle(fragment.style)
+        });
         span.appendChild(document.createTextNode(fragment.content));
         li.appendChild(span);
       });
@@ -748,7 +781,27 @@ class Measurer {
     destory?.();
     return result;
   }
-}
+};
+__publicField$2(_Measurer, "pxStyles", /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "fontSize",
+  "letterSpacing",
+  "textStrokeWidth",
+  "textIndent",
+  "shadowOffsetX",
+  "shadowOffsetY",
+  "shadowBlur",
+  "marginLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "paddingLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom"
+]));
+let Measurer = _Measurer;
 
 var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1693,16 +1746,12 @@ class Text extends EventEmitter {
   }
 }
 
-async function measureText(options) {
-  const text = new Text(options);
-  await text.load();
-  return text.measure();
+function measureText(options) {
+  return new Text(options).measure();
 }
 
-async function renderText(options) {
-  const text = new Text(options);
-  await text.load();
-  text.render(options);
+function renderText(options) {
+  new Text(options).render(options);
 }
 
 exports.Character = Character;

package/dist/index.d.cts

@@ -121,7 +121,8 @@ interface MeasureDomResult {
     boundingBox: BoundingBox;
 }
 declare class Measurer {
-    protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
+    static pxStyles: Set<string>;
+    protected _styleToDomStyle(style: Record<string, any>): Record<string, any>;
     /**
      * <section style="...">
      *   <ul>
@@ -284,6 +285,16 @@ interface TextDrawStyle {
     skewY: number;
 }
 interface TextStyle extends TextLineStyle, TextInlineStyle, TextDrawStyle {
+    marginLeft?: number;
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    paddingLeft?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    width?: number;
+    height?: number;
 }
 interface FragmentContent extends Partial<TextStyle> {
     content: string;
@@ -338,9 +349,9 @@ declare function uploadColors(ctx: CanvasRenderingContext2D, text: Text$1): void
 
 declare function definePlugin(options: TextPlugin): TextPlugin;
 
-declare function measureText(options: TextOptions): Promise<MeasureResult>;
+declare function measureText(options: TextOptions): MeasureResult;
 
-declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
+declare function renderText(options: TextOptions & TextRenderOptions): void;
 
 declare function highlight(): TextPlugin;
 

package/dist/index.d.mts

@@ -121,7 +121,8 @@ interface MeasureDomResult {
     boundingBox: BoundingBox;
 }
 declare class Measurer {
-    protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
+    static pxStyles: Set<string>;
+    protected _styleToDomStyle(style: Record<string, any>): Record<string, any>;
     /**
      * <section style="...">
      *   <ul>
@@ -284,6 +285,16 @@ interface TextDrawStyle {
     skewY: number;
 }
 interface TextStyle extends TextLineStyle, TextInlineStyle, TextDrawStyle {
+    marginLeft?: number;
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    paddingLeft?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    width?: number;
+    height?: number;
 }
 interface FragmentContent extends Partial<TextStyle> {
     content: string;
@@ -338,9 +349,9 @@ declare function uploadColors(ctx: CanvasRenderingContext2D, text: Text$1): void
 
 declare function definePlugin(options: TextPlugin): TextPlugin;
 
-declare function measureText(options: TextOptions): Promise<MeasureResult>;
+declare function measureText(options: TextOptions): MeasureResult;
 
-declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
+declare function renderText(options: TextOptions & TextRenderOptions): void;
 
 declare function highlight(): TextPlugin;
 

package/dist/index.d.ts

@@ -121,7 +121,8 @@ interface MeasureDomResult {
     boundingBox: BoundingBox;
 }
 declare class Measurer {
-    protected _styleToDomStyle(style: Partial<TextStyle>): Record<string, any>;
+    static pxStyles: Set<string>;
+    protected _styleToDomStyle(style: Record<string, any>): Record<string, any>;
     /**
      * <section style="...">
      *   <ul>
@@ -284,6 +285,16 @@ interface TextDrawStyle {
     skewY: number;
 }
 interface TextStyle extends TextLineStyle, TextInlineStyle, TextDrawStyle {
+    marginLeft?: number;
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    paddingLeft?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    width?: number;
+    height?: number;
 }
 interface FragmentContent extends Partial<TextStyle> {
     content: string;
@@ -338,9 +349,9 @@ declare function uploadColors(ctx: CanvasRenderingContext2D, text: Text$1): void
 
 declare function definePlugin(options: TextPlugin): TextPlugin;
 
-declare function measureText(options: TextOptions): Promise<MeasureResult>;
+declare function measureText(options: TextOptions): MeasureResult;
 
-declare function renderText(options: TextOptions & TextRenderOptions): Promise<void>;
+declare function renderText(options: TextOptions & TextRenderOptions): void;
 
 declare function highlight(): TextPlugin;