@effing/canvas 0.19.2 → 0.19.3

package/dist/index.js

@@ -266,8 +266,7 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     processedText = text.replace(/\b\w/g, (c) => c.toUpperCase());
   }
   const noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
-  const preserveWhitespace = whiteSpace === "pre" || whiteSpace === "pre-wrap";
-  const paragraphs = preserveWhitespace ? processedText.split("\n") : processedText.split("\n");
+  const paragraphs = processedText.split("\n");
   const lines = [];
   for (const paragraph of paragraphs) {
     if (noWrap) {
@@ -738,10 +737,30 @@ async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
   }
 }
 
+// src/jsx/draw/utils.ts
+function parseCSSLength(value, referenceSize) {
+  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
+  return parseFloat(value);
+}
+function toNumber(v) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const n = parseFloat(String(v));
+  return isNaN(n) ? 0 : n;
+}
+function resolveBoxValue(v, referenceWidth) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const s = String(v);
+  if (s.endsWith("%")) return parseFloat(s) / 100 * referenceWidth;
+  const n = parseFloat(s);
+  return isNaN(n) ? 0 : n;
+}
+
 // src/jsx/draw/rect.ts
 function drawRect(ctx, x, y, width, height, style) {
-  const borderRadius = getBorderRadius(style, width, height);
-  const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+  const borderRadius = getBorderRadiusFromStyle(style, width, height);
+  const hasRoundedCorners = hasRadius(borderRadius);
   if (style.boxShadow) {
     drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
   }
@@ -771,7 +790,7 @@ function resolveRadius(v, width, height) {
   if (typeof v === "string") return parseCSSLength(v, Math.min(width, height));
   return toNumber(v);
 }
-function getBorderRadius(style, width, height) {
+function getBorderRadiusFromStyle(style, width, height) {
   return {
     topLeft: resolveRadius(style.borderTopLeftRadius, width, height),
     topRight: resolveRadius(style.borderTopRightRadius, width, height),
@@ -779,11 +798,8 @@ function getBorderRadius(style, width, height) {
     bottomLeft: resolveRadius(style.borderBottomLeftRadius, width, height)
   };
 }
-function getBorderRadiusFromStyle(style, width, height) {
-  return getBorderRadius(style, width, height);
-}
 function drawBorders(ctx, x, y, width, height, style, borderRadius) {
-  const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+  const hasRoundedCorners = hasRadius(borderRadius);
   const tw = resolveBoxValue(style.borderTopWidth, width);
   const rw = resolveBoxValue(style.borderRightWidth, width);
   const bw = resolveBoxValue(style.borderBottomWidth, width);
@@ -1573,25 +1589,22 @@ function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
   const runs = [];
   const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
   let currentText = "";
+  let currentGraphemeCount = 0;
   let currentX = 0;
   let textStartX = 0;
   for (const { segment } of segmenter.segment(text)) {
     if (isEmojiGrapheme(segment)) {
       if (currentText) {
         const textWidth = measureText2(currentText);
-        const graphemeCount = [
-          ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
-            currentText
-          )
-        ].length;
         runs.push({
           kind: "text",
           text: currentText,
           x: textStartX,
-          width: textWidth + letterSpacing * graphemeCount
+          width: textWidth + letterSpacing * currentGraphemeCount
         });
-        currentX = textStartX + textWidth + letterSpacing * graphemeCount;
+        currentX = textStartX + textWidth + letterSpacing * currentGraphemeCount;
         currentText = "";
+        currentGraphemeCount = 0;
       }
       runs.push({
         kind: "emoji",
@@ -1604,20 +1617,16 @@ function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
     } else {
       if (!currentText) textStartX = currentX;
       currentText += segment;
+      currentGraphemeCount++;
     }
   }
   if (currentText) {
     const textWidth = measureText2(currentText);
-    const graphemeCount = [
-      ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
-        currentText
-      )
-    ].length;
     runs.push({
       kind: "text",
       text: currentText,
       x: textStartX,
-      width: textWidth + letterSpacing * graphemeCount
+      width: textWidth + letterSpacing * currentGraphemeCount
     });
   }
   return runs;
@@ -1680,15 +1689,12 @@ async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
   );
   for (const run of runs) {
     if (run.kind === "text") {
+      if (textShadow) {
+        drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+      }
       if (letterSpacing !== 0) {
-        if (textShadow) {
-          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
-        }
         drawTextWithLetterSpacing(ctx, run.text, x + run.x, y, letterSpacing);
       } else {
-        if (textShadow) {
-          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
-        }
         ctx.fillText(run.text, x + run.x, y);
       }
     } else {
@@ -1803,7 +1809,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
       const [offscreen, offCtx] = acquireOffscreen(bufW, bufH);
       offCtx.save();
       offCtx.scale(qx, qy);
-      await drawNodeInner(
+      await drawNodeCore(
         offCtx,
         node,
         parentX,
@@ -1845,182 +1851,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
       return;
     }
   }
-  ctx.save();
-  if (opacity < 1) {
-    ctx.globalAlpha *= opacity;
-  }
-  if (style.filter) {
-    ctx.filter = style.filter;
-  }
-  if (style.transform) {
-    applyTransform(
-      ctx,
-      style.transform,
-      x,
-      y,
-      width,
-      height,
-      style.transformOrigin
-    );
-  }
-  const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
-  if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style, width, height);
-    applyClip(ctx, x, y, width, height, borderRadius);
-  }
-  if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
-    drawRect(ctx, x, y, width, height, style);
-  }
-  if (style.backgroundImage) {
-    const layers = splitGradientArgs(style.backgroundImage);
-    for (let i = layers.length - 1; i >= 0; i--) {
-      const layer = layers[i].trim();
-      const gradient = createGradientFromCSS(ctx, layer, x, y, width, height);
-      if (gradient) {
-        ctx.fillStyle = gradient;
-        const borderRadius = getBorderRadiusFromStyle(style, width, height);
-        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-          ctx.beginPath();
-          roundedRect(
-            ctx,
-            x,
-            y,
-            width,
-            height,
-            borderRadius.topLeft,
-            borderRadius.topRight,
-            borderRadius.bottomRight,
-            borderRadius.bottomLeft
-          );
-          ctx.fill();
-        } else {
-          ctx.fillRect(x, y, width, height);
-        }
-      } else {
-        const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
-        if (urlMatch) {
-          const borderRadius = getBorderRadiusFromStyle(style, width, height);
-          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-          if (hasRadius2) {
-            applyClip(ctx, x, y, width, height, borderRadius);
-          }
-          const image = await loadImage3(urlMatch[1]);
-          const bgSize = style.backgroundSize;
-          if (bgSize === "cover") {
-            const r = computeCover(
-              image.width,
-              image.height,
-              x,
-              y,
-              width,
-              height
-            );
-            ctx.drawImage(
-              image,
-              r.sx,
-              r.sy,
-              r.sw,
-              r.sh,
-              r.dx,
-              r.dy,
-              r.dw,
-              r.dh
-            );
-          } else {
-            let tileW, tileH;
-            if (bgSize === "contain") {
-              const r = computeContain(
-                image.width,
-                image.height,
-                0,
-                0,
-                width,
-                height
-              );
-              tileW = r.dw;
-              tileH = r.dh;
-            } else if (bgSize === "100% 100%") {
-              tileW = width;
-              tileH = height;
-            } else {
-              tileW = image.width;
-              tileH = image.height;
-            }
-            for (let ty = y; ty < y + height; ty += tileH) {
-              for (let tx = x; tx < x + width; tx += tileW) {
-                ctx.drawImage(image, tx, ty, tileW, tileH);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  if (debug) {
-    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x, y, width, height);
-  }
-  if (node.textContent !== void 0 && node.textContent !== "") {
-    const paddingTop = resolveBoxValue(style.paddingTop, width);
-    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
-    const paddingRight = resolveBoxValue(style.paddingRight, width);
-    const borderTopW = resolveBoxValue(style.borderTopWidth, width);
-    const borderLeftW = resolveBoxValue(style.borderLeftWidth, width);
-    const borderRightW = resolveBoxValue(style.borderRightWidth, width);
-    const contentX = x + paddingLeft + borderLeftW;
-    const contentY = y + paddingTop + borderTopW;
-    const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
-    const textLayout = layoutText(
-      node.textContent,
-      style,
-      contentWidth,
-      ctx,
-      !!emojiStyle
-    );
-    await drawText(
-      ctx,
-      textLayout.segments,
-      contentX,
-      contentY,
-      style.textShadow,
-      emojiStyle
-    );
-  }
-  if (node.type === "img" && node.props.src) {
-    const paddingTop = resolveBoxValue(style.paddingTop, width);
-    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
-    const paddingRight = resolveBoxValue(style.paddingRight, width);
-    const paddingBottom = resolveBoxValue(style.paddingBottom, width);
-    const imgX = x + paddingLeft;
-    const imgY = y + paddingTop;
-    const imgW = width - paddingLeft - paddingRight;
-    const imgH = height - paddingTop - paddingBottom;
-    if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style, width, height);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-        applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
-      }
-    }
-    await drawImage(
-      ctx,
-      node.props.src,
-      imgX,
-      imgY,
-      imgW,
-      imgH,
-      style,
-      node.props.__loadedImage
-    );
-  }
-  if (node.type === "svg") {
-    drawSvgContainer(ctx, node, x, y, width, height);
-  } else {
-    for (const child of node.children) {
-      await drawNode(ctx, child, x, y, debug, emojiStyle);
-    }
-  }
-  ctx.restore();
+  await drawNodeCore(ctx, node, parentX, parentY, 0, 0, debug, emojiStyle);
 }
 function extractScale(transform) {
   const scaleMatch = transform.match(/\b(scale|scaleX|scaleY)\(([^)]+)\)/);
@@ -2032,7 +1863,7 @@ function extractScale(transform) {
   const remaining = transform.replace(fullMatch, "").trim();
   return { sx, sy, remaining };
 }
-async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debug, emojiStyle, overrideTransform) {
+async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug, emojiStyle, overrideTransform) {
   const x = parentX + node.x + offsetX;
   const y = parentY + node.y + offsetY;
   const { width, height, style } = node;
@@ -2074,7 +1905,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
       if (gradient) {
         ctx.fillStyle = gradient;
         const borderRadius = getBorderRadiusFromStyle(style, width, height);
-        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+        if (hasRadius(borderRadius)) {
           ctx.beginPath();
           roundedRect(
             ctx,
@@ -2095,8 +1926,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
         const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
         if (urlMatch) {
           const borderRadius = getBorderRadiusFromStyle(style, width, height);
-          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-          if (hasRadius2) {
+          if (hasRadius(borderRadius)) {
             applyClip(ctx, x, y, width, height, borderRadius);
           }
           const image = await loadImage3(urlMatch[1]);
@@ -2193,7 +2023,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
       const borderRadius = getBorderRadiusFromStyle(style, width, height);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+      if (hasRadius(borderRadius)) {
         applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
       }
     }
@@ -2212,15 +2042,25 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     drawSvgContainer(ctx, node, x, y, width, height);
   } else {
     for (const child of node.children) {
-      await drawNodeInner(ctx, child, x, y, 0, 0, debug, emojiStyle, void 0);
+      if (offsetX === 0 && offsetY === 0) {
+        await drawNode(ctx, child, x, y, debug, emojiStyle);
+      } else {
+        await drawNodeCore(
+          ctx,
+          child,
+          x,
+          y,
+          0,
+          0,
+          debug,
+          emojiStyle,
+          void 0
+        );
+      }
     }
   }
   ctx.restore();
 }
-function parseCSSLength(value, referenceSize) {
-  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
-  return parseFloat(value);
-}
 function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
   let ox = x + width / 2;
   let oy = y + height / 2;
@@ -2285,20 +2125,6 @@ function parseAngle(value) {
   if (value.endsWith("turn")) return parseFloat(value) * 2 * Math.PI;
   return parseFloat(value);
 }
-function toNumber(v) {
-  if (typeof v === "number") return v;
-  if (v === void 0 || v === null) return 0;
-  const n = parseFloat(String(v));
-  return isNaN(n) ? 0 : n;
-}
-function resolveBoxValue(v, referenceWidth) {
-  if (typeof v === "number") return v;
-  if (v === void 0 || v === null) return 0;
-  const s = String(v);
-  if (s.endsWith("%")) return parseFloat(s) / 100 * referenceWidth;
-  const n = parseFloat(s);
-  return isNaN(n) ? 0 : n;
-}
 
 // src/jsx/font.ts
 import { GlobalFonts } from "@napi-rs/canvas";