@effing/canvas 0.19.0 → 0.19.2

package/dist/index.js

@@ -784,10 +784,10 @@ function getBorderRadiusFromStyle(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 tw = toNumber(style.borderTopWidth);
-  const rw = toNumber(style.borderRightWidth);
-  const bw = toNumber(style.borderBottomWidth);
-  const lw = toNumber(style.borderLeftWidth);
+  const tw = resolveBoxValue(style.borderTopWidth, width);
+  const rw = resolveBoxValue(style.borderRightWidth, width);
+  const bw = resolveBoxValue(style.borderBottomWidth, width);
+  const lw = resolveBoxValue(style.borderLeftWidth, width);
   if (tw === 0 && rw === 0 && bw === 0 && lw === 0) return;
   const allSameWidth = tw === rw && rw === bw && bw === lw && tw > 0;
   const tc = style.borderTopColor ?? "black";
@@ -917,6 +917,13 @@ function normalizeChildren(node) {
   if (raw == null) return [];
   return Array.isArray(raw) ? raw : [raw];
 }
+function svgLength(value, reference, fallback = 0) {
+  if (value == null) return fallback;
+  const s = String(value);
+  if (s.endsWith("%")) return parseFloat(s) / 100 * reference;
+  const n = Number(s);
+  return isNaN(n) ? fallback : n;
+}
 function parseFrac(value, fallback) {
   if (value == null) return fallback;
   const s = String(value);
@@ -1170,7 +1177,7 @@ function pointsBBox(points) {
   if (!isFinite(minX)) return { x: 0, y: 0, width: 0, height: 0 };
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
-function buildPath(child) {
+function buildPath(child, vbW, vbH) {
   const props = mergeStyleIntoProps(child.props);
   switch (child.type) {
     case "path": {
@@ -1179,29 +1186,29 @@ function buildPath(child) {
       return new Path2D(d);
     }
     case "circle": {
-      const cx = Number(props.cx ?? 0);
-      const cy = Number(props.cy ?? 0);
-      const r = Number(props.r ?? 0);
+      const cx = svgLength(props.cx, vbW);
+      const cy = svgLength(props.cy, vbH);
+      const r = svgLength(props.r, Math.min(vbW, vbH));
       if (r <= 0) return void 0;
       const p = new Path2D();
       p.arc(cx, cy, r, 0, Math.PI * 2);
       return p;
     }
     case "rect": {
-      const rx = Number(props.x ?? 0);
-      const ry = Number(props.y ?? 0);
-      const w = Number(props.width ?? 0);
-      const h = Number(props.height ?? 0);
+      const rx = svgLength(props.x, vbW);
+      const ry = svgLength(props.y, vbH);
+      const w = svgLength(props.width, vbW);
+      const h = svgLength(props.height, vbH);
       if (w <= 0 || h <= 0) return void 0;
       const p = new Path2D();
       p.rect(rx, ry, w, h);
       return p;
     }
     case "ellipse": {
-      const cx = Number(props.cx ?? 0);
-      const cy = Number(props.cy ?? 0);
-      const rx = Number(props.rx ?? 0);
-      const ry = Number(props.ry ?? 0);
+      const cx = svgLength(props.cx, vbW);
+      const cy = svgLength(props.cy, vbH);
+      const rx = svgLength(props.rx, vbW);
+      const ry = svgLength(props.ry, vbH);
       if (rx <= 0 || ry <= 0) return void 0;
       const p = new Path2D();
       p.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
@@ -1222,10 +1229,10 @@ function buildPath(child) {
       return void 0;
   }
 }
-function buildClipPath(shapes) {
+function buildClipPath(shapes, vbW, vbH) {
   let combined;
   for (const shape of shapes) {
-    const p = buildPath(shape);
+    const p = buildPath(shape, vbW, vbH);
     if (!p) continue;
     if (!combined) {
       combined = p;
@@ -1239,10 +1246,14 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   ctx.save();
   ctx.translate(x, y);
   const viewBox = node.props.viewBox;
+  let vbW = width;
+  let vbH = height;
   if (viewBox) {
     const parts = viewBox.split(/[\s,]+/).map(Number);
     if (parts.length === 4) {
-      const [vbX, vbY, vbW, vbH] = parts;
+      const [vbX, vbY, parsedW, parsedH] = parts;
+      vbW = parsedW;
+      vbH = parsedH;
       const scaleX = width / vbW;
       const scaleY = height / vbH;
       ctx.scale(scaleX, scaleY);
@@ -1260,7 +1271,7 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
     );
     const defs = collectDefs(svgChildren);
     for (const child of svgChildren) {
-      drawSvgChild(ctx, child, inheritedFill, color, defs);
+      drawSvgChild(ctx, child, inheritedFill, color, defs, vbW, vbH);
     }
   }
   ctx.restore();
@@ -1269,13 +1280,13 @@ var EMPTY_DEFS = {
   clips: /* @__PURE__ */ new Map(),
   gradients: /* @__PURE__ */ new Map()
 };
-function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS) {
+function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
   if (type === "defs" || type === "clipPath") return;
   const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
   const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
-  const clipPath = clipShapes ? buildClipPath(clipShapes) : void 0;
+  const clipPath = clipShapes ? buildClipPath(clipShapes, vbW, vbH) : void 0;
   if (clipPath) ctx.save();
   if (clipPath) ctx.clip(clipPath);
   switch (type) {
@@ -1283,16 +1294,16 @@ function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS) {
       drawPath(ctx, props, inheritedFill, color, defs);
       break;
     case "circle":
-      drawCircle(ctx, props, inheritedFill, color, defs);
+      drawCircle(ctx, props, inheritedFill, color, defs, vbW, vbH);
       break;
     case "rect":
-      drawSvgRect(ctx, props, inheritedFill, color, defs);
+      drawSvgRect(ctx, props, inheritedFill, color, defs, vbW, vbH);
       break;
     case "line":
-      drawLine(ctx, props, color, defs);
+      drawLine(ctx, props, color, defs, vbW, vbH);
       break;
     case "ellipse":
-      drawEllipse(ctx, props, inheritedFill, color, defs);
+      drawEllipse(ctx, props, inheritedFill, color, defs, vbW, vbH);
       break;
     case "polygon":
       drawPolygon(ctx, props, inheritedFill, color, defs);
@@ -1301,7 +1312,7 @@ function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS) {
       drawPolyline(ctx, props, inheritedFill, color, defs);
       break;
     case "g":
-      drawGroup(ctx, child, inheritedFill, color, defs);
+      drawGroup(ctx, child, inheritedFill, color, defs, vbW, vbH);
       break;
   }
   if (clipPath) ctx.restore();
@@ -1313,32 +1324,32 @@ function drawPath(ctx, props, inheritedFill, color, defs) {
   const bbox = pathBBox(d);
   applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawCircle(ctx, props, inheritedFill, color, defs) {
-  const cx = Number(props.cx ?? 0);
-  const cy = Number(props.cy ?? 0);
-  const r = Number(props.r ?? 0);
+function drawCircle(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+  const cx = svgLength(props.cx, vbW);
+  const cy = svgLength(props.cy, vbH);
+  const r = svgLength(props.r, Math.min(vbW, vbH));
   if (r <= 0) return;
   const path = new Path2D();
   path.arc(cx, cy, r, 0, Math.PI * 2);
   const bbox = { x: cx - r, y: cy - r, width: 2 * r, height: 2 * r };
   applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawSvgRect(ctx, props, inheritedFill, color, defs) {
-  const rx = Number(props.x ?? 0);
-  const ry = Number(props.y ?? 0);
-  const w = Number(props.width ?? 0);
-  const h = Number(props.height ?? 0);
+function drawSvgRect(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+  const rx = svgLength(props.x, vbW);
+  const ry = svgLength(props.y, vbH);
+  const w = svgLength(props.width, vbW);
+  const h = svgLength(props.height, vbH);
   if (w <= 0 || h <= 0) return;
   const path = new Path2D();
   path.rect(rx, ry, w, h);
   const bbox = { x: rx, y: ry, width: w, height: h };
   applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawLine(ctx, props, color, defs) {
-  const x1 = Number(props.x1 ?? 0);
-  const y1 = Number(props.y1 ?? 0);
-  const x2 = Number(props.x2 ?? 0);
-  const y2 = Number(props.y2 ?? 0);
+function drawLine(ctx, props, color, defs, vbW = 0, vbH = 0) {
+  const x1 = svgLength(props.x1, vbW);
+  const y1 = svgLength(props.y1, vbH);
+  const x2 = svgLength(props.x2, vbW);
+  const y2 = svgLength(props.y2, vbH);
   const path = new Path2D();
   path.moveTo(x1, y1);
   path.lineTo(x2, y2);
@@ -1350,11 +1361,11 @@ function drawLine(ctx, props, color, defs) {
   };
   applyStroke(ctx, props, path, color, defs, bbox);
 }
-function drawEllipse(ctx, props, inheritedFill, color, defs) {
-  const cx = Number(props.cx ?? 0);
-  const cy = Number(props.cy ?? 0);
-  const rx = Number(props.rx ?? 0);
-  const ry = Number(props.ry ?? 0);
+function drawEllipse(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+  const cx = svgLength(props.cx, vbW);
+  const cy = svgLength(props.cy, vbH);
+  const rx = svgLength(props.rx, vbW);
+  const ry = svgLength(props.ry, vbH);
   if (rx <= 0 || ry <= 0) return;
   const path = new Path2D();
   path.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
@@ -1450,7 +1461,7 @@ function applySvgTransform(ctx, transform) {
     }
   }
 }
-function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS) {
+function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const children = normalizeChildren(node);
   if (children.length === 0) return;
   const merged = mergeStyleIntoProps(node.props);
@@ -1462,7 +1473,7 @@ function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS) {
   }
   for (const child of children) {
     if (child != null && typeof child === "object") {
-      drawSvgChild(ctx, child, groupFill, color, defs);
+      drawSvgChild(ctx, child, groupFill, color, defs, vbW, vbH);
     }
   }
   if (transform) {
@@ -1951,12 +1962,12 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     ctx.strokeRect(x, y, width, height);
   }
   if (node.textContent !== void 0 && node.textContent !== "") {
-    const paddingTop = toNumber(style.paddingTop);
-    const paddingLeft = toNumber(style.paddingLeft);
-    const paddingRight = toNumber(style.paddingRight);
-    const borderTopW = toNumber(style.borderTopWidth);
-    const borderLeftW = toNumber(style.borderLeftWidth);
-    const borderRightW = toNumber(style.borderRightWidth);
+    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;
@@ -1977,10 +1988,10 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     );
   }
   if (node.type === "img" && node.props.src) {
-    const paddingTop = toNumber(style.paddingTop);
-    const paddingLeft = toNumber(style.paddingLeft);
-    const paddingRight = toNumber(style.paddingRight);
-    const paddingBottom = toNumber(style.paddingBottom);
+    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;
@@ -2146,12 +2157,12 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     ctx.strokeRect(x, y, width, height);
   }
   if (node.textContent !== void 0 && node.textContent !== "") {
-    const paddingTop = toNumber(style.paddingTop);
-    const paddingLeft = toNumber(style.paddingLeft);
-    const paddingRight = toNumber(style.paddingRight);
-    const borderTopW = toNumber(style.borderTopWidth);
-    const borderLeftW = toNumber(style.borderLeftWidth);
-    const borderRightW = toNumber(style.borderRightWidth);
+    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;
@@ -2172,10 +2183,10 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     );
   }
   if (node.type === "img" && node.props.src) {
-    const paddingTop = toNumber(style.paddingTop);
-    const paddingLeft = toNumber(style.paddingLeft);
-    const paddingRight = toNumber(style.paddingRight);
-    const paddingBottom = toNumber(style.paddingBottom);
+    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;
@@ -2280,6 +2291,14 @@ function toNumber(v) {
   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";
@@ -2888,24 +2907,36 @@ function applyEdgeValue(node, setter, edge, value) {
 
 // src/jsx/layout.ts
 async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled, fontFamilies) {
-  const rootYogaNode = createYogaNode();
+  const elementYogaNode = createYogaNode();
   const rootStyle = fontFamilies?.length ? { ...DEFAULT_STYLE, fontFamily: fontFamilies.join(", ") } : DEFAULT_STYLE;
-  const rootNode = await buildNode(
+  const elementNode = await buildNode(
     element,
     rootStyle,
-    rootYogaNode,
+    elementYogaNode,
     containerWidth,
     containerHeight,
     ctx,
     emojiEnabled,
     fontFamilies
   );
+  const rootYogaNode = createYogaNode();
   rootYogaNode.setWidth(containerWidth);
   rootYogaNode.setHeight(containerHeight);
+  rootYogaNode.setFlexDirection(FlexDirection.Row);
+  rootYogaNode.insertChild(elementYogaNode, 0);
   rootYogaNode.calculateLayout(containerWidth, containerHeight);
-  const layoutTree = extractLayout(rootNode, rootYogaNode);
+  const elementLayout = extractLayout(elementNode, elementYogaNode);
   freeYogaNode(rootYogaNode);
-  return layoutTree;
+  return {
+    type: "div",
+    style: rootStyle,
+    children: [elementLayout],
+    props: {},
+    x: 0,
+    y: 0,
+    width: containerWidth,
+    height: containerHeight
+  };
 }
 async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled, fontFamilies) {
   if (element === null || element === void 0 || typeof element === "boolean") {
@@ -2999,15 +3030,15 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       if (parts.length === 4) {
         const [, , vbW, vbH] = parts;
         if (vbW > 0 && vbH > 0) {
-          const w = typeof style.width === "number" ? style.width : void 0;
-          const h = typeof style.height === "number" ? style.height : void 0;
-          if (w !== void 0 && h === void 0) {
-            style.height = w * (vbH / vbW);
-          } else if (h !== void 0 && w === void 0) {
-            style.width = h * (vbW / vbH);
-          } else if (w === void 0 && h === void 0) {
+          const wSet = style.width !== void 0;
+          const hSet = style.height !== void 0;
+          if (!wSet && !hSet) {
             style.width = vbW;
             style.height = vbH;
+          } else if (!hSet && typeof style.width === "number") {
+            style.height = style.width * (vbH / vbW);
+          } else if (!wSet && typeof style.height === "number") {
+            style.width = style.height * (vbW / vbH);
           }
         }
       }
@@ -3028,12 +3059,12 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
         const image = await loadImage4(src);
         const naturalW = image.width;
         const naturalH = image.height;
-        const w = typeof style.width === "number" ? style.width : void 0;
-        const h = typeof style.height === "number" ? style.height : void 0;
-        if (w !== void 0 && h === void 0 && naturalW > 0) {
-          style.height = w * (naturalH / naturalW);
-        } else if (h !== void 0 && w === void 0 && naturalH > 0) {
-          style.width = h * (naturalW / naturalH);
+        const wSet = style.width !== void 0;
+        const hSet = style.height !== void 0;
+        if (wSet && !hSet && typeof style.width === "number" && naturalW > 0) {
+          style.height = style.width * (naturalH / naturalW);
+        } else if (hSet && !wSet && typeof style.height === "number" && naturalH > 0) {
+          style.width = style.height * (naturalW / naturalH);
         }
         props.__loadedImage = image;
       } catch {