modern-text 0.7.3 → 0.7.4

package/dist/index.mjs

@@ -101,12 +101,6 @@ function uploadColors(ctx, text) {
   });
 }
 
-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"]);
 const set2 = /* @__PURE__ */ new Set([
   "\u2014",
@@ -146,29 +140,29 @@ class Character {
     this.content = content;
     this.index = index;
     this.parent = parent;
-    __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");
   }
+  path = new Path2D();
+  lineBox = new BoundingBox();
+  inlineBox = new BoundingBox();
+  glyphBox;
+  advanceWidth = 0;
+  advanceHeight = 0;
+  underlinePosition = 0;
+  underlineThickness = 0;
+  strikeoutPosition = 0;
+  strikeoutSize = 0;
+  ascender = 0;
+  descender = 0;
+  typoAscender = 0;
+  typoDescender = 0;
+  typoLineGap = 0;
+  winAscent = 0;
+  winDescent = 0;
+  xHeight = 0;
+  capHeight = 0;
+  baseline = 0;
+  centerDiviation = 0;
+  fontStyle;
   get center() {
     return this.glyphBox?.center;
   }
@@ -458,20 +452,14 @@ function needsFetch(source) {
   return source.startsWith("http://") || source.startsWith("https://") || source.startsWith("blob://");
 }
 
-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 {
   constructor(content, style = {}, parent) {
     this.content = content;
     this.style = style;
     this.parent = parent;
-    __publicField$4(this, "inlineBox", new BoundingBox());
     this.updateComputedStyle().initCharacters();
   }
+  inlineBox = new BoundingBox();
   get computedContent() {
     const style = this.computedStyle;
     return style.textTransform === "uppercase" ? this.content.toUpperCase() : style.textTransform === "lowercase" ? this.content.toLowerCase() : this.content;
@@ -494,20 +482,14 @@ class Fragment {
   }
 }
 
-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$3(this, "lineBox", new BoundingBox());
-    __publicField$3(this, "fragments", []);
     this.updateComputedStyle();
   }
+  lineBox = new BoundingBox();
+  fragments = [];
   updateComputedStyle() {
     this.computedStyle = {
       ...filterEmpty(this.parentStyle),
@@ -526,17 +508,30 @@ function definePlugin(options) {
   return options;
 }
 
-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 {
+class Measurer {
+  static pxStyles = /* @__PURE__ */ new Set([
+    "width",
+    "height",
+    "fontSize",
+    "letterSpacing",
+    "textStrokeWidth",
+    "textIndent",
+    "shadowOffsetX",
+    "shadowOffsetY",
+    "shadowBlur",
+    "marginLeft",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "paddingLeft",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom"
+  ]);
   _styleToDomStyle(style) {
     const _style = { ...style };
     for (const key in style) {
-      if (_Measurer.pxStyles.has(key)) {
+      if (Measurer.pxStyles.has(key)) {
         _style[key] = `${style[key]}px`;
       } else {
         _style[key] = style[key];
@@ -780,38 +775,10 @@ const _Measurer = 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;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 class EventEmitter {
-  constructor() {
-    __publicField$1(this, "eventListeners", /* @__PURE__ */ new Map());
-  }
+  eventListeners = /* @__PURE__ */ new Map();
   addEventListener(event, listener, options) {
     const object = { value: listener, options };
     const listeners = this.eventListeners.get(event);
@@ -896,6 +863,25 @@ class EventEmitter {
   }
 }
 
+function getHighlightStyle(style) {
+  const {
+    highlight: highlight2,
+    highlightImage,
+    highlightReferImage,
+    highlightColormap,
+    highlightLine,
+    highlightSize,
+    highlightThickness
+  } = style;
+  return {
+    image: highlight2?.image ?? highlightImage ?? "none",
+    referImage: highlight2?.referImage ?? highlightReferImage ?? "none",
+    colormap: highlight2?.colormap ?? highlightColormap ?? "none",
+    line: highlight2?.line ?? highlightLine ?? "none",
+    size: highlight2?.size ?? highlightSize ?? "cover",
+    thickness: highlight2?.thickness ?? highlightThickness ?? "100%"
+  };
+}
 function highlight() {
   const paths = [];
   const clipRects = [];
@@ -928,45 +914,46 @@ function highlight() {
     name: "highlight",
     paths,
     load: async (text) => {
-      const promises = [];
+      const set = /* @__PURE__ */ new Set();
       text.forEachCharacter((character) => {
         const { computedStyle: style } = character;
-        const { highlightImage, highlightReferImage } = style;
-        if (needsFetch(highlightImage)) {
-          promises.push(loadSvg(highlightImage));
+        const { image, referImage } = getHighlightStyle(style);
+        if (needsFetch(image)) {
+          set.add(image);
         }
-        if (needsFetch(highlightReferImage)) {
-          promises.push(loadSvg(highlightReferImage));
+        if (needsFetch(referImage)) {
+          set.add(referImage);
         }
       });
-      await Promise.all(promises);
+      await Promise.all(Array.from(set).map((src) => loadSvg(src)));
     },
     update: (text) => {
       clipRects.length = 0;
       paths.length = 0;
       let groups = [];
       let group;
-      let prevStyle;
+      let prevHighlight;
       text.forEachCharacter((character) => {
         const {
           computedStyle: style
         } = character;
+        const highlight2 = getHighlightStyle(style);
         const {
-          highlightImage
-        } = style;
-        if (!isNone(highlightImage)) {
+          image,
+          colormap,
+          line,
+          size,
+          thickness
+        } = highlight2;
+        if (!isNone(image)) {
           const {
             inlineBox,
             isVertical
           } = character;
           const {
-            fontSize,
-            highlightColormap,
-            highlightLine,
-            highlightSize,
-            highlightThickness
+            fontSize
           } = style;
-          if ((!prevStyle || isEqualValue(prevStyle.highlightImage, highlightImage) && isEqualValue(prevStyle.highlightColormap, highlightColormap) && isEqualValue(prevStyle.highlightLine, highlightLine) && isEqualValue(prevStyle.highlightSize, highlightSize) && isEqualValue(prevStyle.highlightThickness, highlightThickness)) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
+          if ((!prevHighlight || isEqualValue(prevHighlight.image, image) && isEqualValue(prevHighlight.colormap, colormap) && isEqualValue(prevHighlight.line, line) && isEqualValue(prevHighlight.size, size) && isEqualValue(prevHighlight.thickness, thickness)) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -979,7 +966,7 @@ function highlight() {
             groups.push(group);
           }
         }
-        prevStyle = style;
+        prevHighlight = highlight2;
       });
       groups = groups.filter((characters) => characters.length);
       for (let i = 0; i < groups.length; i++) {
@@ -993,18 +980,20 @@ function highlight() {
         } = char;
         const {
           fontSize,
-          writingMode,
-          highlightImage,
-          highlightReferImage,
-          highlightColormap,
-          highlightLine,
-          highlightSize,
-          highlightThickness
+          writingMode
         } = style;
+        const {
+          image,
+          referImage,
+          colormap,
+          line,
+          size,
+          thickness
+        } = getHighlightStyle(style);
         const isVertical = writingMode.includes("vertical");
-        const thickness = parseValueNumber(highlightThickness, { fontSize, total: groupBox.width }) / groupBox.width;
-        const colormap = parseColormap(highlightColormap);
-        const { paths: svgPaths, dom: svgDom } = getPaths(highlightImage);
+        const _thickness = parseValueNumber(thickness, { fontSize, total: groupBox.width }) / groupBox.width;
+        const _colormap = parseColormap(colormap);
+        const { paths: svgPaths, dom: svgDom } = getPaths(image);
         const aBox = getPathsBoundingBox(svgPaths, true);
         const styleScale = fontSize / aBox.width * 2;
         const cBox = new BoundingBox().copy(groupBox);
@@ -1015,37 +1004,37 @@ function highlight() {
         }
         const rawWidth = Math.floor(cBox.width);
         let userWidth = rawWidth;
-        if (highlightSize !== "cover") {
-          userWidth = parseValueNumber(highlightSize, { fontSize, total: groupBox.width });
+        if (size !== "cover") {
+          userWidth = parseValueNumber(size, { fontSize, total: groupBox.width }) || rawWidth;
           cBox.width = userWidth;
         }
-        if (!isNone(highlightReferImage) && isNone(highlightLine)) {
-          const bBox = getPathsBoundingBox(getPaths(highlightReferImage).paths, true);
+        if (!isNone(referImage) && isNone(line)) {
+          const bBox = getPathsBoundingBox(getPaths(referImage).paths, true);
           aBox.copy(bBox);
         } else {
-          let line;
-          if (isNone(highlightLine)) {
+          let _line;
+          if (isNone(line)) {
             if (aBox.width / aBox.height > 4) {
-              line = "underline";
+              _line = "underline";
               const viewBox = svgDom.getAttribute("viewBox");
               if (viewBox) {
                 const [_x, y, _w, h] = viewBox.split(" ").map((v) => Number(v));
                 const viewCenter = y + h / 2;
                 if (aBox.y < viewCenter && aBox.y + aBox.height > viewCenter) {
-                  line = "line-through";
+                  _line = "line-through";
                 } else if (aBox.y + aBox.height < viewCenter) {
-                  line = "overline";
+                  _line = "overline";
                 } else {
-                  line = "underline";
+                  _line = "underline";
                 }
               }
             } else {
-              line = "outline";
+              _line = "outline";
             }
           } else {
-            line = highlightLine;
+            _line = line;
           }
-          switch (line) {
+          switch (_line) {
             case "outline": {
               const paddingX = cBox.width * 0.2;
               const paddingY = cBox.height * 0.2;
@@ -1102,7 +1091,7 @@ function highlight() {
           svgPaths.forEach((originalPath) => {
             const path = originalPath.clone().matrix(_transform);
             if (path.style.strokeWidth) {
-              path.style.strokeWidth *= styleScale * thickness;
+              path.style.strokeWidth *= styleScale * _thickness;
             }
             if (path.style.strokeMiterlimit) {
               path.style.strokeMiterlimit *= styleScale;
@@ -1113,11 +1102,11 @@ function highlight() {
             if (path.style.strokeDasharray) {
               path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * styleScale);
             }
-            if (path.style.fill && path.style.fill in colormap) {
-              path.style.fill = colormap[path.style.fill];
+            if (path.style.fill && path.style.fill in _colormap) {
+              path.style.fill = _colormap[path.style.fill];
             }
-            if (path.style.stroke && path.style.stroke in colormap) {
-              path.style.stroke = colormap[path.style.stroke];
+            if (path.style.stroke && path.style.stroke in _colormap) {
+              path.style.stroke = _colormap[path.style.stroke];
             }
             paths.push(path);
             if (rawWidth !== userWidth) {
@@ -1490,12 +1479,6 @@ function textDecoration() {
   });
 }
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 const defaultTextStyles = {
   writingMode: "horizontal-tb",
   verticalAlign: "baseline",
@@ -1526,13 +1509,6 @@ const defaultTextStyles = {
   listStyleColormap: "none",
   listStyleSize: "cover",
   listStylePosition: "outside",
-  // highlight
-  highlightImage: "none",
-  highlightReferImage: "none",
-  highlightColormap: "none",
-  highlightLine: "none",
-  highlightSize: "cover",
-  highlightThickness: "100%",
   // shadow
   shadowColor: "rgba(0, 0, 0, 0)",
   shadowOffsetX: 0,
@@ -1544,24 +1520,33 @@ const defaultTextStyles = {
   skewY: 0
 };
 class Text extends EventEmitter {
+  debug;
+  content;
+  style;
+  effects;
+  measureDom;
+  needsUpdate = true;
+  computedStyle = { ...defaultTextStyles };
+  paragraphs = [];
+  lineBox = new BoundingBox();
+  rawGlyphBox = new BoundingBox();
+  glyphBox = new BoundingBox();
+  pathBox = new BoundingBox();
+  boundingBox = new BoundingBox();
+  measurer = new Measurer();
+  plugins = /* @__PURE__ */ new Map();
+  fonts;
+  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));
+  }
   constructor(options = {}) {
     super();
-    __publicField(this, "debug");
-    __publicField(this, "content");
-    __publicField(this, "style");
-    __publicField(this, "effects");
-    __publicField(this, "measureDom");
-    __publicField(this, "needsUpdate", true);
-    __publicField(this, "computedStyle", { ...defaultTextStyles });
-    __publicField(this, "paragraphs", []);
-    __publicField(this, "lineBox", new BoundingBox());
-    __publicField(this, "rawGlyphBox", new BoundingBox());
-    __publicField(this, "glyphBox", new BoundingBox());
-    __publicField(this, "pathBox", new BoundingBox());
-    __publicField(this, "boundingBox", new BoundingBox());
-    __publicField(this, "measurer", new Measurer());
-    __publicField(this, "plugins", /* @__PURE__ */ new Map());
-    __publicField(this, "fonts");
     this.debug = options.debug ?? false;
     this.content = options.content ?? "";
     this.style = options.style ?? {};
@@ -1569,15 +1554,7 @@ class Text extends EventEmitter {
     this.effects = options.effects;
     this.fonts = options.fonts;
     this.use(listStyle()).use(textDecoration()).use(highlight()).use(render());
-  }
-  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));
+    this.updateParagraphs();
   }
   use(plugin) {
     this.plugins.set(plugin.name, plugin);
@@ -1728,6 +1705,7 @@ class Text extends EventEmitter {
       this[key] = result[key];
     }
     this.emit("update", { text: this });
+    this.needsUpdate = false;
     return this;
   }
   render(options) {
@@ -1760,11 +1738,23 @@ class Text extends EventEmitter {
 }
 
 function measureText(options) {
-  return new Text(options).measure();
+  const text = new Text(options);
+  if (options.load) {
+    return text.load().then(() => {
+      return text.measure();
+    });
+  }
+  return text.measure();
 }
 
 function renderText(options) {
-  new Text(options).render(options);
+  const text = new Text(options);
+  if (options.load) {
+    return text.load().then(() => {
+      return text.render(options);
+    });
+  }
+  return text.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 };
+export { Character, Fragment, Measurer, Paragraph, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getHighlightStyle, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.7.3",
-  "packageManager": "pnpm@9.9.0",
+  "version": "0.7.4",
+  "packageManager": "pnpm@9.15.1",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
   "license": "MIT",
@@ -58,20 +58,20 @@
   },
   "dependencies": {
     "modern-font": "^0.3.4",
-    "modern-path2d": "^0.2.6"
+    "modern-path2d": "^0.2.9"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.7.3",
-    "@types/node": "^22.7.4",
-    "bumpp": "^9.6.1",
+    "@antfu/eslint-config": "^3.12.0",
+    "@types/node": "^22.10.2",
+    "bumpp": "^9.9.2",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^9.12.0",
-    "lint-staged": "^15.2.10",
+    "eslint": "^9.17.0",
+    "lint-staged": "^15.2.11",
     "simple-git-hooks": "^2.11.1",
-    "typescript": "^5.6.2",
-    "unbuild": "^2.0.0",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.2"
+    "typescript": "^5.7.2",
+    "unbuild": "^3.0.1",
+    "vite": "^6.0.5",
+    "vitest": "^2.1.8"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"