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

Increase the size of the menu button #98

Closed zeraati closed 2 months ago

zeraati commented 5 months ago

How can I increase the size of the menu button? image

ZornitsaPesheva commented 5 months ago

You need to change the buttons definition of the base template. Click on Get the source code of base template main menu button - try changing width and height for the menuButton node menu button - try changing width and height for base_node_menu in the base definition

zeraati commented 5 months ago

I changed the height of the menu button But it is still displayed based on the height of the default template => height 3px https://code.balkan.app/change-base-template-menu-button#JS image

ZornitsaPesheva commented 5 months ago

Please send a screenshot of the expected result.

zeraati commented 5 months ago

default 3px 3px

this is 10 px 10px

zeraati commented 5 months ago

I changed the template in code to height 10px, but still the default size 3 is loaded in view Only if I change the codes in the inspect of chrome, the correct height will be displayed The page is loaded based on the initial default format, not based on the default format that I have changed https://code.balkan.app/change-base-template-menu-button#JS I changed the height of the menu button to 10 px But it is still displayed based on 3px height

ZornitsaPesheva commented 5 months ago

Yes, sorry. You need to change it for the current template: https://code.balkan.app/family-tree-js/menu-button-size#JS

zeraati commented 5 months ago

You need to change the buttons definition of the base template. Click on Get the source code of base template main menu button - try changing width and height for the menuButton node menu button - try changing width and height for base_node_menu in the base definition

base_node_menu has no height and width How can I make it bigger? image

ZornitsaPesheva commented 5 months ago

Edited the code demo: https://code.balkan.app/family-tree-js/menu-button-size#JS Added transform="matrix(1.5,0,0,1.5,-10,-10)" to change the button

zeraati commented 5 months ago

https://code.balkan.app/family-tree-js/menu-button-size#JS Clicking on menu and menu node not worked

ZornitsaPesheva commented 5 months ago

because the menus are empty; menu: {}, nodeMenu: {}

You can add menu options: nodeMenu: { details: { text: "Details" }, edit: { text: "Edit" }, add: { text: "Add" }, remove: { text: "Remove" } }, menu: { pdf: { text: "Export PDF" }, png: { text: "Export PNG" }, svg: { text: "Export SVG" }, csv: { text: "Export CSV" } },

zeraati commented 5 months ago

and for change color? image

fill property not work

ZornitsaPesheva commented 5 months ago

I have changed the color: https://code.balkan.app/family-tree-js/menu-button-size#JS