modern-text 1.9.1 → 1.10.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { T as Text } from './shared/modern-text.B2pcGP3X.mjs';
-export { C as Character, F as Fragment, M as Measurer, P as Paragraph, c as backgroundPlugin, i as createSVGLoader, j as createSVGParser, b as definePlugin, d as drawPath, w as filterEmpty, g as getHighlightStyle, e as getTransform2D, v as hexToRgb, h as highlightPlugin, n as isEqualObject, q as isEqualValue, l as listStylePlugin, o as outlinePlugin, p as parseColor, m as parseColormap, k as parseValueNumber, r as renderPlugin, s as setupView, t as textDecorationPlugin, f as textDefaultStyle, u as uploadColor, a as uploadColors } from './shared/modern-text.B2pcGP3X.mjs';
+import { T as Text } from './shared/modern-text.BD1kUWDw.mjs';
+export { C as Canvas2DRenderer, a as Character, F as Fragment, M as Measurer, P as Paragraph, b as backgroundPlugin, f as createSvgLoader, i as createSvgParser, d as definePlugin, q as filterEmpty, g as getHighlightStyle, c as getTransform2D, n as hexToRgb, h as highlightPlugin, k as isEqualObject, m as isEqualValue, l as listStylePlugin, o as outlinePlugin, j as parseColormap, p as parseValueNumber, r as renderPlugin, t as textDecorationPlugin, e as textDefaultStyle } from './shared/modern-text.BD1kUWDw.mjs';
 import 'modern-idoc';
 import 'modern-path2d';
 import 'modern-font';

package/dist/shared/{modern-text.B2pcGP3X.mjs → modern-text.BD1kUWDw.mjs}

@@ -1,107 +1,176 @@
-import { isNone, getDefaultStyle, Reactivable, normalizeText, property } from 'modern-idoc';
-import { Path2D, BoundingBox, setCanvasContext, svgToDom, svgToPath2DSet, Path2DSet, Vector2, Matrix3 } from 'modern-path2d';
+import { isGradient, parseGradient, isNone, getDefaultStyle, Reactivable, normalizeText, property } from 'modern-idoc';
+import { setCanvasContext, Path2D, BoundingBox, svgToDom, svgToPath2DSet, Path2DSet, Vector2, Matrix3 } from 'modern-path2d';
 import { fonts } from '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" && isGradient(source)) {
+      const gradient = 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;
+      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"]);
@@ -361,46 +430,9 @@ class Character {
     const { min, max } = minMax;
     return new 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
-      };
-      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)) {
@@ -423,7 +455,7 @@ function createSVGLoader() {
   };
 }
 
-function createSVGParser(loader) {
+function createSvgParser(loader) {
   const parsed = /* @__PURE__ */ new Map();
   function parse(svg) {
     let result = parsed.get(svg);
@@ -851,8 +883,8 @@ class Measurer {
 
 function backgroundPlugin() {
   const pathSet = new Path2DSet();
-  const loader = createSVGLoader();
-  const parser = createSVGParser(loader);
+  const loader = createSvgLoader();
+  const parser = createSvgParser(loader);
   return {
     name: "background",
     pathSet,
@@ -932,32 +964,33 @@ function backgroundPlugin() {
       pathSet.paths.push(...paths);
     },
     renderOrder: -2,
-    render: (ctx, text) => {
+    render: (renderer) => {
+      const { text, context } = renderer;
       const { boundingBox, computedStyle: style } = text;
       if (!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 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 (!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 (!isNone(style3.backgroundColor)) {
-            ctx.fillStyle = style3.backgroundColor;
-            ctx.fillRect(...inlineBox.array);
+            context.fillStyle = style3.backgroundColor;
+            context.fillRect(...inlineBox.array);
           }
         });
       });
@@ -987,8 +1020,8 @@ function getHighlightStyle(style) {
 function highlightPlugin() {
   const pathSet = new Path2DSet();
   const clipRects = [];
-  const loader = createSVGLoader();
-  const parser = createSVGParser(loader);
+  const loader = createSvgLoader();
+  const parser = createSvgParser(loader);
   return definePlugin({
     name: "highlight",
     pathSet,
@@ -1231,18 +1264,14 @@ function highlightPlugin() {
       });
       return 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 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);
           }
         }
       });
@@ -1357,10 +1386,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;
           }
@@ -1386,31 +1415,37 @@ function renderPlugin() {
       });
       return boxes.length ? 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
+          );
         });
       }
     }
