modern-text 1.3.1 → 1.3.2

package/README.md

@@ -21,29 +21,32 @@
 ## Usage
 
 ```ts
+import { fonts } from 'modern-font'
 import { renderText } from 'modern-text'
 
-const view = document.createElement('canvas')
-document.body.append(view)
+fonts.loadFallbackFont('/fallback.woff').then(() => {
+  const view = document.createElement('canvas')
+  document.body.append(view)
 
-renderText({
-  view,
-  style: {
-    width: 100,
-    height: 200,
-    fontSize: 22,
-    textDecoration: 'underline',
-  },
-  content: [
-    {
-      letterSpacing: 3,
-      fragments: [
-        { content: 'He', color: 'red', fontSize: 12 },
-        { content: 'llo', color: 'black' },
-      ],
+  renderText({
+    view,
+    style: {
+      width: 100,
+      height: 200,
+      fontSize: 22,
+      textDecoration: 'underline',
     },
-    { content: ', ', color: 'grey' },
-    { content: 'World!', color: 'black' },
-  ],
+    content: [
+      {
+        letterSpacing: 3,
+        fragments: [
+          { content: 'He', color: 'red', fontSize: 12 },
+          { content: 'llo', color: 'black' },
+        ],
+      },
+      { content: ', ', color: 'grey' },
+      { content: 'World!', color: 'black' },
+    ],
+  })
 })
 ```

package/dist/index.cjs

@@ -377,6 +377,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 = modernPath2d.svgToDOM(
+        loader.needsLoad(svg) ? loader.loaded.get(svg) ?? svg : svg
+      );
+      const pathSet = modernPath2d.svgToPath2DSet(dom);
+      result = { dom, pathSet };
+      parsed.set(svg, result);
+    }
+    return result;
+  }
+  return {
+    parsed,
+    parse
+  };
+}
+
 function parseValueNumber(value, ctx) {
   if (typeof value === "number") {
     return value;
@@ -453,9 +496,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) {
@@ -876,9 +916,64 @@ class EventEmitter {
 }
 
 function background() {
+  const pathSet = new modernPath2d.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 modernPath2d.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 modernPath2d.Path2DSet([path]).getBoundingBox();
+          if (box) {
+            ctx.strokeRect(box.x, box.y, box.width, box.height);
+          }
+        }
+      });
+    }
   };
 }
 
@@ -902,53 +997,30 @@ function getHighlightStyle(style) {
   };
 }
 function highlight() {
-  const paths = [];
+  const pathSet = new modernPath2d.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 = modernPath2d.svgToDOM(
-        needsFetch(svg) ? loaded.get(svg) ?? svg : svg
-      );
-      const pathSet = modernPath2d.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;
@@ -995,11 +1067,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,
@@ -1009,39 +1085,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 modernPath2d.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 modernPath2d.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";
@@ -1055,89 +1132,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 modernPath2d.Matrix3().translate(-aBox.x, -aBox.y).scale(cBox.width / aBox.width, cBox.height / aBox.height);
+        const transform = new modernPath2d.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 modernPath2d.BoundingBox(
+                clipRects[pathSet.paths.length - 1] = new modernPath2d.BoundingBox(
                   groupBox.left - groupBox.width * 2,
                   groupBox.top,
                   groupBox.width * 4,
                   groupBox.height
                 );
               } else {
-                clipRects[paths.length - 1] = new modernPath2d.BoundingBox(
+                clipRects[pathSet.paths.length - 1] = new modernPath2d.BoundingBox(
                   groupBox.left,
                   groupBox.top - groupBox.height * 2,
                   groupBox.width,
@@ -1150,8 +1233,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 modernPath2d.BoundingBox(x, y, right - x, bottom - y);
+        }
+        boundingBoxs.push(box);
+      });
+      return modernPath2d.BoundingBox.from(...boundingBoxs);
+    },
     render: (ctx, text) => {
-      paths.forEach((path, index) => {
+      pathSet.paths.forEach((path, index) => {
         drawPath({
           ctx,
           path,
@@ -1175,12 +1274,12 @@ function genDisc(r, color) {
 </svg>`;
 }
 function listStyle() {
-  const paths = [];
+  const pathSet = new modernPath2d.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) => {
@@ -1234,7 +1333,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) {
@@ -1297,39 +1396,21 @@ function render() {
       return boxes.length ? modernPath2d.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 modernPath2d.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);
             });
@@ -1367,12 +1448,12 @@ function getTransform2D(text, style) {
 }
 
 function textDecoration() {
-  const paths = [];
+  const pathSet = new modernPath2d.Path2DSet();
   return definePlugin({
     name: "textDecoration",
-    paths,
+    pathSet,
     update: (text) => {
-      paths.length = 0;
+      pathSet.paths.length = 0;
       const groups = [];
       let group;
       let prevStyle;
@@ -1432,7 +1513,8 @@ function textDecoration() {
           color,
           textDecoration: textDecoration2
         } = style;
-        const { left, top, width, height } = modernPath2d.BoundingBox.from(...group2.map((c) => c.inlineBox));
+        const inlineBox = modernPath2d.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;
@@ -1472,7 +1554,7 @@ function textDecoration() {
             fill: color
           });
         }
-        paths.push(path);
+        pathSet.paths.push(path);
       });
     },
     render: (ctx, text) => {
@@ -1482,7 +1564,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,
@@ -1493,7 +1575,7 @@ function textDecoration() {
           ctx.restore();
         });
       } else {
-        paths.forEach((path) => {
+        pathSet.paths.forEach((path) => {
           drawPath({
             ctx,
             path,
@@ -1663,22 +1745,16 @@ class Text extends EventEmitter {
     this.pathBox = modernPath2d.BoundingBox.from(
       this.glyphBox,
       ...Array.from(this.plugins.values()).map((plugin) => {
-        return plugin.getBoundingBox ? plugin.getBoundingBox(this) : new modernPath2d.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 modernPath2d.BoundingBox(
-      left,
-      top,
-      right - left,
-      bottom - top
+    this.boundingBox = modernPath2d.BoundingBox.from(
+      this.rawGlyphBox,
+      this.lineBox,
+      this.pathBox
     );
     return this;
   }
@@ -1709,9 +1785,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,
@@ -1750,6 +1826,8 @@ exports.Measurer = Measurer;
 exports.Paragraph = Paragraph;
 exports.Text = Text;
 exports.background = background;
+exports.createSVGLoader = createSVGLoader;
+exports.createSVGParser = createSVGParser;
 exports.definePlugin = definePlugin;
 exports.drawPath = drawPath;
 exports.filterEmpty = filterEmpty;
@@ -1762,7 +1840,6 @@ exports.isEqualValue = isEqualValue;
 exports.isNone = isNone;
 exports.listStyle = listStyle;
 exports.measureText = measureText;
-exports.needsFetch = needsFetch;
 exports.outline = outline;
 exports.parseColor = parseColor;
 exports.parseColormap = parseColormap;