@effing/canvas 0.21.1 → 0.22.1

package/dist/index.js

@@ -1041,6 +1041,7 @@ function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
 
 // src/jsx/draw/svg.ts
 import { Path2D } from "@napi-rs/canvas";
+import parseCssColor from "parse-css-color";
 function resolveCurrentColor(value, color) {
   if (value?.toLowerCase() === "currentcolor") return color;
   return value;
@@ -1054,18 +1055,24 @@ function collectDefs(children) {
   const clips = /* @__PURE__ */ new Map();
   const gradients = /* @__PURE__ */ new Map();
   const masks = /* @__PURE__ */ new Map();
+  const filters = /* @__PURE__ */ new Map();
+  function insertDef(def) {
+    const id = def.props.id;
+    if (!id) return;
+    if (def.type === "clipPath") clips.set(id, normalizeChildren(def));
+    else if (def.type === "mask") masks.set(id, normalizeChildren(def));
+    else if (def.type === "filter") filters.set(id, def);
+    else if (def.type === "radialGradient" || def.type === "linearGradient")
+      gradients.set(id, def);
+  }
   for (const child of children) {
-    if (child.type !== "defs") continue;
-    for (const def of normalizeChildren(child)) {
-      const id = def.props.id;
-      if (!id) continue;
-      if (def.type === "clipPath") clips.set(id, normalizeChildren(def));
-      else if (def.type === "mask") masks.set(id, normalizeChildren(def));
-      else if (def.type === "radialGradient" || def.type === "linearGradient")
-        gradients.set(id, def);
+    if (child.type === "defs") {
+      for (const def of normalizeChildren(child)) insertDef(def);
+    } else {
+      insertDef(child);
     }
   }
-  return { clips, gradients, masks };
+  return { clips, gradients, masks, filters };
 }
 function parseUrlRef(value) {
   if (typeof value !== "string") return void 0;
@@ -1092,10 +1099,10 @@ function parseFrac(value, fallback) {
 }
 function applyOpacity(color, opacity) {
   if (opacity >= 1) return color;
-  const m = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-  if (m)
-    return `rgba(${parseInt(m[1], 16)}, ${parseInt(m[2], 16)}, ${parseInt(m[3], 16)}, ${opacity})`;
-  return color;
+  const parsed = parseCssColor(color);
+  if (!parsed) return color;
+  const [r, g, b] = parsed.values;
+  return `rgba(${r}, ${g}, ${b}, ${parsed.alpha * opacity})`;
 }
 function addGradientStops(gradient, def) {
   for (const stop of normalizeChildren(def)) {
@@ -1432,7 +1439,14 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   }
   const color = node.style.color ?? "black";
   const merged = mergeStyleIntoProps(node.props);
-  const inheritedFill = resolveCurrentColor(merged.fill, color) ?? "black";
+  const inherited = {
+    fill: resolveCurrentColor(merged.fill, color) ?? "black",
+    stroke: resolveCurrentColor(merged.stroke, color),
+    strokeWidth: merged.strokeWidth ?? merged["stroke-width"],
+    strokeLinecap: merged.strokeLinecap ?? merged["stroke-linecap"],
+    strokeLinejoin: merged.strokeLinejoin ?? merged["stroke-linejoin"],
+    strokeOpacity: merged.strokeOpacity ?? merged["stroke-opacity"]
+  };
   const children = node.props.children;
   if (children != null) {
     const childArray = Array.isArray(children) ? children : [children];
@@ -1441,7 +1455,7 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
     );
     const defs = collectDefs(svgChildren);
     for (const child of svgChildren) {
-      drawSvgChild(ctx, child, inheritedFill, color, defs, vbW, vbH);
+      drawSvgChild(ctx, child, inherited, color, defs, vbW, vbH);
     }
   }
   ctx.restore();
@@ -1449,76 +1463,254 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
 var EMPTY_DEFS = {
   clips: /* @__PURE__ */ new Map(),
   gradients: /* @__PURE__ */ new Map(),
-  masks: /* @__PURE__ */ new Map()
+  masks: /* @__PURE__ */ new Map(),
+  filters: /* @__PURE__ */ new Map()
 };
-function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
+function applyFeOffset(input, dx, dy, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.drawImage(input, dx, dy);
+  return canvas;
+}
+function applyFeGaussianBlur(input, stdDeviation, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.filter = `blur(${stdDeviation}px)`;
+  ctx.drawImage(input, 0, 0);
+  ctx.filter = "none";
+  return canvas;
+}
+function applyFeColorMatrix(input, type, values, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.drawImage(input, 0, 0);
+  if (type === "matrix" && values) {
+    const m = values.trim().split(/[\s,]+/).map(Number);
+    if (m.length >= 20) {
+      const imageData = ctx.getImageData(0, 0, w, h);
+      const d = imageData.data;
+      for (let i = 0; i < d.length; i += 4) {
+        const r = d[i];
+        const g = d[i + 1];
+        const b = d[i + 2];
+        const a = d[i + 3];
+        d[i] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[0] * r + m[1] * g + m[2] * b + m[3] * a + m[4] * 255
+          )
+        );
+        d[i + 1] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[5] * r + m[6] * g + m[7] * b + m[8] * a + m[9] * 255
+          )
+        );
+        d[i + 2] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[10] * r + m[11] * g + m[12] * b + m[13] * a + m[14] * 255
+          )
+        );
+        d[i + 3] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[15] * r + m[16] * g + m[17] * b + m[18] * a + m[19] * 255
+          )
+        );
+      }
+      ctx.putImageData(imageData, 0, 0);
+    }
+  }
+  return canvas;
+}
+function applyFeBlend(in1, in2, mode, w, h) {
+  const modeMap = {
+    normal: "source-over",
+    multiply: "multiply",
+    screen: "screen",
+    darken: "darken",
+    lighten: "lighten",
+    overlay: "overlay"
+  };
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.drawImage(in2, 0, 0);
+  ctx.globalCompositeOperation = modeMap[mode] ?? "source-over";
+  ctx.drawImage(in1, 0, 0);
+  ctx.globalCompositeOperation = "source-over";
+  return canvas;
+}
+function extractSourceAlpha(input, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, w, h);
+  ctx.globalCompositeOperation = "destination-in";
+  ctx.drawImage(input, 0, 0);
+  ctx.globalCompositeOperation = "source-over";
+  return canvas;
+}
+function applyFilter(filterDef, sourceGraphic, w, h) {
+  const buffers = /* @__PURE__ */ new Map();
+  buffers.set("SourceGraphic", sourceGraphic);
+  let sourceAlpha;
+  const getSourceAlpha = () => {
+    if (!sourceAlpha) {
+      sourceAlpha = extractSourceAlpha(sourceGraphic, w, h);
+      buffers.set("SourceAlpha", sourceAlpha);
+    }
+    return sourceAlpha;
+  };
+  const children = normalizeChildren(filterDef);
+  let lastResult = sourceGraphic;
+  for (const prim of children) {
+    const p = prim.props;
+    const inName = p.in ?? "";
+    const resolve = (name) => {
+      if (name === "SourceAlpha") return getSourceAlpha();
+      return buffers.get(name) ?? lastResult;
+    };
+    const input = inName ? resolve(inName) : lastResult;
+    let output;
+    switch (prim.type) {
+      case "feOffset":
+        output = applyFeOffset(
+          input,
+          Number(p.dx ?? 0),
+          Number(p.dy ?? 0),
+          w,
+          h
+        );
+        break;
+      case "feGaussianBlur": {
+        const std = Number(p.stdDeviation ?? 0);
+        output = std > 0 ? applyFeGaussianBlur(input, std, w, h) : input;
+        break;
+      }
+      case "feColorMatrix":
+        output = applyFeColorMatrix(
+          input,
+          p.type ?? "matrix",
+          p.values,
+          w,
+          h
+        );
+        break;
+      case "feBlend": {
+        const in2Name = p.in2 ?? "";
+        const in2 = in2Name ? resolve(in2Name) : lastResult;
+        output = applyFeBlend(input, in2, p.mode ?? "normal", w, h);
+        break;
+      }
+      default:
+        output = input;
+        break;
+    }
+    const resultName = p.result;
+    if (resultName) buffers.set(resultName, output);
+    lastResult = output;
+  }
+  return lastResult;
+}
+function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
-  if (type === "defs" || type === "clipPath" || type === "mask") return;
+  if (type === "defs" || type === "clipPath" || type === "mask" || type === "filter")
+    return;
+  const transform = type !== "g" ? props.transform : void 0;
+  if (transform) {
+    ctx.save();
+    applySvgTransform(ctx, transform);
+  }
   const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
   const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
   const clipPath = clipShapes ? buildClipPath(clipShapes, vbW, vbH) : void 0;
   const maskRef = parseUrlRef(props.mask);
   const maskShapes = maskRef ? defs.masks.get(maskRef) : void 0;