@@ -1544,30 +1579,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);
         });
       }
     }
@@ -1587,6 +1614,7 @@ const textDefaultStyle = getDefaultStyle();
 class Text extends Reactivable {
   needsUpdate = true;
   computedStyle = { ...textDefaultStyle };
+  computedEffects = [];
   paragraphs = [];
   lineBox = new BoundingBox();
   rawGlyphBox = new BoundingBox();
@@ -1631,7 +1659,7 @@ class Text extends Reactivable {
     (options.plugins ?? []).forEach((plugin) => {
       this.use(plugin);
     });
-    this.updateParagraphs();
+    this._update();
   }
   use(plugin) {
     this.plugins.set(plugin.name, plugin);
@@ -1650,8 +1678,9 @@ class Text extends 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) => {
@@ -1674,7 +1703,7 @@ class Text extends Reactivable {
     return this;
   }
   createDom() {
-    this.updateParagraphs();
+    this._update();
     return this.measurer.createDom(this.paragraphs, this.computedStyle);
   }
   measure(dom = this.measureDom) {
@@ -1686,7 +1715,7 @@ class Text extends 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;
@@ -1704,7 +1733,7 @@ class Text extends Reactivable {
       }
     });
     this.glyphBox = this.getGlyphBox();
-    this.updatePathBox().updateBoundingBox();
+    this._updatePathBox()._updateBoundingBox();
     for (const key in old) {
       result[key] = this[key];
       this[key] = old[key];
@@ -1732,7 +1761,7 @@ class Text extends Reactivable {
       max.y - min.y
     );
   }
-  updatePathBox() {
+  _updatePathBox() {
     this.pathBox = BoundingBox.from(
       this.glyphBox,
       ...Array.from(this.plugins.values()).map((plugin) => {
@@ -1741,7 +1770,7 @@ class Text extends Reactivable {
     );
     return this;
   }
-  updateBoundingBox() {
+  _updateBoundingBox() {
     this.boundingBox = BoundingBox.from(
       this.rawGlyphBox,
       this.lineBox,
@@ -1771,19 +1800,15 @@ class Text extends 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);
         });
       }
     });
@@ -1819,4 +1844,4 @@ __decorateClass([
   property({ internal: true })
 ], Text.prototype, "fonts");
 
-export { Character as C, Fragment as F, Measurer as M, Paragraph as P, Text as T, uploadColors as a, definePlugin as b, backgroundPlugin as c, drawPath as d, getTransform2D as e, textDefaultStyle as f, getHighlightStyle as g, highlightPlugin as h, createSVGLoader as i, createSVGParser as j, parseValueNumber as k, listStylePlugin as l, parseColormap as m, isEqualObject as n, outlinePlugin as o, parseColor as p, isEqualValue as q, renderPlugin as r, setupView as s, textDecorationPlugin as t, uploadColor as u, hexToRgb as v, filterEmpty as w };
+export { Canvas2DRenderer as C, Fragment as F, Measurer as M, Paragraph as P, Text as T, Character as a, backgroundPlugin as b, getTransform2D as c, definePlugin as d, textDefaultStyle as e, createSvgLoader as f, getHighlightStyle as g, highlightPlugin as h, createSvgParser as i, parseColormap as j, isEqualObject as k, listStylePlugin as l, isEqualValue as m, hexToRgb as n, outlinePlugin as o, parseValueNumber as p, filterEmpty as q, renderPlugin as r, textDecorationPlugin as t };