search

BALKANGraph / FamilyTreeJS

Build family tree app with BALKAN FamilyTreeJS library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure.
50 stars 16 forks source link

CSV Import bug #24

Open TslEdv opened 1 year ago

TslEdv commented 1 year ago

I created a family tree and tried to add parents through nodeTreeMenu: true as seen here: image image

Exporting went well, csv file: image

Unfortunetly, when importing there happens a bug: Firstly, the expansion of family-tree is only on the Queen's head and the King's parent does not show in any way. image

Secondly, when I try to expand the only available expansion, this happens: image

The visuals completely break down, tried to zoom out: image

The code only has menu options for downloading and exporting, the menunode enabled and the royal family loaded in:

<!DOCTYPE html>
<html>
<script src="https://balkan.app/js/FamilyTree.js"></script>
<style>
    html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: Helvetica;
    overflow: hidden;
 }

 #tree {
    width: 100%;
    height: 100%;
 }
 </style>
<body>
    <div id="tree"></div>
    <script>
    var family = new FamilyTree(document.getElementById("tree"), {
       mouseScrool: FamilyTree.none,
       siblingSeparation: 120,
       template: 'john',
       nodeTreeMenu: true,
       nodeBinding: {
           field_0: "name",
           field_1: "title",
           img_0: "img",
       },
       menu: {
            importCSV: {text: "Import CSV", icon: FamilyTree.icon.csv(24,24,'red'), onClick: importCSVHandler},
            csv: { text: "Export CSV" },
            pdf: { text: "Export PDF" }
       }
    });

    function importCSVHandler(){
        family.importCSV();
    }

    family.load([
       { id: 1, pids: [2], name: "King George VI", img: "https://cdn.balkan.app/shared/f1.png", gender: 'male' },
       { id: 2, pids: [1], name: "Queen Elizabeth", title: "The Queen Mother", img: "https://cdn.balkan.app/shared/f2.png", gender: 'female' },

       { id: 3, pids: [4], mid: 2, fid: 1, name: "Queen Elizabeth II", img: "https://cdn.balkan.app/shared/f5.png", gender: 'female' },
       { id: 4, pids: [3], name: "Prince Philip", title: "Duke of Edinburgh", img: "https://cdn.balkan.app/shared/f3.png", gender: 'male' },

       { id: 5, mid: 2, fid: 1, name: "Princess Margaret", img: "https://cdn.balkan.app/shared/f6.png", gender: 'male' },

       { id: 6, mid: 3, fid: 4, pids: [7,8], name: "Charles", title: "Prince of Wales", img: "https://cdn.balkan.app/shared/f8.png", gender: 'male' },
       { id: 7, pids: [6], name: "Diana", title: "Princess of Wales", img: "https://cdn.balkan.app/shared/f9.png", gender: 'female' },
       { id: 8, pids: [6], name: "Camila", title: "Duchess of Cornwall", img: "https://cdn.balkan.app/shared/f7.png", gender: 'female' },

       { id: 9,  mid: 3, fid: 4, name: "Anne", title: "Princess Royal", img: "https://cdn.balkan.app/shared/f10.png", gender: 'female' },
       { id: 10,  mid: 3, fid: 4, name: "Prince Andrew", title: "Duke of York", img: "https://cdn.balkan.app/shared/f11.png", gender: 'male' },
       { id: 11,  mid: 3, fid: 4, name: "Prince Edward", title: "Earl of Wessex", img: "https://cdn.balkan.app/shared/f12.png", gender: 'male' },

       { id: 12, fid: 6, mid: 7, pids: [14], name: "Prince William", title: "Duch of Cambridge", img: "https://cdn.balkan.app/shared/f14.png", gender: 'male' },
       { id: 13, fid: 6, mid: 7, pids: [15], name: "Prince Harry", img: "https://cdn.balkan.app/shared/f15.png", gender: 'male' },
       { id: 14, pids: [12], name: "Catherine", title: "Duchess of Cambridge", img: "https://cdn.balkan.app/shared/f13.png", gender: 'female' },
       { id: 15, pids: [13], name: "Meghan Markle", img: "https://cdn.balkan.app/shared/f16.png", gender: 'female' },
       { id: 16, fid: 12, mid: 14, name: "Prince George", img: "https://cdn.balkan.app/shared/f17.png", gender: 'male' },
       { id: 17, fid: 12, mid: 14, name: "Prince Charlotte", img: "https://cdn.balkan.app/shared/f18.png", gender: 'female' },
       { id: 18, fid: 12, mid: 14, name: "Prince Louis", img: "https://cdn.balkan.app/shared/f19.png", gender: 'male' }
    ]);
    </script>
</body>
</html>

This is really annoying because the import function is basically unusable in this case.

Also a side question, is it possible to display the whole family tree somehow, without expand/collapsing a parent's family tree.