+  const filterRef = parseUrlRef(props.filter);
+  const filterDef = filterRef ? defs.filters.get(filterRef) : void 0;
   if (clipPath) ctx.save();
   if (clipPath) ctx.clip(clipPath);
+  const needsOffscreen = maskShapes || filterDef;
   let elemCanvas;
-  const targetCtx = maskShapes ? (() => {
+  const targetCtx = needsOffscreen ? (() => {
     const [c, cCtx] = acquireOffscreen(Math.ceil(vbW), Math.ceil(vbH));
     elemCanvas = c;
     return cCtx;
   })() : ctx;
   switch (type) {
     case "path":
-      drawPath(targetCtx, props, inheritedFill, color, defs);
+      drawPath(targetCtx, props, inherited, color, defs);
       break;
     case "circle":
-      drawCircle(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
+      drawCircle(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "rect":
-      drawSvgRect(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
+      drawSvgRect(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "line":
-      drawLine(targetCtx, props, color, defs, vbW, vbH);
+      drawLine(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "ellipse":
-      drawEllipse(targetCtx, props, inheritedFill, color, defs, vbW, vbH);
+      drawEllipse(targetCtx, props, inherited, color, defs, vbW, vbH);
       break;
     case "polygon":
-      drawPolygon(targetCtx, props, inheritedFill, color, defs);
+      drawPolygon(targetCtx, props, inherited, color, defs);
       break;
     case "polyline":
-      drawPolyline(targetCtx, props, inheritedFill, color, defs);
+      drawPolyline(targetCtx, props, inherited, color, defs);
       break;
     case "g":
-      drawGroup(targetCtx, child, inheritedFill, color, defs, vbW, vbH);
+      drawGroup(targetCtx, child, inherited, color, defs, vbW, vbH);
       break;
   }
-  if (maskShapes && elemCanvas) {
-    const [maskCanvas, maskCtx] = acquireOffscreen(
-      Math.ceil(vbW),
-      Math.ceil(vbH)
-    );
-    for (const shape of maskShapes) {
-      drawSvgChild(maskCtx, shape, "white", "white", defs, vbW, vbH);
-    }
-    targetCtx.globalCompositeOperation = "destination-in";
-    targetCtx.drawImage(maskCanvas, 0, 0);
-    targetCtx.globalCompositeOperation = "source-over";
-    ctx.drawImage(elemCanvas, 0, 0);
-    releaseOffscreen(maskCanvas);
+  if (needsOffscreen && elemCanvas) {
+    if (maskShapes) {
+      const [maskCanvas, maskCtx] = acquireOffscreen(
+        Math.ceil(vbW),
+        Math.ceil(vbH)
+      );
+      for (const shape of maskShapes) {
+        drawSvgChild(
+          maskCtx,
+          shape,
+          { fill: "white" },
+          "white",
+          defs,
+          vbW,
+          vbH
+        );
+      }
+      targetCtx.globalCompositeOperation = "destination-in";
+      targetCtx.drawImage(maskCanvas, 0, 0);
+      targetCtx.globalCompositeOperation = "source-over";
+      releaseOffscreen(maskCanvas);
+    }
+    if (filterDef) {
+      const filteredCanvas = applyFilter(
+        filterDef,
+        elemCanvas,
+        Math.ceil(vbW),
+        Math.ceil(vbH)
+      );
+      ctx.drawImage(filteredCanvas, 0, 0);
+      if (filteredCanvas !== elemCanvas) releaseOffscreen(filteredCanvas);
+    } else {
+      ctx.drawImage(elemCanvas, 0, 0);
+    }
     releaseOffscreen(elemCanvas);
   }
   if (clipPath) ctx.restore();
+  if (transform) ctx.restore();
 }
-function drawPath(ctx, props, inheritedFill, color, defs) {
+function drawPath(ctx, props, inherited, color, defs) {
   const d = props.d;
   if (!d) return;
   const path = new Path2D(d);
   const bbox = pathBBox(d);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawCircle(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+function drawCircle(ctx, props, inherited, 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));
@@ -1526,9 +1718,9 @@ function drawCircle(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
   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);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawSvgRect(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+function drawSvgRect(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const x = svgLength(props.x, vbW);
   const y = svgLength(props.y, vbH);
   const w = svgLength(props.width, vbW);
@@ -1547,9 +1739,9 @@ function drawSvgRect(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
     path.rect(x, y, w, h);
   }
   const bbox = { x, y, width: w, height: h };
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawLine(ctx, props, color, defs, vbW = 0, vbH = 0) {
+function drawLine(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const x1 = svgLength(props.x1, vbW);
   const y1 = svgLength(props.y1, vbH);
   const x2 = svgLength(props.x2, vbW);
@@ -1563,9 +1755,9 @@ function drawLine(ctx, props, color, defs, vbW = 0, vbH = 0) {
     width: Math.abs(x2 - x1),
     height: Math.abs(y2 - y1)
   };
-  applyStroke(ctx, props, path, color, defs, bbox);
+  applyStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawEllipse(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+function drawEllipse(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const cx = svgLength(props.cx, vbW);
   const cy = svgLength(props.cy, vbH);
   const rx = svgLength(props.rx, vbW);
@@ -1579,9 +1771,9 @@ function drawEllipse(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
     width: 2 * rx,
     height: 2 * ry
   };
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawPolygon(ctx, props, inheritedFill, color, defs) {
+function drawPolygon(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -1591,9 +1783,9 @@ function drawPolygon(ctx, props, inheritedFill, color, defs) {
   }
   path.closePath();
   const bbox = pointsBBox(points);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function drawPolyline(ctx, props, inheritedFill, color, defs) {
+function drawPolyline(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -1602,7 +1794,7 @@ function drawPolyline(ctx, props, inheritedFill, color, defs) {
     path.lineTo(points[i][0], points[i][1]);
   }
   const bbox = pointsBBox(points);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+  applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
 function applySvgTransform(ctx, transform) {
   const re = /\b(translate|scale|rotate|skewX|skewY|matrix)\s*\(([^)]*)\)/g;
@@ -1665,11 +1857,18 @@ function applySvgTransform(ctx, transform) {
     }
   }
 }
-function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
+function drawGroup(ctx, node, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const children = normalizeChildren(node);
   if (children.length === 0) return;
   const merged = mergeStyleIntoProps(node.props);
-  const groupFill = resolveCurrentColor(merged.fill, color) ?? inheritedFill;
+  const groupInherited = {
+    fill: resolveCurrentColor(merged.fill, color) ?? inherited.fill,
+    stroke: resolveCurrentColor(merged.stroke, color) ?? inherited.stroke,
+    strokeWidth: merged.strokeWidth ?? merged["stroke-width"] ?? inherited.strokeWidth,
+    strokeLinecap: merged.strokeLinecap ?? merged["stroke-linecap"] ?? inherited.strokeLinecap,
+    strokeLinejoin: merged.strokeLinejoin ?? merged["stroke-linejoin"] ?? inherited.strokeLinejoin,
+    strokeOpacity: merged.strokeOpacity ?? merged["stroke-opacity"] ?? inherited.strokeOpacity
+  };
   const transform = merged.transform;
   if (transform) {
     ctx.save();
@@ -1677,7 +1876,7 @@ function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0,
   }
   for (const child of children) {
     if (child != null && typeof child === "object") {
-      drawSvgChild(ctx, child, groupFill, color, defs, vbW, vbH);
+      drawSvgChild(ctx, child, groupInherited, color, defs, vbW, vbH);
     }
   }
   if (transform) {
@@ -1693,36 +1892,68 @@ function parsePoints(value) {
   }
   return result;
 }
-function applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox) {
-  const fill = resolveCurrentColor(props.fill, color) ?? inheritedFill;
+function applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox) {
+  const fill = resolveCurrentColor(props.fill, color) ?? inherited.fill;
   const fillRule = props.fillRule ?? props["fill-rule"];
+  const fillOpacity = Number(props.fillOpacity ?? props["fill-opacity"] ?? 1);
   const fillRef = parseUrlRef(fill);
   if (fillRef) {
     const gradientDef = defs.gradients.get(fillRef);
     if (gradientDef) {
-      fillWithSvgGradient(ctx, gradientDef, bbox, path, fillRule ?? "nonzero");
+      if (fillOpacity < 1) {
+        ctx.save();
+        ctx.globalAlpha *= fillOpacity;
+        fillWithSvgGradient(
+          ctx,
+          gradientDef,
+          bbox,
+          path,
+          fillRule ?? "nonzero"
+        );
+        ctx.restore();
+      } else {
+        fillWithSvgGradient(
+          ctx,
+          gradientDef,
+          bbox,
+          path,
+          fillRule ?? "nonzero"
+        );
+      }
     }
   } else if (fill !== "none") {
-    ctx.fillStyle = fill;
+    ctx.fillStyle = applyOpacity(fill, fillOpacity);
     ctx.fill(path, fillRule ?? "nonzero");
   }
-  applyStroke(ctx, props, path, color, defs, bbox);
+  applyStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function applyStroke(ctx, props, path, color, defs, bbox) {
-  const stroke = resolveCurrentColor(props.stroke, color);
+function applyStroke(ctx, props, path, inherited, color, defs, bbox) {
+  const stroke = resolveCurrentColor(props.stroke, color) ?? inherited.stroke;
   if (!stroke || stroke === "none") return;
-  ctx.lineWidth = Number(props.strokeWidth ?? props["stroke-width"] ?? 1);
-  ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? "butt";
-  ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? "miter";
+  const strokeOpacity = Number(
+    props.strokeOpacity ?? props["stroke-opacity"] ?? inherited.strokeOpacity ?? 1
+  );
+  ctx.lineWidth = Number(
+    props.strokeWidth ?? props["stroke-width"] ?? inherited.strokeWidth ?? 1
+  );
+  ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? inherited.strokeLinecap ?? "butt";
+  ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? inherited.strokeLinejoin ?? "miter";
   const strokeRef = parseUrlRef(stroke);
   if (strokeRef) {
     const gradientDef = defs.gradients.get(strokeRef);
     if (gradientDef) {
-      strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+      if (strokeOpacity < 1) {
+        ctx.save();
+        ctx.globalAlpha *= strokeOpacity;
+        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+        ctx.restore();
+      } else {
+        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+      }
       return;
     }
   }
-  ctx.strokeStyle = stroke;
+  ctx.strokeStyle = applyOpacity(stroke, strokeOpacity);
   ctx.stroke(path);
 }
 
@@ -2177,10 +2408,14 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
     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;
+    const borderTopW = resolveBoxValue(style.borderTopWidth, width);
+    const borderLeftW = resolveBoxValue(style.borderLeftWidth, width);
+    const borderRightW = resolveBoxValue(style.borderRightWidth, width);
+    const borderBottomW = resolveBoxValue(style.borderBottomWidth, width);
+    const imgX = x + paddingLeft + borderLeftW;
+    const imgY = y + paddingTop + borderTopW;
+    const imgW = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
+    const imgH = height - paddingTop - paddingBottom - borderTopW - borderBottomW;
     if (!isClipped) {
       const borderRadius = getBorderRadiusFromStyle(style, width, height);
       if (hasRadius(borderRadius)) {
@@ -2421,23 +2656,32 @@ function expandStyle(raw, fontFamilies) {
   }
   if (style.flex !== void 0) {
     const val = String(style.flex);
-    const parts = val.split(/\s+/);
-    if (parts.length === 1) {
-      const n = parseFloat(parts[0]);
-      if (!isNaN(n)) {
-        if (style.flexGrow === void 0) style.flexGrow = n;
-        if (style.flexShrink === void 0) style.flexShrink = 1;
-        if (style.flexBasis === void 0) style.flexBasis = 0;
+    if (val === "none") {
+      if (style.flexGrow === void 0) style.flexGrow = 0;
+      if (style.flexShrink === void 0) style.flexShrink = 0;
+      if (style.flexBasis === void 0) style.flexBasis = "auto";
+    } else {
+      const parts = val.split(/\s+/);
+      if (parts.length === 1) {
+        const n = parseFloat(parts[0]);
+        if (!isNaN(n)) {
+          if (style.flexGrow === void 0) style.flexGrow = n;
+          if (style.flexShrink === void 0) style.flexShrink = 1;
+          if (style.flexBasis === void 0) style.flexBasis = 0;
+        }
+      } else if (parts.length === 2) {
+        if (style.flexGrow === void 0)
+          style.flexGrow = parseFloat(parts[0]);
+        if (style.flexShrink === void 0)
+          style.flexShrink = parseFloat(parts[1]);
+      } else if (parts.length >= 3) {
+        if (style.flexGrow === void 0)
+          style.flexGrow = parseFloat(parts[0]);
+        if (style.flexShrink === void 0)
+          style.flexShrink = parseFloat(parts[1]);
+        if (style.flexBasis === void 0)
+          style.flexBasis = parseValue(parts[2]);
       }
-    } else if (parts.length === 2) {
-      if (style.flexGrow === void 0) style.flexGrow = parseFloat(parts[0]);
-      if (style.flexShrink === void 0)
-        style.flexShrink = parseFloat(parts[1]);
-    } else if (parts.length >= 3) {
-      if (style.flexGrow === void 0) style.flexGrow = parseFloat(parts[0]);
-      if (style.flexShrink === void 0)
-        style.flexShrink = parseFloat(parts[1]);
-      if (style.flexBasis === void 0) style.flexBasis = parseValue(parts[2]);
     }
     delete style.flex;
   }
@@ -3049,9 +3293,15 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       emojiEnabled
     );
     childYogaNode.setMeasureFunc(measureFunc);
-    childYogaNode.setFlexGrow(1);
+    const jc = style.justifyContent;
+    if (!jc || jc === "flex-start") {
+      childYogaNode.setFlexGrow(1);
+    }
     childYogaNode.setFlexShrink(1);
     yogaNode.insertChild(childYogaNode, 0);
+    if (style.flexShrink === void 0) {
+      yogaNode.setFlexShrink(1);
+    }
     return {
       type: tagName,
       style,