Found a proper way to colorize cards

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -24,12 +24,12 @@ export function ComplexFamilyTree(p: {
       data: treeToF3Data(p.tree, p.isUp),
       node_separation: 250,
       level_separation: 150,
-      }),
-      view = f3.d3AnimationView({
+    });
+    const view = f3.d3AnimationView({
       store,
       cont: container,
-      }),
-      Card = f3.elements.Card({
+    });
+    const Card = f3.elements.Card({
       store,
       svg: view.svg,
       card_dim: {
@@ -71,7 +71,24 @@ export function ComplexFamilyTree(p: {
       link_break: false,
     });
 
-    view.setCard(Card);
+    // Patch generated card
+    const PatchedCard: f3.F3CardBuilder = (p) => {
+      const res = Card(p);
+
+      // Patch card colors for PDF export
+      res
+        .querySelector(".card-male")
+        ?.querySelector(".card-body-rect")
+        ?.setAttribute("fill", "#add8e6");
+      res
+        .querySelector(".card-female")
+        ?.querySelector(".card-body-rect")
+        ?.setAttribute("fill", "#ffb6c1");
+
+      return res;
+    };
+
+    view.setCard(PatchedCard);
     store.setOnUpdate((props) => view.update(props || {}));
     store.update.tree({ initial: false, transition_time: 0 });
   };
@@ -104,11 +121,6 @@ export function ComplexFamilyTree(p: {
       `<path class="link" fill="none" stroke="#000"`
     );
 
-    dstSVG = dstSVG.replaceAll(
-      `class="card-body-rect"`,
-      `class="card-body-rect" fill="white"`
-    );
-
     dstSVG = dstSVG.replaceAll(
       `class="text-overflow-mask"`,
       `class="text-overflow-mask" fill="transparent"`
@@ -123,26 +135,6 @@ export function ComplexFamilyTree(p: {
 
     dstSVG = dstSVG.replaceAll("✝", " ");
 
-    let womanTiles = getAllIndexes(dstSVG, "card-female");
-    let count = 0;
-    for (let i of womanTiles) {
-      // Correct padding due to previous corrections
-      i += count++ * 2;
-      dstSVG =
-        dstSVG.substring(0, i) +
-        dstSVG.substring(i + 1).replace(`fill="white"`, `fill="#ffb6c1"`);
-    }
-
-    count = 0;
-    let manTiles = getAllIndexes(dstSVG, "card-male");
-    for (let i of manTiles) {
-      // Correct padding due to previous corrections
-      i += count++ * 2;
-      dstSVG =
-        dstSVG.substring(0, i) +
-        dstSVG.substring(i + 1).replace(`fill="white"`, `fill="#add8e6"`);
-    }
-
     //navigator.clipboard.writeText(dstSVG);
     target.innerHTML = dstSVG;
 

geneit_app/src/widgets/complex_family_tree/family_chart.d.ts

@@ -86,7 +86,10 @@ declare module "family-chart" {
         img_y: number;
       };
       card_display: ((data: f3Data) => string)[];
-    }) => (p: { node; d }) => HTMLElement;
+    }) => F3CardBuilder;
   };
+
+  type F3CardBuilder = (p: { node; d }) => HTMLElement;
+
   const elements: F3elements;
 }