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

Possibility to move/style the expand buttons? #58

Closed Nimrod-666 closed 1 year ago

Nimrod-666 commented 1 year ago

Hi, is there a possibility to move/expand the collapse/expand buttons? I searched a few hours now and can't find how to move and resize them, in my example i would like to have them in the upper right corner.

resize

My code for the custom template:

FamilyTree.templates.myTemplate = Object.assign({}, FamilyTree.templates.tommy);

            FamilyTree.templates.myTemplate.size = [520, 150];
            FamilyTree.templates.myTemplate.node = '<circle cx="520" cy="100" r="100" fill="#4D4D4D" stroke-width="1" stroke="#aeaeae"></circle>';
            FamilyTree.templates.myTemplate.defs = "";

            FamilyTree.templates.myTemplate.field_0 = '<text data-text-overflow="ellipsis"  data-width="510" style="font-size: 28px; color:#FFCC33;" stroke="#FFCC33" fill="#FFCC33" x="20" y="130" text-anchor="start">{val}</text>';
            FamilyTree.templates.myTemplate.field_1 = '<text data-text-overflow="multiline"  data-width="510" style="font-size: 21px;" stroke="#FFFFFF" fill="#FFFFFF" x="20" y="70" text-anchor="start">{val}</text>';

            FamilyTree.templates.myTemplate.img_0 = '<clipPath id="ulaImg"><circle cx="460" cy="50" r="50"></circle></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#ulaImg)" xlink:href="{val}" x="420" y="10" width="90" height="90"></image>';

            FamilyTree.templates.myTemplate.link = '<path stroke="#d98008" stroke-width="5px" fill="none" data-l-id="[{id}][{child-id}]" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />';

            FamilyTree.templates.myTemplate_male = Object.assign({}, FamilyTree.templates.myTemplate);
            FamilyTree.templates.myTemplate_female = Object.assign({}, FamilyTree.templates.myTemplate);

            FamilyTree.templates.myTemplate_male.node = '<rect x="0" y="0" height="{h}" width="{w}" stroke-width="4" fill="#1A0200" stroke="#d98008" rx="7" ry="7"></rect><text style="font-size: 24px;" fill="#01A6EA" x="20" y="40" text-anchor="start">Male</text>';
            FamilyTree.templates.myTemplate_female.node = '<rect x="0" y="0" height="{h}" width="{w}" stroke-width="4" fill="#1A0200" stroke="#d98008" rx="7" ry="7"></rect><text style="font-size: 24px;" fill="#FFB1CB" x="20" y="40" text-anchor="start">Female</text>';
ZornitsaPesheva commented 1 year ago

https://code.balkan.app/family-tree-js/multiple-templates-family-tree#JS