modern-text 0.6.2 → 0.7.0

package/dist/index.mjs

@@ -101,10 +101,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"]);
@@ -146,28 +146,28 @@ class Character {
     this.content = content;
     this.index = index;
     this.parent = parent;
-    __publicField$4(this, "path", new Path2D());
-    __publicField$4(this, "lineBox", new BoundingBox());
-    __publicField$4(this, "inlineBox", new 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 Path2D());
+    __publicField$5(this, "lineBox", new BoundingBox());
+    __publicField$5(this, "inlineBox", new 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;
@@ -458,10 +458,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 {
@@ -469,7 +469,7 @@ class Fragment {
     this.content = content;
     this.style = style;
     this.parent = parent;
-    __publicField$3(this, "inlineBox", new BoundingBox());
+    __publicField$4(this, "inlineBox", new BoundingBox());
     this.updateComputedStyle().initCharacters();
   }
   get computedContent() {
@@ -494,18 +494,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 BoundingBox());
-    __publicField$2(this, "fragments", []);
+    __publicField$3(this, "lineBox", new BoundingBox());
+    __publicField$3(this, "fragments", []);
     this.updateComputedStyle();
   }
   updateComputedStyle() {
@@ -526,21 +526,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];
@@ -561,27 +557,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);
       });
@@ -746,7 +779,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;
@@ -1691,16 +1744,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);
 }
 
 export { Character, Fragment, Measurer, Paragraph, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",