pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 4 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

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

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

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