|
2 | 2 | <div |
3 | 3 | class="rf-container-fluid" |
4 | 4 | on:click={actualizeLines} |
| 5 | + on:mouseleave={() => {showFamily = undefined; showId = undefined}} |
5 | 6 | > |
6 | 7 | <div class="rf-grid-row rf-text--center"> |
7 | 8 | <div class="rf-col-12 rf-margin-3N"> |
8 | 9 | <strong>Visualisation des individus de l'arbre généalogique: </strong> |
9 | 10 | </div> |
10 | | - {#each Object.keys(gedcom).filter(x => /\@i.*@/i.test(x)).sort((a,b) => gedcom[a].rank - gedcom[b].rank) as id} |
11 | | - <GedcomPersonCard |
12 | | - id={id} |
13 | | - active={showFamily && ((showFamily === gedcom[id].fams) || (showFamily === gedcom[id].famc))} |
14 | | - record={gedcom[id]} |
15 | | - mouseenter={() => { |
16 | | - actualizeLines(); |
17 | | - showFamily = gedcom[id].fams; |
18 | | - }} |
19 | | - /> |
| 11 | + {#each Object.keys(gedcom) |
| 12 | + .filter(x => /\@i.*@/i.test(x)) |
| 13 | + .map(i => Math.round(gedcom[i].rank)) |
| 14 | + .sort() |
| 15 | + .filter(function(el,i,a){return i===a.indexOf(el)}) |
| 16 | + as gen} |
| 17 | + <div class="rf-container-fluid"> |
| 18 | + <div class="rf-grid-row rf-text--center rf-margin-bottom-2N"> |
| 19 | + {#each Object.keys(gedcom) |
| 20 | + .filter(i => /\@i.*@/i.test(i) && (Math.round(gedcom[i].rank) === gen)) |
| 21 | + as id} |
| 22 | + <GedcomPersonCard |
| 23 | + id={id} |
| 24 | + focus={(showId === id)} |
| 25 | + active={(!showId) |
| 26 | + || sameFamily(gedcom[id].fams,showFamily) |
| 27 | + || sameFamily(gedcom[id].famc,showFamily) |
| 28 | + || (gedcom[id].chil && gedcom[id].chil.some(c => c.id === showId)) |
| 29 | + } |
| 30 | + record={gedcom[id]} |
| 31 | + mouseenter={() => { |
| 32 | + actualizeLines(); |
| 33 | + showFamily = gedcom[id].fams; |
| 34 | + showId = id; |
| 35 | + }} |
| 36 | + /> |
| 37 | + {/each} |
| 38 | + </div> |
| 39 | + </div> |
20 | 40 | {/each} |
21 | 41 | </div> |
22 | 42 | </div> |
23 | | - {#each Object.keys(gedcom).filter(x => /\@f.*@/i.test(x)) as id} |
24 | | - <div class="line" class:rf-hide={showFamily !== id} id={id}></div> |
| 43 | + {#each Object.keys(gedcom).filter(x => /\@f.*@/i.test(x)) as f} |
| 44 | + <div class="line" class:rf-hide={!sameFamily(f,showFamily)} id={f}></div> |
25 | 45 | {/each} |
26 | 46 | {/if} |
27 | 47 |
|
|
31 | 51 | export let gedcom; |
32 | 52 | let computed = false; |
33 | 53 | let fmax = 10000; |
34 | | - let showFamily; |
| 54 | + let showFamily, showId; |
35 | 55 |
|
36 | 56 | const getGenerationRank = (i) => { |
| 57 | + if (!i) {return -1;} |
| 58 | + if (gedcom[i].rank !== undefined) { |
| 59 | + return gedcom[i].rank |
| 60 | + } |
37 | 61 | if(gedcom[i] && gedcom[i].pare) { |
38 | 62 | let fRank = 0; |
39 | 63 | if (gedcom[i].fams) { |
|
43 | 67 | fRank = Math.max(...gedcom[i].fams.map(f => parseInt((f.replace(/\@f(.*)\@/i,'$1'))))) / fmax; |
44 | 68 | } |
45 | 69 | } |
46 | | - return 1 + fRank + Math.min(...gedcom[i].pare.map(p => getGenerationRank(p.id))); |
| 70 | + gedcom[i].rank = 1 + fRank + Math.max(...gedcom[i].pare.map(p => getGenerationRank(p.id))); |
| 71 | + } else { |
| 72 | + gedcom[i].rank = 0; |
| 73 | + } |
| 74 | + gedcom[i].rank = Math.max( |
| 75 | + gedcom[i].rank || 0, |
| 76 | + (gedcom[i].cons && Math.max(...gedcom[i].cons.map(c => getGenerationRank(c.id)))) || 0 |
| 77 | + ); |
| 78 | + return gedcom[i].rank; |
| 79 | + } |
| 80 | +
|
| 81 | + const sameFamily = (f1, f2) => { |
| 82 | + if (!f1) {return false} |
| 83 | + if (f1 && typeof(f1) === 'string') { |
| 84 | + f1 = [f1]; |
47 | 85 | } |
48 | | - return 0; |
| 86 | + return f1.some(f => f2 && f2.includes(f)); |
49 | 87 | } |
50 | 88 |
|
51 | 89 | const actualizeLines = () => { |
|
79 | 117 | f.chil = f.chil.map(c => c) |
80 | 118 | } |
81 | 119 | f.chil.forEach(c => { |
82 | | - gedcom[c].pare = parents.map(p => { |
| 120 | + gedcom[c].pare = parents.filter(p => gedcom[p]).map(p => { |
83 | 121 | return { |
84 | 122 | id: p, |
85 | 123 | surn: gedcom[p].surn || gedcom[p].name.replace(/^.*\/\s*(.*)\s*\/.*$/,'$1'), |
|
88 | 126 | }) |
89 | 127 | }) |
90 | 128 | parents.forEach(p => { |
91 | | - gedcom[p].chil = f.chil.map(c => { |
| 129 | + gedcom[p].chil = f.chil.filter(c => gedcom[c]).map(c => { |
92 | 130 | return { |
93 | 131 | id: c, |
94 | 132 | surn: gedcom[c].surn || gedcom[c].name.replace(/^.*\/\s*(.*)\s*\/.*$/,'$1'), |
|
98 | 136 | }) |
99 | 137 | } |
100 | 138 | if (f.wife && f.husb) { |
101 | | - gedcom[f.wife].cons = { |
| 139 | + if (!gedcom[f.wife].cons) { gedcom[f.wife].cons = [] } |
| 140 | + gedcom[f.wife].cons.push({ |
102 | 141 | id: f.husb, |
103 | 142 | surn: gedcom[f.husb].surn || gedcom[f.husb].name.replace(/^.*\/\s*(.*)\s*\/.*$/,'$1'), |
104 | 143 | givn: gedcom[f.husb].givn || gedcom[f.husb].name.replace(/^(.*)\/\s*(.*)\s*\/.*$/,'$1') |
105 | | - } |
106 | | - gedcom[f.husb].cons = { |
| 144 | + }); |
| 145 | + if (!gedcom[f.husb].cons) { gedcom[f.husb].cons = [] } |
| 146 | + gedcom[f.husb].cons.push({ |
107 | 147 | id: f.wife, |
108 | 148 | surn: gedcom[f.wife].surn || gedcom[f.wife].name.replace(/^.*\/\s*(.*)\s*\/.*$/,'$1'), |
109 | 149 | givn: gedcom[f.wife].givn || gedcom[f.wife].name.replace(/^(.*)\/\s*(.*)\s*\/.*$/,'$1') |
110 | | - } |
| 150 | + }); |
111 | 151 | } |
112 | 152 | }); |
113 | 153 | Object.keys(gedcom).filter(x => /\@i.*\@/i.test(x)).forEach(i => { |
114 | | - gedcom[i].rank = getGenerationRank(i); |
| 154 | + getGenerationRank(i); |
115 | 155 | }); |
116 | 156 | computed = true; |
117 | 157 | actualizeLines(); |
|
165 | 205 | </script> |
166 | 206 |
|
167 | 207 | <style> |
| 208 | +
|
168 | 209 | .line{ |
169 | 210 | position:absolute; |
170 | 211 | width:2px; |
|
0 commit comments