modern-text 1.3.1 → 1.3.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Path2D, BoundingBox, setCanvasContext, Path2DSet, Matrix3, svgToDOM, svgToPath2DSet, Vector2 } from 'modern-path2d';
+import { Path2D, BoundingBox, setCanvasContext, svgToDOM, svgToPath2DSet, Path2DSet, Matrix3, Vector2 } from 'modern-path2d';
 import { getDefaultStyle } from 'modern-idoc';
 import { fonts } from 'modern-font';
 
@@ -375,6 +375,49 @@ class Character {
   }
 }
 
+function createSVGLoader() {
+  const loaded = /* @__PURE__ */ new Map();
+  async function load(svg) {
+    if (!loaded.has(svg)) {
+      loaded.set(svg, svg);
+      try {
+        loaded.set(svg, await fetch(svg).then((rep) => rep.text()));
+      } catch (err) {
+        console.warn(err);
+        loaded.delete(svg);
+      }
+    }
+  }
+  function needsLoad(source) {
+    return source.startsWith("http://") || source.startsWith("https://") || source.startsWith("blob://");
+  }
+  return {
+    loaded,
+    needsLoad,
+    load
+  };
+}
+
+function createSVGParser(loader) {
+  const parsed = /* @__PURE__ */ new Map();
+  function parse(svg) {
+    let result = parsed.get(svg);
+    if (!result) {
+      const dom = svgToDOM(
+        loader.needsLoad(svg) ? loader.loaded.get(svg) ?? svg : svg
+      );
+      const pathSet = svgToPath2DSet(dom);
+      result = { dom, pathSet };
+      parsed.set(svg, result);
+    }
+    return result;
+  }
+  return {
+    parsed,
+    parse
+  };
+}
+
 function parseValueNumber(value, ctx) {
   if (typeof value === "number") {
     return value;
@@ -451,9 +494,6 @@ function filterEmpty(val) {
   }
   return res;
 }
-function needsFetch(source) {
-  return source.startsWith("http://") || source.startsWith("https://") || source.startsWith("blob://");
-}
 
 class Fragment {
   constructor(content, style = {}, parent) {
@@ -874,9 +914,64 @@ class EventEmitter {
 }
 
 function background() {
+  const pathSet = new Path2DSet();
+  const loader = createSVGLoader();
+  const parser = createSVGParser(loader);
   return {
-    name: "background"
-    // TODO
+    name: "background",
+    pathSet,
+    load: async (text) => {
+      const { backgroundImage } = text.style;
+      if (backgroundImage && loader.needsLoad(backgroundImage)) {
+        await loader.load(backgroundImage);
+      }
+    },
+    update: (text) => {
+      pathSet.paths.length = 0;
+      const { style, lineBox, isVertical } = text;
+      if (isNone(style.backgroundImage))
+        return;
+      const { pathSet: imagePathSet } = parser.parse(style.backgroundImage);
+      const imageBox = imagePathSet.getBoundingBox(true);
+      const transform = new Matrix3();
+      transform.translate(-imageBox.x, -imageBox.y);
+      if (isVertical) {
+        transform.scale(lineBox.height / imageBox.width, lineBox.width / imageBox.height);
+        const tx = lineBox.height / 2;
+        const ty = lineBox.width / 2;
+        transform.translate(-tx, -ty);
+        transform.rotate(-Math.PI / 2);
+        transform.translate(ty, tx);
+      } else {
+        transform.scale(lineBox.width / imageBox.width, lineBox.height / imageBox.height);
+      }
+      transform.translate(lineBox.x, lineBox.y);
+      imagePathSet.paths.forEach((originalPath) => {
+        pathSet.paths.push(
+          originalPath.clone().applyTransform(transform)
+        );
+      });
+    },
+    render: (ctx, text) => {
+      const { boundingBox, computedStyle: style } = text;
+      if (!isNone(style.backgroundColor)) {
+        ctx.fillStyle = style.backgroundColor;
+        ctx.fillRect(...boundingBox.array);
+      }
+      pathSet.paths.forEach((path) => {
+        drawPath({
+          ctx,
+          path,
+          fontSize: style.fontSize
+        });
+        if (text.debug) {
+          const box = new Path2DSet([path]).getBoundingBox();
+          if (box) {
+            ctx.strokeRect(box.x, box.y, box.width, box.height);
+          }
+        }
+      });
+    }
   };
 }
 
@@ -900,53 +995,30 @@ function getHighlightStyle(style) {
   };
 }
 function highlight() {
-  const paths = [];
+  const pathSet = new Path2DSet();
   const clipRects = [];
-  const loaded = /* @__PURE__ */ new Map();
-  const parsed = /* @__PURE__ */ new Map();
-  async function loadSvg(svg) {
-    if (!loaded.has(svg)) {
-      loaded.set(svg, svg);
-      try {
-        loaded.set(svg, await fetch(svg).then((rep) => rep.text()));
-      } catch (err) {
-        console.warn(err);
-        loaded.delete(svg);
-      }
-    }
-  }
-  function getPaths(svg) {
-    let result = parsed.get(svg);
-    if (!result) {
-      const dom = svgToDOM(
-        needsFetch(svg) ? loaded.get(svg) ?? svg : svg
-      );
-      const pathSet = svgToPath2DSet(dom);
-      result = { dom, pathSet };
-      parsed.set(svg, result);
-    }
-    return result;
-  }
+  const loader = createSVGLoader();
+  const parser = createSVGParser(loader);
   return definePlugin({
     name: "highlight",
-    paths,
+    pathSet,
     load: async (text) => {
       const set = /* @__PURE__ */ new Set();
       text.forEachCharacter((character) => {
         const { computedStyle: style } = character;
         const { image, referImage } = getHighlightStyle(style);
-        if (needsFetch(image)) {
+        if (loader.needsLoad(image)) {
           set.add(image);
         }
-        if (needsFetch(referImage)) {
+        if (loader.needsLoad(referImage)) {
           set.add(referImage);
         }
       });
-      await Promise.all(Array.from(set).map((src) => loadSvg(src)));
+      await Promise.all(Array.from(set).map((src) => loader.load(src)));
     },
     update: (text) => {
       clipRects.length = 0;
-      paths.length = 0;
+      pathSet.paths.length = 0;
       let groups = [];
       let group;
       let prevHighlight;
@@ -993,11 +1065,15 @@ function highlight() {
           ...characters.filter((c) => c.glyphBox).map((c) => c.glyphBox)
         );
         const {
-          computedStyle: style
+          computedStyle: style,
+          isVertical,
+          inlineBox,
+          glyphBox = inlineBox,
+          strikeoutPosition,
+          underlinePosition
         } = char;
         const {
-          fontSize,
-          writingMode
+          fontSize
         } = style;
         const {
           image,
@@ -1007,39 +1083,40 @@ function highlight() {
           size,
           thickness
         } = getHighlightStyle(style);
-        const isVertical = writingMode.includes("vertical");
         const _thickness = parseValueNumber(thickness, { fontSize, total: groupBox.width }) / groupBox.width;
         const _colormap = parseColormap(colormap);
-        const { pathSet: svgPathSet, dom: svgDom } = getPaths(image);
-        const aBox = svgPathSet.getBoundingBox(true);
-        const styleScale = fontSize / aBox.width * 2;
-        const cBox = new BoundingBox().copy(groupBox);
+        const { pathSet: imagePathSet, dom: imageDom } = parser.parse(image);
+        const imageBox = imagePathSet.getBoundingBox(true);
+        const styleScale = fontSize / imageBox.width * 2;
+        const targetBox = new BoundingBox().copy(groupBox);
         if (isVertical) {
-          cBox.width = groupBox.height;
-          cBox.height = groupBox.width;
-          cBox.left = groupBox.left + groupBox.width;
+          targetBox.width = groupBox.height;
+          targetBox.height = groupBox.width;
+          targetBox.left = groupBox.left + groupBox.width;
         }
-        const rawWidth = Math.floor(cBox.width);
+        const rawWidth = Math.floor(targetBox.width);
         let userWidth = rawWidth;
         if (size !== "cover") {
           userWidth = parseValueNumber(size, { fontSize, total: groupBox.width }) || rawWidth;
-          cBox.width = userWidth;
+          targetBox.width = userWidth;
         }
-        if (!isNone(referImage) && isNone(line)) {
-          const bBox = getPaths(referImage).pathSet.getBoundingBox(true);
-          aBox.copy(bBox);
+        const hasReferImage = !isNone(referImage) && isNone(line);
+        if (hasReferImage) {
+          imageBox.copy(
+            parser.parse(referImage).pathSet.getBoundingBox(true)
+          );
         } else {
           let _line;
           if (isNone(line)) {
-            if (aBox.width / aBox.height > 4) {
+            if (imageBox.width / imageBox.height > 4) {
               _line = "underline";
-              const viewBox = svgDom.getAttribute("viewBox");
+              const viewBox = imageDom.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) {
+                if (imageBox.y < viewCenter && imageBox.y + imageBox.height > viewCenter) {
                   _line = "line-through";
-                } else if (aBox.y + aBox.height < viewCenter) {
+                } else if (imageBox.y + imageBox.height < viewCenter) {
                   _line = "overline";
                 } else {
                   _line = "underline";
@@ -1053,89 +1130,95 @@ function highlight() {
           }
           switch (_line) {
             case "outline": {
-              const paddingX = cBox.width * 0.2;
-              const paddingY = cBox.height * 0.2;
-              cBox.width += paddingX;
-              cBox.height += paddingY;
+              const paddingX = targetBox.width * 0.2;
+              const paddingY = targetBox.height * 0.2;
               if (isVertical) {
-                cBox.x -= paddingY / 2;
-                cBox.y -= paddingX / 2;
-                cBox.x += cBox.height;
+                targetBox.x -= paddingY / 2;
+                targetBox.y -= paddingX / 2;
+                targetBox.x -= targetBox.height;
               } else {
-                cBox.x -= paddingX / 2;
-                cBox.y -= paddingY / 2;
+                targetBox.x -= paddingX / 2;
+                targetBox.y -= paddingY / 2;
               }
+              targetBox.width += paddingX;
+              targetBox.height += paddingY;
               break;
             }
             case "overline":
-              cBox.height = aBox.height * styleScale;
+              targetBox.height = imageBox.height * styleScale;
               if (isVertical) {
-                cBox.x = char.inlineBox.left + char.inlineBox.width;
+                targetBox.x = inlineBox.left + inlineBox.width;
               } else {
-                cBox.y = char.inlineBox.top;
+                targetBox.y = inlineBox.top;
               }
               break;
             case "line-through":
-              cBox.height = aBox.height * styleScale;
+              targetBox.height = imageBox.height * styleScale;
               if (isVertical) {
-                cBox.x = char.inlineBox.left + char.inlineBox.width - char.strikeoutPosition + cBox.height / 2;
+                targetBox.x = inlineBox.left + inlineBox.width - strikeoutPosition + targetBox.height / 2;
               } else {
-                cBox.y = char.inlineBox.top + char.strikeoutPosition - cBox.height / 2;
+                targetBox.y = inlineBox.top + strikeoutPosition - targetBox.height / 2;
               }
               break;
             case "underline":
-              cBox.height = aBox.height * styleScale;
+              targetBox.height = imageBox.height * styleScale;
               if (isVertical) {
-                cBox.x = char.inlineBox.left + char.inlineBox.width - char.underlinePosition;
+                targetBox.x = glyphBox.left + glyphBox.width - underlinePosition;
               } else {
-                cBox.y = char.inlineBox.top + char.underlinePosition;
+                targetBox.y = inlineBox.top + underlinePosition;
               }
               break;
           }
         }
-        const transform = new Matrix3().translate(-aBox.x, -aBox.y).scale(cBox.width / aBox.width, cBox.height / aBox.height);
+        const transform = new Matrix3();
+        transform.translate(-imageBox.x, -imageBox.y);
+        transform.scale(targetBox.width / imageBox.width, targetBox.height / imageBox.height);
         if (isVertical) {
+          const tx = targetBox.width / 2;
+          const ty = targetBox.height / 2;
+          if (!hasReferImage) {
+            transform.translate(-tx, -ty);
+          }
           transform.rotate(-Math.PI / 2);
+          if (!hasReferImage) {
+            transform.translate(ty, tx);
+          }
         }
-        transform.translate(cBox.x, cBox.y);
+        transform.translate(targetBox.x, targetBox.y);
         for (let i2 = 0; i2 < Math.ceil(rawWidth / userWidth); i2++) {
           const _transform = transform.clone();
           if (isVertical) {
-            _transform.translate(0, i2 * cBox.width);
+            _transform.translate(0, i2 * targetBox.width);
           } else {
-            _transform.translate(i2 * cBox.width, 0);
+            _transform.translate(i2 * targetBox.width, 0);
           }
-          svgPathSet.paths.forEach((originalPath) => {
+          imagePathSet.paths.forEach((originalPath) => {
             const path = originalPath.clone().applyTransform(_transform);
-            if (path.style.strokeWidth) {
+            if (path.style.strokeWidth)
               path.style.strokeWidth *= styleScale * _thickness;
-            }
-            if (path.style.strokeMiterlimit) {
+            if (path.style.strokeMiterlimit)
               path.style.strokeMiterlimit *= styleScale;
-            }
-            if (path.style.strokeDashoffset) {
+            if (path.style.strokeDashoffset)
               path.style.strokeDashoffset *= styleScale;
-            }
-            if (path.style.strokeDasharray) {
+            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.stroke && path.style.stroke in _colormap) {
               path.style.stroke = _colormap[path.style.stroke];
             }
-            paths.push(path);
+            pathSet.paths.push(path);
             if (rawWidth !== userWidth) {
               if (isVertical) {
-                clipRects[paths.length - 1] = new BoundingBox(
+                clipRects[pathSet.paths.length - 1] = new BoundingBox(
                   groupBox.left - groupBox.width * 2,
                   groupBox.top,
                   groupBox.width * 4,
                   groupBox.height
                 );
               } else {
-                clipRects[paths.length - 1] = new BoundingBox(
+                clipRects[pathSet.paths.length - 1] = new BoundingBox(
                   groupBox.left,
                   groupBox.top - groupBox.height * 2,
                   groupBox.width,
@@ -1148,8 +1231,24 @@ function highlight() {
       }
     },
     renderOrder: -1,
+    getBoundingBox: () => {
+      const boundingBoxs = [];
+      pathSet.paths.forEach((path, index) => {
+        const clipRect = clipRects[index];
+        let box = path.getBoundingBox();
+        if (clipRect) {
+          const x = Math.max(box.x, clipRect.x);
+          const y = Math.max(box.y, clipRect.y);
+          const right = Math.min(box.right, clipRect.right);
+          const bottom = Math.min(box.bottom, clipRect.bottom);
+          box = new BoundingBox(x, y, right - x, bottom - y);
+        }
+        boundingBoxs.push(box);
+      });
+      return BoundingBox.from(...boundingBoxs);
+    },
     render: (ctx, text) => {
-      paths.forEach((path, index) => {
+      pathSet.paths.forEach((path, index) => {
         drawPath({
           ctx,
           path,
@@ -1173,12 +1272,12 @@ function genDisc(r, color) {
 </svg>`;
 }
 function listStyle() {
-  const paths = [];
+  const pathSet = new Path2DSet();
   return definePlugin({
     name: "listStyle",
-    paths,
+    pathSet,
     update: (text) => {
-      paths.length = 0;
+      pathSet.paths.length = 0;
       const { paragraphs, isVertical, fontSize } = text;
       const padding = fontSize * 0.45;
       paragraphs.forEach((paragraph) => {
@@ -1232,7 +1331,7 @@ function listStyle() {
                   inlineBox.top + (inlineBox.height - imageBox.height * _scale) / 2
                 );
               }
-              paths.push(...imagePathSet.paths.map((p) => {
+              pathSet.paths.push(...imagePathSet.paths.map((p) => {
                 const path = p.clone();
                 path.applyTransform(m);
                 if (path.style.fill && path.style.fill in colormap) {
@@ -1295,39 +1394,21 @@ function render() {
       return boxes.length ? BoundingBox.from(...boxes) : void 0;
     },
     render: (ctx, text) => {
-      const { paragraphs, glyphBox, effects, style } = text;
-      function fillBackground(color, box) {
-        ctx.fillStyle = color;
-        ctx.fillRect(box.left, box.top, box.width, box.height);
-      }
-      if (style?.backgroundColor) {
-        fillBackground(style.backgroundColor, new BoundingBox(0, 0, ctx.canvas.width, ctx.canvas.height));
-      }
-      paragraphs.forEach((paragraph) => {
-        if (paragraph.style?.backgroundColor) {
-          fillBackground(paragraph.style.backgroundColor, paragraph.lineBox);
-        }
-      });
+      const { paragraphs, glyphBox, effects } = text;
       if (effects) {
-        effects.forEach((style2) => {
-          uploadColor(style2, glyphBox, ctx);
+        effects.forEach((style) => {
+          uploadColor(style, glyphBox, ctx);
           ctx.save();
-          const [a, c, e, b, d, f] = getTransform2D(text, style2).transpose().elements;
+          const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements;
           ctx.transform(a, b, c, d, e, f);
           text.forEachCharacter((character) => {
-            if (character.parent.style?.backgroundColor) {
-              fillBackground(character.parent.style.backgroundColor, character.inlineBox);
-            }
-            character.drawTo(ctx, style2);
+            character.drawTo(ctx, style);
           });
           ctx.restore();
         });
       } else {
         paragraphs.forEach((paragraph) => {
           paragraph.fragments.forEach((fragment) => {
-            if (fragment.style?.backgroundColor) {
-              fillBackground(fragment.computedStyle.backgroundColor, fragment.inlineBox);
-            }
             fragment.characters.forEach((character) => {
               character.drawTo(ctx);
             });
@@ -1365,12 +1446,12 @@ function getTransform2D(text, style) {
 }
 
 function textDecoration() {
-  const paths = [];
+  const pathSet = new Path2DSet();
   return definePlugin({
     name: "textDecoration",
-    paths,
+    pathSet,
     update: (text) => {
-      paths.length = 0;
+      pathSet.paths.length = 0;
       const groups = [];
       let group;
       let prevStyle;
@@ -1430,7 +1511,8 @@ function textDecoration() {
           color,
           textDecoration: textDecoration2
         } = style;
-        const { left, top, width, height } = BoundingBox.from(...group2.map((c) => c.inlineBox));
+        const inlineBox = BoundingBox.from(...group2.map((c) => c.inlineBox));
+        const { left, top, width, height } = inlineBox;
         let position = isVertical ? left + width : top;
         const direction = isVertical ? -1 : 1;
         let thickness = 0;
@@ -1470,7 +1552,7 @@ function textDecoration() {
             fill: color
           });
         }
-        paths.push(path);
+        pathSet.paths.push(path);
       });
     },
     render: (ctx, text) => {
@@ -1480,7 +1562,7 @@ function textDecoration() {
           ctx.save();
           const [a, c, e, b, d, f] = getTransform2D(text, effectStyle).transpose().elements;
           ctx.transform(a, b, c, d, e, f);
-          paths.forEach((path) => {
+          pathSet.paths.forEach((path) => {
             drawPath({
               ctx,
               path,
@@ -1491,7 +1573,7 @@ function textDecoration() {
           ctx.restore();
         });
       } else {
-        paths.forEach((path) => {
+        pathSet.paths.forEach((path) => {
           drawPath({
             ctx,
             path,
@@ -1661,22 +1743,16 @@ class Text extends EventEmitter {
     this.pathBox = BoundingBox.from(
       this.glyphBox,
       ...Array.from(this.plugins.values()).map((plugin) => {
-        return plugin.getBoundingBox ? plugin.getBoundingBox(this) : new Path2DSet(plugin.paths ?? []).getBoundingBox();
+        return plugin.getBoundingBox ? plugin.getBoundingBox(this) : plugin.pathSet?.getBoundingBox();
       }).filter(Boolean)
     );
     return this;
   }
   updateBoundingBox() {
-    const { lineBox, rawGlyphBox, pathBox } = this;
-    const left = Math.min(pathBox.left, pathBox.left + lineBox.left - rawGlyphBox.left);
-    const top = Math.min(pathBox.top, pathBox.top + lineBox.top - rawGlyphBox.top);
-    const right = Math.max(pathBox.right, pathBox.right + lineBox.right - rawGlyphBox.right);
-    const bottom = Math.max(pathBox.bottom, pathBox.bottom + lineBox.bottom - rawGlyphBox.bottom);
-    this.boundingBox = new BoundingBox(
-      left,
-      top,
-      right - left,
-      bottom - top
+    this.boundingBox = BoundingBox.from(
+      this.rawGlyphBox,
+      this.lineBox,
+      this.pathBox
     );
     return this;
   }
@@ -1707,9 +1783,9 @@ class Text extends EventEmitter {
     Array.from(this.plugins.values()).sort((a, b) => (a.renderOrder ?? 0) - (b.renderOrder ?? 0)).forEach((plugin) => {
       if (plugin.render) {
         plugin.render?.(ctx, this);
-      } else if (plugin.paths) {
+      } else if (plugin.pathSet) {
         const style = this.computedStyle;
-        plugin.paths.forEach((path) => {
+        plugin.pathSet.paths.forEach((path) => {
           drawPath({
             ctx,
             path,
@@ -1742,4 +1818,4 @@ function renderText(options, load) {
   return text.render(options);
 }
 
-export { Character, Fragment, Measurer, Paragraph, Text, background, definePlugin, drawPath, filterEmpty, getHighlightStyle, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, outline, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, textDefaultStyle, uploadColor, uploadColors };
+export { Character, Fragment, Measurer, Paragraph, Text, background, createSVGLoader, createSVGParser, definePlugin, drawPath, filterEmpty, getHighlightStyle, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, outline, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, textDefaultStyle, uploadColor, uploadColors };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "packageManager": "pnpm@9.15.1",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -57,22 +57,22 @@
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
-    "modern-font": "^0.4.0",
-    "modern-idoc": "^0.2.11",
-    "modern-path2d": "^1.2.10"
+    "modern-font": "^0.4.1",
+    "modern-idoc": "^0.2.13",
+    "modern-path2d": "^1.2.18"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.8.1",
-    "@types/node": "^22.13.10",
-    "bumpp": "^10.0.3",
+    "@antfu/eslint-config": "^4.11.0",
+    "@types/node": "^22.13.14",
+    "bumpp": "^10.1.0",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^9.22.0",
-    "lint-staged": "^15.4.3",
-    "simple-git-hooks": "^2.11.1",
+    "eslint": "^9.23.0",
+    "lint-staged": "^15.5.0",
+    "simple-git-hooks": "^2.12.1",
     "typescript": "^5.8.2",
     "unbuild": "^3.5.0",
-    "vite": "^6.2.1",
-    "vitest": "^3.0.8"
+    "vite": "^6.2.3",
+    "vitest": "^3.0.9"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"