pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 6 Packages Projects Releases Wiki Activity

Found a proper way to colorize cards

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-25 19:43:36 +02:00
parent f873990900
commit 54100d8e70
2 changed files with 67 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
View File

@ -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;

5
geneit_app/src/widgets/complex_family_tree/family_chart.d.ts vendored
View File

@ -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;
}