modern-text 0.5.2 → 0.5.4

package/dist/index.mjs

@@ -51,7 +51,7 @@ function parseCssLinearGradient(css, x, y, width, height) {
 }
 
 function drawPath(options) {
-  const { ctx, path, fontSize, clipRect } = options;
+  const { ctx, path, fontSize } = options;
   ctx.save();
   ctx.beginPath();
   const pathStyle = path.style;
@@ -65,11 +65,6 @@ function drawPath(options) {
     shadowBlur: (options.shadowBlur ?? 0) * fontSize,
     shadowColor: options.shadowColor
   };
-  if (clipRect) {
-    ctx.rect(clipRect.left, clipRect.top, clipRect.width, clipRect.height);
-    ctx.clip();
-    ctx.beginPath();
-  }
   path.drawTo(ctx, style);
   ctx.restore();
 }
@@ -351,6 +346,40 @@ class Character {
   }
 }
 
+function parseValueNumber(value, ctx) {
+  if (typeof value === "number") {
+    return value;
+  } else {
+    if (value.endsWith("%")) {
+      value = value.substring(0, value.length - 1);
+      return Math.ceil(Number(value) / 100 * ctx.total);
+    } else if (value.endsWith("rem")) {
+      value = value.substring(0, value.length - 3);
+      return Number(value) * ctx.fontSize;
+    } else if (value.endsWith("em")) {
+      value = value.substring(0, value.length - 2);
+      return Number(value) * ctx.fontSize;
+    } else {
+      return Number(value);
+    }
+  }
+}
+function parseColormap(colormap) {
+  const _colormap = isNone(colormap) ? {} : colormap;
+  return Object.keys(_colormap).reduce((obj, key) => {
+    let value = _colormap[key];
+    const keyRgb = hexToRgb(key);
+    const valueRgb = hexToRgb(value);
+    if (keyRgb) {
+      key = keyRgb;
+    }
+    if (valueRgb) {
+      value = valueRgb;
+    }
+    obj[key] = value;
+    return obj;
+  }, {});
+}
 function isNone(val) {
   return !val || val === "none";
 }
@@ -358,7 +387,18 @@ function isEqualObject(obj1, obj2) {
   const keys1 = Object.keys(obj1);
   const keys2 = Object.keys(obj2);
   const keys = Array.from(/* @__PURE__ */ new Set([...keys1, ...keys2]));
-  return keys.every((key) => obj1[key] === obj2[key]);
+  return keys.every((key) => isEqualValue(obj1[key], obj2[key]));
+}
+function isEqualValue(val1, val2) {
+  const typeof1 = typeof val1;
+  const typeof2 = typeof val2;
+  if (typeof1 === typeof2) {
+    if (typeof1 === "object") {
+      return isEqualObject(val1, val2);
+    }
+    return val1 === val2;
+  }
+  return false;
 }
 function hexToRgb(hex) {
   const cleanHex = hex.startsWith("#") ? hex.slice(1) : hex;
@@ -382,6 +422,30 @@ function filterEmpty(val) {
   }
   return res;
 }
+function closestDivisor(dividend, targetDivisor) {
+  if (dividend <= 0) {
+    throw new Error("Dividend must be a positive integer.");
+  }
+  const divisors = [];
+  for (let i = 1; i <= Math.sqrt(dividend); i++) {
+    if (dividend % i === 0) {
+      divisors.push(i);
+      if (i !== dividend / i) {
+        divisors.push(dividend / i);
+      }
+    }
+  }
+  let closest = divisors[0];
+  let minDifference = Math.abs(closest - targetDivisor);
+  for (const divisor of divisors) {
+    const difference = Math.abs(divisor - targetDivisor);
+    if (difference < minDifference) {
+      closest = divisor;
+      minDifference = difference;
+    }
+  }
+  return closest;
+}
 
 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;
@@ -653,39 +717,8 @@ class Measurer {
   }
 }
 
