@effing/canvas 0.18.4 → 0.18.5

package/dist/index.js

@@ -650,7 +650,7 @@ async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
 
 // src/jsx/draw/rect.ts
 function drawRect(ctx, x, y, width, height, style) {
-  const borderRadius = getBorderRadius(style);
+  const borderRadius = getBorderRadius(style, width, height);
   const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
   if (style.boxShadow) {
     drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
@@ -677,16 +677,23 @@ function drawRect(ctx, x, y, width, height, style) {
   }
   drawBorders(ctx, x, y, width, height, style, borderRadius);
 }
-function getBorderRadius(style) {
+function resolveRadius(v, width, height) {
+  if (typeof v === "string" && v.endsWith("%")) {
+    const pct = parseFloat(v) / 100;
+    return pct * Math.min(width, height);
+  }
+  return toNumber(v);
+}
+function getBorderRadius(style, width, height) {
   return {
-    topLeft: toNumber(style.borderTopLeftRadius),
-    topRight: toNumber(style.borderTopRightRadius),
-    bottomRight: toNumber(style.borderBottomRightRadius),
-    bottomLeft: toNumber(style.borderBottomLeftRadius)
+    topLeft: resolveRadius(style.borderTopLeftRadius, width, height),
+    topRight: resolveRadius(style.borderTopRightRadius, width, height),
+    bottomRight: resolveRadius(style.borderBottomRightRadius, width, height),
+    bottomLeft: resolveRadius(style.borderBottomLeftRadius, width, height)
   };
 }
-function getBorderRadiusFromStyle(style) {
-  return getBorderRadius(style);
+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;
@@ -951,9 +958,14 @@ function parsePoints(value) {
 }
 function applyFillAndStroke(ctx, props, path, inheritedFill, color) {
   const fill = resolveCurrentColor(props.fill, color) ?? inheritedFill;
+  const fillRule = props.fillRule ?? props["fill-rule"];
+  const clipRule = props.clipRule ?? props["clip-rule"];
+  if (clipRule) {
+    ctx.clip(path, clipRule);
+  }
   if (fill !== "none") {
     ctx.fillStyle = fill;
-    ctx.fill(path);
+    ctx.fill(path, fillRule ?? "nonzero");
   }
   applyStroke(ctx, props, path, color);
 }
@@ -1014,7 +1026,7 @@ async function loadEmoji(type, code) {
 }
 
 // src/jsx/text/emoji-split.ts
-function splitTextIntoRuns(text, measureText2, emojiSize) {
+function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
   const runs = [];
   const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
   let currentText = "";
@@ -1024,13 +1036,18 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
     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
+          width: textWidth + letterSpacing * graphemeCount
         });
-        currentX = textStartX + textWidth;
+        currentX = textStartX + textWidth + letterSpacing * graphemeCount;
         currentText = "";
       }
       runs.push({
@@ -1039,7 +1056,7 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
         x: currentX,
         width: emojiSize
       });
-      currentX += emojiSize;
+      currentX += emojiSize + letterSpacing;
       textStartX = currentX;
     } else {
       if (!currentText) textStartX = currentX;
@@ -1048,11 +1065,16 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
   }
   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
+      width: textWidth + letterSpacing * graphemeCount
     });
   }
   return runs;
@@ -1103,20 +1125,29 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
   }
 }
 async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
+  const letterSpacing = seg.letterSpacing ?? 0;
   const runs = splitTextIntoRuns(
     seg.text,
     (text) => {
       setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
       return ctx.measureText(text).width;
     },
-    seg.fontSize
+    seg.fontSize,
+    letterSpacing
   );
   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);
       }
-      ctx.fillText(run.text, x + run.x, y);
     } else {
       const img = await loadEmojiImage(emojiStyle, run.char);
       if (img) {
@@ -1291,84 +1322,91 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
   }
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style);
+    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 gradient = createGradientFromCSS(
-      ctx,
-      style.backgroundImage,
-      x,
-      y,
-      width,
-      height
-    );
-    if (gradient) {
-      ctx.fillStyle = gradient;
-      const borderRadius = getBorderRadiusFromStyle(style);
-      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 = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
-      if (urlMatch) {
-        const borderRadius = getBorderRadiusFromStyle(style);
-        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,
+    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
+            height,
+            borderRadius.topLeft,
+            borderRadius.topRight,
+            borderRadius.bottomRight,
+            borderRadius.bottomLeft
           );
-          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+          ctx.fill();
         } else {
-          let tileW, tileH;
-          if (bgSize === "contain") {
-            const r = computeContain(
+          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,
-              0,
-              0,
+              x,
+              y,
               width,
               height
             );
-            tileW = r.dw;
-            tileH = r.dh;
-          } else if (bgSize === "100% 100%") {
-            tileW = width;
-            tileH = height;
+            ctx.drawImage(
+              image,
+              r.sx,
+              r.sy,
+              r.sw,
+              r.sh,
+              r.dx,
+              r.dy,
+              r.dw,
+              r.dh
+            );
           } 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);
+            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);
+              }
             }
           }
         }
@@ -1416,7 +1454,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     const imgW = width - paddingLeft - paddingRight;
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style);
+      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);
       }
@@ -1479,84 +1517,91 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
   }
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style);
+    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 gradient = createGradientFromCSS(
-      ctx,
-      style.backgroundImage,
-      x,
-      y,
-      width,
-      height
-    );
-    if (gradient) {
-      ctx.fillStyle = gradient;
-      const borderRadius = getBorderRadiusFromStyle(style);
-      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 = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
-      if (urlMatch) {
-        const borderRadius = getBorderRadiusFromStyle(style);
-        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,
+    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
+            height,
+            borderRadius.topLeft,
+            borderRadius.topRight,
+            borderRadius.bottomRight,
+            borderRadius.bottomLeft
           );
-          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+          ctx.fill();
         } else {
-          let tileW, tileH;
-          if (bgSize === "contain") {
-            const r = computeContain(
+          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,
-              0,
-              0,
+              x,
+              y,
               width,
               height
             );
-            tileW = r.dw;
-            tileH = r.dh;
-          } else if (bgSize === "100% 100%") {
-            tileW = width;
-            tileH = height;
+            ctx.drawImage(
+              image,
+              r.sx,
+              r.sy,
+              r.sw,
+              r.sh,
+              r.dx,
+              r.dy,
+              r.dw,
+              r.dh
+            );
           } 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);
+            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);
+              }
             }
           }
         }
@@ -1604,7 +1649,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     const imgW = width - paddingLeft - paddingRight;
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style);
+      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);
       }
@@ -1742,8 +1787,8 @@ function parseValue(v) {
   if (v === void 0 || v === null) return void 0;
   const s = String(v);
   if (s === "auto") return "auto";
-  const n = parseFloat(s);
-  if (!isNaN(n)) return n;
+  const n = Number(s);
+  if (s !== "" && !isNaN(n)) return n;
   return s;
 }
 function expandStyle(raw) {
@@ -1952,7 +1997,15 @@ var DIMENSION_PROPS = [
   "paddingLeft",
   "rowGap",
   "columnGap",
-  "flexBasis"
+  "flexBasis",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius"
 ];
 function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
   if (value.endsWith("%") || value === "auto") return value;