Found a proper way to colorize cards
This commit is contained in:
parent
f873990900
commit
54100d8e70
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user