modern-text 1.9.1 → 1.10.0

package/dist/shared/{modern-text.BmTeQ51D.cjs → modern-text.BUyl2x8m.cjs}

@@ -4,106 +4,175 @@ const modernIdoc = require('modern-idoc');
 const modernPath2d = require('modern-path2d');
 const modernFont = require('modern-font');
 
-function parseColor(ctx, source, box) {
-  if (typeof source === "string" && source.startsWith("linear-gradient")) {
-    const { x0, y0, x1, y1, stops } = parseCssLinearGradient(source, box.left, box.top, box.width, box.height);
-    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-    stops.forEach((stop) => gradient.addColorStop(stop.offset, stop.color));
-    return gradient;
+class Canvas2DRenderer {
+  constructor(text, context) {
+    this.text = text;
+    this.context = context;
   }
-  return source;
-}
-function uploadColor(style, box, ctx) {
-  if (style?.color) {
-    style.color = parseColor(ctx, style.color, box);
-  }
-  if (style?.backgroundColor) {
-    style.backgroundColor = parseColor(ctx, style.backgroundColor, box);
-  }
-  if (style?.textStrokeColor) {
-    style.textStrokeColor = parseColor(ctx, style.textStrokeColor, box);
-  }
-}
-function parseCssLinearGradient(css, x, y, width, height) {
-  const str = css.match(/linear-gradient\((.+)\)$/)?.[1] ?? "";
-  const first = str.split(",")[0];
-  const cssDeg = first.includes("deg") ? first : "0deg";
-  const matched = str.replace(cssDeg, "").matchAll(/(#|rgba|rgb)(.+?) ([\d.]+%)/gi);
-  const deg = Number(cssDeg.replace("deg", "")) || 0;
-  const rad = deg * Math.PI / 180;
-  const offsetX = width * Math.sin(rad);
-  const offsetY = height * Math.cos(rad);
-  return {
-    x0: x + width / 2 - offsetX,
-    y0: y + height / 2 + offsetY,
-    x1: x + width / 2 + offsetX,
-    y1: y + height / 2 - offsetY,
-    stops: Array.from(matched).map((res) => {
-      let color = res[2];
-      if (color.startsWith("(")) {
-        color = color.split(",").length > 3 ? `rgba${color}` : `rgb${color}`;
-      } else {
-        color = `#${color}`;
+  pixelRatio = window?.devicePixelRatio || 1;
+  _setupView = () => {
+    const pixelRatio = this.pixelRatio;
+    const ctx = this.context;
+    const { left, top, width, height } = this.text.boundingBox;
+    const view = ctx.canvas;
+    view.dataset.viewBox = String(`${left} ${top} ${width} ${height}`);
+    view.dataset.pixelRatio = String(pixelRatio);
+    const canvasWidth = width;
+    const canvasHeight = height;
+    view.width = Math.max(1, Math.ceil(canvasWidth * pixelRatio));
+    view.height = Math.max(1, Math.ceil(canvasHeight * pixelRatio));
+    view.style.width = `${canvasWidth}px`;
+    view.style.height = `${canvasHeight}px`;
+    ctx.clearRect(0, 0, view.width, view.height);
+    ctx.scale(pixelRatio, pixelRatio);
+    ctx.translate(-left, -top);
+  };
+  _setupColors = () => {
+    const { paragraphs, computedStyle, glyphBox } = this.text;
+    this.uploadColor(computedStyle, glyphBox);
+    paragraphs.forEach((paragraph) => {
+      this.uploadColor(paragraph.computedStyle, paragraph.lineBox);
+      paragraph.fragments.forEach((fragment) => {
+        this.uploadColor(fragment.computedStyle, fragment.inlineBox);
+      });
+    });
+  };
+  setup = () => {
+    this._setupView();
+    this._setupColors();
+    return this;
+  };
+  _parseColor = (source, box) => {
+    if (typeof source === "string" && modernIdoc.isGradient(source)) {
+      const gradient = modernIdoc.parseGradient(source)[0];
+      if (gradient) {
+        switch (gradient.type) {
+          case "linear-gradient": {
+            let deg = 0;
+            if (gradient.orientation) {
+              switch (gradient.orientation.type) {
+                case "angular":
+                  deg = Number(gradient.orientation.value);
+                  break;
+              }
+            }
+            const { left, top, width, height } = box;
+            const rad = deg * Math.PI / 180;
+            const offsetX = width * Math.sin(rad);
+            const offsetY = height * Math.cos(rad);
+            const canvasGradient = this.context.createLinearGradient(
+              left + width / 2 - offsetX,
+              top + height / 2 + offsetY,
+              left + width / 2 + offsetX,
+              top + height / 2 - offsetY
+            );
+            gradient.colorStops.forEach((colorStop) => {
+              let offset = 0;
+              if (colorStop.length) {
+                switch (colorStop.length.type) {
+                  case "%":
+                    offset = Number(colorStop.length.value) / 100;
+                    break;
+                }
+              }
+              switch (colorStop.type) {
+                case "rgb":
+                  canvasGradient.addColorStop(offset, `rgb(${colorStop.value.join(", ")})`);
+                  break;
+                case "rgba":
+                  canvasGradient.addColorStop(offset, `rgba(${colorStop.value.join(", ")})`);
+                  break;
+              }
+            });
+            return canvasGradient;
+          }
+        }
       }
-      return {
-        offset: Number(res[3].replace("%", "")) / 100,
-        color
-      };
-    })
+    }
+    return source;
   };
-}
-
-function drawPath(options) {
-  const { ctx, path, fontSize, clipRect } = options;
-  ctx.save();
-  ctx.beginPath();
-  const pathStyle = path.style;
-  const style = {
-    ...pathStyle,
-    fill: options.color ?? pathStyle.fill,
-    stroke: options.textStrokeColor ?? pathStyle.stroke,
-    strokeWidth: options.textStrokeWidth ? options.textStrokeWidth * fontSize : pathStyle.strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    shadowOffsetX: (options.shadowOffsetX ?? 0) * fontSize,
-    shadowOffsetY: (options.shadowOffsetY ?? 0) * fontSize,
-    shadowBlur: (options.shadowBlur ?? 0) * fontSize,
-    shadowColor: options.shadowColor
+  _uploadedStyles = [
+    "color",
+    "backgroundColor",
+    "textStrokeColor"
+  ];
+  uploadColor = (style, box) => {
+    this._uploadedStyles.forEach((key) => {
+      style[key] = this._parseColor(style[key], box);
+    });
   };
-  if (clipRect) {
-    ctx.rect(clipRect.left, clipRect.top, clipRect.width, clipRect.height);
-    ctx.clip();
+  drawPath = (path, options = {}) => {
+    const ctx = this.context;
+    const {
+      fontSize = this.text.computedStyle.fontSize,
+      clipRect
+    } = options;
+    ctx.save();
     ctx.beginPath();
-  }
-  path.drawTo(ctx, style);
-  ctx.restore();
-}
-
-function setupView(ctx, pixelRatio, boundingBox) {
-  const { left, top, width, height } = boundingBox;
-  const view = ctx.canvas;
-  view.dataset.viewBox = String(`${left} ${top} ${width} ${height}`);
-  view.dataset.pixelRatio = String(pixelRatio);
-  const canvasWidth = width;
-  const canvasHeight = height;
-  view.width = Math.max(1, Math.ceil(canvasWidth * pixelRatio));
-  view.height = Math.max(1, Math.ceil(canvasHeight * pixelRatio));
-  view.style.width = `${canvasWidth}px`;
-  view.style.height = `${canvasHeight}px`;
-  ctx.clearRect(0, 0, view.width, view.height);
-  ctx.scale(pixelRatio, pixelRatio);
-  ctx.translate(-left, -top);
-}
-
-function uploadColors(ctx, text) {
-  const { paragraphs, computedStyle: style, glyphBox } = text;
-  uploadColor(style, glyphBox, ctx);
-  paragraphs.forEach((paragraph) => {
-    uploadColor(paragraph.computedStyle, paragraph.lineBox, ctx);
-    paragraph.fragments.forEach((fragment) => {
-      uploadColor(fragment.computedStyle, fragment.inlineBox, ctx);
+    if (clipRect) {
+      ctx.rect(clipRect.left, clipRect.top, clipRect.width, clipRect.height);
+      ctx.clip();
+      ctx.beginPath();
+    }
+    const pathStyle = path.style;
+    const stroke = options.textStrokeColor ?? pathStyle.stroke;
+    const strokeWidth = options.textStrokeWidth ? options.textStrokeWidth * fontSize : pathStyle.strokeWidth;
+    path.drawTo(ctx, {
+      ...pathStyle,
+      fill: options.color ?? pathStyle.fill,
+      stroke: strokeWidth === void 0 || strokeWidth > 0 ? stroke : void 0,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      shadowOffsetX: (options.shadowOffsetX ?? 0) * fontSize,
+      shadowOffsetY: (options.shadowOffsetY ?? 0) * fontSize,
+      shadowBlur: (options.shadowBlur ?? 0) * fontSize,
+      shadowColor: options.shadowColor
     });
-  });
+    ctx.restore();
+  };
+  drawCharacter = (character, userStyle = {}) => {
+    const ctx = this.context;
+    const {
+      computedStyle,
+      path,
+      glyphBox,
+      isVertical,
+      content,
+      inlineBox,
+      baseline
+    } = character;
+    const style = {
+      ...computedStyle,
+      ...userStyle
+    };
+    if (glyphBox) {
+      this.drawPath(path, style);
+    } else {
+      ctx.save();
+      ctx.beginPath();
+      const pathStyle = path.style;
+      modernPath2d.setCanvasContext(ctx, {
+        ...pathStyle,
+        fill: style.color ?? pathStyle.fill,
+        stroke: style.textStrokeColor ?? pathStyle.stroke,
+        strokeWidth: style.textStrokeWidth ? style.textStrokeWidth * style.fontSize : pathStyle.strokeWidth,
+        shadowOffsetX: (style.shadowOffsetX ?? 0) * style.fontSize,
+        shadowOffsetY: (style.shadowOffsetY ?? 0) * style.fontSize,
+        shadowBlur: (style.shadowBlur ?? 0) * style.fontSize,
+        shadowColor: style.shadowColor
+      });
+      ctx.font = `${style.fontSize}px ${style.fontFamily}`;
+      if (isVertical) {
+        ctx.textBaseline = "middle";
+        ctx.fillText(content, inlineBox.left, inlineBox.top + inlineBox.height / 2);
+      } else {
+        ctx.textBaseline = "alphabetic";
+        ctx.fillText(content, inlineBox.left, inlineBox.top + baseline);
+      }
+      ctx.restore();
+    }
+  };
 }
 
 const set1 = /* @__PURE__ */ new Set(["\xA9", "\xAE", "\xF7"]);
@@ -363,46 +432,9 @@ class Character {
     const { min, max } = minMax;
     return new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
-  drawTo(ctx, config = {}) {
-    const style = this.computedStyle;
-    const options = {
-      ctx,
-      path: this.path,
-      fontSize: style.fontSize,
-      color: style.color,
-      ...config
-    };
-    if (this.glyphBox) {
-      drawPath(options);
-    } else {
-      ctx.save();
-      ctx.beginPath();
-      const pathStyle = this.path.style;
-      const _style = {
-        ...pathStyle,
-        fill: options.color ?? pathStyle.fill,
-        stroke: options.textStrokeColor ?? pathStyle.stroke,
-        strokeWidth: options.textStrokeWidth ? options.textStrokeWidth * options.fontSize : pathStyle.strokeWidth,
-        shadowOffsetX: (options.shadowOffsetX ?? 0) * options.fontSize,
-        shadowOffsetY: (options.shadowOffsetY ?? 0) * options.fontSize,
-        shadowBlur: (options.shadowBlur ?? 0) * options.fontSize,
-        shadowColor: options.shadowColor
-      };
-      modernPath2d.setCanvasContext(ctx, _style);
-      ctx.font = `${options.fontSize}px ${options.fontFamily}`;
-      if (this.isVertical) {
-        ctx.textBaseline = "middle";
-        ctx.fillText(this.content, this.inlineBox.left, this.inlineBox.top + this.inlineBox.height / 2);
-      } else {
-        ctx.textBaseline = "alphabetic";
-        ctx.fillText(this.content, this.inlineBox.left, this.inlineBox.top + this.baseline);
-      }
-      ctx.restore();
-    }
-  }
 }
 
-function createSVGLoader() {
+function createSvgLoader() {
   const loaded = /* @__PURE__ */ new Map();
   async function load(svg) {
     if (!loaded.has(svg)) {
@@ -425,7 +457,7 @@ function createSVGLoader() {
   };
 }
 
-function createSVGParser(loader) {
+function createSvgParser(loader) {
   const parsed = /* @__PURE__ */ new Map();
   function parse(svg) {
     let result = parsed.get(svg);
@@ -853,8 +885,8 @@ class Measurer {
 
 function backgroundPlugin() {
   const pathSet = new modernPath2d.Path2DSet();
-  const loader = createSVGLoader();
-  const parser = createSVGParser(loader);
+  const loader = createSvgLoader();
+  const parser = createSvgParser(loader);
   return {
     name: "background",
     pathSet,
@@ -934,32 +966,33 @@ function backgroundPlugin() {
       pathSet.paths.push(...paths);
     },
     renderOrder: -2,
-    render: (ctx, text) => {
+    render: (renderer) => {
+      const { text, context } = renderer;
       const { boundingBox, computedStyle: style } = text;
       if (!modernIdoc.isNone(style.backgroundColor)) {
-        ctx.fillStyle = style.backgroundColor;
-        ctx.fillRect(...boundingBox.array);
+        context.fillStyle = style.backgroundColor;
+        context.fillRect(...boundingBox.array);
       }
       pathSet.paths.forEach((path) => {
-        drawPath({ ctx, path, fontSize: style.fontSize });
+        renderer.drawPath(path);
         if (text.debug) {
           const box = new modernPath2d.Path2DSet([path]).getBoundingBox();
           if (box) {
-            ctx.strokeRect(box.x, box.y, box.width, box.height);
+            context.strokeRect(box.x, box.y, box.width, box.height);
           }
         }
       });
       text.paragraphs.forEach((p) => {
         const { lineBox, style: style2 } = p;
         if (!modernIdoc.isNone(style2.backgroundColor)) {
-          ctx.fillStyle = style2.backgroundColor;
-          ctx.fillRect(...lineBox.array);
+          context.fillStyle = style2.backgroundColor;
+          context.fillRect(...lineBox.array);
         }
         p.fragments.forEach((f) => {
           const { inlineBox, style: style3 } = f;
           if (!modernIdoc.isNone(style3.backgroundColor)) {
-            ctx.fillStyle = style3.backgroundColor;
-            ctx.fillRect(...inlineBox.array);
+            context.fillStyle = style3.backgroundColor;
+            context.fillRect(...inlineBox.array);
           }
         });
       });
@@ -989,8 +1022,8 @@ function getHighlightStyle(style) {
 function highlightPlugin() {
   const pathSet = new modernPath2d.Path2DSet();
   const clipRects = [];
-  const loader = createSVGLoader();
-  const parser = createSVGParser(loader);
+  const loader = createSvgLoader();
+  const parser = createSvgParser(loader);
   return definePlugin({
     name: "highlight",
     pathSet,
@@ -1233,18 +1266,14 @@ function highlightPlugin() {
       });
       return modernPath2d.BoundingBox.from(...boundingBoxs);
     },
-    render: (ctx, text) => {
+    render: (renderer) => {
+      const { text, context } = renderer;
       pathSet.paths.forEach((path, index) => {
-        drawPath({
-          ctx,
-          path,
-          fontSize: text.computedStyle.fontSize,
-          clipRect: clipRects[index]
-        });
+        renderer.drawPath(path, { clipRect: clipRects[index] });
         if (text.debug) {
           const box = new modernPath2d.Path2DSet([path]).getBoundingBox();
           if (box) {
-            ctx.strokeRect(box.x, box.y, box.width, box.height);
+            context.strokeRect(box.x, box.y, box.width, box.height);
           }
         }
       });
@@ -1359,10 +1388,10 @@ function renderPlugin() {
       });
     },
     getBoundingBox: (text) => {
-      const { characters, fontSize, effects } = text;
+      const { characters, fontSize, computedEffects } = text;
       const boxes = [];
       characters.forEach((character) => {
-        effects?.forEach((style) => {
+        computedEffects.forEach((style) => {
           if (!character.glyphBox) {
             return;
           }
@@ -1388,31 +1417,37 @@ function renderPlugin() {
       });
       return boxes.length ? modernPath2d.BoundingBox.from(...boxes) : void 0;
     },
-    render: (ctx, text) => {
-      const { paragraphs, glyphBox, effects } = text;
-      if (effects) {
-        effects.forEach((style) => {
-          uploadColor(style, glyphBox, ctx);
-          ctx.save();
+    render: (renderer) => {
+      const { text, context } = renderer;
+      const { paragraphs, glyphBox, computedEffects } = text;
+      if (computedEffects.length) {
+        computedEffects.forEach((style) => {
+          renderer.uploadColor(style, glyphBox);
+          context.save();
           const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements;
-          ctx.transform(a, b, c, d, e, f);
+          context.transform(a, b, c, d, e, f);
           text.forEachCharacter((character) => {
-            character.drawTo(ctx, style);
+            renderer.drawCharacter(character, style);
           });
-          ctx.restore();
+          context.restore();
         });
       } else {
         paragraphs.forEach((paragraph) => {
           paragraph.fragments.forEach((fragment) => {
             fragment.characters.forEach((character) => {
-              character.drawTo(ctx);
+              renderer.drawCharacter(character);
             });
           });
         });
       }
       if (text.debug) {
         paragraphs.forEach((paragraph) => {
-          ctx.strokeRect(paragraph.lineBox.x, paragraph.lineBox.y, paragraph.lineBox.width, paragraph.lineBox.height);
+          context.strokeRect(
+            paragraph.lineBox.x,
+            paragraph.lineBox.y,
+            paragraph.lineBox.width,
+            paragraph.lineBox.height
+          );
         });
       }
     }
@@ -1546,30 +1581,22 @@ function textDecorationPlugin() {
         pathSet.paths.push(path);
       });
     },
-    render: (ctx, text) => {
-      const { effects, computedStyle: style } = text;
-      if (effects) {
-        effects.forEach((effectStyle) => {
-          ctx.save();
+    render: (renderer) => {
+      const { text, context } = renderer;
+      const { computedEffects } = text;
+      if (computedEffects.length) {
+        computedEffects.forEach((effectStyle) => {
+          context.save();
           const [a, c, e, b, d, f] = getTransform2D(text, effectStyle).transpose().elements;
-          ctx.transform(a, b, c, d, e, f);
+          context.transform(a, b, c, d, e, f);
           pathSet.paths.forEach((path) => {
-            drawPath({
-              ctx,
-              path,
-              fontSize: style.fontSize,
-              ...effectStyle
-            });
+            renderer.drawPath(path, effectStyle);
           });
-          ctx.restore();
+          context.restore();
         });
       } else {
         pathSet.paths.forEach((path) => {
-          drawPath({
-            ctx,
-            path,
-            fontSize: style.fontSize
-          });
+          renderer.drawPath(path);
         });
       }
     }
@@ -1589,6 +1616,7 @@ const textDefaultStyle = modernIdoc.getDefaultStyle();
 class Text extends modernIdoc.Reactivable {
   needsUpdate = true;
   computedStyle = { ...textDefaultStyle };
+  computedEffects = [];
   paragraphs = [];
   lineBox = new modernPath2d.BoundingBox();
   rawGlyphBox = new modernPath2d.BoundingBox();
@@ -1633,7 +1661,7 @@ class Text extends modernIdoc.Reactivable {
     (options.plugins ?? []).forEach((plugin) => {
       this.use(plugin);
     });
-    this.updateParagraphs();
+    this._update();
   }
   use(plugin) {
     this.plugins.set(plugin.name, plugin);
@@ -1652,8 +1680,9 @@ class Text extends modernIdoc.Reactivable {
   async load() {
     await Promise.all(Array.from(this.plugins.values()).map((p) => p.load?.(this)));
   }
-  updateParagraphs() {
+  _update() {
     this.computedStyle = { ...textDefaultStyle, ...this.style };
+    this.computedEffects = this.effects?.map((v) => ({ ...v })) ?? [];
     const { content } = this;
     const paragraphs = [];
     content.forEach((p, pIndex) => {
@@ -1676,7 +1705,7 @@ class Text extends modernIdoc.Reactivable {
     return this;
   }
   createDom() {
-    this.updateParagraphs();
+    this._update();
     return this.measurer.createDom(this.paragraphs, this.computedStyle);
   }
   measure(dom = this.measureDom) {
@@ -1688,7 +1717,7 @@ class Text extends modernIdoc.Reactivable {
       pathBox: this.pathBox,
       boundingBox: this.boundingBox
     };
-    this.updateParagraphs();
+    this._update();
     const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom);
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
@@ -1706,7 +1735,7 @@ class Text extends modernIdoc.Reactivable {
       }
     });
     this.glyphBox = this.getGlyphBox();
-    this.updatePathBox().updateBoundingBox();
+    this._updatePathBox()._updateBoundingBox();
     for (const key in old) {
       result[key] = this[key];
       this[key] = old[key];
@@ -1734,7 +1763,7 @@ class Text extends modernIdoc.Reactivable {
       max.y - min.y
     );
   }
-  updatePathBox() {
+  _updatePathBox() {
     this.pathBox = modernPath2d.BoundingBox.from(
       this.glyphBox,
       ...Array.from(this.plugins.values()).map((plugin) => {
@@ -1743,7 +1772,7 @@ class Text extends modernIdoc.Reactivable {
     );
     return this;
   }
-  updateBoundingBox() {
+  _updateBoundingBox() {
     this.boundingBox = modernPath2d.BoundingBox.from(
       this.rawGlyphBox,
       this.lineBox,
@@ -1773,19 +1802,15 @@ class Text extends modernIdoc.Reactivable {
     if (this.needsUpdate) {
       this.update();
     }
-    setupView(ctx, pixelRatio, this.boundingBox);
-    uploadColors(ctx, this);
+    const renderer = new Canvas2DRenderer(this, ctx);
+    renderer.pixelRatio = pixelRatio;
+    renderer.setup();
     Array.from(this.plugins.values()).sort((a, b) => (a.renderOrder ?? 0) - (b.renderOrder ?? 0)).forEach((plugin) => {
       if (plugin.render) {
-        plugin.render?.(ctx, this);
+        plugin.render?.(renderer);
       } else if (plugin.pathSet) {
-        const style = this.computedStyle;
         plugin.pathSet.paths.forEach((path) => {
-          drawPath({
-            ctx,
-            path,
-            fontSize: style.fontSize
-          });
+          renderer.drawPath(path);
         });
       }
     });
@@ -1821,16 +1846,16 @@ __decorateClass([
   modernIdoc.property({ internal: true })
 ], Text.prototype, "fonts");
 
+exports.Canvas2DRenderer = Canvas2DRenderer;
 exports.Character = Character;
 exports.Fragment = Fragment;
 exports.Measurer = Measurer;
 exports.Paragraph = Paragraph;
 exports.Text = Text;
 exports.backgroundPlugin = backgroundPlugin;
-exports.createSVGLoader = createSVGLoader;
-exports.createSVGParser = createSVGParser;
+exports.createSvgLoader = createSvgLoader;
+exports.createSvgParser = createSvgParser;
 exports.definePlugin = definePlugin;
-exports.drawPath = drawPath;
 exports.filterEmpty = filterEmpty;
 exports.getHighlightStyle = getHighlightStyle;
 exports.getTransform2D = getTransform2D;
@@ -1840,12 +1865,8 @@ exports.isEqualObject = isEqualObject;
 exports.isEqualValue = isEqualValue;
 exports.listStylePlugin = listStylePlugin;
 exports.outlinePlugin = outlinePlugin;
-exports.parseColor = parseColor;
 exports.parseColormap = parseColormap;
 exports.parseValueNumber = parseValueNumber;
 exports.renderPlugin = renderPlugin;
-exports.setupView = setupView;
 exports.textDecorationPlugin = textDecorationPlugin;
 exports.textDefaultStyle = textDefaultStyle;
-exports.uploadColor = uploadColor;
-exports.uploadColors = uploadColors;