From 54100d8e702677e95d89923ae6453d8013118078 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Fri, 25 Aug 2023 19:43:36 +0200
Subject: [PATCH] Found a proper way to colorize cards

---
 .../complex_family_tree/ComplexFamilyTree.tsx | 134 ++++++++----------
 .../complex_family_tree/family_chart.d.ts     |   5 +-
 2 files changed, 67 insertions(+), 72 deletions(-)

diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
index 10a6e47..204678b 100644
--- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
+++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
@@ -21,57 +21,74 @@ export function ComplexFamilyTree(p: {
     if (!container) return;
 
     const store = f3.createStore({
-        data: treeToF3Data(p.tree, p.isUp),
-        node_separation: 250,
-        level_separation: 150,
-      }),
-      view = f3.d3AnimationView({
-        store,
-        cont: container,
-      }),
-      Card = f3.elements.Card({
-        store,
-        svg: view.svg,
-        card_dim: {
-          w: 210,
-          h: 118,
-          text_x: 5,
-          text_y: 70,
-          img_w: 60,
-          img_h: 60,
-          img_x: 5,
-          img_y: 5,
+      data: treeToF3Data(p.tree, p.isUp),
+      node_separation: 250,
+      level_separation: 150,
+    });
+    const view = f3.d3AnimationView({
+      store,
+      cont: container,
+    });
+    const Card = f3.elements.Card({
+      store,
+      svg: view.svg,
+      card_dim: {
+        w: 210,
+        h: 118,
+        text_x: 5,
+        text_y: 70,
+        img_w: 60,
+        img_h: 60,
+        img_x: 5,
+        img_y: 5,
+      },
+      card_display: [
+        (d) =>
+          `${d.data.first_name || ""} ${d.data.last_name || ""} ${
+            d.data.dead ? "✝" : ""
+          }`,
+        (d) => {
+          let birthDeath = [];
+          if (d.data.birthday) birthDeath.push(d.data.birthday);
+          if (d.data.deathday) birthDeath.push(d.data.deathday);
+
+          let s = birthDeath.join(" -> ");
+
+          if (d.data.wedding_state || d.data.dateOfWedding) {
+            let weddingInfo = [];
+            if (d.data.wedding_state) weddingInfo.push(d.data.wedding_state);
+            if (d.data.dateOfWedding)
+              weddingInfo.push("Mariage : " + d.data.dateOfWedding);
+            s += `</tspan> <tspan x="0" dy="14" font-size="10">${weddingInfo.join(
+              " - "
+            )}`;
+          }
+
+          return s;
         },
-        card_display: [
-          (d) =>
-            `${d.data.first_name || ""} ${d.data.last_name || ""} ${
-              d.data.dead ? "✝" : ""
-            }`,
-          (d) => {
-            let birthDeath = [];
-            if (d.data.birthday) birthDeath.push(d.data.birthday);
-            if (d.data.deathday) birthDeath.push(d.data.deathday);
+      ],
+      mini_tree: true,
+      link_break: false,
+    });
 
-            let s = birthDeath.join(" -> ");
+    // Patch generated card
+    const PatchedCard: f3.F3CardBuilder = (p) => {
+      const res = Card(p);
 
-            if (d.data.wedding_state || d.data.dateOfWedding) {
-              let weddingInfo = [];
-              if (d.data.wedding_state) weddingInfo.push(d.data.wedding_state);
-              if (d.data.dateOfWedding)
-                weddingInfo.push("Mariage : " + d.data.dateOfWedding);
-              s += `</tspan> <tspan x="0" dy="14" font-size="10">${weddingInfo.join(
-                " - "
-              )}`;
-            }
+      // 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 s;
-          },
-        ],
-        mini_tree: true,
-        link_break: false,
-      });
+      return res;
+    };
 
-    view.setCard(Card);
+    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;
 
diff --git a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
index 9c4ca77..272e3bf 100644
--- a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
+++ b/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;
 }