-function parseCharsPerRepeat(size, fontSize, total) {
-  if (size === "cover") {
-    return 0;
-  } else if (typeof size === "string") {
-    if (size.endsWith("%")) {
-      const rate = Number(size.substring(0, size.length - 1)) / 100;
-      return Math.ceil(rate * total / fontSize);
-    } else if (size.endsWith("rem")) {
-      return Number(size.substring(0, size.length - 3));
-    } else {
-      return Math.ceil(Number(size) / fontSize);
-    }
-  } else {
-    return Math.ceil(size / fontSize);
-  }
-}
-function parseThickness(thickness, fontSize, total) {
-  if (typeof thickness === "string") {
-    if (thickness.endsWith("%")) {
-      return Number(thickness.substring(0, thickness.length - 1)) / 100;
-    } else if (thickness.endsWith("rem")) {
-      const value = Number(thickness.substring(0, thickness.length - 3));
-      return value * fontSize / total;
-    } else {
-      return Number(thickness) / total;
-    }
-  } else {
-    return thickness / total;
-  }
-}
 function highlight() {
   const paths = [];
-  const clipRects = [];
   const svgStringToSvgPaths = /* @__PURE__ */ new Map();
   function getPaths(svg) {
     let result = svgStringToSvgPaths.get(svg);
@@ -708,7 +741,7 @@ function highlight() {
       text.forEachCharacter((character) => {
         const { isVertical, computedStyle: style, inlineBox, fontSize } = character;
         if (!isNone(style.highlightImage) && character.glyphBox) {
-          if (style.highlightSize !== "1rem" && (!prevStyle || prevStyle.highlightImage === style.highlightImage && isEqualObject(prevStyle.highlightImageColors, style.highlightImageColors) && prevStyle.highlightLine === style.highlightLine && prevStyle.highlightSize === style.highlightSize && prevStyle.highlightThickness === style.highlightThickness && prevStyle.highlightOverflow === style.highlightOverflow) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
+          if (style.highlightSize !== "1rem" && (!prevStyle || isEqualValue(prevStyle.highlightImage, style.highlightImage) && isEqualValue(prevStyle.highlightColormap, style.highlightColormap) && isEqualValue(prevStyle.highlightLine, style.highlightLine) && isEqualValue(prevStyle.highlightSize, style.highlightSize) && isEqualValue(prevStyle.highlightThickness, style.highlightThickness)) && group?.length && (isVertical ? group[0].inlineBox.left === inlineBox.left : group[0].inlineBox.top === inlineBox.top) && group[0].fontSize === fontSize) {
             group.push(character);
           } else {
             group = [];
@@ -718,120 +751,119 @@ function highlight() {
         }
         prevStyle = style;
       });
-      groups.filter((characters) => characters.length).map((characters) => {
+      groups.filter((characters) => characters.length).forEach((characters) => {
         const char = characters[0];
-        return {
-          char,
-          groupBox: BoundingBox.from(...characters.map((c) => c.glyphBox))
-        };
-      }).forEach((group2) => {
-        const { char, groupBox } = group2;
+        const groupBox = BoundingBox.from(...characters.map((c) => c.glyphBox));
         const { computedStyle: style } = char;
         const {
           fontSize,
           writingMode,
-          highlightThickness,
-          highlightSize,
-          highlightLine,
-          highlightOverflow,
           highlightImage,
-          highlightImageColors
+          highlightReferImage,
+          highlightColormap,
+          highlightLine,
+          highlightSize,
+          highlightThickness
         } = style;
         const isVertical = writingMode.includes("vertical");
-        const thickness = parseThickness(highlightThickness, fontSize, groupBox.width);
-        const charsPerRepeat = parseCharsPerRepeat(highlightSize, fontSize, groupBox.width);
-        const overflow = isNone(highlightOverflow) ? charsPerRepeat ? "hidden" : "visible" : highlightOverflow;
-        const colors = Object.keys(highlightImageColors).reduce((obj, key) => {
-          let value = highlightImageColors[key];
-          const keyRgb = hexToRgb(key);
-          const valueRgb = hexToRgb(value);
-          if (keyRgb) {
-            key = keyRgb;
-          }
-          if (valueRgb) {
-            value = valueRgb;
-          }
-          obj[key] = value;
-          return obj;
-        }, {});
+        const thickness = parseValueNumber(highlightThickness, { fontSize, total: groupBox.width }) / groupBox.width;
+        const colormap = parseColormap(highlightColormap);
         const { paths: svgPaths, dom: svgDom } = getPaths(highlightImage);
         const aBox = getPathsBoundingBox(svgPaths, true);
         const styleScale = fontSize / aBox.width * 2;
         const cBox = new BoundingBox().copy(groupBox);
-        cBox.width = charsPerRepeat ? fontSize * charsPerRepeat : isVertical ? groupBox.height : groupBox.width;
-        cBox.height = isVertical ? groupBox.width : groupBox.height;
-        const width = isVertical ? cBox.height : cBox.width;
-        let line;
-        if (isNone(highlightLine)) {
-          if (aBox.width / aBox.height > 4) {
-            line = "underline";
-            const viewBox = svgDom.getAttribute("viewBox");
-            if (viewBox) {
-              const aCenter = aBox.y + aBox.height / 2;
-              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";
-              } else if (viewCenter > aCenter) {
-                line = "overline";
-              } else {
-                line = "underline";
+        if (isVertical) {
+          cBox.width = groupBox.height;
+          cBox.height = groupBox.width;
+          cBox.left = groupBox.left + groupBox.width;
+        }
+        const rawWidth = Math.floor(cBox.width);
+        let userWidth = rawWidth;
+        if (highlightSize !== "cover") {
+          userWidth = parseValueNumber(highlightSize, { fontSize, total: groupBox.width });
+          userWidth = closestDivisor(rawWidth, userWidth);
+          cBox.width = userWidth;
+        }
+        if (!isNone(highlightReferImage) && isNone(highlightLine)) {
+          const bBox = getPathsBoundingBox(getPaths(highlightReferImage).paths, true);
+          aBox.copy(bBox);
+        } else {
+          let line;
+          if (isNone(highlightLine)) {
+            if (aBox.width / aBox.height > 4) {
+              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";
+                } else if (aBox.y + aBox.height < viewCenter) {
+                  line = "overline";
+                } else {
+                  line = "underline";
+                }
               }
+            } else {
+              line = "outline";
             }
           } else {
-            line = "outline";
+            line = highlightLine;
           }
-        } else {
-          line = highlightLine;
-        }
-        switch (line) {
-          case "outline": {
-            const paddingX = cBox.width * 0.2;
-            const paddingY = cBox.height * 0.2;
-            cBox.width += paddingX;
-            cBox.height += paddingY;
-            if (isVertical) {
-              cBox.x -= paddingY / 2;
-              cBox.y -= paddingX / 2;
-              cBox.x += cBox.height;
-            } else {
-              cBox.x -= paddingX / 2;
-              cBox.y -= paddingY / 2;
+          switch (line) {
+            case "outline": {
+              const paddingX = cBox.width * 0.2;
+              const paddingY = cBox.height * 0.2;
+              cBox.width += paddingX;
+              cBox.height += paddingY;
+              if (isVertical) {
+                cBox.x -= paddingY / 2;
+                cBox.y -= paddingX / 2;
+                cBox.x += cBox.height;
+              } else {
+                cBox.x -= paddingX / 2;
+                cBox.y -= paddingY / 2;
+              }
+              break;
             }
-            break;
+            case "overline":
+              cBox.height = aBox.height * styleScale;
+              if (isVertical) {
+                cBox.x = char.inlineBox.left + char.inlineBox.width;
+              } else {
+                cBox.y = char.inlineBox.top;
+              }
+              break;
+            case "line-through":
+              cBox.height = aBox.height * styleScale;
+              if (isVertical) {
+                cBox.x = char.inlineBox.left + char.inlineBox.width - char.strikeoutPosition + cBox.height / 2;
+              } else {
+                cBox.y = char.inlineBox.top + char.strikeoutPosition - cBox.height / 2;
+              }
+              break;
+            case "underline":
+              cBox.height = aBox.height * styleScale;
+              if (isVertical) {
+                cBox.x = char.inlineBox.left + char.inlineBox.width - char.underlinePosition;
+              } else {
+                cBox.y = char.inlineBox.top + char.underlinePosition;
+              }
+              break;
           }
-          case "overline":
-            cBox.height = aBox.height * styleScale;
-            if (isVertical) {
-              cBox.x = char.inlineBox.left + char.inlineBox.width;
-            } else {
-              cBox.y = char.inlineBox.top;
-            }
-            break;
-          case "line-through":
-            cBox.height = aBox.height * styleScale;
-            if (isVertical) {
-              cBox.x = char.inlineBox.left + char.inlineBox.width - char.strikeoutPosition + cBox.height / 2;
-            } else {
-              cBox.y = char.inlineBox.top + char.strikeoutPosition - cBox.height / 2;
-            }
-            break;
-          case "underline":
-            cBox.height = aBox.height * styleScale;
-            if (isVertical) {
-              cBox.x = char.inlineBox.left + char.inlineBox.width - char.underlinePosition;
-            } else {
-              cBox.y = char.inlineBox.top + char.underlinePosition;
-            }
-            break;
         }
         const transform = new Matrix3().translate(-aBox.x, -aBox.y).scale(cBox.width / aBox.width, cBox.height / aBox.height);
         if (isVertical) {
           transform.rotate(-Math.PI / 2);
         }
         transform.translate(cBox.x, cBox.y);
-        for (let i = 0, len = Math.ceil(groupBox.width / width); i < len; i++) {
-          const _transform = transform.clone().translate(i * width, 0);
+        for (let i = 0, len = rawWidth / userWidth; i < len; i++) {
+          const _transform = transform.clone();
+          if (isVertical) {
+            _transform.translate(0, i * cBox.width);
+          } else {
+            _transform.translate(i * cBox.width, 0);
+          }
           svgPaths.forEach((originalPath) => {
             const path = originalPath.clone().matrix(_transform);
             if (path.style.strokeWidth) {
@@ -846,30 +878,23 @@ function highlight() {
             if (path.style.strokeDasharray) {
               path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * styleScale);
             }
-            if (path.style.fill && path.style.fill in colors) {
-              path.style.fill = colors[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 colors) {
-              path.style.stroke = colors[path.style.stroke];
+            if (path.style.stroke && path.style.stroke in colormap) {
+              path.style.stroke = colormap[path.style.stroke];
             }
             paths.push(path);
-            clipRects[paths.length - 1] = overflow === "hidden" ? new BoundingBox(
-              groupBox.left,
-              groupBox.top - groupBox.height,
-              groupBox.width,
-              groupBox.height * 3
-            ) : void 0;
           });
         }
       });
     },
     renderOrder: -1,
     render: (ctx, text) => {
-      paths.forEach((path, index) => {
+      paths.forEach((path) => {
         drawPath({
           ctx,
           path,
-          clipRect: clipRects[index],
           fontSize: text.computedStyle.fontSize
         });
         if (text.debug) {
@@ -883,22 +908,6 @@ function highlight() {
   });
 }
 
-function parseScale(size, fontSize, total) {
-  if (size === "cover") {
-    return 1;
-  } else if (typeof size === "string") {
-    if (size.endsWith("%")) {
-      return Number(size.substring(0, size.length - 1)) / 100;
-    } else if (size.endsWith("rem")) {
-      const value = Number(size.substring(0, size.length - 3));
-      return value * fontSize / total;
-    } else {
-      return Number(size) / total;
-    }
-  } else {
-    return size / total;
-  }
-}
 function listStyle() {
   const paths = [];
   return definePlugin({
@@ -910,20 +919,8 @@ function listStyle() {
       const padding = fontSize * 0.45;
       paragraphs.forEach((paragraph) => {
         const { computedStyle: style } = paragraph;
-        const { listStyleImage, listStyleImageColors, listStyleSize, listStyleType, color } = style;
-        const colors = Object.keys(listStyleImageColors).reduce((obj, key) => {
-          let value = listStyleImageColors[key];
-          const keyRgb = hexToRgb(key);
-          const valueRgb = hexToRgb(value);
-          if (keyRgb) {
-            key = keyRgb;
-          }
-          if (valueRgb) {
-            value = valueRgb;
-          }
-          obj[key] = value;
-          return obj;
-        }, {});
+        const { listStyleImage, listStyleColormap, listStyleSize, listStyleType, color } = style;
+        const colormap = parseColormap(listStyleColormap);
         let size = listStyleSize;
         let image;
         if (!isNone(listStyleImage)) {
@@ -947,9 +944,9 @@ function listStyle() {
         const box = paragraph.lineBox;
         const fBox = paragraph.fragments[0].inlineBox;
         if (fBox) {
+          const scale = size === "cover" ? 1 : parseValueNumber(size, { total: fontSize, fontSize }) / fontSize;
           const m = new Matrix3();
           if (isVertical) {
-            const scale = parseScale(size, fontSize, fontSize);
             const reScale = fontSize / imageBox.height * scale;
             m.translate(-imageBox.left, -imageBox.top);
             m.rotate(Math.PI / 2);
@@ -957,7 +954,6 @@ function listStyle() {
             m.translate(fontSize / 2 - imageBox.height * reScale / 2, 0);
             m.translate(box.left + (box.width - fontSize) / 2, fBox.top - padding);
           } else {
-            const scale = parseScale(size, fontSize, fontSize);
             const reScale = fontSize / imageBox.height * scale;
             m.translate(-imageBox.left, -imageBox.top);
             m.translate(-imageBox.width, 0);
@@ -968,11 +964,11 @@ function listStyle() {
           paths.push(...imagePaths.map((p) => {
             const path = p.clone();
             path.matrix(m);
-            if (path.style.fill && path.style.fill in colors) {
-              path.style.fill = colors[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 colors) {
-              path.style.stroke = colors[path.style.stroke];
+            if (path.style.stroke && path.style.stroke in colormap) {
+              path.style.stroke = colormap[path.style.stroke];
             }
             return path;
           }));
@@ -1237,16 +1233,16 @@ const defaultTextStyles = {
   // listStyle
   listStyleType: "none",
   listStyleImage: "none",
-  listStyleImageColors: {},
+  listStyleColormap: "none",
   listStyleSize: "cover",
   listStylePosition: "outside",
   // highlight
   highlightImage: "none",
-  highlightImageColors: {},
+  highlightReferImage: "none",
+  highlightColormap: "none",
   highlightLine: "none",
   highlightSize: "cover",
   highlightThickness: "100%",
-  highlightOverflow: "none",
   // shadow
   shadowColor: "rgba(0, 0, 0, 0)",
   shadowOffsetX: 0,
@@ -1478,4 +1474,4 @@ function renderText(options) {
   return new Text(options).render(options);
 }
 
-export { Character, Fragment, Measurer, Paragraph, Text, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isNone, listStyle, measureText, parseColor, render, renderText, setupView, textDecoration, uploadColor, uploadColors };
+export { Character, Fragment, Measurer, Paragraph, Text, closestDivisor, defaultTextStyles, definePlugin, drawPath, filterEmpty, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, uploadColor, uploadColors };

package/package.json

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