@effing/canvas 0.31.2 → 0.31.3

package/dist/index.js

@@ -1498,7 +1498,7 @@ function resolveInheritedStyle(merged, color, parent) {
 function normalizeChildren(node) {
   const raw = node.children ?? node.props.children;
   if (raw == null) return [];
-  return Array.isArray(raw) ? raw : [raw];
+  return Array.isArray(raw) ? raw.flat(Infinity) : [raw];
 }
 
 // src/jsx/draw/svg/defs.ts
@@ -1508,6 +1508,8 @@ function collectDefs(children) {
   const masks = /* @__PURE__ */ new Map();
   const filters = /* @__PURE__ */ new Map();
   function insertDef(def) {
+    if (!def || typeof def !== "object" || !("props" in def) || !def.props)
+      return;
     const id = def.props.id;
     if (!id) return;
     if (def.type === "clipPath") clips.set(id, normalizeChildren(def));
@@ -2394,9 +2396,9 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   const inherited = resolveInheritedStyle(merged, color);
   const children = node.props.children;
   if (children != null) {
-    const childArray = Array.isArray(children) ? children : [children];
+    const childArray = Array.isArray(children) ? children.flat(Infinity) : [children];
     const svgChildren = childArray.filter(
-      (c) => c != null && typeof c === "object"
+      (c) => c != null && typeof c === "object" && !Array.isArray(c)
     );
     const defs = collectDefs(svgChildren);
     for (const child of svgChildren) {
@@ -3631,11 +3633,12 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   }
   applyStylesToYoga(yogaNode, style);
   if (tagName === "svg") {
+    const resolvedChildren = resolveSvgTree(props.children);
     return {
       type: tagName,
       style,
       children: [],
-      props,
+      props: { ...props, children: resolvedChildren },
       yogaNode
     };
   }
@@ -3757,6 +3760,45 @@ function extractTextContent(children) {
   }
   return void 0;
 }
+function resolveSvgTree(node) {
+  if (node === null || node === void 0 || typeof node === "boolean")
+    return null;
+  if (typeof node === "string" || typeof node === "number") return node;
+  if (Array.isArray(node)) {
+    const out = [];
+    let changed = false;
+    for (const child of node) {
+      const resolved = resolveSvgTree(child);
+      if (resolved === null || resolved === void 0) {
+        changed = true;
+        continue;
+      }
+      if (Array.isArray(resolved)) {
+        changed = true;
+        for (const r of resolved) out.push(r);
+      } else {
+        if (resolved !== child) changed = true;
+        out.push(resolved);
+      }
+    }
+    return changed ? out : node;
+  }
+  const el = node;
+  if (typeof el.type === "function") {
+    const rendered = el.type(
+      el.props ?? {}
+    );
+    return resolveSvgTree(rendered);
+  }
+  const elProps = el.props ?? {};
+  if (elProps.children !== void 0) {
+    const resolvedChildren = resolveSvgTree(elProps.children);
+    if (resolvedChildren !== elProps.children) {
+      return { ...el, props: { ...elProps, children: resolvedChildren } };
+    }
+  }
+  return el;
+}
 function hasElementChildren(children) {
   if (children === void 0 || children === null || typeof children === "boolean")
     return false;